/*
 * プラチナフォトスタジオについて（/selfphoto_about/）前撮りMD-10
 * 試作品（~/Desktop/MD-10_selfphoto_about/09_web-production-ver10/site/ の styles.css + custom.css）を変換したもの。
 * すべて #spa の中だけに効く。コラムと共通のヘッダー・フッター（maedori/css/styles.css・footer-lp.php）には効かない。
 * maedori/css/styles.css が html を 10px にしているため、rem は px に直してある。
 * 書体は既存のもの（明朝 RyuminPro、ゴシックは前撮りLP と同じ指定、筆記体 Ephesis）。
 */
/* ===== 元: 試作品 styles.css ===== */
#spa {
  --ink: #23211f;
  --muted: #746c66;
  --paper: #fffdf9;
  --soft: #f2ebe2;
  --line: rgba(35, 33, 31, 0.14);
  --gold: #b08b62;
  --shadow: 0 28px 80px rgba(44, 34, 26, 0.16);
  --content-max: 1180px;
  --pad-x: max(clamp(20px, 6vw, 92px), calc((100vw - var(--content-max)) / 2));
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-base: 0.75s;

  /* タイポグラフィ・トークン(font-system.md のプリセット。
     apply_design_tokens.py が丸ごと差し替えるので手で書き換えない)
     font-preset: elegant */
  --mold-version: 9;
  --font-display: "RyuminPro", serif;
  --font-body: "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "Meiryo", "メイリオ", "MS Pゴシック", Arial, Helvetica, Verdana, sans-serif;
  --font-en: "RyuminPro", serif;
  --fw-display: 400;
  --fw-body: 400;
  --fw-strong: 600;
  --ls-display: .08em;
  --ls-body: .03em;
  --ls-en: .16em;
  --lh-display: 1.40;
  --lh-body: 2.00;

  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  scroll-behavior: smooth;
}

#spa * { box-sizing: border-box; }
#spa { margin: 0; background: var(--paper); font-size: 15px; letter-spacing: var(--ls-body); }
#spa img { display: block; max-width: 100%; }
#spa a { color: inherit; text-decoration: none; }

#spa .site-header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  height: 82px;
  padding: 0 clamp(18px, 5vw, 72px);
  background: rgba(251, 251, 251, 0.9);
  border-bottom: 1px solid rgba(35, 33, 31, 0.08);
  backdrop-filter: blur(18px);
}
#spa .brand { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
#spa .brand__mark { width: 24px; height: 30px; color: var(--gold); }
#spa .brand__text {
  font-family: var(--font-en);
  font-size: clamp(20.48px, 2vw, 30.4px);
  letter-spacing: .16em;
  white-space: nowrap;
}
#spa .nav { justify-self: end; display: flex; gap: clamp(18px, 3vw, 46px); font-family: var(--font-en); font-size: 16px; }
#spa .nav a, #spa .footer a {
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px;
  transition: background-size .35s var(--ease-out-expo), color .35s var(--ease-out-expo);
}
#spa .nav a:hover, #spa .nav a:focus-visible, #spa .footer a:hover, #spa .footer a:focus-visible { background-size: 100% 1px; color: var(--gold); }
#spa .nav-toggle {
  display: none;
  position: relative;
  z-index: 45;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
#spa .nav-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .4s var(--ease-out-expo);
}
#spa .nav-open .nav-toggle span:nth-child(1) { transform: translateY(4.2px) rotate(22deg); }
#spa .nav-open .nav-toggle span:nth-child(2) { transform: translateY(-4.2px) rotate(-22deg); }
#spa .nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 44px;
  padding: 96px 30px 44px;
  background: rgba(251, 251, 251, .98);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease-out-expo), visibility 0s .45s;
}
#spa .nav-open .nav-overlay { opacity: 1; visibility: visible; transition: opacity .45s var(--ease-out-expo); }
#spa .nav-overlay nav { display: grid; gap: 20px; font-family: var(--font-display); font-size: 24.8px; letter-spacing: .1em; }
#spa .nav-overlay nav a {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease-out-expo), transform .5s var(--ease-out-expo);
}
#spa .nav-open .nav-overlay nav a { opacity: 1; transform: none; }
#spa .nav-open .nav-overlay nav a:nth-child(2) { transition-delay: .05s; }
#spa .nav-open .nav-overlay nav a:nth-child(3) { transition-delay: .1s; }
#spa .nav-open .nav-overlay nav a:nth-child(4) { transition-delay: .15s; }
#spa .nav-open .nav-overlay nav a:nth-child(5) { transition-delay: .2s; }
#spa .nav-open .nav-overlay nav a:nth-child(6) { transition-delay: .25s; }
#spa .nav-overlay__info { display: grid; gap: 20px; }
#spa .nav-overlay__info p { margin: 0; color: var(--muted); line-height: 2; font-size: 14.4px; }
body.nav-open #spa { overflow: hidden; }

#spa .hero {
  position: relative;
  padding-top: 86px;
  overflow: hidden;
  background: #fbfbfb;
}
#spa .hero__stage { position: relative; }
#spa .hero__ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#spa .hero h1 .l { display: block; overflow: hidden; }
#spa .hero h1 .l > span {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 1s var(--ease-out-expo);
}
#spa .is-loaded .hero h1 .l:nth-child(1) > span { transform: none; transition-delay: .18s; }
#spa .is-loaded .hero h1 .l:nth-child(2) > span { transform: none; transition-delay: .34s; }
#spa .hero__copy {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 36%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 5%;
}
#spa .eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  color: var(--gold);
  font-family: var(--font-en);
  letter-spacing: var(--ls-en);
  font-size: 13.6px;
}
#spa .eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold);
}
#spa .hero .eyebrow::before { display: none; }
#spa h1, #spa h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  margin-top: 0;
}
#spa h1 { font-size: clamp(38.4px, 4.05vw, 72px); margin-bottom: clamp(16px, 1.9vw, 32px); letter-spacing: .04em; }
#spa h2 { font-size: clamp(30.4px, 3vw, 48px); }
#spa h3, #spa p { margin-top: 0; }
#spa .hero__lead, #spa .section__lead {
  color: var(--muted);
  font-size: clamp(16px, 1.45vw, 19.2px);
  line-height: 2;
  max-width: 680px;
}
#spa .hero__lead { font-size: clamp(15.2px, 1.45vw, 24px); line-height: 1.95; color: #55504b; }
#spa .hero__proof {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(22px, 2.6vw, 44px) 0 clamp(24px, 2.8vw, 48px);
  padding: 0;
}
#spa .hero__proof li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: clamp(8px, 1vw, 16px);
  border-right: 1px solid var(--line);
  color: var(--ink);
  font-size: clamp(12.48px, 1vw, 16.8px);
  letter-spacing: .06em;
}
#spa .hero__proof li:last-child { border-right: 0; }
#spa .hero__proof svg {
  width: clamp(36px, 3.8vw, 64px);
  height: clamp(36px, 3.8vw, 64px);
  padding: clamp(7px, 0.85vw, 14px);
  border: 1px solid rgba(176, 139, 98, 0.55);
  border-radius: 50%;
  color: var(--gold);
}
#spa .hero__actions { display: grid; gap: clamp(12px, 1.3vw, 22px); }
#spa .btn {
  position: relative;
  overflow: hidden;
  min-height: clamp(48px, 3.8vw, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(44px, 4vw, 66px);
  border: 1px solid var(--ink);
  font-size: clamp(15.2px, 1.3vw, 22.4px);
  letter-spacing: .14em;
  transition: transform .35s var(--ease-out-expo), background .35s var(--ease-out-expo), color .35s var(--ease-out-expo), box-shadow .35s var(--ease-out-expo);
}
#spa .btn::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -70px;
  width: 46px;
  height: 180%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: rotate(14deg) translateX(0);
  opacity: 0;
  pointer-events: none;
}
#spa .btn:hover::before, #spa .btn:focus-visible::before { opacity: 1; animation: btnSheen .8s var(--ease-out-expo); }
@keyframes btnSheen {
  from { transform: rotate(14deg) translateX(0); }
  to { transform: rotate(14deg) translateX(560px); }
}
#spa .btn:active { transform: translateY(1px); }
#spa .btn svg {
  position: absolute;
  right: clamp(14px, 1.6vw, 28px);
  width: clamp(24px, 2.2vw, 38px);
  height: auto;
  transition: transform .35s var(--ease-out-expo);
}
#spa .btn:hover, #spa .btn:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(44, 34, 26, .18); }
#spa .btn:hover svg, #spa .btn:focus-visible svg { transform: translateX(6px); }
#spa .btn--primary { background: #2b2a28; border-color: #2b2a28; color: #fff; }
#spa .btn--primary:hover, #spa .btn--primary:focus-visible { background: var(--gold); border-color: var(--gold); }
#spa .btn--ghost { background: transparent; color: var(--gold); border-color: rgba(176, 139, 98, 0.6); }

#spa .hero__photo-wrap {
  position: relative;
  margin-left: auto;
  width: 66.5%;
  container-type: inline-size;
}
#spa .hero__photo { width: 100%; height: auto; }
#spa .hero__photo-wrap::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 7%;
  background: linear-gradient(90deg, #fbfbfb 14%, rgba(251, 251, 251, 0));
  pointer-events: none;
}
#spa .hero__info {
  position: absolute;
  z-index: 2;
  right: 6.6%;
  bottom: 2.1%;
  width: 29.2%;
  min-height: 27.8%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: max(8px, 0.9cqw);
  box-shadow: 0 1.6cqw 4.5cqw rgba(44, 34, 26, 0.2);
  overflow: hidden;
}
#spa .hero__info svg { width: max(13px, 1.7cqw); height: max(13px, 1.7cqw); color: var(--gold); flex: none; }
#spa .hero__info-hours {
  display: flex;
  align-items: center;
  gap: max(6px, 0.9cqw);
  margin: 0;
  padding: max(9px, 1.9cqw) max(11px, 2.1cqw) max(7px, 1.4cqw);
  border-bottom: 1px solid rgba(35, 33, 31, 0.1);
  font-size: max(10px, 1.45cqw);
}
#spa .hero__info-hours strong {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: max(12px, 2cqw);
  letter-spacing: .05em;
}
#spa .hero__info-note {
  display: flex;
  align-items: flex-start;
  gap: max(6px, 0.9cqw);
  margin: 0;
  padding: max(7px, 1.4cqw) max(11px, 2.1cqw) max(9px, 1.7cqw);
  color: var(--muted);
  font-size: max(10px, 1.38cqw);
  line-height: 1.7;
}
#spa .hero__info-band {
  margin-top: auto;
  background: #b79772;
  color: #fff;
  text-align: center;
  padding: max(7px, 1.2cqw);
  font-size: max(10px, 1.38cqw);
  letter-spacing: .08em;
}
#spa .scroll-cue {
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1vw, 14px);
  padding: clamp(10px, 1.2vw, 18px) 0 clamp(18px, 2.2vw, 32px);
  background: #fbfbfb;
  color: var(--ink);
  font-family: var(--font-en);
  font-size: clamp(15.2px, 1.15vw, 20.8px);
  letter-spacing: .06em;
  transition: color .35s var(--ease-out-expo);
}
#spa .scroll-cue:hover, #spa .scroll-cue:focus-visible { color: var(--gold); }
#spa .scroll-cue__line { width: 1px; height: clamp(24px, 3.4vw, 40px); background: rgba(35, 33, 31, 0.35); }
#spa .scroll-cue__row { display: inline-flex; align-items: center; gap: 12px; }
#spa .scroll-cue__row svg { width: 15px; height: 19px; color: var(--gold); }

#spa .section, #spa .proof-band, #spa .quality, #spa .contact, #spa .footer, #spa .style-showcase, #spa .concept, #spa .voice, #spa .numbers {
  position: relative;
  padding: clamp(96px, 11vw, 160px) var(--pad-x);
}
#spa .section { background: linear-gradient(180deg, rgba(242, 235, 226, .22), rgba(255, 253, 249, 0) 320px); }

#spa .ghost {
  position: absolute;
  z-index: 0;
  top: clamp(22px, 3.4vw, 54px);
  right: clamp(8px, 2vw, 36px);
  font-family: var(--font-en);
  font-size: clamp(88px, 11vw, 180px);
  line-height: 1;
  letter-spacing: .04em;
  color: rgba(176, 139, 98, .07);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
#spa .ghost--light { color: rgba(255, 255, 255, .045); }
#spa .section > :not(.ghost), #spa .style-showcase > :not(.ghost), #spa .voice > :not(.ghost), #spa .quality > :not(.ghost), #spa .concept > :not(.ghost), #spa .contact > :not(.ghost):not(.contact__bg) {
  position: relative;
  z-index: 1;
}
#spa .section__head { max-width: 900px; }
#spa .section__lead { align-self: end; }

#spa .concept { padding-bottom: 0; overflow: hidden; }
#spa .concept__inner {
  display: grid;
  grid-template-columns: auto .9fr 1.1fr;
  gap: clamp(28px, 4.5vw, 72px);
  align-items: end;
}
#spa .concept__vertical {
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  color: var(--gold);
  letter-spacing: .4em;
  font-size: clamp(13.6px, 1vw, 16px);
  align-self: start;
}
#spa .concept__fullbleed {
  margin: clamp(56px, 7vw, 100px) calc(-1 * var(--pad-x)) 0;
  overflow: hidden;
}
#spa .concept__fullbleed img {
  width: 100%;
  height: min(62vh, 580px);
  object-fit: cover;
  transform: scale(1.07);
  transition: transform 1.8s var(--ease-out-expo);
}
#spa .concept__fullbleed.is-visible img { transform: scale(1); }
#spa .concept__fullbleed figcaption {
  padding: 14px var(--pad-x) 0;
  color: var(--muted);
  font-family: var(--font-en);
  font-size: 13.6px;
  letter-spacing: .12em;
}

#spa .marquee {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  padding: clamp(18px, 2.4vw, 30px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
#spa .marquee__inner {
  display: inline-flex;
  gap: clamp(30px, 4.5vw, 64px);
  padding-right: clamp(30px, 4.5vw, 64px);
  animation: marquee 28s linear infinite;
  font-family: var(--font-display);
  color: var(--gold);
  font-size: clamp(16px, 1.4vw, 21.6px);
  letter-spacing: .22em;
}
#spa .marquee__inner span::after { content: "・"; margin-left: clamp(30px, 4.5vw, 64px); opacity: .45; }
@keyframes marquee { to { transform: translateX(-100%); } }

#spa .style-note { margin: 34px 0 0; color: var(--muted); font-size: 15.2px; }

#spa .service-lower {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(48px, 5.5vw, 80px);
}
#spa .service-photo { margin: 0; }
#spa .service-photo img {
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  border-radius: 0 90px 0 0;
  box-shadow: 0 18px 50px rgba(44, 34, 26, .12);
}
#spa .service-photo figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-family: var(--font-en);
  font-size: 13.12px;
  letter-spacing: .12em;
}
#spa .price-table { max-width: 640px; margin: 0; }
#spa .price-table h3 { font-family: var(--font-display); font-weight: 500; font-size: 19.2px; margin-bottom: 22px; }
#spa .price-table dl { margin: 0; }
#spa .price-table dl div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
}
#spa .price-table dt { color: var(--ink); }
#spa .price-table dd { margin: 0; font-family: var(--font-en); color: var(--gold); letter-spacing: .04em; }
#spa .price-note { margin: 16px 0 0; color: var(--muted); font-size: 14.4px; line-height: 1.9; }

#spa .voice { background: #f7f2eb; }
#spa .voice figcaption { color: var(--muted); font-size: 14.08px; letter-spacing: .08em; }
#spa .voice .section__head { max-width: 1040px; margin-inline: auto; }
#spa .voice__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 36px);
  max-width: 1040px;
  margin: clamp(44px, 5vw, 72px) auto 0;
}
#spa .voice__grid figure {
  display: grid;
  grid-template-columns: clamp(150px, 14vw, 210px) 1fr;
  margin: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, .82);
  border-left: 2px solid var(--gold);
  box-shadow: 0 12px 34px rgba(44, 34, 26, .08);
}
#spa .voice__thumb { display: block; width: 100%; height: 100%; min-height: 190px; overflow: hidden; }
#spa .voice__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out-expo);
}
#spa .voice__grid figure:hover .voice__thumb img { transform: scale(1.05); }
#spa .voice__grid figure > div { padding: 24px 28px 20px; align-self: center; }
#spa .voice__grid blockquote { position: relative; margin: 0 0 12px; line-height: 1.95; }
#spa .voice__grid blockquote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-en);
  font-size: 43.2px;
  line-height: .45;
  color: rgba(176, 139, 98, .55);
  margin-bottom: 12px;
}

#spa .numbers {
  overflow: hidden;
  background: #1b1815;
  color: #fff;
  padding-top: clamp(84px, 9vw, 130px);
  padding-bottom: clamp(84px, 9vw, 130px);
}
#spa .numbers__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .26;
  pointer-events: none;
}
#spa .numbers__kicker {
  position: relative;
  z-index: 1;
  justify-content: center;
  color: #d8c3a5;
  margin-bottom: clamp(36px, 4vw, 60px);
}
#spa .numbers__kicker::before { background: #d8c3a5; }
#spa .numbers__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid rgba(255, 255, 255, .2);
}
#spa .numbers__grid > div {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(18px, 2.4vw, 36px) 12px;
  border-right: 1px solid rgba(255, 255, 255, .2);
  text-align: center;
}
#spa .numbers__grid strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38.4px, 4.4vw, 67.2px);
  color: #fff;
  letter-spacing: .02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .4);
}
#spa .numbers__grid strong em { font-style: normal; font-size: .5em; color: #d8c3a5; margin-left: 5px; }
#spa .numbers__grid > div > span { color: rgba(255, 255, 255, .72); font-size: 14.08px; letter-spacing: .1em; }

#spa .faq .section__head { max-width: 860px; margin-inline: auto; }
#spa .faq-list { max-width: 860px; margin: 14px auto 0; }
#spa .faq-list details { border-bottom: 1px solid var(--line); }
#spa .faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 2px;
  cursor: pointer;
  list-style: none;
  font-weight: var(--fw-strong);
  transition: color .3s var(--ease-out-expo);
}
#spa .faq-list summary::-webkit-details-marker { display: none; }
#spa .faq-list summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-en);
  font-size: 22.4px;
  font-weight: 400;
  color: var(--gold);
  transition: transform .35s var(--ease-out-expo);
}
#spa .faq-list details[open] summary::after { transform: rotate(45deg); }
#spa .faq-list summary:hover, #spa .faq-list summary:focus-visible { color: var(--gold); }
#spa .faq-list details p { margin: 0; padding: 0 2px 24px; color: var(--muted); line-height: 2; max-width: 720px; }

#spa .news .section__head { max-width: 860px; margin-inline: auto; }
#spa .news-list { list-style: none; margin: 10px auto 0; padding: 0; max-width: 860px; }
#spa .news-list li {
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  align-items: baseline;
  padding: 18px 2px;
  border-bottom: 1px solid var(--line);
}
#spa .news-list time { flex: none; font-family: var(--font-en); color: var(--gold); letter-spacing: .08em; font-size: 14.72px; }

#spa .style-showcase { overflow: hidden; background: #f7f2eb; }
#spa .style-grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(18px, 2.4vw, 36px);
  margin-top: clamp(44px, 5vw, 72px);
}
#spa .style-card {
  position: relative;
  overflow: hidden;
  background: #e7e0d6;
  box-shadow: 0 18px 50px rgba(44, 34, 26, .12);
}
#spa .style-card--lead { grid-row: span 2; }
#spa .style-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3.1;
  object-fit: cover;
  transition: transform .9s var(--ease-out-expo);
}
#spa .style-card--lead img { aspect-ratio: 3 / 3.62; }
#spa .style-card:hover img { transform: scale(1.04); }
#spa .style-card__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 4px;
  padding: 40px 22px 18px;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(30, 26, 22, .62));
}
#spa .style-card__label span { font-family: var(--font-en); letter-spacing: .1em; }
#spa .style-card__label small {
  color: rgba(255, 255, 255, .85);
  font-size: 12.8px;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease-out-expo), transform .5s var(--ease-out-expo);
}
#spa .style-card:hover .style-card__label small, #spa .style-card:focus-within .style-card__label small { opacity: 1; transform: none; }

#spa .proof-band {
  display: grid;
  gap: clamp(56px, 7vw, 110px);
  background: #201d1a;
  color: #fff;
}
#spa .proof-row {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
}
#spa .proof-row--reverse .proof-row__text { order: 2; }
#spa .proof-row--reverse .proof-row__photo { order: 1; }
#spa .proof-row__num { font-family: var(--font-en); color: #d8c3a5; letter-spacing: .24em; }
#spa .proof-row h2 { font-size: clamp(24px, 2.2vw, 33.6px); margin: 14px 0 18px; }
#spa .proof-row p { color: rgba(255, 255, 255, .72); line-height: 2.1; margin: 0; max-width: 480px; }
#spa .proof-row__photo { margin: 0; overflow: hidden; }
#spa .proof-row__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .9s var(--ease-out-expo);
}
#spa .proof-row:hover .proof-row__photo img { transform: scale(1.03); }

#spa .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
#spa .service-card {
  display: flex;
  flex-direction: column;
  padding: 0 0 26px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .72);
  transition: transform .35s var(--ease-out-expo), box-shadow .35s var(--ease-out-expo);
}
#spa .service-card:hover, #spa .service-card:focus-visible { transform: translateY(-6px); box-shadow: 0 18px 50px rgba(44, 34, 26, .14); }
#spa .service-card figure { margin: 0 0 22px; overflow: hidden; }
#spa .service-card figure img {
  width: 100%;
  aspect-ratio: 4 / 2.9;
  object-fit: cover;
  transition: transform .8s var(--ease-out-expo);
}
#spa .service-card:hover figure img, #spa .service-card:focus-visible figure img { transform: scale(1.05); }
#spa .service-card span { color: var(--gold); font-family: var(--font-en); padding: 0 24px; letter-spacing: .12em; font-size: 13.6px; }
#spa .service-card h3 { margin: 12px 0 10px; padding: 0 24px; font-size: 20.8px; }
#spa .service-card p { color: var(--muted); line-height: 1.9; padding: 0 24px; font-size: 14.72px; }
#spa .service-card strong { margin-top: auto; padding: 14px 24px 0; font-family: var(--font-display); color: var(--gold); }

#spa .quality {
  display: grid;
  grid-template-columns: minmax(320px, .92fr) 1fr;
  gap: clamp(30px, 6vw, 84px);
  align-items: center;
  background: #efe6db;
}
#spa .quality__photo-wrap { position: relative; margin: 0; }
#spa .quality__photo {
  width: 100%;
  height: min(62vw, 680px);
  min-height: 430px;
  object-fit: cover;
  border-radius: 0 120px 0 0;
  box-shadow: var(--shadow);
}
#spa .quality__badge {
  position: absolute;
  right: -18px;
  bottom: 34px;
  display: grid;
  gap: 4px;
  padding: 18px 22px;
  background: #fff;
  border-left: 2px solid var(--gold);
  box-shadow: 0 18px 50px rgba(44, 34, 26, .16);
}
#spa .quality__badge strong { font-size: 15.2px; letter-spacing: .04em; }
#spa .quality__badge span { color: var(--muted); font-size: 12.48px; letter-spacing: .06em; }
#spa .quality__body p { color: var(--muted); line-height: 2; max-width: 640px; }
#spa .quality-track {
  display: flex;
  gap: 12px;
  overflow: hidden;
  margin-top: 34px;
  mask-image: linear-gradient(90deg, #000 84%, transparent);
}
#spa .quality-track span {
  flex: 0 0 auto;
  padding: 18px 22px;
  border: 1px solid rgba(34,32,31,.16);
  background: rgba(255,255,255,.58);
}

#spa .flow .section__head { max-width: 920px; margin-inline: auto; }
#spa .flow-line {
  list-style: none;
  display: grid;
  margin: clamp(44px, 5vw, 72px) auto 0;
  padding: 0;
  max-width: 920px;
}
#spa .flow-line li {
  display: grid;
  grid-template-columns: clamp(52px, 5vw, 80px) 1fr auto;
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
  padding: clamp(26px, 3vw, 42px) 0;
  border-bottom: 1px solid var(--line);
}
#spa .flow-line li:first-child { border-top: 1px solid var(--line); }
#spa .flow-line__num { font-family: var(--font-en); color: var(--gold); font-size: clamp(22.4px, 2vw, 32px); }
#spa .flow-line__body h3 { margin: 0 0 10px; font-size: 18.4px; }
#spa .flow-line__body p { margin: 0; color: var(--muted); line-height: 1.9; max-width: 540px; font-size: 14.72px; }
#spa .flow-line__photo {
  margin: 0;
  width: clamp(130px, 15vw, 200px);
  overflow: hidden;
}
#spa .flow-line__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

#spa .contact {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 52px;
  color: #fff;
  background: #201d1a;
  overflow: hidden;
}
#spa .contact__bg {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  height: 100%;
  width: min(34%, 460px);
  object-fit: cover;
  opacity: .16;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
  mask-image: linear-gradient(90deg, transparent, #000 45%);
  pointer-events: none;
}
#spa .contact p { color: rgba(255,255,255,.72); line-height: 2; }
#spa .access { display: grid; gap: 12px; margin-top: 34px; }
#spa .access div { display: grid; grid-template-columns: 90px 1fr; gap: 18px; border-top: 1px solid rgba(255,255,255,.18); padding-top: 14px; }
#spa .access dt { color: #d8c3a5; }
#spa .access dd { margin: 0; color: rgba(255,255,255,.8); }
#spa .contact-form { display: grid; gap: 16px; }
#spa label { display: grid; gap: 8px; color: rgba(255,255,255,.72); }
#spa input, #spa textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 14px 16px;
  font: inherit;
}
#spa .contact .btn { width: fit-content; border-color: var(--gold); background: var(--gold); color: #201d1a; }

#spa .footer {
  display: grid;
  justify-items: center;
  gap: clamp(40px, 6vw, 88px);
  min-height: clamp(320px, 34vw, 420px);
  align-content: center;
  padding-top: clamp(90px, 10vw, 150px);
  padding-bottom: clamp(56px, 6vw, 90px);
  text-align: center;
  background: #141312;
  color: rgba(255,255,255,.82);
}
#spa .footer__brand { display: grid; justify-items: center; gap: 16px; }
#spa .footer__brand svg { width: 22px; height: 28px; color: #d8c3a5; }
#spa .footer strong { font-family: var(--font-en); letter-spacing: .2em; font-size: 20.8px; color: #fff; }
#spa .footer p { margin: 0; color: rgba(255,255,255,.58); line-height: 2; }
#spa .footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 2.6vw, 40px); font-family: var(--font-en); letter-spacing: .1em; color: rgba(255,255,255,.78); }
#spa .footer__sns { display: flex; gap: 22px; }
#spa .footer__sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  color: #d8c3a5;
  transition: border-color .35s var(--ease-out-expo), color .35s var(--ease-out-expo), transform .35s var(--ease-out-expo);
}
#spa .footer__sns a:hover, #spa .footer__sns a:focus-visible { border-color: #d8c3a5; color: #fff; transform: translateY(-3px); }
#spa .footer__sns svg { width: 19px; height: 19px; }
#spa .footer small { color: rgba(255,255,255,.42); letter-spacing: .08em; }

#spa .sticky-cta {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  background: #2b2a28;
  color: #fff;
  letter-spacing: .1em;
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(20, 19, 18, .35);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s var(--ease-out-expo), transform .45s var(--ease-out-expo);
  pointer-events: none;
}
#spa .sticky-cta.is-shown { opacity: 1; transform: none; pointer-events: auto; }

/* Reveal変種: data-reveal の値で立ち上がり方を変える(F-70)。
   値なし=下から / left・right=横から / scale=拡大 / clip=下から拭き上げ / fade=透過のみ。
   親に data-reveal-stagger を付けると、子の [data-reveal] へ自動で遅延が階段状に付く(script.js)。 */
#spa [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-base) var(--ease-out-expo), transform var(--duration-base) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0s);
}
#spa [data-reveal="left"] { transform: translateX(-36px); }
#spa [data-reveal="right"] { transform: translateX(36px); }
#spa [data-reveal="scale"] { transform: scale(.94); }
#spa [data-reveal="fade"] { transform: none; }
#spa [data-reveal="clip"] {
  transform: translateY(14px);
  clip-path: inset(0 0 88% 0);
  transition: opacity var(--duration-base) var(--ease-out-expo), transform var(--duration-base) var(--ease-out-expo),
              clip-path calc(var(--duration-base) * 1.25) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0s);
}
#spa [data-reveal].is-visible, #spa .is-loaded .site-header { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
#spa .hero__copy [data-reveal] { transform: translateY(42px); }
#spa .is-loaded .hero__photo { animation: heroPhoto 1.3s var(--ease-out-expo) .15s both; }
#spa .is-loaded .hero__info { animation: heroInfo .9s var(--ease-out-expo) .55s both; }
@keyframes heroPhoto {
  from { opacity: 0; transform: scale(1.045); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes heroInfo {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1040px) {
  #spa .sticky-cta { display: flex; }
  #spa .site-header { grid-template-columns: 1fr auto; height: 72px; gap: 12px; }
  #spa .nav { display: none; }
  #spa .nav-toggle { display: inline-flex; }
  #spa .service-lower { grid-template-columns: 1fr; }
  #spa .service-photo img { aspect-ratio: 4 / 3; border-radius: 0 64px 0 0; }
  #spa .quality__badge { right: 10px; bottom: 18px; }
  #spa .contact__bg { width: 70%; opacity: .1; }
  #spa .hero { padding-top: 72px; }
  #spa .hero__stage { display: flex; flex-direction: column; }
  #spa .hero__copy { position: static; order: -1; width: auto; padding: 56px 24px 44px; }
  #spa .hero__photo-wrap { width: 100%; }
  #spa .hero__photo-wrap::before { display: none; }
  #spa .hero__info { width: 62%; right: 4%; bottom: 3%; }
  #spa h1 { font-size: clamp(41.6px, 9vw, 60.8px); }
  #spa .hero__lead { font-size: 16px; }
  #spa .hero__proof svg { width: 52px; height: 52px; padding: 10px; }
  #spa .hero__proof li { font-size: 14.08px; }
  #spa .btn { min-height: 54px; font-size: 16px; }
  #spa .btn svg { width: 26px; }
  #spa .service-grid, #spa .quality, #spa .contact, #spa .footer { grid-template-columns: 1fr; }
  #spa .proof-row { grid-template-columns: 1fr; gap: 22px; }
  #spa .proof-row--reverse .proof-row__text { order: 0; }
  #spa .proof-row--reverse .proof-row__photo { order: 0; }
  #spa .flow-line li { grid-template-columns: 44px 1fr; }
  #spa .flow-line__photo { grid-column: 2; width: 100%; max-width: 280px; }
  #spa .concept__inner { grid-template-columns: 1fr; gap: 22px; }
  #spa .concept__vertical { writing-mode: horizontal-tb; letter-spacing: .3em; }
  #spa .concept__fullbleed img { height: 46vh; }
  #spa .voice__grid { grid-template-columns: 1fr; }
  #spa .numbers__grid { grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(255, 255, 255, .2); }
  #spa .numbers__grid > div { border-bottom: 1px solid rgba(255, 255, 255, .2); }
  #spa .style-grid { grid-template-columns: 1fr; }
  #spa .style-card--lead { grid-row: auto; }
  #spa .style-card img, #spa .style-card--lead img { aspect-ratio: 4 / 3.4; }
  #spa .style-card__label small { opacity: 1; transform: none; }
  #spa .flow-list li { min-height: 110px; }
  #spa .footer nav { justify-content: flex-start; }
}

@media (max-width: 620px) {
  #spa .brand__text { font-size: 18.24px; }
  #spa h1 { font-size: clamp(36.8px, 11vw, 54.4px); }
  #spa .hero__copy { padding: 44px 20px 36px; }
  #spa .hero__proof svg { width: 44px; height: 44px; padding: 9px; }
  #spa .hero__proof li { font-size: 12.48px; }
  #spa .hero__info { width: 74%; }
  #spa .quality__photo { min-height: 360px; border-radius: 0 72px 0 0; }
}

body.no-motion #spa *, body.no-motion #spa *::before, body.no-motion #spa *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
body.no-motion #spa [data-reveal] { opacity: 1; transform: none; clip-path: none; }
body.no-motion #spa .hero h1 .l > span { transform: none; }
body.no-motion #spa .hero__ambient { display: none; }
body.no-motion #spa .concept__fullbleed img { transform: none; }

/* 触れる要素の反応(F-70): カード・行に触れたら何かが動く */
@media (hover: hover) {
  #spa .price-table dl div { transition: background .3s var(--ease-out-expo), transform .3s var(--ease-out-expo); }
  #spa .price-table dl div:hover { background: rgba(176, 139, 98, .07); transform: translateX(4px); }
  #spa .news-list a { transition: color .3s var(--ease-out-expo); }
  #spa .news-list a:hover { color: var(--gold); }
  #spa .voice__grid > div { transition: transform .45s var(--ease-out-expo), box-shadow .45s var(--ease-out-expo); }
  #spa .voice__grid > div:hover { transform: translateY(-4px); }
  #spa .faq-list summary { transition: color .3s var(--ease-out-expo); }
  #spa .faq-list summary:hover { color: var(--gold); }
}
@media (prefers-reduced-motion: reduce) {
  #spa .marquee__inner {
    animation-duration: 55s;
  }
}

/* ===== 元: 試作品 custom.css ===== */
/* 案件固有のスタイル。styles.css / script.js は封印済み。 */
#spa {
  --mold-version: 9;
  --ink: #30363d;
  --paper: #fefefe;
  --gold: #7e8082;
  --muted: #9fa3a8;
  --navy: #08294b;
  --gray-1: #eceef0;
  --gray-2: #c7c9cc;
  --gray-3: #979a9e;
  --gray-4: #707378;
  --lh-body: 1.8;
  --lh-display: 1.4;
  --ls-en: .16em;
  --ls-body: .03em;
  --ls-display: .08em;
  --fw-strong: 600;
  --fw-body: 400;
  --fw-display: 400;
  --font-en: "RyuminPro", serif;
  --font-body: "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "Meiryo", "メイリオ", "MS Pゴシック", Arial, Helvetica, Verdana, sans-serif;
  --font-display: "RyuminPro", serif;
}

#spa *, #spa *::before, #spa *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
#spa { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); }
#spa a { color: inherit; }
#spa .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

#spa .site-header {
  position: absolute;
  inset: 40px 0 auto;
  z-index: 20;
  height: 118px;
  padding: 0 clamp(28px, 4.8vw, 82px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border-bottom: 0;
  color: #1f2429;
}
#spa .brand { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; }
#spa .brand__mark--letter { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-family: var(--font-en); font-size: 24px; }
#spa .brand__text { font-family: var(--font-display); font-size: clamp(16px, 1.7vw, 28px); font-weight: 500; letter-spacing: .08em; }
#spa .nav { display: flex; align-items: center; gap: clamp(24px, 3vw, 54px); }
#spa .nav a { font-size: clamp(12px, .9vw, 16px); font-weight: 500; text-decoration: none; white-space: nowrap; }
#spa .nav a:last-child::after { content: ""; display: inline-block; width: 60px; margin-left: 30px; border-top: 1px solid currentColor; vertical-align: middle; }
#spa .nav-toggle { display: none; }
#spa .nav-overlay { position: fixed; inset: 0; z-index: 30; visibility: hidden; opacity: 0; pointer-events: none; }
#spa .nav-overlay.is-open { visibility: visible; opacity: 1; pointer-events: auto; }

#spa .breadcrumb { position: static; padding: 14px clamp(28px, 4.8vw, 82px); display: flex; gap: 10px; font-size: 11px; letter-spacing: .08em; color: rgba(31,36,41,.55); border-bottom: 1px solid #eceeef; }
#spa .breadcrumb a { text-decoration: none; }

#spa .hero { position: relative; width: 100%; height: 100svh; min-height: 600px; padding-top: 0; overflow: hidden; background: #fff; }
/* FV: 写真を右へずらして全面に敷き、左側を白のグラデーションで覆って文字を重ねる。1画面に収める */
#spa .hero__stage { position: absolute; inset: 0; width: 100%; max-width: none; margin: 0; }
#spa .hero__photo-wrap { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; overflow: hidden; }
#spa .hero__photo-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251,250,248,0) calc(100% - 240px), rgba(251,250,248,.6) calc(100% - 110px), #fbfaf8 100%), linear-gradient(90deg, #fff 0%, #fff 25%, rgba(255,255,255,.6) 29%, rgba(255,255,255,0) 37%); pointer-events: none; }
#spa .hero__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; translate: 24% 0; }
#spa .hero__photo-wrap::before { display: none; }
#spa .hero__copy { position: absolute; left: 4.8%; top: 50%; z-index: 2; width: auto; display: block; padding: 0; transform: translateY(-50%); }
#spa .hero h1 { margin: 0; color: #111417; font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 2.7vw, 44px); line-height: 1.43; letter-spacing: .04em; }
#spa .hero h1 .l { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
#spa .hero h1 .l > span { display: block; transform: none !important; transition: none !important; }
#spa .hero h1 .l:nth-child(2) { overflow: visible; }
#spa .hero h1 .l:nth-child(2) > span { transform: scaleX(1.12) !important; transform-origin: left center; }
#spa .hero__lead { margin: clamp(14px, 1.6vw, 24px) 0 0; font-size: clamp(13px, 1vw, 16px); font-weight: 500; line-height: 1.7; letter-spacing: .04em; }
#spa .hero__actions { display: block; margin-top: clamp(16px, 1.8vw, 28px); }
#spa .hero__copy [data-reveal].is-visible { transform: none; }
#spa .hero__actions .btn { width: min(380px, 100%); min-width: 0; }
#spa .hero__actions .btn > span { position: relative; z-index: 2; color: #fff; opacity: 1; visibility: visible; }
#spa .btn { min-height: 56px; padding: 0 40px; display: inline-flex; align-items: center; justify-content: center; gap: 42px; border: 1px solid transparent; border-radius: 999px; text-decoration: none; font-weight: 500; letter-spacing: .06em; transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
#spa .btn:hover, #spa .btn:focus-visible { transform: translateY(-2px); }
#spa .btn--primary { min-width: min(448px, 100%); color: #fff; background: var(--navy); }
#spa .btn--light { color: #232a31; background: #fff; border-color: rgba(255,255,255,.6); }
#spa .hero__proof { position: absolute; right: 3%; bottom: clamp(20px, 5vh, 56px); z-index: 3; width: auto; height: auto; min-height: 0; display: grid; grid-template-columns: repeat(3, auto); margin: 0; color: #fff; border: 1px solid rgba(255,255,255,.8); background: rgba(31,36,41,.42); backdrop-filter: blur(2px); }
#spa .hero__proof > div { padding: 14px 26px; display: flex; flex-direction: column; justify-content: flex-end; border-left: 1px solid rgba(255,255,255,.65); }
#spa .hero__proof > div:first-child { border-left: 0; }
#spa .hero__proof dt { font-size: 13px; line-height: 1.5; }
#spa .hero__proof dd { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 1.8vw, 30px); line-height: 1.15; white-space: nowrap; }
#spa .hero__proof br { display: none; }
#spa .hero__proof small { margin-left: 4px; font-family: var(--font-body); font-size: .42em; line-height: 1.25; }
#spa .scroll-cue { position: absolute; left: 50%; bottom: 2.8%; z-index: 4; width: 34px; height: 62px; padding: 0; display: block; background: transparent; transform: translateX(-50%); text-decoration: none; }
#spa .scroll-cue::before { content: ""; position: absolute; left: 50%; top: 0; height: 34px; border-left: 1px solid rgba(255,255,255,.8); }
#spa .scroll-cue span::before, #spa .scroll-cue span::after { content: ""; position: absolute; bottom: 9px; width: 13px; border-top: 1px solid rgba(255,255,255,.9); }
#spa .scroll-cue span::before { left: 5px; transform: rotate(45deg); }
#spa .scroll-cue span::after { right: 5px; transform: rotate(-45deg); }

#spa .section { padding: clamp(68px, 6.5vw, 108px) clamp(28px, 7vw, 118px); }
#spa .section__head { max-width: 760px; margin-bottom: clamp(30px, 3.5vw, 52px); }
#spa .section__head h2, #spa .wasou h2, #spa .final-cta h2 { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 2.8vw, 46px); font-weight: 500; line-height: 1.35; letter-spacing: .045em; }
#spa .section__head > p:last-child { max-width: 720px; }
/* 見出し: 筆記体の英字。床に映り込むような反射を下に添える（N3） */
#spa .script-title { position: relative; display: inline-block; margin: 0 0 .32em; color: #a68a5b; font-family: "Ephesis", cursive; font-size: clamp(52px, 5.4vw, 86px); font-weight: 400; line-height: 1; letter-spacing: 0; }
#spa .script-title[data-text]::after { content: attr(data-text); position: absolute; left: 0; top: 100%; margin-top: -.32em; transform: scaleY(-1); opacity: .26; filter: blur(.6px); pointer-events: none; -webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 55%); mask-image: linear-gradient(0deg, #000 0%, transparent 55%); }
#spa .section__head--light .script-title { color: #d8c39a; }
/* Option: 表示後の clip-path: inset(0) が「O」の上の払いを切るため解除（right は clip を使わない） */
#spa .options__copy.is-visible { clip-path: none; }
/* プラン: 「Plan」の払いが伸びて、プラン画像を囲む枠になる（N5） */
#spa .script-title--tail { margin-bottom: 0; padding-bottom: .12em; }
#spa .script-tail { position: absolute; left: calc(100% - .12em); top: .62em; width: 2.2em; height: .5em; overflow: visible; pointer-events: none; }
#spa .script-tail path { fill: none; stroke: #d8c39a; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
#spa .eyebrow { margin: 0 0 14px; color: #73777c; font-family: var(--font-en); font-size: 13px; letter-spacing: .2em; }
#spa .media-placeholder, #spa .feature-card__media, #spa .plans__media, #spa .costume__media, #spa .flow__media, #spa .wasou__media { background: linear-gradient(135deg, var(--gray-2), var(--gray-3)); }

#spa .intro { position: relative; overflow: hidden; padding-top: clamp(72px, 8vw, 120px); padding-bottom: clamp(72px, 8vw, 120px); text-align: left; }
/* 右側に店舗のドライフラワー装飾をうっすら敷き、文字側へ向かって消す */
#spa .intro::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 55%; background: url("../img/intro-bg.jpg") right top / cover no-repeat; opacity: .14; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 0%, #000 35%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 0%, #000 35%); mask-composite: intersect; pointer-events: none; }
#spa .intro__inner { position: relative; z-index: 1; max-width: 980px; margin: 0; padding-left: clamp(28px, 6vw, 100px); }
#spa .intro__statement { margin: 0 0 30px; font-family: var(--font-display); font-size: clamp(28px, 2.7vw, 44px); line-height: 1.65; letter-spacing: .05em; }
/* 強調マーカー: ページ目的（運営元の明示）の一文に、筆記体見出しと同じ金色を薄く下半分に敷く */
#spa .intro__marker { background: linear-gradient(transparent 62%, rgba(166,138,91,.28) 62%, rgba(166,138,91,.28) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#spa .intro__inner > p:last-of-type { max-width: 680px; margin: 0; text-align: left; }
/* LP・和装LPへの導線（冒頭） */
#spa .intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; margin-top: clamp(32px, 3.5vw, 48px); }
#spa .intro__actions .text-link { margin-top: 0; }
/* LPへの導線（中盤） */
#spa .features__action { display: flex; justify-content: flex-start; margin-top: clamp(48px, 5vw, 80px); }

/* about: 全幅バナーの下端に見出し板を食い込ませ、2つの説明文を左右に並べる（定義側にサブ画像） */
#spa .about { --about-pad: clamp(28px, 7vw, 118px); background: #f5f5f4; }
#spa .about.section { padding: 0 0 clamp(64px, 7vw, 112px); }
#spa .about__photo { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: center 55%; }
#spa .about__body { padding: 0 var(--about-pad); }
#spa .about__plate { --plate-x: min(clamp(28px, 4vw, 64px), var(--about-pad)); position: relative; z-index: 1; width: fit-content; max-width: calc(100% + var(--plate-x)); margin: calc(clamp(56px, 6vw, 96px) * -1) 0 clamp(40px, 5vw, 72px) calc(max(0px, (100% - 1240px) / 2) - var(--plate-x)); padding: clamp(28px, 3.4vw, 52px) var(--plate-x); background: #f5f5f4; }
#spa .about__title { margin: 0; font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 60px); font-weight: 500; line-height: 1.3; letter-spacing: .06em; }
#spa .about__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 104px); align-items: start; max-width: 1240px; margin: 0 auto; }
#spa .about__lead { max-width: 30em; margin: 0; font-size: clamp(15px, 1.1vw, 17px); line-height: 2.2; }
#spa .about__def { max-width: 30em; }
#spa .about__subphoto { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: clamp(20px, 2.2vw, 32px); }
#spa .about__def h3 { margin: 0 0 14px; color: var(--navy); font-family: var(--font-display); font-size: clamp(20px, 1.6vw, 26px); font-weight: 500; line-height: 1.5; letter-spacing: .06em; }
#spa .about__def p { margin: 0; font-size: 15px; line-height: 2.1; color: #4a5057; }

/* features: 上段2枚・下段3枚。6列グリッドで上段は3列ずつ、下段は2列ずつ使う */
#spa .feature-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(48px, 4.5vw, 72px) clamp(24px, 2.6vw, 40px); }
#spa .feature-card { grid-column: span 2; display: block; }
#spa .feature-card:nth-child(-n+2) { grid-column: span 3; }
#spa .feature-card__media { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; margin: 0 0 20px; object-fit: cover; }
#spa .feature-card:nth-child(2n) .feature-card__media { background: linear-gradient(145deg, #d7d8da, #9da0a4); }
#spa .feature-card:nth-child(3n) .feature-card__media { background: linear-gradient(145deg, #b9bbbe, #7e8185); }
#spa .feature-card h3 { min-height: 0; margin: 8px 0 10px; font-family: var(--font-display); font-size: clamp(19px, 1.35vw, 23px); line-height: 1.5; }
#spa .feature-card p { margin: 0; font-size: 14px; }

#spa .plans { position: relative; overflow: hidden; color: #fff; background: #31363d; }
#spa .plans__media { position: absolute; inset: 0; opacity: .22; background: linear-gradient(100deg, #24282d, #6f7378); }
#spa .plans > *:not(.plans__media) { position: relative; z-index: 1; }
#spa .section__head--light .eyebrow { color: #d1d3d5; }
#spa .plans .section__head { margin-bottom: 0; }
#spa .plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(20px, 2vw, 32px); }
#spa .plans__frame { padding: clamp(18px, 2.2vw, 32px); border: 1px solid #d8c39a; }
#spa .plans__lead { margin: 0 0 clamp(20px, 2.4vw, 32px); }
#spa .plan-card { display: block; color: #fff; text-decoration: none; }
#spa .plan-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
#spa .plan-card__more { display: inline-flex; gap: 12px; margin-top: 16px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.6); font-size: 14px; letter-spacing: .08em; }
#spa .plan-card:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
#spa .plans__footer { margin-top: 42px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
#spa .plans__footer p { max-width: 720px; }

#spa .options { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(42px, 6vw, 96px); align-items: center; overflow-x: clip; }
#spa .options__media { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
#spa .options__copy { max-width: 650px; }
#spa .text-link { display: inline-flex; gap: 38px; margin-top: 28px; padding-bottom: 8px; border-bottom: 1px solid currentColor; text-decoration: none; font-weight: 500; }

#spa .salon__gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
#spa .salon__gallery img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
#spa .costumes { background: #f5f5f4; }
#spa .costume-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 320px)); justify-content: center; gap: 26px clamp(32px, 5vw, 80px); }
#spa .costume-grid a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; text-decoration: none; }
#spa .costume__media { grid-column: 1 / -1; display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
#spa .costume-grid a:nth-child(2) .costume__media { background: linear-gradient(155deg, #d6d7d9, #93969a); }
#spa .costume-grid a:nth-child(3) .costume__media { background: linear-gradient(155deg, #b5b7ba, #777a7f); }
/* 衣装: 紙焼きしたプリントの余白に鉛筆で書き込む（N6） */
#spa .costume-grid a { align-content: start; }
#spa .costume-grid a > .costume__media, #spa .costume-grid a:nth-child(n) > .costume__media { box-sizing: border-box; padding: 12px 12px 0; background: #fff; }
#spa .costume-grid a > .costume__note { grid-column: 1 / -1; margin: -20px 0 0; padding: 14px 16px 22px; background: #fff; box-shadow: 0 18px 30px rgba(49,44,36,.1); font-family: "Ephesis", cursive; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.3; color: #4f5359; }
#spa .costume-grid a > .costume__media { box-shadow: 0 -2px 18px rgba(49,44,36,.06); }
#spa .costume-grid a:nth-child(1) { transform: rotate(-1.2deg); }
#spa .costume-grid a:nth-child(2) { transform: rotate(.8deg) translateY(10px); }
#spa .costume-grid a:nth-child(3) { transform: rotate(-.6deg); }
#spa .costume-grid strong { font-family: var(--font-display); font-size: clamp(18px, 1.25vw, 22px); }

#spa .flow { position: relative; overflow: hidden; }
#spa .flow__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .12; }
#spa .flow > *:not(.flow__media) { position: relative; z-index: 1; }
/* Flow: styles.css の中央寄せ（margin-inline: auto）を解除し、他セクションと同じ左揃えにする */
#spa .flow .section__head { max-width: 760px; margin-inline: 0; }
#spa .flow-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; border-top: 1px solid #9ea1a5; border-bottom: 1px solid #9ea1a5; }
#spa .flow-grid li { min-height: 240px; padding: 28px 24px; border-left: 1px solid #b9bbbe; }
#spa .flow-grid li:first-child { border-left: 0; }
#spa .flow-grid li:nth-child(3) { border-top: 0; }
#spa .flow-grid li:nth-child(4) { border-top: 0; }
#spa .flow__icon { display: block; width: 64px; height: 64px; }
#spa .flow-grid h3 { margin: 16px 0 12px; font-family: var(--font-display); font-size: clamp(19px, 1.35vw, 23px); }
#spa .flow__access { margin: 28px 0 0; text-align: right; font-weight: 500; }

#spa .wasou { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(40px, 5vw, 80px); background: var(--paper); }
#spa .wasou__banner { display: block; max-width: 760px; margin: 0 auto; transition: opacity .3s ease; }
/* 和装: 原稿11の見出し・本文・リンクを左、バナーを右に並べる */
#spa .wasou { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(42px, 6vw, 96px); align-items: center; }
#spa .wasou__body h2 { word-break: keep-all; }
#spa .wasou__body p { max-width: 60ch; margin: 20px 0 0; text-wrap: pretty; }
#spa .wasou .wasou__banner { max-width: none; margin: 0; }
#spa .wasou__banner:hover { opacity: .9; }
#spa .wasou__banner:focus-visible { outline: 2px solid var(--navy); outline-offset: 6px; }
#spa .wasou__banner img { display: block; width: 100%; height: auto; }
#spa .wasou__copy .eyebrow { color: #d5d7d9; }
#spa .wasou__copy .text-link { color: #fff; }

/* 最終CTA: 写真背景の帯（写真は後日差し替え。現状 gray-about.jpg は仮画像） */
#spa .contact.final-cta { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 60px; align-items: center; color: #fff; background: #1f2429; }
#spa .final-cta::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(17,20,23,.78) 0%, rgba(17,20,23,.55) 100%); pointer-events: none; }
#spa .final-cta > :not(.contact__bg) { position: relative; z-index: 1; }
#spa .final-cta .contact__bg { inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; -webkit-mask-image: none; mask-image: none; }
#spa .final-cta .eyebrow { color: #61666c; }
#spa .final-cta h2, #spa .final-cta p, #spa .final-cta dt, #spa .final-cta dd { color: #fff; }
#spa .final-cta h2 { word-break: keep-all; }
#spa .final-cta p { margin-top: 16px; color: rgba(255,255,255,.82); }
#spa .final-cta .btn--primary { color: #fff; background: var(--navy); border-color: rgba(255,255,255,.35); }
#spa .contact__body { max-width: 800px; }
#spa .access { margin: 0; border-top: 1px solid rgba(255,255,255,.4); }
#spa .access > div { display: grid; grid-template-columns: 96px 1fr; gap: 20px; padding: 12px 0; border-top: 0; border-bottom: 1px solid rgba(255,255,255,.22); }
#spa .final-cta .access dt { color: rgba(255,255,255,.7); font-weight: 500; }
#spa .access dt { font-weight: 600; }
#spa .access dd { margin: 0; }
#spa .final-cta__action { display: flex; justify-content: flex-start; margin-top: clamp(28px, 3vw, 40px); }

/* フッター: 明るい地色・左揃えの3列（ブランド / ページ内リンク / 公式リンク）＋最下段に© */
#spa .footer { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); justify-items: start; align-items: start; gap: 48px clamp(32px, 5vw, 80px); min-height: 0; padding-top: clamp(64px, 7vw, 96px); padding-bottom: clamp(32px, 4vw, 48px); text-align: left; color: var(--ink); background: #f5f5f4; }
#spa .footer__brand { display: grid; justify-items: start; gap: 14px; }
#spa .footer strong { color: var(--ink); font-size: 17.6px; letter-spacing: .16em; }
#spa .footer p { color: #61666c; line-height: 1.9; }
#spa .footer__nav, #spa .footer__sns { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; color: var(--ink); font-family: var(--font-body); letter-spacing: .04em; }
#spa .footer__sns a { width: auto; height: auto; display: inline-flex; gap: 12px; border: 0; border-radius: 0; color: var(--ink); font-weight: 500; text-decoration: none; }
#spa .footer__sns a:hover, #spa .footer__sns a:focus-visible { transform: none; }
#spa .footer a:hover, #spa .footer a:focus-visible { color: var(--navy); }
#spa .footer small { grid-column: 1 / -1; justify-self: stretch; padding-top: 24px; border-top: 1px solid rgba(10,10,10,.12); color: #8a8e93; letter-spacing: .08em; }
#spa .sticky-cta { background: var(--navy); }

@media (max-width: 1040px) {
  #spa .site-header { inset: 0 0 auto; height: 86px; padding: 0 24px; }
  #spa .brand__mark--letter { width: 38px; height: 38px; font-size: 20px; }
  #spa .brand__text { font-size: 16px; }
  #spa .nav { display: none; }
  #spa .nav-toggle { display: grid; place-content: center; gap: 7px; width: 44px; height: 44px; border: 0; background: transparent; }
  #spa .nav-toggle span { width: 26px; border-top: 1px solid currentColor; }
  #spa .nav-overlay { padding: 110px 32px 40px; background: #f7f7f7; }
  #spa .nav-overlay nav { display: flex; flex-direction: column; gap: 18px; }
  #spa .nav-overlay nav a { font-family: var(--font-display); font-size: 24px; text-decoration: none; }
  #spa .nav-overlay__info { margin-top: 36px; }
  #spa .breadcrumb { top: 88px; left: 24px; font-size: 10px; }
  #spa .hero { min-height: 560px; }
  #spa .hero__photo { object-position: 45% 60%; translate: none; }
  #spa .hero__photo-wrap::after { background: linear-gradient(180deg, rgba(251,250,248,0) calc(100% - 240px), rgba(251,250,248,.6) calc(100% - 110px), #fbfaf8 100%), linear-gradient(180deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.55) 30%, rgba(255,255,255,0) 48%); }
  #spa .hero__copy { left: 24px; right: 24px; top: 48px; bottom: 113px; display: flex; flex-direction: column; transform: none; }
  #spa .hero__actions { margin-top: auto; }
  #spa .hero__actions .btn { width: 100%; max-width: 480px; }
  #spa .hero h1 { font-size: clamp(26px, 5vw, 38px); line-height: 1.35; }
  #spa .hero h1 .l:nth-child(2) > span { transform: none !important; }
  #spa .hero__lead { font-size: 13px; }
  #spa .hero__proof { left: 16px; right: 16px; bottom: 16px; grid-template-columns: repeat(3, 1fr); }
  #spa .hero__proof > div { padding: 12px; align-items: center; justify-content: flex-start; text-align: center; }
  #spa .hero__proof dt { min-height: 1.5em; }
  #spa .hero__proof dd { font-size: clamp(22px, 4vw, 34px); }
  #spa .hero__proof br { display: inline; }
  #spa .scroll-cue { display: none; }
  #spa .options { grid-template-columns: 1fr; }
  #spa .wasou { grid-template-columns: 1fr; row-gap: 32px; }
  #spa .options__copy { display: contents; }
  #spa .options { row-gap: 24px; }
  #spa .options__copy > .text-link { margin-top: 0; }
  #spa .options .section__head { order: -1; margin-bottom: 0; }
  #spa .options__copy > p, #spa .options__copy > .text-link { justify-self: start; }
  #spa .plan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #spa .salon__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #spa .about__photo { aspect-ratio: 4 / 3; }
  #spa .about__cols { grid-template-columns: 1fr; }
  #spa .options__media { aspect-ratio: 16 / 9; }
  #spa .feature-grid { grid-template-columns: 1fr; border-top: 1px solid #c8c9cb; row-gap: 0; }
  #spa .feature-card, #spa .feature-card:nth-child(-n+2) { grid-column: auto; display: grid; grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 24px; padding: 28px 0; border-bottom: 1px solid #c8c9cb; }
  #spa .feature-card__media { grid-row: 1 / 4; width: 150px; height: 100%; min-height: 170px; aspect-ratio: auto; margin: 0; }
  #spa .feature-card:last-child { max-width: none; justify-self: stretch; }
  #spa .flow-grid { grid-template-columns: repeat(2, 1fr); }
  #spa .plan-grid article:nth-child(3), #spa .flow-grid li:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255,255,255,.35); }
  #spa .flow-grid li:nth-child(3) { border-top-color: #b9bbbe; }
  #spa .plan-grid article:nth-child(4), #spa .flow-grid li:nth-child(4) { border-top: 1px solid rgba(255,255,255,.35); }
  #spa .flow-grid li:nth-child(4) { border-top-color: #b9bbbe; }
  #spa .plans__footer { align-items: flex-start; flex-direction: column; }
  #spa .contact.final-cta { grid-template-columns: 1fr; }
  #spa .footer { grid-template-columns: 1fr 1fr; }
  #spa .footer__brand { grid-column: 1 / -1; }
  #spa .final-cta__action { justify-content: flex-start; }
}

@media (max-width: 640px) {
  #spa .brand__text { max-width: 210px; font-size: 13px; }
  #spa .breadcrumb { right: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  #spa .hero h1 { font-size: clamp(24px, 7vw, 30px); letter-spacing: .02em; }
  #spa .btn--primary { min-width: 0; width: 100%; }
  #spa .hero__proof > div { padding: 8px 10px; }
  #spa .hero__proof dt { font-size: 11px; }
  #spa .hero__proof dd { font-size: 20px; }
  #spa .section { padding: 78px 22px; }
  #spa .section__head h2, #spa .wasou h2, #spa .final-cta h2 { font-size: 34px; }
  #spa .intro { padding: 90px 22px; }
  #spa .intro::before { left: 0; bottom: auto; width: 100%; height: 60%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, transparent 100%); }
  #spa .intro__statement { font-size: 29px; }
  #spa .intro__statement br { display: none; }
  #spa .about { --about-pad: 22px; }
  #spa .about__title { font-size: clamp(20px, 6.2vw, 26px); letter-spacing: .02em; white-space: nowrap; }
  #spa .feature-grid, #spa .costume-grid, #spa .flow-grid { grid-template-columns: 1fr; }
  #spa .feature-card, #spa .feature-card:nth-child(n) { grid-column: auto; grid-template-columns: 1fr; max-width: none; }
  #spa .feature-card:first-child .feature-card__media, #spa .feature-card__media { grid-row: auto; width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; margin-bottom: 14px; }
  #spa .feature-card h3 { min-height: 0; }
  #spa .plan-cards { grid-template-columns: 1fr; }
  #spa .plan-grid article, #spa .flow-grid li { min-height: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.35); }
  #spa .flow-grid li { border-top-color: #b9bbbe; }
  #spa .plan-grid article:first-child, #spa .flow-grid li:first-child { border-top: 0; }
  #spa .contact.final-cta { padding: 78px 22px; }
  #spa .access > div { grid-template-columns: 92px 1fr; gap: 14px; }
  #spa .footer { grid-template-columns: 1fr; gap: 36px; padding-bottom: 96px; }
}

/* ===== テーマで追加: 共通ヘッダー（セルフLP と同じ、固定表示）の下に FV の見出しが隠れないようにする =====
 * 試作品はヘッダーが無い前提で、1040px 以下は見出しを上から 48px に置いていた。
 * ヘッダーはセルフLP と同じもの。selfphoto/css/styles.css が body の上に余白をとるため、FV はその下から始まる。
 * FV の上端からヘッダーの下端まで（実測）: 751〜1040px は 26〜35px、750px 以下は 64〜70px。
 * その下に試作品と同じ 48px の余白をとる。1041px 以上は上下中央寄せで重ならないため変えない。 */
@media (max-width: 1040px) {
  #spa .hero__copy { top: calc(35px + 48px); }
}
@media (max-width: 750px) {
  #spa .hero__copy { top: calc(70px + 48px); }
}

/* ===== テーマで追加: 表示速度（前撮りMD-10 の SEO 対策）=====
 * FV の写真はスマホの縦長画面用に切り出した版（fv-hero-sp.jpg）を <picture> で出し分ける。
 * <picture> を箱として扱わないようにして、写真の大きさ・位置の指定を今までどおり効かせる。 */
#spa .hero__photo-wrap picture { display: contents; }
/* 導入部分の薄い背景写真は、FV の写真を読み終えてから読む（selfphoto_about.js が is-bg-ready を付ける） */
#spa .intro:not(.is-bg-ready)::before { background-image: none; }

/* ===== テーマで追加: FV のあしらい（2026-10-03、利用者の指示）=====
 * 写真の上の白いグラデーション（PC は左側、スマホは上側）を外して写真を画面いっぱいに見せ、
 * 見出しのある側に暗いオーバーレイを掛けて文字を白にする（PC は左から右へ、スマホは上から下へ薄れる）。
 * 下端の白へのなじませは短くして、二人の下の部分（衣装・手元）まで見せる。
 * .hero__panel・.hero__catch はテンプレートの囲み。今は見た目の指定は無い。 */
#spa .hero__photo-wrap::after { background: linear-gradient(180deg, rgba(251,250,248,0) calc(100% - 90px), rgba(251,250,248,.55) calc(100% - 36px), #fbfaf8 100%), linear-gradient(90deg, rgba(20,18,16,.6) 0%, rgba(20,18,16,.42) 32%, rgba(20,18,16,0) 58%); }
#spa .hero h1, #spa .hero__lead { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.3); }
@media (min-width: 1041px) {
  /* FV の枠の高さを写真の縦横比（3:2）に合わせて伸ばし、顔から下の部分まで写真を切らずに見せる。
     画面より高くなるときは、スクロールすると人物の下の部分が見える。見出しは画面の中央に置く（下の .hero__copy） */
  #spa .hero { height: max(100svh, 66.67vw); }
  /* 見出しの枠は元は FV の下端まで伸びる作り。中身の高さにして、画面の中央（ヘッダーの下）に置く */
  #spa .hero__copy { top: min(50%, calc(50svh - 32px)); bottom: auto; }
  /* 写真を右へずらす代わりに、左端を基準に 1.25 倍にして二人を見出しから右へ離す。
     拡大の基準は上から 70%（頭の上を少し、足元を少し切る） */
  #spa .hero__photo { translate: none; scale: 1.25; transform-origin: left 70%; object-position: left 70%; }
  /* PC の文字を一段大きく（幅 1440px で見出し 39→46px、説明 14→17px） */
  #spa .hero h1 { font-size: clamp(28px, 3.2vw, 52px); }
  #spa .hero__lead { font-size: clamp(13px, 1.2vw, 19px); }
}
@media (max-width: 1040px) {
  /* 囲み（.hero__panel）を配置に影響させない（見出しが上、ボタンが下の並びを保つ） */
  #spa .hero__panel { display: contents; }
  #spa .hero__photo-wrap::after { background: linear-gradient(180deg, rgba(251,250,248,0) calc(100% - 90px), rgba(251,250,248,.55) calc(100% - 36px), #fbfaf8 100%), linear-gradient(180deg, rgba(20,18,16,.6) 0%, rgba(20,18,16,.42) 30%, rgba(20,18,16,0) 55%); }
}