@charset "UTF-8";
/* ============================================================
   スタジオぎゅっつ — style.css
   構成: 1.トークン → 2.リセット/ベース → 3.レイアウト
        → 4.コンポーネント → 5.モーション → 6.停止ポリシー
   見た目の方向（2026-09-17 ほのきさん決定）:
     「やわらかく親しみやすく、色を使ってかわいく」
     インスタの案内カード（投稿画像/20260916_案内カード_共通_ChatGPT.png）の雰囲気に寄せる。
     淡いセージの地 × 白の丸いカード × 桜色と赤みのピンク × こげ茶の文字 × 点線の枠。
   ============================================================ */

/* ---------- 1. トークン ---------- */
:root {
  /* 色: 案内カードから拾った値をもとにしている */
  --color-bg: #edf1e0;          /* 地: 淡いセージ（案内カード #eaeed6 を少し明るく） */
  --color-bg-deep: #e3e9d1;     /* 一段濃いセージ（帯・区切り） */
  --color-surface: #fffdf7;     /* 白の丸いカード（生成りよりの白） */
  --color-cream: #fdf9f0;       /* 面（クリーム） */

  --color-text: #4a3729;        /* こげ茶（黒は使わない） */
  --color-muted: #7c6555;       /* 薄いこげ茶（補足文） */

  --color-rose: #e18984;        /* ピンク: ボタンの地 */
  --color-rose-deep: #c25064;   /* 赤みのある差し色: 帯・強調 */
  --color-rose-text: #a83e54;   /* 小さい文字で使うピンク（読みやすさ用） */
  --color-rose-soft: #f9e3e1;   /* 淡い桜色の面 */
  --color-rose-line: #efb9b5;   /* 桜色の線 */
  --color-rose-ink: #fffaf5;    /* ピンクの上に載せる文字 */

  --color-leaf: #6f7e4a;        /* 葉の緑（飾り・小さな印） */
  --color-leaf-soft: #cdd8b2;   /* 薄い葉の緑 */

  --color-line-soft: #ded4c4;   /* 弱い区切り線 */
  --color-frame: #f0e5d4;       /* 額ぶちの淡い木の色（ヒーローの絵を飾る枠） */
  --color-error: #b03a2e;       /* 入力の間違いを知らせる色 */

  /* 互換のために残す名前（古いHTMLが参照していても崩れないように） */
  --color-accent: var(--color-rose-deep);
  --color-accent-ink: var(--color-rose-ink);
  --color-sage: var(--color-bg-deep);
  --color-sage-soft: var(--color-bg-deep);
  --color-line: var(--color-line-soft);

  /* タイポ: 丸みのある書体でそろえる */
  --font-display: "Kaisei Decol", "Hiragino Mincho ProN", "Yu Mincho", "Noto Sans JP", serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-label: "Kaisei Decol", "Hiragino Mincho ProN", "Yu Mincho", "Noto Sans JP", serif;

  /* 型 */
  --space: 8px;
  --section-pad: clamp(56px, 9vw, 112px);
  --container: 1120px;
  --container-narrow: 720px;
  --radius: 14px;
  --radius-lg: 26px;
  --radius-btn: 10px;                 /* ボタン＝縫い目つきの角丸の四角 */
  --radius-tag: 3px 10px 10px 3px;    /* 値札（左が留め口・右が角丸） */

  --z-header: 100;
  --z-nav: 200;
  --z-sticky: 300;
  --z-modal: 1000;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.8s;

  /* 飾り＝服にまつわる3つの形（インラインSVG。外部の読み込みはGoogle Fontsだけ、を守る）
     ①ハンガー ②値札（タグ） ③服のボタン。線の色は下のトークンと同じ値を使っている */
  --deco-hanger: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3.4a2.1 2.1 0 0 0-2.1 2.1c0 1 .7 1.8 1.6 2.05v1.35" fill="none" stroke="%23cdd8b2" stroke-width="1.5" stroke-linecap="round"/><path d="M11.5 8.9 3.5 15.1c-.9.7-.4 2.1.7 2.1h15.6c1.1 0 1.6-1.4.7-2.1l-8-6.2a1 1 0 0 0-1 0z" fill="none" stroke="%23cdd8b2" stroke-width="1.5" stroke-linejoin="round"/></svg>');
  --deco-tag: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.6 2.8H20A1.2 1.2 0 0 1 21.2 4v7.4a1.6 1.6 0 0 1-.47 1.13l-8.2 8.2a1.6 1.6 0 0 1-2.26 0l-6.53-6.53a1.6 1.6 0 0 1 0-2.26l8.2-8.2A1.6 1.6 0 0 1 12.6 2.8z" fill="none" stroke="%23efb9b5" stroke-width="1.6" stroke-linejoin="round"/><circle cx="17.1" cy="6.9" r="1.7" fill="none" stroke="%23efb9b5" stroke-width="1.4"/></svg>');
  --deco-button: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.8" fill="%23fffdf7" stroke="%23efb9b5" stroke-width="1.6"/><circle cx="9.3" cy="9.3" r="1.25" fill="%23efb9b5"/><circle cx="14.7" cy="9.3" r="1.25" fill="%23efb9b5"/><circle cx="9.3" cy="14.7" r="1.25" fill="%23efb9b5"/><circle cx="14.7" cy="14.7" r="1.25" fill="%23efb9b5"/></svg>');
}

/* ---------- 2. リセット/ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 108px; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.9;
  font-size: 16px;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  line-break: strict;
  /* 横スクロールを出さない（飾りが画面の外へ出たとき用の保険） */
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
  /* 日本語の見出しを、語の途中で折らない（対応ブラウザのみ効く上乗せ） */
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 小さな見出しラベル（値札のかたち。左に紐を通す穴。このサイトのシグネチャー） */
.label {
  position: relative;
  display: inline-block;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: var(--color-rose-text);
  background: var(--color-rose-soft);
  border-radius: var(--radius-tag);
  padding: 3px 14px 3px 24px;
}
.label::before {
  content: "";
  position: absolute; left: 9px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px;
  border: 1.5px solid currentColor; border-radius: 50%;
  opacity: 0.7;
}
.label--ink { color: var(--color-text); background: var(--color-surface); }
.label--paper { color: var(--color-rose-deep); background: var(--color-rose-ink); }

/* 蛍光ペンのような下線（見出しの中の1語に付ける） */
.marker {
  background: linear-gradient(transparent 72%, var(--color-rose-soft) 72%, var(--color-rose-soft) 96%, transparent 96%);
  padding-inline: 2px;
}

/* ---------- 3. レイアウト ---------- */
.container { width: min(var(--container), 100% - 32px); margin-inline: auto; }
.container--narrow { width: min(var(--container-narrow), 100% - 32px); margin-inline: auto; }

.section { padding-block: var(--section-pad); position: relative; }
.section--tight { padding-block: calc(var(--section-pad) * 0.62); }
.section--sage { background: var(--color-bg-deep); }
.section--cream { background: var(--color-cream); }

/* セクションの角にひかえめな飾りを置く（ハンガーと値札・読み上げの対象外） */
.section--sage::before,
.section--cream::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: var(--deco-hanger), var(--deco-tag);
  background-repeat: no-repeat, no-repeat;
  background-position: right 26px top 28px, left 20px bottom 24px;
  background-size: 38px 38px, 28px 28px;
  opacity: 0.85;
}
.section--sage > *, .section--cream > * { position: relative; }

/* セクション見出し */
.section-head { margin-bottom: calc(var(--space) * 5); }
.section-head__rule { display: flex; align-items: center; gap: 12px; }
.section-head__title {
  font-size: clamp(24px, 3.4vw, 36px);
  margin-top: calc(var(--space) * 2);
}
.section-head__lead {
  margin-top: calc(var(--space) * 2);
  max-width: 40em;
  color: var(--color-muted);
  font-size: 15px;
}

/* ---------- 4. コンポーネント ---------- */

/* ヘッダー＝お店の看板。屋号を中央の1段目に、メニューは2段目のラックに掛ける */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px clamp(16px, 4vw, 40px);
  /* SPではぼかしを使わない。backdrop-filterを掛けると、中の position:fixed
     （スマホの全画面メニュー）がヘッダーの枠に閉じ込められて壊れるため */
  background: var(--color-bg);
  border-bottom: 2px dashed var(--color-rose-line);   /* 縫い目 */
  transition: box-shadow 0.4s;
}
/* 1段目＝看板。屋号を中央に置き、ハンバーガーは右端に浮かせる */
.site-header__sign {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 36px;
}
/* 2段目＝ラック。メニューと申込みを中央にそろえて掛ける */
.site-header__rack {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 2.4vw, 26px);
}
@media (min-width: 768px) {
  .site-header {
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: blur(6px);
  }
}
.site-header.is-scrolled { box-shadow: 0 2px 10px rgba(122, 108, 74, 0.13); }
.site-header__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.4vw, 20px);
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-text);
}
/* 屋号の左右に、短い縫い目を1本ずつ */
.site-header__logo::before,
.site-header__logo::after {
  content: "";
  display: inline-block; width: 18px; height: 0;
  border-top: 2px dotted var(--color-rose-line);
  vertical-align: 0.34em;
  margin: 0 10px;
}

.global-nav ul { display: flex; gap: clamp(14px, 2.4vw, 26px); list-style: none; padding: 0; }
.global-nav a {
  text-decoration: none; font-size: 14px; letter-spacing: 0.04em;
  padding-bottom: 2px; border-bottom: 2px dotted transparent;
  transition: border-color 0.3s, color 0.3s;
}
.global-nav a:hover { border-bottom-color: var(--color-rose-line); color: var(--color-rose-text); }
.global-nav a[aria-current="page"] { color: var(--color-rose-text); border-bottom-color: var(--color-rose-line); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  /* 屋号を中央に置いたまま、右端に浮かせる */
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  z-index: calc(var(--z-nav) + 1);
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; margin: 5px auto; border-radius: 2px;
  background: var(--color-text); transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-header__cta { display: none; }

@media (min-width: 768px) {
  .site-header__cta {
    position: relative;
    display: inline-block;
    padding: 8px 22px; font-size: 14px; letter-spacing: 0.04em;
    font-family: var(--font-display); font-weight: 700;
    background: var(--color-rose); color: var(--color-rose-ink);
    border: none; border-radius: var(--radius-btn);
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--color-rose) 62%, #8a4a4a);
    transition: transform 0.25s, box-shadow 0.25s;
  }
  .site-header__cta::after {
    content: "";
    position: absolute; inset: 4px;
    border: 1.5px dashed color-mix(in srgb, var(--color-rose-ink) 82%, transparent);
    border-radius: 6px; pointer-events: none;
  }
  .site-header__cta:hover { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-rose) 62%, #8a4a4a); }
}

@media (max-width: 767px) {
  .nav-toggle { display: block; }
  /* スマホでは2段目が空になるので、すき間を作らない */
  .site-header { gap: 0; }
  .site-header__rack { display: contents; }
  /* メニューを開いても屋号は見えたままにする */
  .site-header__logo { position: relative; z-index: calc(var(--z-nav) + 1); }
  .global-nav {
    position: fixed; inset: 0; z-index: var(--z-nav);
    background: var(--color-bg);
    display: grid; place-content: center;
    opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s;
  }
  .global-nav.is-open { opacity: 1; visibility: visible; }
  .global-nav ul { flex-direction: column; text-align: center; gap: calc(var(--space) * 4); }
  .global-nav a { font-size: 19px; }
}

/* ボタン（角の丸い四角＋内側に縫い目の点線＝服に付ける当て布のイメージ）
   指で押しやすいよう、高さは52px以上にしている */
.button {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  padding: 14px 34px;
  background: var(--color-rose); color: var(--color-rose-ink);
  border: none; border-radius: var(--radius-btn);
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: 0.04em; text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--color-rose) 60%, #8a4a4a);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background 0.25s;
}
.button::after {
  content: "";
  position: absolute; inset: 5px;
  border: 1.5px dashed color-mix(in srgb, var(--color-rose-ink) 82%, transparent);
  border-radius: 6px;
  pointer-events: none;
}
.button:hover { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-rose) 60%, #8a4a4a); }
.button__mark { font-size: 13px; font-weight: 700; letter-spacing: 0; }

.button--ghost {
  background: var(--color-surface); color: var(--color-rose-text);
  box-shadow: 0 4px 0 var(--color-rose-line);
}
.button--ghost::after { border-color: var(--color-rose-line); }
.button--ghost:hover { box-shadow: 0 1px 0 var(--color-rose-line); }

.button--paper {
  background: var(--color-rose-ink); color: var(--color-rose-deep);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--color-rose-deep) 55%, #ffffff);
}
.button--paper::after { border-color: color-mix(in srgb, var(--color-rose-deep) 55%, transparent); }
.button--paper:hover { box-shadow: 0 1px 0 color-mix(in srgb, var(--color-rose-deep) 55%, #ffffff); }

.note { font-size: 13px; color: var(--color-muted); line-height: 1.8; }
/* 途中で折りたくない語（ブランド名など）に付ける */
.nw { white-space: nowrap; }

/* ヒーロー: お店の一室。背景の写真の上に、額に入った絵（左）と文（右）を置く
   ・背景は <picture> で出し分け（広い画面＝横長／狭い画面＝縦長）
   ・服の値札カードは 2026-09-19 に取りやめ（ごちゃついて見えたため）
   ・広い画面＝絵が左・文が右／狭い画面＝上に文・下に絵 */
.hero {
  position: relative; isolation: isolate;
  padding: clamp(116px, 12vw, 138px) 0 clamp(28px, 4vw, 44px);
  overflow: hidden;
  background: var(--color-bg);   /* 背景の画像が届くまでの地の色 */
}
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* 縦に長く使うので横が切れる。カーテン・葉かげ・ラグの側を残す */
  object-position: 68% center;
}
@media (min-width: 768px) { .hero__bg img { object-position: center; } }
.hero__inner { display: grid; gap: clamp(20px, 3vw, 32px); }

/* 文（狭い画面では中央そろえ。広い画面では右の列で左そろえにする） */
.hero__copy {
  text-align: center;
  max-width: 34em; margin-inline: auto;
  /* 背景が淡いので基本そのまま読めるが、念のため文字の後ろにごく薄い白のぼかし */
  text-shadow: 0 1px 10px rgba(255, 253, 247, 0.9), 0 0 24px rgba(255, 253, 247, 0.7);
}
.hero__title {
  font-size: clamp(27px, 4.6vw, 46px);
  line-height: 1.42;
  margin-top: calc(var(--space) * 2);
}
.hero__lead {
  margin-top: calc(var(--space) * 2);
  max-width: 30em; margin-inline: auto;
  font-size: clamp(15px, 1.7vw, 17px);
}
.hero__actions {
  margin-top: calc(var(--space) * 3);
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: center;
}
.hero__note { margin-top: calc(var(--space) * 2); }

/* 額に入れて飾った絵（枠＋内側の余白＝マット＋やわらかい影）
   光は右上から差しているので、影は左下へ落とす */
.hero__art {
  position: relative;
  margin: 0 auto;
  width: min(240px, 62vw);
  padding: 10px;
  background: var(--color-surface);
  border: 9px solid var(--color-frame);
  border-radius: 5px;
  box-shadow:
    0 0 0 1px rgba(122, 108, 74, 0.10),
    -12px 18px 34px rgba(122, 108, 74, 0.24);
  transform: rotate(-1.2deg);
}
.hero__art img { width: 100%; border-radius: 2px; background: var(--color-bg-deep); }
.hero__caption {
  position: absolute; right: -10px; bottom: -14px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(122, 108, 74, 0.16);
  transform: rotate(1.6deg);
}

@media (min-width: 768px) {
  .hero__art { width: min(300px, 44vw); }
}

/* 広い画面＝左に額の絵・右に文。額を主役にして大きく見せる */
@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 4.5vw, 68px);
  }
  .hero__art { grid-column: 1; grid-row: 1; width: min(430px, 34vw); margin: 0; }
  .hero__copy {
    grid-column: 2; grid-row: 1;
    text-align: left; margin-inline: 0; max-width: none;
  }
  .hero__lead { margin-inline: 0; }
  .hero__actions { justify-content: flex-start; }
}

/* ビフォーアフター（桜色の帯） */
.ba { background: var(--color-rose-soft); padding-block: clamp(44px, 7vw, 80px); position: relative; }
.ba::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--deco-button), var(--deco-tag);
  background-repeat: no-repeat, no-repeat;
  background-position: left 18px top 24px, right 20px bottom 22px;
  background-size: 24px 24px, 30px 30px;
  opacity: 0.8;
}
.ba > * { position: relative; }
.ba__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ba__title { font-size: clamp(19px, 2.5vw, 28px); }
.ba__pair {
  margin-top: clamp(22px, 4vw, 36px);
  display: grid; gap: clamp(14px, 3vw, 32px);
  grid-template-columns: auto auto;
  align-items: end; justify-content: center;
}
.ba__item { display: grid; gap: 10px; justify-items: center; }
.ba__item img {
  width: auto; max-width: 100%;
  height: clamp(190px, 33vw, 400px);
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 4px solid var(--color-surface);
  box-shadow: 0 8px 20px rgba(122, 108, 74, 0.12);
}
.ba__tag {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.08em; color: var(--color-rose-text);
  background: var(--color-surface);
  border: 1.5px dashed var(--color-rose-line);   /* 縫い目 */
  border-radius: 8px;
  padding: 4px 18px; text-align: center;
}
.ba__note { margin-top: clamp(18px, 3vw, 26px); font-size: 14px; text-align: center; }

/* LOOKカード（白の丸カード） */
.looks { display: grid; gap: clamp(16px, 2.4vw, 26px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .looks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .looks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.look {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 14px 14px 18px;
  box-shadow: 0 6px 18px rgba(122, 108, 74, 0.09);
}
.look__figure {
  margin-top: 8px; background: var(--color-bg);
  border-radius: var(--radius); overflow: hidden;
}
.look__figure img {
  width: 100%; max-width: 256px; margin-inline: auto;
  transition: transform 0.6s var(--ease-out);
}
@media (hover: hover) { .look:hover .look__figure img { transform: scale(1.05); } }
.look__name {
  margin-top: 12px; font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: 0.02em;
  /* 服の名前は短いので、狭い列でも普通に折り返させる */
  word-break: normal;
}
.look__desc { margin-top: 4px; font-size: 13px; line-height: 1.75; color: var(--color-muted); }

/* カタログ: 6方向シートの開閉 */
.look__detail { margin-top: 12px; border-top: 1.5px dotted var(--color-rose-line); }
.look__detail > summary {
  list-style: none; cursor: pointer;
  font-size: 13px; letter-spacing: 0.02em; font-family: var(--font-display); font-weight: 700;
  color: var(--color-rose-text); padding: 10px 0;
}
.look__detail > summary::-webkit-details-marker { display: none; }
.look__detail > summary::after { content: " ＋"; }
.look__detail[open] > summary::after { content: " －"; }
.look__sheet { padding-bottom: 12px; }
.look__sheet img { width: 100%; border-radius: var(--radius); background: var(--color-bg); }

/* 見本を開いたカードは行いっぱいに広がり、6方向のシートを大きく見せる
   （:has() に未対応のブラウザでは、カードの幅のまま開くだけ＝壊れない） */
.look:has(.look__detail[open]) { grid-column: 1 / -1; }
.look:has(.look__detail[open]) .look__figure { max-width: 256px; margin-inline: auto; }
.look:has(.look__detail[open]) .look__sheet img { max-width: 960px; margin-inline: auto; }
.look__sheet figcaption { margin-top: 6px; font-size: 12px; color: var(--color-muted); text-align: center; }

/* 流れ（4ステップ・丸い番号） */
.steps { display: grid; gap: 14px; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.step {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 22px 20px 24px;
  box-shadow: 0 6px 18px rgba(122, 108, 74, 0.08);
}
.step__no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--color-rose-soft); color: var(--color-rose-text);
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: 0; line-height: 1;
  border: 2px dotted var(--color-rose-line);
}
.step__title { margin-top: 12px; font-size: 17px; }
.step__text { margin-top: 6px; font-size: 14px; color: var(--color-muted); line-height: 1.85; }

/* 画風見本 */
.styles { display: grid; gap: clamp(18px, 3vw, 28px); }
@media (min-width: 768px) { .styles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.style-card {
  background: var(--color-surface);
  border: 2px dashed var(--color-rose-line);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 3vw, 26px);
}
.style-card__name {
  font-size: clamp(20px, 2.6vw, 25px);
  display: inline-block;
}
.style-card__desc { margin-top: 8px; font-size: 14px; color: var(--color-muted); line-height: 1.85; }
.style-card__pair {
  margin-top: 16px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.style-shot { margin: 0; }
.style-shot img {
  width: 100%; border-radius: var(--radius);
  background: var(--color-bg-deep);
}
.style-shot figcaption {
  margin-top: 6px; font-size: 12px; color: var(--color-muted); text-align: center;
}
.styles__note { margin-top: clamp(16px, 3vw, 24px); text-align: center; }

/* 料金 */
.price { display: grid; gap: 18px; }
@media (min-width: 768px) { .price { grid-template-columns: 1fr 1fr; gap: 26px; } }
.price__card {
  background: var(--color-surface);
  border: 2px dashed var(--color-rose-line); border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 30px);
}
.price__card--free { border-style: solid; border-color: var(--color-rose); }
.price__name { margin-top: 10px; font-size: 20px; }
.price__value {
  margin-top: 4px; font-family: var(--font-display); font-weight: 700;
  font-size: 34px; color: var(--color-rose-deep); letter-spacing: 0.02em;
}
.price__text { margin-top: 12px; font-size: 14px; color: var(--color-muted); line-height: 1.85; }
.price__list { margin-top: 12px; padding-left: 0; list-style: none; font-size: 14px; color: var(--color-muted); }
.price__list li { margin-top: 6px; padding-left: 1.5em; position: relative; }
.price__list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 13px; height: 13px;
  background: var(--deco-button) center / contain no-repeat;
}
.price__rows { margin-top: 14px; }
.price__row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 14px;
  padding: 12px 0;
  border-bottom: 1.5px dotted var(--color-rose-line);
}
.price__row:first-child { border-top: 1.5px dotted var(--color-rose-line); }
.price__row dt { font-size: 14px; }
.price__row dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--color-rose-deep); }
.price__amount { font-size: 25px; letter-spacing: 0.02em; }
.price__soon {
  font-size: 13px !important; color: var(--color-muted) !important;
  background: var(--color-bg-deep); border-radius: 8px; padding: 3px 14px;
}
.price__pending {
  margin-top: 16px; display: inline-block;
  background: var(--color-bg-deep); color: var(--color-text);
  font-size: 13px; padding: 6px 14px; border-radius: 8px;
}

/* FAQ */
.faq { display: grid; gap: 12px; }
.faq__item {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 4px 20px;
  box-shadow: 0 4px 14px rgba(122, 108, 74, 0.07);
}
.faq__item > summary {
  list-style: none; cursor: pointer;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 0;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.7;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::before {
  content: "Q";
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-rose-soft); color: var(--color-rose-text);
  font-size: 13px; font-weight: 700; margin-top: 2px;
}
.faq__item > summary::after {
  content: "＋"; margin-left: auto; color: var(--color-rose-text); font-size: 15px;
}
.faq__item[open] > summary::after { content: "－"; }
.faq__answer {
  padding: 0 0 18px 38px; font-size: 15px; color: var(--color-muted);
  border-top: 1.5px dotted var(--color-rose-line); padding-top: 14px;
}
.faq__answer a { color: var(--color-rose-text); }

/* CTAバンド（赤みのピンクの帯） */
.cta-band {
  background: var(--color-rose-deep); color: var(--color-rose-ink);
  padding-block: clamp(40px, 6vw, 68px);
  position: relative;
}
.cta-band__title { margin-top: 12px; font-size: clamp(20px, 2.9vw, 30px); }
.cta-band__text { margin-top: 12px; font-size: 15px; max-width: 34em; }
.cta-band__actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cta-band__note { margin-top: 16px; font-size: 13px; color: color-mix(in srgb, var(--color-rose-ink) 82%, transparent); }

/* 最終CTA */
.p-home #faq { padding-bottom: calc(var(--section-pad) * 0.4); }
.final-cta { text-align: center; }
.final-cta__title { font-size: clamp(21px, 3.2vw, 33px); margin-top: 14px; }
.final-cta__text { margin-top: 14px; font-size: 15px; color: var(--color-muted); }
.final-cta__actions { margin-top: 26px; }
.final-cta__note { margin-top: 16px; }

/* 下層ページのヘッダー */
.page-header { padding: clamp(110px, 13vw, 148px) 0 clamp(20px, 3vw, 34px); }
.page-header__title { font-size: clamp(26px, 4vw, 42px); margin-top: 12px; }
.page-header__lead { margin-top: 16px; max-width: 42em; color: var(--color-muted); font-size: 15px; }

.breadcrumb { padding-block: 8px; font-size: 12px; color: var(--color-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.6em; list-style: none; padding: 0; }
.breadcrumb li:not(:last-child)::after { content: "›"; margin-left: 0.6em; }
.breadcrumb a { text-decoration: none; }

/* 本文（プライバシーポリシー） */
.prose {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 4vw, 44px);
  box-shadow: 0 6px 18px rgba(122, 108, 74, 0.08);
}
.prose h2 {
  font-size: 19px; margin-top: calc(var(--space) * 5);
  border-top: 1.5px dotted var(--color-rose-line); padding-top: 16px;
}
.prose h2:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.prose h2 .label { display: inline-block; margin-right: 10px; vertical-align: 2px; }
.prose p, .prose ul { margin-top: 12px; font-size: 15px; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-top: 6px; }
.prose a { color: var(--color-rose-text); }
.prose__meta { margin-top: calc(var(--space) * 5); font-size: 13px; color: var(--color-muted); }

/* フッター */
.site-footer {
  margin-top: 0;
  padding: calc(var(--space) * 6) 0 calc(var(--space) * 14);
  background: var(--color-bg-deep);
  font-size: 14px;
}
@media (min-width: 768px) { .site-footer { padding-bottom: calc(var(--space) * 6); } }
.site-footer__grid { display: grid; gap: 22px; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1fr auto; align-items: start; } }
.site-footer__brand { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.site-footer__text { margin-top: 8px; font-size: 13px; color: var(--color-muted); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; }
.site-footer__links a { text-decoration: none; border-bottom: 1.5px dotted var(--color-rose-line); }
.site-footer__links a:hover { color: var(--color-rose-text); }
.site-footer__copy { margin-top: 26px; font-size: 12px; color: var(--color-muted); }

/* SP: 下部固定の申込みボタン */
.sp-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(6px);
  border-top: 1.5px dotted var(--color-rose-line);
}
.sp-cta .button { width: 100%; justify-content: center; padding-block: 14px; }
@media (min-width: 768px) { .sp-cta { display: none; } }

/* お申し込みフォーム(apply.html) */
.apply-form[hidden] { display: none; }

.field {
  border: 0;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3.5vw, 30px);
  box-shadow: 0 6px 18px rgba(122, 108, 74, 0.08);
  margin: 0 0 clamp(20px, 3.5vw, 30px);
}
.field__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.field__title {
  font-size: clamp(18px, 2.2vw, 22px);
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 0;
}
.field__req {
  font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--color-rose-ink); background: var(--color-rose);
  border-radius: var(--radius-tag); padding: 3px 11px; line-height: 1.5;
}
.field__desc { margin-top: 12px; font-size: 14px; color: var(--color-muted); line-height: 1.85; }
.field__desc a { color: var(--color-rose-text); }

.field__input {
  display: block; width: 100%; margin-top: 16px;
  font-family: var(--font-body); font-size: 16px; color: var(--color-text);
  background: var(--color-bg);
  border: 2px solid transparent; border-radius: var(--radius);
  padding: 14px 16px;
}
.field__input:focus { border-color: var(--color-rose); outline: none; }
.field__input[aria-invalid="true"] { border-color: var(--color-error); }

/* ファイル選択（標準のボタンは隠して、日本語のボタンを出す） */
.field__file {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  margin-top: 16px; padding: 14px 16px;
  background: var(--color-bg);
  border: 2px dashed var(--color-rose-line); border-radius: var(--radius);
}
.field__file:has(.field__file-input[aria-invalid="true"]) { border-color: var(--color-error); }
.field__file-input {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.field__file-button {
  position: relative;
  display: inline-block; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.04em;
  padding: 11px 26px;
  color: var(--color-rose-ink); background: var(--color-rose);
  border-radius: var(--radius-btn); min-height: 48px;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--color-rose) 60%, #8a4a4a);
  transition: transform 0.25s, box-shadow 0.25s;
}
@media (hover: hover) {
  .field__file-button:hover { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-rose) 60%, #8a4a4a); }
}
.field__file-input:focus-visible + .field__file-button { outline: 2px solid var(--color-rose-deep); outline-offset: 3px; }
.field__file-state { font-size: 14px; color: var(--color-muted); }

.field__preview[hidden] { display: none; } /* 写真を選ぶまでは出さない */
.field__preview {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px; padding: 12px;
  background: var(--color-bg); border-radius: var(--radius);
}
.field__preview-slot { flex: 0 0 auto; }
.field__preview-slot img {
  width: 120px; height: 120px; object-fit: cover;
  border-radius: var(--radius); background: var(--color-bg-deep);
}
.field__preview-text { font-size: 13px; color: var(--color-muted); }

.field__error:empty { display: none; }
.field__error {
  margin-top: 10px; font-size: 14px; line-height: 1.8;
  color: var(--color-error);
}

.field__counter {
  margin-top: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--color-error);
}
.field__counter.is-done { color: var(--color-rose-text); }

/* 画風の選択（2つから1つ） */
.style-pick {
  list-style: none; padding: 0; margin-top: 18px;
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.style-pick__item { position: relative; }
.style-pick__input { position: absolute; inset: 0 auto auto 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.style-pick__label {
  display: block; cursor: pointer; height: 100%;
  border: 2px dashed var(--color-rose-line); border-radius: var(--radius);
  background: var(--color-bg); padding: 10px;
  transition: border-color 0.2s, background 0.2s;
}
.style-pick__label img { width: 100%; border-radius: var(--radius); background: var(--color-bg-deep); }
.style-pick__label::before {
  content: "選ぶ";
  display: block; margin-bottom: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.06em;
  text-align: center; color: var(--color-muted);
}
.style-pick__name {
  display: block; margin-top: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; text-align: center;
}
.style-pick__desc { display: block; margin-top: 2px; font-size: 12px; line-height: 1.6; color: var(--color-muted); text-align: center; }
.style-pick__item.is-picked .style-pick__label {
  border-style: solid; border-color: var(--color-rose); background: var(--color-rose-soft);
}
.style-pick__item.is-picked .style-pick__label::before { content: "✓ 選択中"; color: var(--color-rose-text); }
.style-pick__input:focus-visible + .style-pick__label { outline: 2px solid var(--color-rose-deep); outline-offset: 3px; }
@media (hover: hover) {
  .style-pick__label:hover { border-color: var(--color-rose); }
}

/* コーデの選択カード */
.pick {
  list-style: none; padding: 0; margin-top: 18px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 560px) { .pick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .pick { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.pick__item { position: relative; }
.pick__input { position: absolute; inset: 0 auto auto 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pick__label {
  display: block; cursor: pointer; height: 100%;
  border: 2px dashed var(--color-rose-line); border-radius: var(--radius);
  background: var(--color-bg); padding: 8px;
  transition: border-color 0.2s, background 0.2s;
}
.pick__label img { width: 100%; height: auto; border-radius: var(--radius); }
.pick__name {
  display: block; margin-top: 8px;
  font-size: 12px; line-height: 1.5; text-align: center;
}
.pick__label::before {
  content: "選ぶ";
  display: block; margin-bottom: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.06em;
  text-align: center; color: var(--color-muted);
}
.pick__item.is-picked .pick__label {
  border-style: solid; border-color: var(--color-rose); background: var(--color-rose-soft);
}
.pick__item.is-picked .pick__label::before { content: "✓ 選択中"; color: var(--color-rose-text); }
.pick__item.is-locked .pick__label { opacity: 0.42; cursor: not-allowed; }
.pick__input:focus-visible + .pick__label { outline: 2px solid var(--color-rose-deep); outline-offset: 3px; }
@media (hover: hover) {
  .pick__item:not(.is-locked) .pick__label:hover { border-color: var(--color-rose); }
}

/* ロボットよけ(人には見せない) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 注意書き */
.apply-note {
  border: 2px dashed var(--color-rose-line); border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: clamp(20px, 4vw, 28px);
}
.apply-note__title { font-size: 17px; }
.apply-note__list { margin-top: 12px; padding-left: 0; list-style: none; font-size: 14px; color: var(--color-muted); }
.apply-note__list li { margin-top: 10px; line-height: 1.85; padding-left: 1.6em; position: relative; }
.apply-note__list li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 14px; height: 14px;
  background: var(--deco-tag) center / contain no-repeat;
}
.apply-note__privacy { margin-top: 16px; font-size: 14px; line-height: 1.85; }
.apply-note__privacy a { color: var(--color-rose-text); }

/* 送信ボタンまわり */
.apply-submit { margin-top: clamp(26px, 4vw, 38px); text-align: center; }
.apply-submit .button:disabled { opacity: 0.42; cursor: not-allowed; }
.apply-submit .button:disabled:hover { transform: none; box-shadow: 0 4px 0 color-mix(in srgb, var(--color-rose) 60%, #8a4a4a); }
.apply-submit__status:empty { display: none; }
.apply-submit__status {
  margin-top: 16px; font-size: 14px; line-height: 1.8; color: var(--color-muted);
  white-space: pre-line;
}
.apply-submit__status:not(.is-error):not(:empty)::first-line { font-weight: 700; color: var(--color-text); }
.apply-submit .button.is-sending .button__mark { animation: apply-blink 1s steps(2, start) infinite; }
@keyframes apply-blink { to { visibility: hidden; } }
.apply-submit__status.is-error { color: var(--color-error); }

/* 送信後のメッセージ */
.apply-thanks {
  text-align: center; padding: clamp(28px, 5vw, 44px) clamp(20px, 4vw, 36px);
  background: var(--color-surface);
  border: 2px dashed var(--color-rose-line);
  border-radius: var(--radius-lg);
}
.apply-thanks:focus { outline: none; }
.apply-thanks__title { margin-top: 12px; font-size: clamp(21px, 3.2vw, 31px); }
.apply-thanks__text { margin-top: 16px; font-size: 15px; line-height: 1.95; }
.apply-thanks__contact {
  list-style: none; padding: 0; margin-top: 20px;
  font-size: 14px; color: var(--color-muted);
}
.apply-thanks__contact li { margin-top: 6px; }
.apply-thanks__contact a { color: var(--color-rose-text); }
.apply-thanks__actions { margin-top: 26px; }

/* ---------- 5. モーション基盤 ---------- */
.js-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
.js-reveal.is-inview { opacity: 1; transform: none; }
.js-reveal[data-delay="1"] { transition-delay: 0.08s; }
.js-reveal[data-delay="2"] { transition-delay: 0.16s; }
.js-reveal[data-delay="3"] { transition-delay: 0.24s; }

/* ---------- 6. モーション停止(SKILL.mdのポリシー実装。削除禁止) ---------- */
.motion-stop {
  display: none;
  position: fixed; right: 16px; bottom: 76px; z-index: var(--z-modal);
  padding: 10px 18px; font-size: 12px; font-family: var(--font-display); font-weight: 700;
  color: var(--color-text);
  background: var(--color-surface); border: 2px dotted var(--color-rose-line);
  border-radius: var(--radius-btn); cursor: pointer;
}
@media (min-width: 768px) { .motion-stop { bottom: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .motion-stop { display: block; }
}
html.is-motion-off .js-reveal,
html.is-motion-off *[class] {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
}
html.is-motion-off .js-reveal { opacity: 1; transform: none; }