@charset "utf-8";

/* =========================================================
   ukara | Beauty & Relaxation Salon
   全ページ共通スタイル
   ---------------------------------------------------------
   ・配色は「白＋アイボリー＋くすみラベンダー＋金」。
     濃い紫の面は、トップの「名前の由来」1か所だけ（.sec--plum）。
   ・写真は assets/ にまとめている。差し替えるときは同じファイル名で上書きする。
   ========================================================= */

:root{
  --ivory:      #FAF5F1;
  --ivory-2:    #F4EBE6;
  --ivory-3:    #EFE4E4;
  --lav-pale:   #F2ECF3;
  --lav-light:  #E7DEEC;
  --lav:        #CFC2DB;
  --lav-deep:   #9C8AAF;
  --plum:       #5C4458;
  --plum-dark:  #43324B;
  --plum-soft:  #7A6579;
  --gold:       #C2A36B;
  --gold-light: #E0CDA6;
  --text:       #4E434A;
  --muted:      #8B7E86;
  --white:      #FFFCFA;
  --line:       rgba(194,163,107,.30);

  --ja: "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "MS PMincho", serif;
  --en: "Cormorant Garamond", "Times New Roman", "Yu Mincho", serif;

  --wrap: 1120px;
  --header-h: 84px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); }

body{
  margin:0; padding-top:var(--header-h);
  font-family:var(--ja); font-weight:300; font-size:16px;
  color:var(--text); background:var(--white);
  line-height:2.05; letter-spacing:.06em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.nav-open{ overflow:hidden; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; transition:opacity .3s, color .3s, background .3s; }
h1,h2,h3,h4,p,dl,dd,figure{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

.wrap{ width:min(90%, var(--wrap)); margin-inline:auto; }
.wrap--narrow{ width:min(90%, 780px); }
.sp-only{ display:none; }
.pc-only{ display:inline; }

/* ---------- 飾り罫 ---------- */
.ornament{ display:flex; align-items:center; justify-content:center; gap:14px; margin:20px 0; }
.ornament i{ display:block; width:56px; height:1px; background:linear-gradient(90deg, transparent, var(--gold-light), transparent); }
.ornament b{ font-size:8px; color:var(--gold); letter-spacing:.4em; line-height:1; }
.ornament--left{ justify-content:flex-start; margin:16px 0 26px; }

/* ---------- スクロールで浮かび上がる ---------- */
.fade{ opacity:0; transform:translateY(24px); transition:opacity 1s cubic-bezier(.2,.7,.3,1), transform 1s cubic-bezier(.2,.7,.3,1); }
.fade.is-in{ opacity:1; transform:none; }
.fade-d1{ transition-delay:.1s } .fade-d2{ transition-delay:.2s } .fade-d3{ transition-delay:.3s }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .fade{ opacity:1; transform:none; transition:none; }
}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-width:230px; padding:17px 34px;
  font-size:14px; letter-spacing:.18em;
  border:1px solid var(--plum); border-radius:999px; cursor:pointer;
}
.btn--fill{ background:var(--plum); color:var(--ivory); }
.btn--fill:hover{ background:var(--plum-soft); border-color:var(--plum-soft); opacity:1; }
.btn--line{ color:var(--plum); background:transparent; }
.btn--line:hover{ background:rgba(92,68,88,.06); opacity:1; }
.btn--light{ background:var(--white); color:var(--plum); border-color:var(--white); }
.btn--light:hover{ background:var(--ivory-2); border-color:var(--ivory-2); opacity:1; }

/* 「もっと見る」テキストリンク */
.more{
  display:inline-flex; align-items:center; gap:12px;
  font-size:13.5px; letter-spacing:.16em; color:var(--plum);
  padding-bottom:6px; border-bottom:1px solid var(--gold-light);
}
.more::after{ content:"→"; font-size:12px; color:var(--gold); transition:transform .35s; }
.more:hover{ opacity:1; }
.more:hover::after{ transform:translateX(5px); }

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:0 clamp(18px, 3vw, 40px);
  background:rgba(255,252,250,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(194,163,107,.22);
}
.brand{ display:flex; flex-direction:column; line-height:1.05; }
.brand:hover{ opacity:.7; }
.brand__mark{ font-family:var(--en); font-size:33px; font-weight:400; color:var(--plum); letter-spacing:.08em; }
.brand__sub{ font-family:var(--en); font-size:9px; letter-spacing:.2em; color:var(--plum-soft); margin-top:3px; }

.gnav-wrap{ display:flex; align-items:center; gap:clamp(16px, 2.2vw, 32px); }
.gnav ul{ display:flex; align-items:center; gap:clamp(14px, 2vw, 30px); }
.gnav a{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px; }
.gnav a span{ font-size:13.5px; letter-spacing:.1em; color:var(--plum); }
.gnav a em{ font-style:normal; font-family:var(--en); font-size:9px; letter-spacing:.16em; color:var(--muted); }
.gnav a.is-current span{ color:var(--gold); }
.gnav a.is-current{ border-bottom:1px solid var(--gold); }

.header-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px; border-radius:999px;
  background:var(--plum); color:var(--ivory);
  font-size:13px; letter-spacing:.14em; white-space:nowrap;
}
.header-cta:hover{ background:var(--plum-soft); opacity:1; }

.header-social{ display:flex; align-items:center; gap:8px; }
.social-link{ display:inline-flex; align-items:center; justify-content:center; gap:8px; color:inherit; }
.social-link[aria-disabled="true"]{ cursor:default; opacity:.68; pointer-events:none; }
.social-link__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border:0; border-radius:0;
  object-fit:contain; line-height:1;
}
.social-link__icon--large{ width:36px; height:36px; }
.social-link--line{ color:#06C755; }
.social-link--instagram{ color:var(--plum-soft); }
.header-social .social-link__icon{ width:29px; height:29px; }
.footer-social{ display:flex; justify-content:center; gap:22px; margin:28px 0 4px; font-family:var(--en); font-size:13px; letter-spacing:.08em; }
.footer-social .social-link{ color:var(--ivory); }
.footer-social .social-link__icon{ width:31px; height:31px; }

.burger{ display:none; position:relative; z-index:110; width:44px; height:44px; padding:0; background:none; border:none; cursor:pointer; }
.burger span{ position:absolute; left:11px; width:22px; height:1px; background:var(--plum); transition:.4s; }
.burger span:nth-child(1){ top:16px } .burger span:nth-child(2){ top:22px } .burger span:nth-child(3){ top:28px }
body.nav-open .burger span:nth-child(1){ top:22px; transform:rotate(38deg) }
body.nav-open .burger span:nth-child(2){ opacity:0 }
body.nav-open .burger span:nth-child(3){ top:22px; transform:rotate(-38deg) }

/* =========================================================
   トップのヒーロー（写真全面＋白いカード）
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  height:clamp(460px, 74vh, 700px);
}
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.hero__veil{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(250,245,241,.55), rgba(250,245,241,.10) 62%); }
.hero__card{
  position:absolute; top:50%; left:clamp(20px, 6vw, 92px); transform:translateY(-50%);
  width:min(88%, 540px);
  padding:clamp(30px, 3.6vw, 52px) clamp(26px, 3.4vw, 50px);
  background:rgba(255,252,250,.90);
  backdrop-filter:blur(6px);
  box-shadow:0 24px 60px rgba(92,68,88,.10);
  border:1px solid rgba(194,163,107,.25);
}
.hero__catch{
  font-size:clamp(24px, 3.1vw, 38px); font-weight:300;
  line-height:1.85; letter-spacing:.13em; color:var(--plum);
}
.hero__sub{ margin-top:18px; font-size:13.5px; letter-spacing:.1em; color:var(--muted); line-height:2.1; }
.hero__wing{
  position:absolute; right:-2%; bottom:-6%; width:clamp(150px, 20vw, 280px);
  mix-blend-mode:multiply; opacity:.6; pointer-events:none;
}

/* ヒーロー直下の営業情報バー */
.infobar{
  background:var(--plum); color:var(--ivory);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px clamp(24px, 4vw, 60px);
  padding:18px clamp(18px, 4vw, 40px);
  font-size:13px; letter-spacing:.1em;
}
.infobar div{ display:flex; align-items:baseline; gap:12px; }
.infobar dt, .infobar b{ font-size:10.5px; letter-spacing:.22em; color:var(--gold-light); font-weight:400; }

/* =========================================================
   下層ページの見出し帯
   ========================================================= */
.page-head{
  position:relative; overflow:hidden;
  height:clamp(220px, 30vw, 320px);
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.page-head__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 48%; }
.page-head__veil{ position:absolute; inset:0; background:rgba(250,245,241,.66); }
.page-head__inner{ position:relative; z-index:2; }
.page-head__en{ font-family:var(--en); font-size:12.5px; letter-spacing:.34em; color:var(--gold); text-transform:uppercase; }
.page-head__ja{ margin-top:8px; font-size:clamp(23px, 2.9vw, 32px); font-weight:300; letter-spacing:.2em; color:var(--plum); }

/* パンくず */
.crumb{ padding:16px 0; font-size:11.5px; letter-spacing:.08em; color:var(--muted); }
.crumb a{ border-bottom:1px solid rgba(194,163,107,.4); }
.crumb span{ margin:0 8px; color:var(--gold); }

/* =========================================================
   セクションの土台
   ========================================================= */
.sec{ position:relative; padding:clamp(70px, 8vw, 118px) 0; }
.sec--pale{ background:linear-gradient(180deg, var(--ivory), var(--lav-pale)); }
.sec--ivory{ background:var(--ivory); }

/* ページ内で1か所だけ使う、濃い紫の面 */
.sec--plum{
  background:
    radial-gradient(74% 58% at 50% 0%, #6A5069, transparent 72%),
    linear-gradient(180deg, var(--plum), var(--plum-dark));
  color:rgba(250,245,241,.8);
  overflow:hidden;
}
.sec--plum .sechead__en{ color:var(--gold-light); }
.sec--plum .sechead__ja{ color:var(--ivory); }
.sec--plum .ornament i{ background:linear-gradient(90deg, transparent, var(--gold-light), transparent); }
.sec--plum .ornament b{ color:var(--gold-light); }
.sec--plum .more{ color:var(--ivory); border-color:rgba(224,205,166,.5); }
.sec--plum .more::after{ color:var(--gold-light); }
.sec--plum__wing{
  position:absolute; right:-6%; top:-14%; width:clamp(180px, 24vw, 340px);
  opacity:.14; mix-blend-mode:screen; pointer-events:none;
}

.sechead{ text-align:center; margin-bottom:clamp(40px, 5vw, 62px); }
.sechead__en{ font-family:var(--en); font-size:12.5px; letter-spacing:.34em; color:var(--gold); text-transform:uppercase; }
.sechead__ja{ margin-top:9px; font-size:clamp(21px, 2.7vw, 30px); font-weight:300; letter-spacing:.18em; color:var(--plum); line-height:1.7; }
.sechead__lead{ margin-top:6px; font-size:14px; color:var(--muted); line-height:2.2; }

.lead{ font-size:clamp(15px, 1.6vw, 17px); line-height:2.5; letter-spacing:.1em; }
.lead--center{ text-align:center; }

.sec-foot{ margin-top:clamp(40px, 5vw, 62px); text-align:center; }

/* =========================================================
   写真の見せ方
   ========================================================= */
/* 息継ぎの全幅写真 */
.full-photo{ position:relative; overflow:hidden; height:clamp(220px, 34vw, 460px); }
.full-photo img{ width:100%; height:100%; object-fit:cover; }

/* 文章と写真の2カラム */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px, 4.6vw, 68px); align-items:center; }
.duo--rev .duo__txt{ order:2; }
.duo__img{ position:relative; overflow:hidden; aspect-ratio:4/5; border:1px solid var(--line); }
.duo__img img{ width:100%; height:100%; object-fit:cover; }
.duo__img--wide{ aspect-ratio:4/3; }

/* 写真2枚ならび */
.photo-duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px, 2.2vw, 28px); }
.photo-duo figure{ overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line); }
.photo-duo img{ width:100%; height:100%; object-fit:cover; }

/* =========================================================
   カードの並び（メニュー抜粋・約束・名前の由来）
   ========================================================= */
.cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(18px, 2.4vw, 30px); }
.cards--4{ grid-template-columns:repeat(4, 1fr); }

.card{ background:var(--white); border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; }
.card__img{ overflow:hidden; aspect-ratio:4/3; }
.card__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.3,1); }
.card:hover .card__img img{ transform:scale(1.05); }
.card__body{ padding:24px clamp(18px, 2vw, 26px) 28px; flex:1; display:flex; flex-direction:column; }
.card__name{ font-size:16.5px; letter-spacing:.12em; color:var(--plum); }
.card__meta{ margin-top:8px; font-family:var(--en); font-size:15px; letter-spacing:.1em; color:var(--gold); }
.card__text{ margin-top:12px; font-size:13.5px; line-height:2.05; color:var(--muted); }

/* 番号つきの約束 */
.promise{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(18px, 2.4vw, 30px); }
.promise li{ background:var(--white); border:1px solid var(--line); padding:36px 28px 32px; text-align:center; }
.promise__no{ display:block; font-family:var(--en); font-size:22px; letter-spacing:.2em; color:var(--gold); }
.promise h3{ margin:14px 0; font-size:16.5px; font-weight:400; letter-spacing:.12em; color:var(--plum); }
.promise p{ font-size:13.5px; line-height:2.1; color:var(--muted); }

/* 名前の由来（濃い紫の面の中） */
.origin{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(18px, 2.4vw, 30px); }
.origin li{ border:1px solid rgba(224,205,166,.28); background:rgba(255,252,250,.05); padding:clamp(26px,3vw,38px) clamp(18px,2.2vw,30px) clamp(28px,3vw,36px); text-align:center; }
.origin__key{ font-family:var(--en); font-size:clamp(26px, 3vw, 36px); letter-spacing:.06em; line-height:1.2; }
.origin__key b{ font-weight:400; color:var(--ivory); }
.origin__key span{ font-weight:300; color:rgba(250,245,241,.3); }
.origin__ja{ margin-top:8px; font-size:12.5px; letter-spacing:.26em; color:var(--gold-light); }
.origin .ornament{ margin:14px 0 16px; }
.origin .ornament i{ width:34px; }
.origin__lead{ font-size:15px; letter-spacing:.1em; color:var(--ivory); line-height:1.9; margin-bottom:12px; }
.origin li p:last-child{ font-size:13.5px; line-height:2.05; color:rgba(250,245,241,.62); text-align:left; }

/* =========================================================
   メニュー表
   ========================================================= */
.menucard{ position:relative; background:var(--white); border:1px solid rgba(194,163,107,.4); padding:clamp(28px,4.5vw,58px) clamp(20px,4.5vw,60px) clamp(32px,4vw,48px); }
.menucard::before{ content:""; position:absolute; inset:9px; border:1px solid rgba(194,163,107,.2); pointer-events:none; }
.menucard__ttl{ position:relative; display:flex; align-items:center; gap:16px; font-family:var(--en); font-size:19px; font-weight:400; letter-spacing:.24em; color:var(--plum); margin:44px 0 6px; }
.menucard__ttl:first-child{ margin-top:0; }
.menucard__ttl::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--gold-light), transparent); }
.mlist li{ display:grid; grid-template-columns:1fr auto 104px; align-items:baseline; gap:8px 20px; padding:20px 4px; border-bottom:1px dotted rgba(155,138,160,.4); }
.mlist__name{ font-size:16px; letter-spacing:.09em; color:var(--plum); }
.mlist__desc{ margin-top:6px; font-size:12.5px; line-height:1.95; color:var(--muted); letter-spacing:.04em; }
.mlist__time{ font-family:var(--en); font-size:15px; letter-spacing:.1em; color:var(--muted); white-space:nowrap; }
.mlist__price{ font-family:var(--en); font-size:19px; letter-spacing:.06em; color:var(--plum); text-align:right; white-space:nowrap; }
.mlist--compact li{ padding:15px 4px; }
.menucard__note{ margin-top:24px; font-size:12px; line-height:2; color:var(--muted); text-align:right; }

/* =========================================================
   流れ（初めての方へ）
   ========================================================= */
.flow{ display:grid; gap:clamp(16px, 2vw, 24px); }
.flow li{ display:grid; grid-template-columns:120px 1fr; gap:clamp(20px,3vw,40px); align-items:start; background:var(--white); border:1px solid var(--line); padding:clamp(24px,3vw,36px) clamp(22px,3vw,40px); }
.flow__step{ font-family:var(--en); font-size:13px; letter-spacing:.22em; color:var(--gold); padding-top:.4em; }
.flow h3{ font-size:17.5px; font-weight:400; letter-spacing:.14em; color:var(--plum); margin-bottom:10px; }
.flow p{ font-size:14px; line-height:2.15; color:var(--muted); }

/* =========================================================
   プロフィール・サロン案内・FAQ・フォーム
   ========================================================= */
.profile__name{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; font-family:var(--en); font-size:clamp(34px,4.4vw,48px); font-weight:400; letter-spacing:.1em; color:var(--plum); }
.profile__name em{ font-family:var(--ja); font-style:normal; font-size:13px; letter-spacing:.24em; color:var(--muted); }
.license{ display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; padding-top:26px; border-top:1px solid var(--line); }
.license li{ padding:7px 16px; font-size:12px; letter-spacing:.08em; color:var(--plum-soft); background:var(--white); border:1px solid var(--line); border-radius:999px; }

.infolist > div{ display:grid; grid-template-columns:130px 1fr; gap:20px; padding:20px 0; border-bottom:1px solid rgba(194,163,107,.24); }
.infolist > div:first-child{ border-top:1px solid rgba(194,163,107,.24); }
.infolist dt{ font-size:13px; letter-spacing:.16em; color:var(--gold); padding-top:.15em; }
.infolist dd{ font-size:14.5px; line-height:1.95; color:var(--plum); }
.infolist .sub{ display:block; margin-top:6px; font-size:12.5px; line-height:1.95; color:var(--muted); letter-spacing:.04em; }
.infolist a{ border-bottom:1px solid rgba(194,163,107,.5); }

.faq details{ background:var(--white); border:1px solid var(--line); margin-bottom:12px; }
.faq summary{ position:relative; cursor:pointer; list-style:none; padding:22px 60px 22px 26px; font-size:15px; letter-spacing:.09em; color:var(--plum); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before, .faq summary::after{ content:""; position:absolute; right:26px; top:50%; width:13px; height:1px; background:var(--gold); transition:transform .35s; }
.faq summary::after{ transform:rotate(90deg); }
.faq details[open] summary::after{ transform:rotate(0); }
.faq details p{ padding:0 26px 24px; font-size:13.5px; line-height:2.15; color:var(--muted); }

.rsv-btns{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.rsv-btn{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:28px 12px; background:var(--white); border:1px solid rgba(194,163,107,.4); }
.rsv-btn:hover{ background:var(--lav-pale); opacity:1; }
.rsv-btn__en{ font-family:var(--en); font-size:17px; letter-spacing:.2em; color:var(--gold); }
.rsv-btn__ja{ font-size:13px; letter-spacing:.1em; color:var(--plum); }
.rsv-btn[aria-disabled="true"]{ opacity:.6; }
.instagram-qr{ text-align:center; margin:-18px 0 clamp(40px,5vw,64px); }
.instagram-qr a{ display:inline-flex; flex-direction:column; align-items:center; gap:10px; color:var(--plum); font-size:12px; letter-spacing:.1em; }
.instagram-qr img{ width:180px; height:180px; object-fit:contain; padding:8px; background:var(--white); border:1px solid var(--line); }
.instagram-qr a:hover{ opacity:.72; }

.form{ background:var(--white); border:1px solid rgba(194,163,107,.34); padding:clamp(26px,4.5vw,52px); }
.form__lead{ font-size:13.5px; line-height:2.1; color:var(--muted); text-align:center; margin-bottom:32px; }
.field{ margin-bottom:22px; }
.field label{ display:block; margin-bottom:9px; font-size:12.5px; letter-spacing:.14em; color:var(--plum); }
.req{ display:inline-block; margin-left:8px; padding:2px 8px; font-size:10px; letter-spacing:.1em; color:var(--white); background:var(--lav-deep); border-radius:2px; vertical-align:1px; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; font-family:var(--ja); font-size:14.5px; color:var(--text);
  background:var(--ivory); border:1px solid rgba(155,138,160,.4); border-radius:2px;
  transition:border-color .3s, background .3s;
}
.field textarea{ line-height:1.9; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); background:var(--white); }
.field input::placeholder, .field textarea::placeholder{ color:#B8AAB4; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px; }
.form__privacy{ font-size:12px; line-height:1.95; color:var(--muted); text-align:center; margin-top:6px; }
.form__submit{ text-align:center; margin-top:26px; }
.form__demo{ margin-top:14px; font-size:11.5px; letter-spacing:.08em; color:var(--lav-deep); }

/* =========================================================
   ページ末尾のCTA
   ========================================================= */
.cta{ position:relative; overflow:hidden; text-align:center; padding:clamp(64px,7vw,104px) 0; background:linear-gradient(180deg, var(--lav-pale), var(--ivory-2)); }
.cta__ttl{ font-size:clamp(21px,2.6vw,29px); font-weight:300; letter-spacing:.16em; color:var(--plum); line-height:1.8; }
.cta__txt{ margin-top:18px; font-size:14px; line-height:2.2; color:var(--muted); }
.cta__btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }

/* =========================================================
   フッター
   ========================================================= */
.site-footer{ background:var(--plum); color:var(--ivory); text-align:center; padding:clamp(56px,7vw,84px) 5% clamp(96px,8vw,60px); }
.site-footer .brand__mark{ color:var(--ivory); font-size:42px; }
.site-footer .brand__sub{ color:rgba(250,245,241,.8); font-size:10px; }
.footer__brand{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.site-footer .ornament i{ background:linear-gradient(90deg, transparent, var(--gold-light), transparent); }
.site-footer .ornament b{ color:var(--gold-light); }
.footer__info{ font-size:12.5px; line-height:2.2; opacity:.86; }
.footer__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin:32px 0 28px; font-size:12.5px; letter-spacing:.1em; }
.footer__copy{ font-family:var(--en); font-size:11px; letter-spacing:.2em; opacity:.6; }

/* スマホ下部の固定CTA */
.spcta{ display:none; }

/* デモ表示中の注記 */
.demo-note{ background:var(--ivory-3); color:var(--muted); text-align:center; padding:12px 20px; font-size:11.5px; letter-spacing:.06em; border-bottom:1px solid var(--line); }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 1080px){
  .gnav a em{ display:none; }
  .cards--4{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 900px){
  .duo{ grid-template-columns:1fr; }
  .duo--rev .duo__txt{ order:0; }
  .duo__img{ aspect-ratio:16/10; }
  .cards{ grid-template-columns:repeat(2, 1fr); }
  .promise{ grid-template-columns:1fr; }
  .origin{ grid-template-columns:1fr; }
}

@media (max-width: 820px){
  :root{ --header-h:68px; }
  .sp-only{ display:inline; }
  .pc-only{ display:none; }

  .brand__mark{ font-size:27px; }
  .brand__sub{ font-size:8px; }
  .header-cta{ display:none; }
  .header-social{ margin-left:auto; margin-right:2px; }
  .header-social .social-link__icon{ width:30px; height:30px; }
  .burger{ display:block; }

  .gnav{
    position:fixed; inset:0; z-index:105;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
    background:linear-gradient(160deg, var(--ivory) 0%, var(--lav-pale) 100%);
    opacity:0; visibility:hidden; transition:opacity .45s, visibility .45s;
  }
  body.nav-open .gnav{ opacity:1; visibility:visible; }
  .gnav ul{ flex-direction:column; gap:24px; }
  .gnav a span{ font-size:18px; letter-spacing:.16em; }
  .gnav a em{ display:block; font-size:10px; }
  .gnav a.is-current{ border:none; }

  .hero{ height:clamp(440px, 76vh, 620px); }
  .hero__card{ left:50%; transform:translate(-50%,-50%); width:min(90%, 460px); text-align:center; }
  .hero__wing{ right:-14%; bottom:-4%; width:min(42vw, 190px); }
  .infobar{ flex-direction:column; gap:10px; padding:20px; }
  .infobar div{ justify-content:center; }

  .cards{ grid-template-columns:1fr; }
  .cards--4{ grid-template-columns:1fr; }
  .card__img{ aspect-ratio:16/9; }
  .photo-duo{ grid-template-columns:1fr; }
  .flow li{ grid-template-columns:1fr; gap:6px; }
  .flow__step{ padding-top:0; }
  .mlist li{ grid-template-columns:1fr auto; gap:4px 14px; padding:18px 2px; }
  .mlist__body{ grid-column:1 / -1; }
  .menucard__note{ text-align:left; }
  .infolist > div{ grid-template-columns:1fr; gap:6px; }
  .rsv-btns{ grid-template-columns:1fr; }
  .rsv-btn{ flex-direction:row; justify-content:center; gap:12px; padding:19px 12px; }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .btn{ width:100%; max-width:330px; min-width:0; }
  .cta__btns{ flex-direction:column; align-items:center; }
  .site-footer{ padding-bottom:110px; }

  .spcta{
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    display:grid; grid-template-columns:1fr 1.6fr;
    background:rgba(255,252,250,.96); backdrop-filter:blur(10px);
    box-shadow:0 -1px 0 rgba(194,163,107,.4);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .spcta a{ display:flex; align-items:center; justify-content:center; padding:17px 8px; font-size:13px; letter-spacing:.1em; color:var(--plum); }
  .spcta a.is-fill{ background:var(--plum); color:var(--ivory); }
  body.nav-open .spcta{ display:none; }
}

@media (max-width: 480px){
  body{ font-size:15px; }
  .menucard{ padding-left:18px; padding-right:18px; }
  .menucard::before{ inset:6px; }
  .mlist__name{ font-size:15px; }
}