/*
Theme Name: Ael
Theme URI: https://aelproduce.com
Update URI: https://aelproduce.com/ael-theme/
Author: NOI / Chieko Kobayashi
Description: Ael - Wedding Planning / Photo Direction オリジナルテーマ（フルスクラッチ）。静的サイト版（2026-07-26）と同一デザイン。
Version: 1.0.15
Requires PHP: 7.4
License: Proprietary
Text Domain: ael
*/

@charset "UTF-8";
/* =========================================================
   Ael HP — style.css
   colors: yellow #e3fc02 / olive #787d78 / dark #3d4643 / beige #e7e4dd,#e7e4de
   ========================================================= */

/* 本命フォントは Adobe Fonts (HTML側のTypekit JSスニペット参照 / kit: dnp3nny)
   欧文 = TT Commons Pro (400/700) / 和文 = 貂明朝テキスト "ten-mincho-text" (400のみ・太字は疑似ボールド)
   Google Fonts (LINE Seed JP / Shippori) は読み込み失敗時のフォールバック */

:root {
  --yellow: #e3fc02;
  --olive: #787d78;
  --dark: #3d4643;
  --beige: #e7e4dd;
  --beige2: #e7e4de;
  /* 欧文はTT Commons Pro、混在する和文グリフは貂明朝テキストに落ちる */
  --font-sans: "tt-commons-pro", "ten-mincho-text", "LINE Seed JP", "Noto Sans JP", sans-serif;
  --font-mincho: "ten-mincho-text", "Shippori Mincho", serif;
  --font-antique: "ten-mincho-text", "Shippori Antique", serif;
  --font-script: "Homemade Apple", cursive;
  --font-garamond: "EB Garamond", serif;
  --font-inter: "tt-commons-pro", "ten-mincho-text", "Inter", "Noto Sans JP", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--dark);
  background: #fff;
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
figure { margin: 0; }

/* ---- 共通パーツ ---- */
.sec-label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(18px, 1.67vw, 24px);
  margin-bottom: 22px;
}
.sec-title {
  font-family: var(--font-mincho);
  /* 貂明朝テキストは400のみ。700指定だと疑似ボールドで太く汚くなるためRegularで */
  font-weight: 400;
  font-size: clamp(24px, 2.22vw, 32px);
  letter-spacing: -0.12em;
  line-height: 1.5;
  margin-bottom: 45px;
}
.sec-body {
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.9;
}
.sec-label--light, .sec-title--light, .sec-body--light { color: #fff; }
.sec-label--yellow, .sec-title--yellow, .sec-body--yellow { color: var(--yellow); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 8px 24px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.05em;
  transition: opacity 0.3s;
}
.btn:hover { opacity: 0.75; }
.btn--olive { background: var(--olive); color: var(--yellow); }
.btn--yellow { background: var(--yellow); color: var(--olive); }

/* 写真はすべて四角（アーチなし） */

/* =========================================================
   Opening
   ========================================================= */
#opening {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
#opening.is-done { display: none; }
.opening__tiles {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(5, 1fr);
}
.opening__tiles span {
  background: var(--yellow);
  /* タイル境界の髪の毛ライン対策 */
  outline: 1px solid var(--yellow);
  outline-offset: -0.5px;
}
.opening__logo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  opacity: 0;
}
.opening__logo img { width: min(330px, 40vw); }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  padding: 25px 77px 0 72px;
}
.site-header__logo img { width: 142px; height: auto; }
.site-header__nav {
  margin-left: auto;
  display: flex;
  gap: 54px;
  padding-top: 8px;
}
.site-header__col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.site-header__col a {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.3;
  color: var(--yellow);
  transition: opacity 0.3s;
}
.site-header__col a:hover { opacity: 0.7; }
.site-header__cta {
  margin-left: 54px;
  margin-top: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 85px;
  height: 34px;
  background: var(--yellow);
  color: var(--olive);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.05em;
  transition: opacity 0.3s;
}
.site-header__cta:hover { opacity: 0.8; }
.site-header__insta {
  position: absolute;
  top: 87px;
  right: 77px;
  width: 28px;
  height: 28px;
}
.site-header__insta img {
  width: 100%;
  height: 100%;
  /* SVGを黄色に */
  filter: brightness(0) saturate(100%) invert(93%) sepia(69%) saturate(1352%) hue-rotate(9deg) brightness(105%) contrast(104%);
}
.site-header__burger { display: none; }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  height: max(100vh, 620px);
  overflow: hidden;
}
.hero__bg,
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
}
.hero__copy {
  position: absolute;
  left: 8.3%;
  top: 42%;
  z-index: 2;
  color: var(--yellow);
  max-width: 794px;
}
.hero__script {
  font-family: var(--font-script);
  font-size: clamp(30px, 3.8vw, 55px);
  line-height: 1.4;
  white-space: nowrap;
}
.hero__sub {
  font-family: var(--font-garamond);
  font-weight: 500;
  font-size: clamp(16px, 1.67vw, 24px);
  margin-top: 4px;
}
.hero__lead {
  font-family: var(--font-antique);
  font-size: clamp(15px, 1.67vw, 24px);
  max-width: 672px;
  margin-top: 24px;
  line-height: 1.75;
}

/* =========================================================
   背景フェード (index)
   スクロールで次のセクションに入ると、奥に敷いたレイヤーの色を
   main.js (bgFade) がふわっとアニメーションで切り替える。
   JSが動いたときだけ body.has-bgfade が付き、各セクションの塗りを透明化する。
   JSなし時は従来どおり各セクションの単色背景で表示される（フォールバック）。
   ========================================================= */
#bg-fade {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--beige);
}
body.has-bgfade .prologue,
body.has-bgfade .concept,
body.has-bgfade .space,
body.has-bgfade .story,
body.has-bgfade .band,
body.has-bgfade .flow,
body.has-bgfade .about {
  background: transparent;
}
body.has-bgfade .pin-spacer:has(> .band) { background: transparent; }

/* =========================================================
   Prologue
   ========================================================= */
.prologue { background: var(--beige); }
.prologue__inner {
  display: flex;
  align-items: center;
  gap: 8%;
  max-width: 1220px;
  margin: 0 auto;
  padding: clamp(80px, 14vw, 200px) 5%;
}
.prologue__text { width: 342px; flex-shrink: 0; margin-left: 6%; }
.prologue__text .sec-body { max-width: 274px; }
.prologue__photo { flex: 1; max-width: 481px; }
.prologue__photo img { width: 100%; aspect-ratio: 481 / 748; object-fit: cover; }

/* =========================================================
   Concept (テキスト固定＋写真が流れる)
   ========================================================= */
.concept {
  position: relative;
  background: var(--olive);
  /* 写真ストリームのスクロール尺 */
  overflow: clip;
}
.concept__scroll { position: relative; }
.concept__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  z-index: 2;
  pointer-events: none;
}
.concept__text {
  color: var(--yellow);
  width: min(400px, 84%);
  margin-inline: auto;
  pointer-events: auto;
  text-align: center;
}
.concept__text .sec-body { max-width: 340px; margin-inline: auto; }
.concept__stream {
  position: relative;
  z-index: 1;
  height: 4600px;
  margin-top: -100vh; /* pinと重ねる */
}
.concept__photo { position: absolute; }
.concept__photo img { width: 100%; height: 100%; object-fit: cover; }
.concept__photo--1 { left: 0;      top: 370px;  width: 41%; aspect-ratio: 596/804; }
.concept__photo--2 { right: 0;     top: 728px;  width: 41%; aspect-ratio: 596/451; }
.concept__photo--3 { left: 8.6%;   top: 1474px; width: 31%; aspect-ratio: 447/459; }
.concept__photo--4 { right: 4.5%;  top: 1894px; width: 30%; aspect-ratio: 436/655; }
.concept__photo--5 { left: 3%;     top: 2594px; width: 47%; aspect-ratio: 676/454; }
.concept__photo--6 { right: 0;     top: 3120px; width: 41%; aspect-ratio: 596/375; }
.concept__photo--7 { left: 3%;     top: 3582px; width: 38%; aspect-ratio: 548/360; }
.concept__photo--8 { left: 41%;    top: 4066px; width: 32%; aspect-ratio: 459/684; }
.concept__roding {
  --concept-message-space: clamp(180px, 16vw, 240px);
  position: relative;
  z-index: 3;
  color: var(--yellow);
  /* 上下を同じ余白にして、メッセージの前後に落ち着きをつくる */
  padding: var(--concept-message-space) 0;
  overflow: hidden;
  background: var(--olive);
}
/* 英文はセクション内で常時横ループ（スクロールとは独立） */
.concept__marquee {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: roding-marquee 16s linear infinite;
}
@keyframes roding-marquee {
  to { transform: translateX(-50%); }
}
.concept__big {
  font-weight: 400;
  font-size: clamp(34px, 5.35vw, 77px);
  line-height: 1.25;
  white-space: nowrap;
  padding-right: 90px; /* ループの継ぎ目の間隔 */
}
.concept__small {
  font-weight: 700;
  font-size: 16px;
  /* 英文の帯から日本語メッセージまで、結びの文章下と同程度の間をつくる */
  margin-top: var(--concept-message-space);
  text-align: center;
}
/* 浅野さん本人の言葉（HP用文言.docx「全体のどこかに入れて貰えたら嬉しい文章」） */
.concept__credo {
  font-family: var(--font-mincho);
  font-size: 15px;
  line-height: 2.1;
  text-align: center;
  margin: 46px auto 0;
  padding-top: 40px;
  max-width: 640px;
  width: 90%;
  border-top: 1px solid rgba(227, 252, 2, 0.45);
}

@media (max-width: 820px) {
  .concept__credo { font-size: 14px; margin-top: 36px; padding-top: 32px; }
}

/* =========================================================
   Service (すりガラス)
   ========================================================= */
.service {
  position: relative;
  min-height: 1116px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.service__bg,
.service__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 20, 0.35);
}
.service__mid {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1300px;
  width: 92%;
  margin: 180px auto 0;
  min-height: 400px;
}
.service__deco {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(1203px, 96%);
  aspect-ratio: 1203 / 481;
  pointer-events: none;
  opacity: 0.9;
}
/* 装飾SVGの水平線 = 円の中心 (deco上端から 245/1203×幅)。
   Figma準拠: タイトルは線のすぐ上・本文は線の下・見出しは線の高さに中央合わせ */
.service__head {
  position: absolute;
  left: 50%;
  top: min(245px, 18vw);
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--yellow);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.service__title { font-weight: 700; font-size: clamp(28px, 2.5vw, 36px); }
.service__title-ja { font-weight: 700; font-size: clamp(18px, 1.67vw, 24px); }
.service__col {
  width: 292px;
  text-align: center;
  color: var(--yellow);
  padding-top: min(190px, 14vw);
}
.service__col h3 {
  font-weight: 700;
  font-size: clamp(20px, 1.67vw, 24px);
  margin-bottom: min(54px, 4vw);
}
.service__col p {
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.9;
}
.service__glasses {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: clamp(40px, 26vw, 380px);
  margin: 70px auto 120px;
  width: 92%;
}
.service__glass {
  width: clamp(300px, 27vw, 394px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--yellow);
  padding: 36px;
}
.service__glass-title {
  font-family: var(--font-antique);
  font-size: clamp(19px, 1.67vw, 24px);
}
.service__glass-en {
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 28px;
}
.service__glass-body {
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: 15px;
  line-height: 2;
}

/* =========================================================
   Space
   ========================================================= */
.space {
  background: var(--dark);
  overflow: hidden;
}
.space__inner {
  display: flex;
  gap: 4%;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(90px, 15vw, 220px) 5%;
}
.space__text { width: 342px; flex-shrink: 0; margin-left: 10%; padding-top: 12%; }
.space__text .sec-title { margin-top: 37px; }
.space__text .sec-body { max-width: 300px; }
.space__photos { position: relative; flex: 1; min-height: 800px; }
.space__photo {
  position: absolute;
  overflow: hidden;
}
.space__photo img { width: 100%; height: 100%; object-fit: cover; }
/* 四角い写真が重なり合うカスケード */
.space__photo--1 { right: 2%;  top: 0;    width: 42%; aspect-ratio: 3 / 4;  z-index: 1; }
.space__photo--2 { left: 15%;  top: 24%;  width: 50%; aspect-ratio: 4 / 4.4; z-index: 2; }
.space__photo--3 { right: 0;   top: 56%;  width: 56%; aspect-ratio: 4 / 3;  z-index: 3; }

/* =========================================================
   Story & Voice
   ========================================================= */
.story {
  background: var(--beige2);
  padding: clamp(90px, 14vw, 200px) 0 120px;
}
/* 左端は5%で固定し、カードは右へ流れて横スクロールする（記事が増えても崩れない） */
.story__cards {
  display: flex;
  justify-content: flex-start;
  gap: 24px;
  padding: 0 5%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: 5%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.story__cards::-webkit-scrollbar { display: none; }
.story__card {
  flex: 0 0 auto;
  width: min(334px, 28vw);
  scroll-snap-align: start;
}
.story__card figure {
  aspect-ratio: 334 / 501;
  overflow: hidden;
}
.story__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.story__card a:hover img { transform: scale(1.05); }
.story__card.is-arch figure { border-radius: 999px 999px 0 0; }
.story__foot {
  max-width: 1100px;
  margin: 38px auto 0;
  padding: 0 5%;
}
.story__foot .sec-label { font-family: var(--font-inter); margin-bottom: 19px; }
.story__title {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-bottom: 60px;
}

/* 横スクロールのインジケーター（写真のすぐ下） */
.story__dots {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 5%;
  margin-top: 26px;
}
.story__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--olive);
  cursor: pointer;
  transition: background 0.3s ease;
}
.story__dot.is-active { background: var(--yellow); }
.story__dot:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }

/* =========================================================
   写真バンド
   ========================================================= */
/* 前後セクションの背景色 (上=Storyのベージュ / 下=Flowのオリーブ) を敷いて白抜けを防ぐ。
   50%でスパッと切り替えず、中央付近でふわっと混ざるようにしている */
.band,
.pin-spacer:has(> .band) {
  background: linear-gradient(
    to bottom,
    var(--beige2) 0%,
    var(--beige2) 26%,
    var(--olive) 74%,
    var(--olive) 100%
  );
}
.band__window {
  height: clamp(260px, 31vw, 446px);
  overflow: hidden;
  position: relative;
}
.band__window img {
  width: 100%;
  height: 200%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

/* =========================================================
   Flow & Price
   ========================================================= */
.flow {
  position: relative;
  background: var(--olive);
  overflow: clip;
  padding-bottom: 160px;
}
.flow__stream {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.flow__photo {
  position: absolute;
  overflow: hidden;
}
.flow__photo img { width: 100%; height: 100%; object-fit: cover; }
/* 写真をタイムラインの内側まで入れ、文字の奥を流れるレイアウト。
   同じ側の写真は max-height で頭打ちにし、写真同士の衝突は防ぐ。 */
.flow__photo--1 { left: 0;     top: 10%; width: 41%; aspect-ratio: 596/804; max-height: 17%; }
.flow__photo--2 { right: 0;    top: 14%; width: 41%; aspect-ratio: 596/451; max-height: 22%; }
.flow__photo--3 { left: 14%;   top: 28%; width: 33%; aspect-ratio: 447/400; max-height: 22%; }
.flow__photo--4 { right: 4.5%; top: 38%; width: 30%; aspect-ratio: 436/584; max-height: 24%; }
.flow__photo--5 { left: 3%;    top: 52%; width: 47%; aspect-ratio: 676/454; max-height: 22%; }
.flow__photo--6 { right: 0;    top: 64%; width: 41%; aspect-ratio: 596/375; max-height: 22%; }
.flow__photo--7 { left: 3%;    top: 76%; width: 38%; aspect-ratio: 548/360; max-height: 22%; }
.flow__photo--8 { right: 2%;   top: 88%; width: 30%; aspect-ratio: 459/500; max-height: 11%; }
.flow__head {
  position: relative;
  z-index: 3;
  width: min(486px, 84%);
  margin: 0 auto;
  padding-top: clamp(300px, 40vw, 584px);
}
.flow__steps {
  position: relative;
  z-index: 3;
  width: min(486px, 84%);
  margin: 120px auto 0;
}
.flow__steps::before {
  content: "";
  position: absolute;
  left: 46px;
  top: 47px;
  bottom: 47px;
  width: 1px;
  background: var(--yellow);
}
.flow__steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 67px;
  margin-bottom: 105px;
}
.flow__steps li:last-child { margin-bottom: 0; }
.flow__num {
  position: relative;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: var(--yellow);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 数字はTT Commons Proで丸の中央に (明朝＋負トラッキングだと中心がずれて見える) */
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 44px;
  letter-spacing: 0;
  line-height: 1;
  color: var(--olive);
}
.flow__step-label {
  font-weight: 400;
  font-size: clamp(19px, 1.67vw, 24px);
  color: var(--yellow);
}
.flow__price {
  position: relative;
  z-index: 3;
  width: min(486px, 84%);
  margin: clamp(200px, 26vw, 380px) auto 0;
}
.flow__price .btn { margin-top: 34px; width: 188px; padding: 8px 4px; white-space: nowrap; }

/* Price直後の集合写真（Flow本体の絶対配置へ影響させない独立ブロック） */
.flow-group-photo {
  position: relative;
  z-index: 3;
  background: var(--olive);
  padding: 0 0 clamp(120px, 14vw, 200px);
}
.flow-group-photo img {
  display: block;
  width: min(486px, 84%);
  height: auto;
  margin: 0 auto;
}

/* =========================================================
   About
   ========================================================= */
.about { background: var(--beige2); }
.about__inner {
  display: flex;
  gap: 8%;
  max-width: 1190px;
  margin: 0 auto;
  padding: clamp(90px, 14vw, 200px) 5%;
  align-items: flex-start;
}
.about__photo {
  position: relative;
  width: min(317px, 40vw);
  flex-shrink: 0;
  margin: 24px 0 60px 6%;
}
.about__frame {
  position: absolute;
  inset: -23px -15px 15px 15px;
  border: 1px solid var(--yellow);
  pointer-events: none;
}
.about__photo > img {
  width: 100%;
  aspect-ratio: 317 / 415;
  object-fit: cover;
}
.about__name {
  position: absolute;
  left: -24px;
  bottom: -46px;
  background: var(--yellow);
  color: var(--olive);
  padding: 18px 12px 10px 14px;
  min-width: 133px;
}
.about__name-en {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 10px;
  line-height: 1.4;
}
.about__name-ja {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
}
/* 英字表記（MINA）は欧文フォントで組む */
.about__name-ja--en {
  font-family: var(--font-inter);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.about__text { max-width: 451px; }
.about__text .sec-label { font-family: var(--font-inter); margin-bottom: 62px; }
.about__body p { margin-bottom: 1.7em; }
.about__area {
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: 16px;
  margin-top: 45px;
}

/* =========================================================
   Contact
   ========================================================= */
.contact {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 10vw, 150px) 0;
}
.contact__bg,
.contact__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}
.contact__inner {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 6%;
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 5%;
}
.contact__text { width: 342px; flex-shrink: 0; margin-left: 6%; padding-top: 80px; }
.contact__text .sec-body { margin-top: 93px; }
.contact__form {
  width: min(493px, 100%);
  background: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 37px 52px 39px 53px;
  display: flex;
  flex-direction: column;
  gap: 21px;
  margin-left: auto;
}
.form-field { display: block; width: 100%; }
.form-field__label {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: #000;
}
.form-field input,
.form-field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--dark);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 10px 2px 8px;
  border-radius: 0;
  color: var(--dark);
}
.form-field input:focus,
.form-field textarea:focus { outline: none; border-bottom-color: #000; }
.form-field textarea {
  border: 1px solid var(--dark);
  margin-top: 8px;
  padding: 8px;
  resize: vertical;
  min-height: 83px;
}
.form-row { display: flex; gap: 16px; }
.form-row .form-field { flex: 1; }
.form-choice {
  border: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.form-choice legend { margin-bottom: 10px; }
.form-choice label { cursor: pointer; }
.form-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
/* 選択ボタン: ラジオ風ピル。左に丸インジケーター、選択で黄色に反転（2026-07-26）
   ※旧オリーブ塗りは暗い写真背景に溶けて選択が判別できなかった */
.form-choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  width: 122px;
  min-height: 34px;
  background: transparent;
  border: 1px solid rgba(61, 70, 67, 0.5);
  border-radius: 999px;
  color: var(--dark);
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.3;
  padding: 5px 8px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
/* ラジオの丸 */
.form-choice span::before {
  content: "";
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(61, 70, 67, 0.55);
  border-radius: 50%;
  background: transparent;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.form-choice label:hover span {
  border-color: var(--dark);
  background: rgba(61, 70, 67, 0.07);
}
.form-choice input:focus-visible + span {
  outline: 2px solid var(--olive);
  outline-offset: 1px;
}
.form-choice input:checked + span {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--dark);
  font-weight: 700;
}
/* 選択ドット: 黒丸＋黄リングでラジオの「選択中」を再現 */
.form-choice input:checked + span::before {
  border-color: var(--dark);
  background: var(--dark);
  box-shadow: inset 0 0 0 2px var(--yellow);
}
.form-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-notice {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, .25);
  font-size: 13px;
  line-height: 1.7;
}
.form-notice--success { background: rgba(255, 255, 255, .55); }
.form-notice--error { background: rgba(255, 255, 255, .35); }
.form-consent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.6;
}
.form-consent input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: var(--olive);
}
.form-consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 43px;
  border: none;
  background: var(--beige2);
  /* 色を明示しないと iOS のダークモードで button の既定色（白）が当たり文字が消える */
  color: var(--dark);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.25s;
}
.contact__submit:hover { background: var(--yellow); }
.contact__submit img { width: 18px; height: 18px; }

/* =========================================================
   Instagram
   ========================================================= */
.instagram {
  background: var(--beige);
  padding: 42px 0 60px;
}
.instagram__title {
  text-align: center;
  font-weight: 400;
  font-size: 24px;
  margin-bottom: 43px;
}
.instagram__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
}
.instagram__grid a {
  aspect-ratio: 297 / 343;
  overflow: hidden;
}
.instagram__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.instagram__grid a:hover img { transform: scale(1.06); }

/* =========================================================
   Footer
   ========================================================= */
.footer {
  position: relative;
  height: 314px;
  overflow: hidden;
  background: #fff;
}
.footer__mask {
  position: absolute;
  inset: 0;
  background-image: url("assets/img/footer-photo.jpg");
  background-size: cover;
  /* 指輪(画像右下)が見える位置に */
  background-position: center 80%;
}
.footer__mask::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.footer__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.footer__logo { width: 200px; }
.footer__links {
  display: flex;
  gap: 39px;
  align-items: center;
  font-family: var(--font-inter);
  font-size: 12px;
  color: var(--yellow);
}
.footer__links a:hover { text-decoration: underline; }

/* =========================================================
   下層共通: ベージュ背景用ヘッダー配色
   ========================================================= */
.site-header--sub .site-header__col a { color: var(--olive); }
.site-header--sub .site-header__logo img { width: 120px; }
.site-header--sub .site-header__insta img {
  filter: none;
}
/* Priceはヒーロー写真上に重なるため、TOPと同じ黄色のヘッダーにする */
.page-price .site-header--sub .site-header__col a { color: var(--yellow); }
.page-price .site-header--sub .site-header__insta img {
  filter: brightness(0) saturate(100%) invert(93%) sepia(69%) saturate(1352%) hue-rotate(9deg) brightness(105%) contrast(104%);
}

/* =========================================================
   Price ページ
   ========================================================= */
.page-price { background: var(--beige2); }
.price-hero {
  position: relative;
  height: clamp(320px, 37vw, 539px);
  overflow: hidden;
}
.price-hero__bg,
.price-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.price-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}
.price-hero__title {
  position: absolute;
  z-index: 2;
  left: 23%;
  top: 43%;
  color: var(--yellow);
  line-height: 1.01;
}
.price-hero__en { font-weight: 400; font-size: clamp(40px, 4.45vw, 64px); }
.price-hero__ja { font-weight: 400; font-size: clamp(16px, 1.67vw, 24px); }

.price-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(60px, 8vw, 110px) 5% 0;
}
.price-item {
  display: flex;
  gap: 6%;
  align-items: flex-start;
  padding: 0 0 60px;
  border-bottom: 1px solid var(--dark);
  margin-bottom: 60px;
}
.price-item__text { flex: 1; padding-left: 4%; }
.price-item__title {
  font-family: var(--font-antique);
  font-weight: 400;
  font-size: clamp(20px, 1.67vw, 24px);
  color: var(--dark);
  margin-bottom: 40px;
}
.price-item__desc {
  font-family: var(--font-mincho);
  font-size: 16px;
  color: var(--dark);
  max-width: 430px;
  line-height: 1.9;
}
.price-item__price {
  font-family: var(--font-antique);
  font-size: clamp(20px, 1.67vw, 24px);
  color: var(--dark);
  margin-top: 48px;
  padding-left: 18%;
}
.price-item__desc--detail p { margin-bottom: 10px; font-family: var(--font-antique); font-size: clamp(18px, 1.55vw, 22px); }
.price-item__desc--detail small { font-family: var(--font-antique); font-size: 15px; }
.price-item__inline-price { display: block; text-align: right; }
.price-item__note {
  font-family: var(--font-mincho) !important;
  font-size: 15px !important;
  margin-top: 20px;
}
.price-item__photo {
  width: min(512px, 42%);
  flex-shrink: 0;
}
.price-item__photo img { width: 100%; aspect-ratio: 512 / 342; object-fit: cover; }

.price-note {
  background: var(--olive);
  color: #fff;
  text-align: center;
  padding: 90px 5%;
  margin-top: 100px;
}
.price-note p { font-weight: 400; font-size: 16px; line-height: 1.6; }
.price-note__caution {
  margin-top: 40px;
  font-size: 13px !important;
  line-height: 2 !important;
  opacity: 0.85;
}

/* プロデュース料に含まれる物 */
.price-includes {
  max-width: 430px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--olive);
}
.price-includes__title {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--olive);
  margin-bottom: 12px;
}
.price-includes ul { display: grid; gap: 4px; }
.price-includes li {
  font-family: var(--font-mincho);
  font-size: 15px;
  line-height: 1.9;
  color: var(--dark);
  padding-left: 1em;
  text-indent: -1em;
}
.price-includes li::before { content: "・"; }
.price-includes__note {
  font-family: var(--font-mincho);
  font-size: 13px;
  line-height: 1.8;
  color: var(--olive);
  margin-top: 14px;
}

/* =========================================================
   Story ページ
   ========================================================= */
.page-story { background: var(--beige2); }
.story-hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(150px, 16vw, 230px) 5% 0;
  color: var(--dark);
}
.story-hero__en {
  font-family: var(--font-inter);
  font-size: clamp(18px, 1.67vw, 24px);
  margin-bottom: 20px;
}
.story-hero__title {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(26px, 2.22vw, 32px);
  letter-spacing: -0.12em;
  margin-bottom: 24px;
}
.story-hero__lead {
  font-family: var(--font-mincho);
  font-size: 16px;
}
.story-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(50px, 6vw, 80px) 5% 40px;
}
.story-entry a { display: block; }
.story-entry__photo {
  aspect-ratio: 334 / 501;
  overflow: hidden;
  margin-bottom: 18px;
}
.story-entry__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.story-entry a:hover .story-entry__photo img { transform: scale(1.05); }
.story-entry__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--olive);
  margin-bottom: 10px;
}
.story-entry__cat {
  background: var(--olive);
  color: var(--yellow);
  padding: 2px 12px;
  font-weight: 700;
}
.story-entry__title {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 18px;
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 8px;
}
.story-entry__excerpt {
  font-family: var(--font-mincho);
  font-size: 14px;
  color: var(--olive);
}
.story-back {
  text-align: center;
  padding: 40px 0 120px;
}

@media (max-width: 820px) {
  .price-item { flex-direction: column-reverse; gap: 28px; }
  .price-item__text { padding-left: 0; width: 100%; }
  .price-item__photo { width: 100%; }
  .price-item__price { padding-left: 0; text-align: right; }
  .story-list { grid-template-columns: 1fr; }
  .story-entry__photo { max-width: 340px; }
}

/* =========================================================
   Voice 記事ページ（WordPress化時は single.php / カテゴリ Voice）
   ========================================================= */
.story-entry__couple {
  font-family: var(--font-inter);
  letter-spacing: 0.04em;
}

.page-voice { background: var(--beige2); }
.voice-article {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(150px, 16vw, 230px) 5% 0;
  color: var(--dark);
}
.voice-article__head { text-align: center; }
.voice-article__cat {
  display: inline-block;
  background: var(--olive);
  color: var(--yellow);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 14px;
  margin-bottom: 22px;
}
.voice-article__title {
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: clamp(22px, 2.22vw, 30px);
  line-height: 1.8;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.voice-article__couple {
  font-family: var(--font-inter);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--olive);
}
.voice-article__photo {
  margin: clamp(36px, 4vw, 56px) 0 clamp(40px, 5vw, 64px);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.voice-article__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.voice-block + .voice-block { margin-top: clamp(36px, 4vw, 52px); }
.voice-block__speaker {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--olive);
  padding-bottom: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--olive);
}
.voice-block p + p { margin-top: 1.6em; }
.voice-block p {
  font-family: var(--font-mincho);
  font-size: 15px;
  line-height: 2.1;
}
.voice-nav {
  text-align: center;
  padding: clamp(56px, 7vw, 88px) 0 120px;
}

@media (max-width: 820px) {
  .voice-article__photo { aspect-ratio: 4 / 3; }
  .voice-block p { font-size: 14px; line-height: 2; }
}

/* =========================================================
   Privacy Policy ページ
   ========================================================= */
.page-privacy { background: var(--beige2); }
.legal {
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(50px, 6vw, 80px) 5% 40px;
}
.legal section + section { margin-top: 48px; }
.legal h2 {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--olive);
}
.legal p {
  font-family: var(--font-mincho);
  font-size: 15px;
  line-height: 2;
}
.legal ul {
  margin-top: 12px;
  padding-left: 1.4em;
}
.legal ul li {
  list-style: disc;
  font-family: var(--font-mincho);
  font-size: 15px;
  line-height: 2;
}
.legal__date {
  margin-top: 56px;
  text-align: right;
  font-size: 14px;
  color: var(--olive);
}

/* =========================================================
   アニメーション初期状態 (JS有効時のみ)
   ========================================================= */
.js .service__glass { opacity: 0; transform: translateY(90px); }
.js .space__photo {
  opacity: 0;
  transform: translateY(90px) scale(0.97);
  filter: blur(10px);
}
.js .flow__photo img {
  opacity: 0;
  transform: scale(1.08);
  filter: blur(8px);
}
.js .hero__copy > * { opacity: 0; transform: translateY(24px); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px) {
  .site-header { padding: 20px 24px 0; }
  .site-header__nav, .site-header__cta, .site-header__insta { display: none; }
  .site-header__logo img { width: 100px; }
  .site-header__burger {
    display: block;
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 300;
    width: 48px;
    height: 48px;
    border: none;
    background: rgba(61, 70, 67, 0.55);
    border-radius: 50%;
    cursor: pointer;
  }
  .site-header__burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--yellow);
    margin: 4px auto;
    transition: transform 0.3s, opacity 0.3s;
  }
  body.nav-open .site-header__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.nav-open .site-header__burger span:nth-child(2) { opacity: 0; }
  body.nav-open .site-header__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  body.nav-open .site-header__nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 250;
    background: rgba(61, 70, 67, 0.96);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 0;
    padding: 0;
  }
  body.nav-open .site-header__col { align-items: center; gap: 26px; }
  body.nav-open .site-header__col a { font-size: 22px; }
  .flow__photo { width: 24vw; }

  /* --- 2026-09-14: SPメニューにも Contact / Instagram の導線を出す（CHUM承認） --- */
  body.nav-open .site-header__cta {
    display: inline-flex;
    position: fixed;
    left: 50%;
    bottom: 116px;
    transform: translateX(-50%);
    z-index: 260;
    width: 200px;
    height: 52px;
    margin: 0;
    font-size: 16px;
  }
  body.nav-open .site-header__insta {
    display: block;
    position: fixed;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 52px;
    transform: translateX(-50%);
    z-index: 260;
    width: 32px;
    height: 32px;
  }

  /* --- 2026-09-14: iOS Safari の自動ズーム防止（16px未満の入力欄でページが拡大される） --- */
  .form-field input,
  .form-field textarea { font-size: 16px; }

  /* --- 2026-09-14: 下層ページのSPメニューが読めない不具合の修正 ---
     下層は .site-header--sub でリンク色が --olive(#787d78) になるが、
     開いたメニューの背景は rgba(61,70,67,.96)=#3D4643。コントラスト比 2.3:1 で判読困難だった。
     メニューを開いている間だけ TOP と同じ黄色(#e3fc02・8.4:1)に揃える。 */
  body.nav-open .site-header--sub .site-header__col a { color: var(--yellow); }
  body.nav-open .site-header--sub .site-header__insta img {
    filter: brightness(0) saturate(100%) invert(93%) sepia(69%) saturate(1352%) hue-rotate(9deg) brightness(105%) contrast(104%);
  }
}

/* --- 2026-09-14: PCの透明ヘッダー対策（CHUM承認「見えにくくなる部分だけ影」） ---
   PCはナビ6項目・Contact・Instagramが常時画面に出ており、明るい写真がヘッダーの裏へ来ると
   黄色の文字が沈んで読めなくなる（実測: TOP scrollY 1267 付近）。
   背景は敷かず、黄色の要素にだけ薄い影を落として輪郭を保つ。
   ベージュ背景でオリーブ文字になる下層（privacy/story/voice）は対象外＝影を付けると汚れて見えるため。 */
@media (min-width: 1081px) {
  .site-header:not(.site-header--sub) .site-header__col a,
  .page-price .site-header--sub .site-header__col a {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.55);
  }
  .site-header:not(.site-header--sub) .site-header__logo,
  .page-price .site-header--sub .site-header__logo,
  .site-header:not(.site-header--sub) .site-header__insta,
  .page-price .site-header--sub .site-header__insta {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
  }
  .site-header:not(.site-header--sub) .site-header__cta,
  .page-price .site-header--sub .site-header__cta {
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
  }
}

/* Service PC: 左右の見出しと本文をSVG水平線の外端へ揃える */
@media (min-width: 821px) {
  .service__col:nth-of-type(1) {
    margin-left: max(2%, calc((100% - 1203px) / 2));
    text-align: left;
  }
  .service__col:nth-of-type(3) {
    margin-right: max(2%, calc((100% - 1203px) / 2));
    text-align: right;
  }
}

@media (max-width: 820px) {
  .concept__roding { --concept-message-space: 140px; }
  .prologue__inner { flex-direction: column; gap: 48px; }
  .prologue__text { width: 100%; margin-left: 0; }
  .concept__text { margin-inline: auto; }
  .concept__stream { height: 3400px; }
  .concept__photo--1 { width: 62%; }
  .concept__photo--2 { width: 58%; top: 640px; }
  .concept__photo--3 { width: 48%; top: 1200px; }
  .concept__photo--4 { width: 46%; top: 1560px; }
  .concept__photo--5 { width: 66%; top: 2080px; }
  .concept__photo--6 { width: 58%; top: 2480px; }
  .concept__photo--7 { width: 56%; top: 2840px; }
  .concept__photo--8 { width: 48%; top: 3060px; }
  /* --- Service（SPはPCと別デザイン）---------------------------------
     PCの「3カラム＋左右の円形ガラス」をやめ、
     「線で囲んだメニュー → 四角いガラスが下からぬるっと出る」を2セット縦に並べる。
     .service__mid / .service__glasses を display:contents で透過させて
     子を .service（縦フレックス）の直下アイテムに引き上げ、order で交互に並べる。
     ＝ HTMLはPCと共通のまま順序だけ入れ替わる */
  .service { min-height: 0; padding-bottom: 60px; gap: 22px; }
  .service__mid,
  .service__glasses { display: contents; }
  .service__deco { display: none; }
  .service__head,
  .service__col,
  .service__glass {
    z-index: 2;
    width: min(340px, 86%);
    margin-inline: auto;
  }
  .service__head {
    position: static;
    transform: none;
    margin-top: 118px;
    margin-bottom: 6px;
  }
  /* メニュー2つは線の四角で囲む */
  .service__col {
    padding: 26px 20px 28px;
    border: 1px solid var(--yellow);
  }
  .service__col h3 { margin-bottom: 18px; }
  .service__col p { font-size: 15px; }
  /* 円形 → 四角いガラス（ぬるっと出る動きは main.js が担当） */
  .service__glass {
    aspect-ratio: auto;
    border-radius: 0;
    padding: 30px 24px 32px;
    margin-bottom: 12px;
  }
  /* Wedding → そのガラス → Photo → そのガラス の順
     （.service__mid の div は col / head / col なので nth-of-type は 1 と 3） */
  .service__head { order: 1; }
  .service__col:nth-of-type(1) { order: 2; }
  .service__glass--left { order: 3; }
  .service__col:nth-of-type(3) { order: 4; }
  .service__glass--right { order: 5; }

  /* --- Space ---------------------------------------------------------
     文字と写真の間は Prologue（はじめに）と同じ 48px。
     写真はPCと同じく重なり合うカスケードに戻す */
  .space__inner { flex-direction: column; gap: 48px; }
  .space__text { width: 100%; margin-left: 0; padding-top: 0; }
  .space__text .sec-body { max-width: none; }
  .space__photos {
    flex: none;
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    height: auto;
    aspect-ratio: 5 / 7;
  }
  .space__photo { position: absolute; }
  .space__photo--1 { right: 0; top: 0;   width: 62%; }
  .space__photo--2 { left: 0;  top: 25%; width: 68%; }
  .space__photo--3 { right: 0; top: 55%; width: 72%; }
  /* モバイルも縦積みではなく横スクロール。次のカードが少し見える幅にする */
  .story__cards { gap: 16px; }
  .story__card { width: 72vw; }
  .story__title { flex-direction: column; align-items: flex-start; gap: 16px; }
  .flow__photo { opacity: 0.55; max-height: 11%; }
  .flow__photo--1,
  .flow__photo--3,
  .flow__photo--5,
  .flow__photo--7 { left: 0; width: min(44vw, 320px); }
  .flow__photo--2,
  .flow__photo--4,
  .flow__photo--6,
  .flow__photo--8 { right: 0; width: min(44vw, 320px); }
  .flow__photo--1 { top: 5%; }
  .flow__photo--2 { top: 17%; }
  .flow__photo--3 { top: 29%; }
  .flow__photo--4 { top: 41%; }
  .flow__photo--5 { top: 53%; }
  .flow__photo--6 { top: 65%; }
  .flow__photo--7 { top: 77%; }
  .flow__photo--8 { top: 89%; max-height: 9%; }
  .flow__steps li { gap: 28px; margin-bottom: 64px; }
  .flow__steps::before { left: 33px; }
  .flow__num { width: 66px; height: 66px; font-size: 32px; }
  .about__inner { flex-direction: column; }
  /* SPは写真をしっかり大きく（PC基準の 40vw だと 375px 幅で 150px しかなかった） */
  .about__photo { width: min(317px, 74vw); margin-left: 24px; margin-bottom: 78px; }
  .about__text .sec-label { margin-bottom: 30px; }
  .contact__inner { flex-direction: column; }
  .contact__text { width: 100%; margin-left: 0; padding-top: 0; }
  .contact__text .sec-body { margin-top: 30px; margin-bottom: 48px; }
  .contact__form { margin-left: 0; padding: 30px 24px; }
  .form-row { flex-direction: column; gap: 21px; }
  .instagram__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 12px; }
  .instagram__grid a:nth-child(5) { display: none; }
  .footer { height: 260px; }
  .footer__logo { width: 150px; }
}

@media (max-width: 640px) {
  .hero__script {
    white-space: normal;
    font-size: clamp(26px, 8.5vw, 34px);
  }
  .hero__copy { left: 6%; right: 6%; top: 38%; }
}

@media (prefers-reduced-motion: reduce) {
  .js .space__photo,
  .js .flow__photo img {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* =========================================================
   WordPress 投稿本文（Voice記事）
   h2 = 語り手ラベル（.voice-block__speaker と同見た目）
   p  = 本文（.voice-block p と同見た目）
   ========================================================= */
.voice-article__body h2 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--olive);
  padding-bottom: 8px;
  margin-top: clamp(36px, 4vw, 52px);
  margin-bottom: 20px;
  border-bottom: 1px solid var(--olive);
}
.voice-article__body h2:first-child { margin-top: 0; }
.voice-article__body p {
  font-family: var(--font-mincho);
  font-size: 15px;
  line-height: 2.1;
}
.voice-article__body p + p { margin-top: 1.6em; }
.voice-article__body img { margin: 24px 0; }
@media (max-width: 820px) {
  .voice-article__body p { font-size: 14px; line-height: 2; }
}

/* =========================================================
   Instagram 実フィード（Smash Balloon）調整 — 1.0.6
   枚数・列数・4:5比率はプラグイン側設定（feed=1）が持つ。
   ここでは外周余白の除去と、静的版と同じホバー拡大のみ足す
   ========================================================= */
.instagram__feed #sb_instagram { padding: 0 !important; }
.instagram__feed #sb_instagram .sbi_photo_wrap { overflow: hidden; }
.instagram__feed #sb_instagram .sbi_photo { transition: transform 0.5s ease; }
.instagram__feed #sb_instagram .sbi_item:hover .sbi_photo { transform: scale(1.06); }