@charset "UTF-8";
/* =========================================================
   MARUNI COMMON (2026 renewal) — 全ページ共通のヘッダー／フッター

   header.php / footer.php を新デザインに差し替えたとき、スタイルは TOP でしか
   読み込んでいなかったため、TOP 以外では新ヘッダー・フッターが崩れていた。
   ここは top.scss から「ヘッダー・モバイルメニュー・フッター・トークン」だけを切り出したもので、
   全ページで styles.css の後に読み込む（functions.php: my_load_scripts()）。

   SOURCE FILE: このファイル（common.scss）を編集し、`npm run build:common` で
   common.css を生成する。common.css を直接編集しない（生成物）。

   方針
   - 旧 styles.css は無改変。要素セレクタ（header{} / footer{} / Bulma .footer{}）は
     詳細度と読み込み順で上書きする。
   - **ヘッダーは id（`#header`）でスコープする。** `#header` にすると、search.php /
     tag.php / attachment.php / author.php が本文の見出しに使っている `<header class="header">`
     にも当たり、それらが position:fixed の全幅オーバーレイになる。`id="header"` は header.php だけが出す。
   - top.scss の全体リセット（* / html / body / img / a / button）はここへ持ち込まない。
     必要な打ち消しは #header / .mobile-menu / footer.footer 配下にスコープする。
   ========================================================= */
/* =========================================================
   TOKENS（top.scss から移設。値は変更しない）
   ========================================================= */
:root {
  --f-sans-jp: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --f-serif-jp: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --f-sans-en: "Inter", system-ui, sans-serif;
  --f-serif-en: "Cormorant Garamond", "Times New Roman", serif;
  --f-body: var(--f-sans-jp);
  --f-display: var(--f-sans-en); /* english display */
  --f-display-jp: var(--f-sans-jp); /* japanese display */
  /* light palette: off-white / sumi / wood */
  --c-paper: #f5f2ec;
  --c-paper-2: #ece7df;
  --c-ink: #14110e;
  --c-ink-2: #36302a;
  --c-mute: #8c837a;
  --c-rule: #ddd5c8;
  --c-wood: #8a6740;
  --c-brown: #807873;
  --c-footer: #dad3ca;
  --c-logo: #3d3d3d;
  --c-card: #ffffff;
  --page-pad: clamp(28px, 8vw, 200px);
  --section-v: clamp(140px, 20vw, 360px);
  --col-gutter: clamp(18px, 2vw, 36px);
}

[data-theme=dark] {
  --c-paper: #100e0c;
  --c-paper-2: #181512;
  --c-ink: #f3ede2;
  --c-ink-2: #d8d0c3;
  --c-mute: #8a8176;
  --c-rule: #2c2723;
  --c-wood: #bb8c57;
  --c-card: #181512;
}

[data-theme=light][data-paper=white] {
  --c-paper: #ffffff;
  --c-paper-2: #f4f2ed;
  --c-rule: #e7e2d8;
}

[data-spacing=tight] {
  --section-v: clamp(48px, 6vw, 90px);
  --page-pad: clamp(22px, 4vw, 64px);
}

[data-spacing=generous] {
  --section-v: clamp(64px, 9vw, 140px);
  --page-pad: clamp(26px, 6vw, 120px);
}

[data-spacing=extreme] {
  --section-v: clamp(80px, 10vw, 190px);
  --page-pad: clamp(28px, 8vw, 200px);
}

[data-font=sans] {
  --f-body: var(--f-sans-jp);
  --f-display: var(--f-sans-en);
  --f-display-jp: var(--f-sans-jp);
}

[data-font=mixed] {
  --f-body: var(--f-sans-jp);
  --f-display: var(--f-serif-en);
  --f-display-jp: var(--f-serif-jp);
}

[data-font=serif] {
  --f-body: var(--f-serif-jp);
  --f-display: var(--f-serif-en);
  --f-display-jp: var(--f-serif-jp);
}

/* =========================================================
   旧 CSS の打ち消し（スコープ付きリセット）

   TOP では top.css の全体リセットが効いているので二重指定になるだけで結果は変わらない。
   TOP 以外では styles.css（Bulma 由来）の a{color:blue} / button / ul / 見出し が
   新ヘッダー・フッターに当たるため、ここで打ち消す。
   ========================================================= */
#header,
.mobile-menu,
footer.footer {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

#header a,
.mobile-menu a,
footer.footer a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: none;
}

/* styles.css の `a:hover { color: …; opacity: .5 }` を打ち消す。
   opacity を明示する必要がある個別要素（.sp-icons a / .mm-social a / .social a 等）は
   より高い詳細度の各ルールが勝つので、TOP の見え方は変わらない */
#header a:hover,
.mobile-menu a:hover,
footer.footer a:hover {
  color: inherit;
  opacity: 1;
}

#header img,
.mobile-menu img,
footer.footer img {
  max-width: 100%;
  display: block;
}

#header svg,
.mobile-menu svg,
footer.footer svg {
  display: block;
}

#header button,
.mobile-menu button,
footer.footer button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

#header ul,
.mobile-menu ul,
footer.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#header li,
.mobile-menu li,
footer.footer li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#header p,
.mobile-menu p,
footer.footer p {
  margin: 0;
  padding: 0;
}

#header h1, #header h2, #header h3, #header h4, #header h5, #header h6,
.mobile-menu h1, .mobile-menu h2, .mobile-menu h3, .mobile-menu h4, .mobile-menu h5, .mobile-menu h6,
footer.footer h1, footer.footer h2, footer.footer h3, footer.footer h4, footer.footer h5, footer.footer h6 {
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* =========================================================
   HEADER（top.scss から移設）
   ========================================================= */
#header,
.mobile-menu {
  --header-pad: clamp(20px, 5vw, 100px);
}

#header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  color: #fff;
  transition: color 0.4s ease;
  /* 旧 styles.css の `header { padding: 20px 0; margin: auto; background-color: white;
     transform: translate3d(0,0,0); }` を打ち消す（styles.css は無改変の方針） */
  padding: 0;
  margin: 0;
  background: none;
  transform: none;
}

#header.solid {
  color: var(--c-ink);
}

/* 旧 app.js が `<header>` に付ける状態クラス（menu-fixed / menu-show / menu-hide）を無効化する。
   app.js 側にもガードを入れるが、反映は中本本店の合意待ちのため CSS 側でも打ち消しておく */
#header.menu-fixed,
#header.menu-show,
#header.menu-hide,
#header._state-open {
  transform: none;
  max-width: none;
  padding: 0;
  height: auto;
  border-bottom: 0;
}

/* ログイン中はWP管理バー（32px / モバイル46px）の分だけ下げ、ヘッダー上段・モバイルメニューが隠れないようにする */
.admin-bar #header,
.admin-bar .mobile-menu {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar #header,
  .admin-bar .mobile-menu {
    top: 46px;
  }
}
#header .utility {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  padding: 9px var(--header-pad);
  font-family: var(--f-display);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  transition: border-color 0.4s ease, background 0.4s ease;
}

#header.solid .utility {
  border-bottom-color: var(--c-rule);
}

#header .utility a {
  opacity: 0.85;
}

#header .utility a:hover {
  opacity: 1;
}

#header .bar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 16px var(--header-pad);
  transition: padding 0.4s ease, background 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}

#header.solid .bar {
  background: color-mix(in oklab, var(--c-paper) 92%, transparent);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--c-rule);
  padding-top: 12px;
  padding-bottom: 12px;
}

#header.solid .utility {
  background: color-mix(in oklab, var(--c-paper) 92%, transparent);
  backdrop-filter: blur(16px);
}

#header .bar .nav-main {
  display: flex;
  gap: 34px;
  align-items: center;
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.1em;
}

#header .bar .nav-utility {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: flex-end;
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: 0.08em;
}

#header .bar .nav-main a, #header .bar .nav-utility a {
  opacity: 0.9;
}

#header .bar .nav-main a:hover, #header .bar .nav-utility a:hover {
  opacity: 1;
}

#header .logo-mark {
  display: grid;
  place-items: center;
}

#header .logo-mark svg path {
  fill: currentColor;
}

#header.solid .logo-mark svg path {
  fill: var(--c-logo);
}

#header .news-ico {
  position: relative;
  display: inline-flex;
}

/* 新着情報の未読バッジ。意匠は FIX デザイン（shopify-search）の .nav-badge /
   .news-ico .count に準拠。件数は出さず丸ポチ（.dot）だけを使うため、数字用のサイズは
   .dot 側で上書きされる。デザインにある白い縁取り（border: 1.5px solid var(--c-paper)）は
   不要との指示で外している（2026-09-14）。
   ドロワー（.mobile-menu）にも同じバッジが出るので、ヘッダーと同じ形で並べる。 */
#header .nav-badge,
#header .news-ico .count,
.mobile-menu .nav-badge {
  position: absolute;
  top: -7px;
  right: -9px;
  background: var(--c-wood);
  color: #fff;
  font-family: var(--f-display);
  font-size: 9px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  letter-spacing: 0;
}

#header .has-badge,
.mobile-menu .has-badge {
  position: relative;
  display: inline-flex;
}

#header .nav-badge.dot,
#header .news-ico .count.dot,
.mobile-menu .nav-badge.dot {
  width: 7px;
  height: 7px;
  font-size: 0;
}

#header .has-badge .nav-badge.dot,
.mobile-menu .has-badge .nav-badge.dot {
  top: -3px;
  right: -12px;
}

#header .news-ico .count.dot {
  top: -3px;
  right: -3px;
}

#header .lang {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.14em;
}

/* SP header icons (新着情報 / EC / hamburger) */
#header .sp-icons {
  display: none;
}

/* Hamburger + mobile menu (hidden on desktop) */
#header .hamburger {
  display: none;
  width: 22px;
  height: 16px;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

#header .hamburger span {
  display: block;
  height: 1.4px;
  width: 100%;
  background: currentColor;
  transition: transform 0.35s ease, opacity 0.25s ease;
}

#header .hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

#header .hamburger.open span:nth-child(2) {
  opacity: 0;
}

#header .hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 70;
  width: min(88vw, 420px);
  background: var(--c-paper);
  color: var(--c-ink);
  padding: 14px var(--header-pad) 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  visibility: hidden;
  transform: translateX(100%);
  box-shadow: -30px 0 80px -30px rgba(0, 0, 0, 0.4);
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1), visibility 0.45s;
}

.mobile-menu.open {
  visibility: visible;
  transform: translateX(0);
}

.mm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 69;
  background: rgba(20, 17, 14, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}

.mm-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.mm-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 21px;
  margin-bottom: 40px;
}

.mm-head svg {
  width: 104px;
  height: 20px;
}

.mm-close {
  width: 22px;
  height: 22px;
  margin-right: -2px;
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--c-ink);
  opacity: 0.85;
}

.mm-close span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.4px;
  background: currentColor;
}

.mm-close span:nth-child(1) {
  transform: rotate(45deg);
}

.mm-close span:nth-child(2) {
  transform: rotate(-45deg);
}

.mm-close:hover {
  opacity: 1;
}

.mm-primary {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-rule);
}

.mm-primary a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--f-display-jp);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 17px 0;
  border-bottom: 1px solid var(--c-rule);
}

.mm-primary a .en {
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-mute);
  font-weight: 400;
}

.mm-secondary {
  margin-top: 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}

.mm-secondary a {
  font-family: var(--f-display-jp);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--c-ink-2);
}

/* ドロワーは grid のため、バッジ付きリンクだけ幅を文字幅に詰めてドットの位置を合わせる */
.mm-secondary .has-badge {
  width: fit-content;
  justify-self: start;
}

.mm-secondary .has-badge .nav-badge.dot {
  top: -4px;
  right: -18px;
}

.mm-social {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--c-rule);
  display: flex;
  gap: 26px;
  justify-content: center;
}

.mm-social a {
  color: var(--c-ink);
  opacity: 0.65;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}

.mm-social a:hover {
  opacity: 1;
}

/* =========================================================
   FOOTER（top.scss から移設）
   ========================================================= */
/* margin-top:auto は旧 styles.css の `footer { margin-top: auto }` と同じ意図で、
   #wrap（display:flex / column）の中でフッターを最下部に貼り付ける。
   flex コンテナの外（TOP など）では 0 に解決されるので影響しない */
footer.footer {
  background: var(--c-footer);
  color: var(--c-ink);
  padding: clamp(90px, 10vw, 160px) var(--page-pad) 48px;
  margin: auto 0 0;
}

[data-theme=dark] footer.footer {
  background: #241d16;
  color: #f1ebe0;
}

footer.footer .cols {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px 32px;
}

footer.footer .col h5 {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-bottom: 22px;
  font-weight: 500;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(20, 17, 14, 0.16);
}

footer.footer .col ul {
  list-style: none;
}

footer.footer .col li {
  font-size: 12px;
  line-height: 2.3;
  opacity: 0.72;
}

footer.footer .col li:hover {
  opacity: 1;
}

footer.footer .col .sub-h {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 500;
  margin: 26px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(20, 17, 14, 0.16);
}

/* SP アコーディオンの開閉ボタン。PC では出さない。
   出典: store--maruni-wood-industry origin/develop ec94f34 assets/maruni-footer.css L31 */
footer.footer .col .col-toggle {
  display: none;
}

footer.footer .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: clamp(64px, 7vw, 110px);
  padding-top: 40px;
  border-top: 1px solid rgba(20, 17, 14, 0.14);
}

footer.footer .bottom .legal {
  display: flex;
  gap: 28px;
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

footer.footer .bottom .social {
  display: flex;
  gap: 18px;
}

footer.footer .bottom .social a {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--c-ink);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

footer.footer .bottom .social a:hover {
  opacity: 1;
}

footer.footer .bottom .social svg {
  display: block;
}

footer.footer .bottom .flogo svg path {
  fill: var(--c-logo);
}

[data-theme=dark] footer.footer .col h5, [data-theme=dark] footer.footer .col .sub-h {
  border-bottom-color: rgba(241, 235, 224, 0.2);
}

[data-theme=dark] footer.footer .bottom {
  border-top-color: rgba(241, 235, 224, 0.18);
}

[data-theme=dark] footer.footer .bottom .social a {
  color: #f1ebe0;
}

[data-theme=dark] footer.footer .bottom .flogo svg path {
  fill: #f1ebe0;
}

/* =========================================================
   TOP 以外のページ向け調整

   ヘッダーは position:fixed なので、本文をヘッダーの高さ分だけ下げる。
   --maruni-header-h は js/common.js が実測値で上書きする（管理バー表示や
   フォント読み込み後のズレを吸収するため）。JS 無効時は下のフォールバック値で動く。
   #wrap（旧テンプレのラッパ）は min-height:100vh なので、同じ分だけ引いて
   短いページに余計なスクロールが出ないようにする。
   ========================================================= */
body.maruni-fixed-header {
  padding-top: var(--maruni-header-h, 88px);
}

body.maruni-fixed-header #wrap {
  min-height: calc(100vh - var(--maruni-header-h, 88px));
}

@media (max-width: 760px) {
  body.maruni-fixed-header {
    padding-top: var(--maruni-header-h, 50px);
  }
  body.maruni-fixed-header #wrap {
    min-height: calc(100vh - var(--maruni-header-h, 50px));
  }
}
/* =========================================================
   RESPONSIVE（top.scss から移設）
   ========================================================= */
@media (max-width: 760px) {
  footer.footer .cols {
    grid-template-columns: repeat(2, 1fr);
  }
  #header .utility {
    gap: 16px;
  }
}
/* ---- Smartphone (SP) ---- */
@media (max-width: 760px) {
  /* Header: logo left / icons + hamburger right */
  #header .utility {
    display: none;
  }
  #header .bar {
    grid-template-columns: auto 1fr;
    padding: 14px var(--header-pad);
    align-items: center;
  }
  #header .bar .nav-utility {
    display: none;
  }
  #header .sp-icons {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-self: end;
  }
  #header .sp-icons a {
    display: inline-flex;
    opacity: 0.9;
  }
  /* SP はアイコンが小さいぶんドットを内側へ寄せる */
  #header .sp-icons .news-ico .count.dot {
    top: -2px;
    right: -2px;
  }
  #header .hamburger {
    display: flex;
  }
  #header.solid .bar {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  #header .logo-mark svg {
    width: 104px;
    height: 20px;
  }
  /* Footer: compact accordion + centered identity */
  footer.footer {
    padding-top: 56px;
    padding-bottom: 32px;
  }
  footer.footer .cols {
    grid-template-columns: 1fr;
    gap: 0;
  }
  footer.footer .col h5, footer.footer .col .sub-h {
    margin: 0;
    padding: 16px 0;
    border-bottom: 1px solid rgba(20, 17, 14, 0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
  }
  /* 見出しはリンクなので、開閉のタップ領域は右端のボタンに分ける。「＋」もボタン側に持たせる。
     見出し行そのものを押しても開閉しない（＝見出しリンクは SP でも遷移する）。
     ボタンの見た目・当たり判定は store--maruni-wood-industry origin/develop ec94f34 の
     assets/maruni-footer.css L47-L52 に合わせている（開閉の単位だけ下のとおり異なる）。 */
  footer.footer .col .col-toggle {
    display: block;
    width: 32px;
    height: 32px;
    margin: -8px -8px -8px 0;
    flex: 0 0 auto;
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
    position: relative;
  }
  footer.footer .col .col-toggle::after {
    content: "+";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 300;
    font-size: 15px;
    opacity: 0.6;
    transition: transform 0.3s ease;
  }
  footer.footer .col h5.open .col-toggle::after,
  footer.footer .col .sub-h.open .col-toggle::after {
    transform: rotate(45deg);
  }
  /* 開閉は見出し単位。状態クラスは見出し（h5 / .sub-h）に付き、その直後の ul だけが開く。
     カラム 5（家具のリフォーム＋店舗情報）のように 1 カラムに見出しが 2 つあっても、
     押した方だけが開く。
     見出しの直後にない ul（＝開くボタンが無い）は畳まないので、開く手段が無くなることはない。 */
  footer.footer .col h5 + ul,
  footer.footer .col .sub-h + ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }
  footer.footer .col h5.open + ul,
  footer.footer .col .sub-h.open + ul {
    max-height: 400px;
    padding: 10px 0 16px;
  }
  footer.footer .col li {
    line-height: 2.4;
  }
  footer.footer .bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
    margin-top: 40px;
    padding-top: 36px;
  }
  footer.footer .bottom .flogo {
    order: -1;
  }
  footer.footer .bottom .legal {
    order: 2;
  }
  footer.footer .bottom .flogo svg {
    width: 132px;
    height: 26px;
  }
  footer.footer .bottom .social {
    gap: 24px;
  }
  footer.footer .bottom .legal {
    flex-direction: column;
    gap: 10px;
    align-items: center;
    font-size: 10px;
  }
}
/* =========================================================
   PRINT

   print.css は旧ヘッダーだけを想定していて、固定解除が `header.menu-fixed` にしか効かない。
   新ヘッダーは position:fixed のまま印刷され、本文の padding-top も残って先頭に空きが出る。
   旧ヘッダーと同じく通常フローで流す。print.css は無改変の方針なのでここで打ち消す。
   ========================================================= */
@media print {
  #header {
    position: static;
  }
  body.maruni-fixed-header {
    padding-top: 0;
  }
  body.maruni-fixed-header #wrap {
    min-height: 0;
  }
  /* 画面外に隠してあるだけの固定要素は印刷対象から外す */
  .mobile-menu,
  .mm-backdrop {
    display: none;
  }
}

/*# sourceMappingURL=common.css.map */