/* ==========================================================================
   共通部品
   出典: docs/design-spec/99_buttons.md（Zeplin 実測）
   ========================================================================== */

/* --- ボタン基底 ----------------------------------------------------- */
.c-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-pill);
  color: var(--c-white);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-align: left;
  white-space: nowrap;
  transition: background-color .2s var(--ease);
}
.c-btn:hover { color: var(--c-white); }
.c-btn__icon { flex: none; display: block; }

/* 緑（既定） */
.c-btn--green        { background: var(--c-green); }
.c-btn--green:hover  { background: var(--c-green-hover); }   /* 指示書 p02 */
/* 橙 */
.c-btn--orange       { background: var(--c-orange); }
.c-btn--orange:hover { background: var(--c-orange-hover); }  /* 指示書 p02 */

/* リンク先 URL が未支給のボタン（<span> で出している）。
   🚨 hover を殺さないこと。指示書 p02 の Before/After は「見た目の仕様」であり、
      確認用サイトでも hover が効いている必要がある（2026-09-15 指摘）。
      is-pending は「まだ遷移先が無い」ことを示す目印としてだけ持つ。 */

/* 矢印つき（182×40 / 260×40）。右端に icon-allow-w 16×15
   🚨 矢印は**絶対配置**にして、ラベルは矢印と関係なくボタン枠の中央に置く
      （2026-09-16 市川様の方針）。flex の space-between で並べると
      矢印のぶんラベルが左へずれる。 */
.c-btn--arrow {
  position: relative;
  justify-content: center;
  height: 40px;
  padding-inline: 42px;
  font-size: 18px;
}
.c-btn--arrow .c-btn__icon {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  width: 16px;
  height: 15px;
}

/* アイコンつき大（230×46 / ラベル 24px Bold） */
.c-btn--lg {
  height: 46px;
  padding-inline: 24px;
  font-size: 24px;
  font-weight: var(--fw-bold);
}

/* ヘッダーのボタン（ラベル 16px Bold） */
.c-btn--header {
  height: 50px;
  /* 1920px で 19px / 16px（Zeplin 実測）。中間幅ではナビが収まるよう比例で縮める。 */
  padding-inline: clamp(13px, 0.99vw, 19px);
  font-size: clamp(13px, 0.84vw, 16px);
  font-weight: var(--fw-bold);
}

/* --- カテゴリーバッジ ------------------------------------------------ */
/* 124×22 / radius 11 / 1px 枠線 / 塗りなし / Bold 16px。
   枠線と文字は同色（docs/design-spec/05_news.md：PSD の塗り不透明度は 0） */
.c-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 124px;
  height: 22px;
  padding-inline: 8px;
  border: 1px solid currentColor;
  border-radius: 11px;
  background: transparent;
  color: var(--c-green);
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* --- マーカー風アンダーライン（指示書 p07） -------------------------- */
/* 矩形レイヤーではなく背景グラデーションで引く。折り返しても各行に付く */
.c-marker {
  background-image: linear-gradient(var(--c-orange-light), var(--c-orange-light));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 8px;
  padding-bottom: 0;   /* 市川様の指定（2026-09-16）。2px だと下線が文字から離れる */
}
@media (max-width: 1079px) { .c-marker { background-size: 100% 6px; } }

/* --- よくある質問アコーディオンの開閉アニメーション ------------------ */
/* 回答の高さは原稿しだいなので固定値にできない。grid の行を 0fr ↔ 1fr で
   animate すると、高さを JS で測らずに auto 高までなめらかに開く。
   （JS は is-open を付け外しするだけ。hidden 属性は display:none になり
     アニメーションが効かないので使わない ― 2026-09-16 市川様のご要望）。 */
[data-faq-body] {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;   /* 閉じている間は読み上げ・検索対象から外す */
  transition: grid-template-rows 0.32s ease, visibility 0.32s;
}
[data-faq-item].is-open > [data-faq-body] {
  grid-template-rows: 1fr;
  visibility: visible;
}
/* 🚨 clip 層（余白も枠線も持たない空の div）を必ず挟む。
   padding や border を持つ要素を直接 grid アイテムにすると、その分が
   アイテムの最小高になって行が 0 まで縮まない（閉じても 50px 残る）。 */
[data-faq-body] > * {
  overflow: hidden;
  min-height: 0;
}

/* ＋ → − のアイコン。縦棒を回しながら消す */
[data-faq-toggle] .p-work__faq-icon::after,
[data-faq-toggle] .p-flow__faq-icon::after {
  transition: transform 0.32s ease, opacity 0.32s ease;
}
[data-faq-item].is-open .p-work__faq-icon::after,
[data-faq-item].is-open .p-flow__faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  [data-faq-body],
  [data-faq-toggle] .p-work__faq-icon::after,
  [data-faq-toggle] .p-flow__faq-icon::after { transition: none; }
}

/* --- セクション見出し ------------------------------------------------ */
.c-section-title {
  font-size: 40px;
  font-weight: var(--fw-bold);
  color: var(--c-text);
}
@media (max-width: 1079px) { .c-section-title { font-size: 26px; } }

/* --- 下層ページヘッダー（緑帯＋旗＋タイトル） ------------------------ */
/* 仕様: docs/design-spec/02_work.md「1. ページヘッダー」
   帯は PC/SP とも高さ 380px。下端に重なる白い波は各ページ側で描く。 */
.c-pagehead {
  background: var(--c-page-band);
  height: 380px;
}
.c-pagehead__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 52px;            /* 帯上端 120 → 旗上端 172 */
}
.c-pagehead__flag {
  width: 147px;
  height: 138px;
  margin-bottom: 15px;          /* 市川様の指定（2026-09-16） */
}
.c-pagehead__title {
  font-size: 50px;
  font-weight: var(--fw-bold);
  color: var(--c-text);
  text-align: center;
}

@media (max-width: 1079px) {
  .c-pagehead__inner { padding-top: 40px; }
  .c-pagehead__flag  { width: 98px; height: 93px; margin-bottom: 25px; }
  .c-pagehead__title { font-size: 30px; }
}

/* --- ボタンの固定幅（Zeplin 実測値） -------------------------------- */
/* 「詳しく見る」182 / 「ご利用の流れを見る」「他のお知らせも見る」「戻る」「送信する」260 */
.c-btn--w182 { width: 182px; }
.c-btn--w260 { width: 260px; }
@media (max-width: 1079px) {
  .c-btn--w182, .c-btn--w260 { max-width: 100%; }
}

/* --------------------------------------------------------------------
   波形（セクション境界）
   -------------------------------------------------------------------- */
/*
 * サイト内の波形は **1つの形（A）と、その左右反転（B）** の2種類しかない。
 * 全21画面の形状アセットのアルファ上端を実測して確認した（2026-09-15）。
 *   A … ヒーロー下端 / クリーム→緑 / 下層ページの帯下 ほか大半
 *   B … TOP の 白→クリーム・緑→白、ご利用の流れ PC y=1675
 * PC と SP は深さが違う（PC 84/1920・SP 30/375）が **シルエットは同一** なので、
 * preserveAspectRatio="none" の1パスを共用できる。
 *
 * 画像ではなく **マスク** で持つ。色は使う側が --wave-fill で渡すので、
 * 色トークンを変えても波形を作り直す必要がない。
 *
 * 使い方 — 波を「上端に載せたいセクション」に data-wave を付ける:
 *     <section class="p-work__lead" data-wave>        … 形A（既定）
 *     <div class="p-front__band--cream" data-wave="b"> … 形B
 *   CSS 側で色を渡す:
 *     .p-work__lead { --wave-fill: var(--c-white); }
 *   前のセクションに食い込ませたいときだけ:
 *     .p-front__band { --wave-top: auto; --wave-bottom: 100%; }
 *
 * 生成: node design/gen-waves.cjs --apply
 */
:root {
  /* 波形マスク。design/gen-waves.cjs が Zeplin の形状アセットから生成する。手で書き換えない。
     A = 既定の向き / B = A の左右反転。-up は「曲線より上」を塗る版。
     色は使う側の --wave-fill で決める。 */
  --wave-a: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,1.6L10.4,0L20.8,1.2L31.3,2.8L41.7,4.3L52.1,6.3L62.5,8.3L72.9,10.3L83.3,12.6L93.8,14.6L104.2,17L114.6,19.8L125,22.1L135.4,25.3L145.8,29.2L156.3,33.2L166.7,37.5L177.1,41.5L187.5,45.8L197.9,50.2L208.3,54.5L218.8,58.9L229.2,63.2L239.6,67.6L250,71.5L260.4,75.5L270.8,79.1L281.3,82.6L291.7,85.8L302.1,88.5L312.5,90.9L322.9,92.9L333.3,94.9L343.8,96.4L354.2,97.6L364.6,98.8L375,99.6L385.4,100L395.8,100L406.3,100L416.7,99.6L427.1,99.2L437.5,98L447.9,96.8L458.3,95.7L468.8,94.1L479.2,92.1L489.6,89.7L500,87.4L510.4,85L520.8,81.8L531.3,78.7L541.7,75.5L552.1,71.9L562.5,68L572.9,64.4L583.3,60.5L593.8,56.5L604.2,52.6L614.6,48.2L625,44.3L635.4,40.3L645.8,36.4L656.3,32.8L666.7,28.9L677.1,25.3L687.5,22.1L697.9,18.6L708.3,15.8L718.8,12.6L729.2,10.3L739.6,7.9L750,5.9L760.4,4L770.8,2.8L781.3,1.6L791.7,0.8L802.1,0.8L812.5,0.8L822.9,1.2L833.3,2L843.8,2.8L854.2,4.3L864.6,5.9L875,7.5L885.4,9.9L895.8,12.3L906.3,14.6L916.7,17.8L927.1,20.9L937.5,24.1L947.9,27.7L958.3,31.6L968.8,35.6L979.2,39.9L989.6,44.7L1000,49L1000,100L0,100Z'%20fill='%23000'/%3E%3C/svg%3E");
  --wave-b: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,49L10.4,44.7L20.8,39.9L31.3,35.6L41.7,31.6L52.1,27.7L62.5,24.1L72.9,20.9L83.3,17.8L93.8,14.6L104.2,12.3L114.6,9.9L125,7.5L135.4,5.9L145.8,4.3L156.3,2.8L166.7,2L177.1,1.2L187.5,0.8L197.9,0.8L208.3,0.8L218.8,1.6L229.2,2.8L239.6,4L250,5.9L260.4,7.9L270.8,10.3L281.3,12.6L291.7,15.8L302.1,18.6L312.5,22.1L322.9,25.3L333.3,28.9L343.8,32.8L354.2,36.4L364.6,40.3L375,44.3L385.4,48.2L395.8,52.6L406.3,56.5L416.7,60.5L427.1,64.4L437.5,68L447.9,71.9L458.3,75.5L468.8,78.7L479.2,81.8L489.6,85L500,87.4L510.4,89.7L520.8,92.1L531.3,94.1L541.7,95.7L552.1,96.8L562.5,98L572.9,99.2L583.3,99.6L593.8,100L604.2,100L614.6,100L625,99.6L635.4,98.8L645.8,97.6L656.3,96.4L666.7,94.9L677.1,92.9L687.5,90.9L697.9,88.5L708.3,85.8L718.8,82.6L729.2,79.1L739.6,75.5L750,71.5L760.4,67.6L770.8,63.2L781.3,58.9L791.7,54.5L802.1,50.2L812.5,45.8L822.9,41.5L833.3,37.5L843.8,33.2L854.2,29.2L864.6,25.3L875,22.1L885.4,19.8L895.8,17L906.3,14.6L916.7,12.6L927.1,10.3L937.5,8.3L947.9,6.3L958.3,4.3L968.8,2.8L979.2,1.2L989.6,0L1000,1.6L1000,100L0,100Z'%20fill='%23000'/%3E%3C/svg%3E");
  --wave-a-up: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,1.6L10.4,0L20.8,1.2L31.3,2.8L41.7,4.3L52.1,6.3L62.5,8.3L72.9,10.3L83.3,12.6L93.8,14.6L104.2,17L114.6,19.8L125,22.1L135.4,25.3L145.8,29.2L156.3,33.2L166.7,37.5L177.1,41.5L187.5,45.8L197.9,50.2L208.3,54.5L218.8,58.9L229.2,63.2L239.6,67.6L250,71.5L260.4,75.5L270.8,79.1L281.3,82.6L291.7,85.8L302.1,88.5L312.5,90.9L322.9,92.9L333.3,94.9L343.8,96.4L354.2,97.6L364.6,98.8L375,99.6L385.4,100L395.8,100L406.3,100L416.7,99.6L427.1,99.2L437.5,98L447.9,96.8L458.3,95.7L468.8,94.1L479.2,92.1L489.6,89.7L500,87.4L510.4,85L520.8,81.8L531.3,78.7L541.7,75.5L552.1,71.9L562.5,68L572.9,64.4L583.3,60.5L593.8,56.5L604.2,52.6L614.6,48.2L625,44.3L635.4,40.3L645.8,36.4L656.3,32.8L666.7,28.9L677.1,25.3L687.5,22.1L697.9,18.6L708.3,15.8L718.8,12.6L729.2,10.3L739.6,7.9L750,5.9L760.4,4L770.8,2.8L781.3,1.6L791.7,0.8L802.1,0.8L812.5,0.8L822.9,1.2L833.3,2L843.8,2.8L854.2,4.3L864.6,5.9L875,7.5L885.4,9.9L895.8,12.3L906.3,14.6L916.7,17.8L927.1,20.9L937.5,24.1L947.9,27.7L958.3,31.6L968.8,35.6L979.2,39.9L989.6,44.7L1000,49L1000,0L0,0Z'%20fill='%23000'/%3E%3C/svg%3E");
  --wave-b-up: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,49L10.4,44.7L20.8,39.9L31.3,35.6L41.7,31.6L52.1,27.7L62.5,24.1L72.9,20.9L83.3,17.8L93.8,14.6L104.2,12.3L114.6,9.9L125,7.5L135.4,5.9L145.8,4.3L156.3,2.8L166.7,2L177.1,1.2L187.5,0.8L197.9,0.8L208.3,0.8L218.8,1.6L229.2,2.8L239.6,4L250,5.9L260.4,7.9L270.8,10.3L281.3,12.6L291.7,15.8L302.1,18.6L312.5,22.1L322.9,25.3L333.3,28.9L343.8,32.8L354.2,36.4L364.6,40.3L375,44.3L385.4,48.2L395.8,52.6L406.3,56.5L416.7,60.5L427.1,64.4L437.5,68L447.9,71.9L458.3,75.5L468.8,78.7L479.2,81.8L489.6,85L500,87.4L510.4,89.7L520.8,92.1L531.3,94.1L541.7,95.7L552.1,96.8L562.5,98L572.9,99.2L583.3,99.6L593.8,100L604.2,100L614.6,100L625,99.6L635.4,98.8L645.8,97.6L656.3,96.4L666.7,94.9L677.1,92.9L687.5,90.9L697.9,88.5L708.3,85.8L718.8,82.6L729.2,79.1L739.6,75.5L750,71.5L760.4,67.6L770.8,63.2L781.3,58.9L791.7,54.5L802.1,50.2L812.5,45.8L822.9,41.5L833.3,37.5L843.8,33.2L854.2,29.2L864.6,25.3L875,22.1L885.4,19.8L895.8,17L906.3,14.6L916.7,12.6L927.1,10.3L937.5,8.3L947.9,6.3L958.3,4.3L968.8,2.8L979.2,1.2L989.6,0L1000,1.6L1000,0L0,0Z'%20fill='%23000'/%3E%3C/svg%3E");
}

[data-wave] {
  position: relative;
  --wave-h: 84px;            /* Zeplin 実測の波の深さ（PC） */
}
[data-wave]::before {
  content: "";
  position: absolute;
  top: var(--wave-top, 0);
  bottom: var(--wave-bottom, auto);
  left: 0;
  right: 0;
  z-index: var(--wave-z, auto);
  height: var(--wave-h);
  background-color: var(--wave-fill, var(--c-white));
  -webkit-mask-image: var(--wave-shape, var(--wave-a));
          mask-image: var(--wave-shape, var(--wave-a));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center top;
          mask-position: center top;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  pointer-events: none;
}
[data-wave="b"]::before    { --wave-shape: var(--wave-b); }
/* -up = 曲線より「上」を塗る。波をセクションの内側上端に置き、
   ひとつ前のセクションの色で描くページ（事業所案内・プライバシーポリシー）で使う。 */
[data-wave="up"]::before   { --wave-shape: var(--wave-a-up); }
[data-wave="b-up"]::before { --wave-shape: var(--wave-b-up); }

@media (max-width: 1079px) {
  [data-wave] { --wave-h: 30px; }   /* Zeplin 実測の波の深さ（SP） */
}

/* --------------------------------------------------------------------
   スクロールに合わせた出現アニメーション（2026-09-16）

   このサイトの雰囲気（Zen Maru Gothic の丸み・波形・クリーム地）に合わせ、
   **ふわっと下から浮かび上がる**だけの静かな動きにしている。
   横移動・回転・大きな拡大は使わない（旗だけ例外）。

   使い方 — 出したい要素に data-anim を付ける:
     <div class="p-front__head" data-anim>          … 単体でフェードアップ
     <ul class="p-front__values" data-anim="stagger"> … 直下の子を1つずつ
     <img class="c-pagehead__flag" data-anim="flag"> … 旗だけ少し跳ねる

   🚨 帯（.p-front__band）やセクション自体には付けない。
      transform は**新しい重なり順の基準（stacking context）をつくる**ので、
      セクションからはみ出す円形写真（.p-work__lead-photo など）の
      前後関係が崩れる。付けるのは中身のブロックだけ。

   🚨 初期状態（opacity:0）は html.js が付いているときだけ。
      JS が落ちても本文が消えないようにする。.js は header.php の
      <head> 内インラインスクリプトが即座に付ける。
   -------------------------------------------------------------------- */
:root {
  --anim-rise: 24px;
  --anim-dur:  .8s;
  --anim-step: 90ms;   /* stagger の1つあたりの遅れ */
}

.js [data-anim] {
  opacity: 0;
  transform: translateY(var(--anim-rise));
  transition: opacity var(--anim-dur) var(--ease), transform var(--anim-dur) var(--ease);
}
.js [data-anim].is-inview { opacity: 1; transform: none; }

/* stagger は親ではなく子を動かす */
.js [data-anim="stagger"] { opacity: 1; transform: none; transition: none; }
.js [data-anim="stagger"] > * {
  opacity: 0;
  transform: translateY(var(--anim-rise));
  transition: opacity var(--anim-dur) var(--ease), transform var(--anim-dur) var(--ease);
  transition-delay: calc(var(--anim-i, 0) * var(--anim-step));
}
.js [data-anim="stagger"].is-inview > * { opacity: 1; transform: none; }

/* 旗は棒の根元を軸にすこし振ってから止まる */
.js [data-anim="flag"] {
  transform: translateY(-12px) rotate(-9deg);
  transform-origin: 14% 88%;
  transition-timing-function: cubic-bezier(.34, 1.45, .64, 1);
}

/* 動きを減らす設定の人には出さない（表示だけする） */
@media (prefers-reduced-motion: reduce) {
  .js [data-anim],
  .js [data-anim="stagger"] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}