/* ==========================================================================
   瀬戸内渚フォーラム - スタイルシート
   現行サイト（Studio.Design）の配色・タイポグラフィ・レイアウトを
   実測値に基づき再現。ブレークポイントは現行と同じ 840px / 540px。
   ========================================================================== */

/*
 * フォントについて（2026-09-21 Opus最終レビューで実測・修正）
 *
 * 現行サイトの実際のCSSは、見出しだけでなく本文・pill・ニュース・フッターまで
 * ページ上のほぼ全テキスト（57箇所）が同じ書体変数
 *   --s-font-96a2d48a: 'Tazugane Gothic', Futura
 * を指定している（Inter/Noto Sans JP を指すもう一つの変数は実質未使用）。
 *
 * ■ ライセンス
 * Tazugane Gothic は Monotype の有償書体（MyFonts経由、1ウェイト$179〜
 * 全10ウェイト$999、Webフォントライセンスは1ドメイン限定）。Futura も有償書体で、
 * Studio側はいずれも FontPlus（フォントワークス社のレンタルWebフォントサービス）
 * 経由で配信している。FontPlusの標準プラン（Smart License）では
 * 「フォントファイルのサーバへの設置」は不可（×）、ダウンロードもデザインカンプ用途
 * のみ（△）と規約に明記されている（https://fontplus.jp/usage/cans-and-cants）。
 * → フォントファイルは取得も同梱もしていない。
 *
 * ■ 現行サイトの実態
 * 現行の本番サイト自体もこれらのWebフォントを1つも読み込んでいない
 * （FontPlus/Google Fontsへの通信が発生しない）。ローカルにインストール済みの
 * フォントへフォールバックして表示されている。
 *
 * ■ 対応方針
 * 指定文字列を現行と「完全に同一」にする（末尾に総称ファミリも足さない）。
 * 独自にフォールバックを足すと、フォールバックの解決先が現行とずれるため。
 * 実測（macOS 26.6.1 / Chrome 153, DevTools Protocol で使用フォントを取得）：
 *   現行の指定のまま                  → Futura + Hiragino Kaku Gothic ProN W3
 *   -apple-system 等を足した場合      → Hiragino Sans W4（別ファミリ・別ウェイト）
 * 同一指定にしたことで、上記環境では現行・新サイトとも
 * Hiragino Kaku Gothic ProN W3 で描画されることを確認済み。
 *
 * ■ 検証済みの範囲（これ以外のOS/ブラウザは未検証）
 * macOS 26.6.1 + Google Chrome 153 のみ。Windows / Android / iOS や
 * 他ブラウザでの実際の描画フォントは確認していない。ただし指定文字列が
 * 現行と同一であるため、同じ環境で見た場合は現行と同じ解決結果になる。
 */
:root {
  --color-teal: #43bcc4;
  --color-teal-dark: #11a0c1;
  --color-bg: #fdffff;
  --color-text: #1a1a1a;
  --color-white: #ffffff;
  /* 現行サイトと「完全に同一の指定」にしている（末尾に総称ファミリも足さない）。
     理由：独自にフォールバックを足すと、フォールバックの解決先が現行と変わる。
     実測（macOS 26.6.1 / Chrome 153, DevTools Protocolで使用フォントを取得）：
       現行（'Tazugane Gothic', Futura）      → Futura + Hiragino Kaku Gothic ProN W3
       -apple-system等を足した場合            → Hiragino Sans W4（別ファミリ・別ウェイト）
     指定を現行と揃えることで、どのOS・ブラウザでも現行と同じ解決結果になる。 */
  --font-primary: 'Tazugane Gothic', 'Futura';
  --bp-tablet: 840px;
  --bp-mobile: 540px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* width/height属性を持つ<img>で、幅だけ縮んで高さが属性値のまま固定され
   縦に伸びる（アスペクト比崩れ）不具合を防ぐため height:auto を明示する。 */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3 { margin: 0; font-family: var(--font-primary); font-weight: 500; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.is-hidden { display: none !important; }

/* ==========================================================================
   固定ナビゲーション（デスクトップのみ表示。現行サイトと同挙動）
   ========================================================================== */

.fixed-nav {
  position: fixed;
  top: 20px;
  left: 40px;
  right: 40px;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}

.fixed-nav__brand {
  pointer-events: auto;
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-white);
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

.fixed-nav__links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.fixed-nav__links a {
  pointer-events: auto;
  display: block;
  min-width: 150px;
  padding: 10px 22px;
  border: 1px solid var(--color-teal);
  border-radius: 100px;
  background: rgba(253,255,255,0.9);
  color: var(--color-teal);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 840px) {
  .fixed-nav__links { display: none; }
}

/* ==========================================================================
   ヒーロー
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  height: 100vh;
  min-height: 480px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 150px 0;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.3);
  z-index: -1;
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  padding-bottom: 60px;
  text-align: center;
  color: var(--color-white);
}

.hero__title {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 40px;
}

.hero__updated {
  font-family: var(--font-primary);
  font-size: 14px;
  letter-spacing: 0.1em;
  margin: 0 0 12px;
}

.hero__scroll-icon {
  display: inline-flex;
  color: var(--color-white);
  animation: bob 1.8s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@media (max-width: 540px) {
  .hero { padding: 0 20px; }
}

/* 応募はこちら（現状Studio側でも非表示。ユーザー指示により非表示維持） */
.apply-link { }

/* ==========================================================================
   セクション共通
   ========================================================================== */

.section {
  background: var(--color-bg);
}

/* 現行Studioと同じ方式：コンテナは幅100%、左右に固定パディング。
   基準幅1280pxのとき内容幅 = 1280 - 250 = 1030px となり、
   参加団体カード(300px)が3列（300*3 + gap20*2 = 940px）並ぶ。 */
.section__inner {
  width: 100%;
  margin: 0 auto;
  padding: 100px 125px;
}

/* 実測CSSでは840px時点の中間値は存在せず、540px以下で直接この値に変わる
   （前回誤って840pxの中間値を作っていたため削除）。 */
@media (max-width: 540px) {
  .section__inner { padding: 30px 20px; }
}

.section__heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 40px;
}

.section__label {
  writing-mode: vertical-rl;
  font-size: 20px;
  font-weight: 500;
  color: var(--color-teal);
  letter-spacing: 0.1em;
  margin-top: 15px;
  flex-shrink: 0;
}

.section__title {
  font-size: 120px;
  font-weight: 500;
  color: var(--color-teal);
  line-height: 1.4;   /* 現行の実測値。1.1にしていたため全見出しが低くなっていた */
  letter-spacing: 0;
}

/* 実測CSSでは840px時点の中間値は存在しない（前回誤って作っていたため削除）。
   768px幅（タブレット）でも現行は120pxのまま2行に折り返る。540px以下で54pxに変わる。 */
@media (max-width: 540px) {
  .section__label { font-size: 14px; margin-top: 8px; }
  .section__title { font-size: 54px; }  /* line-heightは1.4のまま（現行も変更なし） */
}

/* ピル型ラベル（課題背景・アプローチ・WHAT WE DOの①〜⑥見出しに共通。
   現行の実測CSSに基づく: background#fdffff / border-radius64px / font24px→18px
   letter-spacing.11em / margin-left50px→0 / padding "2px 30px"→"2px 25px" */
.pill-label {
  display: inline-block;
  background: var(--color-bg);
  border: 1px solid var(--color-teal);
  color: var(--color-teal);
  border-radius: 64px;
  padding: 2px 30px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.11em;
  line-height: 1.4;
  margin: 0 0 20px 50px;
  max-width: calc(100% - 50px);
}

/* 本文段落（WHO WE ARE / WHAT WE DO 共通）。現行の実測CSSに基づく：
   color#43bcc4 / font15px→14px / weight500 / letter-spacing.1em /
   line-height1.7 / text-align justify / width calc(80%-50px)→100% /
   margin-left50px→0 */
.prose p,
.activity-list p {
  color: var(--color-teal);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.7;
  text-align: justify;
  width: calc(80% - 50px);
  margin: 0 0 50px 50px;
}
.activity-list p { margin-bottom: 40px; }
.prose p:last-child { margin-bottom: 0; }
/* 注意：.activity-list は各<li>にpが1つずつなので、p:last-childは
   全項目に一致してしまうバグがあった（全項目の下マージンが0になる）。
   最後の<li>のpだけに絞る。現行の実測値：⑥のみ20px、①〜⑤は40px。 */
.activity-list li:last-child p { margin-bottom: 20px; }

.lead {
  color: var(--color-teal);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.7;
  text-align: justify;
  width: calc(80% - 50px);
  margin: 0 0 75px 50px;
}

@media (max-width: 540px) {
  .pill-label {
    font-size: 18px;
    padding: 2px 25px;
    margin: 0 0 10px 0;
    max-width: 100%;
  }
  .prose p,
  .activity-list p,
  .lead {
    font-size: 14px;
    width: 100%;
    margin-left: 0;
  }
  .activity-list p { margin-bottom: 40px; }
  .lead { font-size: 16px; margin-bottom: 50px; }
}

/* 環境移送技術の図版。現行の実測CSSに基づき固定サイズの枠（850×350→100%×150）
   に object-fit:cover で収める（自然比率のまま拡大縮小するのではない）。 */
.diagram {
  margin: 0 0 0 50px;
  text-align: left;
}
.diagram img {
  width: 850px;
  height: 350px;
  max-width: calc(100% - 50px);
  object-fit: cover;
  border-radius: 8px;
}
.diagram figcaption {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-teal);
  letter-spacing: 0.05em;
}

@media (max-width: 540px) {
  .diagram { margin-left: 0; }
  .diagram img {
    width: 100%;
    height: 150px;
    max-width: 100%;
  }
}

/* ==========================================================================
   区切り線（斜線ストライプバナー）
   ========================================================================== */

/* 現行サイトと同じ：divider-stripe.svg は角丸の端まで含んだ完結した図形。
   画面幅いっぱいに引き伸ばすだけでよい（背景色・角丸・余白は付けない）。 */
.stripe-divider {
  width: 100%;
  aspect-ratio: 1080 / 135;
  background: url('/images/photos/divider-stripe.svg') center / 100% 100% no-repeat;
}

/* ==========================================================================
   WHAT WE DO / 活動リスト
   ========================================================================== */

/* 現行は箱組みではなく、課題背景・アプローチと同じピル型ラベル＋素のテキスト。
   li自体には枠・背景・paddingを付けない（.pill-labelとpがそれぞれ持つ）。 */
.activity-list {
  display: flex;
  flex-direction: column;
}

/* line-height:0 にしないと、インラインブロックのピルを包む行ボックスに
   h3自身の行間ぶんの余白（約20px）が加わり、6項目で約120px高くなる。 */
.activity-list h3 {
  margin: 0;
  line-height: 0;
}
.activity-list h3 .pill-label {
  display: inline-block;
}

.activity-bg {
  display: none; /* 現行では①②③⑤⑥の直後に挿入される装飾写真。A-4の対象外のため簡略化のまま非表示 */
}

/* ==========================================================================
   PARTNER
   ========================================================================== */

/* ORGNIZER見出しは15px。実測CSSでは"第1期パートナー"「第2期パートナー」は
   32px（モバイル28px）と大きく異なるため、--period修飾クラスで分ける。 */
.partner-group__label {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-teal);
  letter-spacing: normal;
  line-height: 1.4;
  margin: 40px 0 10px;
}
.partner-group__label:first-of-type { margin-top: 0; }

.partner-group__label--period {
  font-size: 32px;
  margin: 40px 0 20px;
}

@media (max-width: 540px) {
  .partner-group__label--period { font-size: 28px; margin-bottom: 20px; }
}

.partner-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.partner-card {
  width: 300px;
  height: 75px;
  border: 1px solid var(--color-teal);
  border-radius: 128px;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 40px;
  position: relative;
}

.partner-card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.partner-card--fukuyama {
  gap: 10px;
}
.partner-card--fukuyama img { max-height: 60%; width: auto; }
.partner-card--fukuyama span {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
}

@media (max-width: 540px) {
  .partner-grid { flex-direction: column; align-items: stretch; }
  .partner-card { width: 100%; height: 90px; }
}

/* ==========================================================================
   NEWS
   ========================================================================== */

/* 現行の実測CSS：カード幅 calc(33% - ...)／コンテナ gap:50px。
   540px以下でカード幅100%・gap:30px。840pxでの中間段階は存在しない
   （＝タブレット幅でも現行は3列のまま。実機で確認済み）。 */
.news-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  margin-bottom: 50px;
}

.news-card a { display: block; }

/* 現行の実測値：幅100% × 高さ175px、角丸100px、下マージン15px。
   タブレット(≤840)だけ高さ240px、モバイル(≤540)で175pxに戻る（実機で確認）。 */
.news-card img {
  width: 100%;
  height: 175px;
  object-fit: cover;
  border-radius: 100px;
  margin-bottom: 15px;
}

@media (max-width: 840px) {
  .news-card img { height: 240px; }
}
@media (max-width: 540px) {
  .news-card img { height: 175px; }
}

.news-card time {
  display: block;
  font-size: 15px;
  color: #cccccc;
  margin-bottom: 10px;
}

.news-card p {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-teal);
}

@media (max-width: 540px) {
  .news-card time { font-size: 12px; }
  .news-card p { font-size: 15px; }
}

.news-more {
  display: inline-block;
  border: 1px solid var(--color-teal);
  color: var(--color-teal);
  border-radius: 100px;
  padding: 10px 28px;
  font-size: 14px;
}

@media (max-width: 540px) {
  .news-list { grid-template-columns: 1fr; gap: 30px; }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

/* 現行の実測値：本文と同じく width calc(80% - 50px) / margin-left 50px。
   540px以下は width100% / margin-left0。
   なお現行はこの2要素に height:72px の固定高さが入っており、タブレット幅で
   文字が見出しに重なる（現行側の不具合）。固定高さは再現していない。 */
.contact-lead {
  color: var(--color-teal);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.7;
  width: calc(80% - 50px);
  margin: 0 0 0 50px;
}

.note {
  font-size: 12px;
  color: var(--color-teal);
  line-height: 1.8;
  width: calc(80% - 50px);
  margin: 16px 0 0 50px;
}

@media (max-width: 540px) {
  .contact-lead { font-size: 16px; width: 100%; margin-left: 0; }
  .note { width: 100%; margin-left: 0; }
}

.mail-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  border: 1px solid var(--color-teal);
  color: var(--color-teal);
  border-radius: 100px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 700;
}

/* ==========================================================================
   渚フォーラムとは
   ========================================================================== */

/* 現行の実測CSS：height:100vh（デスクトップ）→ 700px（モバイル≤540のみ）。
   前回誤って全ブレークポイントで700px固定にしていたのを修正。 */
.project-section {
  position: relative;
  isolation: isolate;
  height: 100vh;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 150px;
  overflow: hidden;
}

.project-section__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.3) brightness(0.55);
  z-index: -1;
}

.project-section__content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  color: var(--color-bg);
  text-align: left;
}

.project-section__label {
  font-family: var(--font-primary);
  font-size: 15px;
  letter-spacing: 0.1em;
  margin: 0 0 4px;
}

.project-section__title {
  font-size: 48px;
  font-weight: 500;
  margin: 0 0 20px;
}

.project-section__stripe {
  width: 160px;
  margin-bottom: 24px;
  filter: brightness(0) invert(1);
}

.project-section__content p {
  font-size: 15px;
  line-height: 1.9;
}

/* 現行の実測CSSでは padding も font-size も「840pxで一段階変わる」中間値は無く、
   ベース → 540px以下 の2段階のみ（前回誤って840px時点の中間値を作っていた）。 */
@media (max-width: 540px) {
  .project-section { padding: 0 20px; height: 700px; min-height: 0; }
  .project-section__title { font-size: 32px; }
}

/* ==========================================================================
   フッター
   ========================================================================== */

.site-footer {
  text-align: center;
  padding: 30px 20px;
  font-size: 12px;
  color: var(--color-teal);
}

@media (max-width: 540px) {
  .site-footer { font-size: 10px; }
}