/* ============================================================
   米沢ヤクルト 共通フレーム（ヘッダー／フッター）
   承認済みトップデザイン（yakult-top / yakult-top-sp）から抽出。
   値は確定値をハードコード（PageTuneの調整対象外）。
   900px境界で PC / SP を切り替え（トップページと同じ思想）。
   このファイルがWPテーマ header.php / footer.php の正本になる。
   ============================================================ */

body {
  margin: 0;
  background: #eceef0;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  color: #333;
}
a { text-decoration: none; color: inherit; }
img { display: block; }

/* ---- PC/SP 切り替え ---- */
.yf-pc { display: block; }
.yf-sp { display: none; }
@media (max-width: 899.98px) {
  .yf-pc { display: none; }
  .yf-sp { display: block; }
}

/* ---- 編集不可の目印（ワークベンチ上でホバー時のみ表示） ---- */
.yf-frame { position: relative; }
body.pt-edit .yf-frame::after {
  content: '共通パーツ（テーマ側で管理・ここでは編集不可）';
  position: absolute; top: 6px; left: 6px; z-index: 9999;
  background: rgba(60, 64, 72, 0.82); color: #fff;
  font-size: 10px; letter-spacing: .08em;
  padding: 3px 8px; border-radius: 3px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
body.pt-edit .yf-frame:hover::after { opacity: 1; }

/* ============ PC ヘッダー ============ */
.yf-pc { --head-h: 128px; --logo-w: 164px; --icons-right: 50px; }
.yf-pc .site-header { background:#fff; padding: 26px 0 0; height: var(--head-h); position: relative; box-sizing: border-box; }
.yf-pc .site-header .logo { width: var(--logo-w); margin: 0 auto; }
.yf-pc .site-header .logo img { width: 100%; }
.yf-pc .header-icons { position: absolute; top: 30px; right: var(--icons-right); display: flex; gap: 26px; }
.yf-pc .hicon { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; color: #333; letter-spacing: .05em; cursor: pointer; padding: 0; margin: 0; line-height: 1.25; appearance: none; -webkit-appearance: none; }
.yf-pc .hicon svg { width: 26px; height: 26px; }
.yf-pc .search-field { width: 0; overflow: hidden; transition: width .35s ease; display: flex; align-items: center; height: 44px; }
.yf-pc .search-field.open { width: 220px; }
.yf-pc .search-field input { width: 208px; height: 32px; border: 1.5px solid #c8ccd0; border-radius: 999px; padding: 0 14px; font-size: 12.5px; font-family: inherit; outline: none; background: #fff; }
.yf-pc .search-field input:focus { border-color: #e60012; }



/* ============ 3Dナビ（nav3d.js用コンテナ）============
   ジオメトリはトップページと完全同一：
   #navwrap { width:1200px; margin:-28px auto 0; }（ヘッダーに28px重なる）
   PC表示はトップ同様 min-width:1280px 前提 */
@media (min-width: 900px) { body { min-width: 1280px; } }
.yf-pc .nav3d-band { background: #fff; padding: 0; }
.yf-pc #navwrap { width: 1200px; margin: -28px auto 0; position: relative; z-index: 5; aspect-ratio: 1200 / 56; border-radius: 15px; overflow: hidden; }  /* 角外の塗りに頼らず角丸で抜く */
.yf-pc #navwrap canvas { display: block; width: 100%; height: 100%; }
.yf-pc #nav-hits { position: absolute; inset: 0; display: flex; list-style: none; margin: 0; padding: 0; }
.yf-pc #nav-hits li { flex: 1; cursor: pointer; }

/* ============ PC フッター ============ */
.yf-pc.yf-footer { --footer-pad-t: 48px; --footer-pad-b: 10px; --bldg-w: 230px; --bldg-y: 10px;
  --fnav-fs: 12px; --fnav-gap: 35px; --fbottom-logo-h: 19px; --fline-w: 1px; --fline-c: #2c1376; }
.yf-pc footer { background: #fff; }
.yf-pc .footer-main { width: 1200px; margin: 0 auto; display: flex; align-items: flex-end; gap: 40px; padding: var(--footer-pad-t) 0 var(--footer-pad-b); }
.yf-pc .footer-main .bldg { width: var(--bldg-w); position: relative; top: var(--bldg-y); margin-top: 0; }
.yf-pc .footer-main .fright { flex: 1; padding-bottom: 4px; }
.yf-pc .footer-brand { display: flex; align-items: center; gap: 22px; margin-bottom: 20px; }
.yf-pc .footer-brand .smile { width: 92px; }
.yf-pc .footer-brand .tagline { width: 220px; }
.yf-pc .footer-nav { display: flex; align-items: center; gap: var(--fnav-gap); font-size: var(--fnav-fs); color: #444; font-weight: 600; }
.yf-pc .footer-nav a:hover { color: #e60012; }
.yf-pc .footer-nav svg { width: 20px; height: 20px; }
.yf-pc .footer-bottom { border-top: var(--fline-w) solid var(--fline-c); padding: 18px 0 26px; }
.yf-pc .footer-bottom-inner { width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 18px; font-size: 11px; color: #666; }
.yf-pc .footer-bottom-inner img { height: var(--fbottom-logo-h); width: auto; }
.yf-pc .footer-bottom-inner .copy { margin-left: auto; }

/* ============ SP ヘッダー（〜899px基準 / さらに〜640pxで上書き） ============ */
.yf-sp { --head-h: 64px; --logo-w: 118px; --icons-right: 14px;
  --menu-h: 44px; --menu-fs: 13px; --menu-item-h: 52px; --menu-item-fs: 14px;
  --menu-r: 30px; --menu-split: 30px; --hero-side: 18px; }
@media (max-width: 640px) {
  .yf-sp { --head-h: 82px; --logo-w: 142px; --icons-right: 22px;
    --menu-h: 35px; --menu-fs: 12px; --menu-item-h: 40px; --menu-item-fs: 13px;
    --menu-r: 16px; --menu-split: 16px; }
}
.yf-sp .site-header { background: #fff; height: var(--head-h); display: flex; align-items: center; padding: 0 var(--icons-right) 0 16px; position: relative; box-sizing: border-box; }
.yf-sp .site-header .logo { width: var(--logo-w); }
.yf-sp .site-header .logo img { width: 100%; }
.yf-sp .header-icons { margin-left: auto; display: flex; gap: 18px; }
.yf-sp .hicon { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 8.5px; color: #333; letter-spacing: .05em; cursor: pointer; background: none; border: none; font-family: inherit; padding: 0; margin: 0; line-height: 1.25; appearance: none; -webkit-appearance: none; }   /* a と button の行送り差を無くす */
.yf-sp .hicon svg { width: 22px; height: 22px; }
.yf-sp .search-bar { background: #fff; overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.yf-sp .search-bar.open { max-height: 56px; }
.yf-sp .search-bar .inner { padding: 8px 16px 12px; }
.yf-sp .search-bar input { width: 100%; height: 36px; border: 1.5px solid #c8ccd0; border-radius: 999px; padding: 0 16px; font-size: 16px; font-family: inherit; outline: none; background: #fff; box-sizing: border-box; }   /* 16px＝iOSのフォーカス時ズーム防止（2026-09-02） */
.yf-sp .search-bar input:focus { border-color: #e60012; }
.yf-sp .menu-band { background: #fff; padding-bottom: var(--menu-h); }   /* 下層：帯は白（薄グレー廃止）・MENUボタン高さぶんの余白をヒーローとの間に確保（2026-09-02） */
.yf-sp .menu-wrap { margin: 0 var(--hero-side); border-radius: var(--menu-r); overflow: hidden; position: relative; z-index: 5; }
.yf-sp .menu-bar { display: block; width: 100%; height: var(--menu-h); background: #BBC4CC; color: #fff; border: none; cursor: pointer; font-size: var(--menu-fs); font-weight: 700; letter-spacing: .35em; text-indent: .35em; font-family: inherit; }
.yf-sp .menu-bar::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 10px; margin-bottom: 2px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: transform .3s ease; vertical-align: middle; }
.yf-sp .menu-bar.open::after { transform: rotate(-135deg); margin-bottom: -4px; }
.yf-sp .menu-panel { overflow: hidden; max-height: 0; transition: max-height .4s ease; }
.yf-sp .menu-panel.open { max-height: calc(var(--menu-item-h) * 6 + 20px); }
.yf-sp .menu-panel a { display: flex; align-items: center; justify-content: center; height: var(--menu-item-h); color: #fff; font-weight: 700; font-size: var(--menu-item-fs); letter-spacing: .12em; position: relative; }
.yf-sp .menu-panel a::after { content: ''; position: absolute; right: 20px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 2px solid rgba(255,255,255,.85); border-bottom: 2px solid rgba(255,255,255,.85); transform: rotate(-45deg); }
.yf-sp .menu-panel a:active { filter: brightness(1.08); }
.yf-sp .menu-panel .m1 { background: #b58cc0; }
.yf-sp .menu-panel .m2 { background: #e6212a; }
.yf-sp .menu-panel .m3 { background: #ee8a4f; }
.yf-sp .menu-panel .m4 { background: #d6c319; }
.yf-sp .menu-panel .m5 { background: #8cbf6e; }
.yf-sp .menu-panel .m6 { background: #0e93c9; }

/* ============ SP フッター ============ */
.yf-sp.yf-footer { --footer-pad-t: 32px; --footer-pad-b: 20px; --bldg-w: 180px; --bldg-y: 0px;
  --footer-line-gap: 0px; --fnav-fs: 12.5px; --fnav-gap-x: 22px; --fnav-gap-y: 14px;
  --fbottom-logo-h: 16px; --fline-w: 1px; --fline-c: #2c1376; }
@media (max-width: 640px) {
  .yf-sp.yf-footer { --footer-pad-t: 56px; --bldg-w: 148px; --bldg-y: 12px;
    --footer-line-gap: 12px; --fbottom-logo-h: 14px; }
}
.yf-sp footer { background: #fff; }
.yf-sp .footer-links { padding: var(--footer-pad-t) 20px 0; display: flex; align-items: flex-start; gap: 12px; }   /* 両列とも上端揃え */
.yf-sp .footer-nav { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--fnav-gap-y) 0; font-size: var(--fnav-fs); color: #444; font-weight: 600; }   /* 1項目1行・左揃え */
.yf-sp .f-insta { align-self: flex-start; }   /* メニュー列と上端揃え */
.yf-sp .footer-nav a:active { color: #e60012; }
.yf-sp .f-insta svg { width: 20px; height: 20px; }
.yf-sp .footer-main { padding: 26px 20px var(--footer-line-gap); display: flex; align-items: flex-end; gap: 16px; }
.yf-sp .footer-main .bldg { width: var(--bldg-w); flex-shrink: 0; display: block; position: relative; top: var(--bldg-y); }
.yf-sp .footer-brand { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.yf-sp .footer-brand .smile { width: 76px; }
.yf-sp .footer-brand .tagline { width: 170px; max-width: 100%; }
.yf-sp .footer-bottom { border-top: var(--fline-w) solid var(--fline-c); padding: 16px 20px 24px; }
.yf-sp .footer-bottom-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 10.5px; color: #666; text-align: left; line-height: 1.6; }
.yf-sp .footer-bottom-inner img { height: var(--fbottom-logo-h); width: auto; }
.yf-sp .footer-bottom-inner .tel { white-space: nowrap; }

/* フッター2行目：カテゴリ系サブリンク */
.yf-pc .footer-nav-sub { margin-top: 10px; font-size: calc(var(--fnav-fs) - 1.5px); font-weight: 500; color: #888; gap: calc(var(--fnav-gap) * .8); }
.yf-pc .footer-nav-sub a:hover { color: #e60012; }
.yf-sp .footer-nav-sub { margin-top: 0; font-size: calc(var(--fnav-fs) - 1px); font-weight: 500; color: #888; }

/* 検索窓はform化済み：ブラウザ既定のmarginを消す */
form.search-field, form.inner { margin: 0; }

/* ---- フォーム共通（frame/forms.js） ---- */
.yy-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.yy-form-msg:empty { display: none; }
.yy-form-msg.err { font-weight: 700; }

/* スマホ専用の改行（全ページ共通・≤900pxで有効）。トンマナ：末尾数文字だけがこぼれる折り返しを避ける（2026-09-02） */
.sp-br { display: none; }
@media (max-width: 899.98px) { .sp-br { display: inline; } }
/* PC専用の改行（≤899.98pxで無効） */
.pc-br { display: inline; }
@media (max-width: 899.98px) { .pc-br { display: none; } }