/*
 * Fuchidori 紹介ページ。写真集の紙面として組む。
 *
 * 決まり（これ以外の値は使わない）
 *   色   … 紙 #f4f2ee ／ 墨 #23211f（弱めは同じ墨の薄め）／ 朱 #b4442c（押せる所だけ）／ 罫 #dcd8d0
 *   書体 … 見出しは明朝、本文はゴシック
 *   文字 … 見出し大 ／ 見出し中 ／ 本文 16px ／ 注記 12px
 *   余白 … 8 ／ 16 ／ 40 ／ 120（スマホは 72）
 * 背景は紙の1色だけ。節ごとに色を変えない。
 */
:root {
  --paper: #f4f2ee;
  --ink: #23211f;
  --ink-2: #6b6760;
  --accent: #b4442c;
  --rule: #dcd8d0;

  --mincho: 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho', 'YuMincho', 'Noto Serif JP', 'Noto Serif CJK JP', serif;
  --gothic: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'YuGothic', 'Noto Sans JP', Meiryo, system-ui, sans-serif;

  --t-xl: clamp(30px, 4.4vw, 52px);
  --t-l: clamp(24px, 3.4vw, 34px);
  --t-m: 16px;
  --t-s: 12px;

  --s1: 8px;
  --s2: 16px;
  --s3: 40px;
  --s4: 120px;

  --w: 1160px;
  --gutter: 20px;
  color-scheme: light;
}
@media (max-width: 720px) {
  :root {
    --s4: 72px;
  }
}
@media (min-width: 721px) {
  :root {
    --gutter: 40px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--gothic);
  font-size: var(--t-m);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
:lang(en) body {
  --mincho: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --gothic: -apple-system, 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif;
  line-height: 1.7;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
}
h1,
h2,
h3,
p,
figure,
dl,
dd,
ol,
ul {
  margin: 0;
}
:lang(ja) h1,
:lang(ja) h2 {
  word-break: auto-phrase;
}
.wrap {
  width: 100%;
  max-width: calc(var(--w) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.note {
  font-size: var(--t-s);
  line-height: 1.7;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* 余白の小道具（ページに style 属性を書かない。CSP で止まるため） */
.mt2 {
  margin-top: var(--s2);
}
.mt3 {
  margin-top: var(--s3);
}
.measure {
  max-width: 40em;
}

/* ── 天 ── */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding-top: var(--s2);
  padding-bottom: var(--s2);
}
.brand {
  font-family: var(--mincho);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.top nav {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-s);
  letter-spacing: 0.04em;
}
.top nav a {
  text-decoration: none;
  color: var(--ink-2);
}
.top nav [aria-current] {
  color: var(--ink);
}
.top .go {
  color: var(--accent);
  font-weight: 600;
}

/* ── 冒頭 ── */
.hero {
  display: grid;
  gap: var(--s3);
  padding-top: var(--s3);
  padding-bottom: var(--s4);
}
@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--s4);
  }
}
.kicker {
  margin-bottom: var(--s2);
  font-size: var(--t-s);
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.hero h1 {
  font-family: var(--mincho);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: 0.02em;
}
:lang(en) .hero h1 {
  line-height: 1.15;
  letter-spacing: 0;
}
.hero h1 .num {
  display: block;
  margin-bottom: var(--s1);
  font-size: var(--t-l);
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.lead {
  margin-top: var(--s3);
  max-width: 30em;
}
.act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-height: 48px;
  padding: 0 var(--s3);
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
}
.btn--line {
  background: transparent;
  color: var(--accent);
}
.btn:active {
  transform: translateY(1px);
}
.work figcaption,
.shot figcaption {
  margin-top: var(--s1);
}
.hero .work img {
  width: 100%;
  box-shadow: 0 1px 2px rgb(35 33 31 / 0.12), 0 18px 40px -24px rgb(35 33 31 / 0.5);
}

/* ── 節 ── */
.sec {
  padding-top: var(--s4);
  padding-bottom: var(--s4);
  border-top: 1px solid var(--rule);
}
.sec h2 {
  font-family: var(--mincho);
  font-size: var(--t-l);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  max-width: 22em;
}
:lang(en) .sec h2 {
  line-height: 1.25;
}
.sec h2 + p {
  margin-top: var(--s2);
  max-width: 34em;
}
.sec__body {
  margin-top: var(--s3);
}
h3 {
  font-size: var(--t-m);
  font-weight: 600;
}

/* 作例の壁: 冒頭のすぐ下に、違う写真・違う額を横一列に。スマホは指で横に送る */
.wall {
  display: flex;
  gap: var(--s3);
  align-items: flex-end;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--gutter) var(--s2);
  margin-bottom: var(--s4);
  scrollbar-width: none;
}
.wall::-webkit-scrollbar {
  display: none;
}
.wall figure {
  flex: none;
  scroll-snap-align: center;
}
.wall img {
  height: 240px;
  width: auto;
  box-shadow: 0 1px 2px rgb(35 33 31 / 0.1), 0 12px 28px -20px rgb(35 33 31 / 0.5);
}
@media (min-width: 900px) {
  .wall {
    justify-content: center;
    overflow: visible;
  }
  /* 5枚の幅の合計は高さの約4.7倍。画面の幅に収まる高さにする（最大 340px） */
  .wall img {
    height: min(340px, calc((100vw - 280px) / 4.8));
  }
}

/* 額を替える: 見出しの横に大きい1枚、下に残りを大小つけて */
.works-hd {
  display: grid;
  gap: var(--s3);
  align-items: end;
}
@media (min-width: 900px) {
  .works-hd {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: var(--s3);
  }
}
.works-hd img {
  width: 100%;
  box-shadow: 0 1px 2px rgb(35 33 31 / 0.1), 0 12px 28px -20px rgb(35 33 31 / 0.5);
}

/* 文字の拡大 */
.loupe {
  display: grid;
  gap: var(--s3);
  align-items: start;
}
@media (min-width: 900px) {
  .loupe {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    column-gap: var(--s4);
  }
}
.loupe__img {
  background: #fff;
  border: 1px solid var(--rule);
}
.map {
  width: 100%;
  margin-top: var(--s2);
  border-collapse: collapse;
  font-size: var(--t-m);
}
.map th,
.map td {
  padding: var(--s1) 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}
.map th {
  width: 5.5em;
  padding-right: var(--s2);
  color: var(--ink-2);
  font-size: var(--t-s);
}
.loupe .shot {
  max-width: 280px;
}

/* 撮って出しと、あと */
.ba {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s2);
  align-items: end;
}
@media (min-width: 900px) {
  .ba {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: var(--s4);
    max-width: 920px;
  }
}
.ba img,
.works img,
.ratios img {
  width: 100%;
  box-shadow: 0 1px 2px rgb(35 33 31 / 0.1), 0 12px 28px -20px rgb(35 33 31 / 0.5);
}

/* 額を替える: 大小をつけて組む（均等なマス目にしない） */
.works {
  columns: 2;
  column-gap: var(--s2);
}
@media (min-width: 900px) {
  .works {
    columns: 3;
    column-gap: var(--s3);
  }
}
.works figure {
  break-inside: avoid;
  margin-bottom: var(--s3);
}

/* 比率 */
.ratios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3) var(--s2);
  align-items: end;
}
@media (min-width: 900px) {
  .ratios {
    grid-template-columns: 0.8fr 0.56fr 1fr 1.78fr;
    gap: var(--s3);
  }
}
.ratios b {
  display: block;
  font-family: var(--mincho);
  font-size: var(--t-m);
  font-weight: 600;
  line-height: 1.3;
  margin-top: var(--s2);
}

/* 写真はどこにも送られない */
.private {
  display: grid;
  gap: var(--s3);
}
@media (min-width: 900px) {
  .private {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s4);
  }
}
.facts div {
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule);
}
.facts div:first-child {
  border-top: 1px solid var(--rule);
}
.facts dt {
  font-weight: 600;
}
.facts dd {
  color: var(--ink-2);
  font-size: var(--t-m);
}

/* 使い方 */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .steps {
    gap: var(--s3);
    max-width: 900px;
  }
}
.steps img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 12px 28px -18px rgb(35 33 31 / 0.6);
}
.steps h3 {
  margin-top: var(--s2);
}
.steps h3 span {
  font-family: var(--mincho);
  margin-right: var(--s1);
  color: var(--ink-2);
}
.steps p {
  font-size: var(--t-m);
  color: var(--ink-2);
}
@media (max-width: 600px) {
  .steps p {
    font-size: var(--t-s);
  }
}

/* 共有 */
.share {
  text-align: left;
}
.share .act {
  margin-top: var(--s3);
}
.share .btn {
  min-width: 10em;
}
.share__done {
  min-height: 1.8em;
  margin-top: var(--s2);
}
[hidden] {
  display: none !important;
}

/* 仕様 */
.specs {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  font-size: var(--t-m);
}
.specs dt,
.specs dd {
  padding: var(--s2) 0;
  border-top: 1px solid var(--rule);
}
.specs dt {
  padding-right: var(--s3);
  font-weight: 600;
}
.specs dd {
  color: var(--ink-2);
}
@media (max-width: 600px) {
  .specs {
    grid-template-columns: minmax(0, 1fr);
  }
  .specs dt {
    padding-bottom: 0;
  }
  .specs dd {
    border-top: 0;
    padding-top: var(--s1);
  }
}

/* ── 地 ── */
.foot {
  padding-top: var(--s3);
  padding-bottom: var(--s3);
  border-top: 1px solid var(--rule);
}
.foot__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s1) var(--s3);
}
.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s2);
}
.foot p + p,
.foot__row + p {
  margin-top: var(--s1);
}

/* ── プライバシーポリシー（読み物） ── */
.doc {
  max-width: calc(40em + var(--gutter) * 2);
  padding-top: var(--s3);
  padding-bottom: var(--s4);
}
.doc h1 {
  font-family: var(--mincho);
  font-size: var(--t-l);
  font-weight: 600;
  line-height: 1.5;
}
.doc .note {
  margin-top: var(--s1);
}
.doc h2 {
  margin-top: var(--s3);
  font-size: var(--t-m);
  font-weight: 600;
}
.doc p {
  margin-top: var(--s1);
}
.doc > p:first-of-type {
  margin-top: var(--s3);
}
@media (max-width: 600px) {
  .share .btn {
    width: 100%;
  }
}