/* ===================================================================
   海都 ブランドページ 差分スタイル（css/style.css を基盤に追記）
   共通トークン(--washi/--enji/--gold 等)・.reveal・.site-footer は style.css を継承
   =================================================================== */

:root{
  --kaito-gold:  #c19a4e;   /* 海都メニュー/テイク帯の金茶 */
  --kaito-gold2: #ab8339;
}

/* 左右から寄るReveal（こだわりセクション用） */
.reveal.from-left{transform:translateX(-46px);}
.reveal.from-right{transform:translateX(46px);}
.reveal.from-left.is-visible,
.reveal.from-right.is-visible{transform:none;}

/* ============ ブランドヘッダー（海都・ロゴ＋縦書きナビ） ============ */
.kaito-header{background:rgba(247,243,236,.6);}
.kaito-header.is-scrolled{background:#fff;}
.kaito-brandlock{display:flex;align-items:center;gap:16px;line-height:1;}
/* 実ロゴ入稿データ受領待ち。現状はテキスト仮置き（赤地の海都ロゴ枠） */
.kaito-logo{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--enji);color:#fff;border-radius:3px;
  padding:8px 12px;box-shadow:0 3px 10px rgba(120,15,30,.22);
}
.kaito-logo__sushi{font-family:var(--serif);font-size:12px;letter-spacing:2px;writing-mode:vertical-rl;line-height:1;}
.kaito-logo__name{font-family:"Yuji Syuku",var(--serif);font-size:30px;letter-spacing:4px;-webkit-text-stroke:.6px #fff;}
.kaito-logo-sub{font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:1px;color:var(--ink-soft);opacity:.85;}
.kaito-logo-sub small{font-size:11px;margin-left:2px;color:var(--enji);}

/* 縦書きサイト内ナビ（右端＝こだわり になるよう row-reverse） */
.kaito-nav ul{flex-direction:row-reverse;gap:22px;align-items:flex-start;}
.kaito-nav a{
  writing-mode:vertical-rl;text-orientation:upright;
  font-family:var(--serif);font-weight:600;font-size:15px;letter-spacing:2px;
  padding:2px 3px;line-height:1.1;
}
.kaito-nav a::after{left:auto;right:-3px;top:0;bottom:auto;width:2px;height:100%;transform:scaleY(0);transform-origin:top;}
.kaito-nav a:hover::after{transform:scaleY(1);}

/* ============ ヒーロー（レーン上の中トロ皿・カルーセル風枠） ============ */
.kaito-hero{position:relative;width:100%;height:88vh;min-height:560px;max-height:820px;overflow:hidden;background:#2a1c12;}
.kaito-hero__viewport{position:absolute;inset:0;}
.kaito-hero__img{width:100%;height:100%;object-fit:cover;animation:kenburns 22s ease-out both;}
.kaito-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.04) 34%,transparent 60%);pointer-events:none;}
.kaito-hero__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:56px;height:56px;border:1px solid rgba(255,255,255,.7);border-radius:2px;
  background:rgba(20,12,6,.18);color:#fff;font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .3s,transform .3s var(--ease);
}
.kaito-hero__arrow:hover{background:rgba(166,25,46,.75);}
.kaito-hero__arrow--prev{left:22px;}
.kaito-hero__arrow--next{right:22px;}
.kaito-hero__dots{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;gap:0;}
.kaito-hero__dots span{flex:1;height:5px;background:rgba(255,255,255,.45);}
.kaito-hero__dots span.is-active{background:var(--kaito-gold);}

/* WEB予約バッジ（遷移先未定・data-todo） */
.kaito-reserve{
  position:absolute;right:46px;top:58%;transform:translateY(-50%);z-index:4;
  width:116px;height:116px;border-radius:50%;
  background:radial-gradient(circle at 40% 34%,#b81f36,var(--enji-dark));
  border:2px solid rgba(255,255,255,.4);box-shadow:0 12px 28px rgba(120,15,30,.42);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:#fff;text-align:center;animation:badgePulse 3.2s ease-in-out infinite;
  transition:transform .3s var(--ease);
}
.kaito-reserve:hover{transform:translateY(-50%) scale(1.06);}
.kaito-reserve span{font-size:11px;letter-spacing:.5px;}
.kaito-reserve b{font-family:var(--serif);font-size:18px;letter-spacing:1px;}

/* ============ 縦書きセクションラベル（FAIR/NEWS/INSTAGRAM） ============ */
.kaito-seclabel{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  writing-mode:vertical-rl;flex:0 0 auto;padding-top:6px;
}
.kaito-seclabel__en{font-family:var(--serif);font-size:12px;letter-spacing:3px;color:var(--enji);writing-mode:horizontal-tb;}
.kaito-seclabel__ja{font-family:var(--serif);font-weight:600;font-size:26px;letter-spacing:8px;color:var(--ink);}
.kaito-seclabel__wave{width:22px;height:120px;opacity:.5;}
.kaito-seclabel__icon{width:26px;height:26px;stroke:var(--ink);fill:none;}

/* ============ フェア情報カルーセル ============ */
.kaito-sec{display:grid;grid-template-columns:120px 1fr;gap:30px;align-items:start;}
.kaito-fair{padding-top:70px;padding-bottom:40px;}
.fair-carousel{position:relative;display:flex;align-items:center;gap:8px;}
.fair-viewport{overflow:hidden;flex:1;}
.fair-track{display:flex;gap:24px;transition:transform .6s var(--ease);}
.fair-card{flex:0 0 calc((100% - 24px*3)/4);min-width:0;
  border:1px solid var(--line);background:#fff;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);}
.fair-card:hover{transform:translateY(-5px);box-shadow:0 16px 30px rgba(40,25,10,.14);}
.fair-card img{width:100%;height:100%;aspect-ratio:36/44;object-fit:cover;}

/* ============ お知らせ ============ */
.kaito-news{padding-top:40px;padding-bottom:40px;}
.kaito-newslist li{border-bottom:1px solid var(--line);}
.kaito-newslist a{display:block;padding:22px 4px;transition:background .25s;}
.kaito-newslist a:hover{background:rgba(179,154,91,.06);}
.kaito-news__title{margin:0 0 8px;font-family:var(--serif);font-size:19px;letter-spacing:1px;color:var(--ink);font-weight:500;}
.kaito-news__meta{display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--ink-soft);letter-spacing:1px;}
.kaito-news__cat{color:var(--ink);}
.kaito-pager{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:40px;font-family:var(--serif);font-size:15px;color:var(--ink-soft);}
.kaito-pager a{transition:color .2s;}
.kaito-pager a:hover{color:var(--enji);}
.kaito-pager .is-active{color:var(--enji);border-bottom:1px solid var(--enji);padding-bottom:2px;}

/* ============ こだわり3連 ============ */
.kaito-kodawari{
  max-width:1320px;margin:0 auto;padding:40px 40px 90px;
  background:
    radial-gradient(circle at 82% 6%, rgba(31,48,85,.05) 0, transparent 30%),
    linear-gradient(180deg,transparent, rgba(200,180,140,.05));
}
.vtext{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--serif);color:var(--ink);}

/* 縦書き見出し共通 */
.kodawari__lead{font-size:15px;letter-spacing:4px;color:var(--ink-soft);margin:0;font-weight:500;}
.kodawari__title{font-size:34px;letter-spacing:8px;font-weight:600;margin:0;}

/* --- block1: 鮮度（大写真＋縦見出し / 市場写真＋横本文） --- */
.kodawari--fresh{margin-bottom:78px;}
.kodawari__top{display:flex;align-items:stretch;gap:34px;}
.kodawari__hero{flex:1 1 auto;min-width:0;margin:0;}
.kodawari__hero img{width:100%;aspect-ratio:940/680;object-fit:cover;}
.kodawari__head{
  flex:0 0 auto;display:flex;flex-direction:row-reverse;gap:16px;align-items:flex-start;
  border-top:1px solid var(--gold-soft);border-right:1px solid var(--gold-soft);
  padding:26px 24px 40px 0;
}
.kodawari__bottom{display:flex;gap:40px;align-items:flex-start;margin-top:26px;}
.kodawari__sub{flex:0 0 46%;margin:0;}
.kodawari__sub img{width:100%;aspect-ratio:560/380;object-fit:cover;}
.kodawari__body{flex:1 1 auto;padding-top:6px;}
.kodawari__body p{margin:0;font-family:var(--serif);font-size:15px;line-height:2.3;letter-spacing:1px;color:var(--ink-soft);}

/* --- block2/3: シャリ・醤油（写真の下に縦見出し＋縦本文） --- */
.kodawari-duo{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.kodawari-panel figure{margin:0;}
.kodawari-panel figure img{width:100%;aspect-ratio:640/420;object-fit:cover;}
.kodawari-panel__vwrap{
  display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:22px;
  padding:34px 30px 10px;min-height:300px;
}
.kodawari-panel__vwrap .title{font-size:27px;letter-spacing:6px;font-weight:600;margin:0;line-height:1.9;}
.kodawari-panel__vwrap .body{font-size:15px;letter-spacing:2px;line-height:2.1;color:var(--ink-soft);margin:0;max-height:340px;}

/* ============ 店舗を探す（臙脂の暖簾風大CTA） ============ */
.kaito-shops{max-width:var(--maxw);margin:0 auto;padding:20px 40px 90px;}
.kaito-shops__btn{
  position:relative;display:flex;align-items:center;justify-content:center;gap:16px;
  width:100%;min-height:120px;color:#fff;
  font-family:var(--serif);font-size:26px;letter-spacing:6px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 6px),
    linear-gradient(180deg,#b21f37,#8a1526);
  border-top:3px solid var(--gold-soft);
  box-shadow:0 14px 34px rgba(120,15,30,.28), inset 0 0 60px rgba(0,0,0,.18);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.kaito-shops__btn::before,.kaito-shops__btn::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.14);
}
.kaito-shops__btn::before{left:33%;}.kaito-shops__btn::after{right:33%;}
.kaito-shops__btn:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(120,15,30,.36), inset 0 0 60px rgba(0,0,0,.2);}
.kaito-shops__pin{width:30px;height:30px;fill:var(--gold-soft);flex:0 0 auto;}

/* ============ メニュー・テイクアウト誘導 2カラム ============ */
.kaito-links{max-width:var(--maxw);margin:0 auto;padding:0 40px 30px;display:grid;grid-template-columns:1fr 1fr;gap:30px;}
.kaito-linkcard{
  position:relative;overflow:hidden;min-height:230px;display:flex;align-items:flex-end;
  background:linear-gradient(135deg,var(--kaito-gold),var(--kaito-gold2));
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.kaito-linkcard:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(90,60,15,.24);}
.kaito-linkcard__arrow{position:absolute;right:26px;bottom:26px;width:56px;height:1px;background:#fff;}
.kaito-linkcard__arrow::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;border-top:1px solid #fff;border-right:1px solid #fff;transform:rotate(45deg);}
/* メニュー */
.kaito-linkcard--menu .kaito-linkcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.kaito-linkcard--menu::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(140,105,40,.05),rgba(140,105,40,.45));}
.kaito-linkcard--menu .kaito-linkcard__label{position:relative;z-index:2;padding:26px 30px;color:#fff;font-family:var(--serif);font-size:24px;letter-spacing:6px;}
/* テイクアウト */
.kaito-linkcard--takeout{align-items:center;padding:26px 30px;gap:24px;}
.kaito-linkcard--takeout .kaito-app{flex:0 0 118px;border-radius:20px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.28);border:4px solid #1b1b1b;background:#1b1b1b;}
.kaito-linkcard--takeout .kaito-app img{width:100%;display:block;aspect-ratio:360/720;object-fit:cover;}
.kaito-linkcard--takeout .kaito-take__txt{color:#fff;font-family:var(--serif);font-size:20px;line-height:1.7;letter-spacing:1px;}
.kaito-stores{display:flex;gap:12px;margin-top:16px;}
.kaito-stores span{display:inline-flex;align-items:center;justify-content:center;min-width:96px;height:34px;background:#141414;color:#fff;border-radius:5px;font-family:var(--sans);font-size:12px;letter-spacing:1px;}

/* ============ Instagram 無限マーキー ============ */
.kaito-insta{max-width:1560px;margin:0 auto;padding:70px 0 40px;display:grid;grid-template-columns:120px 1fr;gap:26px;align-items:start;}
.kaito-insta .kaito-seclabel{padding-left:24px;}
.insta-marquee{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.insta-track{display:flex;gap:16px;width:max-content;animation:instaMarquee 34s linear infinite;}
.insta-marquee:hover .insta-track{animation-play-state:paused;}
.insta-item{flex:0 0 auto;width:230px;height:230px;overflow:hidden;background:var(--washi-deep);}
.insta-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.insta-item:hover img{transform:scale(1.06);}
@keyframes instaMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.kaito-insta__foot{grid-column:2;display:flex;align-items:center;gap:26px;margin-top:26px;padding-left:4px;}
.kaito-insta__handle{font-family:var(--serif);font-size:18px;letter-spacing:2px;color:var(--ink);}
.insta-follow{display:inline-flex;align-items:center;justify-content:center;min-width:150px;height:40px;border:1px solid var(--enji);color:var(--enji);font-family:var(--serif);font-size:15px;letter-spacing:2px;transition:background .3s,color .3s;}
.insta-follow:hover{background:var(--enji);color:#fff;}
.kaito-insta__pagetop{grid-column:1/-1;text-align:right;padding:10px 40px 0;font-family:var(--serif);font-size:13px;color:var(--ink-soft);letter-spacing:2px;}

/* ===================================================================
   レスポンシブ
   =================================================================== */
@media (max-width:1024px){
  .kaito-nav a{font-size:13px;}
  .fair-card{flex:0 0 calc((100% - 24px)/2);}
  .kodawari-duo{grid-template-columns:1fr;gap:56px;}
}
@media (max-width:768px){
  /* 縦書きナビ→モバイルドロワーでは横書きへ戻す（style.css のドロワーを流用） */
  .kaito-nav a{writing-mode:horizontal-tb;text-orientation:mixed;}
  .kaito-nav ul{flex-direction:column;}
  .kaito-nav a::after{display:none;}
  .kaito-logo__name{font-size:24px;}
  .kaito-logo-sub{display:none;}

  .kaito-hero{height:64vh;min-height:420px;}
  .kaito-hero__arrow{width:44px;height:44px;font-size:20px;}
  .kaito-reserve{width:88px;height:88px;right:14px;top:auto;bottom:18px;transform:none;}
  .kaito-reserve:hover{transform:scale(1.05);}
  .kaito-reserve b{font-size:15px;}
  .kaito-reserve span{font-size:9.5px;}

  .kaito-sec{grid-template-columns:1fr;gap:16px;padding-left:22px;padding-right:22px;}
  .kaito-seclabel{writing-mode:horizontal-tb;flex-direction:row;align-items:baseline;gap:10px;}
  .kaito-seclabel__ja{writing-mode:horizontal-tb;font-size:22px;letter-spacing:3px;}
  .kaito-seclabel__wave{display:none;}
  .fair-card{flex:0 0 70%;}

  .kaito-kodawari{padding:24px 22px 60px;}
  .kodawari__top,.kodawari__bottom{flex-direction:column;gap:20px;}
  .kodawari__head{border-right:none;border-top:1px solid var(--gold-soft);padding:18px 0 0;justify-content:center;}
  .kodawari__sub{flex:0 0 auto;}
  .kodawari__title{font-size:28px;}
  .kodawari-panel__vwrap{min-height:auto;padding:22px 6px 0;justify-content:center;}
  .kodawari-panel__vwrap .body{max-height:none;}

  .kaito-shops{padding:10px 22px 60px;}
  .kaito-shops__btn{min-height:92px;font-size:21px;letter-spacing:3px;}
  .kaito-links{grid-template-columns:1fr;gap:18px;padding:0 22px 24px;}
  .kaito-linkcard--takeout{flex-direction:row;}

  .kaito-insta{grid-template-columns:1fr;gap:14px;padding:50px 0 24px;}
  .kaito-insta .kaito-seclabel{padding-left:22px;}
  .kaito-insta__foot{grid-column:1;padding:0 22px;flex-wrap:wrap;gap:16px;}
  .insta-item{width:150px;height:150px;}
}

@media (prefers-reduced-motion:reduce){
  .kaito-hero__img{animation:none;}
  .insta-track{animation:none;}
  .kaito-reserve{animation:none;}
  .reveal.from-left,.reveal.from-right{transform:none;opacity:1;}
}