/* =========================================================
   パターンB｜爽やか・親しみ
   2026-09-10 修正版（Uiさんのご指摘①〜⑦を反映）
   ・本文の黒は #212121
   ・ヒーローのフィルタは黒（青は使わない）
   ・CTAは角丸＋グラデーション
   ・セクションの英字ラベルは細い筆記体（Allura）＋マーカー
   ・役割／流れのカードは1列（上から下へ）
   ・フッターと写真に重ねる四角は #2DCCD9
   ・背景に透明度のある色を重ねた、遊び心のある面構成
   ========================================================= */

:root {
  /* --- 色 --- */
  --c-primary: #1668B3;
  --c-primary-dark: #0F4E8A;
  --c-accent: #136099;              /* 白地の上のリンク（6.6:1） */
  --c-cyan: #2DCCD9;                /* ⑥ フッター・写真に重ねる四角 */
  --c-on-cyan: #212121;             /* ⑥ #2DCCD9 の上は白文字だと1.95:1で読めないため黒文字にする */
  --c-on-primary: #FFFFFF;
  --c-bg: #FFFFFF;
  --c-bg-alt: #F5FAFD;
  --c-surface: #E9F4FB;             /* 薄い水色の面＝カード背景 */
  --c-text: #212121;                /* ① 本文の黒 */
  --c-text-sub: #4E6377;
  --c-border: #C7E0F0;
  --c-band: linear-gradient(102deg, #1668B3 0%, #1F7CAE 100%);
  --c-band-solid: #212121;

  /* ② ヒーローのフィルタ：青をやめて黒に。
        角度を付けた濃淡だけの、境目のないやわらかいグラデーションにしている。
        薄い側(0.58)でも白文字は5.3:1で、写真が明るくても読める。 */
  --c-hero-overlay: linear-gradient(160deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.58) 100%);

  /* --- フォント --- */
  --font-head: 'Noto Sans JP', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;
  --font-en: 'Noto Sans JP', sans-serif;
  --font-script: 'Allura', 'Great Vibes', cursive;   /* ④ 線の細い筆記体 */

  --fs-h1: clamp(26px, 3vw, 38px);
  --fs-h2: clamp(23px, 2.5vw, 30px);
  --fs-h3: clamp(17px, 1.5vw, 19px);
  --fs-section-en: clamp(52px, 9vw, 76px);           /* ④ 筆記体は小さいと読めないので大きく */
  --fs-hero-en: clamp(26px, 3.4vw, 44px);
  --fs-footer-org: 24px;

  --ls-head: 0.10em;
  --ls-en: 0.14em;
  --fw-head: 700;                   /* 900は使わない */
  --section-en-weight: 400;
  --lh-body: 1.85;

  --sp-section: 64px;
  --sp-block: 30px;
  --sp-inner: 14px;
  --max-width: 1100px;

  --motion-y: 18px;
  --motion-dur: 0.5s;
  --motion-stagger: 0.07s;

  /* --- スイッチ --- */
  --photo-offset: 0px;
  --band-skew: 20px;                /* 斜め区切りはお問い合わせの上端だけ */
  --chip-display: block;
  --rule-display: none;
  --fig-optional-display: block;
  --nav-en-display: none;
  --header-transparent: 1;
  --hero-media-opacity: 1;          /* ② 黒フィルタで見せるので、写真は薄くしない */

  --card-border: none;
  --card-shadow: none;
  --figure-ratio: 4 / 3;
  --figure-ratio-sp: 4 / 3;
}

/* ---------------------------------------------------------
   ④ セクションの英字ラベルを、細い筆記体でデザインとして見せる
   ・HTMLは "ROLE" のような大文字だが、筆記体は大文字だけだと読めないので
     CSSで小文字に変換し、頭文字だけ大文字に戻している（Role / Flow …）
   ・背景に水色のマーカーを敷いて、飾りとして成立させる
   --------------------------------------------------------- */
.section-en {
  font-family: var(--font-script);
  font-size: var(--fs-section-en);
  font-weight: 400;
  /* マーカーの上でも4.9:1を確保できる濃さ（#1668B3 だと4.26:1で基準未満） */
  color: var(--c-accent);
  letter-spacing: 0;
  line-height: 1.05;
  text-transform: lowercase;
  display: inline-block;
  padding: 0 8px 0 2px;
  margin-bottom: 2px;
  /* 文字の後ろに敷く水色のマーカー（背景なので文字の可読性は下げない） */
  /* ① マーカーの色は #F8B41E（2026-09-11 Uiさん指定）。
        透過0.55にすると筆記体（#136099）とのコントラストが4.76:1で基準を満たす。 */
  background-image: linear-gradient(
      transparent 0,
      transparent 58%,
      rgba(248, 180, 30, 0.55) 58%,
      rgba(248, 180, 30, 0.55) 82%,
      transparent 82%);
}
.section-en::first-letter { text-transform: uppercase; }

/* ヒーローの英字は筆記体にせず、字間を広げた大文字で軽さを出す */
.hero-en {
  letter-spacing: 0.2em;
  font-weight: 400;
  opacity: 0.95;
}

/* ---------------------------------------------------------
   ③ CTAは角丸（ピル型）＋グラデーション
   カードの角丸は0のまま。丸くするのはボタンだけ。
   グラデーションの明るい側も白文字で4.6:1を確保している。
   --------------------------------------------------------- */
.btn-primary, .btn-submit, .nav-cta, .btn-outline {
  border-radius: 999px;
}
.btn-primary, .btn-submit {
  background-image: linear-gradient(100deg, #0F4E8A 0%, #1F7CAE 100%);
  background-color: #1668B3;
  border-color: transparent;
  color: var(--c-on-primary);
}
.btn-primary:hover, .btn-submit:hover {
  background-image: linear-gradient(100deg, #0B3D6E 0%, #17688F 100%);
  background-color: #0F4E8A;
  border-color: transparent;
}
.nav-cta {
  background-image: linear-gradient(100deg, #0F4E8A 0%, #1F7CAE 100%);
}
#site-header.is-transparent .main-nav .nav-cta {
  background-image: none;
  background-color: var(--c-on-primary);
  color: var(--c-primary);
}

/* ---------------------------------------------------------
   ⑦ 背景に透明度のある色を斜めに重ねて、遊び心を出す
   ・すべて pointer-events:none の飾り。文字はこの上（z-index:2）に乗る
   ・不透明度は0.08〜0.14に抑え、本文のコントラストを落とさない
   --------------------------------------------------------- */
main > section { position: relative; overflow: hidden; }
main > section > .container { position: relative; z-index: 2; }

#profile::before, #services::before,
#services::after, #flow::before, #disclosure::before {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
#profile::before {
  left: -6%; right: 38%; top: 0; bottom: 0;
  background: rgba(45, 204, 217, 0.12);
  clip-path: polygon(0 0, 100% 6%, 100% 94%, 0 100%);
}
#services::before {
  left: 30%; right: -12%; top: 10%; height: 62%;
  background: rgba(22, 104, 179, 0.08);
  clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 92%);
}
#services::after {
  left: -10%; right: 62%; bottom: -6%; height: 40%;
  background: rgba(45, 204, 217, 0.14);
  clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}
#flow::before {
  left: -10%; right: -10%; top: 0; height: 44%;
  background: rgba(255, 255, 255, 0.75);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%);
}
#disclosure::before {
  left: 44%; right: -10%; top: 0; bottom: 0;
  background: rgba(45, 204, 217, 0.12);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}

/* ---------------------------------------------------------
   反対色＝白の使いどころ：
   お問い合わせをフルブリードの青帯にして、その上に真っ白なカードを置く
   （斜め区切りはこの1箇所だけ。base.css の #contact::before が担当）
   --------------------------------------------------------- */
#contact {
  background: var(--c-band);
  color: var(--c-on-primary);
}
/* 青帯の上でも同じアンバーのマーカーを敷く。
   ただしアンバーの上に白文字は2.2:1で読めないため、ここだけ筆記体を黒にする（7.3:1）。 */
#contact .section-en {
  color: #212121;
  background-image: linear-gradient(
      transparent 0, transparent 58%,
      rgba(248, 180, 30, 0.85) 58%,
      rgba(248, 180, 30, 0.85) 82%,
      transparent 82%);
}
#contact .section-eyebrow,
#contact .section-title,
#contact .section-lead { color: var(--c-on-primary); }

#contact .contact-form-wrap,
#contact .contact-info {
  background: var(--c-on-primary);
  color: var(--c-text);
}
#contact .contact-info h3,
#contact .contact-phone,
#contact .contact-phone a { color: var(--c-primary); }
#contact .contact-fax,
#contact .contact-note { color: var(--c-text-sub); opacity: 1; }
#contact .form-group input,
#contact .form-group textarea { background: #FFFFFF; }

/* ---------------------------------------------------------
   ⑥ フッターと写真に重ねる四角を #2DCCD9 に
   白文字だと1.95:1で読めないため、文字はすべて #212121 にする
   --------------------------------------------------------- */
#site-footer {
  background: var(--c-cyan);
  color: var(--c-on-cyan);
}
#site-footer a,
#site-footer .footer-col ul li a,
#site-footer .footer-legal-links a { color: var(--c-on-cyan); }

/* ① 太字の見出し（団体名・各列の見出し）だけ白にする（2026-09-11 Uiさん指定）
   ※ 白×#2DCCD9 はコントラスト比1.95:1でWCAG AAを満たさない。
      ご指定どおりの見た目を優先している。 */
#site-footer .footer-org-name,
#site-footer .footer-col h4 { color: #FFFFFF; }

/* ② フッター内の横線を #F8B41E に（2026-09-11 Uiさん指定）
   ※ アンバーとシアンは明るさがほぼ同じ（1.07:1）なので、
      線というより「色の切り替わり」として見える。 */
#site-footer .footer-col h4 { border-bottom-color: #F8B41E; }
#site-footer .footer-bottom { border-top-color: #F8B41E; }

/* ② 写真のラベルはうっすら写真が透ける半透明に。
      透過0.78なら、背景の写真が真っ黒でも文字（#212121）が5.07:1で読める。
      backdrop-filter は対応ブラウザだけで効く演出（非対応でも見た目が壊れない）。 */
.photo-chip {
  background: rgba(45, 204, 217, 0.78);
  color: var(--c-on-cyan);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ③ 受け入れの流れの番号を丸にする */
.flow-step-num {
  border-radius: 50%;
}

/* ② フォームの「※必須」を #F8B41E に（2026-09-11 Uiさん指定）
   ※ 白地に #F8B41E は1.82:1で、WCAG AAの4.5:1を満たさない。
      ご指定どおりの見た目を優先している。 */
.form-group .required { color: #F8B41E; }

/* ---------------------------------------------------------
   ⑤ 役割・体制／受け入れの流れのカードは1列（上から下へ）
   --------------------------------------------------------- */
.strengths-grid { grid-template-columns: 1fr; }
.flow-steps { grid-template-columns: 1fr; }
.strength-item { flex-direction: row; }

@media (min-width: 768px) {
  :root {
    --sp-section: 104px;
    --sp-block: 44px;
    --sp-inner: 18px;
    --band-skew: 48px;              /* PCは約2.5度 */
  }
  .media-row { grid-template-columns: 36% 1fr; gap: 44px; }
  .strengths-grid { grid-template-columns: 1fr; }
  .flow-steps { grid-template-columns: 1fr; }
  .strength-item { flex-direction: row; }
}

@media (min-width: 1024px) {
  .strengths-grid { grid-template-columns: 1fr; }
  .flow-steps { grid-template-columns: 1fr; }
  .strength-item { flex-direction: row; }
}