/* =============================================================
   依山楼岩崎 LP — パターン1
   ・mainコンテンツ部分のみ（既存サイトのヘッダー/ナビ/フッターは別）
   ・スマホファースト（390px基準）／PC版は後段
   ・「文章主役・余白で呼吸する」読み物としての設計
   ============================================================= */

/* ---------- 1. RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol, dl, dt, dd { list-style: none; padding: 0; margin: 0; }
button { font: inherit; }

/* ---------- 2. DESIGN TOKENS ---------- */
:root {
  /* Color — 紙のような地。黒・金は使わない */
  --bg:        #fbf8f1;
  --bg-soft:   #f3ede0;
  --ink:       #2c2620;
  --ink-soft:  #6e645a;
  --line:      #d9d0bd;
  --accent:    #8d6a3e;

  /* Type — 本文 */
  --fs-body-sp: 15px;
  --fs-body-pc: 16px;
  --lh-body-sp: 2.1;
  --lh-body-pc: 2.2;
  --tracking:   0.04em;

  /* Type — 見出し */
  --fs-h1: clamp(32px, 5vw, 56px);
  --fs-h2: clamp(24px, 3vw, 36px);
  --fs-h3: 20px;

  /* Spacing */
  --space-section: clamp(80px, 10vw, 160px);
  --space-elm:     clamp(32px, 6vw, 64px);
  --space-block:   clamp(48px, 9vw, 96px);

  /* Layout */
  --measure: 760px;
  --gutter:  28px;
}

/* ---------- 3. TYPE FOUNDATION ---------- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "游明朝", serif;
  font-weight: 400;
  font-size: var(--fs-body-sp);
  line-height: var(--lh-body-sp);
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  body {
    font-size: var(--fs-body-pc);
    line-height: var(--lh-body-pc);
  }
}

p { margin: 0 0 1.6em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3 {
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.6;
  margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* ---------- 4. PAGE FRAME ---------- */
.page {
  padding-top: env(safe-area-inset-top);
}

.section {
  padding-block: var(--space-section);
}

.measure {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.photo {
  margin: 0;
}
.photo img {
  width: 100%;
  height: auto;
}

/* 雑誌的な流れ：写真 → 余白 → 文章 */
.photo + .measure,
.measure + .photo,
.photo + .photo {
  margin-top: var(--space-elm);
}

/* ---------- 5. FV ---------- */
.fv {
  padding-block: clamp(56px, 10vw, 120px) clamp(80px, 12vw, 144px);
  background: var(--bg);
}
.fv__photo {
  margin-bottom: clamp(48px, 10vw, 88px);
}
.fv__photo img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
@media (min-width: 768px) {
  .fv__photo img { aspect-ratio: 16 / 10; }
}
.fv__lead {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.fv__eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--ink-soft);
  margin-bottom: 2.4em;
}
.fv__title {
  font-size: clamp(34px, 8vw, 56px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.08em;
  margin-bottom: 1.8em;
}
.fv__title small {
  display: block;
  font-size: 12px;
  margin-top: 1.8em;
  color: var(--ink-soft);
  letter-spacing: 0.28em;
  line-height: 1.7;
  font-weight: 400;
}
@media (min-width: 768px) {
  .fv__title { letter-spacing: 0.1em; }
  .fv__title small { font-size: 13px; }
}
.fv__body {
  color: var(--ink);
}
.fv__body p + p {
  margin-top: 1.8em;
}

/* ---------- 6. SECTION HEAD ---------- */
.s-head {
  margin-bottom: var(--space-elm);
}
.s-head__label {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--ink-soft);
  margin-bottom: 1.6em;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--line);
}
.s-head__title {
  font-weight: 500;
  line-height: 1.55;
}
.s-head__sub {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 1em;
  letter-spacing: 0.12em;
}

.block + .block {
  margin-top: var(--space-block);
}

/* ---------- 7. リスト ---------- */
.bullet-list {
  margin-top: var(--space-elm);
}
.bullet-list li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 1.2em;
  line-height: 2.0;
}
.bullet-list li::before {
  content: "";
  position: absolute;
  left: .1em;
  top: 1em;
  width: .7em; height: 1px;
  background: var(--ink-soft);
}
.bullet-list li:last-child { margin-bottom: 0; }

/* ---------- 8. NOTICE BLOCK ---------- */
.notice {
  background: var(--bg-soft);
  padding-block: clamp(80px, 11vw, 144px);
}
.notice .s-head__label { border-bottom-color: rgba(110, 100, 90, 0.25); }
.notice .body p + p { margin-top: 1.8em; }

/* ---------- 9. NARRATIVE ---------- */
.narrative .photo img {
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
@media (min-width: 768px) {
  .narrative .photo img { aspect-ratio: 16 / 9; }
}
.narrative .body p + p {
  margin-top: 1.6em;
}
.narrative .measure + .photo {
  margin-top: var(--space-block);
}

/* ---------- 10. CLOSING ---------- */
.closing {
  padding-block: clamp(96px, 14vw, 168px);
  text-align: center;
}
.closing__body {
  max-width: 600px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.closing__title {
  font-size: clamp(20px, 3.4vw, 26px);
  font-weight: 400;
  line-height: 2.1;
  margin-bottom: 2.4em;
  letter-spacing: 0.08em;
}
.closing__body p + p { margin-top: 1.8em; }

/* ---------- 11. CTA ---------- */
.cta {
  padding-block: clamp(56px, 9vw, 96px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  background: var(--bg);
}
.cta__lead {
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.32em;
  margin-bottom: 2.6em;
}
.cta__links {
  display: flex;
  flex-direction: column;
  gap: 1.6em;
  align-items: center;
}
.cta__links a {
  position: relative;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 0.14em;
  color: var(--ink);
  padding-bottom: .4em;
  border-bottom: 1px solid var(--accent);
  transition: color .2s ease, border-color .2s ease;
}
.cta__links a::after {
  content: "→";
  margin-left: 1em;
  color: var(--accent);
  font-feature-settings: "palt";
  transition: transform .25s ease;
  display: inline-block;
}
.cta__links a:hover { color: var(--accent); }
.cta__links a:hover::after { transform: translateX(4px); }
@media (min-width: 640px) {
  .cta__links {
    flex-direction: row;
    justify-content: center;
    gap: clamp(28px, 5vw, 64px);
  }
}

/* ---------- 12. FAQ ---------- */
.faq__intro {
  margin-top: 1em;
  margin-bottom: var(--space-elm);
  color: var(--ink-soft);
  font-size: 14px;
}
.faq__list {
  margin-top: var(--space-elm);
}
.faq__item {
  padding-block: clamp(28px, 5vw, 44px);
  border-top: 1px solid var(--line);
}
.faq__item:last-child { border-bottom: 1px solid var(--line); }

.faq__q {
  display: flex;
  gap: .8em;
  font-size: clamp(15px, 2.2vw, 17px);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.9;
  margin-bottom: 1.4em;
}
.faq__q .mark {
  flex: none;
  color: var(--accent);
  font-feature-settings: "palt";
  letter-spacing: 0;
}
.faq__a {
  display: flex;
  gap: .8em;
  color: var(--ink);
}
.faq__a .mark {
  flex: none;
  color: var(--ink-soft);
  font-feature-settings: "palt";
  letter-spacing: 0;
}
.faq__a p { margin: 0; }

/* ---------- 13. UTILITY ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- 14. GUARD（chrome.css の汎用ルールが LP本体に侵食しないよう補強）
   common.css が body / body * / html / h1-h6 / img / p などをグローバルに上書き
   するため、main 配下では LP のデザイントークンを優先する */
main, main * {
  word-break: auto-phrase;
}
main img,
main picture {
  display: block;
}
main p {
  margin: 0 0 1.6em;            /* common.css の "p { margin-bottom: 1.5em }" を上書き */
}
main h1, main h2, main h3 {
  margin: 0;                    /* common.css の "h1-h6 { margin-bottom: 1.5em }" を上書き */
  font-weight: 500;             /* common.css の bold を上書き */
}
main h1 { font-size: var(--fs-h1); }
main h2 { font-size: var(--fs-h2); }
main h3 { font-size: var(--fs-h3); }

/* SP固定CTA（.navigation-common-fixed.sm）と LP本体の被り防止
   common.css に padding-bottom 指定が無いので main 下に余白を確保する */
@media only screen and (max-width: 767.98px) {
  main {
    padding-bottom: 96px;
  }
}