@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* =========================
   Front Page (Cocoon Child)
   ========================= */


.wrap {
    width: 1320px;
    margin: 0 auto;
}

@media (max-width: 768px) {
.wrap {
    width: auto;
}

}

.frontpage {
  --fp-max: 1080px;        /* 主要コンテンツ幅 */
  --fp-pad:  clamp(16px, 4vw, 28px);
  --fp-gap:  clamp(16px, 4vw, 28px);
  --fp-gap-lg: clamp(24px, 6vw, 48px);
  --fp-radius: 16px;
  --fp-shadow: 0 6px 20px rgba(0,0,0,.06);
  --fp-accent: #222;       /* 見出し色/ボタン色 */
  --fp-muted:  #777;       /* 補助テキスト */
  --fp-line:   rgba(0,0,0,.08);
}

@media (prefers-color-scheme: dark) {
  .frontpage {
    --fp-accent: #333;
    --fp-muted:  #333;
    --fp-line:   rgba(255,255,255,.12);
  }
}

/* コンテナ共通 */
.frontpage section,
.frontpage nav {
  width: min(100%, var(--fp-max));
  margin-inline: auto;
  padding-inline: var(--fp-pad);
}

.frontpage .fp-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--fp-line);
  padding-bottom: .6rem;
}
.frontpage .fp-section__title {
  font-size: clamp(20px, 3.2vw, 28px);
  letter-spacing: .04em;
  margin: 0;
  color: var(--fp-accent);
  
}
.frontpage .fp-section__more {
  font-size: 14px;
  color: var(--fp-muted);
  text-decoration: none;
}
.frontpage .fp-section__more:hover { text-decoration: underline; }


@media (max-width: 768px) {
  .frontpage .fp-section__header{
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
}

/* =========================
   ヒーロー
   ========================= */
.frontpage .fp-hero {
  width: 100%;
  padding-inline: 0; /* ヒーローは全幅に */
  margin-bottom: var(--fp-gap-lg);
}
.frontpage .fp-hero__inner {
  width: min(100%, var(--fp-max));
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) var(--fp-pad);
  border-radius: var(--fp-radius);
  background: linear-gradient(180deg, rgba(0,0,0,.03), transparent);
}
.frontpage .fp-hero__title {
  margin: 0 0 .5em;
  font-size: clamp(24px, 4.2vw, 40px);
  letter-spacing: .02em;
  color: var(--fp-accent);
}
.frontpage .fp-hero__content > *:first-child { margin-top: 0; }
.frontpage .fp-hero__content p { color: var(--fp-muted); }

/* =========================
   クイックリンク帯（4分割）
   ========================= */
.frontpage .fp-quicklinks {
  margin-bottom: var(--fp-gap-lg);
}
.frontpage .fp-quicklinks__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fp-gap);
  padding: 0;
  margin: 0;
}
@media (min-width: 768px) {
  .frontpage .fp-quicklinks__list { grid-template-columns: repeat(4, 1fr); }
}
.frontpage .fp-quicklinks__list a {
  display: grid;
  place-items: center;
  min-height: 72px;
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-radius);
  background: #fff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .06em;
  box-shadow: var(--fp-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
@media (prefers-color-scheme: dark) {
  .frontpage .fp-quicklinks__list a { background: #111; }
}
.frontpage .fp-quicklinks__list a:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.09);
}

/* =========================
   NEWS
   ========================= */
.frontpage .fp-news {
  margin-bottom: var(--fp-gap-lg);
}

/* グリッド配置（自動折り返し） */
.frontpage .fp-news__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(18px, 3vw, 32px);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .frontpage .fp-news__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .frontpage .fp-news__cards { grid-template-columns: repeat(4, 1fr); }
}

/* カード */
.frontpage .fp-news__card {
  border: none;
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
}

/* カード全体をリンクに */
.frontpage .fp-news__cardLink {
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  gap: 10px;
}
.frontpage .fp-news__cardLink:hover .fp-news__title { text-decoration: underline; }

/* サムネ（背景方式：縦横比を揃える） */
.frontpage .fp-news__thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  border-radius: 12px;
}

/* メタ部 */
.frontpage .fp-news__meta {
  padding: 0 4px;
}
.frontpage .fp-news__date {
  display: block;
  font-size: 13px;
  color: var(--fp-muted);
  margin-bottom: 6px;
}
.frontpage .fp-news__title {
  margin: 0;
  color: var(--fp-accent);
  font-weight: 700;
  letter-spacing: .01em;
  font-size: clamp(14px, 2.1vw, 16px);
  line-height: 1.6;
}

/* 空表示 */
.frontpage .fp-news__empty { color: var(--fp-muted); }

/* 大きいカード用を通常化 */
.frontpage .fp-news__card--large { grid-column: auto; grid-row: auto; }
.frontpage .fp-news__card--large .fp-news__title { font-size: inherit; line-height: inherit; }
.frontpage .fp-news__card--large .fp-news__thumb { aspect-ratio: 3 / 2; }

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* Remove gray/white box above hero */
.content, .wrap, .main, .entry-content {
  background: #f8efe6 !important;
  box-shadow: none !important;
}
.site-main {
  background: #f8efe6 !important;
}

/* Remove gray gap under header and above footer */
.header-container, .footer-container, .navi, .footer {
  background: #f8efe6 !important;
}
.site-content, .content, .main, .wrap, .l-header, .l-footer {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: #f8efe6 !important;
}

/* ===== Force white footer area (Cocoon) ===== */
html, body { background:#f8efe6 !important; }

#footer,
.footer,
.l-footer,
.footer-in,
.footer-container,
.footer-bottom,
.site-footer,
.navi-footer,
.footer-widgets {
  background: #f8efe6 !important;
  border-top: none !important;
  box-shadow: none !important;
}

/* 余白をゼロにして帯を消す */
#footer,
.l-footer,
.footer-in,
.footer-bottom,
.footer-widgets {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* フッター直前の区切り線を消す可能性のある要素 */
.site-content:after,
.content:after,
.wrap:after,
.main:after {
  content: none !important;
  display: none !important;
}

/* もしヘッダー下・フッター上に薄い区切り線が出るテーマ境界線 */
.l-header,
.l-footer,
.header-container,
.footer-container {
  border-bottom: none !important;
  border-top: none !important;
}

/* ===== NEWS: 下部「すべて見る」ボタン ===== */
.frontpage .fp-section__moreRow{
  text-align: center;
  margin: 50px auto; /* 上下50px程度 */
}

.frontpage .fp-button{
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 12px 22px;
  border-radius: 999px;
  transition: opacity .15s ease, transform .15s ease;
}
.frontpage .fp-button--outline{
  border: 1px solid var(--fp-accent);
  background: #fff;
  color: var(--fp-accent);
}
.frontpage .fp-button--outline:hover{
  opacity: .85;
  transform: translateY(-1px);
}

.fp-section__moreRow h2{
  margin-bottom: 20px;
}

/* ===== セクションタイトル中央寄せ + 上下マージン調整 ===== */
.frontpage .fp-section__header {
  text-align: center;
  margin-top: 60px;
  margin-bottom: 60px;
}

.frontpage .fp-section__title {
  
}

/* ===== セクション見出しを中央寄せ。上下60px。フレックス解除 ===== */
.frontpage .fp-section__header {
  display: block !important;           /* 既存の display:flex を無効化 */
  text-align: center !important;
  justify-content: initial !important;
  align-items: initial !important;
  gap: 0 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}
.frontpage .fp-section__title {
  display: inline-block;               /* 中央寄せを明示 */
  margin: 0 auto;
}

@media (max-width: 768px) {
  .frontpage .fp-section__header{
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
}

/* ===== 各ブロック下にも60px程度の余白 ===== */
.frontpage .fp-news,
.frontpage .fp-menu,
.frontpage .fp-about { 
  margin-bottom: 60px !important; 
}
/* ===== 見出しが .fp-section__header なしのセクション用のセンター寄せ ===== */
.frontpage .fp-menu .fp-section__title,
.frontpage .fp-about .fp-section__title{
  display: block;
  text-align: center;
  margin: 60px auto 60px;
}

.frontpage .fp-menu .fp-section__title{
  margin-bottom: 30px;
}

.frontpage .fp-menu .fp-section__title+p{
  margin-bottom: 80px;
  text-align: center;
}


.fp-menu__lead{
  text-align: center;
}

/* =========================
   TOP: LINE UP（商品グリッド）
   ========================= */
.frontpage .fp-products {
  width: min(100%, var(--fp-max));
  margin: 60px auto;               /* 上下60px */
  padding-inline: var(--fp-pad);
}
.frontpage .fp-products > .fp-section__title{
  text-align: center;
  margin: 0 0 24px;
  letter-spacing: .08em;
}

/* 中央寄せ・折り返し */
.frontpage .fp-products__list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;         /* 中央に寄せる */
  gap: clamp(24px, 4vw, 48px);
  padding: 0;
  margin: 0;
  list-style: none;
}

/* カード幅（増減しても崩れない） */
.frontpage .fp-products__item{
  width: clamp(180px, 22vw, 280px);
}

.frontpage .fp-product{
  position: relative;
  margin: 0;
  text-align: center;
}

/* 上部の丸い番号バッジ */
.frontpage .fp-product__badge{
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 58px; height: 58px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: #000;
  color: #fff;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: clamp(12px, 1.8vw, 16px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* 画像 */
.frontpage .fp-product__img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 999px;             /* 角丸（要らなければ削除） */
  padding-top: 36px;               /* バッジが被るぶん余白 */
}

/* 名前 */
.frontpage .fp-product__name{
  margin-top: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: clamp(14px, 2.2vw, 18px);
}

/* スマホでの間隔微調整 */
@media (max-width: 480px){
  .frontpage .fp-products__list{ gap: 20px; }
}

/* ===== SHOP INFO: PCで横並び（タイトル / 画像 / 地図） ===== */
.frontpage .fp-shopinfo { margin-top: 60px; margin-bottom: 60px; }
.frontpage .fp-shopinfo__grid2{
  width: min(100%, var(--fp-max));
  margin: 0 auto;
  padding-inline: var(--fp-pad);
  display: grid;
  gap: clamp(16px, 3vw, 28px);
}
@media (min-width: 1024px){
  .frontpage .fp-shopinfo__grid2{ grid-template-columns: 1fr 1.2fr 1.2fr; align-items: start; }
}
@media (max-width: 1023px){
  .frontpage .fp-shopinfo__grid2{ grid-template-columns: 1fr; }
}
.frontpage .fp-shopinfo__titlecol{ display: grid; place-items: start; }
.frontpage .fp-shopinfo__titlecol .fp-section__title{ margin: 0; text-align: left; }
.frontpage .fp-shopinfo__photo img{ width: 100%; height: auto; display: block; border-radius: 12px; }


.fp-shopinfo__grid{
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 480px) {
.fp-shopinfo__grid{
  display: block;
}

.fp-shopinfo__dl,
.fp-shopinfo__photo{
  margin-bottom: 20px;
}

.fp-shopinfo__photo{
  width: 100% !important;
  height: auto !important;
}

.fp-shopinfo__map{
  width: 100% !important;
}


}


@media (min-width: 1024px){


}

.fp-shopinfo__photo{
  width: 37%;
}

.fp-shopinfo__map{
  width: 37%;
}

/* Googleマップを画像と同じ高さにする */
.fp-shopinfo__map iframe {
  width: 100%;
  height: 100%; /* 親要素の高さに合わせる */
  display: block;
}

/* 親コンテナも高さを揃える */
.fp-shopinfo__map,
.fp-shopinfo__photo {
  height: 252px;
}

.fp-shopinfo__grid {
  align-items: stretch; /* 各カラムの高さを揃える */
}


.site-name-text img{
  max-width: 150px;
}



/* ===== ABOUT: 会社概要レイアウト ===== */
.frontpage .fp-company{
  max-width: 700px;
  margin: 60px auto;
  padding-inline: var(--fp-pad);
}
.frontpage .fp-company__dl{ margin: 0; }
.frontpage .fp-company__row{
  position: relative;
  display: grid;
  grid-template-columns: 140px 1fr; /* 左ラベル / 右本文 */
  column-gap: clamp(16px, 3vw, 32px);
  align-items: center;
  padding: clamp(18px, 3vw, 28px) 0;
}
/* 行の下に薄いグレーのライン */
.frontpage .fp-company__row::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #e9e9e9;
}
/* 左側に短い黄色バー */
.frontpage .fp-company__row::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 180px;
  height: 6px;
  background: #ffd31a;
}
.frontpage .fp-company__row dt{
  font-weight: 800;
  letter-spacing: .08em;
  font-size: clamp(16px, 2vw, 20px);
}
.frontpage .fp-company__row dd{
  margin: 0;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.9;
}
@media (max-width: 640px){
  .frontpage .fp-company__row{ grid-template-columns: 1fr; }
  .frontpage .fp-company__row::before{ width: 120px; }
}



.menu_p{
  margin-top: 60px;
  text-align: center;
}

/* ===== Vision / Brand Story styles (scoped to this template) ===== */
:root {
  --brand-bg: #fff8f3;
  --brand-accent: #ff6a6a;
  --brand-brown: #5a3b2e;
  --brand-text: #2d2a26;
}

.brand-wrap {
  background: var(--brand-bg);
}

.brand-hero {
  position: relative;
  aspect-ratio: 16/7;
  width: 100%;
  overflow: hidden;
}
.brand-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}
.brand-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.25) 30%, rgba(0,0,0,.15) 60%, rgba(0,0,0,0) 100%);
}
.brand-hero__title {
position: absolute;
    left: 35%;
    bottom: clamp(15px, 6vw, 56px);
    transform: translateX(-25%);
    color: #fff;
    text-align: center;
    line-height: 1.15;
    letter-spacing: .04em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.brand-hero__title .eyebrow {
  display: inline-block;
  font-size: clamp(12px, 1.8vw, 14px);
  padding: .25em .75em;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.35);
  margin-bottom: .6em;
}
.brand-hero__title h1 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(24px, 5.2vw, 44px);
}

.brand-container {
  width: min(1100px, 92%);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) 0;
}

.brand-lead {
  margin: clamp(20px, 4vw, 40px) auto;
  text-align: center;
  color: var(--brand-text);
}
.brand-lead p {
  font-size: clamp(14px, 2.4vw, 18px);
  line-height: 1.9;
  margin: .6em 0;
}

.brand-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 28px);
}
@media (min-width: 880px) {
  .brand-grid { grid-template-columns: 1fr 1fr; }
}

.brand-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  padding: clamp(18px, 3.2vw, 28px);
}
.brand-card h3 {
  position: relative;
  margin: 0 0 .6em;
  font-size: clamp(18px, 2.8vw, 22px);
  color: var(--brand-brown);
}
.brand-card h3::after {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  background: var(--brand-accent);
  border-radius: 999px;
  margin-top: .4em;
}
.brand-card p {
  margin: .6em 0;
  line-height: 1.85;
  color: var(--brand-text);
}

.brand-vision {
  margin-top: clamp(28px, 6vw, 64px);
}
.brand-vision .vision-banner {
  background: linear-gradient(135deg, #fff 0%, #ffe6e6 100%);
  border: 1px solid rgba(255,106,106,.25);
  border-radius: 16px;
  padding: clamp(16px, 3vw, 26px);
  text-align: center;
}
.brand-vision .vision-banner h2 {
  margin: 0 0 .3em;
  font-size: clamp(20px, 3.6vw, 28px);
  color: var(--brand-brown);
}
.brand-vision .vision-banner p {
  margin: 0;
  font-weight: 600;
  font-size: clamp(16px, 2.8vw, 20px);
  color: #b23a3a;
}


/* navi */

.navi-in > ul li {
    width: 11%;
}

.navi-in a:hover{
    background-color: #f9f0e7;
    font-weight: bold;
}

.navi-footer-in a:hover {
    background-color: #f9f0e7;
    font-weight: bold;
}

.a-wrap:hover{
 background-color: #f9f0e7; 
 opacity: 0.6;
}


:root{
  --brand-bg:#fff8f3;
  --brand-accent:#ff6a6a;
  --brand-brown:#5a3b2e;
  --brand-text:#2d2a26;
  --ink-soft:#6c5f57;
}

.store-wrap{background:var(--brand-bg);} 
.store-hero{position:relative;aspect-ratio:16/7;width:100%;overflow:hidden}
.store-hero img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.02)}
.store-hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.25) 30%,rgba(0,0,0,.15) 60%,rgba(0,0,0,0) 100%)}
.store-hero__title{position:absolute;left:50%;bottom:clamp(16px,6vw,56px);transform:translateX(-50%);color:#fff;text-align:center;line-height:1.15;letter-spacing:.04em;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.store-hero__title h1{margin:0;font-weight:800;font-size:clamp(26px,5vw,44px)}

.store-container{;margin:0 auto;padding:clamp(28px,5vw,56px) 0}

.info-grid{display:grid;grid-template-columns:1fr;gap:clamp(16px,3vw,24px)}
@media(min-width:880px){.info-grid{grid-template-columns:1.2fr .8fr}}

.card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.06);padding:clamp(18px,3vw,28px)}
.card h2{margin:.2em 0 .8em;font-size:clamp(18px,3vw,22px);color:var(--brand-brown)}
.card h2::after{content:"";display:block;width:56px;height:4px;background:var(--brand-accent);border-radius:999px;margin-top:.4em}
.card p{color:var(--brand-text);line-height:1.9;margin:.6em 0}

/* address / access */
.address{display:flex;gap:12px;align-items:flex-start; font-style: normal !important}

.access ul{margin:.4em 0 0;padding:0 0 0 1.2em;color:var(--ink-soft)}
.access li{margin:.25em 0}

/* hours table */
.hours{--rowpad:12px}
.hours table{width:100%;border-collapse:separate;border-spacing:0 10px}
.hours th,.hours td{background:#fff;border:1px solid rgba(0,0,0,.06);padding:var(--rowpad) 14px}
.hours th{border-radius:12px 0 0 12px;text-align:left;font-weight:700;color:var(--brand-brown)}
.hours td{border-radius:0 12px 12px 0}
.hours .clock{display:inline-block;margin-right:.4em}

.note{margin-top:10px;font-size:13px;color:#7a6d66}

/* map / photo placeholder (optional) */
.side .frame{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#fff,#fff2f2);border:1px dashed rgba(255,106,106,.4);display:grid;place-items:center;color:#c96d6d}
.side .frame span{opacity:.85}


/* faq */


.faq-wrap { background: var(--brand-bg); }

.faq-hero { position: relative; aspect-ratio: 16/7; width: 100%; overflow: hidden; }
.faq-hero img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05) contrast(1.02); }
.faq-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.25) 30%, rgba(0,0,0,.15) 60%, rgba(0,0,0,0) 100%); }
.faq-hero__title {
    position: absolute;
    left: 50%;
    bottom: clamp(16px, 6vw, 56px);
    transform: translateX(-50%);
    color: #fff;
    text-align: center;
    line-height: 1.15;
    letter-spacing: .04em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);

    /* ★ 改行防止・幅指定を追加 */
    white-space: nowrap;
    width: auto;
    max-width: 90vw; /* スマホで画面外に出ないように保険で指定 */
    font-size: clamp(18px, 5vw, 36px); /* 文字サイズが大きすぎる場合に可変調整 */
}
.faq-hero__title h1{ margin:0; font-weight:800; font-size: clamp(26px, 5vw, 44px);} 

.faq-container { width: min(1000px, 92%); margin: 0 auto; padding: clamp(28px,5vw,56px) 0; }
.faq-lead { text-align:center; color: var(--brand-text); margin-bottom: clamp(16px, 4vw, 32px);} 

/* Accordion */
.faq-list { margin: 0; padding: 0; list-style: none; }
.faq-item { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.06); overflow:hidden; margin: clamp(10px,2vw,14px) 0; }
.faq-item details{width: 100%;}
.faq-item summary { cursor: pointer; position: relative; padding: clamp(14px,2.6vw,20px) clamp(52px,6vw,68px) clamp(14px,2.6vw,20px) clamp(18px,3vw,28px); font-weight:700; color: var(--brand-brown); outline: none; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { background: linear-gradient(90deg, #fff, #fff5f5); }
.faq-item__a { padding: 0 clamp(18px,3vw,28px) clamp(16px,2.8vw,22px); color: var(--brand-text); line-height:1.9; }

/* Plus icon */
.faq-item summary::after{
  content:"+";
  position:absolute;
  right: 2%;
  top:50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1;
  width: 1.3em; /* 固定ボックスでズレ防止 */
  text-align: center;
  color: var(--brand-accent);
}
/* open state icon (open attribute is on <details>) */
.faq-item details[open] summary::after{
  content:"−"; /* U+2212 for consistent width */
}

/* SP時はタイトルを上下左右ド真ん中に固定 */
/* ===== 下層ヒーロー：PC時の横センター（Brand） ===== */
.brand-hero__title{
  left: 50% !important;
  transform: translateX(-50%) !important; /* 35%/-25%だとズレるので修正 */
  bottom: clamp(16px, 6vw, 56px);
  color:#fff; text-align:center; line-height:1.15; letter-spacing:.04em;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
  white-space: nowrap;
  width:auto; max-width:90vw; /* 画面外防止 */
}
/* ※必要なら見出しサイズも可変に */
.brand-hero__title h1{ margin:0; font-weight:800; font-size:clamp(24px,5.2vw,44px); }

/* ===== 下層ヒーロー：PC時の横センター（Store は既にOKだが保険） ===== */
.store-hero__title{
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: clamp(16px, 6vw, 56px);
  white-space: nowrap; width:auto; max-width:90vw;
}

/* ===== 下層ヒーロー：SP時は上下左右ド真ん中（FAQ / Brand / Store 共通） ===== */
@media (max-width: 768px){
  .faq-hero, .brand-hero, .store-hero { position: relative; }

  /* オーバーレイを一段下げる（テキストが上に来るように） */
  .faq-hero__overlay,
  .brand-hero__overlay,
  .store-hero__overlay{ z-index: 1; }

  .faq-hero__title,
  .brand-hero__title,
  .store-hero__title{
    position: absolute !important;
    inset: 0 !important;             /* 四辺0で全画面を取る */
    display: grid !important;
    place-items: center !important;  /* 完全中央 */
    margin: 0 !important;
    padding: 0 4vw !important;       /* 端の食い込み防止 */
    transform: none !important;      /* 既存translateを打ち消す */
    text-align: center !important;
    z-index: 2 !important;
    white-space: nowrap;             /* 1行キープ。折り返したければ normal に */
    max-width: 100vw !important;
    line-height: 1.15;
  }

  /* 見出しの最小/最大をSP向けに微調整したい場合（任意） */
  .faq-hero__title h1,
  .brand-hero__title h1,
  .store-hero__title h1{
    font-size: clamp(18px, 6.2vw, 34px);
    margin: 0;
    font-weight: 800;
  }
}

/* Brand ヒーローだけは折り返し許可＆幅を制限（SP） */
@media (max-width: 768px){
  .brand-hero__title{
    white-space: normal !important;   /* ← ここを brand だけ normal に */
    max-width: 92vw !important;       /* 画面幅に収める */
    padding: 0 4vw !important;        /* 端の余白 */
    line-height: 1.25;                /* 長文でも読みやすく */
  }
  .brand-hero__title h1{
    font-size: clamp(20px, 6.8vw, 36px) !important; /* ちょい小さめに調整 */
  }
  .brand-hero__title .eyebrow{
    font-size: clamp(11px, 3.2vw, 13px);
  }
}

.navi-in > ul .sub-menu{
  width: 140px;
}