/* ==========================================================================
   株式会社HORAI LP

   方向性：代表は「書く人」（ブログ→WEBライター→KADOKAWA出版→Instagram）。
   拠り所を出版・組版の世界に置く。
     - 日本語の大見出しは明朝（Noto Serif JP）
     - 経営理念は縦組み（このページの signature）
     - 朱 #A6402F を数箇所だけ（校正・印章の色）
   配色（白＋ベージュ）はクライアント指定のため変更しない。
   ========================================================================== */

:root {
  --paper:       #FFFFFF;
  --paper-warm:  #F7F5F2;
  --paper-warm2: #F4F2EE;
  --ink:         #16161A;
  --sumi:        #3C3B36;
  --muted:       #55534D;
  --faint:       #6F6D64;   /* 小さいラベル用。白地で約4.9:1 を確保するため濃くしてある */
  --rule:        #E7E4DE;
  --plane:       #FBFAFA;   /* サービス内容の工程台。素材4枚の地色の実測値 */
  --rule-strong: #D9D5CD;
  --sand:        #CBBFAE;
  --shu:         #A6402F;   /* 朱：校正の朱入れ・印章の色。ページ内で数箇所のみ */
  --ink-hover:   #33322E;

  --shell:  1240px;
  --gutter: 56px;

  --serif-en: "Cormorant Garamond", serif;
  --serif-jp: "Noto Serif JP", serif;
  --sans-jp:  "Noto Sans JP", sans-serif;
}

html, body { margin: 0; padding: 0; background: var(--paper); }

body {
  font-family: var(--sans-jp);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
img { max-width: 100%; }

a { color: var(--ink); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--shu); }

:focus-visible {
  outline: 2px solid var(--shu);
  outline-offset: 3px;
}

/* --- モーション ----------------------------------------------------------
   動かすのはヒーローの見出しのみ。読み込み時に一度だけ。
   ずれた位置から所定の位置に「収まる」動き。
   経営理念の「正しい順番を、知っているかどうかだけだ」に対応させている。 */

@keyframes settle {
  from { opacity: 0; transform: translateY(.34em); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --- 土台 ---------------------------------------------------------------- */

.page { width: 100%; overflow-x: hidden; background: var(--paper); }
.shell { max-width: var(--shell); margin: 0 auto; }

.band        { padding: 112px var(--gutter); background: var(--paper); }
.band--warm  { background: var(--paper-warm); }
/* ヒーロー（温白で終わる）と経営理念（白）の境界。地色が入れ替わる位置なので、
   段差を成り行きにせず罫として引く。以前は間にあった全幅スロットの罫が
   この役を担っていた。 */
.hero + .band { border-top: 1px solid var(--rule); }
.band--tight { padding-top: 88px; padding-bottom: 88px; }

/* --- 飾り罫（出版物の版面装飾）------------------------------------------- */

/* SVG を横に伸ばすと菱形まで歪むため、罫は擬似要素、菱形は回転した正方形で組む */
.orn {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 34px;
}
.orn::before,
.orn::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule-strong);
}
.orn i {
  width: 5px;
  height: 5px;
  flex: none;
  background: var(--sand);
  transform: rotate(45deg);
}

/* --- セクション見出し ---------------------------------------------------- */
/* 番号は使わない（各セクションに順序の意味が無いため）。
   小さな英字ラベルと明朝の日本語見出しで受ける。 */

.sec-head { margin-bottom: 62px; max-width: 760px; }
.sec-head__en {
  margin: 0 0 14px;
  font-size: 10px;
  letter-spacing: .28em;
  color: var(--faint);
}
.sec-head__ja {
  margin: 0;
  font-family: var(--serif-jp);
  font-size: clamp(25px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.55;
}
.sec-head__note {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 2.15;
  color: var(--muted);
  font-weight: 300;
}

.sub-head {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 84px 0 38px;
  font-family: var(--serif-jp);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .08em;
}
.sub-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* --- ボタン -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 999px;
  font-size: 12px;
  font-family: inherit;
  letter-spacing: .06em;
}
.btn--solid {
  background: var(--ink);
  color: var(--paper);
  gap: 40px;
  padding: 19px 26px 19px 34px;
}
.btn--solid:hover { background: var(--ink-hover); color: var(--paper); }
.btn--quiet { gap: 18px; color: var(--ink); }
.btn--quiet:hover { color: var(--shu); }

.icon-arrow { height: 9px; width: auto; display: block; }
.icon-arrow--invert { filter: invert(1); }

/* --- ヘッダー ------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--gutter);
  background: rgba(255,255,255,.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.logo { display: flex; align-items: baseline; gap: 12px; }
.logo__mark {
  font-family: var(--serif-en);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: .2em;
}
.logo__sub { font-size: 9px; letter-spacing: .16em; color: var(--faint); }

.site-nav {
  display: flex;
  gap: 38px;
  font-size: 12px;
  letter-spacing: .1em;
  font-weight: 500;
}
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  padding: 14px 22px 14px 26px;
  font-size: 11px;
  letter-spacing: .12em;
}
.header-cta:hover { background: var(--ink-hover); color: var(--paper); }

/* --- ヒーロー ------------------------------------------------------------ */

.hero {
  position: relative;
  /* 下端は温白のまま。次の経営理念は白地なので地色が入れ替わる（逆目）。
     ページ全体が 白→温→白→温 で組まれているので、ここもその流れに乗せる。
     境界の段差は隠さず、罫として declare する（#philosophy の border-top）。 */
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  padding: 116px var(--gutter) 128px;
  overflow: hidden;
}
.hero .shell { position: relative; z-index: 1; }

/* ヒーロー右の情景。見出しの可視幅が704pxまでなので、右の636pxに収める。
   素材は 1536x1024 で Retina上限 768px。表示幅を620px前後に抑えて劣化を避ける。
   ページの地色が暖色（R-B=+5）に対し素材は中性（R-B=0）なので、
   わずかに温度を寄せてから馴染ませている。 */
.hero__scene {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(48%, 680px);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  animation: fadeUp 1.4s ease .5s forwards;
}
.hero__scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;   /* 硝子筒と球（主題）が右寄りなので右を残す */
  filter: sepia(.06) saturate(.96);
  /* 左辺・上辺・下辺を地色に溶かし、切り抜きの境界を出さない。
     上辺を溶かすのは、半透明の固定ヘッダーと干渉させないため。 */
  mask-image: linear-gradient(to right, transparent 0%, #000 30%),
              linear-gradient(to bottom, transparent 0%, #000 16%),
              linear-gradient(to top, transparent 0%, #000 12%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%),
                      linear-gradient(to bottom, transparent 0%, #000 16%),
                      linear-gradient(to top, transparent 0%, #000 12%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
.hero__eyebrow {
  margin: 0 0 36px;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--muted);
  opacity: 0;
  animation: fadeUp .8s ease forwards;
}
.hero__title {
  margin: 0;
  font-family: var(--serif-en);
  font-weight: 300;
  font-size: clamp(46px, 7.4vw, 108px);
  line-height: 1.04;
  letter-spacing: -.012em;
}
.hero__title span {
  display: inline-block;
  opacity: 0;
  animation: settle .95s cubic-bezier(.2,.75,.2,1) forwards;
}
.hero__title span:nth-child(1) { animation-delay: .10s; }
.hero__title span:nth-child(2) { animation-delay: .22s; }
.hero__title span:nth-child(3) { animation-delay: .34s; }
.hero__title span:nth-child(4) { animation-delay: .46s; }

.hero__lead {
  margin: 44px 0 0;
  font-size: 14px;
  line-height: 2.2;
  color: var(--sumi);
  font-weight: 300;
  opacity: 0;
  animation: fadeUp .8s ease .62s forwards;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-top: 54px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp .8s ease .78s forwards;
}

/* --- 経営理念（signature：縦組み）---------------------------------------- */

.creed-wrap {
  display: flex;
  justify-content: center;
  padding: 26px 0 6px;
}
.creed {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: clamp(18px, 2.1vw, 27px);
  line-height: 2.2;
  letter-spacing: .16em;
  height: clamp(310px, 40vw, 440px);
  margin: 0;
  color: var(--ink);
}
.creed em {
  font-style: normal;
  color: var(--shu);          /* 朱：1語のみ */
}

.creed-note {
  margin: 54px auto 0;
  max-width: 620px;
  text-align: center;
  font-size: 13px;
  line-height: 2.3;
  color: var(--muted);
  font-weight: 300;
}

/* --- 悩みの声 ------------------------------------------------------------
   4つの並列した悩み。順序を持たないので、下の「変遷」（本物の時系列）とは
   別の形でなければならない。以前は両方を罫線区切りの行にしていたため、
   意味の違う2つが同じものに見えていた。
   ここは訪問者自身の内心なので、かぎ括弧で「声」として組む。 */

/* 4つの声が中央の一文に収束する構図。
   左右2列＋中央1列のグリッドで、中央は2行ぶんを占める。
   ul は display:contents で外し、li を直接グリッドに配置する。 */
/* 寸法はモック（imege00.png）を実測して版面幅比で移した。
   実測値: 円 中心(786,492) 半径320 / 版面 x110-1385(=1275) の 1536x1024 上。
     円の直径 ……… 版面の 50.2%
     座の水平位置 … 中心から 1.44〜1.77R（左右で違うのは手描きの揺れ）
     座の上下間隔 … 1.75R
     先端と輪の隙間 0.08〜0.29R
   モック自身が左右上下で揺れているので、平均を取って対称に組む。
   列を % で切ることで、これらの比が幅によらず保たれる。 */
.issues {
  display: grid;
  /* 文字はページの階層（縦組み27px > 見出し19px > 本文13.5px）に従わせるため
     モックより小さい。円は文字に合わせて縮めるので、構図全体が版面より
     ひとまわり内側に収まる。この箱の中でモックの比を保つ。 */
  /* 幅・列・間隔・輪をすべて % で持つ。座と引き出し線の長さも同じ幅に
     連動しているので、どれか一つだけ固定すると線が円に届かなくなる。
     輪を中央列と同じ幅（従来109%）にしたので、
     「文字と円の隙間 = 列の間隔」がそのまま成り立つ。 */
  width: 94%;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) 48% minmax(0, 1fr);
  column-gap: 3.5%;
  /* 座の上下間隔を 1.75R にするための行間。R は版面の 25% なので
     間隔 = 版面 × 0.438、そこから項目の高さを引いた値。 */
  row-gap: clamp(150px, calc(16.55vw - 29px), 209px);
  align-items: start;
  margin: 78px auto 0;
}
/* display:contents で ul の箱を外すが、li は list-item のまま。
   マーカーが点として残るので明示的に消す。 */
.issues__list { display: contents; }
.issues__list,
.issue { list-style: none; margin: 0; padding: 0; }

/* 座の大きさ。中央の箱をずらす量もこれを基準に出すので、
   % ではなく長さで持たせている（calc で参照するため）。 */
.issues { --badge-size: clamp(58px, 5.21vw, 75px); }
.issue--tl { grid-area: 1 / 1; }
.issue--tr { grid-area: 1 / 3; }
.issue--bl { grid-area: 2 / 1; }
.issue--br { grid-area: 2 / 3; }
/* 座も引き出し線も左右で鏡にしてあるのに、文字だけ4つとも左揃えだった。
   そのため右の2項目は行頭が円に貼り付き（実測 −2px）、左の2項目は
   行末が文字数ぶん円から離れる（16px と 69px）。文字も鏡にして、
   4項目とも「外側の端で揃い、内側は文字数なりに引く」形にする。 */
.issue--tr,
.issue--br { text-align: right; }
.issue--tr .issue__sub,
.issue--br .issue__sub { padding-left: 0; padding-right: 1em; }

/* アイコンの座。円は罫ではなく「にじみ」で置く。
   このページは罫の集合なので、ここだけ硬い円を足すと図案が勝ってしまう。 */
.issue__badge {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--badge-size);
  aspect-ratio: 1;
  border-radius: 50%;
  margin-bottom: clamp(15px, 1.8vw, 23px);
  /* 輪と同じ理由で closest-side。縁は溶かして輪郭を作らない */
  background: radial-gradient(circle closest-side,
      rgba(203, 191, 174, .17) 0 62%,
      rgba(203, 191, 174, 0) 100%);
}
/* 座は文字塊の「外側の端」から内へ25%。左右で鏡にすることで
   4つの座が円の中心から等距離になる。 */
.issue--tl .issue__badge,
.issue--bl .issue__badge { margin-left: 31.5%; margin-right: auto; }
.issue--tr .issue__badge,
.issue--br .issue__badge { margin-left: auto; margin-right: 31.5%; }
.issue__badge img {
  width: calc(var(--badge-size) * .66);
  height: auto;
}

/* 中心へ伸びる引き出し線。先端に点を打って「ここへ収束する」ことを示す */
.issue__wire {
  position: absolute;
  top: 50%;
  /* 座を鏡にしたので長さは4本とも同じ。
     構図を版面いっぱいに広げて座が外へ出たぶん、線も伸ばしてある。
     1.72倍で先端が輪の外 0.18R（実測 1440px:56px / 1160px:50px）に落ちる。 */
  width: calc(var(--badge-size) * 1.72);
  height: 1px;
  background: var(--sand);
}
.issue__wire::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sand);
}
.issue--tl .issue__wire,
.issue--bl .issue__wire {
  left: calc(100% + 6px);
  transform-origin: 0 50%;
}
.issue--tr .issue__wire,
.issue--br .issue__wire {
  right: calc(100% + 6px);
  transform-origin: 100% 50%;
}
.issue--tl .issue__wire { transform: rotate(26deg); }
.issue--bl .issue__wire { transform: rotate(-26deg); }
.issue--tr .issue__wire { transform: rotate(-26deg); }
.issue--br .issue__wire { transform: rotate(26deg); }
.issue--tl .issue__wire::after,
.issue--bl .issue__wire::after { right: -2px; }
.issue--tr .issue__wire::after,
.issue--br .issue__wire::after { left: -2px; }

.issue__lead {
  margin: 0;
  font-family: var(--serif-jp);
  /* ページの階層: 縦組みの理念27px > セクション見出し19px > ここ > 本文13.5px。
     モックの絶対値（23px）はカンプ単体の値で、この位置では見出しを追い越す。 */
  font-size: clamp(14px, 1.18vw, 17px);
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--ink);
}
.issue__sub {
  margin: 6px 0 0;
  padding-left: 1em;
  font-family: var(--serif-jp);
  font-size: clamp(12.5px, 0.97vw, 14px);
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: .03em;
  color: var(--muted);
}

/* 中心。声を受けて言い切る一文が置かれる、段落の転換点 */
.issues__core {
  position: relative;
  grid-area: 1 / 2 / 3 / 3;
  align-self: center;
  /* 座は項目の「上端」に付くので、グリッドの中央は4つの座の中央より下にある。
     ずれは（項目の高さ÷2 − 座の半径）。実測で座の約0.6倍なので、
     負のマージンで持ち上げて上下の座を中心に対して対称にする。 */
  margin-top: calc(var(--badge-size) * -1.6);
  padding: clamp(30px, 4.4vw, 58px) clamp(12px, 2.4vw, 34px);
  text-align: center;
}
.issues__core > * { position: relative; }
.issues__core::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* 罫ではなく「にじみ」で置く円。輪は箱の外周近くに寄せ、
     内側は文字が乗る余白として空けておく（内側76%は完全に透明）。 */
  /* モックの輪は「半径320を挟んで±8%の細い帯」（実測: 帯幅50px）。
     目に見える輪の位置＝明度のピークなので、ピークを箱の92%に置く。
     箱の幅は中央列と同じにしてある。109%で列からはみ出させていたときは、
     はみ出しぶん（列幅の4.5%）が列の間隔を食い、左右の文字が輪に
     接触していた（実測 −2px）。同じにすると「隙間 = 列の間隔」で読める。 */
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  /* closest-side を明示する。既定の farthest-corner だと % が対角基準になり、
     輪が border-radius の外側（=クリップされる領域）に描かれて消える。 */
  background: radial-gradient(circle closest-side,
      rgba(203, 191, 174, 0) 0 85%,
      rgba(203, 191, 174, .19) 92%,
      rgba(203, 191, 174, 0) 100%);
}
.pivot {
  margin: 0;
  font-family: var(--serif-jp);
  /* モックでは文字幅が円の直径の74%を占める。その比に合わせた大きさ。
     輪の内側（見える半径の92%）に余白を残す値。
     縦組みの理念（27px）を超えないこと。この一文は理念の従属節なので。 */
  font-size: clamp(18px, 1.667vw, 24px);
  font-weight: 600;
  line-height: 1.95;
  letter-spacing: .05em;
}
.pivot__rule {
  display: block;
  width: 84px;
  height: 1px;
  margin: clamp(20px, 2.3vw, 30px) auto;
  background: var(--sand);
}

/* --- 代表挨拶 ------------------------------------------------------------ */

.greet-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 68px;
  align-items: start;
}
.portrait {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.portrait.is-empty {
  background: var(--paper-warm2);
  border: 1px solid var(--rule);
  padding: 24px;
}
.portrait img { width: 100%; height: 100%; object-fit: contain; display: block; }
.portrait .slot-note { display: none; }
.portrait.is-empty .slot-note { display: block; }

.slot-note {
  margin: 0;
  font-size: 10px;
  line-height: 2;
  color: var(--faint);
  font-weight: 300;
  word-break: break-all;
}

/* 名前と肩書きも .greet__body p（詳細度 0,1,1）に負けていた。
   指定は27px/11pxなのに、どちらも13.5pxで出ていた。親を1つ足して揃える。 */
.greet__body .greet__name {
  margin: 0 0 8px;
  font-family: var(--serif-jp);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--ink);
}
.greet__body .greet__role {
  margin: 0 0 32px;
  font-family: var(--sans-jp);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--faint);
}
.career {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 13px;
}
.career li {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 12px;
  font-weight: 300;
  color: var(--muted);
  white-space: nowrap;
}
.career li::after { content: "→"; color: var(--sand); font-size: 11px; }
.career li:last-child::after { content: none; }
.career li:last-child { color: var(--ink); font-weight: 500; }

.greet__body p {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 2.25;
  font-weight: 300;
  color: var(--sumi);
}
/* 2つのリスト名は、本人が実際に作ったものの固有名。
   下線はサービス内容の本文と同じ引き方に揃えてある。 */
.greet__body strong {
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--sand);
  padding-bottom: 2px;
}
/* 文章の折り返し点。ここだけ段落から出して、前後に間を取る。
   大きくはしない。声を張るのではなく、周りを黙らせて聞かせる。
   .greet__sign と同じ理由で、親を1つ足して詳細度を揃えてある。 */
.greet__body .greet__turn {
  margin: 34px 0;
  font-family: var(--serif-jp);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .08em;
  color: var(--ink);
}
/* 文字サイズは .greet__body p（詳細度 0,1,1）に負けるため、
   親を1つ足して詳細度を揃えてある。単独の .greet__sign だと 13.5px のままになる。 */
.greet__body .greet__sign {
  margin: 34px 0 0;
  font-family: var(--serif-jp);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--ink);
}

/* --- 実績：数値 ---------------------------------------------------------- */

.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.figure {
  padding: 44px 30px 40px;
  border-right: 1px solid var(--rule);
}
.figure:last-child { border-right: 0; }
.figure__num {
  display: block;
  font-family: var(--serif-jp);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .04em;
}
.figure__num em {
  font-style: normal;
  font-size: clamp(38px, 4.4vw, 58px);
  font-weight: 600;
  letter-spacing: -.01em;
  margin-right: 3px;
}
.figure__label {
  display: block;
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.95;
  color: var(--muted);
  font-weight: 300;
}

/* --- 実績：出版 ---------------------------------------------------------- */

/* 書影と奥付が1つの塊に見える幅で止める。
   右列を 1fr にすると版面いっぱいに伸び、中身200pxに対して
   400px以上の空白が右に残る（実測）。書影のほうも、
   このページで最も彩度の高い面なので、大きくしすぎない。 */
.book {
  display: grid;
  grid-template-columns: 300px minmax(0, 400px);
  gap: 56px;
  align-items: center;
  justify-content: start;
}
.book__cover {
  position: relative;
  aspect-ratio: 1021 / 1500;
  background: var(--paper);
  box-shadow: 0 30px 60px rgba(0,0,0,.13), 0 2px 6px rgba(0,0,0,.06);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
}
.book__cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.book__cover .slot-note { display: none; }
.book__cover.is-empty { border: 1px solid var(--rule-strong); box-shadow: none; }
.book__cover.is-empty .slot-note { display: block; }

.book__en { margin: 0 0 14px; font-size: 10px; letter-spacing: .28em; color: var(--faint); }
.book__sup { margin: 0 0 8px; font-size: 13px; font-weight: 300; color: var(--muted); }
.book__title {
  margin: 0 0 14px;
  font-family: var(--serif-jp);
  font-size: clamp(24px, 2.2vw, 27px);
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.5;
}
.book__sub {
  margin: 0 0 26px;
  font-size: 13px;
  line-height: 2;
  font-weight: 300;
  color: var(--muted);
}
.book__pub {
  display: inline-block;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--muted);
}

/* --- 会社概要 ------------------------------------------------------------ */

.company-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--rule-strong);
}
.company-table th,
.company-table td {
  text-align: left;
  padding: 22px 8px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  vertical-align: top;
}
.company-table th {
  width: 200px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .08em;
}
.company-table td { font-weight: 300; color: var(--sumi); }

/* --- サービス内容 -------------------------------------------------------- */
/* 左に見出しと本文、右に工程。工程は「順番」そのものを見せる場所なので、
   このページで唯一、横に流れる図版として組む。 */

/* 「サービス内容」はこのセクションの表題なので、他のセクションと同じく最上段に置く。
   図版は他セクションの中身と同じ高さ＝サービス名（Instagram運用）の行から始める。
   表題と同じ高さから図版が始まると、表題が figure のキャプションのように見えて窮屈。 */
.svc {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  grid-template-areas:
    "head    head"
    "eyebrow ."
    "name    flow"
    "body    flow";
  column-gap: 56px;
  align-items: start;
}
.svc__head { grid-area: head; }
.svc__en   { grid-area: eyebrow; }
.svc__name { grid-area: name; }
.svc__body { grid-area: body; }
.svc__flow { grid-area: flow; }
/* クラスを2つ重ねて詳細度を上げてある。狭い画面用の .sec-head が
   このあとに出てくるため、単独の .sec-head--tight だと上書きされる。 */
.sec-head.sec-head--tight { margin-bottom: 30px; }

.svc__en {
  margin: 0 0 14px;
  font-size: 10px;
  letter-spacing: .28em;
  color: var(--faint);
}
.svc__name {
  margin: 0 0 28px;
  font-family: var(--serif-jp);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .04em;
}
.svc__body p {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 2.25;
  font-weight: 300;
  color: var(--sumi);
}
.svc__body p:last-child { margin-bottom: 0; }

/* 工程の台。地色は素材4枚の地色の中央値（実測 #FBFAFA）に合わせてある。
   ここをずらすと画像の外周が四角く浮くので、素材を差し替えない限り変えない。 */
.svc__flow {
  background: var(--plane);
  border-radius: 10px;
  padding: 34px 32px 24px;
}

/* 素材4枚は縦横比がばらばら（0.514 / 0.671 / 0.461 / 0.597）。
   列幅をその比で配ると、画面幅がいくつでも4枚の高さが必ず揃う。
   高さを揃えるために画像を切ったり潰したりする必要がない。 */
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 514fr 671fr 461fr 597fr;
  column-gap: 22px;
}
.flow__step {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.flow__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--sumi);
  white-space: nowrap;
}
/* 工程から次の工程へ渡す線。最後の工程には引かない（その先が無いため） */
.flow__label i {
  flex: 1;
  height: 1px;
  background: var(--rule-strong);
  position: relative;
}
.flow__label i::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--sand);
}
.flow__shot { margin: 0; }
.flow__shot img {
  display: block;
  width: 100%;
  height: auto;
}
.flow__note {
  margin: 20px 0 0;
  text-align: right;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--faint);
}

/* このページの主張は「足りないのは正しい順番」。
   だから工程は、まとめて出さずに左から順に送って出す。
   飾りの動きはこの一箇所だけに置き、他は静止させる。
   初期状態を隠すのは data-flow が付いてからにする。JSが動かない環境で
   opacity:0 のまま消えるのを防ぐため（属性はスクリプトが付ける）。 */
@media (prefers-reduced-motion: no-preference) {
  .flow[data-flow="ready"] .flow__step {
    opacity: 0;
    transform: translateY(12px);
  }
  .flow[data-flow="in"] .flow__step {
    animation: flowIn .72s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .flow[data-flow="in"] .flow__step:nth-child(2) { animation-delay: .13s; }
  .flow[data-flow="in"] .flow__step:nth-child(3) { animation-delay: .26s; }
  .flow[data-flow="in"] .flow__step:nth-child(4) { animation-delay: .39s; }
}
@keyframes flowIn {
  to { opacity: 1; transform: none; }
}

/* --- お問い合わせ -------------------------------------------------------- */

.cta-panel {
  background: var(--paper-warm2);
  border-radius: 6px;
  padding: 92px 76px;
}
.cta-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}
.cta__title {
  margin: 0;
  font-family: var(--serif-en);
  font-weight: 300;
  font-size: clamp(34px, 4.3vw, 58px);
  line-height: 1.14;
  letter-spacing: .01em;
}
.cta__aside { max-width: 400px; }
.cta__aside p {
  margin: 0 0 30px;
  font-size: 13px;
  line-height: 2.2;
  color: var(--sumi);
  font-weight: 300;
}

/* --- フッター ------------------------------------------------------------ */

/* 地色は白→温白の交互で送る。フッターを白のままにすると
   お問い合わせから最下部まで白が3枚続き、終わりが見えなくなる。 */
.site-footer {
  padding: 38px var(--gutter) 44px;
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
}
.site-footer .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-nav {
  display: flex;
  gap: 34px;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--sumi);
}
.site-footer small { font-size: 10px; color: var(--faint); letter-spacing: .06em; }

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

@media (max-width: 1080px) {
  :root { --gutter: 40px; }
  .band { padding: 88px var(--gutter); }
  .greet-grid { grid-template-columns: 280px 1fr; gap: 44px; }
  .book { grid-template-columns: 250px minmax(0, 360px); gap: 44px; }
  .svc__flow { padding: 28px 24px 20px; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .figure { border-bottom: 1px solid var(--rule); }
  .figure:nth-child(2n) { border-right: 0; }
  .figure:nth-child(n+3) { border-bottom: 0; }
  .cta-panel { padding: 72px 48px; }
}

@media (max-width: 820px) {
  .site-nav { display: none; }
  /* 狭い画面では本文が画像の上に乗るため、地色に寄せて可読性を確保する。
     不透明度0.45なら、素材の最も暗い画素でも地色と混ざって十分明るくなる。 */
  .hero__scene { width: 58%; }
  .hero__scene img { opacity: .5; }
  .hero { padding: 80px var(--gutter) 92px; }
  .greet-grid { grid-template-columns: 1fr; }
  .portrait { max-width: 280px; }
  .book { grid-template-columns: 1fr; gap: 36px; }
  .book__cover { max-width: 260px; }
  .sec-head { margin-bottom: 48px; }
  .sub-head { margin: 62px 0 30px; }

}

/* 円環の構図は、円が文字を包める大きさを取れる幅でしか成立しない。
   文字には可読性の下限（本文12.5px）があり、それ以下には縮まないので、
   1150px を下回ると側の文字が列幅を超える。そこで積み上げに切り替える。
   引き出し線は指す先が無くなるので消す。
   ※他の折り返しとは成立条件が違うので、独立したブレークポイントにしている。 */
@media (max-width: 1150px) {
  .issues {
    width: auto;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    row-gap: 46px;
    margin: 62px 0 48px;
  }
  .issue--tl { grid-area: 1 / 1; }
  .issue--tr { grid-area: 1 / 2; }
  .issue--bl { grid-area: 2 / 1; }
  .issue--br { grid-area: 2 / 2; }
  .issue__wire { display: none; }
  .issue--tl .issue__badge,
  .issue--tr .issue__badge,
  .issue--bl .issue__badge,
  .issue--br .issue__badge { margin-left: 0; margin-right: 0; }
  /* 箱そのものを正方形にして輪を中に収める。
     padding で高さを稼ぐと箱の高さが中身次第になり、輪が上下にはみ出して
     前後の見出しに重なる（実測で下に19pxかぶっていた）。 */
  .issues__core {
    grid-area: 3 / 1 / 4 / 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(100%, 460px);
    aspect-ratio: 1;
    margin: 34px auto 0;
    padding: 0 clamp(12px, 4vw, 34px);
  }
  .issues__core::before { width: 100%; }
}

/* 左右に割ったままだと、版面が縮んだ分がすべて写真側から引かれ、
   1枚100px台まで潰れて中身が読めなくなる（実測：1151px で101〜146px）。
   4枚を横に並べられる幅が残らない時点で、文章のほうを上に逃がす。
   境目の1240pxは、版面が最大幅（--shell）を保てなくなる幅。 */
@media (max-width: 1240px) {
  .svc {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "eyebrow" "name" "body" "flow";
  }
  /* 縦に積むと表題〜サービス名は続きの塊なので、間を空けるのは図版の前だけ */
  .svc__flow { margin-top: 40px; }
}

@media (max-width: 600px) {
  :root { --gutter: 22px; }
  .hero__scene { width: 54%; }
  .hero__scene img { opacity: .42; }
  .band { padding: 68px var(--gutter); }
  .site-header { padding: 15px var(--gutter); }
  .logo__sub { display: none; }
  .header-cta { gap: 14px; padding: 12px 16px 12px 18px; font-size: 11px; }
  .btn--solid { width: 100%; gap: 20px; padding: 17px 22px 17px 26px; }
  .hero__actions { gap: 18px; }

  /* 縦組みはモバイルでも維持する。高さと字間を詰めて2〜3列に収める。 */
  .creed { font-size: 17px; line-height: 2; letter-spacing: .12em; height: 300px; }
  .creed-note { margin-top: 40px; font-size: 12px; }

  .figures { grid-template-columns: 1fr; }
  .figure { border-right: 0; border-bottom: 1px solid var(--rule); padding: 32px 4px; }
  .figure:last-child { border-bottom: 0; }
  .figure__num em { font-size: 42px; }

  /* 2列だと1項目が4行以上に折り返して読みにくいため、1列に落とす */
  .issues { grid-template-columns: 1fr; row-gap: 38px; }
  /* 1列になると鏡にする相手がいない。右揃えを残すと4項目が
     左・右・左・右とジグザグして読めなくなるので、全部左に戻す。 */
  .issue--tr,
  .issue--br { text-align: left; }
  .issue--tr .issue__sub,
  .issue--br .issue__sub { padding-left: 1em; padding-right: 0; }
  .issue--tl { grid-area: 1 / 1; }
  .issue--tr { grid-area: 2 / 1; }
  .issue--bl { grid-area: 3 / 1; }
  .issue--br { grid-area: 4 / 1; }
  .issues__core { grid-area: 5 / 1 / 6 / 2; }
  /* 円が小さくなるので、文字も一段落として輪の内側に収める。
     輪は版面より少しはみ出させて内側の余白を稼ぐ。106%までなら
     ガター22pxの範囲内に収まり、横スクロールは出ない。 */
  .pivot { font-size: 17px; }
  .issues__core::before { width: min(106%, 460px); }
  /* 座と文字の比（座 ≒ 見出し4.4字ぶん）は広い画面と揃える */
  .issue { display: grid; grid-template-columns: 62px 1fr; column-gap: 18px; }
  .issue__badge { width: 62px; grid-row: 1 / span 2; margin: 0; }
  .issue__badge img { width: 41px; }
  .career { gap: 7px 10px; }
  .career li { font-size: 11px; }
  .book__cover { max-width: 200px; }
  .svc__name { font-size: 25px; }
  /* モバイルでも4列を保つ（2×2に折ると左→右の順番が読めなくなるため）。
     そのぶん幅が要るので、台の内側の余白と列の間を詰めて写真に回す。
     実測：390px 幅で1枚あたり 68 / 89 / 61 / 79px。 */
  .svc__flow { padding: 20px 12px 15px; border-radius: 8px; }
  .flow { column-gap: 8px; }
  .flow__label { font-size: 11px; gap: 6px; margin-bottom: 12px; letter-spacing: .04em; }
  .flow__note { text-align: left; margin-top: 14px; }
  .cta-panel { padding: 52px 26px; }
  .cta__aside .btn--solid { width: 100%; }
  .company-table th { width: 104px; font-size: 12px; padding: 18px 6px; }
  .company-table td { font-size: 12px; padding: 18px 6px; }
  .site-footer .shell { justify-content: center; text-align: center; }
  .footer-nav { gap: 18px; flex-wrap: wrap; justify-content: center; }
}