@charset "UTF-8";

/* ============================================================
   株式会社つむぐらふ HP — 土と風スタイル
   Responsive: Mobile-first → PC (≥ 768px / ≥ 1024px / ≥ 1280px)
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* colors */
  --c-paper:      #f3ede0;
  --c-paper-deep: #ede4ce;
  --c-cream:      #f3ede0;
  --c-tan:        #ddc6a8;
  --c-sage:       #b8c0b0;
  --c-rose:       #d4b3ac;
  --c-blue:       #a8b5be;
  --c-ink:        #1a1614;
  --c-ink-deep:   #211a14;
  --c-ink-soft:   #5d5347;
  --c-ink-mute:   #6d665c;
  --c-accent:     #9d4d2c;
  --c-on-dark:    #f4ebd5;
  --c-on-dark-sub:#c8bda5;
  --c-hair:       rgba(26,22,20,0.1);

  /* type */
  --f-display: "Shippori Mincho", "Zen Old Mincho", "Noto Serif JP", serif;
  --f-body:    "Shippori Mincho", "Zen Old Mincho", "Noto Serif JP", serif;
  --f-hand:    "Klee One", "Hina Mincho", serif;
  --f-en:      "Italiana", "Cormorant Garamond", serif;
  --f-mono:    "DM Mono", monospace;
  /* ラベル＝ゴシック、英数字＝Inter。明朝ばかりだと対比が出ない */
  --f-label:   "Noto Sans JP", sans-serif;
  --f-num:     "Inter", "Helvetica Neue", sans-serif;

  /* layout */
  --gut-l: 28px;
  --gut-r: 24px;
  --max-w: 1280px;
  --header-h: 64px;
}

@media (min-width: 768px) {
  :root {
    --gut-l: 80px;
    --gut-r: 80px;
    --header-h: 80px;
  }
}

@media (min-width: 1280px) {
  :root {
    --gut-l: 120px;
    --gut-r: 120px;
  }
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  color: var(--c-ink);
  background: var(--c-paper);
  line-height: 1.8;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea, button { font: inherit; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* ── Site frame: brand mark + section mark ────────────────── */
.brand-mark--global {
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: none; /* hide on SP, show on PC */
  flex-direction: column;
  align-items: center;
  writing-mode: vertical-rl;
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: #f3ede0;
  opacity: 0.55;
  mix-blend-mode: difference;
  z-index: 50;
  pointer-events: none;
  line-height: 1.6;
}
.brand-mark--global .brand-mark__main { font-size: 20px; }
.brand-mark--global .brand-mark__sub  { font-size: 13px; opacity: 0.7; }

@media (min-width: 1024px) {
  .brand-mark--global { display: flex; }
}

.section-mark {
  position: absolute;
  top: 28px;
  right: 14px;
  writing-mode: vertical-rl;
  font-family: var(--f-en);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.4em;
  color: var(--c-ink);
  opacity: 0.7;
  text-transform: uppercase;
  z-index: 3;
}
.section-mark--dark { color: var(--c-on-dark); opacity: 0.85; }

@media (min-width: 768px) {
  .section-mark { top: 48px; right: 28px; font-size: 13px; }
}

/* ── Header ───────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 100;
  transition: background-color .4s ease, box-shadow .4s ease, color .4s ease;
  color: var(--c-on-dark);
}
.site-header.is-scrolled {
  background: rgba(243,237,224,0.96);
  color: var(--c-ink);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--c-hair);
}

.site-header__logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}
.site-header__logo-ja {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.18em;
}
.site-header__logo-en {
  font-family: var(--f-en);
  font-size: 10px;
  letter-spacing: 0.35em;
  opacity: 0.8;
}

.site-nav { display: none; }

@media (min-width: 1024px) {
  .site-header { padding: 0 48px; }
  .site-nav { display: block; }
  .site-nav__list {
    display: flex;
    gap: 22px;
    font-family: var(--f-display);
    font-size: 14px;
    letter-spacing: 0.18em;
    font-weight: 500;
  }
  .site-nav__list a {
    position: relative;
    padding: 8px 0;
    transition: opacity .2s;
  }
  .site-nav__list a::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    width: 0; height: 1px;
    background: currentColor;
    transition: width .3s ease, left .3s ease;
  }
  .site-nav__list a:hover::after {
    width: 100%; left: 0;
  }
}

/* hamburger (SP/Tablet) */
.hamburger {
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  padding: 0;
  z-index: 110;
}
.hamburger span {
  display: block;
  height: 1.4px;
  background: currentColor;
  transition: all .35s ease;
}
.hamburger span:first-child { width: 24px; }
.hamburger span:last-child  { width: 16px; }
.hamburger.is-active span:first-child { width: 22px; transform: translateY(4px) rotate(45deg); }
.hamburger.is-active span:last-child  { width: 22px; transform: translateY(-4px) rotate(-45deg); }

@media (min-width: 1024px) {
  .hamburger { display: none; }
}

/* Mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--c-ink-deep);
  color: var(--c-on-dark);
  z-index: 105;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: center;
}
.mobile-menu__list a {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.2em;
}

/* ── Section base ─────────────────────────────────────────── */
.section {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}
.section__inner {
  position: relative;
  padding: 0 var(--gut-r) 0 var(--gut-l);
  max-width: var(--max-w);
  margin: 0 auto;
}

/* 明るいセクションはすべて同じ紙色。
   律動は「色」ではなく「余白・配置・写真」で作る。 */
.section--paper { background: var(--c-paper); }
.section--cream { background: var(--c-paper); }
.section--ink   { background: var(--c-ink-deep); color: var(--c-on-dark); padding: 110px 0; }

@media (min-width: 768px) {
  .section { padding: 110px 0; }
  .section--ink { padding: 120px 0; }
}
@media (min-width: 1024px) {
  .section { padding: 120px 0; }
  .section--ink { padding: 140px 0; }
}

/* ── Typography helpers ───────────────────────────────────── */
.tiny-label {
  display: block;
  font-family: var(--f-en);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--c-ink-soft);
  text-transform: uppercase;
}
.tiny-label--sage  { color: #3c4634; }
.tiny-label--brown { color: #2c2620; }
.tiny-label--onDark { color: var(--c-on-dark-sub); }

.huge-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(36px, 7vw, 78px);
  line-height: 1.15;
  letter-spacing: 0.13em;
  color: var(--c-ink);
  margin-top: 14px;
}
.huge-title--dark { color: var(--c-on-dark); }

.section__head { margin-bottom: 48px; }
@media (min-width: 768px) {
  .section__head { margin-bottom: 72px; }
}

.section__lead {
  margin-top: 36px;
  font-size: 15px;
  line-height: 2.3;
  letter-spacing: 0.05em;
  color: var(--c-ink-soft);
  max-width: 560px;
}
@media (min-width: 768px) {
  .section__lead { font-size: 17px; line-height: 2.4; }
}

/* ── More link ─────────────────────────────────────────────── */
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  font-family: var(--f-en);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.12em;
  color: var(--c-ink);
  transition: gap .25s ease, opacity .2s;
}
.more-link:hover { gap: 22px; }
.more-link--dark { color: var(--c-on-dark); }
.more-link--disabled {
  color: var(--c-ink-mute);
  opacity: 0.6;
  pointer-events: none;
}

/* ============================================================
   01. Hero
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  height: 740px;
}
.hero__photo {
  position: absolute; inset: 0;
}
.hero__photo img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 12%;   /* 顔（上部）を優先表示。ワイド画面でも切れない */
  filter: saturate(1.04) contrast(1.02);
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(20,16,12,0.10) 0%,
    rgba(20,16,12,0.02) 42%,
    rgba(20,16,12,0.65) 100%);   /* 上は明るく顔を保護、下は文字可読性のため濃く */
  pointer-events: none;
}
.hero .section-mark { z-index: 4; }

.hero__brush {
  position: absolute; top: 80px; right: 36px;
  z-index: 4;
}

.hero__title {
  position: absolute;
  /* SPは下から70px、PCは下から10vhの位置に吊るす（顔の上に重ならない） */
  bottom: 90px;
  top: auto;
  right: clamp(28px, 8vw, 120px);
  writing-mode: vertical-rl;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(38px, 5.5vw, 72px);
  line-height: 1.7;
  letter-spacing: 0.15em;
  color: var(--c-on-dark);
  text-shadow: 0 2px 22px rgba(0,0,0,0.55);
  z-index: 3;
}

.hero__sub {
  position: absolute;
  left: clamp(28px, 6vw, 80px);
  bottom: clamp(40px, 6vw, 80px);
  color: var(--c-on-dark);
  z-index: 3;
}
.hero__sub-en {
  font-family: var(--f-en);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.15em;
  line-height: 1.7;
  opacity: 0.95;
}
.hero__sub-rule {
  display: block;
  margin: 24px 0 14px;
  width: 60px; height: 1px;
  background: var(--c-on-dark);
  opacity: 0.5;
}
.hero__sub-mono {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  opacity: 0.7;
}

.hero__scroll {
  display: none;
  position: absolute;
  right: 48px;
  bottom: 40px;
  z-index: 3;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--c-on-dark);
  font-family: var(--f-en);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.35em;
  opacity: 0.8;
  writing-mode: vertical-rl;
}
.hero__scroll-line {
  width: 1px; height: 60px;
  background: var(--c-on-dark);
  transform-origin: top;
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%, 100% { transform: scaleY(0.3); opacity: 0.4; }
  50%      { transform: scaleY(1); opacity: 1; }
}

/* Hero — Tablet+ */
@media (min-width: 768px) {
  .hero { height: 100vh; min-height: 720px; }
  .hero__title {
    top: auto;
    bottom: clamp(80px, 10vh, 140px);
    right: clamp(40px, 8vw, 120px);
    font-size: clamp(52px, 6vw, 84px);
  }
  .hero__brush { top: 110px; right: 56px; }
  .hero__scroll { display: flex; }
}

/* ============================================================
   02. About — 4ブランドの写真コラージュを背景に
   ============================================================ */
.about {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center;
  min-height: 620px;
}

/* --- コラージュ --- */
.about__collage { position: absolute; inset: 0; pointer-events: none; }

.collage__item {
  position: absolute;
  /* 写真として読める濃さまで上げる */
  left: var(--x); top: var(--y);
  width: var(--w);
  opacity: var(--op);
  /* ゆっくり漂う。回転は保ったまま上下する */
  animation: collageFloat var(--dur) ease-in-out var(--dl) infinite alternate;
  will-change: transform;
}
@keyframes collageFloat {
  from { transform: rotate(var(--r)) translate3d(0, 0, 0); }
  to   { transform: rotate(var(--r)) translate3d(0, -22px, 0); }
}

.collage__frame {
  display: block;
  overflow: hidden;
  background: #ddd6c6;
  box-shadow: 0 22px 50px -30px rgba(40,30,18,0.55);
}
.collage__frame img {
  width: 100%; height: auto; display: block;
  filter: saturate(0.9);
}

/* --- 文字を読ませるためのベール --- */
.about__veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--c-paper) 0%, rgba(243,237,224,0.28) 16%,
                    rgba(243,237,224,0.28) 84%, var(--c-paper) 100%),
    linear-gradient(90deg, rgba(243,237,224,0.94) 0%, rgba(243,237,224,0.62) 34%,
                    rgba(243,237,224,0) 62%);
}

/* --- 本文 --- */
.about .section__inner { z-index: 2; width: 100%; }
.about__text { max-width: 560px; }
.about__text p {
  font-size: 15px; line-height: 2.4;
  letter-spacing: 0.05em; color: var(--c-ink-soft);
}
.about__text p + p { margin-top: 24px; }

@media (min-width: 768px) {
  .about { min-height: 92vh; }
  .about__text p { font-size: 17px; }
  .about__veil {
    background:
      linear-gradient(180deg, var(--c-paper) 0%, rgba(243,237,224,0.18) 14%,
                      rgba(243,237,224,0.18) 86%, var(--c-paper) 100%),
      linear-gradient(90deg, rgba(243,237,224,0.96) 0%, rgba(243,237,224,0.70) 32%,
                      rgba(243,237,224,0) 58%);
  }
}

/* SPでは枚数を絞って軽く・うるさくしない */
@media (max-width: 767px) {
  .collage__item { opacity: calc(var(--op) * 0.75); }
  .collage__item:nth-child(3),
  .collage__item:nth-child(6),
  .collage__item:nth-child(8) { display: none; }
}

/* ============================================================
   03b. Brand panels — 全面写真を背景に敷いたブランド紹介
   ============================================================ */
.services { position: relative; }

/* 背景の縦罫線 — 「四つ」を空間で示す */
.services__rules {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--gut-r) 0 var(--gut-l);
}
.services__rules i { border-left: 1px solid rgba(26,22,20,0.09); }
.services__rules i:first-child { border-left: none; }

.services__grid { display: grid; grid-template-columns: 1fr; gap: 56px; }
.services__lead { min-width: 0; }

.services__statement {
  margin-top: 8px;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(21px, 3.2vw, 32px);
  line-height: 1.95; letter-spacing: 0.12em;
  color: var(--c-ink);
}
.services__note {
  margin-top: 26px; max-width: 520px;
  font-size: 14.5px; line-height: 2.3;
  letter-spacing: 0.05em; color: #2a3024;
}

/* --- ブランド索引 --- */
.bindex__label {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(26,22,20,0.35);
}
.bindex__label span {
  font-family: var(--f-en); font-style: italic;
  font-size: 13px; letter-spacing: 0.28em;
  color: #2a3024; text-transform: uppercase;
}
.bindex__label em {
  font-family: var(--f-en); font-style: italic;
  font-size: 22px; letter-spacing: 0.06em; color: var(--c-accent);
}

.bindex__row {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  grid-template-areas:
    "no   logo  arrow"
    "no   name  arrow"
    "no   kick  arrow";
  align-items: center;
  gap: 2px 14px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(26,22,20,0.18);
  transition: padding-left .55s var(--e-out);
}
.bindex li:last-child .bindex__row { border-bottom: none; }
.bindex__row::before {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 0; height: 1px;
  background: var(--c-ink);
  transition: width .6s var(--e-out);
}
.bindex__row:hover { padding-left: 10px; }
.bindex__row:hover::before { width: 100%; }

.bindex__no {
  grid-area: no;
  font-family: var(--f-en); font-style: italic;
  font-size: 15px; letter-spacing: 0.06em;
  color: var(--c-accent);
}
.bindex__logo {
  grid-area: logo;
  height: 26px; width: auto;
  object-fit: contain; object-position: left center;
  margin-bottom: 6px;
  opacity: 0.9;
}
.bindex__name {
  grid-area: name;
  font-family: var(--f-display); font-weight: 500;
  font-size: 20px; letter-spacing: 0.1em; color: var(--c-ink);
  line-height: 1.4;
}
.bindex__en { display: none; }
.bindex__kick {
  grid-area: kick;
  font-family: var(--f-display);
  font-size: 10.5px; letter-spacing: 0.2em; color: #3c4634;
}
.bindex__arrow {
  grid-area: arrow;
  color: var(--c-ink); opacity: 0.5;
  transition: transform .55s var(--e-out), opacity .4s;
}
.bindex__row:hover .bindex__arrow { transform: translateX(8px); opacity: 1; }

@media (min-width: 768px) {
  .services__note { font-size: 16px; }
  .services__grid { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
  .bindex__logo { height: 30px; }
  .bindex__name { font-size: 23px; }
  .bindex__row { padding: 26px 0; }
}
@media (min-width: 1024px) {
  .services__grid { grid-template-columns: 1.02fr 1fr; gap: 96px; }
}

/* 個人向け / 法人向け の帯 */
/* ブランドの帯は紙色のまま。色面ではなく余白と罫線で仕切る */
.brand-stage { background: var(--c-paper); }
.brand-band {
  display: flex; align-items: baseline; gap: 18px;
  max-width: var(--max-w); margin: 0 auto;
  padding: 56px var(--gut-r) 26px var(--gut-l);
  color: var(--c-ink);
  border-bottom: 1px solid rgba(26,22,20,0.3);
}
@media (min-width: 768px) {
  .brand-band { padding-top: 88px; padding-bottom: 30px; }
}
.brand-band span {
  font-family: var(--f-display);
  font-weight: 500; font-size: 15px;
  letter-spacing: 0.28em; color: var(--c-ink);
}
.brand-band em {
  font-family: var(--f-en); font-style: italic;
  font-size: 13px; letter-spacing: 0.16em;
  color: var(--c-ink-soft); margin-left: auto;
}

/* 各ブランドのパネル */
.brand-panel {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  margin-top: 26px;
  display: flex; align-items: flex-end;
  color: var(--c-on-dark);
}
.brand-panel__bg { position: absolute; inset: 0; }
.brand-panel__bg img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.18);
}
/* 文字が乗る側を濃く落とす */
.brand-panel__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,12,9,0.55) 0%, rgba(15,12,9,0.15) 38%, rgba(15,12,9,0.88) 100%);
  pointer-events: none;
}
.brand-panel__no {
  position: absolute; top: 26px; right: 22px;
  font-family: var(--f-en); font-style: italic;
  font-size: 15px; letter-spacing: 0.18em;
  color: var(--c-on-dark); opacity: 0.85;
  z-index: 2;
}

.brand-panel__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding: 64px var(--gut-r) 56px var(--gut-l);
  max-width: var(--max-w);
  margin: 0 auto;
}

/* ロゴは白抜きにして写真の上でも読めるように */
.brand-panel__logo {
  height: 44px; width: auto;
  object-fit: contain; object-position: left center;
  margin-bottom: 20px;
  filter: brightness(0) invert(1);
  opacity: 0.96;
}
.brand-panel__name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(34px, 6vw, 62px);
  line-height: 1.25; letter-spacing: 0.1em;
  color: var(--c-on-dark);
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
.brand-panel__read {
  margin-top: 8px;
  font-family: var(--f-en); font-style: italic;
  font-size: 18px; letter-spacing: 0.12em;
  color: var(--c-on-dark-sub);
}
.brand-panel__kicker {
  margin-top: 16px;
  font-family: var(--f-display);
  font-size: 11px; letter-spacing: 0.26em;
  color: var(--c-on-dark-sub);
}
.brand-panel__desc {
  margin-top: 22px; max-width: 560px;
  font-size: 14.5px; line-height: 2.25;
  letter-spacing: 0.04em;
  color: rgba(244,235,213,0.94);
  text-shadow: 0 1px 16px rgba(0,0,0,0.45);
}
.brand-panel__meta {
  margin-top: 24px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.brand-panel__meta li {
  padding: 7px 15px;
  border: 1px solid rgba(244,235,213,0.5);
  font-family: var(--f-display);
  font-size: 11px; letter-spacing: 0.16em;
  color: var(--c-on-dark);
  backdrop-filter: blur(2px);
}
.more-link--soon { opacity: 0.6; pointer-events: none; }

/* 写真の見せたい側にテキストを寄せる */
@media (min-width: 768px) {
  .services__note { font-size: 16px; }
  .brand-panel { min-height: 78vh; }
  .brand-panel__inner { padding: 80px var(--gut-r) 72px var(--gut-l); }
  .brand-panel.is-right .brand-panel__inner {
    display: flex; flex-direction: column; align-items: flex-end; text-align: right;
  }
  .brand-panel.is-right .brand-panel__logo { object-position: right center; }
  .brand-panel.is-right .brand-panel__meta { justify-content: flex-end; }
  .brand-panel.is-right .brand-panel__scrim {
    background: linear-gradient(180deg, rgba(15,12,9,0.5) 0%, rgba(15,12,9,0.12) 35%, rgba(15,12,9,0.85) 100%),
                linear-gradient(270deg, rgba(15,12,9,0.5) 0%, rgba(15,12,9,0) 55%);
  }
  .brand-panel.is-left .brand-panel__scrim {
    background: linear-gradient(180deg, rgba(15,12,9,0.5) 0%, rgba(15,12,9,0.12) 35%, rgba(15,12,9,0.85) 100%),
                linear-gradient(90deg, rgba(15,12,9,0.5) 0%, rgba(15,12,9,0) 55%);
  }
  .brand-panel__logo { height: 52px; }
  .brand-panel__desc { font-size: 15.5px; }
}
@media (min-width: 1024px) {
  .brand-panel { min-height: 84vh; }
}

/* ============================================================
   08. Company — 会社概要テーブル
   ============================================================ */
.company-table { margin-top: 48px; border-top: 1px solid var(--c-hair); }
.company-table__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 22px 0;
  border-bottom: 1px solid var(--c-hair);
}
.company-table dt {
  font-family: var(--f-display);
  font-weight: 500; font-size: 13px;
  letter-spacing: 0.22em; color: var(--c-ink);
}
.company-table dd {
  font-size: 15px; line-height: 2.1;
  letter-spacing: 0.04em; color: var(--c-ink-soft);
}
.company-table__en {
  display: block;
  font-family: var(--f-en); font-style: italic;
  font-size: 13px; letter-spacing: 0.1em; color: var(--c-ink-mute);
}
.company-table__note {
  margin-left: 10px;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.2em; color: var(--c-accent);
}
.company-table__mail { border-bottom: 1px solid currentColor; }
.company-biz li {
  position: relative; padding-left: 18px;
}
.company-biz li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--c-ink-mute);
}

@media (min-width: 768px) {
  .company-table__row {
    grid-template-columns: 200px 1fr;
    gap: 32px;
    padding: 26px 0;
  }
  .company-table dd { font-size: 16px; }
}

/* ============================================================
   下層ページ共通（company.html / recruit.html）
   ============================================================ */
.page-sub .site-header { background: rgba(243,237,224,0); }

/* ページヘッダー（写真＋タイトル） */
.page-head {
  position: relative;
  overflow: hidden;
  min-height: 46vh;
  display: flex; align-items: flex-end;
  color: var(--c-on-dark);
}
.page-head__bg { position: absolute; inset: 0; }
.page-head__bg img {
  width: 100%; height: 100%; object-fit: cover; transform: scale(1.14);
}
.page-head__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,16,12,0.62) 0%, rgba(20,16,12,0.30) 45%, rgba(20,16,12,0.82) 100%);
}
.page-head__inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--gut-r) 56px var(--gut-l);
}
@media (min-width: 768px) { .page-head__inner { padding-bottom: 72px; } }
@media (max-width: 767px) { .page-head__inner { padding-bottom: 40px; } }

.crumbs {
  display: flex; gap: 10px; align-items: center;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.24em;
  color: var(--c-on-dark-sub);
  margin-bottom: 26px;
}
.crumbs a { border-bottom: 1px solid transparent; transition: border-color .3s; }
.crumbs a:hover { border-color: currentColor; }
.page-head__en {
  font-family: var(--f-en); font-style: italic;
  font-size: 14px; letter-spacing: 0.32em;
  color: var(--c-on-dark-sub);
  text-transform: uppercase;
}
.page-head__title {
  margin-top: 10px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(34px, 6.5vw, 72px);
  line-height: 1.2; letter-spacing: 0.13em;
  color: var(--c-on-dark);
  text-shadow: 0 2px 26px rgba(0,0,0,0.45);
}
@media (min-width: 768px) {
  .page-head { min-height: 56vh; }
}

/* 会社概要（トップの要約版） */
.company-brief {
  margin-top: 8px;
  border-top: 1px solid var(--c-hair);
  max-width: 720px;
}
.company-brief > div {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-hair);
}
.company-brief dt {
  font-family: var(--f-display); font-weight: 500;
  font-size: 12px; letter-spacing: 0.24em; color: var(--c-ink-soft);
}
.company-brief dd {
  font-size: 15.5px; line-height: 1.9;
  letter-spacing: 0.05em; color: var(--c-ink);
}
.company-brief__en {
  display: block;
  font-family: var(--f-en); font-style: italic;
  font-size: 13px; letter-spacing: 0.1em; color: var(--c-ink-mute);
}
@media (min-width: 768px) {
  .company-brief > div { grid-template-columns: 160px 1fr; gap: 28px; align-items: baseline; }
}

/* 採用ページ */
.recruit__lead {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(21px, 3.4vw, 34px);
  line-height: 2; letter-spacing: 0.12em; color: var(--c-ink);
}
.recruit__msg { margin-top: 36px; max-width: 660px; }
.recruit__msg p {
  font-size: 15px; line-height: 2.4;
  letter-spacing: 0.05em; color: var(--c-ink-soft);
}
.recruit__msg p + p { margin-top: 24px; }

.recruit__flow { margin-top: 4px; }
.recruit__flow li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 8px 0;
}
.recruit__flow span {
  font-family: var(--f-en); font-style: italic;
  font-size: 14px; letter-spacing: 0.1em;
  color: var(--c-accent);
}
.recruit__entry {
  margin-top: 8px; max-width: 660px;
  font-size: 15px; line-height: 2.4;
  letter-spacing: 0.05em; color: var(--c-ink-soft);
}
.recruit__entry strong { color: var(--c-ink); font-weight: 600; }
.recruit__back {
  margin-top: 64px; padding-top: 32px;
  border-top: 1px solid var(--c-hair);
}

/* アクセス */
.access {
  margin-top: 8px;
  display: grid; grid-template-columns: 1fr; gap: 40px;
}
.access__addr {
  font-family: var(--f-display); font-weight: 500;
  font-size: 19px; line-height: 2; letter-spacing: 0.1em; color: var(--c-ink);
}
.access__note {
  margin-top: 22px;
  font-size: 14.5px; line-height: 2.3;
  letter-spacing: 0.05em; color: var(--c-ink-soft);
}
.access__map {
  aspect-ratio: 16 / 10;
  background: #ddd6c6;
  overflow: hidden;
}
.access__map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (min-width: 768px) {
  .access { grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: center; }
  .recruit__msg p, .recruit__entry { font-size: 16px; }
}

/* ── Hero tagline（事業内容の一行説明） ──────────────────── */
.hero__tagline {
  margin-bottom: 12px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--c-on-dark);
  opacity: 0.95;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}
@media (min-width: 768px) {
  .hero__tagline { font-size: 14px; letter-spacing: 0.2em; }
}

/* ── Footer 会社情報 ─────────────────────────────────────── */
.footer-main {
  padding: 0 var(--gut-r) 0 var(--gut-l);
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.footer-company__name {
  font-family: var(--f-display);
  font-weight: 500; font-size: 17px;
  letter-spacing: 0.18em; color: var(--c-ink);
}
.footer-company__addr,
.footer-company__contact {
  margin-top: 12px;
  font-size: 13px; line-height: 2;
  letter-spacing: 0.06em; color: var(--c-ink-soft);
}
.footer-company__contact a { border-bottom: 1px solid rgba(26,22,20,0.25); }

.footer-bottom__links {
  display: flex; align-items: center; gap: 20px;
}
.footer-bottom__links a { border-bottom: 1px solid currentColor; }

@media (min-width: 768px) {
  .footer-main { grid-template-columns: 1fr auto; gap: 60px; align-items: start; }
}

/* ============================================================
   05. Philosophy — 全面写真＋三原則
   ============================================================ */
.philosophy { position: relative; overflow: hidden; }
.philosophy__bg { position: absolute; inset: 0; }
.philosophy__bg img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.14);
}
.philosophy__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20,16,12,0.92) 0%, rgba(20,16,12,0.72) 45%, rgba(20,16,12,0.94) 100%),
    linear-gradient(90deg,  rgba(20,16,12,0.85) 0%, rgba(20,16,12,0.35) 65%);
}
.philosophy .section__inner { z-index: 2; }

.philosophy__lead-wrap { margin-top: 8px; }
.philosophy__big {
  writing-mode: vertical-rl;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(34px, 6.5vw, 68px);
  line-height: 1.85; letter-spacing: 0.16em;
  color: var(--c-on-dark);
  height: clamp(300px, 46vw, 460px);
  text-shadow: 0 2px 28px rgba(0,0,0,0.5);
}
.philosophy__en {
  margin-top: 32px;
  font-family: var(--f-en); font-style: italic;
  font-size: 15px; letter-spacing: 0.14em; line-height: 1.9;
  color: var(--c-on-dark-sub);
}
.philosophy__lead {
  margin-top: 24px;
  font-size: 15px; line-height: 2.5;
  letter-spacing: 0.05em; color: rgba(244,235,213,0.88);
  max-width: 520px;
}

/* 三原則 — 囲みをやめて、番号＋罫線の組版に */
.principles { margin-top: 72px; }
.principles__label {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(244,235,213,0.4);
  font-family: var(--f-display);
  font-size: 13px; letter-spacing: 0.3em;
  color: var(--c-on-dark);
}
.principles__label em {
  font-family: var(--f-en); font-style: italic;
  font-size: 12px; letter-spacing: 0.16em;
  color: var(--c-on-dark-sub);
}
.principles__list { display: grid; grid-template-columns: 1fr; }
.principles__list li {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 4px 18px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(244,235,213,0.18);
}
.principles__no {
  grid-row: 1 / 3;
  font-family: var(--f-en); font-style: italic;
  font-size: 26px; line-height: 1;
  color: var(--c-on-dark-sub); opacity: 0.8;
}
.principles__ja {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(19px, 2.6vw, 26px);
  letter-spacing: 0.16em; line-height: 1.6;
  color: var(--c-on-dark);
}
.principles__note {
  font-size: 13px; line-height: 2;
  letter-spacing: 0.05em;
  color: rgba(244,235,213,0.62);
}

@media (min-width: 768px) {
  .philosophy__lead-wrap {
    display: grid; grid-template-columns: auto 1fr;
    gap: 64px; align-items: end;
  }
  .philosophy__lead-col { padding-bottom: 12px; }
  .philosophy__en { margin-top: 0; }
  .philosophy__lead { font-size: 16px; }
  .principles { margin-top: 96px; }
  .principles__list { grid-template-columns: repeat(3, 1fr); gap: 0 48px; }
  .principles__list li {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 36px 0 0;
    border-bottom: none;
    border-top: 1px solid rgba(244,235,213,0.28);
  }
  .principles__no { grid-row: auto; font-size: 22px; }
  .principles__note { font-size: 13.5px; }
}

/* ============================================================
   06. Voices — 写真付きエディトリアル
   ============================================================ */
.voices {
  margin-top: 56px;
  display: grid; grid-template-columns: 1fr;
  gap: 56px;
}
.voice { margin: 0; }
.voice__photo {
  overflow: hidden;
  background: #1f1a16;
  aspect-ratio: 4 / 5;
  margin-bottom: 26px;
}
.voice__photo img { width: 100%; height: 100%; object-fit: cover; }

.voice__no {
  display: block;
  font-family: var(--f-en); font-style: italic;
  font-size: 15px; letter-spacing: 0.16em;
  color: var(--c-accent);
  margin-bottom: 14px;
}
.voice blockquote {
  position: relative;
  font-size: 15px; line-height: 2.35;
  letter-spacing: 0.045em; color: var(--c-ink);
}
.voice blockquote::before {
  content: "\201C";
  position: absolute; left: -0.55em; top: -0.15em;
  font-family: var(--f-en);
  font-size: 34px; line-height: 1;
  color: var(--c-accent); opacity: 0.55;
}
.voice figcaption {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--c-hair);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
}
.voice__name {
  font-family: var(--f-display); font-weight: 500;
  font-size: 14px; letter-spacing: 0.16em; color: var(--c-ink);
}
.voice__place {
  font-family: var(--f-display);
  font-size: 11px; letter-spacing: 0.2em; color: var(--c-ink-soft);
}
.voice__date {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.24em; color: var(--c-ink-mute);
}

@media (min-width: 768px) {
  .voices { grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 80px; }
  /* 中央だけ少し下げて単調さを崩す */
  .voice:nth-child(2) { margin-top: 56px; }
  .voice blockquote { font-size: 15.5px; }
}

/* ============================================================
   07. Founder
   ============================================================ */
.founder__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.founder__visual {
  position: relative;
  height: 480px;
}
.founder__photo {
  position: absolute;
  right: 0; top: 0;
  width: calc(100% - 36px);
  height: 100%;
  overflow: hidden;
  background: #1f1a16;
}
.founder__photo img {
  width: 100%; height: 100%; object-fit: cover;
  /* 顔が上寄りの構図のため、切り抜きの基準を上へ寄せる */
  object-position: 50% 32%;
}

/* 代表ポートレート 仮プレースホルダー（差し替え前提・主張を抑える） */
.founder__photo.is-placeholder {
  background: #cdb593;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  border: 1px solid rgba(26,22,20,0.18);
}
.founder__ph-rule {
  width: 46px; height: 1px;
  background: rgba(26,22,20,0.4);
}
.founder__ph-label {
  font-family: var(--f-en); font-style: italic;
  font-size: 17px; letter-spacing: 0.3em;
  color: #4a3c2c;
}
.founder__ph-note {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.4em;
  color: #6b5a44;
}

.founder__name-vertical {
  position: absolute;
  left: 0; bottom: 24px;
  writing-mode: vertical-rl;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.2em;
  color: var(--c-ink);
}

.founder__name-en {
  font-family: var(--f-en);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #3c3026;
}
.founder__role {
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: #5d4d3a;
}
.founder__bio {
  margin-top: 36px;
  font-size: 14.5px;
  line-height: 2.4;
  letter-spacing: 0.05em;
  color: #2c241c;
}
.founder__signature {
  margin-top: 44px;
  padding-left: 14px;
  border-left: 2px solid var(--c-accent);
  font-family: var(--f-hand);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--c-ink);
  letter-spacing: 0.04em;
}
.founder__signature-name {
  font-size: 16px;
  color: #5d4d3a;
}

.founder__stats {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(26,22,20,0.2);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.founder__stats dt {
  font-family: var(--f-en);
  font-size: clamp(32px, 5vw, 56px);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--c-ink);
}
.founder__stats dd {
  margin-top: 10px;
  font-family: var(--f-en);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #5d4d3a;
}

@media (min-width: 768px) {
  .founder__grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center;
  }
  .founder__visual { height: 640px; }
  .founder__name-vertical { font-size: 28px; }
  .founder__bio { font-size: 16px; line-height: 2.4; }
}
@media (min-width: 1280px) {
  .founder__visual { height: 760px; }
  .founder__stats dt { font-size: 64px; }
}

/* ============================================================
   08. News / Journal
   ============================================================ */
.news__pick { margin-top: 48px; }
.news__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--c-ink-soft);
  margin-bottom: 18px;
}
.news__pick-label {
  font-family: var(--f-en);
  font-style: italic;
  font-size: 12px;
  color: var(--c-accent);
  letter-spacing: 0.08em;
}
.news__pick-photo {
  overflow: hidden;
  background: #1f1a16;
  aspect-ratio: 16 / 9;
}
.news__pick-photo img { width: 100%; height: 100%; object-fit: cover; }
.news__pick-title {
  margin: 22px 0 10px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--c-ink);
}
.news__pick-lead {
  font-size: 14px;
  line-height: 2;
  color: var(--c-ink-soft);
}

.news__list {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--c-hair);
}
.news__list li {
  padding: 22px 0;
  border-bottom: 1px solid var(--c-hair);
  transition: padding-left .3s ease;
}
.news__list li:hover { padding-left: 8px; }
.news__list li:last-child { border-bottom: none; }
.news__list h5 {
  margin-top: 8px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--c-ink);
}

@media (min-width: 768px) {
  .news__pick-lead { font-size: 16px; }
  .news__list li {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    align-items: baseline;
    padding: 28px 0;
  }
  .news__list li h5 { margin-top: 0; font-size: 18px; }
}

/* ============================================================
   09. Information — エディトリアルなリンク行
   ============================================================ */
.info-list { margin-top: 48px; border-top: 1px solid rgba(26,22,20,0.28); }
.info-list li { border-bottom: 1px solid rgba(26,22,20,0.2); }

.info-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 20px;
  padding: 28px 0;
  transition: padding-left .5s var(--e-out);
}
.info-row:hover { padding-left: 14px; }

.info-row__title {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(24px, 3.4vw, 36px);
  letter-spacing: 0.1em; color: var(--c-ink);
  line-height: 1.4;
}
.info-row__sub {
  grid-column: 1;
  font-family: var(--f-display);
  font-size: 11px; letter-spacing: 0.24em; color: #3c4634;
}
.info-row__url {
  grid-column: 1;
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.18em; color: var(--c-ink-soft);
}
.info-row__arrow {
  grid-column: 2; grid-row: 1 / 4;
  align-self: center;
  color: var(--c-ink);
  transition: transform .5s var(--e-out);
}
.info-row:hover .info-row__arrow { transform: translateX(10px); }

@media (min-width: 768px) {
  .info-row { padding: 38px 0; }
}

/* ============================================================
   10. Contact form
   ============================================================ */
.contact__lead {
  margin-top: 40px;
  font-size: 15px;
  line-height: 2.4;
  letter-spacing: 0.05em;
  color: var(--c-ink-soft);
}

.contact-form { margin-top: 56px; }
.form-field { margin-bottom: 32px; }
.form-field label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--c-ink);
  margin-bottom: 14px;
}
.form-field em {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 10px;
  color: var(--c-accent);
  letter-spacing: 0.2em;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-ink);
  font-family: var(--f-body);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--c-ink);
  outline: none;
  border-radius: 0;
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--c-ink-mute);
  font-family: var(--f-body);
}
.form-field input:focus,
.form-field textarea:focus { border-bottom-color: var(--c-accent); }

.form-submit {
  width: 100%;
  margin-top: 48px;
  padding: 22px 32px;
  background: var(--c-ink);
  color: var(--c-on-dark);
  border: none;
  font-family: var(--f-en);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0.2em;
  transition: background-color .25s ease, transform .25s ease, letter-spacing .25s ease;
}
.form-submit:hover {
  background: var(--c-accent);
  letter-spacing: 0.28em;
}

@media (min-width: 768px) {
  .contact-form { max-width: 720px; }
  .contact__lead { font-size: 17px; }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--c-paper);
  color: var(--c-ink);
  position: relative;
  overflow: hidden;
  padding-top: 80px;
}

.footer-logo {
  padding: 0 var(--gut-r) 56px var(--gut-l);
  display: flex;
  justify-content: center;
}
.footer-logo img {
  width: auto;
  height: 92px;
  object-fit: contain;
}
@media (min-width: 768px) {
  .footer-logo img { height: 120px; }
  .footer-logo { padding-bottom: 24px; }
}

.footer-nav { padding: 0; }
.footer-nav ul {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 22px;
  flex-wrap: wrap;
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--c-ink);
}
.footer-nav a {
  transition: opacity .2s;
  padding: 4px 0;
}
.footer-nav a:hover { opacity: 0.6; }

@media (min-width: 768px) {
  .footer-nav ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, auto));
    gap: 14px 40px;
    justify-content: end;
  }
}

.footer-wordmark-en {
  margin-top: 64px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--f-en);
  font-size: clamp(14px, 2vw, 22px);
  letter-spacing: 0.2em;
  color: var(--c-ink);
}

.footer-wordmark-ja {
  margin-top: 32px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(64px, 16vw, 200px);
  letter-spacing: 0.3em;
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  padding-left: 18px;
  line-height: 1.05;
}

.footer-bottom {
  margin-top: 32px;
  padding: 28px var(--gut-r);
  border-top: 1px solid var(--c-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  color: var(--c-ink-soft);
}
.footer-bottom p { margin: 0; }

/* ============================================================
   MOTION SYSTEM
   easing / preloader / intro / reveal / smooth scroll / marquee
   ============================================================ */
:root {
  --e-out:  cubic-bezier(0.16, 1, 0.30, 1);    /* expo out */
  --e-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --e-q: cubic-bezier(0.23, 1, 0.32, 1);   /* 出張撮影ページ用 */
  --e-in-out: cubic-bezier(0.76, 0, 0.24, 1);
}

/* ── Preloader ───────────────────────────────────────────── */
body.is-loading { overflow: hidden; height: 100vh; }

.preloader {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--c-paper);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .7s var(--e-out), visibility .7s;
}
.preloader.is-out { opacity: 0; visibility: hidden; }
.preloader__inner {
  width: min(80vw, 460px);
  display: flex; flex-direction: column; align-items: center;
}

/* 「つむぐらふ」— 一文字ずつゆっくり明滅 */
.preloader__mark {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(22px, 4vw, 30px);
  letter-spacing: 0.55em; text-indent: 0.55em;
  color: var(--c-ink);
  margin-bottom: 44px;
}
.preloader__mark span {
  display: inline-block;
  opacity: 0.2;
  animation: preChar 2s var(--e-soft) infinite;
}
.preloader__mark span:nth-child(1) { animation-delay: 0s; }
.preloader__mark span:nth-child(2) { animation-delay: .12s; }
.preloader__mark span:nth-child(3) { animation-delay: .24s; }
.preloader__mark span:nth-child(4) { animation-delay: .36s; }
.preloader__mark span:nth-child(5) { animation-delay: .48s; }
@keyframes preChar {
  0%, 60%, 100% { opacity: 0.2; }
  25%           { opacity: 1; }
}

/* 大きなカウンター */
.preloader__num {
  font-family: var(--f-en);
  font-style: italic;
  font-size: clamp(56px, 12vw, 108px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 28px;
}
.preloader__num::after {
  content: "%";
  font-size: 0.28em;
  letter-spacing: 0.2em;
  color: var(--c-ink-soft);
  transform: translateY(-0.2em);
}

.preloader__bar {
  width: 100%; height: 1px;
  background: rgba(26,22,20,0.16);
  overflow: hidden;
}
.preloader__bar-fill {
  display: block; width: 100%; height: 100%;
  background: var(--c-ink);
  transform: scaleX(0); transform-origin: left center;
}

/* ── Hero intro（文字抜き → ズーム） ─────────────────────── */
body.is-intro { overflow: hidden; height: 100vh; }

.hero-intro {
  position: fixed; inset: 0; z-index: 1200;
  background: transparent; overflow: hidden;
}
.hero-intro__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  transform-origin: center center;
  /* 拡大中の再ラスタライズを避けて滑らかに動かすためのヒント */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: paint;
}
.hero-intro.is-playing .hero-intro__svg {
  /* イージングは linear。速度感はキーフレーム側（対数間隔）で作る */
  animation: introZoom 2.6s linear forwards;
}
.hero-intro.is-playing { animation: introFade 2.6s cubic-bezier(0.4, 0, 1, 1) forwards; }
.hero-intro.is-gone { opacity: 0; transition: opacity .6s ease; }

/* 拡大率を等間隔ではなく「対数間隔」で刻む。
   scale を直線的に増やすと、序盤が速く終盤が遅く"見える"ため、
   毎ステップ同じ倍率（×1.41）で増やして体感速度を一定にしている。 */
@keyframes introZoom {
  0%    { transform: scale(1); }
  8%    { transform: scale(1.02); }   /* ひと呼吸おいてから動き出す */
  19.5% { transform: scale(1.43); }
  31%   { transform: scale(2.02); }
  42.5% { transform: scale(2.83); }
  54%   { transform: scale(3.99); }
  65.5% { transform: scale(5.60); }
  77%   { transform: scale(7.88); }
  88.5% { transform: scale(11.07); }
  100%  { transform: scale(15.57); }
}
@keyframes introFade { 0%, 64% { opacity: 1; } 100% { opacity: 0; } }

.site-header { transition: background-color .4s ease, box-shadow .4s ease, color .4s ease, opacity .6s ease; }
.brand-mark--global { transition: opacity .6s ease; }
.is-loading .site-header, .is-loading .brand-mark--global,
.is-intro   .site-header, .is-intro   .brand-mark--global { opacity: 0 !important; }

.is-loading .hero__title, .is-loading .hero__sub, .is-loading .hero__brush,
.is-loading .hero .section-mark, .is-loading .hero__scroll,
.is-intro   .hero__title, .is-intro   .hero__sub, .is-intro   .hero__brush,
.is-intro   .hero .section-mark, .is-intro   .hero__scroll { opacity: 0; }

.intro-done .hero__brush        { animation: heroIn 1.4s .30s both var(--e-out); }
.intro-done .hero .section-mark { animation: heroIn 1.4s .30s both var(--e-out); }
.intro-done .hero__sub          { animation: heroIn 1.4s .48s both var(--e-out); }
.intro-done .hero__scroll       { animation: heroIn 1.4s .78s both var(--e-out); }

@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* イントロ明けにヒーロー写真がわずかに落ち着く（ズームの余韻） */
.hero__overlay { transition: opacity 1.6s var(--e-out); }
.is-intro .hero__overlay, .is-loading .hero__overlay { opacity: 0; }

/* ── 行ごとマスク（見出し） ──────────────────────────────── */
.has-lines .ln {
  display: block;
  overflow: hidden;
}
.has-lines .ln__i {
  display: block;
  transform: translateY(105%);
  transition: transform 1.15s var(--e-out);
  transition-delay: calc(var(--i) * 0.1s);
}
.rv--lines.is-in .ln__i { transform: translateY(0); }

/* 縦書き見出しは Y ではなく X 方向にせり上げる */
.hero__title.has-lines .ln,
.philosophy__big.has-lines .ln { overflow: hidden; }
.hero__title.has-lines .ln__i,
.philosophy__big.has-lines .ln__i { transform: translateY(105%); }

/* ── Reveal ─────────────────────────────────────────────── */
.rv { --d: 0s; }

.rv--wipe {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(14px);
  transition:
    opacity 1s var(--e-out) var(--d),
    clip-path 1.15s var(--e-out) var(--d),
    transform 1.15s var(--e-out) var(--d);
}
.rv--wipe.is-in { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }

.rv--up {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity .95s var(--e-out) var(--d),
    transform 1.05s var(--e-out) var(--d);
}
.rv--up.is-in { opacity: 1; transform: none; }

/* コラージュのタイル：小さく回り込みながら現れる */
.rv--collage {
  opacity: 0;
  animation: none !important;   /* 出現前は漂わせない */
}
.rv--collage .collage__frame {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.25s var(--e-out) var(--d);
}
.rv--collage.is-in {
  opacity: var(--op);
  transition: opacity 1.1s var(--e-out) var(--d);
  animation: collageFloat var(--dur) ease-in-out var(--dl) infinite alternate !important;
}
.rv--collage.is-in .collage__frame { clip-path: inset(0 0 0 0); }

/* 写真：マスクが開き、中身がゆっくり戻る */
.rv--media { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--e-out); }
.rv--media.is-in { clip-path: inset(0 0 0 0); }
.rv--media img { transform: scale(1.24); transition: transform 1.8s var(--e-out); }
.rv--media.is-in img { transform: scale(1.18); }

/* ── Parallax ───────────────────────────────────────────── */
.parallax { overflow: hidden; }
.parallax img {
  will-change: transform;
  transform: scale(1.18);
}

/* ── Smooth scroll wrapper ──────────────────────────────── */
.scroll-wrap {
  position: fixed; top: 0; left: 0; width: 100%;
  will-change: transform;
  backface-visibility: hidden;
}
body.has-smooth { overflow-x: hidden; }
html { scroll-behavior: auto; }

/* ── Marquee（ブランドロゴ帯） ──────────────────────────── */
.marquee {
  overflow: hidden;
  padding: 56px 0;
  background: var(--c-paper-deep);
  border-top: 1px solid var(--c-hair);
  border-bottom: 1px solid var(--c-hair);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex; align-items: center;
  gap: clamp(48px, 8vw, 110px);
  padding-right: clamp(48px, 8vw, 110px);
  flex-shrink: 0;
}
.marquee__item {
  height: 44px; width: auto;
  object-fit: contain;
  opacity: 0.62;
  filter: grayscale(1);
  transition: opacity .4s var(--e-out), filter .4s var(--e-out);
}
.marquee__item:hover { opacity: 1; filter: none; }
@keyframes marquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
@media (min-width: 768px) {
  .marquee { padding: 72px 0; }
  .marquee__item { height: 56px; }
}

/* ── ホバー（カード） ───────────────────────────────────── */
.brand-card__link { transition: transform .8s var(--e-out), box-shadow .8s var(--e-out); }
.brand-card__link:hover { transform: translateY(-6px); }
.brand-card__photo img { transition: transform 1.4s var(--e-out); }
.brand-card__link:hover .brand-card__photo img { transform: scale(1.24); }

/* ── reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .preloader, .hero-intro { display: none !important; }
  .rv, .rv--wipe, .rv--up, .rv--media {
    opacity: 1 !important; transform: none !important;
    clip-path: none !important; transition: none !important;
  }
  .has-lines .ln__i { transform: none !important; transition: none !important; }
  .rv--media img, .parallax img { transform: none !important; }
  .marquee__track { animation: none !important; }
  .collage__item, .rv--collage.is-in { animation: none !important; opacity: var(--op) !important; }
  .rv--collage .collage__frame { clip-path: none !important; }
  .intro-done .hero__title, .intro-done .hero__brush,
  .intro-done .hero .section-mark, .intro-done .hero__sub,
  .intro-done .hero__scroll { animation: none !important; opacity: 1 !important; }
}

/* ============================================================
   Legal pages — プライバシーポリシー等
   ============================================================ */
.page-legal { padding-top: var(--header-h); }
.page-legal .site-header { position: fixed; }
.legal .huge-title { font-size: clamp(30px, 5vw, 54px); }
.legal__lead {
  margin-top: 8px;
  font-size: 15px; line-height: 2.3;
  letter-spacing: 0.05em; color: var(--c-ink-soft);
  max-width: 760px;
}
.legal__list { margin-top: 56px; max-width: 820px; }
.legal__list > li { margin-bottom: 44px; }
.legal__list h2 {
  font-family: var(--f-display);
  font-weight: 500; font-size: 17px;
  letter-spacing: 0.14em; color: var(--c-ink);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-hair);
  margin-bottom: 18px;
}
.legal__list p {
  font-size: 14.5px; line-height: 2.3;
  letter-spacing: 0.04em; color: var(--c-ink-soft);
}
.legal__list p + p { margin-top: 14px; }
.legal__list strong { color: var(--c-ink); font-weight: 600; }
.legal__sublist { margin-top: 14px; }
.legal__sublist li {
  position: relative;
  padding-left: 20px; margin-bottom: 8px;
  font-size: 14.5px; line-height: 2.1;
  color: var(--c-ink-soft);
}
.legal__sublist li::before {
  content: "—"; position: absolute; left: 0; color: var(--c-ink-mute);
}
.legal__contact {
  margin-top: 20px; padding: 24px 26px;
  background: rgba(255,255,255,0.5);
  border-left: 2px solid var(--c-accent);
}
.legal__contact p { font-size: 14px; line-height: 2; }
.legal__contact a { border-bottom: 1px solid currentColor; }
.legal__date {
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.2em; color: var(--c-ink-mute);
}
@media (min-width: 768px) {
  .legal__lead { font-size: 16px; }
  .legal__list h2 { font-size: 19px; }
  .legal__list p, .legal__sublist li { font-size: 15px; }
}


/* ============================================================
   サービス下層ページ（service-tsumugraph.html）
   ============================================================ */
.page-head__logo {
  height: 48px; width: auto;
  object-fit: contain; object-position: left center;
  margin-bottom: 16px;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.page-head__sub {
  margin-top: 10px;
  font-family: var(--f-en); font-style: italic;
  font-size: 16px; letter-spacing: 0.16em;
  color: var(--c-on-dark-sub);
}

.svc__statement {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(24px, 4vw, 42px);
  line-height: 1.9; letter-spacing: 0.12em; color: var(--c-ink);
}
.svc__lead { margin-top: 34px; max-width: 660px; }
.svc__lead p {
  font-size: 15px; line-height: 2.4;
  letter-spacing: 0.05em; color: var(--c-ink-soft);
}
.svc__lead p + p { margin-top: 22px; }
.svc__lead strong { color: var(--c-ink); font-weight: 600; }

/* 撮影メニュー */
.svc-menu {
  margin-top: 56px;
  border-top: 1px solid rgba(26,22,20,0.28);
}
.svc-menu li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 4px 16px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(26,22,20,0.16);
}
.svc-menu__no {
  grid-row: 1 / 3;
  font-family: var(--f-en); font-style: italic;
  font-size: 17px; color: var(--c-accent);
}
.svc-menu__ja {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(18px, 2.6vw, 24px);
  letter-spacing: 0.1em; color: var(--c-ink); line-height: 1.5;
}
.svc-menu__note {
  font-size: 13px; line-height: 2;
  letter-spacing: 0.05em; color: #3c4634;
}
@media (min-width: 768px) {
  .svc-menu li { grid-template-columns: 70px 1fr 1fr; align-items: baseline; padding: 26px 0; }
  .svc-menu__no { grid-row: auto; }
  .svc-menu__note { font-size: 13.5px; }
  .svc__lead p { font-size: 16px; }
}

/* サービスの特徴 */
.svc-points {
  margin-top: 48px;
  display: grid; grid-template-columns: 1fr; gap: 48px;
}
.svc-point__label {
  font-family: var(--f-en); font-style: italic;
  font-size: 12px; letter-spacing: 0.28em;
  color: var(--c-accent);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-hair);
}
.svc-point__title {
  margin-top: 20px;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(20px, 2.8vw, 26px);
  line-height: 1.8; letter-spacing: 0.1em; color: var(--c-ink);
}
.svc-point__body {
  margin-top: 18px;
  font-size: 14px; line-height: 2.2;
  letter-spacing: 0.045em; color: var(--c-ink-soft);
}
@media (min-width: 768px) {
  .svc-points { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

/* 対応エリア */
.svc-area {
  margin-top: 48px;
  display: grid; grid-template-columns: 1fr; gap: 44px;
}
.svc-area__label {
  font-family: var(--f-display);
  font-size: 11px; letter-spacing: 0.26em; color: #5d4d3a;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(26,22,20,0.22);
}
.svc-area__list {
  margin-top: 22px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.svc-area__list li {
  padding: 8px 18px;
  border: 1px solid rgba(26,22,20,0.34);
  font-family: var(--f-display); font-weight: 500;
  font-size: 14px; letter-spacing: 0.14em; color: var(--c-ink);
}
.svc-area__nation {
  margin-top: 20px;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: 0.16em; color: var(--c-ink); line-height: 1.3;
}
.svc-area__note {
  margin-top: 18px;
  font-size: 13.5px; line-height: 2.1;
  letter-spacing: 0.05em; color: #2c241c;
  max-width: 460px;
}
@media (min-width: 768px) {
  .svc-area { grid-template-columns: 1.3fr 1fr; gap: 64px; }
}

/* CTA */
.svc-cta {
  margin-top: 56px; padding-top: 40px;
  border-top: 1px solid var(--c-hair);
}
.svc-cta__text {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(17px, 2.4vw, 22px);
  line-height: 2; letter-spacing: 0.1em; color: var(--c-ink);
}

/* 代表の実績（補足つき） */
.founder__stats dd span {
  display: block;
  margin-top: 6px;
  font-family: var(--f-display);
  font-style: normal;
  font-size: 10.5px; letter-spacing: 0.14em; color: #6b5a44;
}


/* ============================================================
   見出しのバリエーション
   ── 全セクションを同じ型で始めない（テンプレート感の解消）
   ============================================================ */

/* 余白のリズムを一定にしない */
.section--tight { padding-top: 64px; padding-bottom: 64px; }
.section--loose { padding-top: 120px; padding-bottom: 130px; }
@media (min-width: 768px) {
  .section--tight { padding-top: 84px; padding-bottom: 84px; }
  .section--loose { padding-top: 170px; padding-bottom: 180px; }
}

/* ① About — 版面の外へ食い出す特大タイトル */
.about__title {
  margin-left: calc(var(--gut-l) * -0.5);
  margin-bottom: 40px;
  font-size: clamp(44px, 11vw, 132px);
  line-height: 1.05;
  letter-spacing: 0.04em;
}
@media (min-width: 768px) {
  .about__title {
    margin-left: calc(var(--gut-l) * -1);
    margin-bottom: 56px;
  }
}

/* ② Services */
.services__title {
  margin-bottom: 8px;
  font-size: clamp(32px, 5.4vw, 62px);
  letter-spacing: 0.1em;
}

/* ③ Philosophy — 大見出しをやめ、細い一行に */
.philosophy__eyebrow {
  display: flex; align-items: baseline; gap: 18px;
  margin-bottom: 48px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(244,235,213,0.32);
  font-family: var(--f-display); font-weight: 500;
  font-size: 15px; letter-spacing: 0.32em;
  color: var(--c-on-dark);
}
.philosophy__eyebrow em {
  font-family: var(--f-en); font-style: italic;
  font-size: 13px; letter-spacing: 0.18em;
  color: var(--c-on-dark-sub);
}

/* ④ Founder — 縦書きの見出しを写真の隣に */
.founder__title {
  font-size: clamp(30px, 5vw, 52px);
  letter-spacing: 0.18em;
  margin-bottom: 28px;
}
@media (min-width: 768px) {
  .founder__grid { grid-template-columns: auto 1fr 1.05fr; gap: 48px; }
  .founder__title {
    writing-mode: vertical-rl;
    margin-bottom: 0;
    align-self: start;
    height: auto;
  }
}
@media (min-width: 1024px) {
  .founder__grid { gap: 64px; }
}

/* ⑤ News — 1行に収めた小さな見出し */
.head-inline {
  display: flex; align-items: baseline; gap: 20px;
  padding-bottom: 18px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(26,22,20,0.28);
}
.head-inline__title {
  font-size: clamp(24px, 3.4vw, 36px);
  letter-spacing: 0.14em;
  margin-top: 0;
}
.head-inline__en {
  font-family: var(--f-en); font-style: italic;
  font-size: 14px; letter-spacing: 0.22em;
  color: var(--c-ink-soft);
  margin-left: auto;
}

/* ⑥ Information — 大見出しをやめて細い帯に */
.rel-bar {
  display: flex; align-items: baseline; gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(26,22,20,0.34);
}
.rel-bar span {
  font-family: var(--f-display); font-weight: 500;
  font-size: 16px; letter-spacing: 0.26em; color: var(--c-ink);
}
.rel-bar em {
  font-family: var(--f-en); font-style: italic;
  font-size: 13px; letter-spacing: 0.18em; color: #3c4634;
  margin-left: auto;
}
.rel-bar + .info-list { margin-top: 0; border-top: none; }

/* ⑦ Contact — 特大・右寄せ */
.contact__title {
  text-align: right;
  font-size: clamp(40px, 10vw, 118px);
  line-height: 1.05; letter-spacing: 0.04em;
  margin-right: calc(var(--gut-r) * -0.4);
  margin-bottom: 8px;
}
@media (min-width: 768px) {
  .contact__title { margin-right: calc(var(--gut-r) * -1); margin-bottom: 20px; }
}
.contact__lead { max-width: 520px; }


/* ============================================================
   余白と配置で律動をつくる（色替えの代わり）
   ============================================================ */

/* ① 縦の余白を大きく振る。等間隔にしないことが要点 */
.section--tight { padding-top: 60px;  padding-bottom: 60px; }
.section--loose { padding-top: 130px; padding-bottom: 140px; }
@media (min-width: 768px) {
  .section          { padding-top: 130px; padding-bottom: 130px; }
  .section--tight   { padding-top: 72px;  padding-bottom: 72px; }
  .section--loose   { padding-top: 200px; padding-bottom: 210px; }
  .section--ink     { padding-top: 160px; padding-bottom: 170px; }
}

/* ② 版面の開始位置を毎回変える（左揃えの連続を崩す） */
@media (min-width: 900px) {
  .section__inner--indent { padding-left: calc(var(--gut-l) + 26%); }
}

/* ③ 文章の幅（一行の長さ）もセクションごとに変える */
.about__text   { max-width: 30em; }
.services__note{ max-width: 26em; }
.contact__lead { max-width: 24em; }

/* ④ 明るいセクションが続く箇所だけ、極細の界線で区切る
      （色面ではなく線で"章"を示す） */
#news, #information { position: relative; }
#news::before, #information::before {
  content: "";
  position: absolute; top: 0;
  left: var(--gut-l); right: var(--gut-r);
  height: 1px;
  background: rgba(26,22,20,0.14);
}

/* ⑤ お問い合わせフォームは右側へ寄せて、左に大きな余白を残す */
@media (min-width: 900px) {
  .contact-form { margin-left: auto; margin-right: 0; }
  .contact__lead { margin-left: auto; text-align: right; }
}

/* ⑥ マーキー帯の色面をやめ、罫線だけにする */
.marquee {
  background: transparent;
  border-top: 1px solid rgba(26,22,20,0.14);
  border-bottom: 1px solid rgba(26,22,20,0.14);
}

/* ⑦ 濃色セクションの直後は上の余白を詰める（写真と地続きに見せる） */
.section--ink + .section { padding-top: 100px; }
@media (min-width: 768px) {
  .section--ink + .section { padding-top: 150px; }
}


/* ============================================================
   強弱（コントラスト）— 単調さの解消
   ============================================================ */

/* コラージュを写真として見せる（薄い壁紙にしない） */
.collage__item { opacity: calc(var(--op) + 0.34); }
.rv--collage.is-in { opacity: calc(var(--op) + 0.34); }
@media (max-width: 767px) {
  .collage__item { opacity: calc(var(--op) + 0.18); }
}

/* ── 幕間：全幅の写真帯。文章の連続をここで断つ ── */
.interlude {
  position: relative;
  overflow: hidden;
  height: 62vh; min-height: 380px;
  display: flex; align-items: center; justify-content: center;
}
.interlude__bg { position: absolute; inset: 0; }
.interlude__bg img {
  width: 100%; height: 100%; object-fit: cover; transform: scale(1.16);
}
.interlude__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,16,12,0.34) 0%, rgba(20,16,12,0.22) 50%, rgba(20,16,12,0.44) 100%);
}
.interlude__text {
  position: relative; z-index: 2;
  text-align: center;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(24px, 4.4vw, 52px);
  line-height: 2; letter-spacing: 0.16em;
  color: var(--c-on-dark);
  text-shadow: 0 2px 28px rgba(0,0,0,0.5);
}
@media (min-width: 768px) { .interlude { height: 72vh; } }

/* ── 代表：写真を左端まで抜いて大きく見せる ── */
@media (min-width: 900px) {
  .founder__visual { height: 78vh; min-height: 560px; }
  .founder__photo { width: calc(100% + var(--gut-l)); left: calc(var(--gut-l) * -1); right: auto; }
  .founder__name-vertical { left: 12px; }
}

/* ── お知らせ：主役の記事は写真を大きく ── */
.news__pick-photo { aspect-ratio: 3 / 2; }
@media (min-width: 900px) {
  .news__pick {
    display: grid; grid-template-columns: 1.15fr 1fr;
    gap: 44px; align-items: center;
  }
  .news__pick-photo { grid-row: 1 / 4; aspect-ratio: 4 / 3; }
  .news__meta { margin-bottom: 0; }
  .news__pick-title { margin-top: 14px; }
}

/* ── 文字の大小差を広げる（同じ大きさが続かないように） ── */
.about__title   { font-size: clamp(52px, 12vw, 150px); }
.contact__title { font-size: clamp(46px, 11vw, 136px); }
.services__title{ font-size: clamp(30px, 4.6vw, 54px); }
.head-inline__title { font-size: clamp(22px, 3vw, 32px); }

/* ── 濃色・写真セクションの前後は余白を締めて、明暗を隣接させる ── */
.interlude + .section { padding-top: 84px; }
@media (min-width: 768px) {
  .interlude + .section { padding-top: 110px; }
}


/* ============================================================
   料金プラン — 写真つきカード ＋ アイコン
   ============================================================ */
.pc-ic { width: 17px; height: 17px; flex-shrink: 0; color: var(--c-accent); }
.pc-ic--lg { width: 26px; height: 26px; }

/* 全プラン共通の内容（カードから抜いてここに集約） */
.plan-common {
  margin-top: 8px;
  padding: 30px 0 34px;
  border-top: 1px solid rgba(26,22,20,0.28);
  border-bottom: 1px solid rgba(26,22,20,0.14);
}
.plan-common__label {
  font-family: var(--f-display); font-weight: 500;
  font-size: 12px; letter-spacing: 0.26em;
  color: var(--c-ink-soft); margin-bottom: 24px;
}
.plan-common__list {
  display: grid; grid-template-columns: 1fr; gap: 20px;
}
.plan-common__list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-areas: "ic name" "ic note";
  gap: 2px 14px; align-items: center;
}
.plan-common__list .pc-ic { grid-area: ic; }
.plan-common__list span {
  grid-area: name;
  font-family: var(--f-display); font-weight: 500;
  font-size: 15px; letter-spacing: 0.1em; color: var(--c-ink);
}
.plan-common__list em {
  grid-area: note; font-style: normal;
  font-size: 12px; line-height: 1.7;
  letter-spacing: 0.04em; color: var(--c-ink-soft);
}
@media (min-width: 700px) {
  .plan-common__list { grid-template-columns: repeat(2, 1fr); gap: 26px 40px; }
}
@media (min-width: 1024px) {
  .plan-common__list { grid-template-columns: repeat(4, 1fr); gap: 32px; }
}

/* 章（家族写真 / ウェディング） */
.plan-group { margin-top: 72px; }
.plan-group__head {
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(26,22,20,0.22);
  margin-bottom: 36px;
}
.plan-group__title {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(21px, 3vw, 30px);
  letter-spacing: 0.14em; color: var(--c-ink); line-height: 1.5;
}
.plan-group__note {
  font-size: 13px; line-height: 1.9;
  letter-spacing: 0.05em; color: var(--c-ink-soft);
}
.plan-group__note a { border-bottom: 1px solid currentColor; }
@media (min-width: 768px) {
  .plan-group__head { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 24px; }
  .plan-group { margin-top: 96px; }
}

/* プランカード */
.plan-cards {
  display: grid; grid-template-columns: 1fr; gap: 32px;
}
.plan-card {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(26,22,20,0.12);
}
.plan-card__photo {
  overflow: hidden; background: #1f1a16;
  aspect-ratio: 4 / 3;
}
.plan-card__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--e-out);
}
.plan-card:hover .plan-card__photo img { transform: scale(1.05); }

.plan-card__body { padding: 26px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.plan-card__en {
  font-family: var(--f-en); font-style: italic;
  font-size: 13px; letter-spacing: 0.22em; color: var(--c-accent);
  text-transform: uppercase;
}
.plan-card__name {
  margin-top: 6px;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(21px, 2.6vw, 26px);
  letter-spacing: 0.12em; color: var(--c-ink); line-height: 1.4;
}

/* プランごとに異なる仕様（アイコン付き） */
.plan-card__spec {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(26,22,20,0.14);
  display: flex; flex-direction: column; gap: 12px;
}
.plan-card__spec li {
  display: flex; align-items: center; gap: 10px;
}
.plan-card__spec span {
  font-family: var(--f-display);
  font-size: 11px; letter-spacing: 0.18em; color: var(--c-ink-soft);
  min-width: 5.6em;
}
.plan-card__spec em {
  font-style: normal;
  font-family: var(--f-display); font-weight: 500;
  font-size: 15px; letter-spacing: 0.06em; color: var(--c-ink);
  margin-left: auto;
}

.plan-card__price {
  margin-top: 22px;
  font-family: var(--f-en);
  font-size: 30px; letter-spacing: 0.04em; color: var(--c-ink);
  display: flex; align-items: baseline; gap: 10px;
}
.plan-card__price small {
  font-family: var(--f-mono);
  font-size: 9.5px; letter-spacing: 0.18em; color: var(--c-accent);
}
.plan-card__fit {
  margin-top: 16px;
  font-size: 13px; line-height: 2;
  letter-spacing: 0.04em; color: var(--c-ink-soft);
}

@media (min-width: 700px) {
  .plan-cards { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (min-width: 1024px) {
  .plan-cards { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .plan-card__body { padding: 24px 22px 26px; }
}

/* 注記 */
.plan-notes {
  margin-top: 56px; padding-top: 26px;
  border-top: 1px solid rgba(26,22,20,0.14);
}
.plan-notes li {
  position: relative; padding-left: 18px; margin-bottom: 8px;
  font-size: 12.5px; line-height: 2;
  letter-spacing: 0.04em; color: var(--c-ink-soft);
}
.plan-notes li::before {
  content: "※"; position: absolute; left: 0; color: var(--c-ink-mute);
}


/* ============================================================
   MOBILE — 767px以下の最終調整
   PC向けの版面をそのまま縮めると破綻するため、ここで組み直す
   ============================================================ */
@media (max-width: 767px) {

  /* 左右の余白を揃えて本文幅を稼ぐ */
  :root { --gut-l: 22px; --gut-r: 22px; }

  /* 縦の余白を全体的に詰める（スマホは"間"が長すぎると読めない） */
  .section        { padding-top: 72px;  padding-bottom: 72px; }
  .section--tight { padding-top: 52px;  padding-bottom: 52px; }
  .section--loose { padding-top: 88px;  padding-bottom: 96px; }
  .section--ink   { padding-top: 88px;  padding-bottom: 88px; }
  .section--ink + .section,
  .interlude + .section { padding-top: 72px; }

  /* ── ヒーロー：縦書きタイトルと下の文章が重なるのを解消 ── */
  .hero { height: 88vh; min-height: 560px; }
  .hero__title {
    top: 96px; bottom: auto;
    right: 22px;
    font-size: 34px;
    line-height: 1.6;
  }
  .hero__brush { display: none; }
  .hero__sub { left: 22px; right: 22px; bottom: 34px; }
  .hero__sub-en { font-size: 11.5px; letter-spacing: 0.1em; }
  .hero__sub-rule { margin: 16px 0 10px; }
  .hero__tagline {
    font-size: 10.5px; letter-spacing: 0.08em; line-height: 1.9;
  }
  .hero__sub-mono { font-size: 9px; letter-spacing: 0.24em; }

  /* ── 会社のこと：写真の上に文字を置かない ──
     コラージュは上半分だけに見せ、文章は無地の下半分に置く */
  .about { min-height: 0; display: block; }
  .about__collage { height: 46%; bottom: auto; }
  .collage__item { opacity: calc(var(--op) + 0.42); }
  .collage__item:nth-child(n+5) { display: none; }   /* 4枚に絞る */
  .collage__item:nth-child(1) { --x: -4%;  --y: 2%;  --w: 46vw; }
  .collage__item:nth-child(2) { --x: 44%;  --y: 26%; --w: 36vw; }
  .collage__item:nth-child(3) { --x: 40%;  --y: -4%; --w: 40vw; }
  .collage__item:nth-child(4) { --x: 6%;   --y: 46%; --w: 34vw; }
  .about__veil {
    background: linear-gradient(180deg,
      rgba(243,237,224,0.10) 0%,
      rgba(243,237,224,0.10) 26%,
      var(--c-paper) 46%,
      var(--c-paper) 100%);
  }
  .about .section__inner { padding-top: 40vw; }
  .about__title { margin-left: 0; font-size: 46px; margin-bottom: 28px; }
  .about__text { max-width: none; }

  /* ── 四つのブランド ── */
  .services__rules { display: none; }
  .services__title { font-size: 30px; }
  .services__statement { font-size: 20px; line-height: 1.9; }
  .services__note { font-size: 14px; max-width: none; }
  .bindex__row {
    grid-template-columns: 40px 1fr 26px;
    padding: 18px 0;
  }
  .bindex__logo { height: 22px; }
  .bindex__name { font-size: 18px; }
  .bindex__kick { font-size: 10px; letter-spacing: 0.14em; }

  /* ── ブランドパネル：文字が乗る下側をしっかり暗く ── */
  .brand-panel { min-height: 470px; margin-top: 18px; }
  .brand-panel__scrim {
    background: linear-gradient(180deg,
      rgba(15,12,9,0.45) 0%, rgba(15,12,9,0.20) 28%, rgba(15,12,9,0.92) 72%);
  }
  .brand-panel__inner { padding: 40px var(--gut-r) 40px var(--gut-l); }
  .brand-panel__logo { height: 34px; margin-bottom: 14px; }
  .brand-panel__name { font-size: 30px; }
  .brand-panel__read { font-size: 15px; }
  .brand-panel__desc { font-size: 13.5px; line-height: 2.05; }
  .brand-panel__meta li { padding: 5px 11px; font-size: 10px; }
  .brand-band { padding-top: 40px; padding-bottom: 18px; }
  .brand-band span { font-size: 13px; letter-spacing: 0.2em; }
  .brand-band em { font-size: 11px; }

  /* ── 想い ── */
  .philosophy__big { font-size: 30px; height: 250px; margin-left: 0; }
  .philosophy__eyebrow { margin-bottom: 32px; font-size: 13px; letter-spacing: 0.24em; }
  .philosophy__lead { font-size: 14px; line-height: 2.3; }
  .principles { margin-top: 48px; }
  .principles__list li { grid-template-columns: 40px 1fr; padding: 20px 0; }
  .principles__ja { font-size: 18px; }
  .principles__note { font-size: 12.5px; }

  /* ── 代表 ── */
  .founder__visual { height: 400px; }
  .founder__title { font-size: 30px; margin-bottom: 22px; }
  .founder__bio { font-size: 14px; }
  .founder__stats { gap: 8px; }
  .founder__stats dt { font-size: 30px; }
  .founder__stats dd { font-size: 11px; }
  .founder__stats dd span { font-size: 9.5px; letter-spacing: 0.08em; }

  /* ── 幕間 ── */
  .interlude { height: 46vh; min-height: 300px; }
  .interlude__text { font-size: 22px; line-height: 1.9; padding: 0 22px; }

  /* ── お知らせ・関連リンク ── */
  .head-inline { margin-bottom: 28px; }
  .head-inline__title { font-size: 22px; }
  .news__pick-title { font-size: 20px; }
  .info-row { padding: 22px 0; gap: 2px 14px; }
  .info-row__title { font-size: 21px; }
  .info-row__arrow { width: 28px; }

  /* ── お問い合わせ ── */
  .contact__title { font-size: 42px; margin-right: 0; margin-bottom: 20px; }
  .contact__lead { max-width: none; font-size: 14px; }
  .form-field input, .form-field textarea { font-size: 16px; } /* iOSの拡大防止 */
  .form-submit { font-size: 16px; padding: 20px 24px; }

  /* ── フッター：巨大文字がはみ出すので収める ── */
  .footer-wordmark-ja {
    font-size: 52px; letter-spacing: 0.16em;
    padding-left: 22px; white-space: nowrap;
  }
  .footer-wordmark-en { font-size: 12px; letter-spacing: 0.14em; padding: 0 22px; }
  .footer-logo img { height: 74px; }
  .footer-main { gap: 32px; }
  .footer-nav ul { gap: 14px 20px; font-size: 12.5px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* ── 料金プラン（下層ページ） ── */
  .plan-common { padding: 24px 0 26px; }
  .plan-common__list { gap: 16px; }
  .plan-common__list li { grid-template-columns: 22px 1fr; }
  .pc-ic--lg { width: 21px; height: 21px; }
  .plan-common__list span { font-size: 14px; }
  .plan-common__list em { font-size: 11.5px; }
  .plan-group { margin-top: 52px; }
  .plan-group__title { font-size: 20px; }
  .plan-card__body { padding: 22px 20px 24px; }
  .plan-card__name { font-size: 20px; }
  .plan-card__spec span { font-size: 10.5px; min-width: 5em; }
  .plan-card__spec em { font-size: 14px; }
  .plan-card__price { font-size: 26px; }
  .plan-card__fit { font-size: 12.5px; }

  /* ── 下層ページ共通 ── */
  .page-head { min-height: 42vh; }
  .page-head__title { font-size: 34px; }
  .page-head__logo { height: 38px; }
  .svc__statement { font-size: 22px; }
  .svc-menu li { grid-template-columns: 38px 1fr; padding: 18px 0; }
  .svc-menu__ja { font-size: 17px; }
  .svc-area__nation { font-size: 30px; }
  .company-table__row { padding: 18px 0; }
  .legal__list > li { margin-bottom: 34px; }

  /* ── 全体：右端の縦書きラベルは場所を取るので隠す ── */
  .section-mark { display: none; }
  .hero .section-mark { display: block; top: 84px; right: 12px; font-size: 10px; }

  /* マーキーは高さを詰める */
  .marquee { padding: 40px 0; }
  .marquee__item { height: 34px; }
}


/* ============================================================
   送信完了 / 404 ページ
   ============================================================ */
.thanks { padding-top: calc(var(--header-h) + 80px); min-height: 78vh; display: flex; align-items: center; }
.thanks__en {
  font-family: var(--f-en); font-style: italic;
  font-size: 15px; letter-spacing: 0.3em;
  color: var(--c-accent); text-transform: uppercase;
  margin-bottom: 18px;
}
.thanks__title { font-size: clamp(28px, 5.4vw, 58px); line-height: 1.6; }
.thanks__body { margin-top: 40px; max-width: 34em; }
.thanks__body p {
  font-size: 15px; line-height: 2.4;
  letter-spacing: 0.05em; color: var(--c-ink-soft);
}
.thanks__body p + p { margin-top: 20px; }
.thanks__body a { border-bottom: 1px solid currentColor; }
.form-honeypot { position: absolute; left: -9999px; }
@media (min-width: 768px) { .thanks__body p { font-size: 16px; } }

/* ── Print helpers (簡易) ─────────────────────────────────── */
@media print {
  .site-header, .hamburger, .mobile-menu, .brand-mark--global, .hero__scroll,
  .hero-intro, .preloader, .marquee { display: none !important; }
  .section { padding: 40px 0; break-inside: avoid; }
  .rv { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .scroll-wrap { position: static !important; transform: none !important; }
}

/* ============================================================
   PRICE — 実料金の掲載にあわせた追加パーツ
   平日／土日祝の二段料金・単体プラン・取引条件
   ============================================================ */

/* 平日／土日祝の二段価格 */
.plan-price {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(26,22,20,0.14);
  display: flex; flex-direction: column; gap: 10px;
}
.plan-price__row {
  display: flex; align-items: baseline; gap: 10px;
}
.plan-price__day {
  font-family: var(--f-display);
  font-size: 11px; letter-spacing: 0.18em; color: var(--c-ink-soft);
  min-width: 4.2em;
}
.plan-price__val {
  font-family: var(--f-en);
  font-size: clamp(24px, 3.2vw, 30px);
  letter-spacing: 0.04em; color: var(--c-ink);
  margin-left: auto;
}
.plan-price__tax {
  font-family: var(--f-mono);
  font-size: 9.5px; letter-spacing: 0.16em; color: var(--c-accent);
}
/* 単一価格のプラン（ウェディング） */
.plan-price--one .plan-price__row { justify-content: flex-end; }
.plan-price--one .plan-price__val { font-size: clamp(26px, 3.6vw, 34px); }

/* 延長・補足の小さな注記 */
.plan-card__ext {
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 11px; line-height: 1.9;
  letter-spacing: 0.06em; color: var(--c-ink-mute);
}

/* 2枚組のときは3カラムにしない */
@media (min-width: 1024px) {
  .plan-cards--duo { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

/* 単体プラン（挙式のみ／披露宴のみ／二次会のみ） */

/* 取引条件（前受金・キャンセル・免責） */
.plan-terms {
  margin-top: 56px;
  padding: 30px 26px 28px;
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(26,22,20,0.12);
}
.plan-terms__title {
  font-family: var(--f-display); font-weight: 500;
  font-size: 15px; letter-spacing: 0.16em; color: var(--c-ink);
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid rgba(26,22,20,0.12);
}
.plan-terms__group + .plan-terms__group { margin-top: 22px; }
.plan-terms__head {
  font-family: var(--f-display);
  font-size: 11.5px; letter-spacing: 0.2em; color: var(--c-accent);
  margin-bottom: 8px;
}
.plan-terms__body {
  font-size: 13px; line-height: 2; letter-spacing: 0.04em; color: var(--c-ink-soft);
}
.plan-terms__cancel { display: flex; flex-direction: column; gap: 6px; }
.plan-terms__cancel div {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 13px; letter-spacing: 0.04em; color: var(--c-ink-soft);
}
.plan-terms__cancel dt {
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: 0.1em; color: var(--c-ink-mute); min-width: 8.5em;
}
.plan-terms__cancel dd {
  font-family: var(--f-display); font-size: 14px;
  letter-spacing: 0.06em; color: var(--c-ink); margin-left: auto;
}
@media (min-width: 900px) {
  .plan-terms { padding: 34px 34px 32px; }
  .plan-terms__cancel div { max-width: 26em; }
}
@media (max-width: 767px) {
  .plan-price__day { min-width: 3.6em; font-size: 10.5px; }
  .plan-price__val { font-size: 24px; }
  .plan-terms { padding: 24px 20px 22px; }
  .plan-terms__cancel dt { min-width: 7.5em; font-size: 11px; }
}

/* ============================================================
   RECRUIT — 募集停止時の案内
   ============================================================ */
.recruit-status {
  padding: 34px 26px 32px;
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(26,22,20,0.12);
}
.recruit-status__label {
  font-family: var(--f-mono);
  font-size: 10.5px; letter-spacing: 0.2em; color: var(--c-accent);
}
.recruit-status__main {
  margin-top: 12px;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(20px, 3vw, 28px);
  letter-spacing: 0.1em; line-height: 1.7; color: var(--c-ink);
}
.recruit-status__body {
  margin-top: 20px; padding-top: 20px;
  border-top: 1px solid rgba(26,22,20,0.12);
  font-size: 14px; line-height: 2.2;
  letter-spacing: 0.04em; color: var(--c-ink-soft);
  max-width: 44em;
}
@media (min-width: 900px) {
  .recruit-status { padding: 44px 42px 40px; }
}
@media (max-width: 767px) {
  .recruit-status { padding: 26px 20px 24px; }
  .recruit-status__body { font-size: 13.5px; line-height: 2.1; }
}

/* ============================================================
   SERVICE HERO — 複数枚をクロスフェードで見せるページヘッダー
   5枚 × 6秒 = 30秒で一巡。JSに依存せずCSSだけで動かす
   ============================================================ */
.page-head--slides { min-height: 56vh; }
@media (min-width: 768px) {
  .page-head--slides { min-height: 74vh; }
}

.svc-hero {
  position: absolute; inset: 0;
  background: #1f1a16;          /* 読み込み前の下地 */
  overflow: hidden;
}
.svc-hero__slide { position: absolute; inset: 0; opacity: 0; }
/* JSが動く前・動かないときは1枚目だけを静止表示する */
.svc-hero__slide:first-child { opacity: 1; }
.svc-hero__slide picture { display: block; width: 100%; height: 100%; }
.svc-hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }

/* 2枚目以降の読み込みが済んだらJSが is-ready を付け、そこで動き出す */
.svc-hero.is-ready .svc-hero__slide {
  animation: svcFade 30s linear infinite;
  /* --i でずらす。-1s しておくと1枚目が最初から表示された状態で始まる */
  animation-delay: calc(var(--i) * 5s - 1s);
  will-change: opacity;
}
.svc-hero.is-ready .svc-hero__slide img {
  animation: svcZoom 30s linear infinite;
  animation-delay: calc(var(--i) * 5s - 1s);
  will-change: transform;
}

@keyframes svcFade {
  0%     { opacity: 0; }
  3.33%  { opacity: 1; }
  16.67% { opacity: 1; }
  20%    { opacity: 0; }
  100%   { opacity: 0; }
}
/* ゆっくり寄る。表示が終わったらそのまま保持して次へ渡す */
@keyframes svcZoom {
  0%     { transform: scale(1.04); }
  20%    { transform: scale(1.12); }
  100%   { transform: scale(1.12); }
}
/* 縦位置の写真は余白が少ないので、拡大を抑えて人物が切れないようにする */
@media (max-width: 899px) {
  .svc-hero__slide img { transform: scale(1.02); }
  .svc-hero.is-ready .svc-hero__slide img { animation-name: svcZoomSp; }
}
@keyframes svcZoomSp {
  0%     { transform: scale(1.02); }
  20%    { transform: scale(1.07); }
  100%   { transform: scale(1.07); }
}


/* 動きを抑える設定のときは1枚目だけを静止表示する */
@media (prefers-reduced-motion: reduce) {
  .svc-hero.is-ready .svc-hero__slide { animation: none; opacity: 0; }
  .svc-hero.is-ready .svc-hero__slide:first-child { opacity: 1; }
  .svc-hero.is-ready .svc-hero__slide img { animation: none; transform: scale(1.02); }
}

/* ============================================================
   QUIET — 出張撮影ページ専用の設計
   参考サイトの考え方に合わせ、演出の語彙を1つに、文字を小さく字間を広く。
   body.page-quiet の下だけに効くので、他のページには影響しない。
   ============================================================ */

/* ── 演出をひとつに統一する ──
   anim.js が付ける rv--lines / rv--wipe / rv--media を、
   すべて「フェード＋わずかな上移動」に上書きする。JS側は触らない。 */
.page-quiet .rv--lines .ln { overflow: visible; }
.page-quiet .rv--lines .ln__i,
.page-quiet .rv--wipe,
.page-quiet .rv--up,
.page-quiet .rv--media {
  opacity: 0;
  transform: translateY(20px);
  clip-path: none;
  transition: opacity .9s var(--e-q), transform .9s var(--e-q);
  transition-delay: var(--d, 0s);
}
.page-quiet .rv--lines.is-in .ln__i,
.page-quiet .rv--wipe.is-in,
.page-quiet .rv--up.is-in,
.page-quiet .rv--media.is-in {
  opacity: 1; transform: none; clip-path: none;
}
/* 視差はJSがimgのtransformを毎フレーム更新するので、CSS側では触らない */
.page-quiet .rv--media img { transition: none; }

/* ── タイポ ──
   参考サイトの実測に合わせる。要点は3つ。
   ① 書体を役割で分ける（明朝＝内容／ゴシック＝ラベル／Inter＝英数字）
   ② 字間は見出しも本文も 0.08em と狭い。広げるのはラベルだけ（0.4em）
   ③ 色で階層を作らない。見出しも本文も同じ濃さで、差はサイズと書体で出す
   ------------------------------------------------------------ */

/* ラベル＝ゴシックの細字・字間を大きく開く */
.page-quiet .q-label,
.page-quiet .section-mark {
  font-family: var(--f-label);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.4em;
  color: var(--c-ink);
  text-transform: none;
  font-style: normal;
  opacity: 1;
}

/* 大見出し＝明朝。字間は詰め、行間も詰める */
.page-quiet .q-head {
  margin-top: 22px;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(22px, 2.9vw, 29px);
  line-height: 1.52;
  letter-spacing: 0.08em;
  color: var(--c-ink);
}

/* 本文＝明朝。参考サイトは16px。小さくすると弱くなる */
.page-quiet .q-body {
  margin-top: 24px;
  font-family: var(--f-display);
  font-size: 16px; line-height: 2.1;
  letter-spacing: 0.08em;
  color: var(--c-ink);
  max-width: 26em;
}

/* 注記＝ゴシック。ここだけ一段薄くする */
.page-quiet .q-note {
  margin-top: 18px;
  font-family: var(--f-label); font-weight: 300;
  font-size: 12.5px; line-height: 2.05;
  letter-spacing: 0.06em; color: var(--c-ink-soft);
}

/* 英数字は Inter。明朝の英字は装飾的すぎて本文と喧嘩する */
.page-quiet .q-cap,
.page-quiet .plan-heads__en,
.page-quiet .plan-nav__en,
.page-quiet .plan-group__en,
.page-quiet .q-band__word,
.page-quiet .q-area__nation {
  font-family: var(--f-num); font-style: normal; font-weight: 400;
}

/* あしらい：大きく薄い番号。参考サイトは36px・薄いグレー */
.q-num {
  display: block;
  font-family: var(--f-display); font-weight: 400;
  font-size: 36px; line-height: 1;
  letter-spacing: 0; color: #b6a993;
  margin-bottom: 14px;
}
@media (max-width: 899px) { .q-num { font-size: 30px; margin-bottom: 10px; } }

/* あしらい：短い罫線。参考サイトは52〜80px */
.q-rule {
  display: block; width: 52px; height: 1px;
  background: var(--c-ink); margin: 26px 0 0;
  transform-origin: 0 50%;
}

@media (max-width: 899px) {
  .page-quiet .q-label, .page-quiet .section-mark { font-size: 12px; letter-spacing: 0.34em; }
  .page-quiet .q-body { font-size: 15px; line-height: 2.05; margin-top: 20px; }
  .page-quiet .q-note { font-size: 12px; }
}

/* ── セクションの間合い（不均等に。均等だと間延びして見える） ── */
.q-section { padding: 74px 0; position: relative; }
@media (min-width: 900px) { .q-section { padding: 104px 0; } }
/* リード：一言＋価値訴求を置いて、すぐ料金へ渡す */
.q-section--lead { padding-bottom: 60px; }
@media (min-width: 900px) { .q-section--lead { padding-bottom: 84px; } }
.q-inner {
  position: relative;
  width: 100%; max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--gut-r) 0 var(--gut-l);
}

/* ── 右端の縦書きラベル（既存の section-mark を日本語向けに） ── */
.page-quiet .section-mark {
  font-family: var(--f-display); font-style: normal;
  font-size: 11.5px; letter-spacing: 0.34em;
  color: var(--c-ink-mute); opacity: 1;
  text-transform: none;
}
@media (min-width: 900px) {
  .page-quiet .section-mark { top: 104px; right: 30px; }
}
@media (max-width: 899px) { .page-quiet .section-mark { display: none; } }

/* ── 写真と文章を不揃いに置く ── */
.q-stage { position: relative; }
.q-unit { position: relative; display: grid; gap: 26px; }
.q-unit + .q-unit { margin-top: 56px; }
.q-pic { overflow: hidden; background: #efe8db; }
.q-pinsec .q-pic { box-shadow: 0 18px 50px rgba(40,30,20,0.13); }
.q-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-cap {
  margin-top: 12px;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.18em; color: var(--c-ink-mute);
}

@media (min-width: 900px) {
  .q-unit { grid-template-columns: repeat(12, 1fr); gap: 0 30px; align-items: start; }

  /* 1つめ：大きな写真を左端まで抜き、文章は右に下げて置く */
  .q-unit--1 .q-pic   { grid-column: 1 / 7; height: 760px; margin-left: calc(var(--gut-l) * -1); }
  .q-unit--1 .q-text  { grid-column: 8 / 13; padding-top: 186px; }
  .q-unit + .q-unit.q-unit--2 { margin-top: 132px; }

  /* 2つめ：文章が左、写真は右端まで抜ける。高さを変えて揃えない */
  .q-unit--2 .q-text  { grid-column: 1 / 6; padding-top: 40px; }
  .q-unit--2 .q-pic   { grid-column: 6 / 13; height: 452px; margin-right: calc(var(--gut-r) * -1); }
  .q-unit + .q-unit.q-unit--3 { margin-top: 48px; }

  /* 3つめ：写真を左外へはみ出させ、文章は中央寄りに */
  .q-unit--3 .q-pic   { grid-column: 1 / 6; height: 560px; margin-left: -104px; }
  .q-unit--3 .q-text  { grid-column: 7 / 12; padding-top: 118px; }
}

/* 浮かせる小さな写真（重ねる・はみ出す） */
.q-float { display: none; }
@media (min-width: 900px) {
  .q-float {
    display: block; position: absolute; z-index: 2;
    overflow: hidden; background: #efe8db;
  }
  .q-float img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* 背景写真の上に乗るので、紙色の縁で一段持ち上げる */
  .q-float { padding: 7px; background: var(--c-paper); }
  /* 1つめの右下に、文章の下端をまたぐように重ねる */
  .q-float--a { width: 226px; height: 300px; right: calc(var(--gut-r) * -1 + 4px); top: 574px; }
  /* 2つめの写真の左端に食い込ませ、下へはみ出させる */
  .q-float--b { width: 208px; height: 276px; left: 40%; top: 330px; }
}

/* ── 背景を画面に貼りつけ、手前だけを動かすセクション ── */
.q-pinsec { position: relative; overflow: clip; }
.q-pin { position: absolute; inset: 0; z-index: 0; overflow: clip; }
/* モバイルでは背景写真を出さない。
   画面が狭く、本文の裏に写真が透けて読みにくくなるため。
   手前の写真の視差は残るので、動きは十分にある。 */
.q-pin { display: none; }
@media (min-width: 900px) {
  .q-pin { display: block; }
  /* PCでは画面に貼りついたまま、手前だけが動く */
  .q-pin__img { position: sticky; top: 0; height: 100vh; overflow: hidden; }
}
.q-pin__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 紙色で沈めて、上に乗る写真と文字を読めるようにする */
.q-pin__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(243,237,224,0.72) 0%,
    rgba(243,237,224,0.78) 34%,
    rgba(243,237,224,0.86) 70%,
    rgba(243,237,224,0.94) 100%);
}
.q-pinsec .q-inner { position: relative; z-index: 2; }
/* 上下のセクションへ自然につなげる */
.q-pinsec::before, .q-pinsec::after {
  content: ""; position: absolute; left: 0; right: 0; height: 130px; z-index: 1; pointer-events: none;
}
.q-pinsec::before { top: 0; background: linear-gradient(180deg, var(--c-paper) 0%, rgba(243,237,224,0) 100%); }
.q-pinsec::after  { bottom: 0; background: linear-gradient(0deg, var(--c-paper) 0%, rgba(243,237,224,0) 100%); }

/* ── 見出しを留めておく（横に一覧が流れていく） ── */
.q-sticky__pic { overflow: hidden; background: #efe8db; margin-bottom: 30px; }
.q-sticky__pic img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: 50% 72%; }
@media (min-width: 900px) {
  .q-sticky { display: grid; grid-template-columns: 0.92fr 1.28fr; gap: 74px; align-items: start; }
  .q-sticky__head { position: sticky; top: 132px; }
  /* 写真は左端まで抜き、見出しより先に目に入るようにする */
  .q-sticky__pic {
    height: 430px; margin: 0 0 34px calc(var(--gut-l) * -1);
  }
}

/* ── 全面写真の帯（章の切れ目） ── */
.q-band { position: relative; overflow: hidden; height: 44vh; min-height: 240px; margin: -10px 0; }
@media (min-width: 900px) { .q-band { height: 58vh; } }
.q-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-band__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,16,12,0.18) 0%, rgba(20,16,12,0.05) 40%, rgba(20,16,12,0.34) 100%);
}
.q-band__word {
  position: absolute; left: 0; right: 0; bottom: 30px;
  text-align: center;
  font-family: var(--f-en); font-style: italic;
  font-size: clamp(13px, 2vw, 18px); letter-spacing: 0.4em;
  color: rgba(255,255,255,0.9);
}

/* ── 撮れるものの一覧（サムネイルを置かず、間合いで見せる） ── */
.q-list { border-top: 1px solid var(--c-hair); margin-top: 34px; }
.q-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 20px;
  padding: 24px 0; border-bottom: 1px solid var(--c-hair);
}
.q-list__no {
  grid-row: span 2;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.2em; color: var(--c-accent); padding-top: 5px;
}
.q-list__name {
  font-family: var(--f-display); font-weight: 400;
  font-size: 17px; letter-spacing: 0.13em; color: var(--c-ink);
}
.q-list__note {
  font-size: 12.5px; line-height: 2.1;
  letter-spacing: 0.12em; color: var(--c-ink-mute);
}
.q-list__note a { border-bottom: 1px solid currentColor; }
@media (min-width: 900px) {
  .q-list { margin-top: 0; }
  .q-list li { grid-template-columns: auto 12em 1fr; align-items: baseline; gap: 22px; padding: 26px 0; }
  .q-list__no { grid-row: auto; padding-top: 0; }
}

/* ── 対応エリア ── */
.q-area { display: grid; gap: 44px; margin-top: 44px; }
@media (min-width: 900px) { .q-area { grid-template-columns: 1.25fr 1fr; gap: 86px; } }
/* 市名は大きく、区切り線で並べる */
.q-area__cities {
  display: flex; flex-wrap: wrap; margin-top: 26px;
  border-top: 1px solid var(--c-hair);
}
.q-area__cities span {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(19px, 2.6vw, 26px);
  letter-spacing: 0.2em; color: var(--c-ink);
  padding: 16px 0; width: 33.333%;
  border-bottom: 1px solid var(--c-hair);
}
@media (min-width: 900px) { .q-area__cities span { width: 25%; } }
.q-area__nation {
  font-family: var(--f-en); font-style: italic;
  font-size: clamp(34px, 5.4vw, 54px); letter-spacing: 0.06em;
  color: var(--c-ink); line-height: 1.1;
}
@media (min-width: 900px) { .q-area > div:last-child { padding-top: 92px; } }

/* ── 最後の呼びかけ ── */
.q-cta { text-align: center; }
.q-cta__text {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(19px, 2.6vw, 27px);
  line-height: 2.2; letter-spacing: 0.14em; color: var(--c-ink);
}

/* ── 料金まわりを静かに寄せる（内容は変えず見え方だけ） ── */
.page-quiet .plan-card { background: transparent; border: 0; }
.page-quiet .plan-card__body { padding: 22px 0 0; }
.page-quiet .plan-card__name { font-size: clamp(19px, 2.4vw, 23px); letter-spacing: 0.14em; }
.page-quiet .plan-card__en { font-size: 11px; letter-spacing: 0.3em; }
.page-quiet .plan-price__val { font-size: clamp(22px, 2.8vw, 26px); }
.page-quiet .plan-price--one .plan-price__val { font-size: clamp(24px, 3.2vw, 30px); }
.page-quiet .plan-common { background: transparent; }
.page-quiet .plan-terms { background: transparent; border: 0; border-top: 1px solid var(--c-hair); padding: 34px 0 0; }
.page-quiet .plan-group { margin-top: 88px; }
@media (min-width: 900px) { .page-quiet .plan-group { margin-top: 130px; } }

/* ── 動きを抑える設定のとき ── */
@media (prefers-reduced-motion: reduce) {
  .page-quiet .rv--lines .ln__i,
  .page-quiet .rv--wipe,
  .page-quiet .rv--up,
  .page-quiet .rv--media { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   BRAND SLIDES — ブランドパネルの背景を複数枚で見せる
   出張撮影は対象が広いので、1枚では業態が伝わらない
   ============================================================ */
.brand-slides { position: absolute; inset: 0; overflow: hidden; background: #1f1a16; }
.brand-slides__s { position: absolute; inset: 0; opacity: 0; }
.brand-slides__s:first-child { opacity: 1; }
.brand-slides__s img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 4枚 × 5.5秒 = 22秒で一巡。読み込みが済んでから動かす */
.brand-slides.is-ready .brand-slides__s {
  animation: brandFade 22s linear infinite;
  animation-delay: calc(var(--i) * 5.5s - 0.9s);
  will-change: opacity;
}
@keyframes brandFade {
  0%     { opacity: 0; }
  4.09%  { opacity: 1; }
  25%    { opacity: 1; }
  29.09% { opacity: 0; }
  100%   { opacity: 0; }
}

/* 撮れるものの一覧（パネル内） */
.brand-tags {
  display: flex; flex-wrap: wrap; gap: 8px 0;
  margin-top: 22px; max-width: 34em;
}
.brand-tags li {
  position: relative;
  font-family: var(--f-display);
  font-size: 12.5px; letter-spacing: 0.14em;
  color: var(--c-on-dark-sub);
  padding: 0 13px 0 0; margin-right: 13px;
}
.brand-tags li:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 1px; height: 11px; margin-top: -5.5px;
  background: rgba(255,255,255,0.28);
}
@media (min-width: 768px) { .brand-tags li { font-size: 13px; } }
@media (max-width: 767px) {
  .brand-tags { margin-top: 18px; gap: 7px 0; }
  .brand-tags li { font-size: 11.5px; letter-spacing: 0.1em; padding-right: 10px; margin-right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-slides.is-ready .brand-slides__s { animation: none; opacity: 0; }
  .brand-slides.is-ready .brand-slides__s:first-child { opacity: 1; }
}

/* ============================================================
   縦線で視線を導く（参考サイトの手法）
   1px の線を引き、その中を短い帯が下りていく
   ============================================================ */
.q-scroller {
  position: relative;
  width: 1px; height: 76px;
  margin-top: 30px;
  overflow: hidden;
  background: rgba(255,255,255,0.38);
}
.q-scroller span {
  position: absolute; left: 0;
  width: 100%; height: 32px;
  background: rgba(255,255,255,0.95);
  animation: qScroll 2.2s cubic-bezier(0.7,0,0.3,1) infinite;
}
@keyframes qScroll {
  0%        { top: 0; transform: translateY(-100%); }
  70%, 100% { top: 100%; transform: translateY(0%); }
}

/* セクションの左に細い縦線を通し、内容の始まりを示す */
.q-inner::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--gut-l) - 14px);
  width: 1px; background: var(--c-hair);
  opacity: 0; transform: scaleY(0); transform-origin: 0 0;
  transition: opacity .5s var(--e-q), transform 1.5s var(--e-q);
}
.q-section.is-seen .q-inner::before { opacity: 1; transform: scaleY(1); }
@media (max-width: 767px) { .q-inner::before { left: 10px; } }

/* 見出しの肩に短い横線を添える（縦線から枝分かれして見える） */
.q-head { position: relative; }
.q-head::before {
  content: ""; position: absolute;
  left: -48px; top: 0.86em;
  width: 0; height: 1px; background: var(--c-accent);
  transition: width 1.1s var(--e-q) .25s;
}
.is-in.q-head::before, .rv--lines.is-in.q-head::before { width: 34px; }
@media (max-width: 899px) { .q-head::before { display: none; } }

/* ============================================================
   MOBILE — 出張撮影ページを縦一列で単調にしない
   写真の幅・高さ・寄せ方を交互に変え、小写真も見せる
   ============================================================ */
@media (max-width: 899px) {
  .page-quiet .q-section { padding: 58px 0 66px; }
  .page-quiet .q-inner { padding-left: 26px; padding-right: 22px; }

  .q-unit + .q-unit { margin-top: 52px; }
  .q-unit--2 { margin-top: 72px !important; }
  .q-unit--3 { margin-top: 92px !important; }   /* ここが詰まると写真が連続して見える */
  .q-unit { gap: 22px; }

  .q-unit { position: relative; gap: 18px; }

  /* 1つめ：右端まで抜く。縦に長く */
  .q-unit--1 .q-pic { height: 74vw; max-height: 420px; margin-right: -22px; }
  /* 2つめ：左端まで抜き、少し低く */
  .q-unit--2 .q-pic { height: 54vw; max-height: 300px; margin-left: -26px; }
  /* 3つめ：幅を抑えて右に寄せる（全部が全幅だと単調になる） */
  .q-unit--3 .q-pic { height: 92vw; max-height: 470px; width: 78%; margin-left: auto; margin-right: -22px; }

  /* 浮かせた小写真はモバイルでも出す。
     ただし重ねる相手は「写真」であって「文章」ではない。
     グリッドの同じ枠に置き、下へ少しはみ出させるだけにする。 */
  .q-unit--1 .q-pic   { grid-row: 1; grid-column: 1; }
  .q-unit--1 .q-text  { grid-row: 2; grid-column: 1; }
  .q-unit--1 .q-float { grid-row: 1; grid-column: 1; justify-self: start; margin-left: -14px; }
  .q-unit--2 .q-text  { grid-row: 1; grid-column: 1; }
  .q-unit--2 .q-pic   { grid-row: 2; grid-column: 1; }
  .q-unit--2 .q-float { grid-row: 2; grid-column: 1; justify-self: end; margin-right: -12px; }

  .q-float {
    display: block; position: relative; z-index: 2;
    align-self: end; margin-bottom: -30px;
    width: 32vw; max-width: 142px; height: 42vw; max-height: 190px;
    padding: 5px; background: var(--c-paper);
  }
  /* はみ出した分だけ本文を下げる（文字に重ならないように） */
  .q-unit--1 .q-text { padding-top: 26px; }
  .q-unit--2 .q-pic  { margin-top: 4px; }
  .q-unit--3 .q-text { padding-right: 6%; }

  .page-quiet .q-head { font-size: 23px; margin-top: 18px; }

  /* 貼りついた背景はモバイルでも効かせる（高さは画面いっぱい） */
  .q-pin__img { height: 100vh; }

  /* 撮れるもの：写真を右へ抜く */
  .q-sticky__pic { height: 62vw; max-height: 340px; margin-right: -22px; margin-bottom: 26px; }

  /* 帯は少し低めに */
  .q-band { height: 46vh; min-height: 260px; }
  /* 帯は横長写真なので、モバイルでは人物のいる側を見せる */
  .q-band img { object-position: 66% 50%; }
}

@media (max-width: 767px) {
  .page-quiet .q-inner { padding-left: 24px; padding-right: 20px; }
  .q-unit--1 .q-pic { margin-right: -20px; }
  .q-unit--2 .q-pic { margin-left: -24px; }
  .q-unit--3 .q-pic { margin-right: -20px; }
}

@media (prefers-reduced-motion: reduce) {
  .q-scroller span { animation: none; top: 20%; }
  .q-inner::before { opacity: 1; transform: none; transition: none; }
  .q-head::before { width: 10px; transition: none; }
}

/* ============================================================
   PRICE — 比較して選べる形
   写真で雰囲気を伝え、違いは表で並べて示す
   ============================================================ */
.u-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.plan-heads { display: grid; gap: 34px; margin-top: 34px; }
@media (min-width: 900px) { .plan-heads { grid-template-columns: 1fr 1fr; gap: 30px; } }
.plan-heads__i { display: flex; flex-direction: column; }
/* aspect-ratio だけだと img の内在サイズに負けて縦に伸びるので、高さを明示する */
.plan-heads__pic { overflow: hidden; background: #efe8db; height: 58vw; max-height: 280px; }
.plan-heads__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) { .plan-heads__pic { height: 0; padding-top: 75%; position: relative; max-height: none; }
  .plan-heads__pic img { position: absolute; inset: 0; } }
.plan-heads__en {
  margin-top: 18px;
  font-family: var(--f-en); font-style: italic;
  font-size: 12px; letter-spacing: 0.28em; color: var(--c-accent);
  text-transform: uppercase;
}
.plan-heads__name {
  margin-top: 6px;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(19px, 2.4vw, 23px);
  letter-spacing: 0.13em; color: var(--c-ink);
}
.plan-heads__for {
  margin-top: 12px;
  font-size: 12.5px; line-height: 2.05;
  letter-spacing: 0.1em; color: var(--c-ink-soft);
}

/* 比較表 */
.plan-table__lead {
  margin-top: 34px;
  font-size: 13px; line-height: 2; letter-spacing: 0.12em; color: var(--c-ink-soft);
}
.plan-table-wrap { margin-top: 30px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.plan-table { width: 100%; border-collapse: collapse; }
.plan-table th, .plan-table td {
  text-align: left; padding: 15px 14px;
  border-bottom: 1px solid var(--c-hair);
  white-space: nowrap;
}
.plan-table thead th {
  font-family: var(--f-display); font-weight: 500;
  font-size: 12.5px; letter-spacing: 0.16em; color: var(--c-ink);
  border-bottom: 1px solid rgba(26,22,20,0.3);
  padding-bottom: 12px;
}
.plan-table tbody th {
  font-family: var(--f-mono); font-weight: 400;
  font-size: 11px; letter-spacing: 0.12em; color: var(--c-ink-mute);
  padding-left: 0;
}
.plan-table tbody td {
  font-family: var(--f-display);
  font-size: 14.5px; letter-spacing: 0.08em; color: var(--c-ink);
}
.plan-table thead th:first-child { padding-left: 0; }
/* 料金の行だけ大きく */
.plan-table__price td {
  font-family: var(--f-en);
  font-size: clamp(19px, 2.4vw, 23px); letter-spacing: 0.03em;
}
.plan-table__price th { color: var(--c-accent); }

/* ウェディングの範囲表 */
.plan-table--wd tbody th {
  font-family: var(--f-display); font-size: 13.5px;
  letter-spacing: 0.1em; color: var(--c-ink); white-space: nowrap;
}
.plan-table--wd td { text-align: center; color: var(--c-ink-mute); }
.plan-table--wd td.is-on { color: var(--c-accent); }
.plan-table--wd td:nth-last-child(-n+2) { text-align: right; }
.plan-table__yen {
  font-family: var(--f-en) !important;
  font-size: clamp(17px, 2.2vw, 21px) !important; letter-spacing: 0.03em;
  color: var(--c-ink) !important;
}
.plan-table--wd tbody tr:first-child { background: rgba(255,255,255,0.34); }

@media (max-width: 767px) {
  .plan-table th, .plan-table td { padding: 13px 10px; }
  .plan-table thead th { font-size: 11px; letter-spacing: 0.1em; }
  .plan-table tbody th { font-size: 10px; }
  .plan-table tbody td { font-size: 13px; }
  .plan-table__price td { font-size: 18px; }
  .plan-table__yen { font-size: 16px !important; }
  .plan-table--wd tbody th { font-size: 12px; }
  .plan-heads__for { font-size: 12px; }
  /* 横に長い表はスクロールできることを示す */
  .plan-table-wrap { position: relative; }
  .plan-table--wd { min-width: 430px; }
}

/* ============================================================
   料金：家族とウェディングを別の区画として見せる
   同じ形が2つ続くと、どちらを読んでいるか分からなくなるため
   ============================================================ */

/* 入口（どちらの料金を見るか） */
.plan-nav { display: grid; gap: 12px; margin-top: 30px; }
@media (min-width: 900px) { .plan-nav { grid-template-columns: 1fr 1fr; gap: 20px; } }
.plan-nav a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 16px;
  padding: 20px 20px 19px;
  border: 1px solid rgba(26,22,20,0.16);
  transition: background-color .4s var(--e-q), border-color .4s var(--e-q);
}
.plan-nav a:hover { background: rgba(255,255,255,0.5); border-color: rgba(26,22,20,0.34); }
.plan-nav__no {
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.2em; color: var(--c-accent);
}
.plan-nav__ja {
  font-family: var(--f-display); font-size: 15px;
  letter-spacing: 0.13em; color: var(--c-ink);
}
.plan-nav__en {
  font-family: var(--f-en); font-style: italic;
  font-size: 12px; letter-spacing: 0.2em; color: var(--c-ink-mute);
}

/* 章の見出し */
.plan-group { scroll-margin-top: calc(var(--header-h) + 20px); }
.plan-group__no {
  display: block;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.24em; color: var(--c-accent); margin-bottom: 12px;
}
.plan-group__en {
  margin-top: 6px;
  font-family: var(--f-en); font-style: italic;
  font-size: 13px; letter-spacing: 0.24em; color: var(--c-ink-mute);
}

/* ウェディングは面の色を変え、左右いっぱいに敷いて区画を分ける */
.plan-group--wedding { position: relative; padding: 74px 0 66px; }
.plan-group--wedding::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0;
  left: calc(var(--gut-l) * -1); right: calc(var(--gut-r) * -1);
  background: var(--c-paper-deep);
}
@media (min-width: 900px) { .plan-group--wedding { padding: 96px 0 88px; } }
/* 面の中では罫線と表の下地も一段変える */
.plan-group--wedding .plan-table th,
.plan-group--wedding .plan-table td { border-bottom-color: rgba(26,22,20,0.14); }
.plan-group--wedding .plan-table--wd tbody tr:first-child { background: rgba(255,255,255,0.5); }
.plan-group--wedding .plan-heads__pic { background: #e3d8bf; }

/* 章ごとに動きの向きを変えて、切り替わったことを体で分かるようにする */
.page-quiet .plan-group--family .plan-heads__i { --qx: -14px; }
.page-quiet .plan-group--wedding .plan-heads__i { --qx: 14px; }
.page-quiet .plan-heads__i { transform: translate(var(--qx, 0), 20px); }
.page-quiet .plan-heads__i.is-in { transform: none; }

@media (max-width: 767px) {
  .plan-nav a { padding: 16px 16px 15px; gap: 12px; }
  .plan-nav__ja { font-size: 14px; }
  .plan-nav__en { display: none; }
  .plan-group--wedding { padding: 54px 0 48px; }
}

/* ── 一覧・表・小見出しも同じ規則に揃える ── */
.page-quiet .q-list__name {
  font-family: var(--f-display); font-weight: 400;
  font-size: 21px; letter-spacing: 0; line-height: 1.4;
  color: var(--c-ink);
}
.page-quiet .q-list__note {
  font-family: var(--f-label); font-weight: 300;
  font-size: 13px; line-height: 2; letter-spacing: 0.04em;
  color: var(--c-ink-soft);
}
/* 一覧の番号もあしらいとして大きく薄く */
.page-quiet .q-list__no {
  font-family: var(--f-display); font-weight: 400;
  font-size: 26px; line-height: 1; letter-spacing: 0;
  color: #b6a993;
}
@media (min-width: 700px) {
  .page-quiet .q-list li { grid-template-columns: auto 13em 1fr; gap: 26px; align-items: center; padding: 28px 0; }
}
@media (max-width: 899px) {
  .page-quiet .q-list__no { font-size: 22px; }
  .page-quiet .q-list__name { font-size: 18px; }
  .page-quiet .q-list__note { font-size: 12.5px; }
}

.page-quiet .plan-heads__name {
  font-family: var(--f-display); font-weight: 400;
  font-size: 21px; letter-spacing: 0.02em; line-height: 1.4;
}
.page-quiet .plan-heads__en,
.page-quiet .plan-nav__en,
.page-quiet .plan-group__en {
  font-size: 12px; letter-spacing: 0.18em; color: var(--c-ink-soft);
}
.page-quiet .plan-heads__for {
  font-family: var(--f-label); font-weight: 300;
  font-size: 13px; line-height: 2; letter-spacing: 0.04em; color: var(--c-ink-soft);
}
.page-quiet .plan-group__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(21px, 2.6vw, 26px); letter-spacing: 0.08em; line-height: 1.5;
}
.page-quiet .plan-group__note,
.page-quiet .plan-table__lead,
.page-quiet .plan-card__ext,
.page-quiet .plan-notes li {
  font-family: var(--f-label); font-weight: 300;
  font-size: 12.5px; line-height: 2; letter-spacing: 0.04em; color: var(--c-ink-soft);
}
.page-quiet .plan-group__no,
.page-quiet .plan-nav__no {
  font-family: var(--f-num); font-size: 11px; letter-spacing: 0.1em; color: var(--c-ink-soft);
}
.page-quiet .plan-nav__ja { font-family: var(--f-display); font-size: 16px; letter-spacing: 0.06em; }
/* 表：項目名はゴシック、値は明朝、金額は Inter */
.page-quiet .plan-table thead th { font-family: var(--f-label); font-weight: 400; font-size: 13px; letter-spacing: 0.1em; }
.page-quiet .plan-table tbody th { font-family: var(--f-label); font-weight: 300; font-size: 12.5px; letter-spacing: 0.04em; color: var(--c-ink-soft); }
.page-quiet .plan-table tbody td { font-family: var(--f-display); font-size: 16px; letter-spacing: 0.04em; }
.page-quiet .plan-table__price td,
.page-quiet .plan-table__yen { font-family: var(--f-num) !important; letter-spacing: 0 !important; }
.page-quiet .plan-table--wd tbody th { font-family: var(--f-display); font-size: 15px; letter-spacing: 0.04em; color: var(--c-ink); }
.page-quiet .plan-common__list span { font-family: var(--f-display); font-size: 15px; letter-spacing: 0.06em; }
.page-quiet .plan-common__list em { font-family: var(--f-label); font-weight: 300; font-size: 12px; letter-spacing: 0.03em; }
.page-quiet .plan-common__label { font-family: var(--f-label); font-weight: 300; font-size: 12px; letter-spacing: 0.3em; }

/* CTA・エリア */
.page-quiet .q-cta__text {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(21px, 2.9vw, 29px); line-height: 1.6; letter-spacing: 0.08em;
}
.page-quiet .q-area__cities span { letter-spacing: 0.06em; }
.page-quiet .q-band__word { letter-spacing: 0.3em; font-size: clamp(12px, 1.6vw, 15px); }
.page-quiet .more-link { font-family: var(--f-label); font-weight: 300; font-size: 13px; letter-spacing: 0.16em; }
.page-quiet .crumbs { font-family: var(--f-num); font-size: 10.5px; letter-spacing: 0.14em; }
.page-quiet .page-head__sub { font-family: var(--f-num); font-style: normal; letter-spacing: 0.2em; }

/* 罫線は横に伸びて現れる（上下移動だと線らしくない） */
.page-quiet .q-rule.rv--up { transform: scaleX(0); opacity: 1; }
.page-quiet .q-rule.rv--up.is-in { transform: scaleX(1); }

/* ============================================================
   縦書きのキャッチ・全面のトップ・横に流れる写真の帯
   縦書きは画像ではなく明朝で組む（参考サイトも実テキスト）
   ============================================================ */

/* ── トップは画面いっぱいに ── */
.page-quiet .page-head--slides { min-height: 100vh; }
@supports (height: 100dvh) {
  /* スマホのアドレスバーで高さが変わるのを避ける */
  .page-quiet .page-head--slides { min-height: 100dvh; }
}


/* ── 写真が横に流れる帯 ── */
.q-strip { overflow: hidden; background: var(--c-paper-deep); }
.q-strip__track {
  display: flex; width: max-content;
  animation: qStrip 30s linear infinite;
}
.q-strip__i { flex: 0 0 auto; width: 62vw; max-width: 460px; }
.q-strip__i img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .q-strip__i { width: 34vw; max-width: 520px; }
  .q-strip__track { animation-duration: 56s; }
}
/* 半分進んだところで元に戻す＝継ぎ目が見えない */
@keyframes qStrip {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
.q-strip:hover .q-strip__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .q-strip__track { animation: none; }
}

/* ============================================================
   出張撮影ページのトップ
   参考サイトの組み方：中央に「縦書きキャッチ」と「ロゴ」を
   画面中心から左右に振り分け、四隅に小さい要素を置く
   ============================================================ */
.page-quiet .page-head--slides {
  display: block;               /* flex の下寄せをやめ、絶対配置で組む */
  position: relative;
}

/* ── 中央：白いロゴの下に縦書きのキャッチ ── */
.head-center {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 30px;
  padding: 0 22px;
  pointer-events: none;
}
@media (min-width: 900px) { .head-center { gap: 42px; } }

.page-quiet .page-head__logo {
  height: 38px; width: auto; display: block;
  /* 素の指定は左寄せ＋下マージン付き。中央に組むので打ち消す */
  margin: 0; object-position: center; opacity: 1;
  filter: drop-shadow(0 2px 20px rgba(0,0,0,0.45));
}
@media (min-width: 900px) { .page-quiet .page-head__logo { height: 58px; } }

/* 縦書きの2行。右の行が先、左の行を2文字分下げる */
.q-vcopy {
  display: flex; flex-direction: row-reverse;
  align-items: flex-start;
  gap: 1em;
  margin: 0;
}
.q-vcopy span {
  writing-mode: vertical-rl;
  font-family: var(--f-display); font-weight: 400;
  font-size: 17px; line-height: 1;
  letter-spacing: 0.24em;
  color: var(--c-on-dark);
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
/* 頭を揃えないことで、静かな動きが出る */
.q-vcopy--drop { margin-top: 2.48em; }
@media (min-width: 900px) {
  .q-vcopy span { font-size: 24px; }
  .q-vcopy { gap: 1em; }
}

/* ── 四隅 ── */
.head-tl {
  position: absolute; z-index: 4;
  top: calc(var(--header-h) + 16px); left: 22px;
}
.head-tl .crumbs { margin-bottom: 14px; }
.page-quiet .page-head__title {
  margin-top: 0;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.3; letter-spacing: 0.2em;
  color: var(--c-on-dark);
  text-shadow: 0 2px 20px rgba(0,0,0,0.45);
}
.page-quiet .page-head__sub {
  margin-top: 7px;
  font-family: var(--f-num); font-style: normal;
  font-size: 10.5px; letter-spacing: 0.2em;
  color: var(--c-on-dark-sub);
}
.head-bl {
  position: absolute; z-index: 4;
  left: 22px; bottom: 26px;
  display: flex; align-items: flex-end; gap: 18px;
}
.head-bl__rule {
  display: block; width: 46px; height: 1px;
  background: rgba(255,255,255,0.6); margin-bottom: 8px;
}
.head-bl__en {
  font-family: var(--f-num); font-size: 11px; line-height: 1.9;
  letter-spacing: 0.06em; color: var(--c-on-dark-sub);
}
.head-br {
  position: absolute; z-index: 4;
  right: 22px; bottom: 26px;
  display: flex; align-items: flex-end; gap: 16px;
}
.head-br__msg {
  font-family: var(--f-display); font-size: 12px;
  letter-spacing: 0.14em; color: var(--c-on-dark);
  padding-bottom: 2px;
}
.page-quiet .q-scroller { margin-top: 0; height: 66px; }

@media (min-width: 900px) {
  .head-tl { top: calc(var(--header-h) + 30px); left: 42px; }
  .head-bl { left: 42px; bottom: 46px; gap: 24px; }
  .head-bl__rule { width: 78px; }
  .head-bl__en { font-size: 12px; }
  .head-br { right: 42px; bottom: 46px; }
  .head-br__msg { font-size: 13px; }
  .page-quiet .q-scroller { height: 90px; }
}
@media (max-width: 599px) {
  /* 狭い画面では英文が主張しすぎるので落とす */
  .head-bl__en { display: none; }
  .head-bl__rule { width: 34px; margin-bottom: 0; }
  .head-center { gap: 26px; }
}


/* ============================================================
   最後の呼びかけ
   参考サイトの作り方に合わせる。
   ・面（枠線ボタン）は使わない。汎用的なWebボタンに見えるため
   ・リンクは「ゴシックのラベル ── 76pxの罫線 ── 矢印」
   ・書体は 見出し=明朝／ラベル=ゴシック／数字=Inter で使い分ける
   ============================================================ */

/* 主：問い合わせ */
.cta-act { margin-top: 46px; }
.cta-link {
  display: inline-flex; align-items: center; gap: 18px;
  color: var(--c-ink);
}
.cta-link__label {
  font-family: var(--f-label); font-weight: 400;
  font-size: 14px; letter-spacing: 0.14em;
  white-space: nowrap;
}
/* あしらい：参考サイトと同じ 76px × 1px の罫線 */
.cta-link__bar {
  display: block; width: 76px; height: 1px;
  background: currentColor;
  transform-origin: 0 50%;
  transition: transform .6s var(--e-q);
}
.cta-link:hover .cta-link__bar { transform: scaleX(1.28); }
.cta-link__arrow { flex: 0 0 auto; transition: transform .6s var(--e-q); }
.cta-link:hover .cta-link__arrow { transform: translateX(20px); }
.cta-act__note {
  margin-top: 14px;
  font-family: var(--f-label); font-weight: 300;
  font-size: 11.5px; letter-spacing: 0.1em; color: var(--c-ink-soft);
}
@media (min-width: 900px) {
  .cta-link__label { font-size: 15px; }
  .cta-link__bar { width: 92px; }
}

/* 副：電話。主導線はフォームなので、ここは控えめな一行にとどめる */
.cta-tel {
  margin-top: 22px;
  font-family: var(--f-label); font-weight: 300;
  font-size: 11.5px; letter-spacing: 0.1em; color: var(--c-ink-soft);
}
.cta-tel__num {
  font-family: var(--f-num);
  font-size: 12.5px; letter-spacing: 0.02em;
  color: var(--c-ink-soft);
  margin-left: 8px;
  border-bottom: 1px solid rgba(26,22,20,0.22);
  transition: border-color .4s var(--e-q), color .4s var(--e-q);
}
.cta-tel__num:hover { color: var(--c-ink); border-color: var(--c-ink); }

/* 移動：呼びかけとは別物。縦罫を挟んで離す */
.cta-back {
  display: inline-flex; flex-direction: column; align-items: center; gap: 18px;
  margin-top: 58px;
  font-family: var(--f-label); font-weight: 300;
  font-size: 11px; letter-spacing: 0.3em; color: var(--c-ink-soft);
  transition: color .4s var(--e-q);
}
.cta-back__rule { display: block; width: 1px; height: 38px; background: rgba(26,22,20,0.22); }
.cta-back:hover { color: var(--c-ink); }

@media (prefers-reduced-motion: reduce) {
  .cta-link__bar, .cta-link__arrow { transition: none; }
}

/* ============================================================
   企業ページ：モバイルでの写真の切り抜き位置
   横長写真を縦画面に敷くと左右が4割前後切られるため、
   人物のいる側が残るように写真ごとに基準点をずらす
   ============================================================ */
@media (max-width: 767px) {
  /* ヒーローは画面いっぱいに。下に紙色が覗くと写真が足りなく見える */
  .hero { height: 100vh; min-height: 560px; }

  /* 七五三の女の子が右下にいる */
  #brand-01 .brand-slides__s:nth-child(2) img { object-position: 84% 60%; }
  /* 余白の庭：女の子が右寄り */
  #brand-02 .brand-panel__bg img { object-position: 68% 45%; }
}
@supports (height: 100dvh) {
  @media (max-width: 767px) { .hero { height: 100dvh; } }
}

/* ============================================================
   企業ページの帯を、横に流れる4枚に
   1枚の静止写真より、撮ってきたものの幅が伝わる
   ============================================================ */
.interlude__strip { position: absolute; inset: 0; overflow: hidden; background: #1f1a16; }
.interlude__track {
  display: flex; height: 100%; width: max-content;
  animation: ilxSlide 42s linear infinite;
}
.interlude__i { flex: 0 0 auto; width: 58vw; height: 100%; }
.interlude__i img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 768px) { .interlude__i { width: 30vw; } }
@media (min-width: 1280px) { .interlude__i { width: 24vw; } }
/* 半分進んだところで戻すので継ぎ目が出ない */
@keyframes ilxSlide {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
.interlude:hover .interlude__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .interlude__track { animation: none; }
}

/* 下層ページのヘッダー。
   半端な高さ（半画面）だと中途半端に見えるので、
   「見出しの帯」とはっきり分かる高さに切る。料金を早く見せたいページでもある。 */
.page-head--sub { min-height: 0; height: 32vh; }
@media (min-width: 900px) { .page-head--sub { height: 40vh; } }
.page-head--sub .head-tl { top: auto; bottom: 28px; left: 24px; }
.page-head--sub .head-br { bottom: 30px; }
@media (min-width: 900px) {
  .page-head--sub .head-tl { bottom: 46px; left: 42px; }
  .page-head--sub .head-br { bottom: 46px; }
}
.page-head--sub .page-head__title { margin-top: 12px; }

/* ============================================================
   想い — 写真を下に敷き、その上を文章が流れる
   写真は大きさも縦横比も揃えない。文字の通り道は空けておく
   ============================================================ */
.omoi { position: relative; overflow: clip; padding: 78px 0 84px; }
@media (min-width: 900px) { .omoi { padding: 130px 0 140px; } }

/* ── 背景：全面写真1枚＋添え写真2枚＋粒子 ──
   四角い写真を暗い面に浮かせると、切り貼りしたように見える。
   1枚を画面いっぱいに敷いて「場」を作り、そこに小さく添える形にする。
   ------------------------------------------------------------ */
.omoi { background: #241d17; color: var(--c-on-dark); }
.omoi__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.omoi__stage {
  position: sticky; top: 0;
  height: 100vh; overflow: clip;
  background: #241d17;
}
@supports (height: 100dvh) { .omoi__stage { height: 100dvh; } }

/* 全面に敷く1枚 */
.omoi__base { position: absolute; inset: 0; display: block; }
.omoi__base img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 文字が読めるところまで沈める。均一な膜ではなく、上下に濃淡をつける */
.omoi__veil {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(28,22,17,0.80) 0%, rgba(28,22,17,0.62) 30%,
                            rgba(28,22,17,0.62) 70%, rgba(28,22,17,0.82) 100%);
}

/* 紙の粒子。平らな面に質感を出す */
.omoi__grain {
  position: absolute; inset: 0; z-index: 3;
  opacity: 0.30; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* 添える2枚。完全に見える大きさで、端に静かに置く */
/* 添え写真はヴェールの「下」に置く。上に出すと文字が読めなくなるため */
.omoi__p { position: absolute; z-index: 1; margin: 0; overflow: hidden; }
.omoi__p img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* モバイル：上の写真を右、下の写真を左に振る */
.omoi__p--1 { width: 44vw; top: 6%;  right: 4vw; }
.omoi__p--2 { width: 48vw; bottom: 7%; left: 4vw; }
.omoi__p--3, .omoi__p--6, .omoi__p--9 { display: none; }

@media (min-width: 900px) {
  .omoi__p--1 { width: 17vw; max-width: 245px; top: 9%;   left: 2vw;  right: auto; }
  .omoi__p--2 { width: 19vw; max-width: 275px; bottom: 9%; right: 3vw; left: auto; }
  .omoi__veil {
    background:
      linear-gradient(180deg, rgba(28,22,17,0.76) 0%, rgba(28,22,17,0.58) 32%,
                              rgba(28,22,17,0.58) 68%, rgba(28,22,17,0.80) 100%);
  }
}

/* ── 文章（暗い背景の上なので明るい色で） ── */
.omoi__inner { position: relative; z-index: 2; max-width: 30em; }
@media (min-width: 900px) { .omoi__inner { max-width: 34em; } }
/* モバイルは中央に揃える */
@media (max-width: 899px) {
  .omoi__inner { max-width: none; text-align: center; }
  .omoi__list li { padding-left: 0; }
  .omoi__list li::before { display: none; }
  .omoi__year { justify-content: center; }
  .omoi__end { text-align: center; }
}
/* 写真の上に乗るので、影を添えて輪郭を確保する */
.omoi__inner p, .omoi__inner li, .omoi__inner span { text-shadow: 0 1px 16px rgba(20,15,10,0.55); }
.omoi__lead {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(23px, 5vw, 36px);
  line-height: 1.9; letter-spacing: 0.09em; color: #ffffff;
}
.omoi__t {
  margin-top: 46px;
  font-family: var(--f-display);
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 2.25; letter-spacing: 0.1em; color: var(--c-on-dark);
}
.omoi__strong {
  margin-top: 52px;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(20px, 3.6vw, 29px);
  line-height: 1.85; letter-spacing: 0.12em; color: #ffffff;
}
.omoi__list { margin-top: 46px; }
.omoi__list li {
  position: relative; padding-left: 26px;
  font-family: var(--f-display);
  font-size: clamp(16px, 2.6vw, 19px);
  line-height: 2.3; letter-spacing: 0.13em; color: var(--c-on-dark);
}
.omoi__list li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 14px; height: 1px; background: rgba(255,255,255,0.5);
}
.omoi__mid {
  margin-top: 52px;
  font-family: var(--f-display);
  font-size: clamp(17px, 3vw, 23px);
  line-height: 2.05; letter-spacing: 0.12em; color: #ffffff;
}
.omoi__years { margin-top: 52px; display: grid; gap: 24px; }
.omoi__year { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
/* 数字も明朝で。サンセリフだけ大きく置くと、そこだけ現代的に浮く */
.omoi__num {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(36px, 8.4vw, 60px); line-height: 1;
  letter-spacing: 0.02em; color: #ffffff;
}
.omoi__unit {
  font-family: var(--f-label); font-weight: 300;
  font-size: 12.5px; letter-spacing: 0.2em; color: var(--c-on-dark);
}
.omoi__word {
  font-family: var(--f-display);
  font-size: clamp(20px, 3.6vw, 29px);
  letter-spacing: 0.14em; color: #ffffff;
}
.omoi__end {
  margin-top: 58px; padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.28);
  font-family: var(--f-display);
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 2.25; letter-spacing: 0.1em; color: var(--c-on-dark);
}
.u-sp { display: none; }
@media (max-width: 599px) { .u-sp { display: inline; } }
/* このセクションだけ右端のラベルも明るく */
.page-quiet .omoi .section-mark { color: var(--c-on-dark-sub); }

/* ============================================================
   料金への入口（ジャンル別ページへ送る）
   ============================================================ */
.gate { margin-top: 44px; display: grid; gap: 34px; }
@media (min-width: 900px) { .gate { grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 56px; } }
.gate__i a { display: flex; flex-direction: column; color: var(--c-ink); }
.gate__pic { overflow: hidden; background: #efe8db; height: 56vw; max-height: 260px; }
@media (min-width: 900px) { .gate__pic { height: 0; padding-top: 70%; position: relative; max-height: none; } }
.gate__pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--e-q); }
@media (min-width: 900px) { .gate__pic img { position: absolute; inset: 0; } }
.gate__i a:hover .gate__pic img { transform: scale(1.05); }
.gate__no {
  margin-top: 20px;
  font-family: var(--f-num); font-size: 11px;
  letter-spacing: 0.2em; color: var(--c-accent);
}
.gate__ja {
  margin-top: 8px;
  font-family: var(--f-display); font-weight: 400;
  font-size: 21px; letter-spacing: 0.1em; line-height: 1.4;
}
.gate__note {
  margin-top: 12px;
  font-family: var(--f-label); font-weight: 300;
  font-size: 12.5px; line-height: 2; letter-spacing: 0.04em; color: var(--c-ink-soft);
}
.gate__price {
  margin-top: 16px;
  font-family: var(--f-label); font-weight: 300;
  font-size: 12.5px; letter-spacing: 0.06em; color: var(--c-ink-soft);
}
.gate__price b { font-family: var(--f-num); font-weight: 400; font-size: 22px; color: var(--c-ink); margin: 0 2px; }
.gate__price span { font-size: 10px; letter-spacing: 0.14em; margin-left: 6px; }
.gate__go {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-label); font-weight: 400;
  font-size: 13px; letter-spacing: 0.14em; color: var(--c-ink);
}
.gate__go svg { transition: transform .6s var(--e-q); }
.gate__i a:hover .gate__go svg { transform: translateX(10px); }

/* ============================================================
   ウェディング持ち込みページ：立ち位置の説明
   ============================================================ */
.wd-why { margin-top: 46px; }
.wd-why__label {
  font-family: var(--f-label); font-weight: 300;
  font-size: 11.5px; letter-spacing: 0.3em; color: var(--c-ink-soft);
  padding-bottom: 14px; border-bottom: 1px solid var(--c-hair);
}
.wd-why__list li {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 18px;
  grid-template-areas: "no ja" "no note";
  padding: 22px 0; border-bottom: 1px solid var(--c-hair);
}
.wd-why__no {
  grid-area: no;
  font-family: var(--f-num); font-size: 11px;
  letter-spacing: 0.14em; color: var(--c-accent); padding-top: 5px;
}
.wd-why__ja {
  grid-area: ja;
  font-family: var(--f-display); font-weight: 400;
  font-size: 17px; letter-spacing: 0.1em; color: var(--c-ink);
}
.wd-why__note {
  grid-area: note;
  font-family: var(--f-label); font-weight: 300;
  font-size: 12.5px; line-height: 2; letter-spacing: 0.04em; color: var(--c-ink-soft);
}
@media (min-width: 900px) {
  .wd-why__list li { grid-template-columns: auto 15em 1fr; grid-template-areas: "no ja note"; align-items: baseline; gap: 24px; padding: 26px 0; }
  .wd-why__no { padding-top: 0; }
}

/* 確認事項。見落とすと契約後に困る内容なので、面を持たせて目立たせる */
.wd-note {
  margin-top: 44px; padding: 26px 22px 24px;
  background: var(--c-paper-deep);
}
@media (min-width: 900px) { .wd-note { padding: 32px 32px 30px; } }
.wd-note__t {
  font-family: var(--f-display); font-weight: 500;
  font-size: 15px; letter-spacing: 0.12em; color: var(--c-ink);
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(26,22,20,0.16);
}
.wd-note__b {
  font-family: var(--f-label); font-weight: 300;
  font-size: 12.5px; line-height: 2.1; letter-spacing: 0.04em; color: var(--c-ink-soft);
}
.wd-note__b + .wd-note__b { margin-top: 14px; }
.wd-note__b strong { font-weight: 400; color: var(--c-ink); border-bottom: 1px solid var(--c-accent); }
.wd-note__b a { border-bottom: 1px solid currentColor; }
.q-body strong { font-weight: 500; color: var(--c-ink); }

/* ============================================================
   FAQ（faq.html）
   引くためのページなので、まず目次で全体量を見せてから開閉させる。
   <details> を使い、JSなしで開閉・検索・印刷に耐えるようにしている。
   ============================================================ */
.faq-index {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--c-hair); border: 1px solid var(--c-hair);
  margin-bottom: 58px;
}
.faq-index a {
  display: block; background: var(--c-paper);
  padding: 16px 14px; text-decoration: none;
  font-family: var(--f-display); font-weight: 400;
  font-size: 13.5px; letter-spacing: 0.08em; line-height: 1.5; color: var(--c-ink);
  transition: background .4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.faq-index a:hover { background: var(--c-paper-deep); }
.faq-index__en {
  display: block; margin-bottom: 5px;
  font-family: var(--f-num); font-size: 10px;
  letter-spacing: 0.14em; color: var(--c-accent);
}
@media (min-width: 900px) {
  .faq-index { grid-template-columns: repeat(5, 1fr); margin-bottom: 74px; }
  .faq-index a { padding: 20px 18px; font-size: 14px; }
}

.faq-group { margin-bottom: 52px; }
.faq-group:last-of-type { margin-bottom: 0; }
.faq-group__label {
  font-family: var(--f-label); font-weight: 300;
  font-size: 11.5px; letter-spacing: 0.3em; color: var(--c-ink-soft);
  padding-bottom: 14px; border-bottom: 1px solid var(--c-ink);
}
.faq-group__label span {
  font-family: var(--f-num); font-size: 10px;
  letter-spacing: 0.14em; color: var(--c-accent); margin-left: 12px;
}

.faq-item { border-bottom: 1px solid var(--c-hair); }
.faq-q {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px;
  align-items: baseline; cursor: pointer; list-style: none;
  padding: 21px 0;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q__no {
  font-family: var(--f-num); font-size: 11px;
  letter-spacing: 0.14em; color: var(--c-accent);
}
.faq-q__t {
  font-family: var(--f-display); font-weight: 400;
  font-size: 15.5px; letter-spacing: 0.08em; line-height: 1.62; color: var(--c-ink);
}
/* ＋／− は 1px の十字で。開くと横棒だけが残る */
.faq-q__mark { position: relative; width: 11px; height: 11px; align-self: center; }
.faq-q__mark::before, .faq-q__mark::after {
  content: ""; position: absolute; background: var(--c-ink); inset: 0; margin: auto;
  transition: transform .4s cubic-bezier(0.23,1,0.32,1), opacity .4s cubic-bezier(0.23,1,0.32,1);
}
.faq-q__mark::before { width: 11px; height: 1px; }
.faq-q__mark::after  { width: 1px; height: 11px; }
.faq-item[open] .faq-q__mark::after { transform: scaleY(0); opacity: 0; }

.faq-a { padding: 0 0 24px calc(2ch + 14px); }
.faq-a p {
  font-family: var(--f-label); font-weight: 300;
  font-size: 13.5px; line-height: 2.15; letter-spacing: 0.04em; color: var(--c-ink-mute);
}
.faq-a a { color: var(--c-ink); text-underline-offset: 4px; }
@media (min-width: 900px) {
  .faq-q { grid-template-columns: auto 1fr auto; gap: 24px; padding: 25px 0; }
  .faq-q__t { font-size: 16.5px; }
  .faq-a { padding: 0 0 28px calc(2ch + 24px); max-width: 46em; }
  .faq-a p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-q__mark::before, .faq-q__mark::after { transition: none; }
}

/* ============================================================
   撮る人 / 流れ / お客様の声（service-tsumugraph.html）
   料金のあと、問い合わせの直前に置く「安心材料」。
   ============================================================ */
.flow { margin-top: 44px; }
.flow li {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 18px;
  grid-template-areas: "no ja" "no note";
  padding: 22px 0; border-bottom: 1px solid var(--c-hair);
}
.flow li:first-child { border-top: 1px solid var(--c-ink); }
.flow__no {
  grid-area: no;
  font-family: var(--f-num); font-size: 11px;
  letter-spacing: 0.14em; color: var(--c-accent); padding-top: 5px;
}
.flow__ja {
  grid-area: ja;
  font-family: var(--f-display); font-weight: 400;
  font-size: 17px; letter-spacing: 0.1em; color: var(--c-ink);
}
.flow__note {
  grid-area: note;
  font-family: var(--f-label); font-weight: 300;
  font-size: 12.5px; line-height: 2; letter-spacing: 0.04em; color: var(--c-ink-soft);
}
@media (min-width: 900px) {
  .flow li { grid-template-columns: auto 13em 1fr; grid-template-areas: "no ja note"; align-items: baseline; gap: 24px; padding: 26px 0; }
  .flow__no { padding-top: 0; }
}

.voice { margin-top: 44px; display: grid; gap: 34px; }
.voice__i { padding-left: 20px; border-left: 1px solid var(--c-hair); }
.voice__t {
  margin: 0;
  font-family: var(--f-display); font-weight: 400;
  font-size: 15px; line-height: 2.1; letter-spacing: 0.08em; color: var(--c-ink);
}
.voice__by {
  margin-top: 14px;
  font-family: var(--f-label); font-weight: 300;
  font-size: 11px; letter-spacing: 0.3em; color: var(--c-ink-soft);
}
@media (min-width: 900px) {
  .voice { grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 54px; }
  .voice__i { padding-left: 28px; }
  .voice__t { font-size: 15.5px; }
}

/* 本文の途中に置く小さめのリンク */
.cta-link--sm { margin-top: 34px; }

/* FAQ への入口（各料金ページ）。答えは持たせず、質問だけを並べる */
.q-section--thin { padding-top: 0; }
.faq-teaser { margin-top: 40px; border-top: 1px solid var(--c-ink); }
.faq-teaser li { border-bottom: 1px solid var(--c-hair); }
.faq-teaser a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 19px 0; text-decoration: none;
  font-family: var(--f-display); font-weight: 400;
  font-size: 15px; letter-spacing: 0.08em; line-height: 1.6; color: var(--c-ink);
  transition: opacity .4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.faq-teaser a::before {
  content: "Q"; flex: none;
  font-family: var(--f-num); font-size: 11px;
  letter-spacing: 0.14em; color: var(--c-accent);
}
.faq-teaser a:hover { opacity: .62; }
@media (min-width: 900px) {
  .faq-teaser a { padding: 22px 0; font-size: 16px; gap: 20px; }
}

/* グリッド子要素。min-width:0 が無いと長い英数字で横に溢れる */
.founder__body, .services__index { min-width: 0; }

/* 撮り方は手順ではないので、番号の色味を落として並列に見せる */
.flow--how .flow__no { color: var(--c-ink-soft); }