/* =========================================================
   パターンC｜赤い斜めのラインで力強く（はなぶさ協同組合向け）
   2026-10-02 作り直し（2回目）
   ・構成の参考：株式会社ライフワーク https://www.f-lifework.com/
     （赤と灰色の斜めの帯／太い縦長の英字見出し＋小さな和文／
       赤いタブの付いたカード／濃いグレーのフッター）。
     参考にしたのはレイアウトの考え方だけで、写真・ロゴ・文章・コードは使っていない。
   ・別案件の本番で使った旧パターンC（Bebas Neue・写真全面＋黒フィルタ）とは
     フォント・レイアウトとも変えている。
   ・英字は Oswald、和文は Zen Kaku Gothic New、キャッチだけ Shippori Mincho
   ・掲載内容はA・Bと同じ。HTMLの違いはヒーローのキャッチ（.hero-catch）1か所だけ
   ========================================================= */

:root {
  /* --- 色 --- */
  --c-primary: #C4161C;             /* 赤。白文字 6.0:1／クリーム地 5.5:1／薄灰地 5.2:1 */
  --c-primary-dark: #8F0F14;
  --c-accent: #C4161C;
  --c-gray: #8E9494;                /* 斜めのラインの灰色（装飾専用・文字には使わない） */
  --c-gray-light: #EDEDED;          /* 斜めの帯の薄い灰色 */
  --c-on-primary: #FFFFFF;
  --c-bg: #FFFFFF;
  --c-bg-alt: #FAF4EA;              /* クリーム */
  --c-surface: #FFFFFF;
  --c-text: #222222;
  --c-text-sub: #555555;
  --c-border: #E3DDD3;
  --c-band: #FFFFFF;
  --c-hero-overlay: var(--c-primary);   /* ヒーローの赤い斜めブロック */
  --c-footer: #333535;

  /* --- フォント --- */
  --font-head: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  --font-body: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  --font-en: 'Oswald', sans-serif;
  --font-catch: 'Shippori Mincho', 'Noto Serif JP', serif;

  --fs-h1: clamp(22px, 2.2vw, 28px);
  --fs-h2: 18px;                    /* 和文は英字の下の小さなサブ見出し */
  --fs-h3: clamp(17px, 1.5vw, 19px);
  --fs-section-en: clamp(40px, 4.6vw, 60px);
  --fs-hero-en: clamp(44px, 5.4vw, 72px);
  --fs-footer-org: 24px;

  --ls-head: 0.06em;
  --ls-en: 0.04em;
  --fw-head: 700;
  --section-en-weight: 600;
  --lh-body: 2;

  /* --- 余白（スマホ） --- */
  --sp-section: 80px;
  --sp-block: 40px;
  --sp-inner: 18px;
  --max-width: 1120px;

  /* ヒーロー写真の高さ。キャッチの位置計算にも使う */
  --hero-photo-h: 76vw;

  --motion-y: 20px;
  --motion-dur: 0.6s;
  --motion-stagger: 0.08s;

  /* --- スイッチ --- */
  --photo-offset: 0px;
  --band-skew: 0px;
  --chip-display: none;
  --rule-display: none;
  --fig-optional-display: none;     /* 流れ・情報公開は写真なしで横に広く使う */
  --nav-en-display: none;
  --header-transparent: 0;
  --hero-media-opacity: 1;

  --card-border: 0;
  --figure-ratio: 4 / 3;
  --figure-ratio-sp: 4 / 3;

  /* 斜めの角度（縦からの傾き。tan≒0.34）。ヒーローの灰色の帯・赤いライン、
     お問い合わせの赤い面で共通にして、どの画面幅でも平行に保つ */
  --slash: -18.7deg;

  /* 右端を斜めに落とす形（ボタン・タブで共通） */
  --slant: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}

/* 斜めの装飾をはみ出させないため、各セクションを基準にする */
main > section { position: relative; overflow: hidden; }
main > section > .container { position: relative; z-index: 1; }

/* ---------------------------------------------------------
   ヘッダー：団体名を赤い平行四辺形のプレートに入れる
   --------------------------------------------------------- */
.header-logo {
  background: var(--c-primary);
  color: var(--c-on-primary);
  padding: 8px 40px 8px 16px;
  margin-left: calc(var(--gutter) * -1);
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
  font-weight: 900;
}
.header-logo .logo-tag { opacity: 0.9; }
.main-nav > ul > li > a { font-weight: 700; letter-spacing: 0.06em; }
.main-nav .nav-cta {
  background: var(--c-primary-dark);
  clip-path: var(--slant);
  padding-right: 30px;
}

/* 団体名のプレートが幅を取るため、1023px以下はメニューをハンバーガー（≡）にする。
   そのままだとタブレット幅で「団体概要」などが2行に折れる */
@media (max-width: 1023px) {
  .main-nav { display: none; }
  .hamburger { display: flex; }
}

/* ---------------------------------------------------------
   ボタン：右端を斜めに落とす
   --------------------------------------------------------- */
.btn-primary, .btn-submit, .mobile-nav .nav-cta { clip-path: var(--slant); padding-right: 40px; }
.btn-outline-onimg { color: var(--c-primary); border-color: var(--c-primary); }
.btn-outline-onimg:hover { background: var(--c-primary); color: var(--c-on-primary); }

/* ---------------------------------------------------------
   見出し：太い縦長の英字（赤）＋小さな和文
   --------------------------------------------------------- */
.section-en { color: var(--c-primary); line-height: 1.05; margin-bottom: 8px; }
.section-eyebrow { display: none; }
.section-title { color: var(--c-text); letter-spacing: 0.12em; margin-bottom: 22px; }

/* ---------------------------------------------------------
   ヒーロー：写真の右側を赤い斜めブロックで切り、明朝のキャッチを置く。
   写真の下に、英字の大見出し＋本文（ABOUT US のような構成）
   --------------------------------------------------------- */
#hero {
  color: var(--c-text);
  padding: calc(64px + var(--hero-photo-h) + 56px) 0 calc(var(--sp-section) + 20px);
}
.hero-media {
  inset: auto;
  top: 64px; left: 0; right: 0;
  height: var(--hero-photo-h);
}
/* <picture> は既定でインライン要素。img の height:100% が効くよう箱をブロックにする */
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img { object-position: 30% center; }
.hero-overlay { clip-path: polygon(62% 0, 100% 0, 100% 100%, 40% 100%); }

.hero-catch {
  position: absolute;
  z-index: 2;
  top: calc(64px + var(--hero-photo-h) / 2);
  right: max(var(--gutter), calc((100vw - var(--max-width)) / 2 + var(--gutter)));
  transform: translateY(-50%);
  font-family: var(--font-catch);
  font-weight: 500;
  font-size: clamp(28px, 4.4vw, 60px);
  line-height: 1.5;
  letter-spacing: 0.14em;
  color: var(--c-on-primary);
}

.hero-en { color: var(--c-primary); line-height: 1; margin-bottom: 10px; }
.hero-eyebrow {
  border: 0; padding: 0;
  color: var(--c-text);
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 26px;
}
.hero-title { color: var(--c-text); line-height: 1.6; }
/* auto-phrase：日本語を文節単位で折り返し「サポートま／で。」のような切れ方を防ぐ（Chrome・Edge対応。他のブラウザは従来どおり） */
.hero-sub { color: var(--c-text); word-break: auto-phrase; }
.hero-permit { color: var(--c-text-sub); opacity: 1; }

/* ---------------------------------------------------------
   写真：後ろに薄い灰色の平行四辺形、左上に赤い斜めライン
   （base.css の ::after を使い直す）
   --------------------------------------------------------- */
.figure-img-wrap::after {
  left: -8%; right: auto;
  top: -10%; bottom: auto;
  width: 78%; height: 120%;
  background: var(--c-gray-light);
  clip-path: polygon(28% 0, 100% 0, 72% 100%, 0 100%);
}
.figure-img-wrap::before {
  content: '';
  position: absolute;
  z-index: 2;
  left: -14px; top: -28px;
  width: 44px; height: 96px;
  background: var(--c-primary);
  clip-path: polygon(62% 0, 100% 0, 38% 100%, 0 100%);
}

/* ---------------------------------------------------------
   団体概要：クリーム地に白い表
   --------------------------------------------------------- */
.profile-table { background: var(--c-surface); border-top: 3px solid var(--c-primary); }
.profile-table th { color: var(--c-primary); padding-left: 20px; }
.profile-table td { padding-left: 20px; }

/* 事業内容：右側に薄い灰色の斜めの帯 */
#services::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0; width: 46%;
  background: var(--c-gray-light);
  clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
}
.services-row h3 { color: var(--c-text); }
.pref-dot {
  width: 12px; height: 10px;
  background: var(--c-primary);
  clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%);
}

/* ---------------------------------------------------------
   受け入れの流れ：赤いタブ（STEP 1〜6）の付いた白いカード。
   右上に灰色と赤の斜めライン
   --------------------------------------------------------- */
/* 平行な2本の帯（灰色・赤）。1つの要素で塗り分けると三角形に切れるため2要素に分ける */
#flow::before, #flow::after {
  content: '';
  position: absolute;
  top: -20px;
  width: 110px; height: 280px;
  clip-path: polygon(78% 0, 100% 0, 22% 100%, 0 100%);
}
#flow::before { right: 4%; background: var(--c-primary); }
#flow::after { right: calc(4% + 44px); background: var(--c-gray); }
/* カードは上から下へ1列（PCも。千葉案件の際の指定と同じ） */
.flow-steps { grid-template-columns: 1fr; row-gap: 44px; padding-top: 16px; }
.flow-step {
  display: block;
  position: relative;
  padding: 40px 24px 26px;
  background: var(--c-surface);
}
.flow-step-num {
  position: absolute;
  top: -16px; left: -8px;
  width: auto; height: auto;
  padding: 4px 30px 4px 14px;
  gap: 8px;
  clip-path: var(--slant);
  font-size: 22px; font-weight: 600;
  line-height: 1.3;
}
.flow-step-num::before {
  content: 'STEP';
  font-size: 13px;
  letter-spacing: 0.12em;
}
.flow-step strong { color: var(--c-text); }

/* 情報公開：左側に薄い灰色の斜めの帯 */
#disclosure::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0; width: 34%;
  background: var(--c-gray-light);
  clip-path: polygon(0 0, 100% 0, 66% 100%, 0 100%);
}
.disclosure-card { border-top: 3px solid var(--c-primary); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05); }
.disclosure-card-title { color: var(--c-text); }

/* ---------------------------------------------------------
   お問い合わせ：薄い灰色地。PCでは右側を赤い斜めブロックにし、
   電話の案内を白い細枠で囲む（参考サイトの RECRUIT 帯の構成）
   --------------------------------------------------------- */
#contact { background: var(--c-gray-light); }
.contact-form-wrap { box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05); }
.contact-info { border: 1px solid rgba(255, 255, 255, 0.7); }

/* フッター：濃いグレー */
#site-footer { background: var(--c-footer); }

/* =========================================================
   タブレット以上（768px〜）
   ========================================================= */
@media (min-width: 768px) {
  :root {
    --sp-section: 128px;
    --sp-block: 56px;
    --sp-inner: 26px;
    --hero-photo-h: min(46vw, 520px);
  }
  #hero { padding-top: calc(68px + var(--hero-photo-h) + 88px); }
  .hero-media { top: 68px; }
  .hero-catch { top: calc(68px + var(--hero-photo-h) / 2); }
  .hero-overlay { clip-path: polygon(70% 0, 100% 0, 100% 100%, 50% 100%); }
  .media-row.optional-figure { grid-template-columns: 1fr; }
  .media-row { gap: 80px; }
  .flow-steps { grid-template-columns: 1fr; }
  /* 電話の案内カードの後ろから右端までを赤い斜めの面にする。
     画面幅で位置がずれないよう、セクション基準ではなくカード基準で置き、
     カードの左上の30px左を通る線で斜めに切る（カードが線からはみ出さない）。
     上下は大きく伸ばし、セクションの overflow: hidden で切り取る */
  .contact-info { position: relative; }
  .contact-info::before {
    content: '';
    position: absolute;
    top: -1500px; bottom: -1500px;
    left: -30px; right: -100vw;
    background: var(--c-primary);
    transform: skewX(var(--slash));
    transform-origin: 0 1500px;   /* カードの上端の高さを支点に傾ける */
    z-index: -1;
  }
  .section-lead { max-width: 560px; }
}

/* =========================================================
   ヒーロー本文まわりの斜めの装飾（灰色の帯＋赤いライン）
   画面幅ではなく「本文ブロック（.hero-text）の右端」を基準に置くので、
   どの画面幅でも文字やボタンに重ならない。
   はみ出した部分はヒーローの overflow: hidden で切る。
   太さ：赤いラインは横幅32px。角度はどちらも --slash
   ========================================================= */
.hero-text { position: relative; }
.hero-text::before, .hero-text::after {
  content: '';
  position: absolute;
  z-index: -1;                      /* 本文の文字・ボタンの後ろに敷く */
  transform: skewX(var(--slash));
}

/* スマホ（〜767px）：本文が全幅なので、ボタンの下の余白に小さく置く */
.hero-text::after {                 /* 赤いライン */
  top: calc(100% + 16px);
  bottom: calc(-1 * (var(--sp-section) + 20px));
  right: 64px; width: 24px;
  background: var(--c-primary);
  transform-origin: bottom left;
}
.hero-text::before {                /* 灰色の帯 */
  top: calc(100% + 16px);
  bottom: calc(-1 * (var(--sp-section) + 20px));
  left: calc(100% - 20px); right: -100vw;
  background: var(--c-gray-light);
  transform-origin: bottom left;
}

/* タブレット・PC（768px〜）：本文の右に、写真の下端からヒーローの下端まで */
@media (min-width: 768px) {
  /* 右側に斜めの装飾を置く余白（約320px）を残した幅にする */
  .hero-text { max-width: min(560px, calc(100vw - 48px - 320px)); }
  /* 赤いライン：下端の左を「本文の右端＋40px」に固定し、上に向かって右へ傾ける */
  .hero-text::after {
    top: -88px;                     /* 写真の下端（#hero の上余白 88px と対応） */
    bottom: -40px;
    left: calc(100% + 40px); right: auto;
    width: 32px;
  }
  /* 灰色の帯：下端の左を「本文の右端＋200px」に固定 */
  .hero-text::before {
    top: -88px;
    bottom: calc(-1 * (var(--sp-section) + 20px));
    left: calc(100% + 200px);
  }
}