/* ============================================================
   custom.css — レスポンシブ微調整 / ヘッダー再構成 / メンバー枚数
   納品の top.css / common.css は変更せず、本ファイルの上書きのみで調整。
   ロールバックは <head> の link 削除でOK。
   ============================================================ */

/* ---- A / F : SP(≤767.98)の主要サイズを頭打ち（大型スマホの肥大解消） ---- */
@media screen and (max-width: 767.98px) {
  .top-h2 > h2 { font-size: min(calc(36 / 390 * 100vw), 48px); }
  .top-h2 > p  { font-size: min(calc(16 / 390 * 100vw), 20px); }
  .top-h2      { padding-left: min(calc(24 / 390 * 100vw), 34px); }

  .top-mv-logo   { width: min(calc(148 / 390 * 100vw), 200px); }
  .top-mv-title  { width: min(calc(240 / 390 * 100vw), 330px); }
  .top-mv-inner  { padding-top: min(calc(220 / 390 * 100vw), 300px); }
  .top-mv-news   { margin-top: min(calc(48 / 390 * 100vw), 64px); }
  .top-mv-bg-pic { width: min(calc(260 / 390 * 100vw), 360px); }

  .top-member .section-inner,
  .top-company .section-inner,
  .top-news .section-inner {
    padding-top:    min(calc(80 / 390 * 100vw), 104px);
    padding-bottom: min(calc(80 / 390 * 100vw), 104px);
  }
}

/* ============================================================
   Members : もう少し小さく、PCで約8枚見えるように（swiperは slidesPerView:auto）
   ============================================================ */
/* ロゴをあしらった装飾（card_head.svg / card_foot.svg）を全面的に非表示 */
.top-member-card-thumb::after { display: none !important; }

/* 枚数カウンタ（例: 1/17）を非表示（送りは prev/next で操作） */
.top-member-slide-page { display: none !important; }

@media screen and (min-width: 767.99px) {
  .top-member-slide-inner > ul > li { width: 220px; }           /* 262→220: ~6枚表示 */
  .top-member-card-profile { height: 72px; padding: 14px 18px 0; }
  .top-member-card-profile-job { font-size: 1.1rem; }
  .top-member-card-profile-name { display: block; }
  .top-member-card-profile-name-ja { font-size: 1.5rem; }
  .top-member-card-profile-name-en { font-size: 0.95rem; letter-spacing: .02em; }
}
@media screen and (max-width: 767.98px) {
  .top-member-slide-inner > ul > li { width: calc(160 / 390 * 100vw); }
  .top-member-card-profile { height: calc(74 / 390 * 100vw); padding: calc(8 / 390 * 100vw) calc(12 / 390 * 100vw) 0; }
  .top-member-card-profile-name-ja { font-size: calc(14 / 390 * 100vw); }
  .top-member-card-profile-job { font-size: calc(9 / 390 * 100vw); }
}

/* ============================================================
   Header nav : 4グループ（Why / How / What / about）＋プルダウン
   ============================================================ */

/* ナビの欧文フォントを整える（Gotham系のジオメトリックサンス = Montserrat） */
.nav-top, .nav-drop a {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, 'Noto Sans JP', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* News: 独立ソロ項目（プルダウン無し）— キャレット非表示・アンカーの下線なし */
.nav-top.nav-solo { text-decoration: none; }
.nav-top.nav-solo::after { display: none !important; }

/* --- PC(≥768): 右上バー＋ホバーで下にドロップダウン --- */
@media screen and (min-width: 767.99px) {
  .header-menu-inner > ul { gap: 0 30px; }
  .nav-grp { position: relative; height: 100%; display: flex; align-items: center; }
  .nav-top {
    color: #1D3B6F; font-weight: 600; font-size: 1.4rem; letter-spacing: .1em;
    cursor: pointer; padding: 6px 0; display: inline-flex; align-items: center; transition: color .2s;
  }
  .nav-top::after {
    content: ""; width: 6px; height: 6px; margin-left: 7px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px); transition: transform .2s;
  }
  .nav-grp:hover .nav-top { color: #E84829; }
  .nav-grp:hover .nav-top::after { transform: rotate(225deg) translateY(-1px); }

  .nav-drop {
    position: absolute; top: 100%; right: 0; min-width: 190px;
    background: #fff; border-radius: 8px; box-shadow: 0 14px 34px rgba(20,30,50,.16);
    padding: 8px 0; list-style: none; z-index: 300;
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s;
  }
  .nav-grp:hover .nav-drop { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-drop > li { list-style: none; }
  .nav-drop a {
    display: block; padding: 9px 20px; color: #1D3B6F; font-size: 1.25rem; letter-spacing: .03em;
    white-space: nowrap; background: none; transition: background .15s, color .15s;
  }
  .nav-drop a:hover { background: #f5f7fb; color: #E84829; }
}

/* --- SP(≤767.98): 濃紺オーバーレイ内でアコーディオン --- */
@media screen and (max-width: 767.98px) {
  .nav-grp { display: block; }
  .nav-top {
    color: #fff; font-weight: 700; font-size: 1.6rem; letter-spacing: .04em;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0; cursor: pointer;
  }
  .nav-top::after {
    content: ""; width: 8px; height: 8px; margin-left: 12px;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(45deg); transition: transform .25s;
  }
  .nav-grp.open .nav-top::after { transform: rotate(225deg); }
  .nav-drop {
    list-style: none; padding: 0; margin: 0; overflow: hidden;
    max-height: 0; transition: max-height .3s ease;
  }
  .nav-grp.open .nav-drop { max-height: 320px; padding: 2px 0 10px; }
  .nav-drop > li { list-style: none; }
  .nav-drop a {
    display: block; color: #cfd8ea; font-size: 1.3rem; padding: 9px 0 9px 16px;
    background: none; width: fit-content;
  }
  .nav-drop a:active { color: #fff; }
}

/* ============================================================
   News（一覧）微調整
   ・日付幅を固定 → カテゴリタグ（登壇/イベント等）の縦ラインを揃える
   ・タイトル行をflex化 → 「詳細」リンクを本文の右端へ（改行させない）
   PCのみ。SPは news.css の既存レイアウト（詳細は margin-left:auto で右寄せ）を維持。
   ============================================================ */
@media screen and (min-width: 767.99px) {
  .news-detail-info-date {
    width: 92px; flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums;
  }
  .news-detail-title {
    display: flex; align-items: center; justify-content: space-between; gap: 0 24px;
  }
  .news-detail-title > p { margin: 0; }
  .news-detail-service { flex-shrink: 0; margin: 0; }
}

/* News: 複数リンク（SSGW/Great Wave/八千代）を本文右端にまとめる */
@media screen and (min-width: 767.99px) {
  .news-detail-title .news-links { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
}

/* トップページ News セクションも /news/ と体裁統一（タグ縦ライン揃え＋詳細を本文右端に） */
@media screen and (min-width: 767.99px) {
  .top-news-detail-info-date { width: 92px; flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .top-news-detail-title { display: flex; align-items: center; justify-content: space-between; gap: 0 24px; }
  .top-news-detail-title > p { margin: 0; }
  .top-news-detail-service { flex-shrink: 0; margin: 0; }
}

/* ============================================================
   Company : 会社名の右に LinkedIn（SISI公式ページへ）
   ============================================================ */
.company-name { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.company-sns { display: inline-flex; align-items: center; line-height: 0; }
.company-sns svg { width: 20px; height: 20px; display: block; fill: #1D3B6F; transition: opacity .2s; }
.company-sns:hover svg { opacity: .6; }

/* ============================================================
   Narrative(top-message)の強調ハイライト（#8・ヨアン指摘）
   既定：ベタ塗り無し・ネイビー文字・本文と同じ太さ(600)・通常の字送り。
   ホバー：他所と同じアクセント赤(#E84829)が左からゆっくりワイプ＋白文字。
   ・箱の余白は padding と 同量の負margin で相殺（レイアウトの字送りは不変）。
   ・文字の白化はワイプと同じ速度/イージングで同期（ワイプ前方の白文字が
     背景に埋もれて見えにくくなるのを回避）。
   ※納品 top.css は変更せず本ファイルで上書き。
   ============================================================ */
.top-message-text > p > strong { padding: 0 0.25em; margin: 0 -0.25em; font-weight: 600; }
.top-message-text > p > strong > span { color: #1D3B6F; transition: color .5s cubic-bezier(.2, .7, .2, 1); }
.top-message-text > p > strong::before {
  background-color: #E84829;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .top-message-text > p > strong:hover::before { transform: scaleX(1); }
  .top-message-text > p > strong:hover > span { color: #fff; }
}

/* News（ソロ<a>）: common.css の `.header-menu-inner > ul > li > a{font-size:1.2rem}` に
   負けて他項目(1.4rem/1.6rem)より小さくなる問題を、高い特異度で解消し揃える。 */
@media screen and (min-width: 767.99px) { .header-menu-inner .nav-top.nav-solo { font-size: 1.4rem; } }
@media screen and (max-width: 767.98px) { .header-menu-inner .nav-top.nav-solo { font-size: 1.6rem; } }

/* ============================================================
   Case Study：SGN の Theory of Change 表記
   PDF(Ver.1)へのリンクを撤去し、非リンクの「Dashboard (coming soon)」注記に。
   旧 <a>（下線＋PDFアイコン）と同じ上マージンを踏襲しつつ、公開前を示す
   ミュートカラーで表示（クリック不可）。
   ============================================================ */
.top-change-study-outline-text > .top-change-study-toc-note {
  margin-top: calc(20 / 1440 * 100cqw);
  color: #6b7688;
  font-weight: 600;
}
@media screen and (max-width: 767.98px) {
  .top-change-study-outline-text > .top-change-study-toc-note {
    margin-top: calc(20 / 390 * 100vw);
    font-size: calc(13 / 390 * 100vw);
  }
}