/* =========================================================
   koukasai-lp.css — 越華祭2026「4人の卒業生 4つの物語」LP 専用
   Claude Design（LP.dc.html）から x-dc 依存を除去して移植。
   本文の見た目は各要素のインラインstyleが持つ。このファイルは
   「x-dc の条件分岐（sc-if）」「hover」「メニュー開閉」を担当する。
   ========================================================= */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  color:#1c2b45;background:#fff;-webkit-font-smoothing:antialiased;
}
a{color:#123c7a;text-decoration:none}
a:hover{color:#1c6fc0}
img{display:block;max-width:100%}

/* ===== レスポンシブ切替 =====
   元データは isDesktop / isMobile で別マークアップを出し分けていた。
   同じ2系統をCSSのメディアクエリで切り替える。境界820pxは
   元データの breakpoint 初期値と同じ。 */
@media (max-width:819.98px){ .only-dk{display:none !important} }
@media (min-width:820px){ .only-mb{display:none !important} }

/* ===== モバイルメニュー ===== */
.mobile-menu{display:none}
.mobile-menu.open{display:flex}

/* ===== hover（元データの style-hover 属性を移植） ===== */
.card-navy{transition:border-color .2s,box-shadow .2s}
.card-navy:hover{border-color:#12336d;box-shadow:0 4px 12px rgba(18,51,109,.12)}
.card-green{transition:border-color .2s,box-shadow .2s}
.card-green:hover{border-color:#1b7a3e;box-shadow:0 4px 12px rgba(27,122,62,.14)}

/* 登壇者カードはリンクではないので hover は付けない（押せると誤解させない） */

.line-cta{transition:filter .2s}
.line-cta:hover{filter:brightness(1.06)}

/* ===== 円形の写真スロット =====
   元データの <image-slot> 相当。円形にトリミングして敷き詰める。 */
.slot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 登壇者アバター（写真未入手のプレースホルダー）
   写真が届いたら .avatar を <img class="slot"> に差し替える。 */
.avatar{
  width:100%;height:100%;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#eef3f9;color:#9fb2c9;
}

/* ===== 地図 ===== */
.map-frame{width:100%;flex:1;min-height:180px;border:1px solid #dde8f4;border-radius:6px;overflow:hidden}
.map-frame iframe{width:100%;height:100%;min-height:180px;border:0;display:block}

/* ===== フォーカス可視化（キーボード操作） ===== */
a:focus-visible,button:focus-visible{outline:3px solid #1c6fc0;outline-offset:2px}

/* ===== ヒーロー直下の余白調整 =====
   モバイルはヒーロー下34px＋リード上31pxで65px空き、間延びしていた。
   スマホが主戦場なのでモバイルのみ詰める（デスクトップは元の間隔を維持）。 */
@media (max-width:819.98px){
  .lead-sec{padding-top:22px !important}
}

/* ===== スマホのヒーロー写真：文字の背面に敷いて白く霞ませる =====
   写真を上下に分けると間延びするので、元データ同様に文字の背後へ重ねる。
   ただしそのままだと見出しと日時が読めないので、写真とテキストの間に
   白いベール（.hero-scrim-mb）を1枚挟み、写真をうっすら透かせる。 */
@media (max-width:819.98px){
  .hero-photos-mb{
    position:absolute !important;
    top:-14px !important; right:-20px !important;
    width:min(84vw,330px) !important;
    height:min(113vw,444px) !important;
    margin:0 !important;
    z-index:0;
  }
  .hero-scrim-mb{
    position:absolute; top:-52px; bottom:0; left:-24px; right:-24px;
    z-index:1; pointer-events:none;
    background:
      linear-gradient(to bottom,
        rgba(255,255,255,.60) 0%,
        rgba(255,255,255,.72) 46%,
        rgba(255,255,255,.90) 78%,
        rgba(255,255,255,.98) 100%),
      linear-gradient(105deg,
        rgba(255,255,255,.90) 0%,
        rgba(255,255,255,.80) 40%,
        rgba(255,255,255,.44) 70%,
        rgba(255,255,255,.28) 100%);
  }
}

/* ヒーローのCTA：狭い幅では1カラムにしてラベルを1行に収める */
@media (max-width:479.98px){
  .hero-cta-mb{grid-template-columns:1fr !important}
}

/* 大きなLINE CTA のロゴ */
.line-badge{display:block;flex:0 0 auto;width:clamp(30px,3vw,38px);height:clamp(30px,3vw,38px)}
.line-badge svg{width:100%;height:100%}
/* 末尾の「›」と文字が重ならないよう右側を空ける */
.line-cta{padding-right:clamp(34px,5vw,56px) !important}