/* ＆rich 基礎スタイル
   色・字送り・角丸などの値は tokens.css。
   ここには可変値（clamp）・モーション・グレイン・共通部品だけを置く。 */

/* ---------- 可変値（最大値は tokens.css を参照する） ---------- */
:root{
  --pad-x: clamp(24px, 5vw, var(--sp-gutter));
  --sec-tight: clamp(64px, 8vw, var(--sp-section-tight));
  --sec-base: clamp(96px, 11vw, var(--sp-section-base));
  --sec-loose: clamp(140px, 16vw, var(--sp-section-loose));
  /* コンテンツ幅は1つにしない。用途で使い分ける */
  --w-bleed:100%;    /* 写真の裁ち落とし */
  --w-wide:1280px;   /* 節の外枠 */
  --w-main:1000px;   /* 見出しと本文の主要ブロック */
  --w-text:660px;    /* 読ませる本文。16pxで約40字 */
  --w-rail:220px;    /* 細い柱 */
  /* 吹き出しの裾の高さ。お悩み節と、その下で裾に重ねる節の両方が使う */
  --tail:clamp(52px,6.5vw,92px);

  /* モーション。DESIGN.md の Components 節が正本 */
  --ease-exhale: cubic-bezier(.22,1,.36,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
  --dur-micro: .35s;
  --dur-reveal: .9s;
  --dur-panel: 1.1s;

  /* フィルムグレイン。グラデーションとベタ面の上にだけ敷く。写真には敷かない */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* CTAのグラデーション。手書きしないでこの2つだけを使う */
  --grad-cta: linear-gradient(143deg,var(--c-primary) 0%,var(--c-primary) 38%,var(--c-primary) 70%,var(--c-primary) 100%);
  --grad-btn: linear-gradient(125deg,var(--c-cta-from),var(--c-cta-mid) 60%,var(--c-cta-to));
}

/* ---------- リセット ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

body{
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--ff-body);
  font-size:var(--fs-body);
  font-weight:var(--fw-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  font-feature-settings:var(--ffeat-body);
  font-kerning:normal;
  text-spacing-trim:trim-start;
  line-break:strict;
  word-break:auto-phrase;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}

/* ---------- レイアウト ---------- */
.wrap{width:100%;max-width:calc(var(--w-wide) + var(--pad-x) * 2);
  margin-inline:auto;padding-inline:var(--pad-x)}
.wrap--main{max-width:calc(var(--w-main) + var(--pad-x) * 2)}
.wrap--text{max-width:calc(var(--w-text) + var(--pad-x) * 2)}
.wrap--bleed{max-width:none;padding-inline:0}

.sec{padding-block:var(--sec-base)}
.sec--tight{padding-block:var(--sec-tight)}
.sec--loose{padding-block:var(--sec-loose)}
.sec--alt{background:var(--c-bg-alt)}

.rule{height:1px;background:var(--c-line);border:0}

/* グリッド。1fr の最小は auto なので、中身の最小幅で列が広がり親をはみ出す。
   必ず minmax(0,1fr) を使う */
.grid{display:grid;gap:var(--sp-md)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1023px){.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}}

/* ---------- 文字 ---------- */
/* 見出しは詰める。本文とキャプションは開く。小さいほど広く開ける */
h1,.h1,h2,.h2{font-size:var(--fs-h2);font-weight:var(--fw-h2);
  line-height:var(--lh-h2);letter-spacing:var(--ls-h2);
  font-feature-settings:var(--ffeat-h2);text-wrap:balance}
h3,.h3{font-size:var(--fs-h3);font-weight:var(--fw-h3);
  line-height:var(--lh-h3);letter-spacing:var(--ls-h3);
  font-feature-settings:var(--ffeat-h3);text-wrap:balance}
h4,.h4{font-size:var(--fs-h4);font-weight:var(--fw-h4);
  line-height:var(--lh-h4);letter-spacing:var(--ls-h4);
  font-feature-settings:var(--ffeat-h4)}

.lead{font-size:var(--fs-lead);font-weight:var(--fw-lead);
  line-height:var(--lh-lead);letter-spacing:var(--ls-lead)}
.small{font-size:var(--fs-body-small);line-height:var(--lh-body-small);
  letter-spacing:var(--ls-body-small)}
.caption{font-size:var(--fs-caption);line-height:var(--lh-caption);
  letter-spacing:var(--ls-caption);color:var(--c-text-sub)}
.note{color:var(--c-text-sub)}

/* 英字ラベル。Julius Sans One は英字だけに使う。和文に混ぜない */
.kicker{font-family:var(--ff-label);font-size:var(--fs-label);
  font-weight:var(--fw-label);line-height:var(--lh-label);
  letter-spacing:var(--ls-label);color:var(--c-primary-text);
  display:inline-block}

.num{font-size:var(--fs-numeral);font-weight:var(--fw-numeral);
  line-height:var(--lh-numeral);letter-spacing:var(--ls-numeral)}

/* 縦組み。縦組みだけは大きくても字間を開ける */
.vt{writing-mode:vertical-rl;text-orientation:mixed;
  font-size:var(--fs-display);font-weight:var(--fw-display);
  line-height:var(--lh-display);letter-spacing:var(--ls-display);
  font-feature-settings:var(--ffeat-display)}

code{font-family:inherit;font-size:.94em;background:var(--c-bg-alt);
  border-radius:2px;padding:1px 3px;letter-spacing:0;margin-inline:1px}

a.link{color:var(--c-primary-text);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color var(--dur-micro) var(--ease-inout)}
a.link:hover{color:var(--c-text)}

/* ---------- 約物の詰め ---------- */
/* Zen Kaku Gothic New は Google Fonts 配信版に palt が無く、CSSでは詰められない
   （実測: palt指定の有無で幅が1pxも変わらない。text-spacing-trim も効かない）。
   そのためビルド時に site/tools/yakumono.py で約物を span に包み、ここで詰める。
   行頭に来ない文字だけを対象にしているので、折り返し位置に関係なく安全。 */
.y-tou{margin-inline-end:-.5em}
.y-cls{margin-inline-end:-.45em}
.y-int{margin-inline-end:-.3em}

/* ---------- ボタン ---------- */
/* 高さと文字サイズは種類をまたいで必ず揃える。ホバーは色だけ変える */
.btn{display:inline-flex;align-items:center;justify-content:center;
  height:33px;padding-inline:17px;border-radius:var(--r-base);
  border:1px solid transparent;text-decoration:none;cursor:pointer;
  font-family:var(--ff-ui);font-size:var(--fs-ui);font-weight:var(--fw-ui);
  line-height:var(--lh-ui);letter-spacing:var(--ls-ui);
  transition:background-color var(--dur-micro) var(--ease-inout),
             border-color var(--dur-micro) var(--ease-inout),
             color var(--dur-micro) var(--ease-inout),
             filter var(--dur-micro) var(--ease-inout)}
.btn--primary{background-image:var(--grad-btn);color:var(--c-text-invert)}
.btn--primary:hover{filter:saturate(1.08) brightness(.94)}
.btn--ghost{background:transparent;border-color:var(--c-primary);color:var(--c-text)}
.btn--ghost:hover{background:var(--c-bg-alt)}
/* LINEの緑に白文字は 2.26 で不可。文字は必ず墨にする */
.btn--line{background:var(--c-line-green);color:var(--c-text)}
.btn--line:hover{filter:brightness(.94)}
/* 写真の上に置くとき。FVではLINEの緑を出さない。
   淡い写真の上では文字が沈むので、必ずスクリムを敷いてから乗せる */
.on-photo{position:relative;color:#fff}
.on-photo::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(43,34,30,.72) 0%,rgba(43,34,30,.58) 55%,rgba(43,34,30,.30) 100%)}
/* ヘッダーのように文字が横いっぱいに並ぶ場合は、横方向では足りないので全面を落とす */
.on-photo--flat::before{background:rgba(43,34,30,.56)}
.on-photo>*{position:relative;z-index:1}
.on-photo .btn--line{background:#fff;border-color:#fff;color:var(--c-text)}
.on-photo .btn--ghost{border-color:#fff;color:#fff}

.btn--lg{height:52px;padding-inline:32px;font-size:var(--fs-body-small)}

/* 横並びの汎用。札やボタン列で使う */
.nw{white-space:nowrap}

/* Editorial detail links: compact label, precise directional line. */
.more{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;width:auto;min-width:min(100%,280px);max-width:100%;min-height:58px;padding:14px 0;text-decoration:none;border-bottom:1px solid var(--c-primary-text);color:var(--c-text);font-size:15px;font-weight:500;letter-spacing:.06em;line-height:1.7;transition:color 250ms,border-color 250ms}
.more__arrow{width:36px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:square;stroke-linejoin:miter;transition:transform 400ms var(--ease-exhale)}
.more:hover,.more:focus-visible{color:var(--c-primary-text)}
.more:hover .more__arrow,.more:focus-visible .more__arrow{transform:translateX(6px)}
.more:focus-visible{outline:2px solid var(--c-primary-text);outline-offset:5px}
.row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* ---------- カード・チップ ---------- */
/* 影は使わない。細罫線と地の色差と余白だけで奥行きを作る */
.card{background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-base);padding:var(--sp-lg)}
.card__media{border-radius:var(--r-base);overflow:hidden;margin-bottom:var(--sp-md)}
.card__media img{width:100%;height:100%;object-fit:cover}

.chip{display:inline-flex;align-items:center;height:28px;padding-inline:12px;
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-base);font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption);color:var(--c-text)}
.chip--solid{background:var(--c-brand);border-color:transparent}

/* キャンペーンの札。販促は隅に小さく */
.promo{position:relative;display:block;overflow:hidden;min-width:272px;
  padding:14px 20px 15px;border-radius:var(--r-base);
  background-image:var(--grad-cta);color:var(--c-text-invert);text-decoration:none}
.promo::after{content:"";position:absolute;inset:0;background-image:var(--grain);
  background-size:120px 120px;opacity:.34;mix-blend-mode:overlay;pointer-events:none;z-index:2}
/* 地紋。文字だけの札に見せないために自社シンボルを大きく敷く */
.promo__mark{position:absolute;right:-7%;bottom:-30%;width:52%;height:auto;z-index:0;
  opacity:.15;filter:brightness(0) invert(1);pointer-events:none}
.promo>*:not(.promo__mark){position:relative;z-index:1}

/* ---------- 面 ---------- */
.panel-brand{background:var(--c-brand);color:var(--c-text);
  border-radius:var(--r-base);padding:var(--sp-xxl)}
/* 大きな面は生成済みJPGを使う。CSSでグラデーションを手書きしない */
.surface-airy{background:url(../assets/grad-airy.jpg) center/cover no-repeat}
.surface-rose{background:url(../assets/grad-rose.jpg) center/cover no-repeat;color:var(--c-text-invert)}
.surface-shade{background:url(../assets/grad-shade.jpg) center/cover no-repeat;color:var(--c-text-invert)}
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;background-image:var(--grain);
  background-size:150px 150px;opacity:.30;mix-blend-mode:overlay;pointer-events:none}

/* ---------- 写真 ---------- */
figure img,.photo img{border-radius:var(--r-base)}
.photo--circle img{border-radius:var(--r-full)}
figcaption{margin-top:var(--sp-xs);font-size:var(--fs-caption);
  line-height:var(--lh-caption);letter-spacing:var(--ls-caption);color:var(--c-text-sub)}

/* ---------- フォーム ---------- */
/* 記入例は placeholder に入れない。欄の上にラベルとして置く */
.field{display:block;margin-bottom:var(--sp-lg)}
.field__label{display:block;font-size:var(--fs-body-small);font-weight:500;
  letter-spacing:var(--ls-body-small);margin-bottom:var(--sp-xxs)}
.field__hint{display:block;font-size:var(--fs-caption);color:var(--c-text-sub);
  letter-spacing:var(--ls-caption);margin-bottom:var(--sp-xs)}
.field__input,.field__area{width:100%;min-height:48px;padding:12px 14px;
  background:var(--c-surface);border:1px solid var(--c-line-strong);
  border-radius:var(--r-base);font-size:var(--fs-body);
  letter-spacing:var(--ls-body);color:var(--c-text);
  transition:border-color var(--dur-micro) var(--ease-inout)}
.field__area{min-height:140px;line-height:var(--lh-body);resize:vertical}
.field__input:focus,.field__area:focus{outline:none;border-color:var(--c-primary)}
.field__input::placeholder,.field__area::placeholder{color:#B7B1A8}

/* ---------- アコーディオン ---------- */
.acc{border-top:1px solid var(--c-line)}
.acc__item{border-bottom:1px solid var(--c-line)}
/* display:flex にすると、約物を包んだ span が flex アイテムになって
   gap の分だけ離れてしまう。ブロックのまま組み、記号は絶対配置にする */
.acc__q{display:block;position:relative;width:100%;
  padding:var(--sp-lg) 30px var(--sp-lg) 0;background:none;border:0;text-align:left;
  cursor:pointer;font-size:var(--fs-body);font-weight:500;letter-spacing:var(--ls-body);
  line-height:var(--lh-body);list-style:none}
.acc__q::-webkit-details-marker{display:none}
.acc__q::after{content:"＋";position:absolute;right:0;top:var(--sp-lg);
  color:var(--c-primary-text);font-size:var(--fs-body-small);line-height:var(--lh-body)}
.acc__item[open] .acc__q::after{content:"−"}
/* 回答を薄いグレーの小さい字にしない。読ませる文字は本文サイズ・墨 */
.acc__a{padding:0 30px var(--sp-lg) 0;color:var(--c-text);
  font-size:var(--fs-body);line-height:var(--lh-body);
  letter-spacing:var(--ls-body)}

/* ---------- モーション ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------- スマートフォン ---------- */
@media (max-width:767px){
  /* 幅が狭いと横方向のスクリムでは明るい部分に文字が乗る。SPは全面を落とす */
  .on-photo::before{background:rgba(43,34,30,.56)}
  :root{
    --fs-display:32px;
    --fs-h2:24px;
    --fs-h3:19px;
    --fs-h4:17px;
    --fs-lead:15px;
    --fs-body:16px;
    --fs-body-small:13.5px;
    --fs-caption:13px;
    --fs-ui:13px;
    --fs-label:13px;
    --fs-numeral:27px;
  }
  .btn{height:29px;padding-inline:12px}
  .btn--lg{height:48px;padding-inline:24px}
  .card{padding:var(--sp-md)}
  .panel-brand{padding:var(--sp-lg)}
}