/* =========================================================
   Saari 採用LP ── base.css（リセット・タイポgrafik基盤・レイアウト原子）
   Art Direction v4「ちいさな島」／ tokens.css に依存
   ※ 素のCSS・Tailwind不使用・内田さん保守可能なセマンティック設計
   ========================================================= */

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  background:var(--c-paper);
  color:var(--c-ink);
  font-family:var(--ff-jp);
  font-weight:var(--fw-regular);
  font-size:var(--fs-body);
  line-height:var(--lh-normal);
  letter-spacing:var(--ls-jp);
  /* 日本語改行（W-2規律） */
  word-break:auto-phrase;
  line-break:strict;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"palt";
  overflow-x:hidden;
}
img,picture,svg{display:block;max-width:100%;height:auto}
img{image-orientation:from-image}
ul,ol{list-style:none}
/* ページ内アンカー遷移時、固定ヘッダーに見出しが隠れないようオフセット */
section[id],[id].hero{scroll-margin-top:74px}

/* ---- Link（iOS Safari リンク色を無効化・規律） ---- */
a,a:link,a:visited,a:hover,a:active{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a{transition:opacity var(--dur) var(--ease-out)}
a:hover{opacity:.7}

/* アンカー着地が固定ヘッダ／進捗バーに隠れないように */
[id]{scroll-margin-top:84px}
/* キーボード操作のフォーカス可視化（アクセシビリティ） */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.dx-option:focus-visible{outline:2px solid var(--c-rose-deep);outline-offset:3px;border-radius:3px}

/* ---- Layout 原子 ---- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--sp-gutter)}
.wrap--read{max-width:var(--maxw-read)}
.section{padding-block:var(--sp-section)}
.section--sand{background:var(--c-paper-sand)}
.section--white{background:var(--c-white)}

/* ---- 見出し・タイポ階層 ---- */
.eyebrow{
  font-family:var(--ff-accent);font-style:italic;
  font-size:1rem;letter-spacing:var(--ls-wide);
  color:var(--c-rose-deep);margin-bottom:18px;
}
.h-display{
  font-family:var(--ff-display);font-weight:var(--fw-regular);
  font-size:var(--fs-h2);letter-spacing:.03em;line-height:var(--lh-tight);
  color:var(--c-ink);
}
.h-jp{
  font-family:var(--ff-jp-serif);font-weight:var(--fw-regular);
  font-size:var(--fs-h3);letter-spacing:var(--ls-jp-wide);line-height:1.7;
  color:var(--c-ink);
}
.lead{
  font-size:var(--fs-lead);line-height:var(--lh-loose);
  color:var(--c-ink-soft);font-weight:var(--fw-regular);
}
.txt{font-size:var(--fs-body);line-height:var(--lh-loose);color:var(--c-ink)}
.txt-sm{font-size:var(--fs-sm);color:var(--c-ink-soft)}
strong{color:var(--c-rose-deep);font-weight:var(--fw-regular)}

/* セクション共通ヘッダ（中央寄せ・余白主体） */
.sec-head{text-align:center;margin-bottom:clamp(30px,4.5vw,46px)}
.sec-head .h-display{margin-bottom:12px}
.sec-head .h-jp{color:var(--c-ink-soft);font-size:var(--fs-sm);letter-spacing:var(--ls-jp-wide)}

/* ---- Photo grade（彩度を一段落とす） ---- */
.graded{filter:var(--photo-grade)}

/* ---- 手仕事の細線アクセント（島・波） ---- */
.hair-rule{width:48px;height:1px;background:var(--c-rose);margin:24px auto;opacity:.7}

/* ---- Motion：静かなフェードのみ ---- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal-img{overflow:hidden}
.reveal-img img,.reveal-img .bg{opacity:0;transform:scale(1.04);transition:opacity 1.2s var(--ease-out),transform 1.4s var(--ease-out)}
.reveal-img.is-in img,.reveal-img.is-in .bg{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal,.reveal-img img,.reveal-img .bg{opacity:1!important;transform:none!important}
}