@charset "UTF-8";

/* ==========================================================================
   共通スタイル（全ページ共通：リセット・タイポグラフィ・ボタン／リンク・
   ヘッダー／グローバルナビ／ハンバーガーメニュー／モバイルメニュー・
   共通セクション・フッター）
   ========================================================================== */

:root {
  --ink: #2b2724;
  --sub: #6b625a;
  --line: #ddd4c8;
  --bg: #faf7f2;
  --accent: #7a3b2e;
  --panel: #ffffff;
  --panel-alt: #f0ede9;
  --brand-navy: #152238;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Source Sans 3", "Hiragino Sans", "Yu Gothic", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.9;
}
/* ラッパーに横はみ出し防止を設定 */
.site-wrapper {
  width: 100%;
  overflow: hidden; /* これで画面外へのはみ出しをカットできます */
}
h1, h2, h3, h4 {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  letter-spacing: 0.04em;
  margin: 0;
}
a { color: inherit; text-decoration: none;}
img, .placeholder { display: block; }
img { max-width: 100%; }

.label-caps {
  font-family: "Hanken Grotesk", "Hiragino Sans", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.shadow{
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.05));
}

/* プレースホルダー共通（実写真が未支給の枠） */
.placeholder {
  background: linear-gradient(155deg, #e7e2d9 0%, #dcd5c8 55%, #d3cabb 100%);
  color: var(--sub);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-align: center;
}

/* 共通ボタン・リンク */
.btn-outline {
  display: inline-block;
  border: none;
  border-radius: 3px;
  padding: 15px 38px;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: #3e3a39;
  transition: background 0.35s cubic-bezier(0.4,0,0.2,1);
}
.btn-outline:hover {
  background: var(--accent);
  color: #fff;
}
.link-underline, .link-underline.white {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.link-underline.white{
  color: var(--panel);
}
.link-underline::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--ink);
  transition: width 0.3s ease, background 0.3s ease;
}
.link-underline.white::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--panel);
  transition: width 0.3s ease, background 0.3s ease;
}
.link-underline:hover {
  color: var(--accent);
}
.link-underline:hover::before {
  width: 64px;
  background: var(--accent);
}
.link-underline.white:hover {
  color: var(--panel);
}
.link-underline.white:hover::before {
  width: 64px;
  background: var(--panel);
}

/* ヘッダー（構造・スクロール時の黒ガラス状態は共通。
   非スクロール時の既定背景はページ種別ごとに index.css / lower.css で指定） */
header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 24px 40px;
  color: #fff;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease, padding 0.4s ease, color 0.4s ease;
}
header.site-header.is-solid {
  background: rgba(10, 9, 8, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  padding: 16px 40px;
}
header.site-header .brand-group--mobile {
  align-items: baseline;
  gap: 14px;
  margin-right: auto;
}
header.site-header .brand-group--mobile .brand-logo {
  display: block;
  width: auto;
  filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,0.35));
}
nav.global-nav ul {
  list-style: none;
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
}
/* ハンバーガーメニュー（デフォルト非表示・狭幅時のみ表示） */
nav.global-nav .nav-toggle {
  position: relative;
  z-index: 46;
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 24px;
  padding: 8px;
  margin: -8px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle-bar {
  position: absolute;
  left: 50%;
  width: 30px;
  height: 1px;
  background: #fff;
  transform: translateX(-50%);
  transition: top 0.35s cubic-bezier(0.4,0,0.2,1), transform 0.35s cubic-bezier(0.4,0,0.2,1),
    opacity 0.35s ease, background-color 0.35s ease;
}
.nav-toggle-bar:nth-child(1) { top: calc(50% - 5px); }
.nav-toggle-bar:nth-child(2) { top: 50%; }
.nav-toggle-bar:nth-child(3) { top: calc(50% + 5px); }
nav.global-nav.is-open .nav-toggle-bar { background: #2b2724; }
nav.global-nav.is-open .nav-toggle-bar:nth-child(1) {
  top: 50%;
  transform: translateX(-50%) rotate(45deg);
}
nav.global-nav.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
nav.global-nav.is-open .nav-toggle-bar:nth-child(3) {
  top: 50%;
  transform: translateX(-50%) rotate(-45deg);
}
nav.global-nav a {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  position: relative;
  transition: border-color 0.3s ease, opacity 0.3s ease;
}
nav.global-nav a::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0; /* 左端を固定 */
  width: 0; /* 最初は幅ゼロ */
  height: 1px; /* 下線の太さ */
  background-color: var(--panel); /* 下線の色（適宜変更してください） */
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 伸びるアニメーション設定 */
}
nav.global-nav a.nav-cta::after {
  display: none;
}
nav.global-nav a:hover::after{
  width: 100%;
}
header.site-header.is-solid nav.global-nav a {
  text-shadow: none;
}
/* nav.global-nav a:hover { */
  /* border-color: currentColor; */
  /* opacity: 0.85; */
/* } */
nav.global-nav a.nav-current {
  border-color: currentColor;
  opacity: 0.75;
}
/* ヘッダーCTA：お問い合わせのみ強調表示 */
nav.global-nav a.nav-cta {
  padding: 10px 22px;
  border: 1px solid rgba(255,255,255,0.75);
  text-shadow: none;
  transition: background 0.35s cubic-bezier(0.4,0,0.2,1), border-color 0.35s cubic-bezier(0.4,0,0.2,1),
    color 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
}
nav.global-nav a.nav-cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  opacity: 1;
}
header.site-header.is-solid nav.global-nav a.nav-cta {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
header.site-header.is-solid nav.global-nav a.nav-cta:hover {
  background: transparent;
  border-color: #ffb4a5;
  color: #ffb4a5;
  opacity: 1;
}

/* ハンバーガーメニュー：開いたときのフルスクリーンパネル
   （開閉の状態切り替えは、ハンバーガー自体が現れる860px以下のメディアクエリ内で行う。
   これにより、開いたまま画面幅が860px以上に広がった場合はデフォルト状態＝非表示に戻る） */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  max-width: 100vw;
  z-index: 45;
  overflow-y: auto;
  color: var(--ink);
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.55s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease,
    visibility 0s linear 0.55s;
}
.mobile-menu-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.mobile-menu-inner {
  width: 258px;
  margin: 0 auto;
  padding: 90px 0 49px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mobile-menu-groups {
  display: flex;
  gap: 40px;
  margin-bottom: 30px;
}
.mobile-menu-group ul {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mobile-menu-group a {
  font-size: 16px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
}
a.online_store {
  display: block;
  font-size: 16px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 16px;
}
.mobile-menu a:hover { color: var(--accent); }
.mobile-menu a.mobile-menu-cta { color: var(--panel); }
.mobile-menu-divider {
  width: 100%;
  height: 0;
  margin-bottom: 30px;
  border-top: 1px dashed var(--ink);
}
.mobile-menu-contact { margin-bottom: 30px; }
.mobile-menu-contact p {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: var(--ink);
}
.mobile-menu-contact p:first-of-type { margin-top: 30px; }
.mobile-menu-sns {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 30px;
}
.mobile-menu-sns img { display: block; }
.mobile-menu-sns img:hover{
  filter: invert(25%) sepia(35%) saturate(1600%) hue-rotate(330deg) brightness(85%) contrast(90%);
}
.mobile-menu-cta {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 16px;
  background: #3e3a39;
  border-radius: 3px;
  color: #fff;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s ease;
}
.mobile-menu-cta:hover{
  background-color: var(--accent);
}

/* 共通セクション */
section {
  padding: 96px 24px;
  max-width: 1120px;
  margin: 0 auto;
}
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal.is-active {
  opacity: 1;
  transform: translateY(0);
}
section .section-head {
  text-align: center;
  margin-bottom: 48px;
}
section .section-head .label-caps {
  display: block;
  margin-bottom: 12px;
}
section .section-head h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 22px;
  font-size: clamp(1.5rem, 3vw, 2rem);
}
section .section-head h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 44px;
  height: 2px;
  background: var(--accent);
}
section .section-head p {
  color: var(--sub);
  font-size: 0.85rem;
  margin: 20px 0 0;
}
section.alt-bg {
  background: var(--panel-alt);
  max-width: none;
}
section.alt-bg > * {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
.section-note {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px dashed var(--line);
  font-size: 0.78rem;
  color: var(--sub);
}
.section-foot { text-align: center; }
.section-foot-link {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

#gt_float_wrapper{
    top: 90px !important;
}
.gt_float_switcher .gt-selected .gt-current-lang {
    padding: 5px 10px !important;
}
@media (max-width: 640px) {
  #gt_float_wrapper {
    top: 70px !important;
    right: 0 !important;
  }
  .gt_float_switcher .gt-selected .gt-current-lang {
    font-size: 14px;
  }
}

/* フッター */
footer.site-footer {
  background: var(--ink);
  color: rgba(250,247,242,0.7);
  padding: 96px 40px 24px;
}
.footer-grid {
  max-width: 1120px;
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer-grid .footer-logo {
  display: block;
  height: 34px;
  width: auto;
  margin-bottom: 16px;
  filter: brightness(0) invert(1);
}
.footer-grid .brand-col p { font-size: 0.85rem; }
.footer-social {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.footer-social a {
  display: flex;
  align-items: center;
  transition: opacity 0.3s ease;
}
.footer-social a:hover {
  opacity: 0.7;
}
.footer-social img {
  height: 20px;
  width: auto;
  display: block;
}
.footer-grid h5 {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250,247,242,0.45);
  margin: 0 0 20px;
}
.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-grid li { margin-bottom: 12px; }
.footer-grid a {
  color: rgba(250,247,242,0.7);
  text-decoration: none;
  font-size: 0.85rem;
  display: inline-block;
  transition: color 0.3s ease, transform 0.3s ease;
}
.footer-grid a:hover {
  color: #ffb4a5;
  transform: translateX(4px);
}
.footer-contact p {
  margin: 4px 0;
  font-size: 0.8rem;
}
/* 認定・受賞ロゴ列 */
.footer-badges {
  max-width: 1120px;
  margin: 0 auto 40px;
  display: flex;
  align-items: center;
  gap: 20px;
  /* padding-top: 32px; */
  /* border-top: 1px solid rgba(250,247,242,0.15); */
}
.footer-badge {
  flex-shrink: 0;
  height: 70px;
  width: auto;
  display: block;
}
.footer-badge.s_h {
  flex-shrink: 0;
  height: 70px;
  width: auto;
  display: block;
  background-color: #ffffff;
  padding: 5px;
}
.footer-bottom {
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
  font-size: 0.72rem;
  color: rgba(250,247,242,0.4);
  border-top: 1px solid rgba(250,247,242,0.15);
  padding-top: 24px;
}
/* 通販サイトバナー */
.sale-banner {
  position: fixed;
  right: 0;
  bottom: 10px;
  z-index: 40;
  width: 250px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s, box-shadow 0.5s ease;
}
.sale-banner.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.5s ease;
}
.sale-banner.is-visible:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.2);
}
.sale-banner img { display: block; width: 100%; height: auto; transition: opacity 0.5s ease; }
.sale-banner .sp { display: none; }
.sale-banner.is-visible:hover img { opacity: 0.92; }

/* @media (max-width: 1000px) { */
  /* nav.global-nav a { */
    /* font-size: 14px; */
  /* } */
/* } */
@media (max-width: 1100px) {
  header.site-header { padding: 18px 20px; justify-content: space-between; }
  header.site-header.is-solid { padding: 14px 20px; }
  nav.global-nav .nav-toggle { display: flex; }
  nav.global-nav ul { display: none; }
  header.site-header.menu-open,
  header.site-header.is-solid.menu-open,
  body.has-news-hero header.site-header.menu-open
   {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }
  header.site-header.menu-open .brand-group--mobile { visibility: hidden; }
  header.site-header.menu-open ~ .mobile-menu {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.55s cubic-bezier(0.16,1,0.3,1), opacity 0.45s ease;
  }
  section { padding: 50px 20px; }
  footer.site-footer {
    padding: 50px 40px 24px;
  }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-badges { flex-wrap: wrap; }
  .reveal { width: 100%; }
}

/* 通販サイトバナー（SP：画面下部に幅100%で配置。bnr_sp.jpgは750x150＝アスペクト比5:1のため
   高さはwidthの20%＝20vwで正確に一致する） */
@media (max-width: 640px) {
  .sale-banner {
    right: 0;
    top: auto !important;
    bottom: 0 !important;
    left: 0;
    width: 100%;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
  }
  .sale-banner .pc { display: none; }
  .sale-banner .sp { display: block; }
  /* バナー分の高さを確保し、フッター末尾がバナーに隠れないようにする */
  footer.site-footer {
    padding-bottom: calc(24px + 20vw);
  }
}

/* レスポンシブ: フッター (max-width: 400px) */
@media (max-width: 400px) {
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  /* バッジ画像4点（幅76/48/37/90px）がgap20pxのflexで2個ずつ2段に折り返すよう、
     3個目が収まらない幅に制限する（2個分の最大幅147px超・3個分の最小幅201px未満） */
  .footer-grid h5{ margin-bottom: 10px;}
  .footer-grid li{ margin-bottom: 5px;}
  .footer-badges { max-width: 172px; margin-left: 0;}
}