@charset "utf-8";
/* =========================================================
   HONSEN — 下層ページ用コンポーネント（site.css のトークンを継承）
   ========================================================= */

/* ---------- ページヘッダ ---------- */
.phero{padding:clamp(34px,5vw,64px) 0 clamp(30px,4vw,52px)}
.phero .crumb{
  display:flex;flex-wrap:wrap;gap:.5em;align-items:center;margin:0 0 clamp(18px,2.5vw,28px);
  font-family:var(--disp);font-weight:600;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut);
}
.phero .crumb a{color:var(--ink2);transition:color .2s}
.phero .crumb a:hover{color:var(--flame-d)}
.phero .crumb span{color:var(--mut)}
.phero h1{
  margin:.1em 0 0;font-family:var(--jp);font-weight:900;line-height:1.16;letter-spacing:.005em;
  font-size:clamp(1.9rem,5.6vw,3.6rem);color:var(--ink);
}
.phero h1 .g{color:var(--flame-d)}
/* 和文が句の途中で折れないよう、強調句は塊で送る */
.phero h1 .g,.block-head h2 .g,.split-tx h2 .g,.pull .g,.callout strong,.way h3 .g{display:inline-block}
.phero .lead{margin-top:clamp(20px,2.6vw,30px)}

.pband{
  height:clamp(200px,32vw,420px);background-size:cover;background-position:center;
  border-radius:var(--r);overflow:hidden;margin-top:clamp(26px,4vw,44px);
}
.pband.wide{border-radius:0;margin-top:0;height:clamp(220px,34vw,460px)}

/* ---------- 本文ブロック ---------- */
.block{padding:clamp(48px,7vw,104px) 0}
.block.alt{background:var(--paper2)}
.block-head{margin-bottom:clamp(26px,4vw,48px)}
.block-head h2{
  margin:.3em 0 0;font-family:var(--jp);font-weight:900;line-height:1.24;letter-spacing:.005em;
  font-size:clamp(1.45rem,3.6vw,2.5rem);color:var(--ink);
}
.block-head h2 .g{color:var(--flame-d)}
.block-head .lead{margin-top:clamp(14px,2vw,22px)}

.prose{max-width:40em}
.prose p{margin:0 0 1.5em;font-size:clamp(.95rem,1.55vw,1.06rem);line-height:2.1;color:var(--ink2)}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:700}

.duo{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,56px);align-items:center}
@media (min-width:880px){
  .duo{grid-template-columns:1.05fr .95fr}
  .duo.rev .duo-t{grid-column:2}
  .duo.rev .duo-i{grid-area:1/1}
}
.duo-i{border-radius:var(--r);overflow:hidden;background:var(--card)}
.duo-i img{width:100%;display:block}

/* ---------- 数字つきリスト ---------- */
.numlist{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,2.6vw,30px)}
.numlist li{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.6vw,30px);align-items:start;
  border-top:1px solid var(--line);padding-top:clamp(18px,2.6vw,28px);
}
.numlist li:first-child{border-top:1px solid var(--line2)}
.numlist .ni{
  font-family:var(--disp);font-weight:900;line-height:.8;letter-spacing:-.03em;
  font-size:clamp(2rem,5vw,3.4rem);color:transparent;-webkit-text-stroke:2px var(--flame);
}
.numlist h3,.numlist .nh{margin:0;font-family:var(--jp);font-weight:900;font-size:clamp(1.05rem,2.2vw,1.4rem);line-height:1.6}
.numlist p{margin:.55em 0 0;font-size:clamp(.88rem,1.45vw,.98rem);line-height:1.95;color:var(--ink2)}
@media (max-width:560px){
  .numlist li{grid-template-columns:1fr;gap:.2em}
  .numlist .ni{font-size:2.4rem}
}

/* ---------- 沿革 ---------- */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{
  display:grid;grid-template-columns:1fr;gap:6px clamp(20px,4vw,48px);
  border-top:1px solid var(--line);padding:clamp(20px,3vw,32px) 0;
}
.timeline li:first-child{border-top:1px solid var(--line2)}
.timeline .yr{
  font-family:var(--disp);font-weight:900;letter-spacing:-.02em;line-height:1;
  font-size:clamp(1.6rem,4vw,2.6rem);color:var(--flame);
}
.timeline .yr small{display:block;font-size:.4em;letter-spacing:.14em;color:var(--mut);font-weight:600;margin-top:.5em}
.timeline h3{margin:0;font-family:var(--jp);font-weight:900;font-size:clamp(1.05rem,2.2vw,1.35rem);line-height:1.6}
.timeline p{margin:.5em 0 0;font-size:clamp(.88rem,1.45vw,.98rem);line-height:1.95;color:var(--ink2);max-width:38em}
@media (min-width:820px){.timeline li{grid-template-columns:10em 1fr}}

/* ---------- 店舗一覧 ---------- */
.shops{display:grid;grid-template-columns:1fr;gap:clamp(14px,2vw,20px)}
@media (min-width:700px){.shops{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.shops{grid-template-columns:repeat(3,1fr)}}
.shop{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;gap:.5em;
}
.shop.here{border-color:var(--flame);box-shadow:0 0 0 3px rgba(240,86,42,.12)}
.shop h3{margin:0;font-family:var(--jp);font-weight:900;font-size:1.1rem;letter-spacing:.03em}
.shop .adr{margin:0;font-size:.88rem;line-height:1.85;color:var(--ink2)}
.shop .tel{
  font-family:var(--disp);font-weight:900;font-size:1.2rem;letter-spacing:-.01em;
  color:var(--ink);transition:color .2s;
}
.shop .tel:hover{color:var(--flame-d)}
.shop .badge{
  align-self:flex-start;font-family:var(--jp);font-weight:700;font-size:.68rem;letter-spacing:.08em;
  color:#fff;background:var(--flame-d);border-radius:100px;padding:.2em .9em;
}
.shop .badge.rest{background:var(--mut)}

/* ---------- 料理カード ---------- */
.dishes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.4vw,30px)}
@media (min-width:760px){.dishes{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1150px){.dishes{grid-template-columns:repeat(4,1fr)}}
.dish{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.dish img{width:100%;display:block;aspect-ratio:75/56;object-fit:cover}
.dish .cap{padding:clamp(12px,1.6vw,18px)}
.dish h3{margin:0;font-family:var(--jp);font-weight:700;font-size:clamp(.9rem,1.5vw,1.02rem);line-height:1.6}
.dish p{margin:.35em 0 0;font-size:.8rem;line-height:1.8;color:var(--mut)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line2)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;gap:.9em;align-items:flex-start;
  padding:clamp(18px,2.4vw,26px) 0;font-family:var(--jp);font-weight:700;
  font-size:clamp(.98rem,1.7vw,1.12rem);line-height:1.7;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"Q";flex:0 0 auto;font-family:var(--disp);font-weight:900;color:var(--flame);
  font-size:1.05em;line-height:1.55;
}
.faq summary::after{
  content:"";margin-left:auto;flex:0 0 auto;width:12px;height:12px;align-self:center;
  border-right:2px solid var(--flame);border-bottom:2px solid var(--flame);
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s;
}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq .a{
  display:flex;gap:.9em;align-items:flex-start;padding:0 0 clamp(20px,2.6vw,28px);
  font-size:clamp(.88rem,1.45vw,.98rem);line-height:2;color:var(--ink2);
}
.faq .a::before{
  content:"A";flex:0 0 auto;font-family:var(--disp);font-weight:900;color:var(--herb);
  font-size:1.15em;line-height:1.7;
}

.sr-head{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- メディア掲載 ---------- */
.medialist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.medialist li{
  display:grid;grid-template-columns:1fr;gap:4px clamp(20px,4vw,44px);
  border-bottom:1px solid var(--line);padding:clamp(20px,3vw,30px) 0;align-items:baseline;
}
.medialist .date{
  font-family:var(--disp);font-weight:700;font-size:.86rem;letter-spacing:.06em;color:var(--flame-d);
  white-space:nowrap;
}
.medialist h3{margin:0;font-family:var(--jp);font-weight:900;font-size:clamp(1rem,2vw,1.25rem);line-height:1.6}
.medialist .outlet{
  display:inline-block;margin-top:.5em;font-family:var(--jp);font-weight:700;font-size:.76rem;
  letter-spacing:.06em;color:var(--herb);border:1px solid rgba(46,125,82,.4);border-radius:100px;padding:.25em .9em;
}
.medialist p{margin:.6em 0 0;font-size:.9rem;line-height:1.95;color:var(--ink2);max-width:44em}
@media (min-width:760px){.medialist li{grid-template-columns:9em 1fr}}

/* ---------- 引用・強調ボックス ---------- */
.callout{
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--flame);
  border-radius:var(--r);padding:clamp(22px,3vw,34px);
}
.callout p{margin:0;font-size:clamp(.95rem,1.6vw,1.08rem);line-height:2.05;color:var(--ink2)}
.callout p + p{margin-top:1.2em}
.callout strong{color:var(--ink);font-weight:700}

.pull{
  margin:clamp(30px,4vw,52px) 0;font-family:var(--jp);font-weight:900;
  font-size:clamp(1.3rem,3.4vw,2.3rem);line-height:1.6;letter-spacing:.005em;color:var(--ink);
  max-width:22em;
}
.pull .g{color:var(--flame-d)}

/* ---------- 不安リスト（BUSINESS） ---------- */
.worries{display:grid;grid-template-columns:1fr;gap:clamp(12px,1.8vw,18px)}
@media (min-width:760px){.worries{grid-template-columns:1fr 1fr}}
.worry{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(18px,2.4vw,26px);display:flex;gap:.9em;align-items:flex-start;
}
.worry::before{
  content:"";flex:0 0 auto;width:.7em;height:.7em;margin-top:.72em;border-radius:50%;
  background:var(--flame);
}
.worry p{margin:0;font-size:clamp(.9rem,1.5vw,1rem);line-height:1.9;color:var(--ink2)}
.worry b{display:block;font-weight:700;color:var(--ink);margin-bottom:.2em}

/* ---------- 相談の流れ ---------- */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:clamp(14px,2vw,20px)}
@media (min-width:820px){.flow{grid-template-columns:repeat(4,1fr)}}
.flow li{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(18px,2.4vw,26px);position:relative;
}
.flow .st{
  font-family:var(--disp);font-weight:900;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--flame-d);
}
.flow h3{margin:.5em 0 0;font-family:var(--jp);font-weight:900;font-size:1.05rem;line-height:1.6}
.flow p{margin:.5em 0 0;font-size:.86rem;line-height:1.9;color:var(--ink2)}

/* ---------- 連絡先カード ---------- */
.ways{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.4vw,24px);margin-top:clamp(26px,4vw,40px)}
@media (min-width:760px){.ways{grid-template-columns:1fr 1fr}}
.way{
  background:var(--card);border:1px solid var(--line);border-radius:calc(var(--r) * 1.2);
  padding:clamp(24px,3.4vw,38px);display:flex;flex-direction:column;
}
.way .wtag{font-family:var(--disp);font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--flame-d)}
.way h3,.way .wh{margin:.55em 0 0;font-family:var(--jp);font-weight:900;font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.55}
.way p{margin:.7em 0 0;font-size:.92rem;line-height:1.95;color:var(--ink2)}
.way .telbig{
  margin-top:auto;padding-top:1.1em;font-family:var(--disp);font-weight:900;font-size:clamp(1.9rem,4.4vw,2.8rem);letter-spacing:-.02em;line-height:1.1;color:var(--ink);
}
.way .telbig:hover{color:var(--flame-d)}
.way .hours{font-family:var(--jp);font-weight:500;font-size:.82rem;color:var(--mut);letter-spacing:.04em;line-height:1.85}
.way .hours .nw{white-space:nowrap}
.way .btn{margin-top:auto;align-self:flex-start}
.way .btn + .hours{margin-top:1em}

/* ---------- フォーム追加分 ---------- */
.field select{
  width:100%;margin-top:.7em;font-family:var(--jp);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line2);border-radius:calc(var(--r) * .6);
  padding:1em 2.6em 1em 1.1em;line-height:1.7;-webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--flame) 50%),linear-gradient(135deg,var(--flame) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  transition:border-color .2s,box-shadow .2s;
}
.field select:focus{outline:none;border-color:var(--flame);box-shadow:0 0 0 4px rgba(240,86,42,.14)}
.field .hint{margin:.5em 0 0;font-size:.78rem;line-height:1.8;color:var(--mut)}

/* ---------- 次のページへ ---------- */
.pagelinks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,16px)}
@media (min-width:760px){.pagelinks{grid-template-columns:repeat(4,1fr)}}
.plink{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(16px,2.2vw,24px);display:flex;flex-direction:column;gap:.35em;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.plink:hover{border-color:var(--flame);transform:translateY(-3px);box-shadow:0 18px 34px -26px rgba(43,27,17,.7)}
.plink .pw{
  font-family:var(--disp);font-weight:900;letter-spacing:-.02em;line-height:1;
  font-size:clamp(1.1rem,2.4vw,1.5rem);color:var(--flame);
}
.plink .pj{font-family:var(--jp);font-weight:700;font-size:.86rem;letter-spacing:.04em;color:var(--ink);white-space:nowrap}
.plink .pd{font-size:.78rem;line-height:1.8;color:var(--mut)}

/* ---------- index の写真＋文の分割セクション ---------- */
.split{display:grid;grid-template-columns:1fr;align-items:stretch}
.split-ph{
  min-height:clamp(240px,54vw,520px);background-size:cover;background-position:center;
}
.split-tx{
  background:var(--paper2);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(36px,6vw,84px) clamp(20px,5vw,72px);
}
.split-tx h2{
  margin:.35em 0 0;font-family:var(--jp);font-weight:900;line-height:1.24;letter-spacing:.005em;
  font-size:clamp(1.5rem,3.6vw,2.6rem);color:var(--ink);
}
.split-tx h2 .g{color:var(--flame-d)}
.split-tx .lead{margin-top:clamp(16px,2vw,24px)}
.split-tx .cta-row{margin-top:clamp(20px,2.6vw,32px)}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split-tx{padding-right:clamp(36px,6vw,96px)}
}

.telnote{
  margin:clamp(24px,3.4vw,36px) 0 0;font-size:clamp(.88rem,1.5vw,.98rem);line-height:2;color:var(--ink2);
}
.telnote a{
  font-family:var(--disp);font-weight:900;font-size:1.08em;letter-spacing:-.01em;color:var(--flame-d);
  border-bottom:1px solid rgba(198,60,18,.35);padding-bottom:.05em;transition:color .2s,border-color .2s;
}
.telnote a:hover{color:var(--flame-dd);border-bottom-color:var(--flame)}
.way .hours a{color:var(--flame-d);font-weight:700;border-bottom:1px solid rgba(198,60,18,.35)}

/* ---------- 注記 ---------- */
.note{
  margin-top:clamp(22px,3vw,34px);font-size:.82rem;line-height:1.95;color:var(--mut);
  border-top:1px solid var(--line);padding-top:clamp(16px,2vw,22px);max-width:52em;
}
.note b{color:var(--ink2);font-weight:700}