@charset "UTF-8";
/* =====================================================
   NIKKEI THE CORE - Top page (PC)
   Figma デザイン準拠 / 単位は px
   デザイン幅: 1440px / コンテンツ幅: 1280px（左右マージン 80px）
===================================================== */

/* =====================================================
   Webフォント（ローカル）
   Sanomat Sans … 英字見出し・数字（Light/Regular/Medium）
   Source Han Sans … 日本語（Regular/Medium/Bold）
===================================================== */
@font-face {
  font-family: "Sanomat Sans";
  src: url("../fonts/SanomatSans-Light-Web.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sanomat Sans";
  src: url("../fonts/SanomatSans-Regular-Web.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sanomat Sans";
  src: url("../fonts/SanomatSans-Medium-Web.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Han Sans JP";
  src:
    url("../fonts/SourceHanSans-Regular.woff2") format("woff2"),
    url("../fonts/SourceHanSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Han Sans JP";
  src:
    url("../fonts/SourceHanSans-Medium.woff2") format("woff2"),
    url("../fonts/SourceHanSans-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Han Sans JP";
  src:
    url("../fonts/SourceHanSans-Bold.woff2") format("woff2"),
    url("../fonts/SourceHanSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =====================================================
   英字見出し・ナビ（英語表記）は Sanomat Sans を適用
   ※日本語は body（Source Han Sans JP）を継承
===================================================== */
.secTitle,
.news__title,
.member__title,
.pt-sp__title,
.related__title,
.contact__title,
.gnav__item a,
.footer-nav a,
.drawer__list a {
  font-family: "Sanomat Sans", sans-serif;
}

/* ---- 共通ラッパー ---- */
.inner {
  width: 1280px;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 80px;
  box-sizing: content-box;
}

/* SP のみで有効な改行（PC では非表示） */
.br-sp {
  display: none;
}

/* SP メニュー開閉トグル（チェックボックスは常に不可視）
   position:fixed で常にビューポート内に固定し、ラベル操作時の
   フォーカス移動によるページ最上部へのスクロールを防ぐ */
.menu-toggle {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ドロワーメニューは PC では非表示（SP のみで使用） */
.drawer {
  display: none;
}

/* セクション共通の英字見出し */
.sectionTitle {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

/* =====================================================
   Header（node 50:355）
===================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 32px;
}

.header__logo {
  display: block;
  flex-shrink: 0;
  /* FV の背景が見えている間はロゴを隠す（FV を過ぎてスクロールすると表示） */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

/* スクロールで FV を過ぎたら .header に .is-scrolled が付与され、ロゴを表示 */
.header.is-scrolled .header__logo {
  opacity: 1;
  visibility: visible;
}

.header__logo img {
  width: 315px;
  height: 60px;
}

.header__nav .gnav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.gnav__item a {
  display: block;
  padding: 2px 0;
  color: #fff;
  font-size: 16px;
  line-height: normal;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.gnav__item a:hover {
  opacity: 0.7;
}

/* ハンバーガーメニューは PC では非表示（SP で表示） */
.header__menu {
  display: none;
}

/* =====================================================
   FV / Main Visual（node 50:96）
===================================================== */
.fv {
  position: relative;
  height: 1024px;
  padding: 240px 80px 80px;
  background: #000;
  overflow: hidden;
}

.fv__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.fv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 右揃え：cover でトリミングされる場合も右側（日本地図）が切れないように */
  object-position: right;
}

.fv__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}

.fv__logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.fv__logo img {
  width: 736px;
  height: 140px;
}

.fv__project {
  margin-top: 0;
  color: #fff;
  font-size: 33.55px;
  font-weight: 700;
  letter-spacing: 3.355px;
  line-height: normal;
  white-space: nowrap;
}

.fv__catch {
  color: #fff;
  font-size: 47px;
  font-weight: 700;
  line-height: 72px;
  letter-spacing: 4.7px;
  white-space: nowrap;
}

/* =====================================================
   共通セクション見出し（英字）
===================================================== */
.secTitle {
  color: #001629;
  font-size: 40px;
  /* Sanomat Sans は最大 Medium(500)。デザインの英字見出しに合わせる */
  font-weight: 500;
  line-height: normal;
}

/* =====================================================
   About（node 50:105）
===================================================== */
.about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
  padding: 120px 80px;
  background: #fff;
}

.about__contents {
  width: 100%;
}

.about__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: #001629;
  flex-shrink: 0;
}

.about__lead {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 3.2px;
  line-height: normal;
}

.about__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
  letter-spacing: 1.6px;
  line-height: 33px;
}

/* Contents は 左テキスト + 右画像の2カラム */
.about__contents {
  display: flex;
  gap: 64px;
  align-items: flex-start;
  justify-content: center;
}

.about__pics {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about__pics img {
  width: 100%;
  max-width: 624px;
  height: auto;
}

.about__annotation {
  font-size: 12px;
}

/* =====================================================
   News（node 50:127）
===================================================== */
.news {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  padding: 120px 80px;
  background: #EEE;
}

.news__title {
  color: #001629;
  font-size: 32px;
  font-weight: 500;
  line-height: normal;
}

.news__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  font-size: 16px;
}

.news__item {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  width: 100%;
}

.news__date {
  flex-shrink: 0;
  width: 180px;
  color: #777;
  line-height: 24px;
}

.news__body {
  flex: 1 0 0;
  min-width: 0;
  color: #001629;
  line-height: 24px;
}

.news__link {
  color: #001629;
  text-decoration: underline;
  text-underline-position: from-font;
  transition: color 0.2s;
}

.news__link:hover {
  color: #0077D9;
}

/* =====================================================
   共通見出し（白バリアント）
===================================================== */
.secTitle--light {
  color: #fff;
}

/* =====================================================
   Scheme（node 50:133）
===================================================== */
.scheme {
  padding: 120px 80px;
  background: #001629;
  color: #fff;
}

.scheme__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.scheme__title {
  /* 見出し → 本文（Contents）まで 80px */
  margin-bottom: 80px;
}

.scheme__desc {
  font-size: 16px;
  line-height: 24px;
  width: 1280px;
  max-width: 100%;
  /* 本文 → 4ステップまで 32px（Contents内gap） */
  margin-bottom: 32px;
}

/* ---- 4 steps ---- */
.steps {
  display: flex;
  gap: 16px;
  align-items: stretch;
  width: 100%;
  /* 4ステップ → 分科会テーマまで 80px（セクション外側gap） */
  margin-bottom: 80px;
}

.step {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0 40px 40px 40px;
  background: #fff;
}

.step__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  text-align: left;
  color: #fff;
  background-image: linear-gradient(110deg, #64E0FE 0%, #0077D9 100%);
}

.step__num {
  /* デザインの数字は Sanomat Sans Light（64px / weight 300） */
  font-family: "Sanomat Sans", sans-serif;
  font-size: 64px;
  font-weight: 300;
  line-height: 64px;
}

.step__heading {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: normal;
}

.step__body {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 16px 32px;
  color: #001629;
}

.step__subtitle {
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.step__text {
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}

.steps__arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.steps__arrow img {
  width: 32px;
  height: 32px;
}

/* ---- 分科会テーマ ---- */
.themes {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.themes__title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  width: 1280px;
  max-width: 100%;
}

.themes__desc {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  width: 1280px;
  max-width: 100%;
}

.themes__list {
  display: flex;
  gap: 16px;
  align-items: stretch;
  width: 100%;
}

.theme {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* glow がカード上端から上に飛び出す分の余白 */
  padding-top: 13px;
}

.theme__body {
  flex: 1 0 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 16px 32px;
  border-radius: 40px;
  /* カード本体は white/10 の単色（半透明） */
  background: rgba(255, 255, 255, 0.1);
  position: relative;
}

/* 枠線は擬似要素でグラデーション化（上→下）。
   mask で内側をくり抜き 1px の枠だけを残すため、本体背景には影響しない */
.theme__body::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  /* 枠線の直線部（4辺）はほぼ一定の濃さ、右上・左下のコーナーだけ消える表現。
     conic-gradient で右上(45deg付近)・左下(225deg付近)にだけ透明の谷を作り、
     それ以外（左上・右下を含む大半）は濃いまま保つ。
     角度は12時=0deg・時計回り。谷を狭くすることで「コーナーだけ消える」感を強調。 */
  background: conic-gradient(from 0deg at 50% 50%,
      rgba(255, 255, 255, 0.4) 25deg,
      rgba(255, 255, 255, 0) 45deg,
      rgba(255, 255, 255, 0.4) 65deg,
      rgba(255, 255, 255, 0.4) 205deg,
      rgba(255, 255, 255, 0) 225deg,
      rgba(255, 255, 255, 0.4) 245deg,
      rgba(255, 255, 255, 0.4) 385deg);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  /* 枠線は glow(z-index:1) より背面に置き、glow 越しに透けて見えるようにする */
  z-index: 0;
}

/* glow（青い発光）はカード内の絶対配置。カード上端から上へ飛び出し、
   カード背景・枠線より前面（半透明）に重ねることで、枠線が glow 越しに透ける */
.theme__glow {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  border-radius: 120px;
  overflow: hidden;
  z-index: 1;
  opacity: 0.85;
  pointer-events: none;
}

.theme__glow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.theme__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  /* glow より前面に表示 */
  position: relative;
  z-index: 2;
}

.theme__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 60px;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.theme__name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  color: #fff;
}

.theme__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
  color: #fff;
  /* glow より前面に表示 */
  position: relative;
  z-index: 2;
}

/* =====================================================
   Project Member（node 50:247）
===================================================== */
.member {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  padding: 120px 80px;
  background: #EEE;
}

.member__title {
  color: #001629;
  font-size: 32px;
  font-weight: 500;
  line-height: normal;
}

.member__contents {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.member__desc {
  color: #001629;
  font-size: 16px;
  line-height: normal;
}

.member__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* 各段。4カラムのグリッドにし、1段目は4枚で埋まり、
   2段目は3枚で左寄せ（右端 1 枠が空く）になる。
   grid なのでどちらの段もカード幅が完全に揃う。 */
.member__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}

/* 2段目（3枚）は1段目と同じカード幅を保ったまま中央寄せにする。
   カード幅 = (コンテナ幅 - gap×3) / 4 を固定幅カラムとして3つ並べ、
   justify-content:center で中央に配置する。 */
.member__row--center {
  grid-template-columns: repeat(3, calc((100% - 48px) / 4));
  justify-content: center;
}

.member-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 16px;
  border-radius: 40px;
  background: #fff;
}

.member-card__role {
  color: #001629;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  /* PC 表示で 1 行に収める（狭い幅ではフォントサイズを段階的に縮小） */
  white-space: nowrap;
}

/* PC 表示（897px 以上）でカード幅が狭くなる帯域は、
   「アドバイザリーボード」等が 1 行に収まるようフォントサイズを段階的に縮小する。
   896px 以下は SP 用メディアクエリでカードが縦 1 列（幅 100%）になるため対象外。 */
@media (min-width: 897px) and (max-width: 1120px) {
  .member-card__role {
    font-size: 13px;
    letter-spacing: 0.3px;
  }
}

@media (min-width: 1121px) and (max-width: 1280px) {
  .member-card__role {
    font-size: 15px;
    letter-spacing: 0.5px;
  }
}



.member-card__photo {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.member-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-card__photo--empty {
  background: #EEE;
}

/* PC 表示（897px 以上）でカード幅が 180px を下回る帯域は、
   写真がカードからはみ出すため、カード幅に追従して縮小する。
   aspect-ratio と border-radius:50% で丸い形は維持。
   896px 以下は SP 用メディアクエリでカードが幅 100% になり 180px が収まるため対象外。
   ※ ベース定義（width/height:180px）より後に置き、確実に上書きさせる。 */
@media (min-width: 897px) and (max-width: 1280px) {
  .member-card__photo {
    width: 100%;
    height: auto;
    max-width: 180px;
    aspect-ratio: 1 / 1;
    flex-shrink: 1;
  }
}

.member-card__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: center;
}

.member-card__name {
  color: #001629;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.member-card__affil {
  color: #777;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
}

/* =====================================================
   Partner / Supporter（node 50:273）
===================================================== */
.pt-sp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  padding: 120px 80px;
  background: #001629;
}

.pt-sp__block {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
}

.pt-sp__title {
  color: #fff;
  font-size: 32px;
  font-weight: 500;
  line-height: normal;
}

.logo-band {
  width: 100%;
  border-radius: 40px;
  background: #fff;
  overflow: hidden;
  padding: 16px;
}

.logo-band__inner {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 16px;
}

.logo-band__logo img {
  height: 60px;
  width: auto;
  object-fit: contain;
}

/* 「（申請中）」注釈付きロゴ。ロゴ画像の縦位置は他と揃えたまま、
   注釈だけを画像直下に絶対配置で添える */
.logo-band__logo--pending {
  position: relative;
}

.logo-band__note {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 12px;
  color: #777;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

/* =====================================================
   Related Contents（node 50:290）
===================================================== */
.related {
  padding: 120px 80px;
  background: #EEE;
}

.related__inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.related__title {
  color: #001629;
  font-size: 32px;
  font-weight: 500;
  line-height: normal;
}

.related__groups {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.related-group {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.related-group__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #001629;
}

.related-group__name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}

.related-group__lead {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.8px;
}

.related-group__lead a {
  color: #001629;
  text-decoration: underline;
  text-underline-position: from-font;
  transition: color 0.2s;
}

.related-group__lead a:hover {
  color: #0077D9;
}

.related-group__list {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

/* 3カラムのカード */
.related-card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #fff;
  overflow: hidden;
}

.related-card__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 358 / 201;
  background: #777;
}

/* サムネ内の画像は枠（358:201）いっぱいに敷き詰める。
   これがないと画像本来の高さでサムネ高さが変わり、カードの高さがそろわない。 */
.related-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* YouTube 埋め込み（group3）もサムネ枠いっぱいに収める。
   枠は aspect-ratio 358/201 なので iframe を width/height 100% で敷き詰める。 */
.related-card__thumb iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.related-card__title {
  width: 100%;
  color: #001629;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  /* group3 では title がリンク（a）になるため、下線を消し文字色を継承させる */
  text-decoration: none;
}

.related-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid #001629;
  border-radius: 40px;
  transition: background 0.2s;
}

.related-card:hover .related-card__arrow {
  background: rgba(0, 22, 41, 0.08);
}

/* group3: タイトルと矢印を1つのリンク（a）にまとめたラッパー。
   カード内で縦に並べ、タイトルを左・矢印を右端下に配置する。 */
.related-card__link {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  width: 100%;
  text-decoration: none;
}

/* group3: バナー1枚 */
.related-banner img {
  width: 266px;
  height: 150px;
  object-fit: cover;
}

/* PC 表示のみ：related-group__list 内のカード高さをそろえる。
   タイトルの行数差で高さが変わらないよう、カードを等高にし、
   タイトル領域を伸縮させて矢印を常に下端へ固定する。
   896px 以下はカードが縦 1 列になるため対象外（SP メディアクエリで別途制御）。 */
@media (min-width: 897px) {
  .related-group__list {
    align-items: stretch;
  }

  /* group1/2: タイトルが related-card 直下。タイトルを伸ばして矢印を下端へ。
     group3: タイトルと矢印をまとめた related-card__link を伸ばし、
     さらにその中のタイトルを伸ばして矢印を下端へ固定する。 */
  .related-card__title,
  .related-card__link {
    flex: 1 0 auto;
  }
}

/* =====================================================
   Contact（node 50:302）
===================================================== */
.contact {
  padding: 120px 80px;
  background: #fff;
}

.contact__inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.contact__title {
  color: #001629;
  font-size: 32px;
  font-weight: 500;
  line-height: normal;
}

.contact__list {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* カードと注釈をまとめる縦積みの列。列単位で等幅に並べる */
.contact__col {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 16px;
  border-radius: 40px;
  background: #EEE;
  transition: background 0.2s;
}

.contact-card:hover {
  background: #e4e6e9;
}

.contact-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.contact-card__icon {
  display: block;
  width: 40px;
  height: 40px;
}

.contact-card__text {
  color: #001629;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
}

.contact-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid #001629;
  border-radius: 40px;
}

.contact__note {
  line-height: 1.6;
  text-align: center;
}

/* =====================================================
   Footer（node 2001:203）
===================================================== */
.footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* NIKKEI THE CORE ブロック */
.footer__core {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  padding: 120px 80px;
  background: #001629;
}

.footer__logo img {
  width: 631px;
  height: auto;
}

.footer-nav {
  display: flex;
  gap: 16px;
  align-items: center;
}

.footer-nav li a {
  display: block;
  padding: 2px 0;
  color: #fff;
  font-size: 16px;
  line-height: normal;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.footer-nav li a:hover {
  opacity: 0.7;
}

/* NIKKEI ブロック（日経共通フッター画像） */
.footer__nikkei {
  width: 100%;
  background: #F8F8F8;
}

.footer__nikkei img {
  display: block;
  width: 100%;
  height: auto;
}

/* NIKKEI 共通フッター */
/* fList を中央寄せ */
.footer .fList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 18px 18px 17px;
  gap: 2px 0;
  background: #F8F8F8;
}

.footer .fList li {
  line-height: 20px;
}

.footer .fList li a {
  padding: 0 22px;
  color: #2E2E2E;
  font-size: 16px;
  border-left: 1px solid #2E2E2E;
  transition: opacity 0.2s;
}

.footer .fList li a:hover {
  opacity: 0.7;
}

.footer .fList li:first-child a {
  border-left: none;
}

.footer address {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 20px 22px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  background: #0a3e6f;
}

.footer address img {
  margin: 3px 24px 0 20px;
  width: 80px;
}


/* =====================================================
   SP（スマートフォン）対応 - Figma SPデザイン準拠（node 54:464 / 幅 390px）
   ブレークポイント: 896px 以下
   コンテンツ幅 358px（全体 390px・左右 padding 16px）
===================================================== */
@media (max-width: 896px) {

  /* ---------- Header（node 54:746 / Menu 2001:243） ---------- */
  .header {
    height: 48px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .header__inner {
    padding: 0 16px;
  }

  .header__logo img {
    width: auto;
    height: 40px;
  }

  /* PC用グローバルナビは SP では非表示（ハンバーガー内に格納する想定） */
  .header__nav {
    display: none;
  }

  /* ハンバーガーメニュー（2本線） */
  .header__menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 48px;
    height: 48px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }

  .header__menu span {
    display: block;
    /* デザイン：幅 32px・太さ 1px・間隔 6px の白い棒 2 本 */
    width: 32px;
    height: 1px;
    background: #fff;
    transition: transform 0.3s, opacity 0.3s;
  }

  /* メニューを開いたときハンバーガーを × に変形（ヘッダーの線は隠し、閉じるボタンの × を使う） */
  .menu-toggle:checked~.header .header__menu span {
    opacity: 0;
  }

  /* ---------- SP ドロワーメニュー（node 88:777） ---------- */
  .drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1100;
    /* 水色→青のグラデーション（左上→右下・透明度 0.98） */
    background-image: linear-gradient(125deg,
        rgba(100, 224, 254, 0.98) 0%,
        rgba(0, 119, 217, 0.98) 100%);
    /* 初期は非表示（フェード＋操作不可） */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }

  /* トグル ON でドロワー表示 */
  .menu-toggle:checked~.drawer {
    opacity: 1;
    visibility: visible;
  }

  /* 閉じるボタン（右上の ×）。ヘッダー内のハンバーガー位置と揃える */
  .drawer__close {
    position: absolute;
    top: 0;
    right: 16px;
    width: 48px;
    height: 48px;
    cursor: pointer;
  }

  .drawer__close::before,
  .drawer__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /* ハンバーガー（幅 32px・太さ 1px）と揃えた × */
    width: 32px;
    height: 1px;
    background: #fff;
  }

  /* デザインは ±30度回転（45度ではなく、横に広く縦に低い × になる） */
  .drawer__close::before {
    transform: translate(-50%, -50%) rotate(30deg);
  }

  .drawer__close::after {
    transform: translate(-50%, -50%) rotate(-30deg);
  }

  /* ナビ項目（中央・縦積み・大きめ白文字） */
  .drawer__list {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .drawer__list a {
    display: block;
    padding: 2px 0;
    color: #fff;
    font-size: 32px;
    line-height: normal;
    white-space: nowrap;
    transition: opacity 0.2s;
  }

  .drawer__list a:hover {
    opacity: 0.7;
  }

  /* ---------- FV / Main Visual（node 54:466 / 93:1556） ---------- */
  .fv {
    /* 初期表示（アドレスバー表示時）の画面高さにきっちり収める。
       svh はアドレスバー分を含んだ小さい方のビューポート高さを基準にする単位。
       svh 非対応の古いブラウザ向けに 100vh を先に書き、対応ブラウザは後勝ちで svh を採用。 */
    height: 100vh;
    height: 100svh;
    /* コンテンツは上端から 180px、左右 32px */
    padding: 180px 32px 0;
  }

  /* SP は専用の縦長 KV 画像を使用（PC 用の横長画像だと日本地図が見切れるため）。
     高さを 100svh にしたため端末比率により cover でトリミングされるが、
     background-position: center bottom で日本地図の下側は常に残す。 */
  .fv__bg {
    background-image: url(../images/fv_bg_sp.png);
    /* 下揃え：cover でトリミングされる場合も日本地図の下側が切れないように */
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .fv__bg img {
    display: none;
  }

  .fv__content {
    gap: 32px;
  }

  .fv__logo img {
    width: 326px;
    height: auto;
  }

  .fv__project {
    font-size: 14.9px;
    letter-spacing: 1.49px;
  }

  .fv__catch {
    font-size: 24px;
    line-height: normal;
    letter-spacing: 2.4px;
    /* SP では折り返しを許可（PC の nowrap を解除） */
    white-space: normal;
  }

  /* ---------- About（node 54:499） ---------- */
  .about {
    gap: 48px;
    padding: 120px 16px;
  }

  /* SP では左テキスト＋右画像の2カラムを縦積みに */
  .about__contents {
    flex-direction: column;
    gap: 48px;
  }

  /* about__lead は PC と同じ 32px（デザイン準拠、SP では自然折り返し） */

  .about__pics {
    width: 100%;
  }

  .about__pics img {
    width: 100%;
    max-width: none;
  }

  /* ---------- News（node 54:518 / 2003:385） ---------- */
  .news {
    gap: 48px;
    padding: 120px 16px;
  }

  .news__item {
    /* 日付と本文の間隔を SP 用に */
    gap: 16px;
  }

  .news__date {
    /* 日付欄を 80px に */
    width: 80px;
  }

  /* ---------- Scheme（node 54:524） ---------- */
  .scheme {
    padding: 120px 16px;
  }

  .scheme__title {
    margin-bottom: 48px;
  }

  .scheme__desc {
    width: 100%;
    /* 本文 → 4ステップまで 32px（PC と同じ） */
    margin-bottom: 32px;
  }

  /* 4 steps を縦 1 列に */
  .steps {
    flex-direction: column;
    gap: 16px;
    /* 4ステップ → 分科会テーマまで（PC 80px を SP でも維持） */
    margin-bottom: 80px;
  }

  .step {
    /* 横並びの flex:1 を解除して幅 100% に */
    flex: none;
    width: 100%;
  }

  .step__heading {
    font-size: 24px;
    letter-spacing: 1.2px;
  }

  .step__subtitle {
    font-size: 20px;
  }

  .step__text {
    font-size: 16px;
    line-height: 24px;
  }

  /* 矢印は中央寄せ・下向き */
  .steps__arrow {
    justify-content: center;
  }

  .steps__arrow img {
    transform: rotate(90deg);
  }

  /* 分科会テーマのタイトル・説明は幅 100% に */
  .themes__title,
  .themes__desc {
    width: 100%;
  }

  /* テーマカードを縦 1 列に */
  .themes__list {
    flex-direction: column;
  }

  .theme {
    /* 横並びの flex:1 を解除して幅 100% に */
    flex: none;
    width: 100%;
  }

  /* ---------- Project Member（node 54:638） ---------- */
  .member {
    padding: 120px 16px;
  }

  /* メンバーカードを縦 1 列に（4-3 の段組みを解除して 1 列にする）。
     中央寄せの2段目（.member__row--center）も含めて 1 列に上書きする。 */
  .member__row,
  .member__row--center {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .member-card {
    width: 100%;
  }

  /* ---------- Partner / Supporter（node 54:664） ---------- */
  .pt-sp {
    padding: 120px 16px;
  }

  .pt-sp__block {
    gap: 48px;
  }

  /* ロゴバンドの余白を SP 用に（上下 32・左右 8） */
  .logo-band {
    padding: 32px 8px;
  }

  /* ロゴを縦積みに */
  .logo-band__inner {
    flex-direction: column;
    gap: 32px;
    padding: 0;
  }

  /* ---------- Related Contents（node 54:681） ---------- */
  .related {
    padding: 120px 16px;
  }

  .related__inner {
    gap: 48px;
  }

  /* カードを縦 1 列に */
  .related-group__list {
    flex-direction: column;
    gap: 32px;
  }

  .related-card {
    /* 横並びの flex:1 を解除して幅 100% に */
    flex: none;
    width: 100%;
  }

  /* group3 のバナーは幅 100% に */
  .related-banner img {
    width: 100%;
    height: auto;
  }

  /* ---------- Contact（node 54:693） ---------- */
  .contact {
    padding: 120px 16px;
  }

  .contact__inner {
    gap: 48px;
  }

  /* お問い合わせカードを縦 1 列に。
     stretch で各列（contact__col）を幅 100% に揃える
     （flex-start のままだと注釈のない「協賛」列が中身幅になり短く見えるため） */
  .contact__list {
    flex-direction: column;
    align-items: stretch;
  }

  .contact__col {
    /* 縦積みでは等幅配分が不要なので伸縮を解除して幅 100% に */
    flex: none;
    width: 100%;
  }

  .contact-card {
    width: 100%;
  }

  /* SP では注釈の左インデントは不要 */
  .contact__note {
    padding-left: 0;
  }

  /* SP ではデザイン指定位置で改行を有効化 */
  .br-sp {
    display: inline;
  }

  /* ---------- Footer（node 54:711 / 61:1016） ---------- */
  .footer__core {
    padding: 120px 16px 80px;
    gap: 80px;
  }

  .footer__logo img {
    width: 100%;
    height: auto;
  }

  /* フッターナビは幅が狭い場合に折り返す */
  .footer-nav {
    flex-wrap: wrap;
  }

  /* 免責リンク行（幅が狭いので padding を詰める） */
  .footer .fList {
    padding: 16px;
    gap: 12px 0;
  }

  .footer .fList li a {
    padding: 0 12px;
    font-size: 14px;
  }

  /* Nikkei クレジット帯：ロゴとテキストを縦積み中央に */
  .footer address {
    flex-direction: column;
    gap: 4px;
    padding: 4px 16px;
    font-size: 9.5px;
    font-weight: 400;
  }

  .footer address img {
    margin: 0;
    width: 38px;
  }

}