@charset "UTF-8";

/* ============================================================
   Pâtisserie Douze Avril — 提案用デモサイト
   標本帳ナチュラル(resto-site) × 手描きあしらい(illust-site)
   差し色はオレンジ1本。ピスタチオ緑は §Spécialité 限定。
   ============================================================ */

:root{
  --paper:    #FAF3E1;
  --paper-2:  #F3E6C9;
  --paper-3:  #FDF9EF;   /* 台紙(写真マット)用の一段明るい紙 */
  --ink:      #2B2118;
  --ink-60:   #6B5B49;
  --ink-30:   #BFB09A;
  --orange:   #E8641B;
  --orange-d: #C24E10;
  --pistache: #A8B545;
  --pistache-d: #77842A;   /* 写真の上に文字を載せるとき用 */
  --cocoa:    #40301F;     /* ショーケースの節だけ反転させる焦げ茶 */
  --cocoa-2:  #56422C;

  --f-fr: "Fraunces", "Times New Roman", serif;
  --f-jp-h: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-jp: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;

  --wrap: 1120px;
  --gut: clamp(20px, 5vw, 48px);
  --sec-y: clamp(72px, 11vw, 132px);

  --ease-out: cubic-bezier(.22,.68,.36,1);
  --ease-back: cubic-bezier(.34,1.42,.52,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-jp);
  font-size:16px;
  line-height:1.95;
  font-feature-settings:"palt" 1;
  overflow-x:hidden;
}
/* 漆喰の壁：コテむら（大きなまだら）＋細かい粒 の2層。画像は使わない */
body::before,
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:1;
}
/* 層1：コテむら（ノイズの明暗を「土色の濃淡」に変換して掛ける）
   soft-lightは明るいクリーム地にほとんど効かないので multiply で乗せている */
body::before{
  opacity:.42;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cfilter id='p' x='0' y='0' width='760' height='760' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.024' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.62 0 0 0 0 0.55 0 0 0 0 0.43 0.85 0 0 0 -0.30'/%3E%3C/filter%3E%3Crect width='760' height='760' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size:760px 760px;
}
/* 層2：細かい粒 */
body::after{
  opacity:.3;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='180' height='180' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,p,dl,dd,figure,blockquote{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--paper); padding:10px 18px;
}
.skip:focus{ left:8px; top:8px; }

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

/* ============================================================
   ヘッダー
   ============================================================ */
/* 最上部ではオーニングの下に居て、スクロールすると上端に上がって帯になる */
.bar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  background:rgba(250,243,225,0);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease-out), border-color .4s var(--ease-out);
}
.bar.solid{
  background:rgba(250,243,225,.93);
  backdrop-filter:blur(8px);
  border-bottom-color:rgba(43,33,24,.12);
}
.bar-in{
  max-width:var(--wrap); margin-inline:auto;
  padding:12px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.bar-mark{ text-decoration:none; line-height:1.15; display:block; }
.bar-mark-fr{
  display:block; font-family:var(--f-fr); font-style:italic;
  font-weight:500; font-size:20px; letter-spacing:.01em;
}
.bar-mark-jp{
  display:block; font-size:9.5px; letter-spacing:.34em;
  color:var(--ink-60); margin-top:1px;
}
.bar-nav{ display:flex; gap:clamp(14px,2.4vw,30px); }
.bar-nav a{
  position:relative; text-decoration:none; font-size:13px;
  letter-spacing:.09em; padding-bottom:3px; white-space:nowrap;
}
/* 手描き風の下線が左から描かれる（ホバー語彙・共通） */
.bar-nav a::after,
.link-ink::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:5px;
  background:no-repeat left center/0% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 5' preserveAspectRatio='none'%3E%3Cpath d='M1 3.4 C22 1.9 44 4.1 66 2.6 C86 1.4 104 3.6 119 2.2' fill='none' stroke='%23E8641B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  transition:background-size .38s var(--ease-out);
}
.bar-nav a:hover::after,
.bar-nav a:focus-visible::after,
.link-ink:hover::after,
.link-ink:focus-visible::after{ background-size:100% 100%; }

/* ============================================================
   §1 ヒーロー
   ============================================================ */
.hero{
  position:relative;
  padding:clamp(104px,13vw,148px) 0 clamp(48px,7vw,76px);
  text-align:center;
  overflow:hidden;
}


.hero-in{ position:relative; z-index:3; max-width:900px; margin-inline:auto; padding-inline:var(--gut); }

.hero-eyebrow{
  font-family:var(--f-fr); font-size:clamp(11px,1.5vw,13px);
  letter-spacing:.5em; text-indent:.5em; color:var(--ink-60);
  margin-bottom:clamp(14px,2.4vw,22px);
}
.hero-eyebrow span{ display:inline-block; }

.hero-script{
  font-family:var(--f-fr); font-style:italic; font-weight:400;
  font-size:clamp(52px,12.5vw,142px);
  line-height:1.02; letter-spacing:-.005em;
  margin:0 0 clamp(10px,1.6vw,16px);
}
/* 中央から左右へ引かれるインクの罫 */
.hero-rule{
  display:block; width:min(320px,54%); height:8px;
  margin:clamp(16px,2.4vw,24px) auto clamp(14px,2vw,20px);
  color:var(--ink-30);
}
.hero-rule svg{ width:100%; height:100%; display:block; }
.br-sp{ display:none; }

.hero-depuis{
  font-family:var(--f-fr); font-weight:600;
  font-size:clamp(11px,1.5vw,14px); letter-spacing:.42em; text-indent:.42em;
  color:var(--ink-60);
}

.hero-lede{ margin-top:clamp(30px,4.6vw,52px); }
.hero-jp{
  font-family:var(--f-jp-h); font-weight:600;
  font-size:clamp(20px,3.5vw,31px); line-height:1.75; letter-spacing:.05em;
}
.hero-sub{
  margin-top:12px; font-size:clamp(12.5px,1.7vw,14.5px);
  letter-spacing:.16em; color:var(--ink-60);
}

/* ボタン */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:clamp(26px,3.8vw,40px);
  padding:14px 30px;
  background:var(--orange); color:#fff;
  font-size:13.5px; letter-spacing:.08em; font-weight:500;
  text-decoration:none; border-radius:999px;
  box-shadow:0 6px 18px -8px rgba(194,78,16,.75);
  transition:transform .3s var(--ease-out), background .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.btn:hover,.btn:focus-visible{
  background:var(--orange-d); transform:translateY(-2px);
  box-shadow:0 12px 24px -10px rgba(194,78,16,.8);
}
.btn-arrow{ width:24px; height:12px; flex:none; }
.btn-arrow path{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.btn-line{
  background:transparent; color:var(--ink);
  border:1.5px solid rgba(43,33,24,.3); box-shadow:none;
}
.btn-line:hover,.btn-line:focus-visible{
  background:transparent; border-color:var(--orange); color:var(--orange-d);
  box-shadow:none;
}

/* ヒーロー写真 */
.hero-photo{
  position:relative; z-index:3;
  max-width:1010px; margin:clamp(44px,6.5vw,72px) auto 0;
  padding-inline:var(--gut);
}
.hero-photo-clip{
  display:block; border-radius:14px; overflow:hidden;
  box-shadow:0 26px 48px -26px rgba(43,33,24,.5), 0 2px 0 rgba(255,255,255,.6);
}
.hero-photo img{ width:100%; display:block; }

/* ============================================================
   マーキー（呼吸・1本だけ）
   ============================================================ */
.marquee{
  overflow:hidden; padding:16px 0;
  border-top:1px solid rgba(43,33,24,.14);
  border-bottom:1px solid rgba(43,33,24,.14);
  background:var(--paper-2);
}
.marquee-track{
  display:flex; width:max-content;
  animation:slide 34s linear infinite;
}
.marquee-track span{
  font-family:var(--f-fr); font-style:italic;
  font-size:clamp(13px,1.9vw,17px); letter-spacing:.06em;
  color:var(--ink-60); white-space:nowrap; padding-right:0;
}
@keyframes slide{ to{ transform:translateX(-25%); } }

/* ============================================================
   セクション共通
   ============================================================ */
.sec{ padding-block:var(--sec-y); position:relative; }
.sec-head{ margin-bottom:clamp(34px,5vw,58px); max-width:660px; }
.sec-fr{
  font-family:var(--f-fr); font-style:italic; font-weight:400;
  font-size:clamp(34px,6.2vw,64px); line-height:1.1;
  color:var(--orange);
}
.sec-jp{
  font-family:var(--f-jp-h); font-weight:600;
  font-size:clamp(17px,2.5vw,23px); letter-spacing:.09em;
  margin-top:10px; line-height:1.7;
}
.sec-lede{
  margin-top:20px; font-size:15px; color:var(--ink-60);
  max-width:44em;
}
.prose p + p{ margin-top:1.15em; }
.prose{ font-size:15.5px; }
.note{
  font-size:13px; color:var(--ink-60); margin-top:26px; line-height:1.85;
}
.note a{ color:var(--orange-d); text-decoration:none; border-bottom:1px solid rgba(232,100,27,.4); }

/* 写真の台紙（ポラロイド風） */
.photo{ position:relative; }
.photo img{
  width:100%; border-radius:12px;
  box-shadow:0 16px 30px -20px rgba(43,33,24,.55), 0 1px 0 rgba(255,255,255,.5);
}
.photo figcaption{
  margin-top:12px; font-size:12.5px; color:var(--ink-60); letter-spacing:.03em;
}
.band img{ border-radius:14px; }

/* カード（ホバー語彙：2px浮上＋オレンジの薄い影） */
.card figure{ overflow:hidden; border-radius:12px; }
.card img{
  transition:transform .55s var(--ease-out), box-shadow .35s var(--ease-out);
}
.card:hover img{
  transform:scale(1.035);
  box-shadow:0 20px 34px -18px rgba(194,78,16,.5);
}
.card-fr{
  font-family:var(--f-fr); font-style:italic; font-size:17px;
  margin-top:14px; color:var(--orange-d);
}
.card-jp{ font-size:13px; letter-spacing:.06em; color:var(--ink-60); margin-top:2px; }

/* ============================================================
   §2 店名の由来
   ============================================================ */
/* 背景にケーキの写真を敷き、クリームの紗をかけて文字を読ませる */
.nom{ background:var(--paper-2); position:relative; overflow:hidden; }
.nom-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 42%;
}
/* 文字が乗る右側は濃く、絵のある左側は薄く。写真は感じられるが読みは邪魔しない */
.nom-veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(243,230,201,.58) 0%, rgba(243,230,201,.70) 34%,
      rgba(243,230,201,.90) 58%, rgba(243,230,201,.94) 100%),
    linear-gradient(180deg,
      rgba(243,230,201,.55) 0%, rgba(243,230,201,0) 22%,
      rgba(243,230,201,0) 78%, rgba(243,230,201,.6) 100%);
}
.nom > .wrap{ position:relative; z-index:2; }
/* 日本語の見出しを置かない節なので、欧文見出しと本文の間を自分で取る */
.nom-body .prose{ margin-top:20px; }


.nom-grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(34px,6vw,80px); align-items:center;
}
/* イラストの地色＝紙とほぼ同色なので multiply で紙に溶かす＋インクの額縁 */
.frame{
  position:relative; padding:clamp(14px,2.2vw,22px);
  background:var(--paper-3);
  border:1px solid rgba(43,33,24,.16);
  box-shadow:0 20px 38px -24px rgba(43,33,24,.5);
  transform:rotate(-1.1deg);
}
.frame::after{
  content:""; position:absolute; inset:7px; pointer-events:none;
  border:1px solid rgba(43,33,24,.22);
}
.frame img{ mix-blend-mode:multiply; width:100%; }
.frame-pin{
  position:absolute; top:-11px; left:50%; width:15px; height:15px;
  transform:translateX(-50%); border-radius:50%;
  background:var(--orange);
  box-shadow:0 3px 6px -1px rgba(43,33,24,.5), inset 0 -2px 3px rgba(0,0,0,.2);
}
.nom-note{
  margin-top:30px; padding-left:18px;
  border-left:2px solid var(--orange);
  font-size:13.5px; color:var(--ink-60); line-height:1.9;
}

/* ============================================================
   締めくくり：店名の由来
   ============================================================ */
.finale{ background:var(--paper-2); }
.finale-card{
  max-width:660px; margin-inline:auto; text-align:center;
  padding:clamp(30px,4.4vw,44px) clamp(24px,3.6vw,40px);
  background:rgba(253,249,239,.72);
  border:1px solid rgba(43,33,24,.16);
  border-radius:16px;
}
.finale-fr{
  font-weight:400;
  font-family:var(--f-fr); font-style:italic;
  font-size:clamp(30px,4.6vw,44px); line-height:1.12; color:var(--orange-d);
}
/* 経歴の段落と「地方には」の間に置く問いかけ。見出しほど強くせず、明朝で一呼吸つくる */
.nom-turn{
  margin-top:1.9em !important;
  font-family:var(--f-jp-h); font-weight:600;
  font-size:clamp(20px,2.8vw,26px); line-height:1.6; letter-spacing:.08em; color:var(--ink);
}
.nom-turn + p{ margin-top:.9em !important; }
.finale-jp{
  margin-top:10px; font-family:var(--f-jp-h); font-weight:600;
  font-size:clamp(15px,2.1vw,18px); letter-spacing:.09em;
}
.finale-card .prose{ margin-top:clamp(18px,2.6vw,24px); text-align:left; }

/* ============================================================
   §3 スペシャリテ（見せ場1：スクロールで寄っていく）
   ============================================================ */
.specialite .sec-fr{ color:var(--pistache); }

.showcase{
  position:relative;
  max-width:1240px; margin:0 auto clamp(38px,6vw,70px);
  padding-inline:var(--gut);
}
.showcase-window{
  position:relative; margin:0; overflow:hidden;
  height:clamp(400px,78vh,740px);
  border-radius:24px;
  box-shadow:0 32px 58px -32px rgba(43,33,24,.55);
}
.showcase-img{
  width:100%; height:100%; object-fit:cover; object-position:50% 40%;
  transform-origin:60% 64%;      /* ケーキのあたりへ寄る */
  will-change:transform; display:block;
}
/* 文字を載せる側だけ、ごく薄いクリームを敷いて可読性を担保する */
.showcase-veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(102deg,
    rgba(250,243,225,.80) 0%, rgba(250,243,225,.52) 30%,
    rgba(250,243,225,.12) 54%, rgba(250,243,225,0) 68%);
}
.showcase-copy{
  position:absolute; z-index:2;
  left:calc(var(--gut) + clamp(24px,4.4vw,58px));
  top:clamp(30px,6.5vh,68px);
  max-width:min(46%,420px);
}
.showcase-copy .sec-fr{ color:var(--pistache-d); }
.showcase-lede{
  margin-top:18px; font-size:15px; line-height:2; color:var(--ink);
}

.spec-under .spec-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
  gap:clamp(30px,5vw,60px); align-items:start;
}
.spec-under .prose{ padding-left:22px; border-left:2px solid var(--pistache); }
.photo-sm{ margin:0; }
.photo-sm img{ border-radius:12px; }

/* ============================================================
   見せ場2：ケーキの帯（中の写真がゆっくり流れる）
   ============================================================ */
.band{
  position:relative; overflow:hidden; margin:0 0 clamp(30px,4.6vw,52px);
  height:clamp(300px,62vh,580px);
  border-radius:16px;
  box-shadow:0 24px 42px -28px rgba(43,33,24,.5);
}
.band-img{
  position:absolute; left:0; top:-9%; width:100%; height:118%;
  object-fit:cover; object-position:50% 56%;
  will-change:transform; display:block;
}

/* ============================================================
   見せ場3：季節へ入る前の全幅インタールード
   ============================================================ */
.interlude{
  position:relative; overflow:hidden;
  height:clamp(320px,64vh,600px);
  display:flex; align-items:center; justify-content:center;
  border-top:1px solid rgba(43,33,24,.16);
  border-bottom:1px solid rgba(43,33,24,.16);
}
.interlude-img{
  position:absolute; left:0; top:-7%; width:100%; height:114%;
  object-fit:cover; object-position:50% 50%;
  will-change:transform; display:block;
}
/* 中央は皿が明るいので、文字の裏だけ丸く落として読めるようにする */
.interlude-veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(62% 48% at 50% 50%,
      rgba(43,33,24,.66) 0%, rgba(43,33,24,.34) 58%, rgba(43,33,24,0) 100%),
    linear-gradient(180deg,
      rgba(43,33,24,.44) 0%, rgba(43,33,24,.18) 45%, rgba(43,33,24,.56) 100%);
}
.interlude-copy{ position:relative; z-index:2; text-align:center; padding-inline:var(--gut); }
.interlude-fr{
  font-family:var(--f-fr); font-style:italic;
  font-size:clamp(15px,2.3vw,22px); letter-spacing:.05em;
  color:rgba(250,243,225,.85);
}
.interlude-jp{
  margin-top:14px;
  font-family:var(--f-jp-h); font-weight:600;
  font-size:clamp(19px,3.3vw,31px); line-height:1.75; letter-spacing:.09em;
  color:var(--paper); text-shadow:0 2px 16px rgba(43,33,24,.55);
}

/* ============================================================
   手描きのあしらい（見出しの脇にひとつずつ）
   ============================================================ */
.ornament{
  position:absolute; z-index:2; display:block; pointer-events:none;
  color:var(--ink); opacity:.32;
}
.ornament svg{ width:100%; height:auto; display:block; }
.orn-whisk{ width:clamp(44px,4.8vw,70px); right:7%; bottom:14%; }
.orn-berry{ width:clamp(40px,4.4vw,64px); right:8%; top:13%; }
.orn-steam{ width:clamp(38px,4.2vw,60px); left:6%; top:16%; }

/* ============================================================
   §4 ケーキ
   ============================================================ */
/* ここだけ焦げ茶に反転させて差し色にする（ケーキの写真がいちばん映える） */
.gateaux{
  background:var(--cocoa);
  color:var(--paper);
}
.gateaux .sec-lede,
.gateaux .card-jp,
.gateaux .note{ color:rgba(250,243,225,.72); }
.gateaux .card-fr{ color:#F0A268; }
.gateaux .note a{
  color:#F0A268; border-bottom-color:rgba(240,162,104,.5);
}
.gateaux .band,
.gateaux .card figure{
  box-shadow:0 24px 42px -26px rgba(0,0,0,.7);
}
.band{ margin-bottom:clamp(30px,4.6vw,52px); }
.cards{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.6vw,30px);
}
.card-wide{ grid-column:span 4; }
.card-wide figure{ aspect-ratio:16/6.2; }
.card-wide img{ height:100%; object-fit:cover; }

/* ============================================================
   §5 季節
   ============================================================ */
.saison-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.8vw,32px);
}
.saison-grid figure{ aspect-ratio:3/3.7; }
.saison-grid img{ height:100%; object-fit:cover; }
.saison-grid .card-jp{ font-size:13.5px; color:var(--ink); margin-top:12px; }

/* ============================================================
   §6 焼き菓子とギフト
   ============================================================ */
.boutique{ background:var(--paper-2); }
.boutique-grid{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(30px,5vw,68px); align-items:center;
  margin-bottom:clamp(28px,4.4vw,48px);
}
.boutique-hero img{ border-radius:14px; aspect-ratio:5/4; object-fit:cover; object-position:50% 52%; }
.boutique-row{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.6vw,30px);
}
.boutique-row figure{ aspect-ratio:3/2; }
.boutique-row img{ height:100%; object-fit:cover; }

/* ============================================================
   §7 シェフ
   ============================================================ */
.pull{
  margin-top:30px; padding:22px 26px;
  background:var(--paper-2);
  border-left:3px solid var(--orange);
  font-family:var(--f-jp-h); font-size:clamp(15px,2vw,17.5px);
  line-height:1.85; letter-spacing:.05em;
}


/* ============================================================
   §8 ホールケーキ
   ============================================================ */
.reserve{ background:var(--paper-2); }
.reserve-grid{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(32px,5.5vw,72px); align-items:center;
}
.reserve-photo{ transform:rotate(-1deg); }
.reserve-photo img{ aspect-ratio:4/3; object-fit:cover; object-position:50% 55%; }
.tel-card{
  display:block; margin-top:28px; padding:22px 26px;
  background:var(--paper-3); border:1px solid rgba(43,33,24,.18);
  border-radius:14px; text-decoration:none;
  box-shadow:0 12px 26px -20px rgba(43,33,24,.6);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
.tel-card:hover,.tel-card:focus-visible{
  transform:translateY(-2px); border-color:var(--orange);
  box-shadow:0 18px 30px -20px rgba(194,78,16,.7);
}
.tel-label{ display:block; font-size:11.5px; letter-spacing:.2em; color:var(--ink-60); }
.tel-num{
  display:block; font-family:var(--f-fr); font-weight:600;
  font-size:clamp(27px,4.4vw,38px); line-height:1.3; letter-spacing:.01em;
  color:var(--orange-d); margin-top:4px;
}
.tel-note{ display:block; font-size:12.5px; color:var(--ink-60); margin-top:4px; }

/* ============================================================
   §9 アクセス
   ============================================================ */
.info{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:clamp(26px,4vw,38px); max-width:840px;
}
.info-list{ border-top:1px solid rgba(43,33,24,.2); }
.info-row{
  display:grid; grid-template-columns:112px minmax(0,1fr);
  gap:18px; padding:15px 2px;
  border-bottom:1px solid rgba(43,33,24,.13);
}
.info-row dt{
  font-size:12px; letter-spacing:.14em; color:var(--ink-60);
  padding-top:.35em;
}
.info-row dd{ margin:0; font-size:14.5px; line-height:1.8; }
.info-row dd a{ color:var(--orange-d); text-decoration:none; border-bottom:1px solid rgba(232,100,27,.4); }
.info-sub{
  display:block; font-size:12px; color:var(--ink-60); margin-top:3px;
  font-family:var(--f-jp);
}
.info-map{
  display:flex; align-items:center; gap:clamp(18px,3vw,32px); flex-wrap:wrap;
  padding:clamp(18px,2.6vw,24px) clamp(20px,3vw,28px);
  background:var(--paper-2); border:1px solid rgba(43,33,24,.14); border-radius:14px;
}
.info-map .btn{ margin-top:0; flex:none; }
.info-map .note{ margin-top:0; flex:1 1 260px; }

/* ============================================================
   フッター
   ============================================================ */
.foot{
  background:var(--paper-2);
  border-top:1px solid rgba(43,33,24,.14);
  padding-block:clamp(52px,8vw,88px) clamp(30px,5vw,44px);
  text-align:center;
}
.foot-illust{ max-width:270px; margin:0 auto clamp(16px,2.6vw,26px); }
/* darken＝イラストの地色(紙より明るい)が消えて線画だけが紙に乗る */
.foot-illust img{
  mix-blend-mode:darken; width:100%;
  aspect-ratio:638/430; object-fit:cover; object-position:center top;
}
.foot-fr{
  font-family:var(--f-fr); font-style:italic;
  font-size:clamp(13px,1.8vw,15.5px); line-height:1.8;
  color:var(--ink-60); max-width:30em; margin-inline:auto;
}
.foot-mark{
  margin-top:clamp(24px,3.6vw,34px);
  font-family:var(--f-fr); font-size:clamp(13px,1.9vw,16px);
  letter-spacing:.22em;
}
.foot-mark em{ font-style:italic; letter-spacing:.02em; font-size:1.28em; }
.foot-addr{ margin-top:14px; font-size:12.5px; color:var(--ink-60); line-height:1.9; }
.foot-credit{
  margin-top:clamp(26px,4vw,38px); padding-top:18px;
  border-top:1px solid rgba(43,33,24,.13);
  font-size:10.5px; letter-spacing:.09em; color:var(--ink-30);
}

/* ============================================================
   動き（JS有効時だけ初期状態を隠す＝JS無効でも全部読める）
   ============================================================ */
.js .reveal{ opacity:0; transform:translateY(24px); }
.js .reveal-t{ opacity:0; filter:blur(8px); }
.js .reveal.in{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
.js .reveal-t.in{
  opacity:1; filter:blur(0);
  transition:opacity .8s var(--ease-out), filter .8s var(--ease-out);
}

/* 入店の儀式 */
.js .hero-eyebrow span{ opacity:0; }
.js .hero-script{ clip-path:inset(0 100% 0 0); }
.js .hero-depuis,
.js .hero-lede,
.js .hero .btn{ opacity:0; transform:translateY(12px); }

.js .hero.ready .hero-eyebrow span{
  animation:fadeUp .5s var(--ease-out) forwards;
  animation-delay:calc(.30s + var(--i,0) * .035s);
}
.js .hero.ready .hero-script{
  animation:write 1.15s .48s var(--ease-out) forwards;
}
/* 罫が中央から左右へ引かれる */
.js .hero-rule{ transform:scaleX(0); }
.js .hero.ready .hero-rule{
  animation:ruleOut .7s 1.32s var(--ease-out) forwards;
}
.js .hero.ready .hero-depuis{ animation:fadeUp .6s 1.66s var(--ease-out) forwards; }
.js .hero.ready .hero-lede{ animation:fadeUp .7s 1.82s var(--ease-out) forwards; }
.js .hero.ready .btn{ animation:fadeUp .7s 2s var(--ease-out) forwards; }

/* ヒーロー写真は、ショーケースの扉のように上下へ開く
   （CSSだけで動く＝JSのタイマーに依存させない） */
.js .hero-photo-clip{ clip-path:inset(50% 0 50% 0); }
.js .hero.ready .hero-photo-clip{
  animation:openUp 1.15s 1.5s var(--ease-out) forwards;
}

@keyframes write{ to{ clip-path:inset(0 -3% 0 0); } }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }
@keyframes ruleOut{ to{ transform:scaleX(1); } }
@keyframes openUp{ to{ clip-path:inset(0 0 0 0); } }

/* ============================================================
   常時の微かな命（アンビエント）
   1画面で同時に動くのは2つまで、を守る配置にしてある
   ============================================================ */

/* 壁のニッチ（凹み）に飾っている感じの、ごく浅い影 */
.nom,.boutique,.reserve,.finale{
  box-shadow:inset 0 9px 15px -13px rgba(43,33,24,.34),
             inset 0 -9px 15px -13px rgba(43,33,24,.26);
}
/* 焦げ茶の節は、逆に内側から明るく落ち込ませる */
.gateaux{
  box-shadow:inset 0 12px 20px -14px rgba(0,0,0,.55),
             inset 0 -12px 20px -14px rgba(0,0,0,.45);
}

/* ヒーロー写真の呼吸 */
@keyframes breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); } }
.hero-photo img{ animation:breathe 20s ease-in-out infinite; will-change:transform; }

/* あしらいの浮遊 */
@keyframes floaty{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-11px) rotate(3deg); }
}
.ornament{ animation:floaty 7s ease-in-out infinite; }
.orn-berry{ animation-duration:8.6s; animation-delay:-2.4s; }
.orn-steam{ animation-duration:6.4s; animation-delay:-4.1s; }

/* 額はピンを軸に振り子。ホバーで1往復 */
.frame{ transform:rotate(var(--rot,-1.1deg)); transform-origin:50% 0; }
@keyframes pendulum{
  0%  { transform:rotate(var(--rot,-1.1deg)); }
  28% { transform:rotate(calc(var(--rot,-1.1deg) + 1.6deg)); }
  58% { transform:rotate(calc(var(--rot,-1.1deg) - 1deg)); }
  82% { transform:rotate(calc(var(--rot,-1.1deg) + .4deg)); }
  100%{ transform:rotate(var(--rot,-1.1deg)); }
}
.frame:hover{ animation:pendulum 1.15s var(--ease-out); }

/* 季節のカードは交互に傾いて着地し、ホバーで水平に戻る */
.saison-grid .card{ --tilt:-1.2deg; }
.saison-grid .card:nth-child(even){ --tilt:1.2deg; }
.js .saison-grid .card.reveal.in{ transform:rotate(var(--tilt)); }
.js .saison-grid .card.reveal.in:hover{ transform:rotate(0deg); }

/* 10秒フェイルセーフ：何かが壊れても必ず全部見える */
.failsafe .reveal,
.failsafe .reveal-t,
.failsafe .hero-eyebrow span,
.failsafe .hero-depuis,
.failsafe .hero-lede,
.failsafe .hero-photo,
.failsafe .hero-rule,
.failsafe .btn{
  opacity:1 !important; transform:none !important; filter:none !important;
  animation:none !important;
}
.failsafe .hero-script,
.failsafe .hero-photo-clip{ clip-path:none !important; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:900px){
  .nom-grid,.spec-grid,.boutique-grid,.reserve-grid,
  .spec-under .spec-grid{
    grid-template-columns:minmax(0,1fr);
  }

  /* 見せ場1：狭い画面では文字を写真に重ねず、下に置く */
  .showcase{ padding-inline:var(--gut); }
  .showcase-window{ height:auto; aspect-ratio:1/1; border-radius:18px; }
  .showcase-img{ object-position:60% 54%; }   /* 狭い画面ではケーキに寄せる */
  .showcase-veil{ display:none; }
  .showcase-copy{
    position:static; max-width:none; margin-top:clamp(22px,4vw,30px);
  }
  .showcase-copy .sec-fr{ color:var(--pistache); }

  /* 縦積みになると左右の塗り分けが効かないので、均一に強めて読みを守る */
  .nom-veil{
    background:linear-gradient(180deg,
      rgba(243,230,201,.72) 0%, rgba(243,230,201,.88) 26%,
      rgba(243,230,201,.92) 74%, rgba(243,230,201,.8) 100%);
  }

  .band{ height:auto; aspect-ratio:4/3; }
  /* vhは必ず上限を付ける（付けないと縦長の環境で青天井に伸びる） */
  .interlude{
    height:auto; min-height:clamp(300px,56vh,520px);
    padding-block:clamp(56px,11vw,80px);
  }

  .orn-whisk{ right:4%; bottom:auto; top:2%; }
  .orn-berry{ right:3%; top:6%; }
  .orn-steam{ left:3%; top:8%; }
  .nom-grid{ gap:38px; }
  .frame{ max-width:390px; margin-inline:auto; }
  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card-wide{ grid-column:span 2; }
  .card-wide figure{ aspect-ratio:16/8; }
  .reserve-photo{ transform:none; max-width:460px; }
  .reserve-grid .reserve-photo{ order:2; }
}
@media (max-width:640px){
  body{ font-size:15px; line-height:1.9; }
  .br-sp{ display:inline; }
  .bar-nav{ display:none; }
  .bar-in{ justify-content:center; }
  .saison-grid,.boutique-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .saison-grid li:last-child,.boutique-row li:last-child{ grid-column:span 2; }
  .saison-grid li:last-child figure{ aspect-ratio:16/9; }
  .boutique-row li:last-child figure{ aspect-ratio:16/7; }
  .info-row{ grid-template-columns:88px minmax(0,1fr); gap:12px; }
  .hero-photo,.hero-in{ padding-inline:var(--gut); }
  .frame{ transform:rotate(-.8deg); }
}
@media (max-width:420px){
  .cards{ grid-template-columns:minmax(0,1fr); }
  .card-wide{ grid-column:span 1; }
  .card-wide figure{ aspect-ratio:16/9; }
}

/* ============================================================
   動きを減らす設定
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal,.js .reveal-t{ opacity:1; transform:none; filter:none; }
  .js .hero-script,.js .hero-photo-clip{ clip-path:none; }
  .js .hero-eyebrow span,
  .js .hero-depuis,.js .hero-lede,.js .hero .btn,
  .js .hero-photo{ opacity:1; transform:none; }
  .js .hero-rule{ transform:scaleX(1); }
  .marquee-track{ animation:none; }
  .card:hover img{ transform:none; }

  /* v2の見せ場・アンビエントは全部止めて、静止画として見せる */
  .ornament,.hero-photo img{ animation:none; }
  .frame:hover{ animation:none; }
  .showcase-img,.band-img,.interlude-img{ transform:none !important; }
  .js .saison-grid .card.reveal.in{ transform:rotate(var(--tilt)); }
}