/** Shopify CDN: Minification failed

Line 512:0 Unexpected ","
Line 3025:62 Unexpected "*"
Line 3139:0 Expected "}" to go with "{"

**/
/* =========================
   Blog list: uniform cards (Honey / article-card)
========================= */

/* タイトル：2行でカット */
.template-blog .article-card__title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.12;
  min-height: calc(1.12em * 2);
}

/* 抜粋：3行でカット */
.template-blog .article-card__excerpt{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* “もっと読む”一覧でカードの高さを揃えたい場合（必要なら） */
.template-blog .article-card__information{
  display: flex;
  flex-direction: column;
}
.template-blog .article-card__footer{
  margin-top: auto;
}

/* =========================
   Blog list (template-blog)
   - Wide images (16:9)
   - Badges on image (top-left)
   - Remove square padding-top (100%)
   - Wider layout
========================= */

/* 画像比率：4:3（PC/SP共通） */
.template-blog .article-card .product-card__image{
  padding-bottom: 100% !important;
  position: relative !important; /* バッジの基準 */
}

/* バッジ（小さい四角問題も含めて一発で勝つ） */
.template-blog .article-card .article-pickup-badge,
.template-blog .article-card .article-category-badge{
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 10 !important;

  display: inline-flex !important;
  align-items: center !important;

  background: #2f3742!important;
  color: #fff !important;

  font-size: 9px !important;
  letter-spacing: .10em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  padding: 3px 6px !important;

  pointer-events: none !important;

  /* 100%化事故/潰れ防止 */
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}

/* Honeyの比率指定を4:3に上書き */
.template-blog .product-card__information.media--square,
.template-blog .product-card__information.media--adapt{
  padding-top: 100% !important;
}

/* 一覧ページだけ横幅を広げる */
.template-blog .page-width{
  max-width: 1600px !important;
}

@media (min-width: 990px){
  .template-blog .page-width{
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* =========================================================
   BIKE ARCHIVE / BLOG LIST  (template: blog.bike-archive)
   - PC: 3 cols
   - Tablet(750-989): 2 cols
   - Mobile(<750): 2 cols
   - Card feel
   - No skeleton placeholders
   - Image ratio: 4:3 (changeable)
   - Title overlay on image (BLUELUG-ish)
========================================================= */

/* -----------------------------
  0) Safety: hide skeleton placeholders
----------------------------- */
.is-bike-archive.template-blog .collection-skeleton,
.is-bike-archive.template-blog .collection-skeleton__card,
.is-bike-archive.template-blog .collection-skeleton__image-wrapper,
.is-bike-archive.template-blog .collection-skeleton__container{
  display: none !important;
}
.is-bike-archive.template-blog .grid__item .collection-skeleton{
  display: none !important;
}
/* :has が効けばliごと消す（効かなくてもOK） */
.is-bike-archive.template-blog li.grid__item:has(.collection-skeleton){
  display: none !important;
}

/* -----------------------------
  1) GRID (Honeyのul.grid系じゃなく .blog-articles 自体をグリッド化)
  → 750-989の崩れを止める核心
----------------------------- */
.is-bike-archive.template-blog .blog-articles{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* default: 2 cols */
  gap: 12px !important;
}

@media (min-width: 750px){
  .is-bike-archive.template-blog .blog-articles{
    gap: 18px !important;
  }
}

@media (min-width: 990px){
  .is-bike-archive.template-blog .blog-articles{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}

/* grid item（テーマのwidth指定を無効化） */
.is-bike-archive.template-blog .blog-articles__article{
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* -----------------------------
  2) Remove extra paddings / hide meta
----------------------------- */
.is-bike-archive.template-blog .card-wrapper,
.is-bike-archive.template-blog .product-card-wrapper,
.is-bike-archive.template-blog .card__content,
.is-bike-archive.template-blog .article-card__info{
  margin: 0 !important;
  padding: 0 !important;
}

.is-bike-archive.template-blog .article-card__excerpt,
.is-bike-archive.template-blog .article-card__date,
.is-bike-archive.template-blog .article-card__info,
.is-bike-archive.template-blog .rte,
.is-bike-archive.template-blog .product-card__article-info,
.is-bike-archive.template-blog .article-card__footer{
  display: none !important;
}

/* -----------------------------
  3) Card feel (wrapper is clickable)
----------------------------- */
.is-bike-archive.template-blog a.product-card__wrapper{
  position: relative !important;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
}

/* hover (PC only) */
@media (min-width: 990px){
  .is-bike-archive.template-blog a.product-card__wrapper{
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .is-bike-archive.template-blog a.product-card__wrapper:hover{
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(0,0,0,.10);
  }
}

/* Honeyのhover膜が乗る場合は殺す（事故防止） */
.is-bike-archive.template-blog .product-card.background-modal::before,
.is-bike-archive.template-blog .product-card.background-modal::after{
  display: none !important;
}
.is-bike-archive.template-blog .product-card.background-modal{
  background: none !important;
}

/* -----------------------------
  4) Image ratio: 4:3 (change here)
     4:3 = 75%
     3:2 = 66.666%
     16:9 = 56.25%
----------------------------- */
.is-bike-archive.template-blog .product-card__image-wrapper{
  position: relative !important;
}

/* media--square の癖を無効化 */
.is-bike-archive.template-blog .media--square{
  padding-top: 0 !important;
}

/* 画像の土台（ここが比率） */
.is-bike-archive.template-blog .product-card__image{
  position: relative !important;
  height: 0 !important;
  padding-bottom: 75% !important; /* ←比率ここだけ変える */
  overflow: hidden !important;
}

/* 画像を枠いっぱいに */
.is-bike-archive.template-blog .product-card__image img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* -----------------------------
  5) Title overlay on image
----------------------------- */

/* 暗幕（グラデ） */
.is-bike-archive.template-blog .product-card__image-wrapper::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 45%;
  background: linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,0));
  z-index: 2;
  pointer-events:none;
}

@media (max-width: 768px){
  .is-bike-archive.template-blog .product-card__image-wrapper::after{
    height: 38%;
    background: linear-gradient(to top, rgba(0,0,0,.28), rgba(0,0,0,0));
  }
}

/* information を写真の上に重ねる */
.is-bike-archive.template-blog .product-card__information{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 3 !important;

  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ===============================
Bike Archive cards title
=============================== */

/* ベース（SP） */
.is-bike-archive.template-blog .article-card__title{
  margin: 0 !important;
  padding: 5px 8px !important;
  color: #fff !important;

  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .05em !important;
  line-height: 1.2 !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;

  text-shadow: 0 1px 2px rgba(0,0,0,.25);

  pointer-events: none;
}


/* iPad */
@media (min-width: 750px){

  .is-bike-archive.template-blog .article-card__title{
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
  }

}


/* PC */
@media (min-width: 1200px){

  .is-bike-archive.template-blog .article-card__title{
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: .07em !important;
  }

}
@media (max-width: 768px){
  .is-bike-archive.template-blog .article-card__title{
    padding: 0 !important;
  }
}
/* =================================
Bike Archive list hero
- eyebrow と title を両方画像内へ
================================= */

/* SPで出ていた上余白を打ち消す */
.is-bike-archive.template-blog .main-blog{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Hero本体 */
.ba-archive-hero{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0 !important;
  margin-bottom: 24px;
}

/* 画像 */
.ba-archive-hero__media{
  position: relative;
  overflow: hidden;
}

.ba-archive-hero__media img{
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
}

/* 下部グラデ */
.ba-archive-hero__media::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,0));
  pointer-events: none;
  z-index: 1;
}

/* 画像内テキスト全体 */
.ba-archive-hero__content{
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  color: #fff;
}

/* アイブロー */
.ba-archive-hero__eyebrow{
  margin: 0 0 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.15;
  text-transform: none;
}

/* タイトル */
.ba-archive-hero__title{
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 5vw, 56px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* 下の通常タイトルブロックは不要なら詰める */
.main-blog__title{
  margin-bottom: 0 !important;
}

/* SP */
@media (max-width: 749px){

  .ba-archive-hero{
    margin-bottom: 16px;
  }

  .ba-archive-hero__media img{
    height: 260px;
  }

  .ba-archive-hero__content{
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .ba-archive-hero__eyebrow{
    margin-bottom: 6px;
    font-size: 13px;
    letter-spacing: .06em;
  }

  .ba-archive-hero__title{
    font-size: 30px;
    line-height: .95;
    letter-spacing: .03em;
  }
}

/* PC少し大きめ */
@media (min-width: 990px){
  .ba-archive-hero__media img{
    height: 400px;
  }

  .ba-archive-hero__content{
    left: 32px;
    right: 32px;
    bottom: 28px;
  }

  .ba-archive-hero__eyebrow{
    font-size: 15px;
  }
}

.ba-archive-hero__content{
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: var(--page-width);
  /* z-index: 1; */
  color: #fff;
  text-align: left;
}

/* タブレット〜PC */
@media (min-width: 990px){
  .ba-archive-hero__content{
    bottom: 28px;
    width: calc(100% - 80px);
    max-width: var(--page-width);
    transform: translateX(-51%);
  }
}

/* 大きめPC */
@media (min-width: 1400px){
  .ba-archive-hero__content{
    transform: translateX(-58%);
  }
}

/* 超ワイド */
@media (min-width: 1600px){
  .ba-archive-hero__content{
    transform: translateX(-66%);
  }
}

/* SP */
@media (max-width: 749px){
  .ba-archive-hero__content{
    bottom: 16px;
    width: calc(100% - 32px);
    transform: translateX(-50%);
  }
}
/* =========================================
   Page title spacing (Bike Archive / Journal)
========================================= */

/* 見出し下に余白 */
,
.template-blog .main-blog{
  margin-top: 56px !important;
}

/* 見出しとコンテンツの間 */
.is-bike-archive.template-blog .blog-articles,
.template-blog .blog-articles{
  margin-top: 48px !important;
}

.main-blog h1,
.main-blog .title{
  margin-bottom: 12px !important;
}

/* =========================
   Page title spacing fix
   (Bike Archive / Journal)
   PC only
========================= */

@media (min-width: 990px){

  .is-bike-archive.template-blog .main-blog,
  .template-blog .main-blog{
    margin-top: 56px !important;
  }

}



/* =========================
   Home Bike Archive Grid (3x3)
========================= */
.home-ba-grid{
  padding-top: 32px;
  padding-bottom: 32px;
}

.home-ba-grid__head{
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 16px;
}

.home-ba-grid__link{
  text-decoration: none;
  letter-spacing: .12em;
  font-size: 12px;
  opacity: .85;
}

.home-ba-grid__list{
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* card */
.home-ba-grid__card{
  display: block;
  text-decoration: none;
}

.home-ba-grid__media{
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.home-ba-grid__img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.home-ba-grid__placeholder{
  aspect-ratio: 4 / 3;
}

.home-ba-grid__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}

.home-ba-grid__overlay-inner{
  width: 100%;
  padding: 10px;
}

.home-ba-grid__label{
  display: inline-flex;
  font-size: 10px;
  letter-spacing: .14em;
  padding: 4px 6px;
  line-height: 1;
}

.home-ba-grid__article-title{
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: .03em;
  color: rgba(255,255,255,.92);
}
@media (min-width: 990px){
  .home-ba-grid__article-title{
    font-weight: 600;
  }
}

/* SP */
@media (max-width: 749px){
  .home-ba-grid{
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .home-ba-grid__list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  /* TOPのSPは文字なし */
  .home-ba-grid__article-title{
    display: none;
  }
}

.home-ba-grid__more{
  text-align: center;
}

.home-ba-grid__more-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  letter-spacing: .12em;
}


/* Hover */
.home-ba-grid__card{
  display: block;
  transform: translateY(0);
  transition: transform .18s ease;
}

.home-ba-grid__media{
  transition: box-shadow .18s ease;
}

.home-ba-grid__img{
  transition: transform .35s ease;
  will-change: transform;
}

@media (hover:hover){
  .home-ba-grid__card:hover{
    transform: translateY(-2px);
  }
  .home-ba-grid__card:hover .home-ba-grid__img{
    transform: scale(1.03);
  }
}

.home-ba-grid__link{
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
  text-decoration: none;
}
.home-ba-grid__link:hover{ opacity: 1; }

.home-ba-grid__more-btn{
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;

  background: transparent;
  border: 1px solid rgba(0,0,0,.35);
  padding: 12px 18px;
}

/* ===============================
TOP BIKE ARCHIVE title
(JOURNALと揃える)
=============================== */
.body-headings--uppercase .home-ba-grid__title{
  margin: 0 0 24px;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  line-height: var(--font-heading-line-height);
  font-size: calc(var(--font-heading-scale) * 2.25rem);
  letter-spacing: .04em;
  text-align: center;
}

@media (max-width: 768px){
  .body-headings--uppercase .home-ba-grid__title{
    font-size: calc(var(--font-heading-scale) * 1.875rem);
    letter-spacing: .03em;
    margin-bottom: 20px;
  }
}

/* Home BA grid width align with theme page-width */
.home-ba-grid.page-width{
  max-width: 1400px !important;
}

@media (min-width: 990px){
  .home-ba-grid.page-width{
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}
.home-ba-grid__ribbon{
  position: absolute;
  top: 12px;
  left: 12px;

  background: #ff6a00;
  color: #fff;
  padding: 6px 14px;

  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0% 100%);

  font-size: 11px;
  letter-spacing: .12em;
}

/* =========================
   Bike Archive - Gallery (Final)
========================= */

.bike-gallery{
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px;
}

.bike-gallery__main{
  position: relative;
}

.bike-gallery__image{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;

  /* fade */
  opacity: 1;
  transition: opacity .8s ease;
}
.bike-gallery__image.is-fading{
  opacity: 0;
}

/* thumbs */
.bike-gallery__thumbs{
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.bike-gallery__thumbs::-webkit-scrollbar{ height: 0; }
.bike-gallery__thumbs{ scrollbar-width: none; }

.bike-gallery__thumb{
  flex: 0 0 auto;
  width: 120px;              /* ← 少し小さく */
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.bike-gallery__thumb.is-active{
  border-color: #000;
}
.bike-gallery__thumb img{
  width: 100%;
  height: 72px;              /* ← 少し小さく */
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

/* ===== Arrows: stronger, no circle ===== */
.bike-gallery__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  background: none;
  border: none;
  width: auto;
  height: auto;

  font-size: 56px;                 /* ← 大きく */
  font-weight: 700;                /* ← 太く */
  line-height: 1;
  color: rgba(255,255,255,.95);    /* ← 写真上で見えるよう白 */
  text-shadow: 0 2px 10px rgba(0,0,0,.45); /* ← 影でクッキリ */
  cursor: pointer;

  opacity: 0;                      /* 通常は消す */
  transition: opacity .2s ease, transform .2s ease;
}

.bike-gallery__nav--prev{ left: 18px; }
.bike-gallery__nav--next{ right: 18px; }

.bike-gallery__main:hover .bike-gallery__nav{
  opacity: 1;
}

.bike-gallery__nav:hover{
  transform: translateY(-50%) scale(1.05);
}

@media (max-width: 749px){
  .bike-gallery__nav{
    opacity: .9;                   /* スマホは常時見える */
    font-size: 52px;
  }
}
@media (max-width: 749px){
  .bike-gallery__thumb{ width: 104px; }
  .bike-gallery__thumb img{ height: 64px; }
  .bike-gallery__nav{ width: 40px; height: 40px; }
}

/* keep 16:9 area, no layout jump */
.bike-gallery__main{
  aspect-ratio: 4 / 3;
  background: #ffffff; 
  border-radius: 14px;
  overflow: hidden;
}

.bike-gallery__image{
  width: 100%;
  height: 100%;
  object-fit: contain;  /* ← 切れない */
}

/* Bike Archive page background */
.bike-archive{
  background: #f6f6f6;
  padding-bottom: 60px;
}

/* =========================
   Bike Archive - Sections
========================= */

.bike-section{
  padding: 28px 0;
}

.bike-section__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

.bike-section__title{
  font-size: 18px;
  letter-spacing: .06em;
  margin: 0 0 14px;
}

/* Description: readability */
.bike-description .rte{
  max-width: 860px;          /* 本文は少し細く */
  margin: 0 auto;
  line-height: 1.9;
}

.bike-description .rte h2,
.bike-description .rte h3{
  margin-top: 26px;
}

.bike-description .rte p{
  margin: 0 0 14px;
}

.bike-description .rte img{
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 14px 0;
}

/* Parts: cards */
.parts-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 990px){
  .parts-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 749px){
  .parts-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

.parts-card__media{
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.parts-card__media img{
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

@media (max-width: 749px){
  .parts-card__media img{ height: 140px; }
}

.parts-card__title{
  margin: 10px 2px 0;
  font-size: 13px;
  line-height: 1.4;
}



/* =========================
   Spec 2-column table
========================= */
.spec-table{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  overflow: hidden;
}

.spec-row{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  padding: 8px 14px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.spec-row:first-child{
  border-top: 0;
}

.spec-key{
  font-weight: 600;
  letter-spacing: .04em;
  opacity: .85;
  text-transform: uppercase;
}

.spec-val{
  line-height: 1.7;
}

@media (max-width: 749px){
  .spec-row{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .spec-key{
    font-size: 12px;
  }
}

/* ===== Parts hover animation ===== */
.parts-card__media{
  transition: transform .22s ease, box-shadow .22s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.parts-card__media img{
  transition: transform .28s ease;
  transform: scale(1);
}

.parts-card:hover .parts-card__media{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

.parts-card:hover .parts-card__media img{
  transform: scale(1.03);
}

.parts-card__title{
  transition: opacity .2s ease;
}

.parts-card:hover .parts-card__title{
  opacity: .9;
}
@media (min-width: 990px){
  .is-bike-archive .header-wrapper,
  .is-bike-archive #shopify-section-announcement-bar,
  .is-bike-archive .announcement-bar{
    display: none !important;
  }

  .is-bike-archive .ba-header{
    display: block !important;
  }
}


/* ===== Bike Archive hero (wide) ===== */


.is-bike-archive .ba-hero{
  position: relative;
  min-height: 500px;               /* 横長感 */
  padding: 64px 16px;
  display: grid;
  place-items: center;

  background-size: 125% auto;
  background-position: 44% 30%;
  z-index:1;
}

/* 暗幕（読みやすく） */
.is-bike-archive .ba-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.60) 0%,
    rgba(0,0,0,.35) 35%,
    rgba(0,0,0,.10) 60%,
    rgba(0,0,0,0) 80%
  );
  /* pointer-events: none; */
z-index: 0;
}

/* 中身 */
.ba-hero__inner{
  position: relative;
  z-index: 5;
  width: min(1100px, 100%);
  text-align: center;
  color: #fff;
}

.ba-hero__title{
  margin: 0;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.02;

  font-size: clamp(21px, 3.2vw, 46px);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.28);
}
@media (min-width: 750px){
  .ba-hero__title{
    letter-spacing: .20em;
  }
}

.ba-hero__nav{
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  z-index:6;
}

@media (min-width: 990px){
  .ba-hero__nav{
    font-size: 15px;
    gap: 22px;
  }
}

.ba-hero__nav a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-weight: 500;
  z-index:7;
}
.ba-hero__nav a:hover{
  color: #fff;
}

.ba-hero__nav a{
  position: relative;
  font-weight: 500;
  text-decoration: none;
}


/* underline */
.ba-hero__nav a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: #ff6a00;
  transition: width .25s ease;
}

/* hover */
.ba-hero__nav a:hover::after{
  width: 100%;
}

@media (max-width: 749px){
  .is-bike-archive .ba-hero{
    min-height: 220px;
    padding: 52px 14px;
    background-position: 36% 28%;
  }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーSP/PCメニューーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

/* PCでもハンバーガー運用：PC用ナビを消す */
@media (min-width: 990px){
  header .header__inline-menu,
  header .header__menu,
  header nav.header__inline-menu{
    display: none !important;
  }
}

@media (min-width: 990px){
  header .header__icon--menu,
  header .header__icon.header__icon--menu{
    display: inline-flex !important;
  }
}

/* PCでもハンバーガーを表示（header-drawer が tablet限定で消えるのを解除） */
@media (min-width: 990px){
  header header-drawer{
    display: block !important;
  }

  header header-drawer summary.header__icon--menu{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* Hamburger icon: bigger */
.header__icon--menu{
  transform: scale(1.25);
  transform-origin: center;
}



/* Desktop: force header icons (search/cart/account) into top-right */
@media (min-width: 990px){
  /* icons row spacing */
  header .header__icons.header__icons--localization.header__localization{
    gap: 12px !important; /* 念のため */
  }

  /* each icon: give hit area + spacing */
  header .header__icons.header__icons--localization.header__localization > a.header__icon{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;      /* ←ここが効く */
    margin: 0 !important;
  }

  /* account/cart specifically (保険) */
  header a.header__icon--account,
  header a.header__icon--cart{
    padding: 10px !important;
  }
}

/* Desktop: hide duplicate account icon (the one near hamburger/left) */
@media (min-width: 990px){
  header a.header__icon--account.small--hide{
    display: none !important;
  }
}

/* Menu drawer: make it side panel (like WO) */
@media (min-width: 990px){
  #menu-drawer{
    width: min(520px, 45vw) !important;
    max-width: 520px !important;
  }
}

/* ===== Drawer close button: clean X (no square) ===== */
.menu-drawer__header .modal__close-button{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  /* clickable area */
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 0 !important;  /* hide "閉じる" text */
}

/* kill theme button overlay square */
.menu-drawer__header .modal__close-button.btn:after,
.menu-drawer__header .modal__close-button:after{
  display: none !important;
}

/* show X */
.menu-drawer__header .modal__close-button:before{
  content: "×" !important;
  display: block !important;
  font-size: 56px !important;  /* ←大きさ */
  line-height: 1 !important;
  color: #fff !important;       /* ←背景が濃いので白に */
}

@media (min-width: 990px){
  .menu-drawer__header .modal__close-button{
    margin-right: 18px !important; /* 数字大きいほど左へ */
  }
}

.drawer-top-utility{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:14px;
  padding:14px 16px 8px;
}

.drawer-top-utility__icon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
}

.drawer-top-utility__icon svg{
  width: 24px;
  height: 24px;
}

.drawer-top-utility__count{
  position:absolute;
  top:-4px;
  right:-4px;
  font-size:10px;
  line-height:1;
  padding:3px 5px;
  border-radius:999px;
  background:#000;
  color:#fff;
}

/* Drawer内のDINERロゴだけ消す */
.menu-drawer .header__heading,
.menu-drawer .header__heading-link{
  display: none !important;
}
/* 上部エリアをコンパクト化 */
.drawer-top-utility{
  position:absolute;
  top:-45px;
  left:20px;
  display:flex;
  gap:16px;
  padding:0;
  height:auto;
}

/* ×は右固定 */
.menu-drawer__close-button,
.menu-drawer .header__icon--close{
  position:absolute;
  top:24px;
  right:20px;
}

/* ドロワー上部エリアに線 */
.menu-drawer__navigation-container{
  position: relative;
}

.menu-drawer__navigation-container::before{
  content:"";
  position:absolute;
  top:7px; /* ← 微調整ポイント */
  left:0;
  right:0;
  height:1px;
  background:rgba(255,255,255,0.08);
}

.menu-drawer__navigation-container{
  padding-top:9px;
}

/* 上にズラしても消えないようにする */
.menu-drawer,
.menu-drawer__navigation-container,
.menu-drawer__inner-container{
  overflow: visible !important;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーTOPのヘッダーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ===============================
   3. TOPだけヘッダーをヒーローに重ねる
================================ */
body.template-index .header-wrapper{
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
  z-index: 20;
}

/* ヘッダーの疑似要素も完全に無効化 */
body.template-index .header-wrapper::before,
body.template-index .header-wrapper::after,
body.template-index .sticky-header::before,
body.template-index .sticky-header::after{
  display: none !important;
}

/* stickyっぽい状態のときロゴだけ控えめに */
.header-wrapper.is-sticky .header__heading,
.header-wrapper.is-stuck .header__heading,
.header-wrapper.sticky-header--stuck .header__heading{
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease;
}

/* 通常時は表示 */
.header__heading{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease;
}

/* スクロール後に出る通常ヘッダー側でロゴを消す（TOP以外） */
body:not(.template-index) .header__heading{
  opacity: 0;
  transition: opacity .25s ease;
}
/* ロゴっぽい要素をまとめて消す（テスト） */
body:not(.template-index) .header__heading,
body:not(.template-index) .header__heading-link,
body:not(.template-index) .header__logo,
body:not(.template-index) .header__logo-image,
body:not(.template-index) .header__heading img,
body:not(.template-index) .header__heading svg{
  opacity: 0 !important;
}

/* TOP初期：ハンバーガー/右アイコンを白に固定 */
body.template-index .header-wrapper .icon,
body.template-index .header-wrapper svg,
body.template-index .header-wrapper a,
body.template-index .header-wrapper button,
body.template-index .header-wrapper .search__label,
body.template-index .header-wrapper .search__text{
  color: #fff !important;
  fill: #fff !important;
}


/* もし線が薄いならstrokeも */
body.template-index .header-wrapper svg{
  stroke: #fff !important;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーTOP／shopinfo---------------------------------------------------------- */

/* TOP: Media with text をワイドに（Honey用の一般的な外枠） */
.template-index .page-width {
  max-width: 1400px;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーTOP／joinus:wo---------------------------------------------------------- */

/* row height の計算を無視して固定にする */
.image-grid__content-grid{
  grid-auto-rows: 340px !important;
}

/* 画像をセルいっぱいに */
.image-grid__media,
.image-grid__item-card-inner{
  height: 100% !important;
}

.image-grid__media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.image-grid__item-text{
  padding: 50px !important;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーTOP/HERO---------------------------------------------------------- */

/* ===== DINER HERO ===== */
.diner-hero{
  position: relative;
  overflow: hidden;
}

/* SP フル（Safari対策で100svh） */
@media (max-width: 989px){
  .diner-hero{ min-height: 100svh; }
}

/* PC 準フル */
@media (min-width: 990px){
  .diner-hero{ min-height: 90vh; }
}

/* 背景 */
.diner-hero__media,
.diner-hero__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.diner-hero__media img{
  object-fit: cover; /* はまり防止 */
}

/* オーバーレイ（濃度は0.12〜0.28で微調整） */
.diner-hero__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.18);
}

/* 中央ボタン */
.diner-hero__content{
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: inherit;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.diner-hero__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 22px;
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(2px);
  transition: transform .2s ease, background .2s ease;
}
.diner-hero__btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
}

/* safer: target all custom liquid sections on home (if only one is used) */
.template-index [class*="__custom_liquid"]{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.diner-hero__content{
  justify-content: flex-end !important;
  padding-bottom: 72px !important;
}
@media (max-width: 989px){
  .diner-hero__content{ padding-bottom: 110px !important; }
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーTOP/minibar---------------------------------------------------------- */
/* =========================================================
   DINER MINI HEADER (PC)
   - show/hide by html classes: is-scrolling / is-scroll-idle / is-at-top
   - dropdown: hover open, leave close
========================================================= */

/* ---------- Base ---------- */
.diner-miniheader{
  position: fixed;
  left: 0; right: 0;
  top: var(--diner-annc-h, 0px);
  z-index: 999;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

.diner-miniheader__inner{
  display: flex;
  align-items: center;
  gap: 18px;
  height: 56px;
  padding: 0 clamp(20px, 3vw, 44px);

  background: rgba(10,10,10,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(255,255,255,.12);
}

.diner-miniheader__logo{
  padding-left: 4px;
}
/* Logo size (少し大きく) */
.diner-miniheader__logo img{
  display:block;
  height: 96px; /* ←22→28にUP */
  width: auto;
}

/* Nav */
.diner-miniheader__nav{
  display: flex;
  gap: 28px;
  margin: 0 auto;
  align-items: center;
}

.diner-miniheader__nav a,
.diner-miniheader__dd summary{
  color:#fff;
  text-decoration:none;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .9;
  transition: opacity .2s ease;
  white-space: nowrap;
}

.diner-miniheader__nav a:hover,
.diner-miniheader__dd:hover summary{
  opacity: 1;
}

/* Right icons area */
.diner-miniheader__icons{
  min-width: 90px;
  display:flex;
  justify-content:flex-end;
  gap: 14px;
}

/* ---------- Visibility control (PC only) ---------- */
@media (min-width: 990px){

  html.is-scrolling .diner-miniheader{
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
  }

  html.is-scroll-idle .diner-miniheader{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* TOP: at top hide miniheader */
  body.template-index html.is-at-top .diner-miniheader,
  html.is-at-top body.template-index .diner-miniheader{
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
  }

  /* Non-top pages: show even at top */
  body:not(.template-index).is-at-top .diner-miniheader,
  html.is-at-top body:not(.template-index) .diner-miniheader{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Hide original header on non-top pages */
  body:not(.template-index) .header-wrapper{
    display: none !important;
  }
}

/* SP hide */
@media (max-width: 989px){
  .diner-miniheader{ display:none; }
}

/* ---------- Dropdown (details/summary) ---------- */
@media (min-width: 990px){

  .diner-miniheader__dd{
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .diner-miniheader__dd summary{
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }
  .diner-miniheader__dd summary::-webkit-details-marker{ display:none; }

  /* caret */
  .diner-miniheader__dd summary::after{
    content: "▾";
    font-size: 12px;
    line-height: 1;
    opacity: .7;
    transform: translateY(-1px);
    transition: transform .22s ease, opacity .22s ease;
  }
  .diner-miniheader__dd:hover summary::after,
  .diner-miniheader__dd[open] summary::after{
    transform: translateY(-1px) rotate(180deg);
    opacity: 1;
  }

  /* Panel (polished) */
  .diner-miniheader__panel{
    position: absolute;
    top: calc(100% + 19px) !important;  /* ミニバーの下枠直下 */
    left: -12px !important;            /* ←ここで真下に寄せる（微調整OK） */
    min-width: 240px;

    padding: 10px 0;
    border-radius: 0 !important;

    background: rgba(10,10,10,.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border: 1px solid rgba(255,255,255,.14);
    border-top: 0 !important;          /* 二重線防止 */
    box-shadow: 0 10px 24px rgba(0,0,0,.25);

    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;

    transition: opacity .34s ease, transform .34s cubic-bezier(.2,.8,.2,1);
    z-index: 1000;
  }

  /* show */
  .diner-miniheader__dd:hover .diner-miniheader__panel,
  .diner-miniheader__dd[open] .diner-miniheader__panel{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* items */
  .diner-miniheader__panel a{
    display: block;
    padding: 12px 18px;
    font-size: 13px;
    letter-spacing: .08em;
    color: rgba(255,255,255,.92);
    text-decoration: none;
    white-space: nowrap;

    border-top: 1px solid rgba(255,255,255,.10);
  }
  .diner-miniheader__panel a:first-child{ border-top: none; }
  .diner-miniheader__panel a:hover{
    color:#fff;
    background: rgba(255,255,255,.06);
  }
}

@media (min-width: 990px){
  .diner-miniheader__icons{
    display:flex;
    align-items:center;
    gap: 18px;
  }
  .diner-miniheader__icon{
    color:#fff;
    text-decoration:none;
    font-size: 16px;
    opacity:.9;
    transition: opacity .2s ease, transform .2s ease;
  }
  .diner-miniheader__icon:hover{
    opacity: 1;
    transform: translateY(-1px);
  }
}

@media (min-width: 990px){
  .diner-miniheader__icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width: 22px;
    height: 22px;
    color:#fff;
    opacity:.9;
    transition: opacity .2s ease, transform .2s ease;
  }
  .diner-miniheader__icon:hover{
    opacity:1;
    transform: translateY(-1px);
  }
  .diner-miniheader__icon svg{
    width: 18px;
    height: 18px;
    fill: currentColor;
  }
}

/* =========================================================
   MINI HEADER: child + grandchild
========================================================= */
@media (min-width: 990px){

  .diner-miniheader__panel > a,
  .diner-miniheader__panel-link{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    padding: 12px 18px;
    font-size: 13px;
    letter-spacing: .08em;
    color: rgba(255,255,255,.92);
    text-decoration: none;
    white-space: nowrap;

    border-top: 1px solid rgba(255,255,255,.10);
    background: transparent;
  }

  .diner-miniheader__panel > a:first-child,
  .diner-miniheader__panel-item:first-child > .diner-miniheader__panel-link{
    border-top: none;
  }

  .diner-miniheader__panel > a:hover,
  .diner-miniheader__panel-link:hover{
    color: #fff;
    background: rgba(255,255,255,.06);
  }

  .diner-miniheader__panel-item{
    display: block;
  }

  .diner-mini-dd__toggle{
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-heading-family) !important;
  }

  .diner-miniheader__dropdown-chev{
    display: inline-block;
    margin-left: 12px;
    line-height: 1;
    opacity: .8;
    transform: translateY(-1px) rotate(0deg);
    transition: transform .18s ease, opacity .18s ease;
  }

  .diner-miniheader__panel-item.is-open .diner-miniheader__dropdown-chev{
    transform: translateY(-1px) rotate(90deg);
    opacity: 1;
  }

  .diner-miniheader__grand{
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .diner-miniheader__panel-item.is-open > .diner-miniheader__grand{
    display: block;
  }

  .diner-miniheader__grand-link{
    display: block;
    padding: 12px 18px 12px 30px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255,255,255,.82);
    text-decoration: none;
    border-top: 1px solid rgba(255,255,255,.10);
  }

  .diner-miniheader__grand-link::before{
    content: "-";
    margin-right: 8px;
    opacity: .6;
  }

  .diner-miniheader__grand-link:hover{
    color: #fff;
    background: rgba(255,255,255,.05);
    border-top-color: rgba(255,255,255,.18);
  }

  .diner-miniheader__panel-item.is-open > .diner-miniheader__panel-link{
    background: rgba(255,255,255,.04);
  }
}
/* -----------------------------------------------------------------PCヘッダーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

/* =========================================================
   DINER PC HEADER + MINIHEADER
   ---------------------------------------------------------
   1) PC normal header (TOP overlay only)
   2) Visibility control
   3) Hide Honey default header visually
   4) PC dropdown
   5) PC grandchild (PARTS click open)
   6) Hover polish
   7) Font family
   8) Miniheader tiny spacing patch
========================================================= */

/* =========================================================
   0) Base
========================================================= */
.diner-pc-header{
  display: none;
}

/* =========================================================
   1) PC Normal Header (overlay / HOME only)
========================================================= */
@media (min-width: 990px){

  .diner-pc-header.is-home{
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--diner-annc-h, 0px) + 110px);
    z-index: 30;
    pointer-events: auto;
    opacity: 1;
    transition: opacity .22s ease;
    will-change: opacity;
  }

  /* Layout */
  .diner-pc-header__inner{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    height: 88px;
    padding: 0 clamp(20px, 3vw, 44px);
  }

  /* Logo */
  .diner-pc-header__logo{
    transform: translateX(38px);
  }

  .diner-pc-header__logo a{
    display: inline-flex;
    align-items: center;
  }

  .diner-pc-header__logo-img{
    display: block;
    width: auto;
    height: 200px;
  }

  /* Nav */
  .diner-pc-header__navwrap{
    justify-self: center;
  }

  .diner-pc-header__nav{
    display: flex;
    align-items: center;
    justify-self: center;
    gap: clamp(14px, 1.2vw, 24px);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .diner-pc-header__item{
    position: relative;
  }

  /* HOME / ABOUT / JOURNAL / SHOP / SUPPORT spacing */
  .diner-pc-header__item:nth-child(2),
  .diner-pc-header__item:nth-child(3),
  .diner-pc-header__item:nth-child(4){
    margin-left: 16px;
  }

  .diner-pc-header__link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .12em;
    opacity: .92;
    transition:
      color .2s ease,
      opacity .2s ease,
      transform .2s ease;
  }

  .diner-pc-header__caret{
    display: inline-block;
    margin-left: -3px;
    opacity: .8;
    transform: translateY(-1px) rotate(0deg);
    transform-origin: 50% 45%;
    transition: transform .22s ease, opacity .22s ease;
  }

  /* Icons */
  .diner-pc-header__icons{
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }

  .diner-pc-header__icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #fff;
  }

  .diner-pc-header svg{
    fill: currentColor;
  }

  @media (min-width: 1400px){
    .diner-pc-header__link{
      font-size: 17px;
    }
  }
}

/* =========================================================
   2) Visibility control (HOME only)
========================================================= */
@media (min-width: 990px){

  /* TOP最上部：表示 */
  html.is-at-top .diner-pc-header.is-home{
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* スクロール中 / 停止中：非表示（miniheaderへ渡す） */
  html.is-scrolling .diner-pc-header.is-home,
  html.is-scroll-idle .diner-pc-header.is-home{
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* =========================================================
   3) Honey default header visually hidden
========================================================= */
@media (min-width: 990px){

  header.header{
    position: relative;
    background: transparent !important;
  }

  header.header > :not(.diner-pc-header){
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  header.header > .diner-pc-header{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* =========================================================
   4) PC Dropdown
========================================================= */
@media (min-width: 990px){

  /* hoverの切れ目を埋める透明ブリッジ */
  .diner-pc-header__item::after{
    content: "";
    position: absolute;
    left: -20px;
    right: -20px;
    top: 100%;
    height: 14px;
    background: transparent;
  }

  .diner-pc-header__dropdown{
    position: absolute;
    top: calc(100% + 10px);
    left: -16px;
    min-width: 260px;

    opacity: 0;
    transform: translateY(-3px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;

    background: rgba(10,10,10,.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 0;
    box-shadow: none;
  }

  .diner-pc-header__item:hover .diner-pc-header__dropdown{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .diner-pc-header__dropdown-list{
    list-style: none;
    margin: 0;
    padding: 14px 16px;
  }

  .diner-pc-header__dropdown-link{
    display: block;
    position: relative;
    padding: 14px 10px;
    color: rgba(255,255,255,.92);
    text-decoration: none;
    letter-spacing: .08em;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }

  .diner-pc-header__dropdown-list li:last-child .diner-pc-header__dropdown-link{
    border-bottom: 0;
  }

  .diner-pc-header__dropdown-link:hover{
    color: rgba(255,255,255,.70);
    border-bottom-color: rgba(255,255,255,.18);
  }
}

/* =========================================================
   5) PC Grandchild (PARTS click only)
========================================================= */

/* default */
.diner-pc-header__grand{
  display: none !important;
}

/* open */
.diner-pc-header__dropdown-item.has-grand.is-open > .diner-pc-header__grand{
  display: block !important;
}

@media (min-width: 990px){

  .diner-dd__toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
  }

  body.template-index .diner-pc-header__dropdown button{
    font-family: var(--font-heading-family) !important;
  }

  /* PARTS button = linkと同じ見た目 */
  button.diner-pc-header__dropdown-link.diner-dd__toggle{
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 14px 10px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    border-bottom-color: rgba(255,255,255,.10);
  }

  button.diner-pc-header__dropdown-link.diner-dd__toggle:hover{
    border-bottom-color: rgba(255,255,255,.18);
  }

  .diner-pc-header__dropdown-item.has-grand.is-open
  > button.diner-pc-header__dropdown-link.diner-dd__toggle{
    border-bottom-color: rgba(255,255,255,.18);
  }

  /* grand list */
  .diner-pc-header__grand-list{
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .diner-pc-header__grand-link{
    display: block;
    padding: 14px 10px 14px 26px;
    font-size: 15.2px;
    letter-spacing: .08em;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }

  .diner-pc-header__grand-link::before{
    content: "-";
    margin-right: 8px;
    opacity: .6;
  }

  .diner-pc-header__grand-link:hover{
    opacity: .92;
    border-bottom-color: rgba(255,255,255,.28);
  }

  /* grand chevron */
  .diner-pc-header__dropdown-chev{
    display: inline-block !important;
    margin-left: 14px;
    line-height: 1;
    opacity: .85;
    transform: translateY(1px) rotate(0deg) !important;
    transition: transform .18s ease, opacity .18s ease;
    will-change: transform;
  }

  .diner-pc-header__dropdown-item.has-grand.is-open
  .diner-pc-header__dropdown-chev{
    transform: translateY(1px) rotate(90deg) !important;
    opacity: 1 !important;
  }

  button.diner-dd__toggle[aria-expanded="true"]
  .diner-pc-header__dropdown-chev{
    transform: translateY(1px) rotate(90deg) !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   6) Hover polish like miniheader
========================================================= */
@media (min-width: 990px){

  .diner-pc-header__link:hover{
    opacity: .68;
  }

  .diner-pc-header__item > summary,
  .diner-pc-header__item > .diner-pc-header__link{
    transition: opacity .2s ease, color .2s ease;
  }

  .diner-pc-header__item:hover > summary,
  .diner-pc-header__item:hover > .diner-pc-header__link{
    opacity: .68;
  }

  .diner-pc-header__item:hover .diner-pc-header__caret,
  .diner-pc-header__item:focus-within .diner-pc-header__caret,
  .diner-pc-header__item.is-open .diner-pc-header__caret{
    transform: translateY(-1px) rotate(180deg);
    opacity: 1;
  }
}

/* =========================================================
   7) Font family (Syne)
========================================================= */
@media (min-width: 990px){

  /* PCヘッダー（TOPだけ） */
  body.template-index .diner-pc-header__nav a,
  body.template-index .diner-pc-header__nav summary,
  body.template-index .diner-pc-header__dropdown a{
    font-family: var(--font-heading-family) !important;
  }

  /* miniheader（全ページ） */
  .diner-miniheader a,
  .diner-miniheader summary{
    font-family: var(--font-heading-family) !important;
  }
}

/* =========================================================
   8) Miniheader tiny spacing patch
========================================================= */
@media (min-width: 990px){
  .diner-miniheader__nav > details:first-of-type{
    margin-right: -10px;
  }
}


/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* =========================================
   DINER HERO subtle motion (PC only)
========================================= */
@media (min-width: 990px){

  .diner-hero__media img,
  .diner-hero__media video{
    transform-origin: center center;
    will-change: transform;
    animation: dinerHeroMove 14s ease-in-out infinite alternate;
  }

  @keyframes dinerHeroMove{
    from { transform: scale(1.06) translate3d(0,0,0); }
    to   { transform: scale(1.10) translate3d(-1.5%, -1%, 0); }
  }
}

/* motion配慮 */
@media (prefers-reduced-motion: reduce){
  .diner-hero__media img,
  .diner-hero__media video{
    animation: none !important;
  }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーSPヘッダーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* =========================================================
   DINER SP Header behavior
   - scroll: hide
   - idle: show (menu + icons only)
   - at top: show logo too
========================================================= */
@media (max-width: 989px){

  /* ヘッダーを上に固定（既に固定ならOK） */
  header.header{
    position: fixed;
    left: 0; right: 0;
    top: var(--diner-annc-h, 0px);
    z-index: 1000;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s ease, background .22s ease, backdrop-filter .22s ease;
    will-change: transform, opacity, background;
  }

  /* ベース（最上部想定）：透明で見せる */
  header.header{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* ========== スクロール中：ヘッダーを消す ========== */
  html.is-scrolling header.header{
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
  }

  /* ========== 停止中：出す（ただしロゴは消す） ========== */
  html.is-scroll-idle header.header{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;}



  /* ① デフォルト：ロゴ（ヘッディング）を消す */
  header.header .header__heading{
    display: none !important;
  }

  /* ② 最上部だけロゴを出す */
  html.is-at-top header.header .header__heading{
    display: block !important;
  }

  /* ③ さらに保険：リンクも（もし残ってたら） */
  header.header .header__heading-link{
    display: none !important;
  }
  html.is-at-top header.header .header__heading-link{
    display: inline-flex !important;
  }
  }

  /* =========================================================
   DINER — SP / iPad Header tuning (FINAL)
   - SP(〜989): position + side padding + dark icons
   - iPad(750〜989): icons stronger + hamburger bigger + label text dark
========================================================= */

/* -------------------------
   SP (max 989px)
------------------------- */
@media (max-width: 989px){

  :root{
    /* Position */
    --diner-sp-header-offset: -30px;   /* ヘッダーを上げる(マイナス) / 下げる(プラス) */
    --diner-sp-side-padding: 20px;     /* 左右の余白 */

    /* Color */
    --diner-sp-icon-color: rgba(0,0,0,.85);

    /* iPad strength (overrides below) */
    --diner-ipad-icon-scale: 1.1;
    --diner-ipad-svg-size: 24px;
    --diner-ipad-stroke-w: 11;
    --diner-ipad-hamburger-size: 26px;
    --diner-ipad-label-color: rgba(0,0,0,.85);
  }

  /* Header position */
  .header-wrapper,
  header.header{
    top: calc(var(--diner-annc-h, 0px) + var(--diner-sp-header-offset)) !important;
  }

  /* Side padding */
  .header-wrapper,
  header.header{
    padding-left: var(--diner-sp-side-padding) !important;
    padding-right: var(--diner-sp-side-padding) !important;
  }

  /* Icon color (hamburger / search / account / cart ...) */
  header.header .header__icon,
  header.header .header__icon svg,
  header.header .header__icon svg *{
    color: var(--diner-sp-icon-color) !important;
    fill: var(--diner-sp-icon-color) !important;
    stroke: var(--diner-sp-icon-color) !important;
  }




/* -------------------------
   iPad (750px - 989px)
------------------------- */
@media (min-width: 750px) and (max-width: 989px){

  /* Make icons stronger */
  header.header .header__icon{
    opacity: 1 !important;
    transform: scale(var(--diner-ipad-icon-scale));
    transform-origin: center;
  }

  header.header .header__icon svg{
    width: var(--diner-ipad-svg-size);
    height: var(--diner-ipad-svg-size);
  }

  header.header .header__icon svg *{
    stroke-width: var(--diner-ipad-stroke-w) !important;
  }

  /* Hamburger bigger */
  body.template-index .header-wrapper .header__icon--menu svg,
  body.template-index .header-wrapper .header__icon--hamburger svg{
    width: var(--diner-ipad-hamburger-size) !important;
    height: var(--diner-ipad-hamburger-size) !important;
  }

  /* Fallback: if no specific hamburger class exists */
  body.template-index .header-wrapper .header__icon:first-child svg{
    width: var(--diner-ipad-hamburger-size);
    height: var(--diner-ipad-hamburger-size);
  }

  /* Label text (e.g. 「検索」) */
  header.header .header__icon-name,
  header.header .header__icon-text,
  header.header .header__icon-label,
  header.header .icon__text,
  header.header .header__icons span{
    color: var(--diner-ipad-label-color) !important;
    opacity: 1 !important;
    font-weight: 500;
    letter-spacing: .04em;
  }
}

/* ――――――――――――――――――――――――――――――――――――――ドロワSP―――――――――――――――――――――――――――――――――――――――――――――――――― */

/* =========================================================
   DINER Drawer (SP) - ALWAYS show brand + frosted glass + no gap
========================================================= */
@media (max-width: 989px){

  :root{
    --diner-drawer-bg: rgba(18, 22, 28, .62); /* ガラス面 */
    --diner-drawer-blur: 14px;
    --diner-drawer-border: rgba(255,255,255,.10);
    --diner-drawer-text: rgba(255,255,255,.92);
    --diner-drawer-muted: rgba(255,255,255,.68);
    --diner-drawer-pad-x: 20px;
  }

  /* 1) Drawer本体：隙間なし・全面固定 */
  .menu-drawer, .drawer, .mobile-nav, .header-drawer{
    position: fixed !important;
    top: 0 !important;
    left: 0; right: 0;
    height: 100dvh !important; /* iOS対策でdvh */
    max-height: none !important;
    background: var(--diner-drawer-bg) !important;
    backdrop-filter: blur(var(--diner-drawer-blur));
    -webkit-backdrop-filter: blur(var(--diner-drawer-blur));
    color: var(--diner-drawer-text) !important;
    padding-top: env(safe-area-inset-top); /* ノッチ保険 */
  }

  /* 2) 背景オーバーレイ（後ろが見えすぎるの防止） */
  .menu-drawer__overlay, .drawer__overlay, .mobile-nav__overlay{
    background: rgba(0,0,0,.45) !important;
  }

  /* 3) ドロワー内の“ロゴ（ヘッディング）”は常に表示
        ※ヘッダー側でロゴを消してても、ドロワー内は別扱いで復活 */
  .menu-drawer .header__heading,
  .menu-drawer .header__heading-link,
  .drawer .header__heading,
  .drawer .header__heading-link,
  .mobile-nav .header__heading,
  .mobile-nav .header__heading-link{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }



  /* Xボタンが浮いてる時の見た目 */
  .menu-drawer .menu-drawer__close,
  .drawer .drawer__close,
  .mobile-nav .mobile-nav__close{
    top: env(safe-area-inset-top) !important;
  }
}

/* =========================
   SP: hide header logo while drawer is open
   (Honey: overflow-hidden-tablet is set on body)
========================= */
@media (max-width: 989px){
  body.overflow-hidden-tablet header.header .header__heading,
  body.overflow-hidden-tablet header.header .header__heading-link{
    display: none !important;
  }
}

@media (max-width: 989px){
  .menu-drawer,
  .drawer,
  .mobile-nav,
  .header-drawer{
    top: 0 !important;
    height: 100dvh !important;
  }
}

/* =========================
   Drawer open: remove header offset (gap fix)
========================= */
@media (max-width: 989px){

  /* ドロワーOPEN中は、ヘッダーのオフセットを無効化して上に隙間を作らない */
  body.overflow-hidden-tablet .header-wrapper,
  body.overflow-hidden-tablet header.header{
    top: 0 !important;
    transform: none !important;
  }

}
/* =========================================================
   DINER / Honey - SP Drawer (3-level) FINAL CLEAN
   - all templates対応
   - 親: 13.8
   - 子: 12
   - 孫: 11.6
   - SHOP/SUPPORTは親の下にインライン展開
========================================================= */
@media (max-width: 989px){

  /* =========================
     0) Tokens
  ========================= */
  :root{
    --diner-drawer-pad-x: 20px;

    --diner-parent-fs: 13.8px;
    --diner-parent-fw: 700;
    --diner-parent-ls: .08em;
    --diner-parent-py: 14px;

    --diner-child-fs: 12px;
    --diner-child-fw: 500;
    --diner-child-ls: .06em;
    --diner-child-py: 12px;
    --diner-child-color: rgba(255,255,255,.86);

    --diner-grand-fs: 11.6px;
    --diner-grand-fw: 500;
    --diner-grand-ls: .06em;
    --diner-grand-py: 11px;
    --diner-grand-color: rgba(255,255,255,.78);

    --diner-line: rgba(255,255,255,.12);
    --diner-line-soft: rgba(255,255,255,.08);
  }

  /* =========================
     1) Drawer base
  ========================= */
  .menu-drawer{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .menu-drawer__menu > li{
    margin: 0 !important;
  }

  /* 子パネルの見た目をフラット化 */
  .menu-drawer__inner-submenu,
  .menu-drawer__submenu{
    background: transparent !important;
    box-shadow: none !important;
  }

  /* 高さ暴走防止 */
  .menu-drawer__inner-container,
  .menu-drawer__inner-submenu{
    height: auto !important;
    max-height: none !important;
    padding-bottom: 0 !important;
  }

  /* =========================
   Drawer scroll support
========================= */
.menu-drawer{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.menu-drawer__inner-container,
.menu-drawer__inner-submenu{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

  /* =========================
     2) 親（トップ階層）
  ========================= */
  .menu-drawer__menu > li > a.menu-drawer__menu-item,
  .menu-drawer__menu > li > summary.menu-drawer__menu-item,
  .menu-drawer__menu > li > details > summary.menu-drawer__menu-item{
    font-family: var(--font-heading-family) !important;
    font-size: var(--diner-parent-fs) !important;
    font-weight: var(--diner-parent-fw) !important;
    letter-spacing: var(--diner-parent-ls) !important;

    padding: var(--diner-parent-py) var(--diner-drawer-pad-x) !important;
    border-bottom: 1px solid var(--diner-line) !important;
  }

  .menu-drawer__menu > li > details > summary.menu-drawer__menu-item *{
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
  }

  summary.menu-drawer__menu-item{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  summary.menu-drawer__menu-item .icon{
    opacity: .85;
    transition: transform .18s ease, opacity .18s ease;
  }

  details[open] > summary.menu-drawer__menu-item .icon{
    transform: rotate(90deg);
    opacity: .95;
  }

  /* =========================
     3) 子（2階層）
  ========================= */

  /* 子リンク */
  .menu-drawer__submenu a.menu-drawer__menu-item{
    display: block;
    padding: var(--diner-child-py) var(--diner-drawer-pad-x) !important;

    font-family: var(--font-heading-family) !important;
    font-size: var(--diner-child-fs) !important;
    font-weight: var(--diner-child-fw) !important;
    letter-spacing: var(--diner-child-ls);

    color: var(--diner-child-color) !important;
    border-bottom: 1px solid var(--diner-line-soft) !important;
  }

  .menu-drawer__submenu a.menu-drawer__menu-item:link,
  .menu-drawer__submenu a.menu-drawer__menu-item:visited{
    color: var(--diner-child-color) !important;
    font-size: var(--diner-child-fs) !important;
    font-weight: var(--diner-child-fw) !important;
  }

  /* 子を直下だけに限定して孫を巻き込まない */
  .menu-drawer .menu-drawer__submenu > li > a.menu-drawer__menu-item:link,
  .menu-drawer .menu-drawer__submenu > li > a.menu-drawer__menu-item:visited{
    font-size: 12px !important;
    font-weight: 500 !important;
  }

  .menu-drawer .menu-drawer__submenu > li > details > summary.menu-drawer__menu-item{
    font-size: 12px !important;
    font-weight: 500 !important;
  }

  /* PARTS（aじゃない行） */
  .menu-drawer__submenu .menu-drawer__menu__mobile > .menu-drawer__menu-item{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;

    padding: var(--diner-child-py) var(--diner-drawer-pad-x) !important;

    font-family: var(--font-heading-family) !important;
    font-size: var(--diner-child-fs) !important;
    font-weight: var(--diner-child-fw) !important;
    letter-spacing: var(--diner-child-ls);

    color: var(--diner-child-color) !important;
    border-bottom: 1px solid var(--diner-line-soft) !important;

    cursor: pointer;
    user-select: none;
  }

  .menu-drawer .menu-drawer__submenu .menu-drawer__menu__mobile > .menu-drawer__menu-item{
    font-size: 12px !important;
    font-weight: 500 !important;
  }

  /* PARTS開閉記号 */
  .menu-drawer__submenu .menu-drawer__menu__mobile > .menu-drawer__menu-item::after{
    content: "›";
    opacity: .9;
    transform: translateY(-1px);
  }

  .menu-drawer__submenu .menu-drawer__menu__mobile.is-open > .menu-drawer__menu-item::after{
    content: "⌄";
    opacity: .95;
  }

  /* =========================
     4) 孫（3階層）
  ========================= */
  ul.diner-grandmenu{
    margin: 0 !important;
    padding: 0 !important;
  }

  ul.diner-grandmenu[hidden]{
    display: none !important;
  }

  ul.diner-grandmenu a.menu-drawer__menu-item{
    display: block;
    padding: var(--diner-grand-py) var(--diner-drawer-pad-x) !important;
    padding-left: calc(var(--diner-drawer-pad-x) + 16px) !important;

    font-family: var(--font-heading-family) !important;
    font-size: var(--diner-grand-fs) !important;
    font-weight: var(--diner-grand-fw) !important;
    letter-spacing: var(--diner-grand-ls);

    color: var(--diner-grand-color) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }

  ul.diner-grandmenu a.menu-drawer__menu-item:link,
  ul.diner-grandmenu a.menu-drawer__menu-item:visited{
    font-size: 11.6px !important;
    font-weight: 500 !important;
    color: var(--diner-grand-color) !important;
  }

  ul.diner-grandmenu a.menu-drawer__menu-item::before{
    content: "-";
    margin-right: 8px;
    opacity: .6;
  }

  ul.diner-grandmenu li:last-child a.menu-drawer__menu-item{
    border-bottom: none !important;
  }

  /* =========================
     5) スライド停止（子を親の下に出す）
  ========================= */
  .menu-drawer__submenu{
    position: static !important;
    transform: none !important;
    inset: auto !important;

    height: auto !important;
    max-height: none !important;
    overflow: visible !important;

    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .menu-drawer__inner-submenu{
    position: static !important;
    transform: none !important;
    inset: auto !important;

    height: auto !important;
    max-height: none !important;

    padding: 0 !important;
    background: transparent !important;
  }

  .menu-drawer__submenu .menu-drawer__close-button,
  .menu-drawer__inner-submenu .menu-drawer__close-button{
    display: none !important;
  }

  /* テーマ標準の左スライド演出を停止 */
  .menu-drawer .list-menu--parent li summary,
  .menu-drawer .list-menu--parent li a{
    left: 0 !important;
    transition: none !important;
  }

  /* =========================
     6) 不要要素削除
  ========================= */
  .menu-drawer__account{
    display: none !important;
  }

  .mobile-localization-wrapper{
    border-top: none !important;
  }


  /* =========================================================
   7) SP Drawer Social
========================================================= */
  .diner-drawer-social{
    display:flex;
    justify-content:center;
    gap:22px;
    padding:28px 0 40px;
  }

  .diner-drawer-social a{
    display:flex;
    align-items:center;
    justify-content:center;

    width:34px;
    height:34px;

    background:rgba(255,255,255,.06);
    border-radius:50%;

    color:#fff;
    opacity:.85;
    transition:.3s ease;
  }

  .diner-drawer-social a:hover{
    opacity:1;
    transform:translateY(-2px);
  }

  .diner-drawer-social svg,
  .diner-drawer-social img{
    width:20px;
    height:20px;
    fill:currentColor;
  }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーaboutdiner---------------------------------------------------- */


/* Aboutだけ：ヘッダー下の白線を消す */
body.page-about-diner .header-wrapper::before{
  border: none !important;
  background: none !important;
  display: none !important;
}

/* =========================
   DINER: PC TOP NAV = SYNE
   - only on HOME (TOP)
   - only on PC
========================= */
@media (min-width: 990px){
  body.template-index .header__menu-item,
  body.template-index .header__menu-item span,
  body.template-index .header__submenu .header__menu-item,
  body.template-index .header__submenu .header__menu-item span{
    font-family: var(--font-heading-family) !important; /* = Syne */
    letter-spacing: .14em; /* お好みで */
    font-weight: 600;      /* お好みで */
    text-transform: uppercase; /* いらなければ消す */
  }
}

@media (min-width: 990px){
  body.template-index header a,
  body.template-index header summary{
    font-family: var(--font-heading-family) !important;
  }
}

/* =========================================================
   ABOUT / RESERVATION
   SP / Tablet header color switch
   - hero上では白
   - scroll後は黒
========================================================= */
@media (max-width: 989px){

  body.template-suffix-reservation header.header,
  body.template-suffix-reservation header.header a,
  body.template-suffix-reservation header.header svg,
  body.template-suffix-reservation header.header svg *,
  body.template-suffix-reservation header.header .header__icons span,
  body.page-about-diner header.header,
  body.page-about-diner header.header a,
  body.page-about-diner header.header svg,
  body.page-about-diner header.header svg *,
  body.page-about-diner header.header .header__icons span{
    transition:
      color .25s ease,
      fill .25s ease,
      stroke .25s ease;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  html.is-at-top body.template-suffix-reservation header.header,
  html.is-at-top body.template-suffix-reservation header.header a,
  html.is-at-top body.template-suffix-reservation header.header .header__icons span,
  html.is-at-top body.page-about-diner header.header,
  html.is-at-top body.page-about-diner header.header a,
  html.is-at-top body.page-about-diner header.header .header__icons span{
    color: #fff !important;
  }

  html.is-at-top body.template-suffix-reservation header.header svg,
  html.is-at-top body.template-suffix-reservation header.header svg *,
  html.is-at-top body.page-about-diner header.header svg,
  html.is-at-top body.page-about-diner header.header svg *{
    fill: #fff !important;
    stroke: #fff !important;
    
  }

  html.is-at-top body.template-suffix-reservation header.header .svg-inline--fa,
  html.is-at-top body.page-about-diner header.header .svg-inline--fa{
    color: #fff !important;
    --fa-primary-color: #fff;
    --fa-secondary-color: #fff;
  }

  html:not(.is-at-top) body.template-suffix-reservation header.header,
  html:not(.is-at-top) body.template-suffix-reservation header.header .header__icons span,
  html:not(.is-at-top) body.page-about-diner header.header,
  
  html:not(.is-at-top) body.page-about-diner header.header .header__icons span{
    color: #111 !important;
  }

  html:not(.is-at-top) body.template-suffix-reservation header.header svg,
  html:not(.is-at-top) body.template-suffix-reservation header.header svg *,
  html:not(.is-at-top) body.page-about-diner header.header svg*{
    fill: #111 !important;
    stroke: #111 !important;
    
  }

  html:not(.is-at-top) body.template-suffix-reservation header.header .svg-inline--fa,
  html:not(.is-at-top) body.page-about-diner header.header .svg-inline--fa{
    color: #111 !important;
    --fa-primary-color: #111;
    --fa-secondary-color: #111;
  }
}

/* =========================================================
   JOURNAL
   SP / Tablet header color switch
========================================================= */
@media (max-width: 989px){

  body.template-blog header.header,
  body.template-blog header.header a,
  body.template-blog header.header svg,
  body.template-blog header.header svg *,
  body.template-blog header.header .header__icons span{
    transition:
      color .25s ease,
      fill .25s ease,
      stroke .25s ease;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  /* ===== ヒーロー上（TOP）→ 白 ===== */
  html.is-at-top body.template-blog header.header,
  html.is-at-top body.template-blog header.header a,
  html.is-at-top body.template-blog header.header .header__icons span{
    color: #fff !important;
  }

  html.is-at-top body.template-blog header.header svg,
  html.is-at-top body.template-blog header.header svg *{
    fill: #fff !important;
    stroke: #fff !important;
  }

  html.is-at-top body.template-blog header.header .svg-inline--fa{
    color: #fff !important;
    --fa-primary-color: #fff;
    --fa-secondary-color: #fff;
  }

  /* ===== スクロール後 → 黒 ===== */
  html:not(.is-at-top) body.template-blog header.header,
  html:not(.is-at-top) body.template-blog header.header .header__icons span{
    color: #111 !important;
  }

  html:not(.is-at-top) body.template-blog header.header svg,
  html:not(.is-at-top) body.template-blog header.header svg *{
    fill: #111 !important;
    stroke: #111 !important;
  }

  html:not(.is-at-top) body.template-blog header.header .svg-inline--fa{
    color: #111 !important;
    --fa-primary-color: #111;
    --fa-secondary-color: #111;
  }
}

/* ------------------------------------------------------------------------JOINUS------------------------------------ */

/* JOIN US: page template をフル幅に */
.page-template.page-width{
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ヒーロー画像だけフルブリード */
.page-template .page-banner-wrap{
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 本文は読みやすい幅に戻す */
.page-template .page-content{
  max-width: 920px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* remove sticky header underline */
.header-wrapper::before{
  display: none !important;
}

.is-bike-archive .ba-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
  pointer-events: none;
}