/* =========================================================
   style.css（統合・競合解消・完全版）
   - 横スクロール根絶
   - インジケーターの確実なフェード消失
   - ↑TOP（PC=フッター右下内／SP=右下固定）
   - flow-lane を単一ソースに統一
   - 既存デザインは維持
   ========================================================= */

/* ==== Tokens ==== */
:root{
  --brand:#35a1a8;
  --white:#fff;
  --shadow:0 20px 60px rgba(0,0,0,.25);
  --radius:14px;
  --gap: clamp(16px, 3vw, 28px);
  --burger-gap: 0px;
  --brand-dark: color-mix(in oklab, var(--brand) 82%, #000 18%);
}

/* ---- ルート（横はみ出し根絶） ---- */
html { height: auto; min-height: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { height: auto; min-height: 100%; margin:0; color:#222; background:#fff;
       font-family: "Hina Mincho", serif; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  min-height: 100svh;                          /* iOSのアドレスバー対策 */
  display: flex;
  flex-direction: column;}

h1,h2,h3.h4,h5{
	margin: 0px;
	padding: 0px;
}

/* ありがちなラッパーは window に一本化 */
#page, .page, .wrapper, .site-wrap, main, .site-main, .container-root{
  height:auto !important; min-height:100%; overflow: visible !important;
}

/* ==== 固定UI（ロゴ & ハンバーガー） ==== */
.site-ui{ position: fixed; inset: 0 0 auto 0; pointer-events:none; z-index: 30; }
.site-logo{
  position: fixed; top: clamp(12px, 2.8vw, 20px); left: clamp(14px, 3vw, 24px);
  z-index: 60; opacity: 0; visibility: visible; transform-origin: left top; transform: scale(1);
   transition: opacity .3s ease, transform .2s ease;
	pointer-events: auto;
	/* ★追加: ブロック要素として領域を確保 */
  display: block;
  /* ★追加: img タグの幅と合わせる */
  width: 200px;
}
.site-logo img{ width: 200px; height: auto; display: block;}
body.ui-in .site-logo{ opacity:1; }
body.logo-stuck .site-logo{ top: clamp(12px, 2.8vw, 20px); }
body.is-stuck .site-logo{ transform: scale(.6) !important; }
body.logo-in .site-logo{ opacity: 1; }

/* ==== ドロワー ==== */
.site-drawer{
  position: fixed; inset:0 0 0 auto; width:min(84vw, 360px);
  background: var(--brand); color: #fff; translate: 100% 0;
  transition: translate .28s ease; z-index: 40; padding: 88px 26px 26px;
  font-family: "Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}
.site-drawer__list{ list-style:none; margin:0; padding:0; }
.site-drawer__list a{ display:block; padding:14px 6px; color:#fff; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.35); }
body.menu-open .site-drawer{ translate:0 0; }
.site-dimmer{ position: fixed; inset:0; background: rgba(255,255,255,.75); z-index: 35; opacity:0; pointer-events:none; transition: opacity .2s ease; }
body.menu-open .site-dimmer{ opacity:1; pointer-events:auto; }
.site-drawer__close{
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 0; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.site-drawer__close i{ position: relative; width: 18px; height: 18px; display: block; }
.site-drawer__close i::before,.site-drawer__close i::after{
  content:""; position:absolute; inset: calc(50% - 1px) 0; height: 2px; background: var(--brand); border-radius: 1px;
}
.site-drawer__close i::before{ transform: rotate(45deg); }
.site-drawer__close i::after { transform: rotate(-45deg); }
.site-drawer__actions{
  /* position: absolute; left: 26px; right: 26px; bottom: 22px; を削除 */
  position: static;
  display: flex;
  gap: 12px;
  align-items: center;

  /* ULのすぐ下に見せるための余白&区切り線 */
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255,255,255,.35);
}
.site-drawer__actions .drawer-icon{
  width: 44px; height: 44px; border-radius: 50%; background: #fff; display:grid; place-items:center;
  color: var(--brand); border:0; text-decoration:none; box-shadow:0 6px 16px rgba(0,0,0,.16);
}
.site-drawer__actions .drawer-icon svg{ width: 22px; height: 22px; display:block; }

/* （任意）最後のメニュー項目はボーダーいらない */
.site-drawer__list li:last-child a{
  border-bottom: none;
}

/* （任意）ドロワーの内側余白を微調整 */
.site-drawer{
  padding: 88px 26px 26px; /* そのままでOK。下部固定でなくなるのでオーバーラップしない */
}

/* 初期状態：リンクは少し右＆透明、アクションは非表示 */
.site-drawer__list a{
  opacity: 0;
  transform: translateX(40px);
  transition: none;
  will-change: transform, opacity;
}
.site-drawer__actions{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
  will-change: transform, opacity, filter;
}

/* ゆっくりスライド＆フェード */
@keyframes drawerSlideInSlow {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes drawerFadeUpSlow {
  from { opacity: 0; transform: translateY(10px); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0);  filter: blur(0); }
}

/* ディレイを長めに（0.14s刻み）、時間も長め（0.72s） */
body.menu-open .site-drawer__list li:nth-child(1) a{ animation: drawerSlideInSlow .72s cubic-bezier(.22,1,.36,1) both; animation-delay: 0s; }
body.menu-open .site-drawer__list li:nth-child(2) a{ animation: drawerSlideInSlow .72s cubic-bezier(.22,1,.36,1) both; animation-delay: .14s; }
body.menu-open .site-drawer__list li:nth-child(3) a{ animation: drawerSlideInSlow .72s cubic-bezier(.22,1,.36,1) both; animation-delay: .28s; }
body.menu-open .site-drawer__list li:nth-child(4) a{ animation: drawerSlideInSlow .72s cubic-bezier(.22,1,.36,1) both; animation-delay: .42s; }
body.menu-open .site-drawer__list li:nth-child(5) a{ animation: drawerSlideInSlow .72s cubic-bezier(.22,1,.36,1) both; animation-delay: .56s; }
body.menu-open .site-drawer__list li:nth-child(6) a{ animation: drawerSlideInSlow .72s cubic-bezier(.22,1,.36,1) both; animation-delay: .70s; }
body.menu-open .site-drawer__list li:nth-child(7) a{ animation: drawerSlideInSlow .72s cubic-bezier(.22,1,.36,1) both; animation-delay: .84s; }

/* すべて出た“あと”にアイコンをふわっと（余韻を少しプラス） */
body.menu-open .site-drawer__actions{
  animation: drawerFadeUpSlow .80s cubic-bezier(.22,1,.36,1) both;
  animation-delay: 1.06s; /* 最後のli(.84s) + 0.22sの余韻 */
}

/* 省エネ（ユーザーが簡易動作希望のとき） */
@media (prefers-reduced-motion: reduce){
  .site-drawer__list a,
  .site-drawer__actions{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ==== メニュータイトル ==== */
.drawer-title{
  font-family: "Shippori Mincho", serif;
  font-size: 24px;
  letter-spacing: .1em;
  color: #fff;
  text-align: center;
  margin: 40px 0 30px;
  position: relative;
  display: inline-block;
}

/* 下線（中央から両端へ伸びる） */
.drawer-title::after{
  content: "";
  position: absolute;
  bottom: 0;              /* テキスト直下に */
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center center; /* ← 中央から伸びる */
  transition: transform 0.6s ease;
}

/* メニューオープンで発火 */
body.menu-open .drawer-title::after{
  transform: scaleX(1);
}


/* ==== ヒーロー ==== */
.hero{ position: relative; min-height: 100svh; overflow: clip; background: var(--brand); color: var(--white); }
.hero__slides{ position:absolute; inset:0; }
.hero__slide{ position:absolute; inset:0; opacity:0; transition: opacity .7s ease; }
.hero__slide.is-active{ opacity:1; }
.hero__bg{ width:100%; height:100%; object-fit:cover; display:block; filter: brightness(1.1) saturate(1.2) contrast(1.2); }
.hero .hero__slide:first-child .hero__bg{ clip-path: inset(0 0 0 0); }
.hero.reveal-start .hero__slide:first-child .hero__bg{ clip-path: inset(0 100% 0 0); animation: revealX .9s cubic-bezier(.2,.8,.2,1) forwards; }
.hero.post-initial .hero__slide.is-active .hero__bg{ animation: zoomOut 8s ease-out forwards; }
.hero__overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.36)); pointer-events:none; }
.hero__content{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; z-index:2; padding:0 5vw; text-shadow:0 10px 30px rgba(0,0,0,.35); font-family:"Hina Mincho", serif;
  opacity:0; transition: opacity .6s ease;
}
body.ui-in .hero__content{ opacity:1; }
.hero__content > *{ margin:0; }
.hero__title{ font-size: clamp(20px, 6vw, 40px); line-height: 1.08; margin:.05em 0 .2em; }
.hero__lead{ font-size: clamp(14px, 2.3vw, 18px); line-height: 1.4; opacity:.95; }
.hero__dots{ position:absolute; left:50%; bottom: clamp(18px, 4.8vh, 36px); transform: translateX(-50%); display:flex; gap:8px; z-index:2; opacity:0; transition: opacity .5s ease .1s; }
body.ui-in .hero__dots{ opacity:1; }
.hero__dots button{ width:10px; height:10px; border-radius:50%; border:0; padding:0; cursor:pointer; text-indent:-9999px; background: rgba(255,255,255,.55); }
.hero__dots button.is-active{ background:#fff; outline:2px solid var(--brand); outline-offset:2px; }
.hero__sentinel{ position:absolute; left:0; right:0; bottom:-1px; height:2px; }

/* Animations */
@keyframes revealX{ from{ clip-path: inset(0 100% 0 0); } to{ clip-path: inset(0 0 0 0); } }
@keyframes zoomOut{ from{ transform: scale(1.08); } to{ transform: scale(1); } }

/* Reduce Motion */
@media (prefers-reduced-motion: reduce){
  .hero__bg{ clip-path:none !important; animation: none !important; }
  .hero__slide{ transition: none !important; }
  .site-logo, .site-burger, .hero__content, .hero__dots{ opacity:1 !important; transition:none !important; transform:none !important; }
}


/* ヘッダー/ロゴは最前面（被り対策） */
.site-header{ position:relative; z-index:50; }
.site-logo{ position:relative; z-index:51; opacity:1 !important; transform:none !important; }


/* ===== ヘッダー（ロゴを最前面に） ===== */
.site-header{ position: relative; z-index: 50; }
.site-logo  { position: relative; z-index: 51; }
/* もしロゴに出現アニメが掛かっている場合は強制表示 */
.site-logo{ opacity: 1 !important; transform: none !important; }

/* ========== 右上アクション群（インスタ／カート／バーガー） ========== */
.site-actions{
  position: fixed; right: clamp(14px, 3vw, 24px); top: clamp(14px, 2.8vw, 20px);
  display: flex; align-items: center; gap: 10px; z-index: 31; pointer-events: none;
}
.site-actions > *{ pointer-events: auto; }
.site-icon{
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: transparent;
  border: 2px solid var(--brand); color: var(--brand);
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, opacity .5s ease;
  opacity: 0;
}
body.ui-in .site-icon{ opacity: 1; }
.site-icon:hover{ background: var(--brand); color: #fff; transform: translateY(-1px) scale(1.02); border-color: var(--brand); }
.site-burger{
  position: static; width: 80px; height: 80px; border-radius: 50%; background: var(--brand);
  border: 0; display: grid; place-content: center; justify-items: center; grid-auto-flow: row; row-gap: var(--burger-gap, 1px);
  color:#fff; box-shadow: 0 10px 24px rgba(0,0,0,.18); opacity:0; transition: opacity .5s ease, transform .2s ease, box-shadow .2s ease;
}
.site-burger__bar{ width: 40px; height: 3px; background: #fff; margin: 0; border-radius: 2px; display: block; }
body.ui-in .site-burger{ opacity:1; }
.site-burger:hover{ transform: translateY(-1px) scale(1.02); box-shadow: 0 14px 28px rgba(0,0,0,.22); }
.site-burger{ --burger-gap: 10px; }
.site-actions > .site-burger, .site-burger, .site-burger * { cursor: pointer; }

/* ===== スクロールインジケーター（競合解消・統一） ===== */
.scroll-indicator--line,
.scroll-indicator--dots{
  position: fixed; right: clamp(14px, 3vw, 24px); bottom: clamp(16px, 5vh, 40px);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .35s ease, transform .25s ease; z-index: 32;
}
.scroll-indicator--line{ width: 26px; height: 240px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; text-decoration:none; }
.si-text{ writing-mode: vertical-rl; font-size: 15px; letter-spacing: .22em; font-weight: 700; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.35); }
.si-line{ position: relative; width:2px; height:120px; background:rgba(255,255,255,.75); border-radius:2px; overflow:hidden; }
.si-dot{ position:absolute; left:50%; top:-8px; width:6px; height:6px; border-radius:50%; background:var(--brand); transform:translateX(-50%);
         box-shadow:0 0 12px color-mix(in oklab, var(--brand) 60%, transparent); animation: siDrop 1.3s ease-in-out infinite; }
@keyframes siDrop{ 0%{top:-8px;opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{top:96px;opacity:0} }
@media (prefers-reduced-motion: reduce){ .si-dot{ animation: none; top: 90%; } }

/* 表示条件：UI表示中 かつ まだスクロールしていない時だけ */
body.ui-in:not(.is-stuck) .scroll-indicator--line,
body.ui-in:not(.is-stuck) .scroll-indicator--dots{
  opacity:1; transform:none; pointer-events:auto;
}

/* スクロール開始で必ず消す */
body.is-stuck .scroll-indicator--line,
body.is-stuck .scroll-indicator--dots{
  opacity:0 !important; transform: translateY(6px) !important; pointer-events:none !important; display:none !important;
}

@media (max-width:480px){
  .scroll-indicator--line{ height:120px }
  .si-line{ height:76px }
  .si-text{ font-size:11px; letter-spacing:.18em }
}

/* ===== フッター ===== */
.site-footer{
  width: 100%; min-height: 300px; background: var(--brand); border-top: 6px solid var(--brand-dark);
  color: #fff; position: relative; display: grid; place-items: center;
  padding: 24px 16px 54px; overflow: visible;
}
.site-footer__logo{ display:inline-block; line-height:0; filter: drop-shadow(0 10px 24px rgba(0,0,0,.22)); }
.site-footer__logo img{ width: clamp(140px, 18vw, 180px); height: auto; }
.site-footer__copy{
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  font-size: 12px; letter-spacing: .04em; opacity:.9; text-align: center; white-space: nowrap;
}

/* ===== ↑ TOP（統一：PC=フッター右下／SP=右下固定） ===== */
.site-footer__to-top{
  display: inline-grid; grid-auto-flow: column; gap: 8px;
  align-items: center; justify-content: center; padding: 10px 14px;
  border-radius: 999px; background:#fff; color:var(--brand); text-decoration:none;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  border:2px solid color-mix(in oklab, var(--brand) 70%, #fff 30%);
  opacity:0; pointer-events:none; transition: opacity .3s ease, transform .3s ease, box-shadow .2s ease; font-weight:700;
}
.site-footer__to-top::before{ content:"↑"; font-weight:800; line-height:1; }
.site-footer__to-top span{ font-size: 14px; letter-spacing: .06em; }
.site-footer__to-top:hover{ box-shadow:0 16px 34px rgba(0,0,0,.22); }

/* フッターが可視になったら表示 */
@media (min-width: 561px){
  .site-footer{ position: relative; }
  .site-footer__to-top{
    position: absolute; right: clamp(14px, 3vw, 50px); bottom: clamp(14px, 3vw, 24px); transform: none;
  }
  body.footer-in .site-footer__to-top{ opacity:1; pointer-events:auto; }
}
@media (max-width:560px){
  .site-footer__to-top{
    position: fixed !important; right: 14px !important; bottom: 18px !important; transform: none !important; z-index: 1000;
  }
  body.footer-in .site-footer__to-top{ opacity:1; pointer-events:auto; }
}

@media (max-width:480px){
  .site-footer{ min-height: 260px; padding-bottom: 50px; }
  .site-footer__copy{ bottom: 12px; font-size: 11px; }
}

/* =========================================================
   Menu Section
   ========================================================= */
.menu-sec{
  background: transparent; color:#000; padding: clamp(40px, 6vw, 80px) 5vw; text-align:center;
  font-family: "Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}
.menu-sec__title{
  font-family: "Hina Mincho", serif; color:#000; font-weight:200; letter-spacing:.08em;
  font-size: 30px; line-height:1.05; position:relative;
  display:block; width:max-content; margin:0 auto clamp(24px,5vw,60px); text-align:center;
  opacity:0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease;
}


.section-kitchen h2::after{
  content:""; position:absolute; left:50%; bottom:-10px; width:0; height:4px; border-radius:2px;background: #fff; transform: translateX(-50%); transition: width .8s cubic-bezier(.2,.8,.2,1);
}

.menu-sec__title::after{
  content:""; position:absolute; left:50%; bottom:-10px; width:0; height:4px; border-radius:2px;
  background: var(--brand); transform: translateX(-50%); transition: width .8s cubic-bezier(.2,.8,.2,1);
}
.menu-sec__title.is-inview{ opacity:1; transform:none; }
.menu-sec__title.is-inview::after{ width:100%; }

.menu-sec__images{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 32px);
  max-width: 1200px; margin: 0 auto clamp(26px, 5vw, 40px);
}
.menu-sec__images img{ width:100%; height:280px; object-fit:cover; border-radius:8px; box-shadow: 0 14px 28px rgba(0,0,0,.12); }
.menu-sec__images > *{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
body.menu-cols-in .menu-sec__images > *{ opacity:1; transform:none; }
body.menu-cols-in .menu-sec__images > *:nth-child(1){ transition-delay:.10s; }
body.menu-cols-in .menu-sec__images > *:nth-child(2){ transition-delay:.18s; }
body.menu-cols-in .menu-sec__images > *:nth-child(3){ transition-delay:.26s; }

@media (max-width: 480px){
  .menu-sec__title{
    margin-bottom: 55px;

    /* 文字サイズは端末幅に追従しつつ上限/下限を設定 */
        line-height: 1.3;
font-size: 25px;
    /* これで確実に折り返す（長い英単語/記号の連続にも対応） */
    white-space: normal !important;
    overflow-wrap: anywhere;   /* 標準：どこでも改行可 */
    word-break: break-word;    /* Safari等のフォールバック */
    hyphens: auto;             /* 英単語のハイフン分割（対応ブラウザ） */

    /* はみ出し防止の保険 */
    max-width: 100%;
    display: block;
    min-width: 0;  
	  text-align: left;/* 親がflexでも縮んで折り返せるように */
  }
}

.menu-sec__grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3.5vw, 40px);
  max-width: 1200px; margin: 0 auto; text-align:left; color:#000;
}
.menu-cat__title{
  font-family: "Hina Mincho", serif; font-weight:400; letter-spacing:.08em; color:#000;
  font-size: clamp(18px, 3.2vw, 20px); margin:0 0 .6em; padding-bottom:.45em; border-bottom:3px solid var(--brand);
}
.menu-list{ list-style:none; margin:0; padding:0; display:grid; gap:.35em; color:#000; }
.menu-list li{ display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:baseline; font-size: clamp(13px, 2.2vw, 16px); }
.menu-name,.menu-price{ color:#000; }

@media (max-width:1024px){ .menu-sec__images img{ height:200px; } }
@media (max-width:900px){
  .menu-sec__images{ grid-template-columns: 1fr; }
  .menu-sec__images img{ height:220px; }
  .menu-sec__grid{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .menu-sec__title,.menu-sec__images > *,.menu-sec__grid > .menu-cat{ transition:none !important; opacity:1 !important; transform:none !important; }
  .menu-sec__title::after{ transition:none !important; width:100% !important; }
}

/* =========================================================
   Concept Section
   ========================================================= */
.concept-sec{ padding: clamp(48px, 7vw, 20px) 2vw; background:#fff; color:#111; }

.concept-sec__inner{
  max-width:1000px; margin:0 auto;
  display:grid; grid-template-columns: 40% 60%;
  gap: clamp(40px, 6vw, 50px); align-items:start;
}

/* 画像コンテナ（高さのクランプは最小→理想→最大の順が望ましい） */
.concept__media{
  --mediaH: clamp(80px, 48vw, 420px); /* ←元の順序(420,48vw,80)だと意図しない固定化の恐れあり */
  position: relative; height: var(--mediaH);
}

.concept__photo{
  position:absolute; inset:0; margin:0; border-radius:12px; overflow:hidden;
  opacity:0; transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}

/* PC/タブレット既定：やや余白を残して見せる */
.concept__photo img{
  width:90%; height:90%;
  object-fit:cover; display:block;
}

/* アニメーション発火 */
.concept-sec.is-in .concept__photo{ opacity:1; transform:none; }

.concept__body{
  text-align:left; opacity:0; transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}

.concept__title{
  font-family:"Hina Mincho",serif; font-weight:400; letter-spacing:.02em; color:#111; line-height:1.2;
  font-size: clamp(23px, 2.8vw, 28px); margin:0 0 32px; position:relative; display:inline-block;
  opacity:0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease;
}

.concept__title::after{
  content:""; position:absolute; left:0; bottom:-8px; height:3px; width:0; border-radius:2px; background: var(--brand);
  transition: width .8s cubic-bezier(.2,.8,.2,1);
}

.concept__text{
  font-family:"Hina Mincho",serif; color:#333; font-size: clamp(14px, 1.9vw, 16px); line-height:1.9; max-width:80ch; margin:18px 0 0;
  opacity:0; transform: translateY(8px); transition: opacity .6s ease .15s, transform .6s ease .15s;
}
.concept__text p{ margin:0 0 1.1em; }

/* 560px以下：本文の横幅調整（既存維持）＋必要なら画像80%を前倒し適用 */
@media (max-width:560px){
  .concept__text{ max-width: 90%; margin: 0 auto; }
  /* ▼560以下でも写真80%にしたい場合はON（任意）
  .concept__photo img{ width:80%; height:auto; margin:0 auto; }
  */
}

.concept-sec.is-in .concept__title{ opacity:1; transform:none; transition-delay:.28s; }
.concept-sec.is-in .concept__body,.concept-sec.is-in .concept__text{ opacity:1; transform:none; transition-delay:.36s; }
.concept-sec.underline-in .concept__title::after{ width:100%; }

@media (max-width:980px){
  .concept-sec__inner{ grid-template-columns: 1fr; }
  .concept__media{ min-height: clamp(240px, 54vw, 360px); margin-bottom: 7vw; }
}

/* prefers-reduced-motion 配慮 */
@media (prefers-reduced-motion: reduce){
  .concept__title::after{ width:100% !important; transition:none !important; }
}

/* 480px以下（スマホ）：コンセプト画像を“幅80%・中央寄せ”に統一 */
@media (max-width:480px){
  .concept__title{ display:block; width:max-content; margin:0 auto 30px; text-align:center; }

  /* ここが今回の主目的：横幅80%・高さは自動・中央寄せ
     （既存の height:100% 指定を上書き） */
  .concept__photo img{
    width:80%;
    height:auto;      /* 比率維持 */
    display:block;
    margin:0 auto;    /* 中央寄せ */
    /* object-fit は高さ自動のため実質無効。トリミングせず全体を見せる方針 */
  }
}


/* 共通 */
.container { max-width: 1200px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) 5vw; }
.container-single { max-width: 800px; margin: 0 auto; padding: 10px 0; }
@media (max-width:480px){
	
.container-single  { max-width: 90%; padding: 0px;}
	
}
.section-title { margin-bottom: clamp(20px, 3vw, 28px); display:inline-block; position:relative; }
.section-title::after{ content:""; position:absolute; left:0; bottom:-10px; width:100%; height:0; border-bottom:2px dotted #999; }

/* お知らせ・イベント */
.section-news > .container, .section-calendar > .container{ max-width: 800px; margin-left:auto; margin-right:auto; }

/* 2枚並び（既存） */
.section-calendar .calendar-gallery{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}

/* SPは1列（既存） */
@media (max-width:560px){
  .section-calendar .calendar-gallery{ grid-template-columns: 1fr; }
}

/* ★1枚だけの時は中央寄せ */
.section-calendar .calendar-gallery:has(> .calendar-item:only-child){
  /* 1列の“幅”を決めて、その列ごと中央寄せ */
  grid-template-columns: clamp(280px, 46vw, 760px);
  justify-content: center; /* 列を中央へ */
}

/* 画像などは既存のままでOK */
.calendar-item img{
  width:100%; height:auto; display:block;
  border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.08);
  cursor: zoom-in;
}

/* キャプションの白抜きバッジ（前回の指定） */
.calendar-item{ text-align:center; }
.calendar-item figcaption{
  font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  margin: 8px auto 0;
  padding: 6px 14px;
  display: inline-block;
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
  background: var(--brand, #2C9AA0);
  border-radius: 12px;
  letter-spacing: .03em;
}

.section-news .news-list{ list-style:none; margin:0; padding:0; }
.section-news .news-item{ display:flex; gap:1rem; align-items:baseline; padding:14px 0; border-bottom:1px dotted #ccc; }
.section-news.archive { margin: 200px auto;}
@media (max-width:480px){
.section-news .news-item{ font-size: 13px;}
}

.news-date{ font-variant-numeric: tabular-nums; color:#666; min-width:8.5ch; }
.news-title{ text-decoration:none; color:#111; position:relative; }
.news-title:hover{ opacity:.8; }

.events-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); }
@media (max-width:980px){ .events-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:560px){ .events-grid{ grid-template-columns: 1fr; } }
.event-card{ background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 8px 28px rgba(0,0,0,.06); transition: transform .3s ease, box-shadow .3s ease; }
.event-card:hover{ transform: translateY(-4px); box-shadow:0 12px 36px rgba(0,0,0,.10); }
.event-link{ display:block; color:inherit; text-decoration:none; height:100%; }
.event-thumb img{ width:100%; aspect-ratio: 16/10; object-fit: cover; display:block; }
.event-title{ font-size: clamp(16px, 2vw, 18px); padding: 14px 16px 16px; }

/* Event cards */
.cards--events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.event-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Thumb: 16:9固定＆カバー */
.event-card__thumb {
  aspect-ratio: 16/9;
  background: #f4f4f4;
}
.event-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.event-card__ph {
  display: block;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg, #eee, #eee 10px, #f8f8f8 10px, #f8f8f8 20px
  );
}

/* Date & Title */
.event-card__date {
  margin: 12px 16px 0;
  font-size: 0.92rem;
  opacity: .8;
}
.event-card__title {
  margin: 6px 16px 16px;
  font-weight: 700;
  line-height: 1.5;
  font-size: clamp(15px, 1.6vw, 18px);
}


/* スクロールアニメ共通 */
.js-appear{ opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.is-inview{ opacity:1 !important; transform:none !important; }
.js-stagger .js-appear{ transition-delay: var(--stagger, 0s); }



/* H2 fancy */
.h2-fancy{ display:inline-block; position:relative; opacity:0; transform: translateX(-14px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
.h2-fancy::after{ content:""; position:absolute; left:0; bottom:-10px; width:100%; height:2px; background:#111; transform: scaleX(0); transform-origin:left center; transition: transform .55s ease .15s; }
.h2-fancy.is-inview{ opacity:1; transform:none; }
.h2-fancy.is-inview::after{ transform: scaleX(1); }
.h2-fancy.-dotted::after{ background:none; height:0; border-bottom:2px dotted #999; transform: scaleX(0); }
.h2-fancy.-dotted.is-inview::after{ transform: scaleX(1); }
@media (prefers-reduced-motion: reduce){ .h2-fancy{ transition:none; transform:none; opacity:1; } .h2-fancy::after{ transition:none; transform:none; } }

/* Kitchen */
.section-kitchen{ padding: clamp(32px, 5vw, 48px) 5vw; margin: clamp(32px, 6vw, 64px) auto; background: var(--brand); color:#fff; }
.section-kitchen .container{ padding: 0; }
.section-kitchen h2,.section-kitchen .section-title,.section-kitchen .h2-fancy{ color:#fff; }
.section-kitchen .section-title::after{ border-bottom-color: rgba(255,255,255,.95); }
.section-kitchen .h2-fancy::after{ background:#fff; }
.kitchen-figure{ margin:0 auto clamp(16px, 3vw, 24px); width:min(800px, 100%); }
.kitchen-figure img{ display:block; width:100%; height:auto; border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.06); }


.kitchen-text{ width:min(800px,100%); margin:0 auto; line-height:1.9; color:inherit; }
@media (max-width:460px){
.kitchen-text{ font-size: 13px}}

@media (prefers-reduced-motion: reduce){ .section-kitchen .h2-fancy::after{ transition:none !important; transform:none !important; } }

/* ===== Info 基本余白 ===== */
.section-info{ margin: clamp(32px, 6vw, 64px) auto; max-width:100%; }
.section-info .container{ padding: 0 5vw; }

/* ===== Map + Smart Slider（最終版） ===== */

/* マップの器（外部のスタッキング影響を遮断） */
.info-map{
  position: relative;
  isolation: isolate;                    /* ← これが効きます */
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.06);
  margin: 0 auto clamp(20px, 3.5vw, 28px);
}

/* マップ本体（iframeを枠いっぱいに） */
/* 上段マップ（そのまま） */
.info-map{ position:relative; width:100%; border-radius:12px; overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.06); margin:0 auto clamp(20px,3.5vw,28px); }
.map-frame{ position:relative; aspect-ratio:16/9; width:100%; height:320px; }
.info-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* 下段：左=営業時間など、右=スライダー */
.info-row{
  display: grid;
  grid-template-columns: 1fr min(400px, 32%);
  gap: 24px;
  align-items: start;
  margin-top: clamp(16px, 3vw, 24px);
}

@media (min-width: 768px){
  .info-row{
    grid-template-columns: 1fr clamp(280px, 28vw, 480px);
  }
}

/* 右のスライダー枠（Smart Sliderをフィットさせる） */
.info-slider{
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.info-slider .n2-ss-slider,
.info-slider .n2-ss-slider-wrapper,
.info-slider .n2-ss-section-main-content,
.info-slider .n2-ss-layers-container{
  width: 100% !important;
  height: 100% !important;
}

/* モバイルは縦一列（スライダーは下に） */
@media (max-width: 768px){
  .info-row{
    grid-template-columns: 1fr;
  }
  .info-slider{
    aspect-ratio: auto;
    box-shadow: none;
  }
	
	.info-slider .n2-ss-slider,
.info-slider .n2-ss-slider-wrapper,
.info-slider .n2-ss-section-main-content,
.info-slider .n2-ss-layers-container{
  width: 50% !important;
  height: 50% !important;
	margin: 0 auto;
}
}

/* 既存スタイル（そのまま） */
.info-detail{ width:min(1200px,100%); margin:0 auto; color:#333; }
.info-address,.info-tel{ margin:0 0 .5em; font-size: clamp(15px, 2.4vw, 16px); }
.info-tel a{ color: var(--brand); text-decoration: underline; }
.info-meta{ display:grid; grid-template-columns: minmax(7em, 9em) 1fr; column-gap:5px; row-gap:5px; margin:10px 0 30px; font-size: clamp(15px, 2.4vw, 16px); }
.info-meta > div{ display: contents; }
.info-meta dt{ color:#666; font-weight:600; }
.info-meta dd{ margin:0; }
.info-notes{
  max-width: 500px;
  list-style: disc;
  padding-left: 1.2em;
  margin: .6em 0 3em;
  color: #333;
  display: grid;
  row-gap: .35em;
  column-gap: 1.2em;
  font-size: 14px;
}
@media (max-width: 480px){  /* ← px の打ち間違い修正（460x→460px） */
  .info-notes{ font-size: 13px; }
  .info-meta{ font-size: 13px; }
}
@media (min-width:720px){ .info-notes{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

.info-tel__number{
  display:inline-block; font-family: system-ui,-apple-system,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-weight:800; font-size: clamp(24px, 4.6vw, 40px); color: var(--brand); line-height:1; transform: scaleY(1.2); transform-origin:center;
  text-decoration:none; letter-spacing:.02em;
}
.info-tel__number:hover{ opacity:.9; }



/* Smart Slider を箱にフィットさせる（重要） */
.map-slider .n2-ss-slider,
.map-slider .n2-ss-slider-wrapper,
.map-slider .n2-ss-section-main-content,
.map-slider .n2-ss-layers-container{
  width:100% !important;
  height:100% !important;
}
.map-slider .n2-ss-slider .n2-ss-layers-container{
  width: 100% !important;
  height: 100% !important;
}



/* =========================================================
   Instagram（Smash Balloon 横スクロール・四角カード安定版）
   ========================================================= */

/* セクション幅 */
.section-ig > .container {
  max-width: 1040px;
  margin-inline: auto;
  width: 100%;
}

/* スライダー基本レイアウト */
.ig-slider {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

/* ---------------------------------
   デザイン変数（サイズ・間隔）
   --------------------------------- */
.ig-slider.is-sbi{
  --ig-w: 190px;   /* カードの幅（調整用） */
  --ig-gap: 12px;
  --ig-radius: 12px;
}

@media (max-width: 480px){
  .ig-slider.is-sbi{
    --ig-w: 160px;
    --ig-gap: 10px;
    --ig-radius: 10px;
  }
}

/* ---------------------------------
   横スクロールビュー
   --------------------------------- */
.ig-slider.is-sbi .ig-viewport{
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ig-slider.is-sbi .ig-viewport::-webkit-scrollbar{ display:none; }

/* 横並び */
.ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi,
.ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi_feed,
.ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi_feed_container{
  display:flex !important;
  align-items:center;
  gap:var(--ig-gap);
  width:max-content;
}
/* ---------------------------------
   Smash Balloon構造を横並びに
   --------------------------------- */
.ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi,
.ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi_feed,
.ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi_feed_container {
  display: flex !important;
  align-items: center;
  gap: var(--ig-gap);
  width: max-content; /* コンテンツ幅に合わせる */
}

/* ---------------------------------
   カード（正方形で固定・角丸）
   --------------------------------- */
.ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi_item {
  flex: 0 0 var(--ig-size) !important;
  width: var(--ig-size) !important;
  height: var(--ig-size) !important;
  scroll-snap-align: center;
  border-radius: var(--ig-radius);
  overflow: hidden;
  background: #f6f6f6;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
  -webkit-transform: none !important;
  transform: none !important;
}

/* 画像（背景・img 両対応） */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item img,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  transition: transform .25s ease, opacity .25s ease;
}

/* 背景写真アンカー用の余白を打消し */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_photo {
  padding: 0 !important;
}

/* hover演出 */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item:hover img,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item:hover .sbi_photo {
  transform: scale(1.03);
  opacity: .95;
}

/* 不要な要素を非表示 */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_header,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_follow_btn,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_load_btn {
  display: none !important;
}

/* ---------------------------------
   iOS Safari 対応（縮小防止）
   --------------------------------- */
@supports (-webkit-touch-callout: none) {
  .ig-slider.is-sbi [id^="sb_instagram"] .sbi_item {
    font-size: 0 !important;
  }
  .ig-slider.is-sbi [id^="sb_instagram"] .sbi_photo_wrap {
    width: 100% !important;
    height: 100% !important;
    -webkit-transform: none !important;
    transform: none !important;
  }
}

/* ---------------------------------
   旧calc幅指定を上書きして無効化
   --------------------------------- */
.ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi_item {
  max-width: none !important;
}


/* ナビボタン：既存スタイルを流用 */
.ig-nav{
  width:36px; height:36px; border-radius:50%; border:0;
  background:var(--brand); color:#fff; display:grid; place-items:center;
  cursor:pointer; box-shadow:0 8px 18px rgba(0,0,0,.12);
  transition:transform .15s ease, opacity .15s ease;
}
.ig-nav:hover{ transform:translateY(-1px); opacity:.95; }
.ig-nav:disabled{ opacity:.35; cursor:default; box-shadow:none; }
.ig-follow{ text-align:center; margin-top:12px; }
.ig-follow a{ color:var(--brand); text-decoration:underline; }


/* オンラインストア */
.section-store .container{ max-width: 1200px; margin-left:auto; margin-right:auto; padding: clamp(32px, 5vw, 56px) 5vw; }
.store-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.6vw, 28px); list-style:none; padding:0; margin:0; }
.store-cta a {
    background: #eee;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 250px;
    padding: 10px 25px;
    font-family: "Noto Sans Japanese";
    color: #333;
    line-height: 1.8;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.store-cta a:hover {
    background: #333;
    color: #FFF;
}
.store-cta a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #333;
    border-right: 3px solid #333;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.store-cta a:hover:after {
    border-color: #FFF;
}
@media (max-width: 480px){ 
	
}
@media (max-width:980px){ .store-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:560px){ .store-grid{ grid-template-columns: 1fr; } }
.store-card{ background:#fff; border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.06); overflow:hidden; transition: transform .25s ease, box-shadow .25s ease; padding-bottom: 30px;}
.store-card:hover{ transform: translateY(-4px); box-shadow:0 12px 36px rgba(0,0,0,.10); }
.store-link{ display:grid; grid-template-rows: auto 1fr auto; height:100%; color:inherit; text-decoration:none; padding-bottom:12px; }
.store-thumb{ margin:0 0 10px; background:#f7f7f7; }
.store-thumb img{ width:100%; aspect-ratio: 1/1; object-fit:cover; display:block; }
.store-name{ margin:0 12px 6px; font-size: clamp(13px, 2.2vw, 13px); line-height:1.5; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow:hidden; }
.store-price{ margin:0 12px; font-weight:700; letter-spacing:.02em; font-variant-numeric: tabular-nums; }
.store-more{ text-align:center; margin-top: clamp(18px, 3vw, 28px); }
.btn-brand{
  display:inline-block; min-width:200px; padding:12px 22px; border-radius:999px; background: var(--brand); color:#fff;
  font-weight:700; letter-spacing:.08em; text-decoration:none; box-shadow:0 6px 20px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-brand:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.16); opacity:.95; }
.btn-brand:focus-visible{ outline:3px solid #0a3b6c; outline-offset:2px; }

/* ===== Intro ===== */
.intro{
  position: fixed; inset: 0; z-index: 9999; background: var(--brand);
  display:grid; place-items:center; opacity:1; visibility:visible; pointer-events:none;
  transition: opacity .8s ease .2s, visibility 0s linear 1.2s;
}
.intro__img{ width:400px; height:400px; object-fit:cover; opacity:0; transform: scale(1.02); transition: opacity .8s ease, transform 1.2s ease; }

@media (max-width: 720px){
	.intro__img{ width:300px; height:300px; object-fit:cover; opacity:0; transform: scale(1.02); transition: opacity .8s ease, transform 1.2s ease; }
}

body.intro-active .intro__img{ opacity:1; transform: scale(1); }
body.intro-done .intro{ opacity:0; visibility:hidden; }
body:not(.intro-done) .site-logo,
body:not(.intro-done) .site-actions > *,
body:not(.intro-done) .hero__content,
body:not(.intro-done) .hero__dots{ opacity:0 !important; }
@media (prefers-reduced-motion: reduce){ .intro{ transition:none !important; opacity:0 !important; visibility:hidden !important; } .intro__img{ transition:none !important; opacity:0 !important; } }

/* =========================================================
   Flow Strip（1列固定・継ぎ目ゼロ・レスポンシブOK）
   ========================================================= */
.flow-strip{
  position: relative;
  padding: clamp(18px, 3vw, 28px) 0;
  overflow: hidden;
  background:#fff;

  /* 端の切替りを馴染ませるフェード（対応ブラウザなら有効） */
  --fade: 28px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade),
                                      #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade),
                                      #000 calc(100% - var(--fade)), transparent 100%);
}
@media (max-width:560px){ .flow-strip{ margin-bottom: 80px; } }
.flow-strip__inner{ display: grid; gap: clamp(10px, 2vw, 18px); }

/* トラック：1行固定（折返し禁止）で“トラック全体”を動かす */
.flow-track{
  --h: 207px;                            /* 画像高さ（SPで上書き） */
  --gap: clamp(10px, 1.6vw, 14px);
  --amp: 12px;                            /* ジグザグ振幅 */
  --start: 0%;                            /* 開始オフセット */

  display: flex;
  flex-wrap: nowrap;                      /* ★ 折返し禁止 → 1列固定 */
  gap: var(--gap);
  will-change: transform;
  animation: flow-track-left var(--dur) linear infinite;
}

/* デフォルト（PC）：ゆっくり */
.flow-track{ --dur: 100s; }  /* ← お好みで 60〜120s くらい */

@media (max-width: 720px){
  /* スマホはやや速めでも読みやすい：でも以前よりは遅く */
  .flow-track{ --dur: 120s; }
}

/* レーン（1セット分：同じULをもう1本並べる） */
.flow-lane{
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center;
  gap: var(--gap);
  height: calc(var(--h) + var(--amp) * 2);
}
.flow-lane li{ flex: 0 0 auto; }
.flow-lane img{
  display: block;
  height: var(--h);
  width: auto;                 /* 画像の横幅は可変 */
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* ジグザグ：ULごとに odd/even がリセットされるので境目で段差が出ない */
.flow-lane li:nth-child(odd){  transform: translateY(var(--amp)); }
.flow-lane li:nth-child(even){ transform: translateY(calc(var(--amp) * -1)); }

/* トラックを“半分”だけ動かして戻す：UL×2で継ぎ目ゼロ */
@keyframes flow-track-left{
  from{ transform: translateX(var(--start)); }
  to  { transform: translateX(calc(-50% + var(--start))); }
}

/* ホバーで一時停止（任意） */
.flow-strip:hover .flow-track{ animation-play-state: paused; }


/* Reduce Motion */
@media (prefers-reduced-motion: reduce){
  .flow-track{ animation: none !important; }
}

/* =========================================================
   改行制御（1回だけ）
   ========================================================= */
.br-pc, .br-sp { display: none; }
@media (min-width: 769px){ .br-pc { display: inline; } } /* PCだけ改行 */
@media (max-width: 768px){ .br-sp { display: inline; } } /* SPだけ改行 */

/* =========================================================
   レスポンシブ微調整（既存踏襲・必要最小限）
   ========================================================= */
@media (max-width: 1280px){
  .site-logo img{ width: 180px; }
  .container{ padding-left: 4vw; padding-right: 4vw; }
}
@media (max-width: 1024px){
  .hero__title{ font-size: clamp(20px, 5.6vw, 34px); }
  .hero__lead { font-size: clamp(13px, 2vw, 16px); }
  .section-kitchen{ padding: clamp(28px, 4.5vw, 40px) 5vw; }
  .menu-sec__images img{ height: 200px; }
}
@media (max-width: 900px){
  .menu-sec__images{ grid-template-columns: 1fr; }
  .menu-sec__images img{ height: 220px; }
  .menu-sec__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  /* ロゴ＆右上アイコン：40%縮小（=60%表示） */
  .site-logo img{ width: 120px; }
  .site-actions .site-icon{ width: 34px; height: 34px; }
  .site-actions .site-icon svg{ width: 18px; height: 18px; }
  .site-drawer__actions .drawer-icon{ width: 26px; height: 26px; }
  .site-drawer__actions .drawer-icon svg{ width: 16px; height: 16px; }

  .section-ig > .container{ width: 90%; }
}
@media (max-width: 560px){
  .section-calendar .calendar-gallery{ grid-template-columns: 1fr; }
  .events-grid{ grid-template-columns: 1fr; }
	 .container{ padding: 0 0 80px;}
}
@media (max-width: 480px){
  .hero__dots{ bottom: 18px; }
}

/* 営業カレンダー内の <figure> 既定マージンを打ち消す（左右の余白をゼロに） */
.section-calendar figure,
.section-calendar .calendar-item {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* 画像はコンテナ幅いっぱいに（既にある指定の再保証） */
.section-calendar .calendar-item img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}
@media (max-width: 480px){
	
	.section-calendar figure,
.section-calendar .calendar-item {
  margin: 0px auto;
  padding: 0 ;
  width: 80%;
}

}


/* ギャラリーの左右余白が原因なら、コンテナ内パディングも少し抑える（任意） */
.section-calendar > .container {
  padding-left: 0;
  padding-right: 0;
  /* もし全体の .container に 5vw などが効いていて影響が出る場合は
     ここでだけ 0〜2vw 程度に上書きして調整してください */
}

/* SPは1列でOK（あなたの既存指定があればそのままでOK） */
@media (max-width: 560px){
  .section-calendar .calendar-gallery { grid-template-columns: 1fr; }
}

/* ふわっと表示するための状態クラス */

/* 初期は確実に非表示（display:none） */
/* 初期は確実に非表示（display:none） */
.lightbox{
  position: fixed;
  inset: 0;
  display: none;              /* ← 最重要：初期は出さない */
  align-items: center;
  justify-content: center;
  padding: 4vw;
  background: rgba(0,0,0,.6);
  z-index: 10000;
  opacity: 0;
  transition: opacity .18s ease-out;
}

/* 開いた時だけ表示＆フェードイン */
.lightbox.is-open{
  display: flex;               /* ← ここで表示に切り替え */
  opacity: 1;
}

.lightbox__img{
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  display: block;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}

/* ×ボタン */
.lightbox__close{
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 28px;
  line-height: 1;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

/* 背景スクロール抑止 */
.no-scroll{ overflow: hidden; }

.lightbox{ opacity: 0; transition: opacity .18s ease-out; }
.lightbox.is-open{ opacity: 1; }

/* 背景スクロールを止める */
.no-scroll{ overflow: hidden; }


/* ===== Event Grid（共通） ===== */
.section-events .events-grid{
  display: grid;
  /* ★要望1: カード幅を狭くするため、最大幅 360px を設定 */
  /* ★要望2: 3列 / 中央寄せ */
  grid-template-columns: repeat(3, minmax(0, 360px));
  gap: clamp(16px, 2.5vw, 28px);
  /* ★要望4: 高さを揃えるため stretch に変更 (start から) */
  align-items: stretch;
  /* ★要望2: 常時中央寄せ */
  justify-content: center;
}

/* ★要望2: 1件のとき */
.section-events .events-grid.is-single{
  grid-template-columns: minmax(260px, 520px);
}

/* ★要望2: 2件のとき (PHPで .is-two を追加した) */
.section-events .events-grid.is-two{
  grid-template-columns: repeat(2, minmax(0, 360px));
}

/* レスポンシブ：～960pxは2列 */
@media (max-width: 960px){
  .section-events .events-grid,
  .section-events .events-grid.is-two{ /* 2件時も2列 */
    grid-template-columns: repeat(2, minmax(0, 360px)); 
  }
  .section-events .events-grid.is-single{ 
    grid-template-columns: minmax(240px, 520px); 
  }
}

/* レスポンシブ：～560pxは1列 */
@media (max-width: 560px){
  .section-events .events-grid,
  .section-events .events-grid.is-single,
  .section-events .events-grid.is-two { 
    grid-template-columns: 1fr; /* 1列 */
    /* ★要望8: 幅85%で中央寄せ */
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* カード体裁 */
.event-card{
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
  
  /* ★要望4: 高さを揃えるため Flexbox 化 */
  display: flex;
  flex-direction: column;
  height: 100%; /* Grid の高さに合わせる */
}
.event-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.12); }

.event-link{ 
  /* ★要望4: Flexbox 化 */
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* リンクがカード全体に広がるように */
  color: inherit; 
  text-decoration: none; 
}

.event-thumb{ margin:0; aspect-ratio: 16 / 10; overflow: hidden; }
.event-thumb__img, .event-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* カードの日付 */
.event-meta {
  opacity: .7;
  font-variant-numeric: tabular-nums;
  font-size: 12px; 
  line-height: 1.4; 
  padding: 6px 14px 0; /* 上6px, 左右14px, 下0px */
  
  /* ★追加: ブラウザのデフォルトマージンをリセット */
  margin: 0;
}

/* カードのタイトル */
.event-title {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
  
  /* ★変更: 上下中央寄せ(center) -> 上寄せ(flex-start) に変更 */
  align-items: flex-start; 
  
  /* ★変更: 上にわずかな余白(4px)を、下は10px */
  padding: 10px 14px 10px; 

  flex-grow: 1;
  display: flex;
  
  /* ★追加: ブラウザのデフォルトマージンをリセット */
  margin: 0;
}

/* もっと見るボタン */
.events-more{ margin-top: 30px; text-align: center; }
.events-more .btn-brand{ display:inline-block; padding:.7em 1.2em; border-radius: 999px; text-decoration:none; }

/* スマホで「もっと見る」ボタンを一回り小さく（上書き強） */
@media (max-width: 576px){
  .section-events .events-more .btn-brand{
    font-size: 0.9rem !important;   /* 既存clampや!importantをねじ伏せる */
    padding: 1em .96em !important;  /* 既定(.7em/1.2em)の約2割減 */
    line-height: 1;
  }
  .section-events .events-more{
    margin-top: 35px;   
  }
}

/* 0件時メッセージを中央寄せ */
.events-empty{
  text-align: center;
  padding: 24px 0;
  opacity: .75;
}
.menu-price::before { content: "￥"; margin-right: .1em; }
.menu-price[data-from="1"]::after { content: "〜"; }

/* 一覧 */
.section-news .news-list{
  list-style:none; margin: 24px 0; padding: 0;
}
.section-news .news-item{
  display:grid; grid-template-columns: 120px 1fr; gap: 12px;
  padding: 12px 0; border-bottom: 1px dashed rgba(53,161,168,.30);
}
@media (max-width: 560px){
.section-news .news-item{
  display:grid; grid-template-columns: 80px 1fr; gap: 12px;
  padding: 12px 0; border-bottom: 1px dashed rgba(53,161,168,.30);
	width: 90%; margin:0 auto;
}

}

.news-date{ opacity:.7; font-variant-numeric: tabular-nums; }

/* シングル */
.news-single__header{ padding: 200px 0 8px; }

@media (max-width: 560px){
	.news-single__header{ padding: 150px 0 8px; }
}
.news-single__date{ text-align:center; opacity:.7; margin:.25rem 0 0; }
.news-single__thumb{ margin: 20px 0 24px; }
.news-single__content{ line-height:1.9; }

/* “一覧へ戻る” ボタン */
.news-back{ margin-top: 26px; text-align: center; }
/* 丸い戻るボタン＋左向き矢印（フォント依存なしで安定） */
.btn-back{
  --btn-c: currentColor;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .65rem 1.1rem;
  color: var(--btn-c);
  text-decoration: none;
  border: 1.5px solid var(--btn-c);
  border-radius: 9999px;
  line-height: 1;
  font-weight: 500;
  background: #fff;
  transition: background .2s ease, color .2s ease,
              border-color .2s ease, box-shadow .2s ease,
              transform .02s ease;
}
.btn-back:hover{
  background: var(--brand, #35a1a8);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
.btn-back:active{ transform: translateY(1px); }
.btn-back:focus-visible{
  outline: 3px solid rgba(53,161,168,.35);
  outline-offset: 2px;
}

/* 左矢印（CSSで描画：ヘッド＋横棒） */
.btn-back__icon{
  position: relative;
  width: 18px;           /* 矢印全体の幅 */
  height: 14px;          /* 矢印全体の高さ */
  flex: 0 0 auto;
}
.btn-back__icon::before{ /* 横棒（シャフト） */
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;             /* 矢印ヘッドぶん右にずらす */
  width: 12px;
  height: 2px;
  background: currentColor;
  transform: translateY(-50%);
}
.btn-back__icon::after{  /* 矢印ヘッド（「く」の字を左向きに回転） */
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
}

/* 可読性：長い文でも折り返してはみ出さない */
.btn-back__label{
  white-space: normal;
  overflow-wrap: anywhere;
}

/* スマホで文字が収まりやすいように可変サイズ（任意） */
@media (max-width: 480px){
  .btn-back{ font-size: clamp(14px, 3.8vw, 16px); }
}


/* menu-sec__title がページ中央寄せ想定ならOK。
   左寄せにしたい場合は .news-single__header .menu-sec__title{ text-align:left; } を追加 */

/* ===== どのページでもフッターを最下部に ===== */
.site-main{ flex: 1 0 auto !important;}   /* ← 中身が少なくてもここが伸びる */

.gmap{ width:100%; height:420px; }

.gmap-zoomctl{
  display:flex; flex-direction:column; gap:8px;
  padding:10px; border-radius:10px; background:rgba(255,255,255,.9);
  box-shadow:0 6px 20px rgba(0,0,0,.12);
}
.gmap-zoomctl button{
  width:40px; height:40px; border:1px solid #ddd; border-radius:8px;
  background:#fff; font-size:20px; line-height:1; cursor:pointer;
}
.gmap-zoomctl button:hover{ background:#f7f7f7; }
.gmap-zoomctl button:active{ transform:translateY(1px); }
.gmap-zoomctl button:focus{ outline:2px solid #CF0000; outline-offset:2px; }

	#content { flex: 1 0 auto; }                   /* コンテンツを伸ばす */
.site-footer { margin-top: auto; } 

/* ============ ストア（商品一覧）基本レイアウト ============ */

.store-empty {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(16px, 2.2vw, 20px);
  color: #555;
}

/* === Store grid: 1件でも中央寄せ / 最大4列まで === */
.store-grid {
  display: grid;
  /* 260px基準で自動折返し → コンテナ1200pxなら最大4列 */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2.6vw, 28px);
  list-style: none;
  padding: 0;
  margin: 0;
  justify-items: center; /* セル内中央（1件でも中央に） */
}

/* カードは中央寄せ＆幅を適度に制限 */
.store-card {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}

/* === 商品サムネイル：横100% × 高さ80%（5:4）・中央cover・角丸 === */
.store-thumb {
  position: relative;
  aspect-ratio: 5 / 4; /* 横:縦 = 5:4 ≒ 高さ80% */
  overflow: hidden !important; /* スライドがはみ出さないように */
  background: #f7f7f7;
  border-radius: 12px !important; /* 画像の角丸 */
}
.store-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠にフィット */
  object-position: center; /* 上下中央 */
  display: block;
}

/* === テキストの折返し & 余白（共通） === */
.store-name {
  display: block !important; /* -webkit-box を打ち消し */
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important; /* 長い語も適宜改行 */
  word-break: break-word !important;
  min-width: 0;
  font-weight: 400 !important;
  margin: 0 0 4px !important;
	padding: 0 10px;
}
.store-price {
  font-size: 13px !important;
  font-weight: 400 !important;
  margin: 0 0 10px !important;
	padding: 0 10px;
}
.store-term {
  font-size: 13px !important;
  margin: 0 0 10px !important;
	padding: 0 10px;
}
.store-cta {
  font-size: 13px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  margin-top: 4px !important;
  min-width: auto !important;
}

/* ============ カルーセル（スライド） ============ */
/* ※ .store-thumb 内のカルーセルを .section-store スコープで指定 */

.section-store .store-carousel {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.section-store .store-track {
  display: flex;
  gap: var(--gap, 8px);
  overflow-x: auto;
  overflow-y: hidden; /* 縦スクロール無効 */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  height: 100%;

  /* 横スクロールバーを隠す（各ブラウザ） */
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none; /* Firefox */
}
.section-store .store-track::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.section-store .store-slide {
  flex: 0 0 100%;
  height: 100%;
}

/* 矢印の位置とサイズ（左右固定） */
.section-store .store-prev,
.section-store .store-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  z-index: 3;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 0 !important;
}
.section-store .store-prev { left: 8px; }
.section-store .store-next { right: 8px; }

/* 以前の「黒い丸や記号」を完全無効化 */
.section-store .store-prev::before,
.section-store .store-next::before {
  content: none !important;
}

/* ★薄い白の矢印（必ず表示） */
.section-store .store-prev::after,
.section-store .store-next::after {
  content: "" !important; /* ← 過去の content:none を上書き */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-top: 3px solid rgba(255, 255, 255, .85);
  border-right: 3px solid rgba(255, 255, 255, .85);
  transform: translate(-50%, -50%) rotate(45deg);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .25));
  transition: border-color .15s ease, opacity .15s ease;
}
.section-store .store-prev::after {
  transform: translate(-50%, -50%) rotate(225deg);
}
.section-store .store-prev:hover::after,
.section-store .store-next:hover::after {
  border-color: rgba(255, 255, 255, 1);
  opacity: 1;

}

/* ============ レスポンシブ設定 ============ */

/* 画面が広いテーマで4列を超える場合は最小幅を少し上げる */
@media (min-width: 1200px) {
  .store-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* ===== スマホ（≤560px）===== */
@media (max-width: 560px) {

  /* --- ストア一覧：PCの見た目のまま“1カラム縦並び” --- */
  /* 一覧は必ず1カラム／カードは全幅 */
  .store-grid {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
    gap: clamp(16px, 3.2vw, 24px) !important;
  }
  .store-card {
    max-width: none !important;
    margin-inline: 0 !important;
  }

  /* カード内レイアウトは block（PCと同じ：画像→テキスト縦積み） */
  .store-link {
    display: block !important;
    padding-bottom: 12px;
  }
  .store-thumb {
    margin: 0 0 10px !important;
    aspect-ratio: 5 / 4;
  }

  /* 過去の“SP用2カラム化”指定を完全解除 */
  .store-link > * {
    min-width: 0 !important;
  }
  .store-name,
  .store-price,
  .store-term,
  .store-cta {
    grid-area: auto !important;
    justify-self: auto !important;
    align-self: auto !important;
  }

  /* 3件目を中央にする等の古い調整を打ち消し */
  .store-grid > .store-card:only-child,
  .store-grid > .store-card:last-child:nth-child(odd),
  .store-grid > .store-card:nth-child(3):last-child {
    grid-column: auto !important;
    justify-self: stretch !important;
    width: auto !important;
  }

  /* --- スマホ用ハンバーガーメニュー --- */
  .site-burger {
    width: 52px;
    height: 52px;
    aspect-ratio: 1 / 1; /* 幅高さを完全に同じに */
    border-radius: 50% !important; /* ← 丸！ */
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px; /* 線の間隔を狭める */
    overflow: hidden; /* 角からはみ出し防止の保険 */
  }
  .site-burger__bar {
    width: 24px; /* 少し長め */
    height: 2px; /* 少し太め */
    border-radius: 2px;
    background: currentColor; /* 既存の色指定を継承（白なら白のまま） */
    margin: 0; /* 既存余白リセット */
    display: block;
  }

  .site-actions {
    gap: 10px;
  }
}

/* === テキストの折返し & 余白（共通） === */
/* ... (store-name, store-price, store-term のスタイル) ... */

.store-cta {
  /* --- functions.php から持ってきた基本スタイル --- */
  display: block;
  width: max-content;
  margin: 12px auto 0; /* ← 下記!importantで上書きされます */
  padding: 10px 20px; /* ← 下記!importantで上書きされます */
  background: #f0f2f5;
  color: #222;
  border-radius: 999px; /* ← 下記!importantで上書きされます */
  font-weight: 600;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  letter-spacing: .02em;
  line-height: 1;
  text-align: center;
  transition: background .2s ease, transform .05s ease;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset, 0 1px 2px rgba(0, 0, 0, .06);
  user-select: none;

  /* --- style.css から持ってきた上書きスタイル --- */
  font-size: 13px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  margin-top: 30px !important;
  min-width: auto !important;
}

/* --- functions.php から持ってきた状態変化スタイル --- */
.store-link:hover .store-cta {
  background: #e6e9ee;
}
.store-link:active .store-cta {
  transform: translateY(1px);
}
.store-cta.is-disabled {
  background: #ececec;
  color: #888;
  box-shadow: none;
  opacity: 1;
  cursor: default;
}

/* ============ カルーセル（スライド） ============ */
/* ... (これ以降のスタイルは前回提示したものでOKです) ... */
/* 共通：カードの最小幅トークン（フロントと揃える） */
:root {
  --card-min: 180px;  /* ←フロントと同じ値に */
  --card-gap: clamp(12px, 1.6vw, 20px);
}

/* 既存のeventsグリッドをトークン化 */
.cards--events {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  gap: var(--card-gap);
}

/* このページだけ更に狭めたい時は cards--narrow で上書き可能 */
.cards--narrow {
  --card-min: 220px; /* 例：220px。もっと狭くなら 200px 等に */
}

/* スマホは1列〜2列で安定させるなら */
@media (max-width: 600px) {
  .cards--events { grid-template-columns: 1fr; }
}

/* ===== Event Grid（共通） ===== */
/* ★変更: アーカイブページ (.section-news.archive) にも適用 */
.section-events .events-grid,
.section-news.archive .events-grid {
  display: grid;
  /* PC: 最大3列 */
  grid-template-columns: repeat(3, minmax(0, 360px));
  gap: clamp(25px, 2.5vw, 28px);
  align-items: stretch;
  justify-content: center;
  
  /* ★追加: リストの黒丸（・）を消す */
  list-style: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* ★変更: 1件/2件の中央寄せはフロントページ（.section-events）のみに限定 */
.section-events .events-grid.is-single{
  grid-template-columns: minmax(260px, 520px);
}
.section-events .events-grid.is-two{
  grid-template-columns: repeat(2, minmax(0, 360px));
}


/* レスポンシブ：～960pxは2列 */
@media (max-width: 960px){
  /* ★変更: アーカイブページにも適用 */
  .section-events .events-grid,
  .section-news.archive .events-grid { 
    grid-template-columns: repeat(2, minmax(0, 360px)); 
  }
  
  /* ★変更: フロントページ専用 */
  .section-events .events-grid.is-single{ 
    grid-template-columns: minmax(240px, 520px); 
  }
}

/* レスポンシブ：～560pxは1列 */
@media (max-width: 560px){
  /* ★変更: アーカイブページにも適用 */
  .section-events .events-grid,
  .section-events .events-grid.is-single,
  .section-events .events-grid.is-two,
  .section-news.archive .events-grid { 
    grid-template-columns: 1fr; /* 1列 */
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- 前後の記事ナビゲーション --- */

/* ナビゲーション全体（コンテナ） */
.post-nav {
  display: flex; /* 横並びにする */
  justify-content: space-between; /* 「前へ」と「次へ」を左右に引き離す */
  align-items: center;
  margin-top: 40px; /* 上の要素との余白 */
  margin-bottom: 40px; /* 下の要素との余白 */
  padding-top: 24px;
  border-top: 1px solid #eee; /* 上に区切り線 */
}

/* 「前へ」「次へ」の各リンクのスタイル */
.post-nav__prev a,
.post-nav__next a {
  display: inline-block;
  padding: 10px 20px; /* ボタンの内側の余白 (上下10px, 左右20px) */
  border: 1px solid #ccc; /* 枠線 */
  border-radius: 999px; /* 角を丸くしてカプセル型に */
  text-decoration: none;
  color: #555;
  font-size: 14px;
  font-weight: bold;
  
  /* アニメーション */
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ホバー時（マウスが乗った時）のスタイル */
.post-nav__prev a:hover,
.post-nav__next a:hover {
  background-color: #f0f0f0; /* 背景色を薄いグレーに */
  color: #111; /* 文字色を濃く */
  border-color: #bbb; /* 枠線を少し濃く */
}

/* 「«」や「»」の記号のスタイル（リンクテキストに含まれている場合） */
.post-nav__prev a::before {
  margin-right: 0.4em; /* 「«」とテキストの間に余白 */
  opacity: 0.8;
}

.post-nav__next a::after {
  margin-left: 0.4em; /* テキストと「»」の間に余白 */
  opacity: 0.8;
}


/* ==============================
   アイキャッチ画像を横幅に収める
   ============================== */

.news-single__thumb img {
  width: 100% !important;
  height: auto!important;
  max-width: 100%!important;
  display: block;
  object-fit: cover;
	}

/* ===== Smash Balloon を横一列に強制（上書き版） ===== */
.ig-slider.is-sbi .ig-viewport{
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.ig-slider.is-sbi .ig-viewport::-webkit-scrollbar{ display:none; }

/* ★ここがポイント：SBのGridを無効化して横フレックスに */
.ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi_items{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  width:max-content !important;
  grid-template-columns:none !important;
  justify-content:flex-start !important;
}

/* カード幅（PC=3 / 640px以下=2 / 420px以下=1） */
.ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi_item{
  flex:0 0 calc((600px - 20px)/3) !important;
  max-width:calc((100% - 20px)/3) !important;
  width:auto !important;   /* SBのwidth指定を無効化 */
  scroll-snap-align:center;
  border-radius:10px; overflow:hidden;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
  background:#f6f6f6;
  margin:0 !important;     /* SBの余白を無効化 */
}

/* 画像（背景式/IMG式どちらにも対応） */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_photo{
  display:block; width:100%; padding-bottom:100%;
  background-size:cover; background-position:center;
  transition:transform .25s ease, opacity .25s ease;
}
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item img{
  display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform .25s ease, opacity .25s ease;
}
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item:hover .sbi_photo,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item:hover img{
  transform:scale(1.02); opacity:.96;
}

/* ヘッダー/フォロー/もっと見るが出る場合の保険 */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_header,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_follow_btn,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_load_btn{ display:none !important; }

/* レスポンシブ */
@media (max-width:640px){
  .ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi_item{
    flex:0 0 calc((100% - 10px)/2) !important;
    max-width:calc((100% - 10px)/2) !important;
  }
}
@media (max-width:420px){
  .ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi_item{
    flex:0 0 100% !important; max-width:100% !important;
  }
}

/* 旧バージョン対策（#sbi_images を使う世代の保険） */
.ig-slider.is-sbi .ig-viewport #sbi_images{
  display:flex !important; flex-wrap:nowrap !important; gap:10px !important;
  width:max-content !important;
}
.ig-slider.is-sbi .ig-viewport #sbi_images .sbi_item{
  flex:0 0 calc((600px - 20px)/3) !important;
  max-width:calc((100% - 20px)/3) !important;
  width:auto !important; margin:0 !important; scroll-snap-align:center;
}

/* ==== 余白：左右にインセット（マージン相当） ==== */
.ig-slider.is-sbi .ig-viewport{
  padding-inline: 16px;               /* お好みで 12〜24px */
  scroll-padding-left: 16px;
  scroll-padding-right: 16px;
}

/* ==== 下に長いのを解消：SBの比率用paddingを無効化 ==== */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item{
  padding: 0 !important;
  padding-bottom: 0 !important;       /* ← これが効きます */
  height: auto !important;
}

/* 旧/新どちらでもあるラッパーをリセット */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_photo_wrap{
  position: static !important;
  padding: 0 !important;
  height: auto !important;
}

/* ==== 画像は正方形だけを表示（背景式/IMG式の両対応） ==== */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_photo{
  display:block; width:100%;
  aspect-ratio: 1 / 1;                /* 正方形 */
  background-size: cover;
  background-position: center;
  transition: transform .25s ease, opacity .25s ease;
}
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item img{
  display:block; width:100%;
  aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform .25s ease, opacity .25s ease;
}

/* （任意）左右の矢印と被るのが気になる時は少し広めに */
@media (min-width: 641px){
  .ig-slider.is-sbi .ig-viewport{ padding-inline: 24px; scroll-padding-left:24px; scroll-padding-right:24px; }
}

/* 高さ揃えをやめる（中身の高さに） */
.ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi_items{
  align-items: flex-start !important;
}

/* カード本体には背景を付けない（はみ出し解消） */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}

/* 画像ラッパーに角丸・影を移動＋正方形で固定 */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_photo_wrap{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1/1 !important;   /* ←正方形 */
  padding: 0 !important;
  height: auto !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.06) !important;
  background: #f6f6f6; /* お好みで */
}

/* 背景式 / IMG式の両対応：中身をラッパーいっぱいに */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_photo{
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  transition: transform .25s ease, opacity .25s ease;
}
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* hover演出は画像にだけ */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item:hover .sbi_photo,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item:hover img{
  transform: scale(1.02); opacity: .96;
}

/* ビューポート左右の余白（お好みで調整） */
.ig-slider.is-sbi .ig-viewport{
  padding-inline: 20px;             /* ←左右のマージン */
  scroll-padding-left: 20px;
  scroll-padding-right: 20px;
}
@media (min-width:641px){
  .ig-slider.is-sbi .ig-viewport{
    padding-inline: 24px;
    scroll-padding-left: 24px;
    scroll-padding-right: 24px;
  }
}
/* === 余白が伸びる/三角が出る問題の最終リセット === */

/* 画像以外（キャプション/メタ/フッターなど）を全て非表示 */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_caption_wrap,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_caption,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_username,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_meta,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_post_footer,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_footer,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_lightbox_toggle,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_link_area,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_info { display:none !important; }

/* 動画の再生アイコン（中央の三角）を非表示 */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_playbtn,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_video_icon,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item svg[class*="play"] { display:none !important; }

/* 伸び防止：カード系ラッパーの高さ/余白を徹底リセット */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item_inner,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_media {
  height:auto !important; min-height:0 !important;
  padding:0 !important; margin:0 !important;
}

/* 正方形カード（角丸＋影）は画像ラッパーにだけ付与 */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_photo_wrap{
  position:relative !important; display:block !important; width:100% !important;
  aspect-ratio:1/1 !important; height:auto !important; padding:0 !important;
  border-radius:10px !important; overflow:hidden !important;
  box-shadow:0 8px 18px rgba(0,0,0,.06) !important; background:#f6f6f6 !important;
}

/* 中の画像/背景をラッパーいっぱいにフィット */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_photo{
  position:absolute !important; inset:0 !important;
  background-size:cover !important; background-position:center !important;
  transition:transform .25s ease, opacity .25s ease;
}
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item img{
  width:100% !important; height:100% !important; object-fit:cover !important; display:block !important;
}

/* 念のため：画像以外の直下要素を排除（構造差分の保険） */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item > *:not(a):not(.sbi_photo_wrap):not(.sbi_media){
  display:none !important;
}

/* ビューポート左右の余白（お好みで調整） */
.ig-slider.is-sbi .ig-viewport{
  padding-inline:20px; scroll-padding-left:20px; scroll-padding-right:20px;
}
@media (min-width:641px){
  .ig-slider.is-sbi .ig-viewport{
    padding-inline:24px; scroll-padding-left:24px; scroll-padding-right:24px;
  }
}

/* ==== IGカードのアスペクト比を 4:5 に変更 ==== */
:root{ --ig-aspect: 4/5; } /* 1/1に戻したい時はここを 1/1 に */

.ig-slider.is-sbi [id^="sb_instagram"] .sbi_photo_wrap{
  aspect-ratio: var(--ig-aspect) !important;
}

.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item img{
  aspect-ratio: var(--ig-aspect) !important;
  object-fit: cover !important;
  /* 必要ならトリミング位置（中央寄り/上寄りなど） */
  /* object-position: center center !important;  */
  /* object-position: center top !important;     */
}

/* 背景式のときも同じ比率でフィット */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_photo{
  inset: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* ====== 4:5に統一（画像が正方形になるのを解除） ====== */
:root{ --ig-aspect: 4/5; }

/* カードの比率はラッパーで決定 */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_photo_wrap{
  position: relative !important;
  display:block !important;
  width:100% !important;
  aspect-ratio: var(--ig-aspect) !important;
  height:auto !important;
  padding:0 !important;
  border-radius:10px !important;
  overflow:hidden !important;
  box-shadow:0 8px 18px rgba(0,0,0,.06) !important;
  background:#f6f6f6 !important;
}

/* ★SB側の1:1指定（padding-bottom:100%など）を完全リセット */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_square,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_media,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_photo{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  margin:0 !important;
  padding-bottom:0 !important;
}

/* 背景式でも4:5にフィット */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_photo{
  background-size:cover !important;
  background-position:center center !important;
  transition:transform .25s ease, opacity .25s ease;
}

/* IMG式でも4:5にフィット（1:1を打ち消す） */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  aspect-ratio:auto !important;   /* ← 1/1を無効化 */
}

/* ===== Recruit minimal styles (CF7対応) ===== */
.recruit__h3{font-size:22px; margin:0 0 16px; font-weight:700;}
.recruit-owner__grid{
  display:grid; gap:24px; align-items:start;
  grid-template-columns: 320px 1fr;
}
.recruit-owner__photo img{width:100%; height:auto; border-radius:8px; display:block;}
.recruit-owner__text p{line-height:1.9;}

.recruit-container-single { max-width: 950px; margin: 0 auto; padding: 10px 0; }

@media (max-width: 640px){
.recruit-container-single { max-width: 90%; margin: 0 auto; padding: 10px 0; }
}

@media (max-width: 900px){
  .recruit-owner__grid{grid-template-columns:1fr;}
}

.recruit-staff__list{list-style:none; margin:0; padding:0; display:grid; gap:20px; grid-template-columns:repeat(3,1fr);}
.recruit-staff__item{display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid #eee; border-radius:10px; padding:14px;}
.recruit-staff__photo img{width:80px; height:80px; object-fit:cover; border-radius:50%;}
.recruit-staff__name{font-weight:700; margin:0 0 6px;}
.recruit-staff__msg{margin:0; line-height:1.8;}

@media (max-width: 1000px){
  .recruit-staff__list{grid-template-columns:1fr 1fr;}
}
@media (max-width: 640px){
  .recruit-staff__list{grid-template-columns:1fr;　margin-bottom: 50px;}
	
}

/* = CF7フォームの見た目合わせ */
.recruit-form__wrap{margin-top:8px;}
.recruit-form__row{margin:16px 0;}
.recruit-form__row--half{display:grid; gap:16px; grid-template-columns:1fr 1fr;}
.recruit-form__row label{display:block; font-weight:700; margin-bottom:6px;}
.input-full,
/* 入力ボックスの統一（高さ・余白・枠線） */
.site-main--recruit .recruit-form__row input[type="text"],
.site-main--recruit .recruit-form__row input[type="number"],
.site-main--recruit .recruit-form__row input[type="email"],
.site-main--recruit .recruit-form__row input[type="tel"],
.site-main--recruit .recruit-form__row input[type="file"],
.site-main--recruit .recruit-form__row textarea{
  width:100%;
  padding:10px 12px;         /* ←名前と同じ */
  border:1px solid #ccc; 
  border-radius:6px;
  font-size:16px;
  line-height:1.4;
  box-sizing:border-box;
  -webkit-appearance:none;
  appearance:none;
}

/* プレースホルダーも統一（お好みで） */
.site-main--recruit .recruit-form__row input::placeholder,
.site-main--recruit .recruit-form__row textarea::placeholder{
  color:#999; opacity:1;
}

.recruit-form__radios{display:flex; gap:14px; flex-wrap:wrap;}
.recruit-form__note{font-size:12px; color:#666; margin:6px 0 0;}
.recruit-form__actions{margin-top:20px;}
.btn.btn--primary{display:inline-block; padding:12px 20px; border-radius:6px; background:#333; color:#fff; border:0; cursor:pointer;}
.btn.btn--primary:hover{opacity:0.85;}
.req{display:inline-block; font-size:12px; color:#fff; background:#c00; padding:2px 6px; border-radius:3px; margin-left:6px;}

/* 採用ページだけ上から200px分スペースを空ける */
.page-template-page-recruit .site-main--recruit{
  padding-top: 200px;
}

/* （あると便利）ページ内アンカーのズレ防止 */
.page-template-page-recruit html{
  scroll-padding-top: 200px;
}

/* ログイン中（管理バーあり）のズレを吸収 */
.page-template-page-recruit body.admin-bar .site-main--recruit{
  padding-top: calc(200px + 32px);
}

/* ===== Recruit 応募フォーム：1列表示＆幅調整 ===== */

/* 1列化（既存の2カラム指定を打ち消す） */
.site-main--recruit .recruit-form__form.is-onecol .recruit-form__row,
.site-main--recruit .recruit-form__form.is-onecol .recruit-form__row--half{
  display:block;
}
.site-main--recruit .recruit-form__form.is-onecol .recruit-form__row--half > div{
  width:100%;
}

/* 入力系は基本“ほどよい幅”に制限（モバイルは100%） */
.site-main--recruit .recruit-form__form.is-onecol .wpcf7-form-control{
  width:100%;
  max-width: 560px;         /* 全体の基準幅（広め） */
}

/* 名前・年齢はさらにコンパクトに */
.site-main--recruit .recruit-form__form.is-onecol .input-compact{
  max-width: 360px;
}

/* メール・電話は中くらいの幅 */
.site-main--recruit .recruit-form__form.is-onecol .input-medium{
  max-width: 420px;
}

/* 自己PRは少し広め */
.site-main--recruit .recruit-form__form.is-onecol .input-wide{
  max-width: 760px;
}

/* ラジオ並び（折り返しOK） */
.site-main--recruit .recruit-form__radios{
  display:flex; gap:14px; flex-wrap:wrap;
}

/* 送信ボタンの間合い */
.site-main--recruit .recruit-form__actions{ margin-top: 20px; }

@media (max-width: 640px){
  .site-main--recruit .recruit-staff__list{
    grid-template-columns:1fr;
    margin-bottom:50px; /* 末尾に置けばこれで十分 */
  }
}

/* アクセシビリティ用にテキストは残して非表示 */
.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;
}

.title-svg{ width:min(92vw, 1200px); height:auto; display:block; margin-inline:auto; }
.title-svg .s{
  fill:#fff; fill-opacity:0; stroke:#fff; stroke-width:1;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
  /* pathLength=1 が効くなら 1 を、効かないなら 3000 に */
  stroke-dasharray:1; stroke-dashoffset:1;
}
.title-svg.is-animate .s{
  animation: draw 3.2s ease forwards, fillin .6s ease 3.2s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillin{to{fill-opacity:1}}
@media (prefers-reduced-motion: reduce){
  .title-svg .s{animation:none; stroke-dasharray:0; stroke-dashoffset:0; fill-opacity:1;}
}

.title-svg{ width:min(92vw, 1200px); height:auto; display:block; margin-inline:auto; }

/* is-animate が付いている間に再生（全 <path> 対象） */
.title-svg.is-animate path{
  animation: titleDraw 3.2s ease forwards, titleFill .6s ease 3.2s forwards;
}

@keyframes titleDraw{ to{ stroke-dashoffset:0; } }
@keyframes titleFill{ to{ fill-opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .title-svg.is-animate path{
    animation:none;
    stroke-dasharray:0; stroke-dashoffset:0; fill-opacity:1;
  }
}

/* 最初は見えない＆線も隠す（pathLengthが消されても効く安全版） */
.title-svg path{
  fill-opacity: 0;
  stroke: #fff;           /* 明るい背景なら #000 */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
}

/* ← JSで is-animate を付けたら、描く→塗る */
.title-svg.is-animate path{
  animation: titleDraw 5.4s cubic-bezier(.25,.1,.2,1) forwards,
             titleFill .8s ease 5.4s forwards;
}

@keyframes titleDraw{
  0%   { stroke-dashoffset: 3000; }  /* 初期：全部隠す */
  18%  { stroke-dashoffset: 3000; }  /* ←ここまで“止める”＝プレ遅延 */
  100% { stroke-dashoffset: 0; }     /* 以降で一気に描く */
}

@keyframes titleFill{ to { fill-opacity: 1; } }

@media (prefers-reduced-motion: reduce){
  .title-svg path{
    animation: none !important;
    stroke-dasharray: 0; stroke-dashoffset: 0; fill-opacity: 1;
  }
}

.title-svg{ width: 88vw; max-width: 680px; }
@media (min-width: 960px){
  .title-svg{ width: 52vw; max-width: 640px; }
}

/* 初期：線を隠す＆塗りは見せない（数値は必要に応じて微調整） */
/* まずは今の太さなど（あなたの既存ルールに併せる） */
.title-svg path{
  fill-opacity: 0;
  stroke: #fff;                 /* 明るい背景なら #000 */
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
}

/* 文字間トラッキング用の変数 */
.title-svg{ --gap: clamp(6px, 1.2vw, 30px); /* ここを広げる/狭める */ }

/* スマホは少し狭めたい例（任意） */
@media (max-width:640px){
  .title-svg{ --gap: clamp(4px, 1vw, 14px); }
}

/* 1文字ごとに右へシフト。必要なら --dx で微調整も可 */
.title-svg .word{ transform-box: fill-box; transform-origin: left center; }
.title-svg .ch{
  transform-box: fill-box; transform-origin: left center;
  transform: translateX(calc(var(--i) * var(--gap) + var(--dx, 0px)));
}

/* 文字全体を中央に保つ（間隔を広げてもセンター維持）
   総文字数を --n にセットして使います */
.title-svg{ --n: 6; } /* ← 文字数に合わせて変更 */
.title-svg .word{
  transform: translateX(calc((var(--n) - 1) * var(--gap) * -0.5));
}



/* 再生：1本ずつ時間差で描く。塗りは最後にまとめて出す */
.title-svg.is-animate .s{
  animation-name: draw, fillin;
  animation-duration: 1s, .6s;                  /* 1本あたりの描く時間, 塗りの時間 */
  animation-timing-function: ease, ease;
  animation-fill-mode: forwards, forwards;
  animation-delay: var(--d, 0s), 12s;             /* ← 塗りは全体の最後に（12秒後） */
}

@keyframes draw  { to { stroke-dashoffset: 0; } }
@keyframes fillin{ to { fill-opacity: 1; } }

@media (prefers-reduced-motion: reduce){
  .title-svg .s{
    animation: none !important;
    stroke-dasharray: 0; stroke-dashoffset: 0; fill-opacity: 1;
  }
}

/* ▼ここが“1文字ずつ遅らせる”階段。間隔は .45s（好みで調整） */
.title-svg .s:nth-child(1)  { --d: 0s;    }
.title-svg .s:nth-child(2)  { --d: .45s;  }
.title-svg .s:nth-child(3)  { --d: .90s;  }
.title-svg .s:nth-child(4)  { --d: 1.35s; }
.title-svg .s:nth-child(5)  { --d: 1.80s; }
.title-svg .s:nth-child(6)  { --d: 2.25s; }
.title-svg .s:nth-child(7)  { --d: 2.70s; }
.title-svg .s:nth-child(8)  { --d: 3.15s; }
.title-svg .s:nth-child(9)  { --d: 3.60s; }
.title-svg .s:nth-child(10) { --d: 4.05s; }
.title-svg .s:nth-child(11) { --d: 4.50s; }
.title-svg .s:nth-child(12) { --d: 4.95s; }
.title-svg .s:nth-child(13) { --d: 5.40s; }
.title-svg .s:nth-child(14) { --d: 5.85s; }
.title-svg .s:nth-child(15) { --d: 6.30s; }
.title-svg .s:nth-child(16) { --d: 6.75s; }
.title-svg .s:nth-child(17) { --d: 7.20s; }
.title-svg .s:nth-child(18) { --d: 7.65s; }
/* 19以降も必要なら同様に追加。間隔を .45s→.6s にするとさらにゆっくり */

@media (max-width: 640px){
  .title-svg .s{ stroke-width: 1.4px; }
}
@media (max-width: 375px){
  .title-svg .s{ stroke-width: 1.2px; }
}



/* ====== 高さが出ない問題の決定版パッチ ====== */

/* 1) カードそのものを正方形に固定（親でサイズ確定） */
.ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi_item{
  position: relative;
  flex: 0 0 var(--ig-size) !important;
  width: var(--ig-size) !important;

  /* 正方形を保証（どのブラウザでもOK） */
  aspect-ratio: 1 / 1;
  height: auto !important;
  min-height: var(--ig-size); /* 古いブラウザ保険 */

  border-radius: var(--ig-radius);
  overflow: hidden;
  background: #f6f6f6;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);

  -webkit-transform: none !important;
  transform: none !important;
  max-width: none !important; /* 旧calc指定の打消し */
}

/* 2) 画像/背景を絶対配置で全面フィット */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_photo_wrap,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_photo,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item img{
  position: absolute;
  inset: 0;           /* top:0 right:0 bottom:0 left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;  /* <img>用 */
  background-size: cover;      /* 背景方式用 */
  background-position: center; /* 背景方式用 */
  transition: transform .25s ease, opacity .25s ease;
}

/* 3) v6の背景アンカー余白を完全無効化（高さを崩さない） */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_photo{
  padding: 0 !important; /* 旧: padding-bottom:100% を封じる */
}

/* 4) iOS Safari の縮小癖の保険 */
@supports (-webkit-touch-callout: none){
  .ig-slider.is-sbi [id^="sb_instagram"] .sbi_item{ font-size: 0 !important; }
  .ig-slider.is-sbi [id^="sb_instagram"] .sbi_photo_wrap{
    -webkit-transform: none !important;
            transform: none !important;
  }
}
/* =========================================================
   Instagram：4:5（縦長）カード安定版・全ブラウザ
   ========================================================= */

.ig-slider.is-sbi{
  --ig-h: 160px;   /* カードの高さ（お好みで調整） */
  --ig-gap: 12px;  /* カード間の余白 */
  --ig-radius: 12px;
}

@media (max-width: 480px){
  .ig-slider.is-sbi{
    --ig-h: 180px;  /* SPでは少し大きめに（任意） */
    --ig-gap: 12px;
    --ig-radius: 12px;
  }
}

/* 横スクロールのラッパーはそのまま */
.ig-slider.is-sbi .ig-viewport{
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.ig-slider.is-sbi .ig-viewport::-webkit-scrollbar{ display:none; }

/* Smash Balloonの横並び */
.ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi,
.ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi_feed,
.ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi_feed_container{
  display:flex !important;
  align-items:center;
  gap:var(--ig-gap);
  width:max-content;
}

/* ===== 4:5カード本体：高さ基準で幅を算出 ===== */
.ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi_item{
  position:relative;

  /* 4:5（幅:高さ=4:5） */
  height: var(--ig-h) !important;
  width: calc(var(--ig-h) * 4 / 5) !important;
  flex: 0 0 calc(var(--ig-h) * 4 / 5) !important;

  /* 念のための宣言（対応ブラウザではこれでも成立） */
  aspect-ratio: 4 / 5;

  scroll-snap-align:center;
  border-radius:var(--ig-radius);
  overflow:hidden;
  background:#f6f6f6;
  box-shadow:0 8px 18px rgba(0,0,0,.06);

  /* 旧スタイルの正方形指定やscaleの打消し */
  max-width:none !important;
  -webkit-transform:none !important;
  transform:none !important;
}

/* a要素が親のときも100%フィット */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item > a{
  display:block;
  width:100%;
  height:100%;
}

/* 中身（img / 背景アンカー）を全面フィットさせる */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_photo_wrap,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_photo,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;          /* img用 */
  background-size:cover;     /* 背景方式用 */
  background-position:center;
  transition:transform .25s ease, opacity .25s ease;
}

/* v6のpadding-bottom:100%を完全無効化（高さ崩れ防止） */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_photo{
  padding:0 !important;
}

/* hover（任意） */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item:hover img,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item:hover .sbi_photo{
  transform:scale(1.02);
  opacity:.96;
}

/* 余計なUIは非表示（任意） */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_header,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_follow_btn,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_load_btn{
  display:none !important;
}

/* iOS Safariの縮小癖に保険 */
@supports (-webkit-touch-callout: none){
  .ig-slider.is-sbi [id^="sb_instagram"] .sbi_item{ font-size:0 !important; }
  .ig-slider.is-sbi [id^="sb_instagram"] .sbi_photo_wrap{
    -webkit-transform:none !important;
            transform:none !important;
  }
}

/* =========================================================
   Instagram：Smash Balloon 横スクロール 4:5カード安定版
   （幅基準で高さを自動算出／角丸／Safari対策込み）
   ========================================================= */

/* 調整用トークン */
.ig-slider.is-sbi{
  --ig-w: 190px;    /* カードの幅（PC） */
  --ig-gap: 12px;   /* カード間の余白 */
  --ig-radius: 12px;/* 角丸 */
}
@media (max-width: 480px){
  .ig-slider.is-sbi{
    --ig-w: 160px;  /* カードの幅（SP） */
    --ig-gap: 10px;
    --ig-radius: 10px;
  }
}

/* 横スクロールビュー */
.ig-slider.is-sbi .ig-viewport{
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ig-slider.is-sbi .ig-viewport::-webkit-scrollbar{ display:none; }

/* Smash Balloonのラッパを横並びに */
.ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi,
.ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi_feed,
.ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi_feed_container{
  display:flex !important;
  align-items:center;
  gap:var(--ig-gap);
  width:max-content;
}

/* ===== 4:5 カード本体（幅基準） =====
   幅:高さ = 4:5 → 高さ = 幅 * 1.25
*/
.ig-slider.is-sbi .ig-viewport [id^="sb_instagram"] .sbi_item{
  position: relative;
  width: var(--ig-w) !important;
  height: calc(var(--ig-w) * 1.25) !important;
  flex: 0 0 var(--ig-w) !important;
  /* 補助（対応ブラウザではこちらも効く） */
  aspect-ratio: 4 / 5;

  scroll-snap-align: center;
  border-radius: var(--ig-radius);
  overflow: hidden;
  background: #f6f6f6;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);

  /* 旧スタイルのcalc幅・scale等を打ち消し */
  max-width: none !important;
  -webkit-transform: none !important;
  transform: none !important;
}

/* a直下に来る場合のフィット */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item > a{
  display:block;
  width:100%;
  height:100%;
}

/* 画像/背景を全面フィット（img／.sbi_photo 両対応） */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_photo_wrap,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_photo,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;          /* <img>用 */
  background-size:cover;     /* 背景方式用 */
  background-position:center;
  transition: transform .25s ease, opacity .25s ease;
}

/* v6で残りがちな padding-bottom:100% を完全無効化 */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item .sbi_photo{
  padding:0 !important;
}

/* hover演出（任意） */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item:hover img,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_item:hover .sbi_photo{
  transform:scale(1.02);
  opacity:.96;
}

/* 余計なUIを非表示（任意） */
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_header,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_follow_btn,
.ig-slider.is-sbi [id^="sb_instagram"] .sbi_load_btn{
  display:none !important;
}

/* iOS Safari の縮小癖に保険 */
@supports (-webkit-touch-callout: none){
  .ig-slider.is-sbi [id^="sb_instagram"] .sbi_item{ font-size:0 !important; }
  .ig-slider.is-sbi [id^="sb_instagram"] .sbi_photo_wrap{
    -webkit-transform:none !important;
            transform:none !important;
  }
}

/* ---- 既存の“正方形（--ig-size / aspect-ratio:1/1）”や
   calc((100% - 20px)/3) 等の指定はこのブロックで上書きされます ---- */

/* 外部リンクの見た目（濃いグレー＋1本の点線下線） */
.entry-ext__link{
  display:inline-flex;           /* 既存と同じ */
  align-items:center;
  gap:8px;
  color:#444;                    /* 濃いグレー */
  text-decoration:none;          /* 既存の下線を無効化 */
  border-bottom:2px dotted currentColor; /* アンカー全体に1本の点線 */
  padding-bottom:2px;            /* 下線の余白（好みで調整） */
}

/* visitedも同じ色で統一 */
.entry-ext__link:visited{ color:#444; }

/* ホバー時：下線のみ消す（色はそのまま） */
.entry-ext__link:hover{ border-bottom-color: transparent; }

/* 子要素の下線継承を念のため無効化（分割防止の保険） */
.entry-ext__text,
.entry-ext__note{ text-decoration:none; }

/* 補足：注釈の色は少し薄めのまま（必要なければ削除可） */
.entry-ext__note{ color:#666; }

/* アイコンはそのまま（サイズ指定済みなら不要） */
.entry-ext__icon{ width:1em; height:1em; }


/* ============================
   Ultra Fast Header Fade（single / archive）
   JS不要・即発火・0.18s
   ============================ */

/* 既存の slow ルールを無効化（保険） */
.single .site-ui,
.archive .site-ui{
  transition: none !important;
}

/* ここから超速アニメーション */
.single .site-ui,
.archive .site-ui{
  opacity: 0;
  transform: translateY(-2px); /* 移動量は控えめ→体感を速く */
  animation: uiFastIn .8s cubic-bezier(.2,.9,.2,1) .00s both;
  will-change: opacity, transform;
}

@keyframes uiFastIn{
  to{ opacity:1; transform:none; }
}

/* 視覚効果を控える設定の尊重 */
@media (prefers-reduced-motion: reduce){
  .single .site-ui,
  .archive .site-ui{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}



/* =========================================
   Gift Section（KitchenTrailer同格の特別枠）
   バージョン: 2025/11/11
   設計: BEM / rem+clamp / BP: 576/768/1024/1280/1440
   ========================================= */
.section-gift{
  --gift-bg: #F6F6F6;            /* 背景 */
  --gift-radius: 10px;           /* 角丸（画像） */
  --gift-gap: clamp(16px,4vw,40px);
  --gift-maxw: 1280px;           /* コンテナの基準幅 */
  --gift-btn-h: 3rem;            /* 約48px */
  background: var(--gift-bg);
  padding: clamp(32px,5vw,64px) 5vw;
}
.section-gift .container{
  max-width: var(--gift-maxw);
  margin-inline: auto;
  padding: 0;
}
.gift{
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* 左メディア：右テキスト */
  gap: var(--gift-gap);
  align-items: center;
}
@media (max-width: 1024px){
  .gift{ grid-template-columns: 1fr; }
}

/* メディア（スライダー） */
.gift__media{ width: 100%; }
.gift__slider{
  position: relative;
  overflow: hidden;
  border-radius: var(--gift-radius);
  /* アスペクトは4:3基準。必要に応じ変更可（例: 16/9, 4/5） */
  aspect-ratio: 4 / 3;
  background: #e9e9e9;
  will-change: transform;
}
.gift__track{
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 600ms ease;
  /* Scroll Snapと相性よし（今回はtransform移動） */
}
.gift__slide{
  flex: 0 0 100%;
  height: 100%;
  position: relative;
}
.gift__slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--gift-radius);
}

/* ナビ（任意・キーボード対応） */
.gift__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border: 0; background: rgba(0,0,0,.35);
  color: #fff; border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
}
.gift__nav--prev{ left: 8px; }
.gift__nav--next{ right: 8px; }
.gift__nav:focus-visible{ outline: 2px solid #000; outline-offset: 2px; }

/* テキスト側 */
.gift__text{ line-height: 1.8; }
.gift__title{
  font-weight: 600;
  letter-spacing: .04em;
  margin: 0 0 .5em;
	font-size: clamp(20px, 8vw, 40px);
	font-family: "Hina Mincho", serif;
    color: #000;
    font-weight: 200;
    letter-spacing: .08em;
}

.gift__lead{
  font-size: var(--gift-lead);
  margin: 0 0 1.25em;
	font-size:  clamp(15px,1.5vw,16px);
}
.gift__cta{ margin: 1.25em 0 1em; }
.gift__button{
  display: inline-grid; place-items: center;
  height: var(--gift-btn-h);
  padding: 0 1.25rem;
  border-radius: 999px;
  background: #1a1a1a; color: #fff; text-decoration: none;
  font-size: clamp(14px,1.6vw,16px);
  transition: transform .2s ease, opacity .2s ease;
}
.gift__button:hover{ transform: translateY(-1px); opacity: .9; }
.gift__notes{
  margin: .75em 0 0;
  padding-left: 1.2em;
  font-size: clamp(13px,1.5vw,14px);
}

/* アピアランス（軽量版）：ふわっと */
.js-appear[data-io]{ opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.js-appear.is-inview{ opacity: 1; transform: none; }

/* リッチ版（必要時）：クリップリビール */
.section-gift.is-reveal .gift__media{
  clip-path: inset(0 0 0 0 round var(--gift-radius));
  animation: giftReveal .9s ease both;
}
@keyframes giftReveal{
  from{ clip-path: inset(0 100% 0 0 round var(--gift-radius)); }
  to{ clip-path: inset(0 0 0 0 round var(--gift-radius)); }
}

/* 調整（小さめ端末） */
@media (max-width: 576px){
  .gift__notes{ padding-left: 1em; }
}

/* 配慮：動きに弱い利用者 */
@media (prefers-reduced-motion: reduce){
  .gift__track{ transition: none; }
  .js-appear[data-io]{ transition: none; opacity: 1; transform: none; }
}

/* =========================================================
   Calendar equal-height PATCH  (HTMLは変更不要)
   対象: .section-calendar .calendar-gallery / .calendar-item
   目的: 2枚のカードの高さを必ず揃える
   使い方: 既存CSSの"最後"に貼り付けて上書き
   調整: --cal-aspect を 1/1, 6/5, 4/3 などに変更可能
========================================================= */

/* このセクション専用の調整変数 */
.section-calendar{
  --cal-gap: clamp(16px, 2.4vw, 32px);
  --cal-radius: 16px;
  --cap-fz: clamp(12px, 1.6vw, 14px);
  /* 枠の縦横比（2枚を同じ比率で統一 → 高さが一致） */
  --cal-aspect: 1/1;           /* 例: 縦長なら 6/5、横長なら 4/3 に */
}

/* 親：2カラムの同高レイアウト */
.section-calendar .calendar-gallery{
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: var(--cal-gap);
  align-items: stretch; /* 子figureを同じ行高に伸ばす */
}

/* カード全体：上=画像枠(1fr) / 下=キャプション(auto) */
.section-calendar .calendar-item{
  margin: 0 auto; /* figureの初期marginを打ち消し */
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 15px;
	margin-bottom: 20px;
}

/* 画像リンクを“比率固定ボックス”にして高さ統一 */
.section-calendar .calendar-item > a{
  display: grid;
  place-items: center;
  aspect-ratio: var(--cal-aspect);
  background: #0e7776;               /* 下地色（画像が小さい場合の見え方を揃える） */
  border-radius: var(--cal-radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  text-decoration: none;
}

/* 中のサムネイル画像を枠内にフィット */
.section-calendar .calendar-item img{
  width: 100%;
  height: 100%;
  object-fit: contain;               /* 切って良ければ cover に変更 */
  display: block;
}

/* キャプションを中央のピル型に（見た目を揃える） */
.section-calendar .calendar-item figcaption{
  margin: 0;
  justify-self: center;
  padding: .45em 1em;
  font-size: var(--cap-fz);
  line-height: 1;
  color: #fff;
  background: #2b8e8c;
  border-radius: 999px;
}

/* レスポンシブ：SPは1列 */
@media (max-width: 768px){
  .section-calendar .calendar-gallery{
    grid-template-columns: 1fr;
  }
}

/* =========================================
   Gift Section：順次アニメ（追加なし版）
   トリガー：.section-gift.js-appear.is-inview
   写真 → H2 → 下線（左→右・少し長め）→ テキスト
   ========================================= */

/* トークン（色・時間・遅延） */
.section-gift{
  --gift-underline-color: var(--brand-color, #35a1a8);
  --underline-thickness: 3px;
  --underline-offset: 0.15em;

  --dur-media: .50s;   /* 写真 */
  --dur-title: .50s;   /* H2 */
  --dur-uline: 1.20s;  /* 下線：少し長め */
  --dur-text : .50s;   /* テキスト */

  --delay-media: 0s;
  --delay-title: .60s;
  --delay-uline: 1.20s;
  --delay-lead : 2.40s;
  --delay-cta  : 2.60s;
  --delay-notes: 2.80s;
}

/* 初期（非表示） */
.section-gift .gift__media,
.section-gift .gift__title,
.section-gift .gift__lead,
.section-gift .gift__cta,
.section-gift .gift__notes{
  opacity: 0;
  transform: translateY(10px);
  will-change: opacity, transform;
}

/* H2と下線の下準備 */
.section-gift .gift__title{
  position: relative;
  display: inline-block; /* テキスト幅に追従 */
  overflow: visible;
  isolation: isolate;
}
.section-gift .gift__title::after{
  content:"";
  position:absolute;
  left:0;
  bottom: calc(-1 * var(--underline-offset, 0.35em));
  width: 300%;                          /* ← テキスト幅の2倍 */
  height: 3px;                          /* ← 2px固定 */
  background: var(--gift-underline-color, #35a1a8);
  transform-origin: left center;         /* 左起点で */
  transform: scaleX(0);                  /* 0 → 1 で伸びる */
  /* トランジション or アニメのどちらを使っていてもOK */
  transition: transform var(--dur-uline, 1.2s) ease var(--delay-uline, 1.2s);
  will-change: transform;
}

/* キーフレーム（アニメ方式で競合に強く） */
@keyframes gift-fadeup { from {opacity:0; transform:translateY(10px);} to {opacity:1; transform:none;} }
@keyframes gift-uline  { from {transform:scaleX(0);} to {transform:scaleX(1);} }

/* 発火：既存の .js-appear.is-inview に連動（JS追加不要） */
.section-gift.js-appear.is-inview .gift__media { animation: gift-fadeup var(--dur-media) ease var(--delay-media) both; }
.section-gift.js-appear.is-inview .gift__title  { animation: gift-fadeup var(--dur-title) ease var(--delay-title) both; }
.section-gift.js-appear.is-inview .gift__title::after { animation: gift-uline var(--dur-uline) ease var(--delay-uline) both; }
.section-gift.js-appear.is-inview .gift__lead  { animation: gift-fadeup var(--dur-text)  ease var(--delay-lead)  both; }
.section-gift.js-appear.is-inview .gift__cta   { animation: gift-fadeup var(--dur-text)  ease var(--delay-cta)   both; }
.section-gift.js-appear.is-inview .gift__notes { animation: gift-fadeup var(--dur-text)  ease var(--delay-notes) both; }

/* 配慮：動きが苦手な方には静止表示 */
@media (prefers-reduced-motion: reduce){
  .section-gift .gift__media,
  .section-gift .gift__title,
  .section-gift .gift__lead,
  .section-gift .gift__cta,
  .section-gift .gift__notes{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .section-gift .gift__title::after{
    animation: none !important;
    transform: none !important;
  }
}

/* ============================
   br：表示制御ユーティリティ
   BP基準：576/768/1024/1280/1440
   ============================ */

/* デフォルト：非表示（=スマホで改行させない） */
.u-br--pc { display: none; }

/* 577px以上（タブレット～PC）：改行を有効化 */
@media (min-width: 577px){
  .u-br--pc { display: inline; } 
}

/* イベント／ニュースの本文内リンク
   - ラッパー：.news-single__content（共通）
   - 文字色は変えない
   - 2pxの点線アンダーライン
   - マウスホバーで下線を消す
   - ボタン/意図的除外/画像リンクは除外
*/
.single-event .news-single__content a:not(.wp-block-button__link):not([class*="btn"]):not(.btn-brand):not(.no-underline),
.single-news  .news-single__content a:not(.wp-block-button__link):not([class*="btn"]):not(.btn-brand):not(.no-underline){
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 3px;
  text-underline-offset: .5em;
  transition: text-decoration .2s ease;
	text-decoration-color:var(--brand);
}

/* ホバーで下線OFF（マウス環境のみ） */
@media (hover:hover){
  .single-event .news-single__content a:not(.wp-block-button__link):not([class*="btn"]):not(.btn-brand):not(.no-underline):hover,
  .single-news  .news-single__content a:not(.wp-block-button__link):not([class*="btn"]):not(.btn-brand):not(.no-underline):hover{
    text-decoration: none;
  }
}

/* キーボード操作の見失い防止（任意） */
.single-event .news-single__content a:focus-visible,
.single-news  .news-single__content a:focus-visible{
  outline: 2px dashed currentColor;
  outline-offset: 2px;
}

/* フォールバック：text-decoration-style未対応ブラウザ用 */

/* ご意見フォーム 共通 */
.c-form--opinions .c-form__row{ margin: clamp(12px, 2vw, 18px) 0; }
.c-form--opinions label{ display:block; margin-bottom: 8px; font-size: clamp(14px, 1.6vw, 16px); }
.c-form--opinions input[type="text"],
.c-form--opinions input[type="email"],
.c-form--opinions textarea{
  width:100%; padding: .7em .9em; border:1px solid #ccc; border-radius: 8px;
  font-size: clamp(14px, 1.7vw, 16px); line-height:1.7; background:#fff;
}
.c-form--opinions textarea{ min-height: 160px; resize: vertical; }
.c-form__req{ color:#c00; font-weight:600; }

/* 送信ボタン（ブランドカラー × 白抜き） */
:root{ --brand:#35a1a8; } /* 既に定義がある場合はこの行は不要 */
.wpcf7 .btn-brand{
  display:inline-block; background: var(--brand); color:#fff; text-decoration:none;
  border: 0; border-radius: 999px; padding: .72em 1.4em; font-weight:600; cursor:pointer;
  transition: filter .2s ease, opacity .2s ease;
}
.wpcf7 .btn-brand:hover{ filter: brightness(1.06); }
.wpcf7 .btn-brand:disabled{ opacity:.6; cursor:not-allowed; }

/* 幅広ボタン（スマホで押しやすく） */
.wpcf7 .btn--full{ display:block; width:min(320px, 100%); margin: 14px auto 0; text-align:center; }

/* 送信結果メッセージの余白（任意） */
.wpcf7 form .wpcf7-response-output{ margin: 18px 0 0; }

@supports not (text-decoration-style: dotted){
  .single-event .news-single__content a:not(.wp-block-button__link):not([class*="btn"]):not(.btn-brand):not(.no-underline),
  .single-news  .news-single__content a:not(.wp-block-button__link):not([class*="btn"]):not(.btn-brand):not(.no-underline){
    text-decoration: none;
    border-bottom: 2px dotted currentColor;
  }
  @media (hover:hover){
    .single-event .news-single__content a:hover,
    .single-news  .news-single__content a:hover{
      border-bottom-color: transparent;
    }
  }
}



/* =======================================
   Auto Flow Gallery（斜めストリップ版）
   帯とギャラリーをまとめて約15°回転
   ======================================= */

.section-autoflow{
  position: relative;
  overflow: visible; /* 斜めに飛び出すので visible */
  padding: clamp(60px, 10vw, 100px) 0;

  /* カスタム変数：ブランドカラー＆傾き */
  --brand-color: #35a1a8;  /* 好きな色に変更可 */
  --tilt: -15deg;          /* 約15°ナナメ（マイナスで右下がり） */
}

/* 帯＋ギャラリー全体をまとめる箱（ここを回転させる） */
.section-autoflow__inner{
  position: relative;
  z-index: 0;
  width: 120%;             /* 少し広めにして両端の白抜けを防ぐ */
  margin-inline: -10%;     /* 中央にくるよう左右に広げる */
  transform-origin: center center;
  transform: rotate(var(--tilt));  /* 帯全体をナナメに */
}

/* ブランドカラーの帯本体（左から伸びるアニメ用） */
.section-autoflow__inner::before{
  content: "";
  position: absolute;
  inset: 0;
  margin-inline: clamp(16px, 4vw, 40px); /* 帯の左右の余白 */
  border-radius: 18px;
  background: var(--brand-color);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.12);

  transform-origin: left center;
  transform: scaleX(0); /* 初期状態：幅0 → 左から伸びる */
  transition: transform 0.9s cubic-bezier(.19, 1, .22, 1);

  z-index: -1; /* ギャラリーの背面に */
}

/* ギャラリーの中身（flow-strip側） */
.flow-strip__inner{
  position: relative;
  padding: clamp(32px, 5vw, 48px) clamp(24px, 5vw, 48px);
  /* デフォルトでは常に表示（JSが死んでも見えるように） */
  opacity: 1;
  transform: none;
}

/* JSが有効なときだけ「アニメ前」の状態にする */
.section-autoflow.is-anim-ready .flow-strip__inner{
  opacity: 0;
  transform: translateY(24px); /* 下からふわっと */
  transition:
    opacity 0.6s ease-out 0.35s,
    transform 0.6s ease-out 0.35s;
}

/* スクロールで発火した後の状態（帯＋ギャラリー） */
.section-autoflow.is-active .section-autoflow__inner::before{
  transform: scaleX(1); /* 左からスッと全幅に */
}

.section-autoflow.is-anim-ready.is-active .flow-strip__inner{
  opacity: 1;
  transform: translateY(0);
}

/* --- SP 調整 --- */
@media (max-width: 768px){
  .section-autoflow{
    padding: clamp(40px, 12vw, 72px) 0;
    --tilt: -12deg; /* スマホでは少しだけ傾きを弱めるなど */
  }

  .section-autoflow__inner{
    width: 140%;
    margin-inline: -20%;
  }

  .section-autoflow__inner::before{
    margin-inline: clamp(12px, 5vw, 24px);
  }
}

/* --- 動きを控えたい人向け：OS設定を尊重 --- */
@media (prefers-reduced-motion: reduce){
  .section-autoflow__inner{
    transform: rotate(var(--tilt)); /* 傾きだけ維持 */
  }

  .section-autoflow__inner::before{
    transform: scaleX(1);
    transition: none;
  }

  .flow-strip__inner{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =======================================
   Auto Flow Gallery 斜め5°版
   （帯を広く・上下マージン浅め）
   ======================================= */

.section-autoflow{
  position: relative;
  overflow: visible;
  /* 上下マージンを浅く */
  padding: clamp(32px, 7vw, 48px) 0;
  --brand-color: #35a1a8;  /* 帯の色：必要なら変更 */
  --tilt: -3deg;           /* 傾き：約5° */
}

/* 帯＋ギャラリー本体（ここを回転させる） */
.section-autoflow__inner.flow-strip__inner{
  position: relative;
  z-index: 0;

  /* 帯を広く：横幅を大きめにして左右をはみ出させる */
  width: 140%;
  margin-inline: -20%;

  /* 内側余白は少し控えめ */
  padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 32px);

  transform-origin: center center;
  transform: rotate(var(--tilt)); /* ★ ここで約5°ナナメ */
  opacity: 1;                     /* JSが効かなくても見えるようにデフォルトは表示 */
}

/* ブランドカラーの帯（左から伸びる） */
.section-autoflow__inner.flow-strip__inner::before{
  content: "";
  position: absolute;
  inset: 0;

  /* 帯の左右マージンを小さくして“ほぼ全幅”に */
  margin-inline: clamp(8px, 3vw, 20px);

  border-radius: 18px;
  background: var(--brand-color);
  box-shadow: 0 20px 32px rgba(0,0,0,0.1);

  transform-origin: left center;
  transform: scaleX(0);  /* 初期：幅0 → アニメで伸ばす */
  transition: transform 0.9s cubic-bezier(.19, 1, .22, 1);
  z-index: -1;
}

/* JS 有効時だけ「アニメ前」の姿に切り替える */
.section-autoflow.is-anim-ready .section-autoflow__inner.flow-strip__inner{
  opacity: 0;
  transform: rotate(var(--tilt)) translateY(20px);
  transition:
    opacity 0.6s ease-out 0.35s,
    transform 0.6s ease-out 0.35s;
}

/* スクロールで発火したあと */
.section-autoflow.is-active
  .section-autoflow__inner.flow-strip__inner::before{
  transform: scaleX(1);
}

.section-autoflow.is-anim-ready.is-active
  .section-autoflow__inner.flow-strip__inner{
  opacity: 1;
  transform: rotate(var(--tilt)) translateY(0);
}

/* SP 調整 */
@media (max-width: 768px){
  .section-autoflow{
    padding: clamp(28px, 10vw, 40px) 0;
    --tilt: -5deg;  /* スマホも同じくらいの角度で */
  }

  .section-autoflow__inner.flow-strip__inner{
    width: 150%;
    margin-inline: -25%;
    padding: clamp(20px, 6vw, 28px) clamp(16px, 5vw, 24px);
  }

  .section-autoflow__inner.flow-strip__inner::before{
    margin-inline: clamp(6px, 4vw, 16px);
  }
}

/* 動きを控えたい設定の人向け */
@media (prefers-reduced-motion: reduce){
  .section-autoflow__inner.flow-strip__inner{
    transform: rotate(var(--tilt));
    opacity: 1;
  }

  .section-autoflow__inner.flow-strip__inner::before{
    transform: scaleX(1);
    transition: none;
  }
}

/* picture要素を入れた時にサイズが崩れないように */
.hero__pic{
  display: block;
  width: 100%;
  height: 100%;
}

/* 既存で hero__bg に cover が入ってなければ（入ってるなら不要） */
.hero__bg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =======================================
   2025/12/13 Card & Image Variation Patch（安全寄り）
   目的：角丸＆影の「全部同じ箱感」を減らす
   影響範囲：front-page中心（store / event / menu / calendar / gift）
   ※レイアウト系（display/grid）は触らない
======================================= */

:root{
  --shape-a: 6px;
  --shape-b: 16px;
  --shape-mix-1: 18px 6px 18px 6px;
  --shape-mix-2: 6px 18px 6px 18px;
  --line-subtle: rgba(0,0,0,.10);
  --shadow-quiet: 0 10px 24px rgba(0,0,0,.08);
}

/* 1) 「影だらけ」をいったん静かに（枠線で上品に） */
.section-store .store-card,
.section-events .event-card,
.section-calendar .calendar-item img,
.menu-sec__images img{
  box-shadow: none !important;
  border: 1px solid var(--line-subtle);
}

/* 2) Store：カードの角丸を“3種類”にして単調さを崩す */
.section-store .store-card{
  border-radius: var(--shape-a) !important;
  overflow: hidden; /* 既存通り */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.section-store .store-card:nth-child(3n+2){ border-radius: var(--shape-mix-1) !important; }
.section-store .store-card:nth-child(3n){   border-radius: var(--shape-mix-2) !important; }

/* 画像は“カードと同じ角丸”にしない（＝箱感を弱める） */
.section-store .store-thumb img{
  border-radius: 0 !important;
}

/* hoverは控えめに（雑誌っぽく） */
.section-store .store-card:hover{
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-quiet) !important;
  border-color: rgba(0,0,0,.14);
}

/* 3) Event：ストアと同じ箱に見えないよう、形を変える */
.section-events .event-card{
  border-radius: var(--shape-b) !important;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.section-events .event-card:nth-child(odd){
  border-radius: var(--shape-mix-2) !important;
}
.section-events .event-thumb img{
  border-radius: 0 !important;
}
.section-events .event-card:hover{
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-quiet) !important;
  border-color: rgba(0,0,0,.14);
}

/* 4) Menu（3枚画像）：3枚とも同じ角丸をやめる */
.menu-sec__images img{
  border-radius: var(--shape-a) !important;
}
.menu-sec__images > *:nth-child(2) img{
  border-radius: var(--shape-mix-1) !important;
}
.menu-sec__images > *:nth-child(3) img{
  border-radius: var(--shape-mix-2) !important;
}

/* 5) Calendar：画像の角丸を控えめ＋バリエーション */
.section-calendar .calendar-item img{
  border-radius: var(--shape-a) !important;
}
.section-calendar .calendar-item:nth-child(odd) img{
  border-radius: var(--shape-mix-1) !important;
}

/* 6) Gift：ここは“特別枠”なので角丸は小さめで締める */
.section-gift{
  --gift-radius: 6px; /* 既存の変数を上書きするだけ */
}