@charset "UTF-8";

/* 全ページ共通トークン（shell.css は全ページが読み込む） */
:root{
  --site-max:1120px;
  /* 本文・UI は system ゴシック（一休.com のスタックを参考）。
     Windows で細い Yu Gothic を避けるため Yu Gothic Medium / BIZ UDPGothic / Meiryo を後段に */
  --font-sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","YuGothic","Yu Gothic","BIZ UDPGothic",Meiryo,sans-serif;
  /* 明朝はブランドロゴと最上位の見出し（TOPヒーロー・約束帯）だけ */
  --font-serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
}
/* 共通ヘッダ／フッタの文字もトークンに合わせる */
.common-site-header,.common-site-footer{font-family:var(--font-sans)}
.common-brand{font-family:var(--font-serif)}

/* Public-site header and footer shared by every Pattern 5 page. */
.common-site-header{
  position:sticky;
  z-index:50;
  top:0;
  color:#14233b;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid #d9d3c7;
  backdrop-filter:blur(16px);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.65;
}
.common-site-header *,.common-site-footer *{box-sizing:border-box}
/* コンテンツが短い画面でもフッタを最下部に固定 */
body.public-body{display:flex;flex-direction:column;min-height:100vh}
body.public-body>.common-site-footer{margin-top:auto}
.common-site-header a,.common-site-footer a{text-decoration:none}
.common-site-header button{font:inherit}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
/* 1段ヘッダ（一休.com・ぐるなび を参考）：ロゴ｜主ナビ｜アクション（検索アイコン＋会員） */
.common-header-main{
  position:relative;
  width:100%;
  min-height:58px;
  display:flex;
  align-items:center;
  gap:clamp(12px,1.6vw,28px);
}
.common-brand{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#14233b;
  font-family:var(--font-serif);
  font-size:20px;
  font-weight:700;
  line-height:1;
  letter-spacing:.04em;
  white-space:nowrap;
}
.common-brand i{display:block;width:3px;height:24px;background:#b08a43}
.common-brand strong{font:inherit}
.common-brand small{display:inline;color:#8f2634;font-size:.68em;line-height:1}
/* 明朝ロゴはゴシックのナビ文字より光学的に下がるため微調整して行を揃える */
.common-header-main .common-brand strong{transform:translateY(-2px)}
.common-global-nav{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:clamp(14px,1.6vw,26px);
  font-size:14px;
  font-weight:400;
  letter-spacing:normal;
  white-space:nowrap;
}
.common-global-nav{overflow:hidden}
.common-global-nav a{display:inline-flex;align-items:center;height:58px;color:#333;border-bottom:2px solid transparent}
.common-global-nav a:hover,.common-global-nav a:focus-visible{color:#8f2634;border-bottom-color:#b08a43}
.common-global-nav a[aria-current="page"]{color:#14233b;border-bottom-color:#b08a43}
.common-header-actions{flex:0 0 auto;display:flex;align-items:center;gap:2px;margin-left:auto}
.common-icon-link{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#333}
.common-icon-link svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.common-icon-link:hover,.common-icon-link:focus-visible{background:#f1ede4;outline:0;color:#8f2634}
.common-account-links{display:flex;align-items:center;margin-left:8px;font-size:14px}
.common-account-link{padding:6px clamp(6px,.8vw,10px);color:#333;white-space:nowrap}
/* 会員名が長くてもヘッダの他の要素と重ならないよう、はみ出す分は「…」にする */
.common-account-name{display:block;max-width:7em;overflow:hidden;text-overflow:ellipsis}
.common-account-link:hover,.common-account-link:focus-visible{color:#8f2634}
/* ログイン中の会員名メニュー（マイページ・投稿した口コミ・アカウント設定） */
.common-account-menu{position:relative}
.common-account-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:4px}
.common-account-menu summary::-webkit-details-marker{display:none}
.common-account-menu summary::after{content:"";flex:0 0 auto;width:6px;height:6px;margin:-3px 0 0 2px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.common-account-menu[open] summary::after{margin-top:3px;transform:rotate(-135deg)}
.common-account-dropdown{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:11em;padding:6px 0;background:#fff;border:1px solid #d9d3c7;border-radius:8px;box-shadow:0 12px 32px rgba(20,35,59,.14)}
.common-account-dropdown a{display:block;padding:10px 16px;color:#333;white-space:nowrap}
.common-account-dropdown a:hover,.common-account-dropdown a:focus-visible{background:#f7f3ea;color:#8f2634}
.common-account-links .common-account-link+.common-account-link{border-left:1px solid #d9d3c7}
.common-account-icon{display:none}
.common-menu-button{display:none;flex:0 0 auto;min-width:44px;min-height:44px;padding:0;color:#333;background:transparent;border:0;font-size:14px;font-weight:400}

.common-site-footer{
  display:grid;
  grid-template-columns:minmax(230px,1fr) minmax(420px,1.5fr) auto;
  align-items:start;
  gap:38px;
  padding-block:42px;
  color:#69707a;
  background:#f1eee7;
  border-top:1px solid #ded8cc;
  font-family:var(--font-sans);
  font-size:14px;
  line-height:1.7;
}
.common-footer-brand p{margin:12px 0 0;font-size:13px;line-height:1.7}
.common-footer-links{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:8px 28px;font-size:14px}
.common-footer-links a{width:max-content;border-bottom:1px solid transparent}
.common-footer-links a:hover,.common-footer-links a:focus-visible{color:#14233b;border-bottom-color:#b08a43}
.common-site-footer small{color:#69707a;font-size:12px}
body.public-body .common-footer-brand p{font-size:13px}
body.public-body .common-footer-links{font-size:14px}
body.public-body .common-site-footer small{font-size:12px}
body.public-body dialog .field>span,
body.public-body dialog .check,
body.public-body dialog input,
body.public-body dialog select,
body.public-body dialog textarea,
body.public-body dialog button{font-size:16px}

@media(max-width:1100px){
  body.public-body .common-footer-inner{grid-template-columns:minmax(0,1fr);gap:24px}
  .common-footer-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .common-footer-links a{width:auto}
}
/* ナビが横並びで窮屈になったらハンバーガーへ（1段ヘッダは横幅がタイト） */
@media(max-width:900px){
  .common-menu-button{display:block;position:relative;font-size:0;color:transparent;width:44px}
  .common-menu-button::before{content:"";position:absolute;left:11px;right:11px;top:50%;height:2px;margin-top:-1px;background:#333;box-shadow:0 -7px 0 #333,0 7px 0 #333;transition:box-shadow .15s,transform .15s}
  .common-menu-button[aria-expanded="true"]::before{box-shadow:none;transform:rotate(45deg)}
  .common-menu-button[aria-expanded="true"]::after{content:"";position:absolute;left:11px;right:11px;top:50%;height:2px;margin-top:-1px;background:#333;transform:rotate(-45deg)}
  .common-global-nav{
    position:absolute;
    top:100%;right:0;left:0;
    height:auto;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:8px max(16px,calc((100% - var(--site-max)) / 2));
    background:#fff;
    border-bottom:1px solid #d9d3c7;
    box-shadow:0 16px 40px rgba(20,35,59,.1);
    white-space:normal;
  }
  .common-global-nav.open,.common-global-nav.is-open{display:flex}
  .common-global-nav a{width:100%;height:auto;min-height:46px;border-bottom:1px solid #eee}
  .common-header-actions{order:2}
  .common-menu-button{order:3}
}
/* ログイン中のみ、スマホのメニュー内にマイページ・ログアウトを出す（PC は右上のメニューにある） */
.common-nav-mobile-only{display:none!important}
@media(max-width:760px){
  .common-header-main{min-height:54px;gap:8px}
  .common-brand{font-size:18px}
  .common-brand i{height:22px}
  /* スマホは会員登録/ログインを1つのアイコンに、お気に入り・履歴は隠す */
  .common-util-link,.common-account-links{display:none}
  .common-global-nav a.common-nav-mobile-only{display:flex!important}
  .common-account-icon{display:grid}
  .common-site-footer{grid-template-columns:1fr;gap:15px;padding:36px 22px}
  .common-footer-links{grid-template-columns:1fr 1fr;gap:10px 16px}
  .common-footer-links a{width:auto}
}

@media(max-width:390px){
  .common-brand{font-size:18px}
  .common-footer-links{grid-template-columns:1fr}
}

@media(max-width:480px){
  .common-site-footer .common-footer-links{grid-template-columns:1fr}
}

/* --- サイト全体の最大幅を固定して間延びを防ぐ（一休.comのPCレイアウト＝内容1000px前後・中央寄せを参考） --- */
/* ヘッダ・フッタの帯（背景・境界線）は全幅のまま、中身だけ固定幅で中央寄せ */
/* ヘッダ帯も全幅・中身は --site-max。左右パディングをフッタと同一式にして
   ブランドロゴの開始位置をフッタの「|」と揃える */
.common-header-main,
main.wide{max-width:none;width:100%;margin-inline:0;padding-inline:max(24px,calc((100% - var(--site-max)) / 2))}
/* フッタも帯は全幅・中身は --site-max 中央寄せ（ラッパー有無どちらでも）
   styles.css の `body.public-body > footer` を上回る詳細度で指定 */
.common-site-footer{padding-inline:max(24px,calc((100% - var(--site-max)) / 2))!important}
.common-site-footer:has(.common-footer-inner){display:block}
.common-footer-inner{max-width:var(--site-max);margin-inline:auto;width:100%;display:grid;grid-template-columns:minmax(230px,1fr) minmax(420px,1.5fr) auto;align-items:start;gap:38px}
/* TOPなど body.public-body を持たないページでも、幅1100px以下でフッタを1カラムに（固定幅3カラムのままだとページが790px幅に広がり、スマホで横に揺れる） */
@media(max-width:1100px){.common-footer-inner{grid-template-columns:minmax(0,1fr);gap:24px}}
html,body{overflow-x:clip}
/* main が .wide でない静的ページ（生産者一覧・履歴・お知らせ など）も
   内容をヘッダ／フッタと同じ --site-max・同じ左端に揃える。
   .about-page / .listing-page / .certification-page は全幅ヒーローを持つので
   下でヒーロー以外を --site-max に寄せる。.narrow は個別に調整。 */
body.public-body > main:not(.wide):not(.narrow):not(.about-page):not(.listing-page):not(.certification-page){
  max-width:var(--site-max);
  width:min(var(--site-max),calc(100% - 48px));
  margin-inline:auto;
}
/* グローバルヘッダ直下の余白を詰める（styles.css の main{padding:44px 0 90px} が広すぎる）。
   .wide（検索・詳細系）は search-filters.css で調整済み、ヒーロー先頭ページは 0。 */
body.public-body > main:not(.wide){padding-top:14px}
body.public-body > main.about-page,
body.public-body > main.listing-page{padding-top:0}
/* 全幅ヒーロー型ページ：main は全幅のまま、ヒーロー以外の直下要素を --site-max に */
body.public-body > main.listing-page,
body.public-body > main.certification-page{max-width:none;width:100%;margin-inline:0}
body.public-body > main.listing-page > :not(.listing-hero),
body.public-body > main.certification-page > :not(.cert-hero){
  max-width:var(--site-max);
  width:min(var(--site-max),calc(100% - 48px));
  margin-inline:auto;
}
/* 規約・プライバシー等の読み物は左端を揃えつつ本文幅を狭く保つ */
body.public-body > main.narrow{
  max-width:820px;
  width:min(820px,calc(100% - 48px));
  margin-left:max(24px,calc((100% - var(--site-max)) / 2));
  margin-right:auto;
}
@media(max-width:760px){
  main.wide{width:100%;padding-inline:15px}
  body.public-body > main:not(.wide):not(.about-page):not(.listing-page):not(.certification-page),
  body.public-body > main.listing-page > :not(.listing-hero),
  body.public-body > main.certification-page > :not(.cert-hero){width:min(var(--site-max),calc(100% - 30px));margin-inline:auto}
  body.public-body > main.narrow{margin-left:15px}
}

/* コンシューマ向け：スマホで横にぐにゅっと動かない／ページが勝手に左右へ引っ張られないようにする（縦スクロールと拡大は維持。管理画面は除く） */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body:not(.admin-body){overscroll-behavior-x:none;touch-action:pan-y pinch-zoom}