*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --cream:#FAF3E1;--cream2:#F6E7C2;--text:#2B2B2B;--muted:#6B5B4B;
  --beige:#D9C08A;--brown:#8B5E3C;--wheat:#E7C27D;
  --yellow:#F5C842;--yellow2:#F7B500;--light-brown:#C4956A;
  --serif:"Cormorant Garamond","Noto Serif JP",serif;
  --ja:"Zen Old Mincho","Noto Serif JP",serif;
}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--text);font-family:var(--ja);font-weight:300;overflow-x:hidden}

/* NAV */
/* 店舗外観の黄色に合わせたブランドライン（ページ最上部） */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0.85rem 4rem;display:flex;align-items:center;justify-content:space-between;background:rgba(250,243,225,0.93);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:3px solid var(--yellow2);border-bottom:1px solid rgba(217,192,138,0.25)}
.nav-logo{display:flex;flex-direction:column;gap:1px;text-decoration:none}
.nav-logo-en{font-family:var(--serif);font-size:1.55rem;font-weight:400;font-style:italic;letter-spacing:0.08em;color:var(--text);line-height:1}
.nav-logo-ja{font-size:0.8rem;letter-spacing:0.18em;color:var(--muted);line-height:1.25}
.nav-since{font-family:var(--serif);font-size:0.7rem;letter-spacing:0.12em;color:var(--light-brown);line-height:1.25}
.nav-links{display:flex;gap:2rem;list-style:none;align-items:center}
.nav-links a{font-size:0.8rem;letter-spacing:0.16em;color:var(--text);text-decoration:none;text-transform:uppercase;opacity:0.6;transition:opacity 0.2s}
.nav-links a:hover{opacity:1}
.nav-cta{background:var(--text)!important;color:var(--cream)!important;padding:0.48rem 1.2rem!important;opacity:1!important;transition:background 0.2s!important}
.nav-cta:hover{background:var(--yellow)!important;color:var(--text)!important}

/* ハンバーガーボタン（モバイルのみ表示） */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:10px;z-index:110}
.nav-burger span{display:block;width:100%;height:1.5px;background:var(--text);transition:transform 0.3s ease,opacity 0.3s ease}
.nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* HERO / FV */
.hero{margin-top:var(--nav-h,96px);height:calc(100svh - var(--nav-h,96px));min-height:560px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0}

/* スライドショー */
.fv-slides{position:absolute;inset:0;z-index:0}
.fv-slide{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;filter:blur(18px);transform:scale(1.07);transition:opacity 2s ease,filter 2s ease,transform 2s ease}
.fv-slide.active{opacity:1;filter:blur(0);transform:scale(1)}
/* 余白なしのcover表示。PCは高さを最大（100svh−nav）に取るほど写真の見える範囲が広がる */

/* オーバーレイ */
/* 全面の暗幕に加えて、中央ロゴの背後だけ円形に濃くする（2026-10-06）。
   ロゴの緑は写真によっては背景に沈む（水色の車体の上など）。全面を濃くすると
   写真そのものが暗くなるので、ロゴの当たる中央だけ足している。
   .fv-center は flex 中央寄せなので、円の中心は 50% 50% で合う。
   写真を差し替えてもロゴが読めるのは、この一枚があるおかげ。外さないこと。 */
.fv-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 46% 38% at 50% 50%, rgba(0,0,0,0.38), rgba(0,0,0,0) 72%),
    rgba(0,0,0,0.32);
}

/* 左上バッジ（常時表示） */
.fv-badge{position:absolute;top:1.6rem;left:2rem;z-index:10;font-family:var(--serif);font-style:italic;font-size:0.72rem;letter-spacing:0.22em;color:rgba(255,255,255,0.9);pointer-events:none}

/* 右上: 本日の営業情報 */
.fv-hours{position:absolute;top:1.6rem;right:2rem;z-index:10;display:flex;align-items:center;gap:0.55rem;font-family:var(--ja);font-size:0.88rem;letter-spacing:0.12em;color:rgba(255,255,255,0.95);background:rgba(0,0,0,0.32);backdrop-filter:blur(8px);padding:0.5rem 1rem;pointer-events:none}
.fv-hours-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.5);flex-shrink:0}
.fv-hours-dot.open{background:#7BC47F;animation:nowPulse 2s ease-in-out infinite}
.fv-hours-dot.closed{background:#C89898}

/* スクリーンリーダー・検索エンジン専用（視覚的に非表示） */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 中央ロゴ（写真を透過して常時固定） */
/* max-width:100%: CTA行が画面幅を超えても.fv-center自体は広がらない（ロゴの中央ずれ防止） */
.fv-center{position:relative;z-index:10;text-align:center;max-width:100%;padding:0 1rem}
/* ロゴ直下のエリア名。初見の訪問者に「どこの店か」を最初の画面で伝える */
.fv-area{margin-top:1.5rem;font-family:var(--ja);font-size:0.9rem;font-weight:300;letter-spacing:0.2em;color:rgba(255,255,255,0.95);text-shadow:0 1px 10px rgba(0,0,0,0.5);opacity:0;animation:fadeIn 1s ease 0.9s forwards}
.fv-cta-row{margin-top:3.2rem;display:flex;gap:0.9rem;justify-content:center;flex-wrap:wrap}
/* エリア名を挟むぶんCTAまでの間隔を詰める（FV全体の高さは変えない） */
.fv-area + .fv-cta-row{margin-top:1.9rem}
.fv-cta{display:inline-block;padding:0.85rem 2.6rem;font-family:var(--ja);font-size:0.86rem;letter-spacing:0.2em;color:rgba(255,255,255,0.92);text-decoration:none;background:rgba(0,0,0,0.1);border:1px solid rgba(255,255,255,0.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;animation:fadeIn 1s ease 1.2s forwards;transition:background 0.25s,color 0.25s,border-color 0.25s}
.fv-cta:hover{background:rgba(245,200,66,0.92);color:var(--text);border-color:rgba(245,200,66,0.92)}
/* 第2CTA（営業時間・アクセス直行）: 控えめなトーンで並置 */
.fv-cta-sub{border-color:rgba(255,255,255,0.28);color:rgba(255,255,255,0.78);animation-delay:1.35s}
.fv-logo-svg{width:clamp(330px,28vw,460px);max-width:82vw;display:block;margin-inline:auto}
.fv-arch-text{font-family:'Noto Serif JP','Zen Old Mincho',serif;font-size:20px;fill:white;letter-spacing:3}
.fv-clair-text{font-family:'Great Vibes',cursive;font-size:52px;fill:#2A6E3B}

/* スクロールインジケーター */

/* SECTIONS */
section{padding:5rem 6rem}
.label{font-family:var(--serif);font-size:0.67rem;letter-spacing:0.24em;color:var(--brown);text-transform:uppercase;margin-bottom:1.3rem}
.label::before{content:"";display:inline-block;width:20px;height:2px;background:var(--yellow2);margin-right:0.6rem;vertical-align:middle}
.section-title{font-family:var(--ja);font-size:clamp(1.5rem,3vw,2.7rem);font-weight:300;line-height:1.4;letter-spacing:0.05em;margin-bottom:0.9rem}
.section-body{font-size:0.95rem;color:var(--muted);line-height:2.2;letter-spacing:0.08em}


/* FEATURES（クレールの3つのこだわり） */
.features{background:var(--cream);padding:4.5rem 6rem;text-align:center}
.features .label{margin-bottom:1rem}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;max-width:1080px;margin:2.5rem auto 0}
.feature{display:flex;flex-direction:column;align-items:center;gap:1rem}
.feature-icon{width:54px;height:54px;color:var(--brown);opacity:0.85}
.feature-icon svg{width:100%;height:100%;display:block}
.feature-title{font-family:var(--ja);font-size:1.02rem;font-weight:400;letter-spacing:0.12em;color:var(--text)}
/* 行の長さを均等化して、最終行が「す。」のように数文字だけ残るのを防ぐ。
   未対応ブラウザでは単に従来の折り返しになるだけで、崩れはしない */
.feature-text{font-size:0.88rem;color:var(--muted);line-height:2;letter-spacing:0.06em;max-width:34ch;text-wrap:balance}
.feature-title{text-wrap:balance}

/* BAKERY */
.bakery{background:var(--cream2);padding:3.5rem 6rem}
.bakery-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.bakery-left{display:flex;flex-direction:column;gap:0.6rem}
.bakery-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem;margin-top:1rem}
.bakery-thumb{aspect-ratio:1;overflow:hidden;position:relative}
.bakery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bakery-main-image{height:400px;position:relative;overflow:hidden;align-self:center}
.bakery-main-image img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:opacity 0.4s ease,transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94)}
.bakery-main-image:hover img{transform:scale(1.04)}
.bakery-main-image::before{content:"";position:absolute;top:18px;right:-18px;bottom:-18px;left:18px;background:var(--yellow2);opacity:0.38;z-index:-1}
.see-all-link{font-family:var(--serif);font-size:0.95rem;letter-spacing:0.15em;color:var(--brown);text-decoration:none;border-bottom:1px solid var(--beige);padding-bottom:2px;transition:border-color 0.2s}
.see-all-link:hover{border-color:var(--brown)}

/* GELATO */
.gelato{background:var(--cream);padding:5rem 6rem;min-height:870px}
.gelato-intro{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;margin-bottom:3.5rem}
.gelato-photo{height:400px;overflow:hidden;position:relative;align-self:center}
.gelato-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:opacity 0.4s ease,transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94)}
.gelato-photo:hover img{transform:scale(1.04)}
.gelato-photo::before{content:"";position:absolute;top:18px;left:-18px;right:18px;bottom:-18px;background:var(--wheat);opacity:0.32;z-index:-1}
.gelato-right{display:flex;flex-direction:column;gap:0.9rem}
.gelato-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem;margin-top:1rem}
.gelato-thumb{aspect-ratio:1;overflow:hidden;position:relative}
.gelato-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gelato-tagline{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--light-brown);letter-spacing:0.08em;margin-bottom:1rem;line-height:1.5}
.gelato-flavors-title{font-family:var(--serif);font-size:0.68rem;letter-spacing:0.22em;color:var(--brown);text-transform:uppercase;margin-bottom:1.2rem;display:flex;align-items:center;gap:1rem}
.gelato-flavors-title::after{content:"";flex:1;height:1px;background:var(--beige)}
.flavors-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
/* カードは縦積み（色見本＋名前の行 → タグ → 管理用ボタン）。
   タグは名前の下に置く（右上は選択中の✓バッジが使うため） */
.flavor-card{background:var(--cream2);padding:1.2rem 1.4rem;display:flex;flex-direction:column;align-items:stretch;gap:0;position:relative;overflow:hidden;transition:background 0.3s;cursor:default}
.flavor-card:hover{background:#F0E3C2}
.flavor-main{display:flex;align-items:center;gap:0.8rem;min-width:0}
.flavor-swatch{width:30px;height:30px;border-radius:50%;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,0.12)}
.flavor-name{font-family:var(--ja);font-size:0.92rem;font-weight:300;letter-spacing:0.1em;color:var(--text)}
/* タグが無い時は要素ごと消す（JSが中身だけ差し替えるため空divが残る作りになっている） */
.flavor-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:0.55rem}
.flavor-tags:empty{display:none}
/* 公開ページで1つも選ばれていない時の案内 */
.flavors-empty{font-family:var(--ja);font-size:0.85rem;color:var(--muted);letter-spacing:0.08em;padding:1.2rem 0}
.flavor-tag{font-family:var(--ja);font-size:0.62rem;letter-spacing:0.08em;padding:2px 7px;white-space:nowrap}
/* プレミアムは高級感のあるゴールド。ブランドの黄色(--yellow2)より落ち着いた金にする */
.flavor-premium{color:#3E2C0A;background:linear-gradient(135deg,#C9A227 0%,#F0DA8A 45%,#BE961C 100%);box-shadow:0 1px 3px rgba(122,94,20,0.28)}
/* 管理画面用の「P」マーク。公開ページでは出さない（下の .clair-admin で表示） */
.fl-premium-mark{display:none}

/* STORE */
.store{background:var(--cream);padding:5rem 6rem;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"map info" "faq info";gap:3rem 5rem;align-items:start}
.store-map-wrap{grid-area:map;display:flex;flex-direction:column;gap:1.2rem}
.store-faq{grid-area:faq}
.store-map-embed{width:100%;aspect-ratio:4/3;border:0;display:block}
.store-exterior{width:100%;overflow:hidden;border-top:2px solid var(--cream2)}
.store-exterior img{width:100%;height:auto;display:block;transition:transform 0.7s ease}
.store-exterior:hover img{transform:scale(1.03)}
.store-info{grid-area:info;padding-top:0.3rem}
.store-detail{display:flex;flex-direction:column;gap:1.2rem;margin-top:1.5rem}
.store-row{display:flex;gap:1.3rem}
.store-row-label{font-family:var(--serif);font-size:0.76rem;letter-spacing:0.14em;color:var(--brown);text-transform:uppercase;width:70px;flex-shrink:0;padding-top:0.15rem}
.store-row-value{font-family:var(--ja);font-size:1rem;color:var(--text);letter-spacing:0.08em;line-height:1.95}
.store-row-value small{font-size:0.86em;color:var(--muted)}
.store-row-value a{color:var(--brown);text-decoration:none;border-bottom:1px solid var(--beige);transition:border-color 0.2s}
.store-row-value a:hover{border-color:var(--brown)}
/* 来店直結アクション（経路案内・電話） */
.store-actions{display:flex;flex-wrap:wrap;gap:0.8rem;margin-top:2rem}
.store-action-btn{display:inline-block;padding:0.85rem 1.9rem;font-family:var(--ja);font-size:0.86rem;letter-spacing:0.14em;text-decoration:none;background:var(--text);color:var(--cream);border:1px solid var(--text);transition:background 0.2s,color 0.2s}
.store-action-btn:hover{background:var(--brown);border-color:var(--brown)}
.store-action-btn-outline{background:transparent;color:var(--text)}
.store-action-btn-outline:hover{background:var(--text);color:var(--cream)}
/* 予約・取り置き案内（電話CTAの直下） */
.store-actions-note{margin-top:0.9rem;font-family:var(--ja);font-size:0.85rem;color:var(--muted);letter-spacing:0.06em;line-height:1.9}
.store-divider{width:100%;height:1px;background:rgba(217,192,138,0.32)}

/* FAQ（STOREグリッド内・左カラム下＝カレンダー横の余白。コンパクト仕様） */
.store-faq-title{font-family:var(--serif);font-size:0.7rem;letter-spacing:0.14em;color:var(--brown);text-transform:uppercase;margin-bottom:0.4rem}
.faq-item{border-bottom:1px solid rgba(217,192,138,0.45)}
.faq-item:first-child{border-top:1px solid rgba(217,192,138,0.45)}
.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:0.8rem;padding:0.85rem 0.1rem;font-family:var(--ja);font-size:0.92rem;letter-spacing:0.06em;color:var(--text);transition:color 0.2s;white-space:nowrap;overflow:hidden;min-width:0}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--serif);font-size:1.2rem;color:var(--brown);flex-shrink:0;transition:transform 0.25s ease;line-height:1}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--brown)}
.faq-item summary:focus-visible{outline:2px solid var(--brown);outline-offset:2px}
.faq-a{padding:0 0.1rem 0.95rem;font-size:0.86rem;color:var(--muted);line-height:1.9;letter-spacing:0.04em}
.faq-a a{color:var(--brown);text-decoration:none;border-bottom:1px solid var(--beige);transition:border-color 0.2s}
.faq-a a:hover{border-color:var(--brown)}

/* INSTAGRAM */
.instagram{padding:4.5rem 6rem;background:var(--cream2)}
.instagram-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:1.5rem}
.instagram-link{font-family:var(--serif);font-size:0.7rem;letter-spacing:0.14em;color:var(--brown);text-decoration:none;text-transform:uppercase;border-bottom:1px solid var(--beige);padding-bottom:2px;transition:all 0.2s}
.instagram-link:hover{border-color:var(--brown)}
.instagram-embed-wrap{width:100%}
.instagram-embed-wrap iframe{width:100%;border:0;display:block}
.instagram-embed-placeholder{background:var(--cream);min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.8rem;text-align:center;padding:2rem}
.slot-icon{font-size:1.6rem;opacity:0.3}
.instagram-embed-placeholder p{font-family:var(--ja);font-size:0.78rem;letter-spacing:0.08em;color:var(--muted);line-height:1.9}
.instagram-handle{margin-top:1.4rem;text-align:center;font-family:var(--ja);font-size:0.85rem;letter-spacing:0.12em;color:var(--text)}
.instagram-handle a{color:var(--brown);font-weight:400;text-decoration:none;border-bottom:1px solid var(--brown);transition:border-color 0.2s}
.instagram-handle a:hover{border-color:var(--brown)}

/* FOOTER */
footer{background:var(--text);color:rgba(250,243,225,0.6);padding:3rem 6rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.footer-logo{font-family:var(--serif);font-size:1.5rem;font-style:italic;color:var(--cream);letter-spacing:0.1em;margin-bottom:0.25rem;display:block}
.footer-logo-ja{font-size:0.72rem;letter-spacing:0.18em;color:rgba(250,243,225,0.5);margin-bottom:0.8rem;display:block}
.footer-tagline{font-size:0.78rem;letter-spacing:0.12em;line-height:2.1;color:rgba(250,243,225,0.55)}
.footer-col-title{font-family:var(--serif);font-size:0.68rem;letter-spacing:0.2em;color:var(--wheat);text-transform:uppercase;margin-bottom:1.1rem}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.65rem}
.footer-col ul li a{font-size:0.8rem;color:rgba(250,243,225,0.6);text-decoration:none;letter-spacing:0.1em;transition:color 0.2s}
.footer-col ul li a:hover{color:rgba(250,243,225,0.9)}
.footer-bottom{background:var(--text);border-top:1px solid rgba(250,243,225,0.07);padding:1.4rem 6rem;font-size:0.7rem;color:rgba(250,243,225,0.45);letter-spacing:0.1em;display:flex;justify-content:space-between}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes steamRise{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes nowPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.8)}}

/* BACK TO TOP */
.back-to-top{position:fixed;bottom:1.6rem;right:1.6rem;z-index:95;width:46px;height:46px;border-radius:50%;border:1px solid var(--beige);background:rgba(250,243,225,0.95);backdrop-filter:blur(8px);color:var(--brown);font-size:1.1rem;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity 0.3s,transform 0.3s,visibility 0.3s,bottom 0.28s ease;box-shadow:0 3px 14px rgba(43,43,43,0.12)}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--brown);color:var(--cream);border-color:var(--brown)}

/* ━━ スマホ用固定アクションバー（営業状態・電話・地図） ━━ */
.mobile-bar{display:none}
@media(max-width:768px){
  .mobile-bar{
    display:flex;align-items:center;gap:0.6rem;
    position:fixed;left:0;right:0;bottom:0;z-index:96;
    padding:0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
    background:rgba(250,243,225,0.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-top:2px solid var(--yellow2);
    box-shadow:0 -4px 18px rgba(43,43,43,0.08);
  }
  .mb-status{flex:1;display:flex;align-items:center;gap:0.5rem;font-family:var(--ja);font-size:0.9rem;letter-spacing:0.04em;color:var(--text);min-width:0;white-space:nowrap;overflow:hidden}
  .mb-btn{flex-shrink:0;font-family:var(--ja);font-size:0.9rem;letter-spacing:0.08em;text-decoration:none;padding:0.6rem 1.15rem;color:var(--cream);background:var(--brown);border:1px solid var(--brown)}
  .mb-btn-map{color:var(--brown);background:none;border-color:var(--beige)}
  /* バーの高さぶんコンテンツ下端を確保し、戻るボタンはバーの上に逃がす */
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  /* 固定バーがFVの下端に重なるぶん、ロゴの中央寄せがその分だけ下にずれて見える。
     box-sizing:border-box なのでpaddingを足してもFVの高さ自体は変わらない */
  .hero{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  .back-to-top{bottom:calc(4.8rem + env(safe-area-inset-bottom))}
  /* 下へスクロールしている間だけバーを隠す（nav.js が body に .mb-hidden を付ける）。
     body の padding-bottom は残すので、隠れている間に本文が下に潜り込むことはない */
  .mobile-bar{transition:transform 0.28s ease}
  body.mb-hidden .mobile-bar{transform:translateY(100%)}
  /* バーが隠れたら、戻るボタンも下へ降ろす（浮いて見えないように） */
  body.mb-hidden .back-to-top{bottom:calc(1.6rem + env(safe-area-inset-bottom))}
}

/* キーボードフォーカス */
.nav-links a:focus-visible,.back-to-top:focus-visible,.nav-burger:focus-visible{outline:2px solid var(--brown);outline-offset:2px}

/* REVEAL */
.reveal{opacity:0;transform:translateY(32px);transition:opacity 0.9s ease,transform 0.9s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:0.12s}.reveal-delay-2{transition-delay:0.24s}.reveal-delay-3{transition-delay:0.36s}
.reveal-slow{opacity:0;transform:translateY(18px);transition:opacity 1.3s ease,transform 1.3s ease}
.reveal-slow.visible{opacity:1;transform:translateY(0)}

/* ━━ 登場演出「静かな上質」（2026-09-27） ━━
   共通ルール: 遅らせたい分を --d に入れ、各 transition の遅延に足す。
   一律のフェードアップ（.reveal）とは別に、写真とアイコンだけ専用の出し方をする。 */

/* .reveal-group … それ自体は動かない器。IntersectionObserver から .visible をもらい、
   中の子（アイコンの線・見出し・本文）が各自のタイミングで動く。 */
.reveal-group{--d:0s}

/* 写真: 下からマスクが開き、中の画像は少し大きい状態からゆっくり等倍へ戻る。
   ズームに transform ではなく scale プロパティを使うのは、
   既存の :hover{transform:scale(1.04)} と打ち消し合わないようにするため。
   clip-path の最終形 inset(0 0 0 0) は overflow:hidden と同じ範囲なので、
   開ききった後の見た目は従来と完全に同じ。 */
/* ※ clip-path は内側の .photo-mask に掛けること。監視している .reveal-mask 自身に掛けると、
   Chrome は要素自身の clip-path を IntersectionObserver の判定に含めるため交差率が常に0になり、
   「隠れているので発火しない → 発火しないので隠れたまま」で永久に出てこない（実測で確認）。 */
.reveal-mask .photo-mask{width:100%;height:100%;clip-path:inset(0 0 100% 0);transition:clip-path 1.15s cubic-bezier(0.22,1,0.36,1)}
.reveal-mask.visible .photo-mask{clip-path:inset(0 0 0 0)}
/* transform(0.8s) は写真切替のホバー用、opacity(0.4s) はサムネ切替用。
   ここで transition をまとめて指定し直すので、その2つも必ず書き戻すこと */
.reveal-mask img{scale:1.12;transition:scale 1.7s cubic-bezier(0.22,1,0.36,1),opacity 0.4s ease,transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94)}
.reveal-mask.visible img{scale:1}

/* サムネイル4枚: 少し縮んだ状態から、左から順に等倍へ。
   遅延は :nth-child で持たせる（.reveal-delay-* を付けると transition-delay が
   ホバーの拡大にも効いてしまい、指を乗せてから動き出すまで間が空く）。 */
.reveal-thumb{--d:0s;scale:0.9;transition:scale 0.85s cubic-bezier(0.22,1,0.36,1) var(--d)}
.reveal-thumb.visible{scale:1}
.reveal-thumb img{opacity:0;transition:opacity 0.85s ease var(--d)}
.reveal-thumb.visible img{opacity:1}
.reveal-thumb:nth-child(2){--d:0.1s}
.reveal-thumb:nth-child(3){--d:0.2s}
.reveal-thumb:nth-child(4){--d:0.3s}

/* 3つのこだわり: アイコンの線が描かれ、そのあと見出し → 本文。
   --len（図形の実長）と --dd（図形ごとのずらし）は main.js が測って入れる。 */
.feature:nth-child(2){--d:0.2s}
.feature:nth-child(3){--d:0.4s}
.feature-icon [data-draw]{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.4s cubic-bezier(0.33,1,0.68,1) calc(var(--d) + var(--dd,0s))}
.reveal-group.visible .feature-icon [data-draw]{stroke-dashoffset:0}
.reveal-group .feature-title,.reveal-group .feature-text{opacity:0;transform:translateY(12px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(0.22,1,0.36,1)}
/* 全体の長さは 3つ目の本文が出終わる時点＝ --d(0.4s) + 遅延 + 1.1s で決まる。
   2026-10-06に遅延を順次前倒しして、2.50秒 → 2.40 → 2.30 → 2.10秒にした（内部の間合いは据え置き） */
.reveal-group.visible .feature-title{opacity:1;transform:none;transition-delay:calc(var(--d) + 0.4s)}
.reveal-group.visible .feature-text{opacity:1;transform:none;transition-delay:calc(var(--d) + 0.6s)}

/* STORE CALENDAR (note: gelato-title-row/photo2 removed) */

/* STORE CALENDAR */
.store-calendar-section{margin-top:0.5rem}
.cal-head{display:flex;align-items:center;gap:0.8rem;margin-bottom:0.8rem}
.cal-month-label{font-family:var(--serif);font-size:0.9rem;font-weight:400;letter-spacing:0.08em;color:var(--text);flex:1;text-align:center}
.cal-nav{background:none;border:1px solid var(--beige);color:var(--muted);width:28px;height:28px;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:all 0.2s;padding:0;line-height:1;position:relative}
/* 見た目は28pxのまま、指で押せる範囲だけ44px四方に広げる（28+8+8）。
   ボタン自体を大きくするとカレンダー上部が重くなるため、当たり判定だけ拡張する */
.cal-nav::after{content:"";position:absolute;inset:-8px}
.cal-nav:hover{border-color:var(--brown);color:var(--brown)}
.cal-nav:focus-visible{outline:2px solid var(--brown);outline-offset:2px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-dow{font-family:var(--serif);font-size:0.68rem;letter-spacing:0.1em;color:var(--muted);text-align:center;padding:0.3rem 0;text-transform:uppercase}
.cal-dow-sat{color:#5080B0}
.cal-dow-sun{color:#B03030}
.cal-day{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;font-family:var(--serif);font-size:0.78rem;gap:1px;transition:background 0.15s}
.cal-empty{background:transparent}
.cal-num{line-height:1;color:var(--text);z-index:1;position:relative}
.cal-sat .cal-num{color:#5080B0}
.cal-sun .cal-num{color:#B03030}
.cal-today{background:rgba(231,194,125,0.2)}
.cal-today .cal-num{font-weight:400;color:var(--brown)}
.cal-holiday{position:relative}
.cal-holiday .cal-num{color:#C02020}
.cal-holiday::before{content:"";position:absolute;inset:3px;border-radius:50%;border:2px solid #C02020;pointer-events:none}
.cal-kyu{font-family:var(--ja);font-size:0.58rem;color:#C02020;line-height:1;letter-spacing:0;z-index:1}
.cal-editable{cursor:pointer}
.cal-editable:hover{background:rgba(192,32,32,0.06)}
.cal-admin-hint{font-family:var(--ja);font-size:0.72rem;color:var(--muted);letter-spacing:0.06em;margin-top:0.6rem;text-align:center}

/* EVENT SECTION */
.event-section{padding:3rem 6rem;background:var(--cream2)}
/* お知らせが無い時（Instagramへの案内だけの時）は、場所を取りすぎないよう詰める。
   main.js が .is-empty を付け外しする */
.event-section.is-empty{padding-top:2.2rem;padding-bottom:2.2rem}
.event-section.is-empty .label{margin-bottom:0.6rem}
/* 中身が案内文だけなので、大きな「お知らせ」見出しは主張を弱める */
.event-section.is-empty .section-title{font-size:clamp(1.1rem,2vw,1.5rem);margin-bottom:0}
.event-display{margin-top:1.1rem}
.event-section.is-empty .event-display{margin-top:0.8rem}
/* お知らせが無い時の案内（セクションを空にせずInstagramへ誘導する） */
.event-empty{font-family:var(--ja);font-size:0.85rem;color:var(--muted);letter-spacing:0.08em;line-height:2.1;display:flex;flex-direction:column;gap:0.9rem;align-items:flex-start;max-width:52ch}
.event-empty-link{font-family:var(--ja);font-size:0.82rem;letter-spacing:0.1em;color:var(--brown);border-bottom:1px solid var(--beige);padding-bottom:2px;transition:color 0.25s,border-color 0.25s}
.event-empty-link:hover{color:var(--text);border-color:var(--yellow2)}
/* お知らせが1件だけのときの見せ方（2026-10-06）。
   .event-list に入るのは常に1件（2件以上は下の .event-carousel が受け持つ）。
   写真を左に寄せると1件だけ場違いに見えるので、カードごと中央に置く。 */
.event-list .event-card{display:block;max-width:480px;margin-inline:auto}
.event-list .event-card .event-img-wrap{max-width:none;width:100%}
.event-list .event-text{margin-top:1rem}
.event-card{display:grid;grid-template-columns:250px 1fr;gap:1.6rem;align-items:start}
/* ━━ 写真にタイトルを重ねる（2026-10-06） ━━
   .event-card 配下だけに効かせる。.event-img-wrap は管理画面のプレビューと共用で、
   あちらは .event-edit の下にあるため巻き込まれない。
   帯は .has-title が付いた時だけ出す＝タイトルが空の写真を無意味に暗くしないため。 */
.event-card .event-img-wrap{position:relative}
.event-card .event-img-wrap.has-title::after{
  content:'';position:absolute;inset:auto 0 0 0;height:62%;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,0.74),rgba(0,0,0,0.40) 42%,rgba(0,0,0,0));
}
/* .event-card-title より後に書けないので、クラス2つ分の強さで上書きする
   （この塊は .event-card-title の定義より前にあり、同じ強さだと負ける） */
.event-card .event-title-on{
  position:absolute;left:1.1rem;right:1.1rem;bottom:0.9rem;margin:0;z-index:1;
  color:#fff;font-size:1.05rem;line-height:1.55;
  /* 明るい写真でも読めるよう、帯に加えて文字自体にも影を置く */
  text-shadow:0 1px 4px rgba(0,0,0,0.6),0 0 1px rgba(0,0,0,0.5);
}
/* 写真の上限。.event-img-wrap は管理画面のプレビューと共用のため、公開カード配下だけに効かせる */
.event-card .event-img-wrap{max-width:300px}
.event-img-wrap{overflow:hidden;aspect-ratio:4/3}
.event-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform 0.7s ease}
.event-img-wrap:hover .event-img{transform:scale(1.04)}
.event-card-title{font-family:var(--ja);font-size:1rem;font-weight:300;letter-spacing:0.1em;color:var(--text);margin-bottom:0.25rem}
.event-card-body{font-family:var(--ja);font-size:0.8rem;color:var(--muted);letter-spacing:0.08em;line-height:2}
/* ━━ お知らせが2件以上のときの横送り（2026-10-06） ━━
   縦に積むと件数が増えるほど下のセクションが遠ざかるので、1件ずつ中央に見せる。
   スワイプと位置合わせは scroll-snap に任せ、JSは矢印と端の判定だけ持つ。
   --ev-card を1か所で持つのは、トラックの左右余白もこの幅から計算するため。 */
.event-carousel{--ev-card:340px}
.event-track{
  /* 高さは揃えない。写真の無いお知らせまで写真付きの高さに伸ばすと、
     カードの中に大きな空白が出て「中身が足りない」ように見える。
     代わりに上下中央に置く（上寄せだとカードの下だけが大きく空いて不格好） */
  display:flex;gap:1.2rem;align-items:center;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* 先頭・末尾のカードも中央に来られるよう左右に余白を作る */
  padding-inline:max(0px,calc((100% - var(--ev-card))/2));
  padding-block:0.3rem;
  scrollbar-width:none;-ms-overflow-style:none;
}
.event-track::-webkit-scrollbar{display:none}
.event-track:focus-visible{outline:2px solid var(--brown);outline-offset:4px}
/* カードは縦積みに組み替える（通常の 250px+1fr のグリッドでは幅が足りない） */
.event-track .event-card{
  flex:0 0 var(--ev-card);scroll-snap-align:center;
  display:flex;flex-direction:column;gap:0;
  background:#FFFDF4;border:1px solid var(--beige);overflow:hidden;
}
.event-track .event-card .event-img-wrap{max-width:none;width:100%}
.event-track .event-text{padding:1rem 1.1rem 1.2rem}
.event-track .event-card-noimg .event-text{padding-top:1.3rem}
.event-nav{display:flex;justify-content:center;gap:1rem;margin-top:1rem}
.event-arrow{
  width:44px;height:44px;border-radius:50%;padding:0;
  border:1px solid var(--beige);background:transparent;color:var(--brown);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color 0.2s,color 0.2s,opacity 0.2s;
}
.event-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.event-arrow:hover:not(:disabled){border-color:var(--yellow2);color:var(--text)}
.event-arrow:disabled{opacity:0.28;cursor:default}
.event-edit{display:grid;grid-template-columns:260px 1fr;gap:2.5rem;align-items:start}
.event-img-placeholder{width:100%;aspect-ratio:4/3;background:var(--cream2);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:0.7rem;letter-spacing:0.12em;color:var(--muted);text-transform:uppercase}
.event-edit-fields{display:flex;flex-direction:column;gap:0.6rem}
.event-edit-label{font-family:var(--serif);font-size:0.7rem;letter-spacing:0.18em;color:var(--brown);text-transform:uppercase}
.event-input{padding:0.55rem 0.7rem;font-family:var(--ja);font-size:0.84rem;border:1px solid var(--beige);background:#fff;color:var(--text);outline:none;width:100%;transition:border-color 0.2s;letter-spacing:0.06em}
.event-input:focus{border-color:var(--brown)}
.event-textarea{padding:0.55rem 0.7rem;font-family:var(--ja);font-size:0.84rem;border:1px solid var(--beige);background:#fff;color:var(--text);outline:none;width:100%;transition:border-color 0.2s;letter-spacing:0.06em;resize:vertical;line-height:1.8}
.event-textarea:focus{border-color:var(--brown)}
.event-save-btn{margin-top:0.4rem;padding:0.65rem 1.4rem;font-family:var(--ja);font-size:0.78rem;letter-spacing:0.12em;background:var(--text);color:var(--cream);border:none;cursor:pointer;align-self:flex-start;transition:background 0.2s}
.event-save-btn:hover{background:var(--brown)}
/* お知らせの管理UI（複数件。2026-09-29） */
.ev-admin{display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start}
.ev-admin-list{display:flex;flex-direction:column;gap:1.6rem;width:100%}
.ev-none{font-family:var(--ja);font-size:0.84rem;color:var(--muted);letter-spacing:0.06em;margin:0}
.ev-item{border:1px solid var(--beige);background:rgba(255,255,255,0.45);padding:1.2rem 1.3rem}
.ev-item-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.ev-item-no{font-family:var(--serif);font-size:0.72rem;letter-spacing:0.16em;color:var(--brown);text-transform:uppercase}
.ev-item-ops{display:flex;gap:0.4rem}
/* 管理画面は指で押すことも想定して44pxを確保する（他の管理UIと揃える） */
.ev-op{min-width:44px;min-height:44px;padding:0 0.7rem;font-family:var(--ja);font-size:0.78rem;color:var(--muted);background:#fff;border:1px solid var(--beige);cursor:pointer;transition:border-color 0.2s,color 0.2s}
.ev-op:hover:not(:disabled){border-color:var(--brown);color:var(--brown)}
.ev-op:disabled{opacity:0.35;cursor:default}
.ev-op-del:hover:not(:disabled){border-color:#B83030;color:#B83030}
.ev-add-btn{min-height:44px;padding:0.6rem 1.3rem;font-family:var(--ja);font-size:0.8rem;letter-spacing:0.1em;color:var(--brown);background:#fff;border:1px dashed var(--beige);cursor:pointer;transition:border-color 0.2s,background 0.2s}
.ev-add-btn:hover{border-color:var(--yellow2);background:rgba(245,200,66,0.12)}
/* お知らせの写真選択（2026-09-29）。menu.htmlの「新しいパンを追加」の .mad-file-btn と見た目を揃えている */
.event-photo-row{display:flex;align-items:center;gap:0.7rem;flex-wrap:wrap}
.event-file-btn{display:inline-flex;align-items:center;min-height:44px;padding:0.6rem 1.2rem;font-family:var(--ja);font-size:0.78rem;letter-spacing:0.1em;color:var(--brown);border:1px solid var(--beige);background:#fff;cursor:pointer;transition:border-color 0.2s,background 0.2s}
.event-file-btn:hover{border-color:var(--yellow);background:rgba(245,200,66,0.12)}
.event-file-clear{display:inline-flex;align-items:center;min-height:44px;padding:0.6rem 1rem;font-family:var(--ja);font-size:0.74rem;letter-spacing:0.08em;color:var(--muted);background:none;border:1px solid var(--beige);cursor:pointer;transition:border-color 0.2s,color 0.2s}
.event-file-clear:hover{border-color:#B83030;color:#B83030}
/* display を明示すると hidden 属性の display:none が負けるので、明示的に戻す */
.event-file-clear[hidden]{display:none}
.event-err{font-size:0.74rem;color:#B83030;letter-spacing:0.04em;min-height:1.1em;margin:0}

@media(max-width:1024px){
  .flavors-grid{grid-template-columns:repeat(3,1fr)}
  .event-card{grid-template-columns:1fr;gap:0.8rem}
  /* 1カラムでは写真が画面幅いっぱいになるので、上限を決めて小さく見せる */
  .event-card .event-img-wrap{max-width:280px}
  .event-edit{grid-template-columns:1fr}
}
@media(max-width:900px){
  /* backdrop-filter付きの祖先はfixed子孫の基準になるため、ドロワーが正しく全画面基準になるよう無効化。
     すりガラスの代わりに背景の不透明度を上げて視認性を確保 */
  nav{padding:0.6rem 1.4rem;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(250,243,225,0.97)}
  /* ハンバーガーメニュー化 */
  .nav-burger{display:flex}
  .nav-links{position:fixed;top:0;right:0;bottom:0;width:min(75vw,300px);flex-direction:column;align-items:flex-start;justify-content:center;gap:1.8rem;padding:2rem;background:rgba(250,243,225,0.98);backdrop-filter:blur(20px);box-shadow:-8px 0 30px rgba(43,43,43,0.12);transform:translateX(100%);transition:transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);z-index:105}
  .nav-links.open{transform:translateX(0)}
  .nav-links a{font-size:0.92rem}
  .fv-badge{top:1.2rem;left:1.2rem;font-size:0.66rem;letter-spacing:0.16em}
  .fv-hours{top:1.2rem;right:1.2rem;font-size:0.72rem;padding:0.4rem 0.8rem}
  .fv-logo-svg{width:280px}
  section,.store,.gelato,.event-section{padding:3.5rem 1.4rem}
  /* Instagramフィードはモバイルでは全幅表示にして写真を大きく見せる
     （見出し・注記だけ余白を維持） */
  .instagram{padding:3.5rem 0}
  .instagram-header,.instagram-handle{padding-left:1.4rem;padding-right:1.4rem}
  .store,.gelato-intro{grid-template-columns:1fr;gap:3rem}
  .gelato-intro{gap:1.2rem}
  /* こだわりは1カラム化 */
  .features{padding:3.5rem 1.4rem}
  .features-grid{grid-template-columns:1fr;gap:2.4rem}
  /* 1カラム時は 地図→店舗情報→FAQ の順に縦積み */
  .store{grid-template-areas:"map" "info" "faq";gap:2.5rem}
  /* PCの2カラム前提のmin-heightを解除（1カラム時の下部空白の原因） */
  .bakery,.gelato{min-height:0}
  .bakery{padding:2.5rem 1.4rem}
  .bakery-grid{grid-template-columns:1fr;gap:1.2rem}
  .bakery-main-image{height:280px;width:100%;max-width:480px;margin:0 auto}
  .bakery-thumbs,.gelato-thumbs{grid-template-columns:repeat(4,1fr)}
  /* 1カラム時はジェラートもパンと同じ並び（テキスト＋サムネ4枚 → 大きい写真）にする。
     PCは左右非対称のままにしたいので、順番の入れ替えはこのブレークポイント内だけ */
  .gelato-right{order:1;gap:0.7rem}
  .gelato-photo{order:2;height:280px;width:100%;max-width:480px;margin:0 auto}
  .flavors-grid{grid-template-columns:repeat(2,1fr)}
  footer{grid-template-columns:1fr;padding:3rem 1.4rem}
  .footer-bottom{padding:1.1rem 1.4rem;flex-direction:column;gap:0.3rem}
  .gelato-photo2{width:200px;height:200px}
  .event-card,.event-edit{grid-template-columns:1fr}
  /* 1カラムではセクションの左右余白(1.4rem)を打ち消して画面幅いっぱいに流す。
     こうしないとカードの左右に隣のカードが覗く余地が1px程度しか残らず、
     「横に続きがある」ことが伝わらない（実測: 覗き幅 1.6px → 24px）。
     余白の値は .event-section の padding と対になっているので、片方だけ変えないこと。 */
  /* 1カラムでも上下を詰める（共通の3.5remだとお知らせ欄が間延びする） */
  .event-section{padding-top:2.6rem;padding-bottom:2.6rem}
  .event-track{
    margin-inline:-1.4rem;
    /* 画面幅いっぱいに流したので、中央寄せの基準も画面幅にする。
       %はトラック自身ではなく親(セクションの内側)の幅で解決されるため、
       そのままだとカードが左に22pxずれる（実測）。 */
    padding-inline:max(0px,calc((100vw - var(--ev-card))/2));
  }
  .event-carousel{--ev-card:min(78vw,340px)}
}
@media(max-width:600px){
  /* FVスライドはモバイル用縮小版（photo-small/ 幅900px）に差し替えて初回表示を軽くする。
     背景はHTML側のインライン指定のため !important で上書きする */
  .fv-slide:nth-child(1){background-image:url('../photo-small/FV2.jpg') !important}
  .fv-slide:nth-child(2){background-image:url('../photo-small/FV5.jpg') !important}
  .fv-slide:nth-child(3){background-image:url('../photo-small/FV4.jpg') !important}
  .fv-slide:nth-child(4){background-image:url('../photo-small/FV7.jpg') !important}
  /* 小画面ではロゴを一回り小さくしてバーガーボタンと干渉しないようにする */
  .nav-logo-en{font-size:1.32rem}
  .nav-logo-ja{font-size:0.72rem}
  .nav-since{font-size:0.66rem}
  /* 2026-09-27: 開いた瞬間にFVで画面を埋める方針に変更（以前は64svh。
     高さを抑えるほど横長写真の左右が見えるが、EVENT & NEWS が下に覗くのをやめた）。
     PCと同じ calc(100svh - nav) ＝ 次のセクションがちょうど画面外に来る高さ。
     dvh ではなく svh を使うのは、スクロールでアドレスバーが隠れるたびに
     FVの高さが変わってガタつくのを避けるため */
  .hero{height:calc(100svh - var(--nav-h,96px));min-height:500px}
  .fv-logo-svg{max-width:68vw}
  /* 小画面では .fv-badge が消えるため、エリア名はここが唯一の所在地表示になる */
  .fv-area{margin-top:1rem;font-size:0.78rem;letter-spacing:0.12em}
  .fv-cta-row{margin-top:1.6rem;gap:0.6rem}
  .fv-area + .fv-cta-row{margin-top:1.3rem}
  .fv-cta{padding:0.75rem 2.2rem;font-size:0.8rem}
  /* 装飾の英字タグラインは営業時間バッジと重なるため小画面では非表示（内容はロゴ・ナビと重複） */
  .fv-badge{display:none}
  /* 毎日10種固定のため、端数の出ない2列×5行にする。
     10種並ぶと縦に長くなるので、小画面では余白と文字を詰めて高さを抑える */
  .flavors-grid{grid-template-columns:repeat(2,1fr)}
  .flavor-card{padding:0.6rem 0.75rem}
  .flavor-main{gap:0.5rem}
  .flavor-swatch{width:19px;height:19px}
  .flavor-name{font-size:0.78rem;letter-spacing:0.02em;line-height:1.4}
  .flavor-tag{font-size:0.56rem;padding:1px 4px;letter-spacing:0.04em}
  .flavor-tags{margin-top:0.3rem;gap:3px}
  .gelato-flavors-title{margin-bottom:0.8rem;gap:0.7rem}
  /* お知らせが無い時は小画面でもさらに詰める */
  .event-section.is-empty{padding-top:1.8rem;padding-bottom:1.8rem}
  .event-empty{font-size:0.8rem;line-height:1.95;gap:0.7rem}
  /* FAQは質問1行厳守＆余白最小限（縦に伸ばさない） */
  .faq-item summary{font-size:0.88rem;letter-spacing:0.02em;padding:0.75rem 0}
  .faq-a{font-size:0.84rem;letter-spacing:0.02em;padding-bottom:0.85rem}
}

/* ━━ 動きを減らす設定のユーザーへの配慮（前庭障害・乗り物酔い対策） ━━ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
  .reveal,.reveal-slow{opacity:1;transform:none}
  .fv-slide{filter:none;transform:none}
  /* スクロールでバーが出入りすると酔いやすいので、常に表示のままにする */
  .mobile-bar{transition:none}
  body.mb-hidden .mobile-bar{transform:none}
  /* お知らせの横送りも、矢印で一気に動かさず即座に位置だけ変える */
  .event-track{scroll-behavior:auto}
  /* 登場演出も全て最終状態で静止させる */
  .reveal-mask .photo-mask{clip-path:none}
  .reveal-mask img,.reveal-thumb{scale:1}
  .reveal-thumb img,.reveal-group .feature-title,.reveal-group .feature-text{opacity:1;transform:none}
  .feature-icon [data-draw]{stroke-dasharray:none;stroke-dashoffset:0}
}
/* お知らせの外部リンク（2026-09-30）。新聞・テレビの記事へ飛ばす */
.event-card-link{display:inline-block;margin-top:0.7rem;font-family:var(--ja);font-size:0.82rem;letter-spacing:0.08em;color:var(--brown);text-decoration:none;border-bottom:1px solid var(--beige);padding-bottom:2px;transition:color 0.2s,border-color 0.2s}
.event-card-link:hover{color:var(--text);border-color:var(--yellow2)}