/* ════════════════════════════════════════════
   メディアページ専用スタイル
   ════════════════════════════════════════════ */

/* ── HERO ── */
.media-hero{
  background:var(--ink);
  padding:160px 5vw 80px;
  position:relative;overflow:hidden;
}
.media-hero::before{
  content:'';position:absolute;
  top:-200px;left:50%;transform:translateX(-50%);
  width:700px;height:700px;
  background:radial-gradient(circle,rgba(30,143,160,.14) 0%,transparent 55%);
  pointer-events:none;
}
.media-hero::after{
  content:'';position:absolute;
  bottom:-150px;right:-100px;
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(217,95,26,.10) 0%,transparent 60%);
  pointer-events:none;
}
.media-hero-inner{
  max-width:1100px;margin:0 auto;
  text-align:center;position:relative;z-index:1;
}
.media-hero .s-chip{margin:0 auto 1.5rem;display:inline-flex}
.media-hero h1{
  font-family:'Syne',sans-serif;
  font-size:clamp(2.2rem,4vw,3.4rem);
  font-weight:800;letter-spacing:-.02em;
  line-height:1.25;color:#fff;
  margin:0 auto 1.2rem;
}
.media-hero p.lead{
  font-size:1rem;color:rgba(255,255,255,.65);
  line-height:1.9;max-width:680px;margin:0 auto;
}

/* ── 共通セクションタイトル ── */
.media-sec-title{
  font-family:'Syne',sans-serif;
  font-size:clamp(1.6rem,2.8vw,2.2rem);
  font-weight:800;letter-spacing:-.01em;
  color:#111;margin:0 0 .8rem;
}
.media-sec-sub{
  font-size:.95rem;color:#555;
  margin:0 0 3rem;
  line-height:1.8;
}

/* ── SNS CARDS SECTION ── */
.media-cards-sec{
  background:#f7f7f5;
  padding:80px 5vw;
}
.media-cards-wrap{
}
.media-cards-sec .s-chip{display:inline-flex;margin-bottom:1.2rem}
.media-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.6rem;
  margin-top:3rem;
}
.media-card{
  display:flex;gap:1.4rem;align-items:flex-start;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:2rem 2rem;
  text-decoration:none;color:inherit;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),
             box-shadow .3s,
             border-color .3s;
  position:relative;overflow:hidden;
}
.media-card::after{
  content:'';position:absolute;
  top:0;left:0;right:0;height:3px;
  background:transparent;transition:background .3s;
}
.media-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.08);
  border-color:transparent;
}
.media-card.is-x:hover::after{background:#000}
.media-card.is-linkedin:hover::after{background:#0A66C2}
.media-card.is-note:hover::after{background:#41C9B4}

.media-card-icon{
  flex-shrink:0;
  width:64px;height:64px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:14px;
  transition:background .3s,color .3s;
}
.media-card-icon svg{width:28px;height:28px}
.media-card.is-x .media-card-icon{background:rgba(0,0,0,.06);color:#000}
.media-card.is-x:hover .media-card-icon{background:#000;color:#fff}
.media-card.is-linkedin .media-card-icon{background:rgba(10,102,194,.08);color:#0A66C2}
.media-card.is-linkedin:hover .media-card-icon{background:#0A66C2;color:#fff}
.media-card.is-note .media-card-icon{background:rgba(65,201,180,.10);color:#2BA890}
.media-card.is-note:hover .media-card-icon{background:#41C9B4;color:#fff}

.media-card-body{flex:1;min-width:0}
.media-card-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Syne',sans-serif;
  font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;
  padding:4px 12px;
  background:rgba(217,95,26,.10);color:#D9601A;
  border-radius:100px;
  margin-bottom:.7rem;
}
.media-card-tag-mark{
  font-weight:800;letter-spacing:0;opacity:.85;
}
.media-card-name{
  font-size:1.25rem;font-weight:800;
  color:#111;line-height:1.3;margin-bottom:.2rem;
}
.media-card-handle{
  font-family:'Syne',sans-serif;
  font-size:.85rem;color:#888;
  margin-bottom:.85rem;
}
.media-card-desc{
  font-size:.88rem;line-height:1.75;
  color:#444;margin:0 0 1.1rem;
}
.media-card-cta{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:'Syne',sans-serif;
  font-size:.82rem;font-weight:700;letter-spacing:.04em;
  color:#111;
}
.media-card-cta .arrow{
  display:inline-block;transition:transform .25s;
}
.media-card:hover .media-card-cta .arrow{transform:translateX(4px)}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .media-cards{grid-template-columns:1fr;gap:1.2rem}
  .media-cards-sec{padding:80px 5vw}
}
@media(max-width:600px){
  .media-hero{padding:120px 5vw 60px}
  .media-card{flex-direction:column;gap:1rem;padding:1.6rem 1.4rem}
  .media-card-icon{width:54px;height:54px}
  .media-card-icon svg{width:24px;height:24px}
  .media-card-name{font-size:1.1rem}
}