/*
Theme Name: mij
Author: loungeAG
Description: MIJ front + features
Version: 1.0
*/

/* =========================
   Reset / Base
   ========================= */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:root {
  --text: #1A1A1A;
  --muted: #666;
  --line: #eee;
  --bg: #fff;
  --accent: #C1272D;
  --white: #fff;
  --black: #1A1A1A;
  --red: #C1272D;
  --gold: #D4AF37;
  --light-gray: #F8F8F8;
  --text-gray: #666;
  --carousel-gap: 24px;
  --carousel-peek: 64px;
  --bm-bg: #f7f6ee;
  --bm-border: #e7e2d6;
  --bm-sep: #e6e3d6;
  --bm-text: #333;
  --bm-gap: 28px;
  --bm-pad-y: 10px;
  --bm-pad-x: 16px;
  --header-h: 76px;
  --header-h-sm: 64px;
  --header-border: 1px;
  --bigmenu-h: 72px;
  --bm-bg: #ffffff;
  --bm-border: #e7e2d6;
  --bm-sep: #e6e3d6;
  --bm-text: #333;
  --bm-gap: 28px;
  --bm-pad-y: 10px;
  --bm-pad-x: 16px;
}

body {
  font-family: ryo-gothic-plusn, "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.7;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================
   Header / Global Navigation (scoped)
   ========================= */
.logo {
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  font-size: 1.4rem
}

.logo span {
  color: var(--red)
}

/* =======================================================
   Header / Global Navigation（site-nav）— 完全版
   - 固定ヘッダー（blur, 下線）
   - 中央にメニュー（WPの出力: .menu / .nav-links どちらでもOK）
   - 言語切替
   - スクロール時に縮む .scrolled
   - bigmenu との重なり解消
   ======================================================= */


@media (max-width: 960px) {
  :root {
    --header-h: 64px;
    --header-h-sm: 56px;
    --bigmenu-h: 60px;
    --bm-gap: 22px;
  }
}

/* レスポンシブ */
@media (max-width:1200px) {
  :root {
    --carousel-peek: 48px;
  }
}

@media (max-width:900px) {
  :root {
    --carousel-peek: 24px;
    --carousel-gap: 16px;
  }
}

@media (max-width:640px) {
  :root {
    --carousel-peek: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track {
    transition: none;
  }
}

/* --- 固定ヘッダー本体 --- */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 1100;
  display: flex;
  justify-content: space-between;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 0 5%;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #eee;
  transition: height .25s ease, box-shadow .25s ease, background .25s ease;
}

/* スクロール時の圧縮（JSで .scrolled を付与） */
.site-nav.scrolled {
  height: 64px;
  box-shadow: 0 2px 18px rgba(0, 0, 0, .06);
}

.site-nav.scrolled+.bigmenu {
  box-shadow: 0 2px 18px rgba(0, 0, 0, .06);
}

/* ロゴ */
.site-nav .logo {
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  color: #111;
  text-decoration: none;
  display: inline-block;
}

/* --- メニュー（WPの出力をフラットに横並び化） --- */
.site-nav .menu,
.site-nav .nav-links,
.site-nav>ul {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  min-width: 0;
}

.site-nav .menu>li,
.site-nav .nav-links>li,
.site-nav>ul>li {
  margin: 0;
}

.site-nav .menu>li>a,
.site-nav .nav-links>li>a,
.site-nav>ul>li>a {
  display: block;
  padding: 8px 2px;
  color: #111;
  text-decoration: none;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
}

button.menu-link {
  border: 0;
  background: none;
  color: #000;
  display: block;
  padding: 8px 2px;
  color: #111;
  text-decoration: none;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
}

.site-nav .menu>li>a:hover,
.site-nav .nav-links>li>a:hover,
.site-nav>ul>li>a:hover,
button.menu-link:hover {
  color: var(--accent);
}

/* 言語切替 */
.site-nav .lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.site-nav .lang-switch .btn,
.site-nav .lang-switch button {
  display: inline-block;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #111;
}

.site-nav .lang-switch .btn[aria-current="true"],
.site-nav .lang-switch .active {
  background: #111;
  color: #fff;
  border-color: #111;
}

.menu-link.is-active,
.nav-links a.is-active {
  color: var(--red) !important;
}

.menu-link.is-active::after,
.nav-links a.is-active::after {
  width: 100%;
}

/* bigmenu が無いページ用の保険（ヘッダー分だけ確保） */
main {
  padding-top: 10px;
}

.site-nav+main {
  padding-top: var(--header-h);
}

.site-nav.scrolled+main {
  padding-top: var(--header-h-sm);
}

/* 参考：ヘッダー以外の <nav> には影響させない */
header nav:not(.site-nav):not(.bigmenu) {
  position: static;
  height: auto;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
}

/* --- レスポンシブ --- */
@media (max-width: 960px) {

  /* メニューは横スクロール（高さ一定を保つ） */
  .site-nav .menu,
  .site-nav .nav-links,
  .site-nav>ul {
    justify-content: start;
    gap: 20px;
    overflow: auto hidden;
    scrollbar-width: none;
  }

  .site-nav .menu::-webkit-scrollbar,
  .site-nav .nav-links::-webkit-scrollbar,
  .site-nav>ul::-webkit-scrollbar {
    display: none;
  }
}

/* ===== Big Menu (icon over label, separators, right buttons) ===== */

.bigmenu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  height: var(--bigmenu-h);
  z-index: 1090;
  background: var(--bm-bg, #ffffff);
  border-top: 1px solid var(--bm-border);
  border-bottom: 1px solid var(--bm-border);
  transition: top .25s ease;
}

.site-nav.scrolled+.bigmenu {
  top: var(--header-h-sm);
  box-shadow: 0 2px 18px rgba(0, 0, 0, .06);
  /* 影も付けたい場合 */
}

.site-nav+.bigmenu+main {
  padding-top: calc(var(--header-h) + var(--header-border) + var(--bigmenu-h));
}

.site-nav.scrolled+.bigmenu+main {
  padding-top: calc(var(--header-h-sm) + var(--header-border) + var(--bigmenu-h));
}

.bigmenu__inner {
  max-width: min(2000px, 95vw);
  margin: 0 auto;
  display: flex;
  height: 100%;
  padding: 0 var(--bm-pad-x, 16px);
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
}

/* 左：メニュー本体（モバイルは横スクロール） */
.bigmenu__listwrap {
  flex: 1 1 auto;
  overflow: auto hidden;
  /* 横だけスクロール */
  scrollbar-width: none;
  /* Firefox */
}

.bigmenu__listwrap::-webkit-scrollbar {
  display: none;
}

/* 横並び＋区切り線 */
.bigmenu__list {
  display: flex;
  align-items: center;
  min-height: var(--bigmenu-h);
  white-space: nowrap;
  padding-inline: 4px;
}

.bigmenu__list>li {
  position: relative;
  padding-inline: 8px;
}

.bigmenu__list>li+li::before {
  content: "";
  position: absolute;
  inset: 50% auto 50% 0;
  translate: 0 -50%;
  width: 1px;
  height: 28px;
  background: var(--bm-sep);
}

.bigmenu__list a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--bm-text);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .2em 0;
  width: 160px;
}

.bigmenu__icon {
  width: 32px;
  height: 32px;
  inline-size: 32px;
  block-size: 32px;
  display: block;
  flex: 0 0 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-origin: 50% 85%;
  will-change: transform;
  backface-visibility: hidden;
}

/*
 *
 *icons
 *
 */
.menu-item.ic-tableware>a .bigmenu__icon {
  background-image: url("img/icons/01-tableware-kitchen.svg");
}

.menu-item.ic-cookware>a .bigmenu__icon {
  background-image: url("img/icons/02-cookware.svg");
}

.menu-item.ic-knives>a .bigmenu__icon {
  background-image: url("img/icons/03-knives.svg");
}

.menu-item.ic-drinkware>a .bigmenu__icon {
  background-image: url("img/icons/04-tea-coffee-sake.svg");
}

.menu-item.ic-drink-liquor>a .bigmenu__icon {
  background-image: url("img/icons/icon-sake-jp.svg");
}

.menu-item.ic-lifestyle>a .bigmenu__icon {
  background-image: url("img/icons/06-home-interior.svg");
}

.menu-item.ic-fashion>a .bigmenu__icon {
  background-image: url("img/icons/17-fashion.svg");
}

.menu-item.ic-food>a .bigmenu__icon {
  background-image: url("img/icons/05-food-beverage.svg");
}

.menu-item.ic-cosme>a .bigmenu__icon {
  background-image: url("img/icons/21-cosmetics-care.svg");
}

.menu-item.ic-all>a .bigmenu__icon {
  background-image: url("img/icons/ico-all-categories.svg");
}

.menu-item.ic-farm>a .bigmenu__icon {
  background-image: url("img/icons/icon-agriculture.svg");
}

.menu-item.ic-additivefree>a .bigmenu__icon {
  background-image: url("img/icons/icon-additivefree.svg");
}

.menu-item.ic-bag>a .bigmenu__icon {
  background-image: url("img/icons/18-bag-leather.svg");
}

.menu-item.ic-watch>a .bigmenu__icon {
  background-image: url("img/icons/icon-watch.svg");
}

.menu-item.ic-pet>a .bigmenu__icon {
  background-image: url("img/icons/icon-pet.svg");
}

.menu-item.ic-stationery>a .bigmenu__icon {
  background-image: url("img/icons/icon-stationery.svg");
}

.menu-item.ic-horticulture>a .bigmenu__icon {
  background-image: url("img/icons/icon-horticulture.svg");
}

.menu-item.ic-gift>a .bigmenu__icon {
  background-image: url("img/icons/icon-gift.svg");
}

.bigmenu__label {
  font-size: 13px;
}

.ic-all span.bigmenu__icon {
  width: 20px;
  height: 20px;
}

/* 見出しテキスト行をアイコンと横並びに */
.mij-hdg>span {
  display: inline-flex;
  align-items: center;
  gap: .5em;
}

/* アイコン共通（色は currentColor を継承） */
.mij-hdg>span::before {
  content: "";
  inline-size: 1.35em;
  block-size: 1.35em;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--hdg-ico) center / contain no-repeat;
  mask: var(--hdg-ico) center / contain no-repeat;
}

/* ====== アイコンの割当（パスは設置先に合わせて変更） ====== */
.mij-hdg--ico-find-map {
  --hdg-ico: url("img/icons/ico-map.svg");
}

.mij-hdg--ico-find-products {
  --hdg-ico: url("img/icons/ico-find-products.svg");
}

.mij-hdg--ico-latest-feature {
  --hdg-ico: url("img/icons/ico-latest-feature.svg");
}

.mij-hdg--ico-browse-brand {
  --hdg-ico: url("img/icons/ico-browse-brand.svg");
}

.mij-hdg--ico-tech-culture {
  --hdg-ico: url("img/icons/ico-tech-culture.svg");
}

.mij-hdg--ico-know-artisan {
  --hdg-ico: url("img/icons/ico-know-artisan.svg");
}

.mij-hdg--ico-jobs {
  --hdg-ico: url("img/icons/ico-jobs.svg");
}

.mij-hdg--ico-new {
  --hdg-ico: url("/img/icons/ico-new-arrivals.svg");
}

/* ダークテーマや特集だけ色を変えたい場合（任意） */
.mij-hdg--gold {
  color: #C8A75B;
}

/* 金色に */
.mij-hdg--red {
  color: #C1272D;
}

/* 和赤に */
/* 右：黒ボタン */
.bigmenu__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.bm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 10px;
  background: #222;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

/* ホバー/フォーカス */
.bigmenu__list a:focus-visible,
.bigmenu__list a:hover {
  background: var(--light-gray);
  border-radius: 6px;
}


/* モバイル：間隔を少し詰め、区切り線を非表示 */
@media (max-width: 960px) {

  .bigmenu__list>li {
    padding-inline: 10px;
  }

  .bigmenu__list>li+li::before {
    display: none;
  }
}

/* 1) 各項目をホバー/キーボードフォーカスで揺らす */
.bigmenu__list>li:hover .bigmenu__icon,
.bigmenu__list>li:focus-within .bigmenu__icon {
  animation: bm-wiggle 520ms ease-in-out both;
}

/* 2) （任意）メニュー全体にカーソルが入った時、波状にプチ揺れ 
.bigmenu:hover .bigmenu__list>li:nth-child(1) .bigmenu__icon {
  animation: bm-wiggle 480ms ease-in-out both;
  animation-delay: 0ms;
}

.bigmenu:hover .bigmenu__list>li:nth-child(2) .bigmenu__icon {
  animation: bm-wiggle 480ms ease-in-out both;
  animation-delay: 40ms;
}

.bigmenu:hover .bigmenu__list>li:nth-child(3) .bigmenu__icon {
  animation: bm-wiggle 480ms ease-in-out both;
  animation-delay: 80ms;
}

.bigmenu:hover .bigmenu__list>li:nth-child(4) .bigmenu__icon {
  animation: bm-wiggle 480ms ease-in-out both;
  animation-delay: 120ms;
}

.bigmenu:hover .bigmenu__list>li:nth-child(5) .bigmenu__icon {
  animation: bm-wiggle 480ms ease-in-out both;
  animation-delay: 160ms;
}

.bigmenu:hover .bigmenu__list>li:nth-child(6) .bigmenu__icon {
  animation: bm-wiggle 480ms ease-in-out both;
  animation-delay: 200ms;
}

/* キーフレーム：小さく傾けて戻す（レイアウトには影響しない transform のみ） */
@keyframes bm-wiggle {
  0% {
    transform: rotate(0deg) translateY(0);
  }

  25% {
    transform: rotate(-5deg) translateY(-1px);
  }

  50% {
    transform: rotate(5deg) translateY(0);
  }

  75% {
    transform: rotate(-2deg) translateY(-0.5px);
  }

  100% {
    transform: rotate(0deg) translateY(0);
  }
}

/* 動きが苦手な方向けに無効化 */
@media (prefers-reduced-motion: reduce) {

  .bigmenu__list>li:hover .bigmenu__icon,
  .bigmenu__list>li:focus-within .bigmenu__icon,
  .bigmenu:hover .bigmenu__icon {
    animation: none !important;
  }
}

.section {
  padding: 8em 0;
}

/* =========================
   Footer (site-wide)
   ========================= */
.site-footer {
  background: #111;
  color: #e9e9e9;
  margin-top: 40px;
}

.site-footer .footer-container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 48px 5% 28px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 24px;
}

.site-footer a {
  color: #d8d8d8;
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer .footer-title {
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 12px;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer li+li {
  margin-top: 8px;
}

.site-footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  max-width: 1800px;
  margin: 0 auto;
  padding: 14px 5% 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #aaa;
  font-size: 12px;
}

@media (max-width: 960px) {
  .site-footer .footer-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .site-footer .footer-container {
    grid-template-columns: 1fr;
  }

  .site-footer .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* =========================
   Header (scoped)
   ========================= */


.site-nav.scrolled {
  padding: 1rem 5%;
  box-shadow: 0 2px 20px rgba(0, 0, 0, .05);
  border-bottom-color: var(--line);
}

.l-breadcrumb {
  width: 90%;
  margin: 160px auto 0;
}

.mij-breadcrumb {
  font-size: 0.8rem;
  margin: 0 0 16px;
}

.mij-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mij-breadcrumb__item::after {
  content: "›";
  margin-left: 0.4em;
}

.mij-breadcrumb__item:last-child::after {
  content: "";
  margin: 0;
}

.mij-breadcrumb__item a {
  text-decoration: none;
  opacity: 0.8;
}

.mij-breadcrumb__item span {
  opacity: 1;
}

/* =========================
   Containers / Headings
   ========================= */
.home-container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 5%;
}

.section-title {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 700;
  margin: 0;
}

.section-subtitle {
  margin: .4rem 0 0;
}

/* =========================
   HERO Slider (fixed height)
   ========================= */
.hero--slider {
  padding: 0;
  position: relative;
}

.hero-slider {
  position: relative;
  width: 100%;
  height: 911px;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}

.hero-slide.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

.hero-slide-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  color: inherit;
}

.hero-slide-media {
  position: absolute;
  inset: 0;
  background: #ddd linear-gradient(135deg, #cfc7be 0%, #b99d83 100%) center/cover no-repeat;
  filter: brightness(.95);
}

.hero-slide-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 5%;
}

.hero-tag {
  letter-spacing: .3em;
  font-size: .9rem;
  margin: 0 0 1.2rem;
  color: var(--accent);
}

.hero-title {
  font-size: clamp(2.6rem, 6vw, 5rem);
  letter-spacing: .08em;
  line-height: 1.25;
  margin: .2rem 0 1.2rem;
  font-weight: 300;
  color: var(--white);
}

.hero-desc {
  margin: 0 0 2rem;
  color: var(--white);
}

.hero-cta {
  display: inline-block;
  padding: 1rem 2.4rem;
  border: 2px solid var(--white);
  border-radius: 999px;
  color: var(--white);
}

.hero-cta:hover {
  background: var(--text);
  color: var(--white);
}

/* arrows */
.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .85);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 22px;
  line-height: 44px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}

.hero-prev {
  left: 16px;
}

.hero-next {
  right: 16px;
}

.hero-nav:hover {
  background: #fff;
}

/* dots */
.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}

.hero-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, .25);
  cursor: pointer;
  padding: 0;
}

.hero-dots button[aria-selected="true"] {
  background: #1A1A1A;
}

/* =========================
   Search overlay + Chips
   ========================= */
.home-search-overlay {
  position: absolute;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
  width: 100%;
  max-width: 960px;
  padding: 0 5%;
  z-index: 900;
}

.home-search {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  padding: .75rem .9rem .75rem 1rem;
}

.home-search-icon {
  opacity: .6;
}

.home-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  min-width: 0;
}

.home-search button {
  background: #1A1A1A;
  color: #fff;
  border: none;
  padding: .65rem 1.2rem;
  border-radius: 12px;
  cursor: pointer;
}

.home-search button:hover {
  opacity: .9;
}

.home-search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .6rem;
}

.home-search-chips .chip {
  font-size: .82rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: #f4f4f4;
  border: 1px solid #eee;
}

.home-search-chips .chip:hover {
  background: #eee;
}

/* Suggest dropdown */
.home-search-suggest {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 100%;
  margin-top: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .10);
  padding: 8px 0;
}

.home-search-suggest[hidden] {
  display: none;
}

.home-search-suggest .hs-group+.hs-group {
  border-top: 1px solid #f2f2f2;
}

.home-search-suggest .hs-head {
  font-size: 12px;
  color: #888;
  padding: 8px 14px;
}

.home-search-suggest .hs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-search-suggest .hs-item {
  padding: 10px 14px;
  cursor: pointer;
  outline: none;
}

.home-search-suggest .hs-item:hover,
.home-search-suggest .hs-item.is-active {
  background: #f6f6f6;
}

/* =========================
   Topics chips (under hero)
   ========================= */
.home-topics-chips {
  padding: 8em 0 0;
}

.home-topics-chips .home-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-topics-chips .chip {
  font-size: .82rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: #f4f4f4;
  border: 1px solid #eee;
}

.home-topics-chips .chip:hover {
  background: #eee;
}

/* ===== Topics Chips Marquee ===== */
.home-topics-chips {
  padding: 1rem 0;
  background: var(--light-gray, #f8f8f8);
  overflow: hidden;
}

.home-topics-chips .home-container {
  /* 端をフェードさせてループの継ぎ目を目立たなくする（対応ブラウザでは有効） */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

/* レール */
.chips-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* 念のため二重で隠す */
  --chip-gap: 0.6rem;
  --chip-radius: 999px;
  --chip-bg: #fff;
  --chip-border: #e7e7e7;
  --chip-hover: var(--red, #C1272D);
}

/* 実際に動く内側（2トラック並列） */
.chips-inner {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: chips-marquee var(--marquee-duration, 40s) linear infinite;
}

/* 1トラック＝チップ群（折り返さない） */
.chips-track {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* チップ見た目（共通） */
.chip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 1rem;
  margin-right: var(--chip-gap);
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: var(--chip-radius);
  color: var(--black, #1A1A1A);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.03em;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}

.chip:hover,
.chip:focus-visible {
  color: #fff;
  background: var(--chip-hover);
  border-color: var(--chip-hover);
  outline: none;
  transform: translateY(-1px);
}

/* ホバー or キーボードフォーカス中は一時停止（アクセシビリティ） */
.chips-marquee:hover .chips-inner,
.chips-marquee:focus-within .chips-inner {
  animation-play-state: paused;
}

/* アニメーション定義：2本分の横幅の50%を移動＝1本分の長さを無限ループ */
@keyframes chips-marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* 低速モーションを好む環境では停止 */
@media (prefers-reduced-motion: reduce) {
  .chips-inner {
    animation: none;
  }
}

/* =========================
   Featured grid (Latest features)
   ========================= */

.home-feature-head {
  margin-bottom: 22px;
}

.home-more:hover {
  text-decoration: underline;
}

.home-feature-grid .grid {
  grid-template-columns: repeat(5, minmax(280px, 1fr));
  gap: 24px;
  justify-content: start;
}

.feature-card .feature-card-link {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
  transition: box-shadow .2s ease;
}

.feature-card .feature-card-link:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
}

.feature-card .feature-thumb {
  height: 190px;
  background: linear-gradient(135deg, #d9d9d9, #bfbfbf) center/cover no-repeat;
}

.feature-card .feature-body {
  padding: 14px 14px 16px;
}

.feature-card .feature-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

.feature-meta {
  margin-top: .6rem;
  color: #777;
  font-size: .8em;
}

.carousel-card__link .feature-meta {
  padding: 0 1rem 1rem;
  margin-top: 0;
}

.archive section.home-feature-grid.section {
  padding: 0;
}

.archive .feature-meta {
  padding: 0;
}

.home-feature-grid .feature-meta {
  padding: 0;
}

/* setouchi */
.feature-story-image.feature-fade.img-full.feature-visible {
  background-image: url(img/feature/full.png);
}

.feature-story-image.feature-fade.img-kiln-fire.feature-visible {
  background-image: url(img/feature/kiln-fire.png);
}

/* =========================
   Genre landing (mij_category 用の説明ブロック)
   ========================= */

/* リード文 */
.tax-mij_category .home-feature-grid .mij-genre-lead {
  margin: 0.9rem 0 2.5rem;
  max-width: 960px;
  font-size: 0.95rem;
  line-height: 1.9;
  color: #555;
}

/* セクション全体（「日本製の包丁で選ぶ理由」など） */
.tax-mij_category .mij-genre-sections {
  margin: 0 0 3rem;
  max-width: 960px;
  line-height: 1.9;
  color: #444;
}

/* セクションの区切り */
.tax-mij_category .mij-genre-section+.mij-genre-section {
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}

/* セクション見出し */
.tax-mij_category .mij-genre-section__title {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .05em;
}

/* セクション本文 */
.tax-mij_category .mij-genre-section__body p {
  margin: 0 0 0.8rem;
}

.tax-mij_category .mij-genre-section__body p:last-child {
  margin-bottom: 0;
}

/* =========================
   Area landing (area 用の説明ブロック)
   ジャンル(mij_category)と同じレイアウト
   ========================= */

/* リード文 */
.tax-area .home-feature-grid .mij-genre-lead {
  margin: 0.9rem 0 2.5rem;
  max-width: 960px;
  font-size: 0.95rem;
  line-height: 1.9;
  color: #555;
}

/* セクション全体 */
.tax-area .mij-genre-sections {
  margin: 0 0 3rem;
  max-width: 960px;
  line-height: 1.9;
  color: #444;
}

/* セクションの区切り */
.tax-area .mij-genre-section+.mij-genre-section {
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}

/* セクション見出し */
.tax-area .mij-genre-section__title {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .05em;
}

/* セクション本文 */
.tax-area .mij-genre-section__body p {
  margin: 0 0 0.8rem;
}

.tax-area .mij-genre-section__body p:last-child {
  margin-bottom: 0;
}

/* =========================
   Area landing - PC layout (sections under cards)
   ========================= */
@media (min-width: 1025px) {

  /* コンテナは普通のブロックレイアウトに戻す */
  .tax-area .home-feature-grid .home-container {
    display: block;
  }

  /* 説明セクションをカードグリッド化（3カラム） */
  .tax-area .mij-genre-sections {
    margin-top: 40px;
    margin-bottom: 56px;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 24px;
  }

  /* 各セクションをカード風に */
  .tax-area .mij-genre-section {
    margin: 0;
    padding: 18px 20px 20px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .03);
  }

  .tax-area .mij-genre-section__title {
    margin-bottom: 0.6rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .05em;
  }

  .tax-area .mij-genre-section__body {
    font-size: 0.95rem;
    line-height: 1.8;
  }

  .tax-area .mij-genre-section__body p {
    margin-bottom: 0.6rem;
  }

  .tax-area .mij-genre-section__body p:last-child {
    margin-bottom: 0;
  }
}

/* =========================
   Area landing - SP layout tweak
   ========================= */
@media (max-width: 768px) {

  /* コンテナを縦並びflexにして、子要素の順番を入れ替え */
  .tax-area .home-feature-grid .home-container {
    display: flex;
    flex-direction: column;
  }

  /* 順番：
     1. 見出し（H1＋リード）
     2. タブ（子カテゴリ）
     3. カード一覧
     4. 詳細説明
     5. ページネーション
  */
  .tax-area .home-feature-head {
    order: 1;
  }

  .tax-area .mf-tabs {
    order: 2;
    margin-bottom: 16px;
  }

  .tax-area .grid {
    order: 3;
    margin-top: 4px;
  }

  .tax-area .mij-genre-sections {
    order: 4;
    margin-top: 24px;
    margin-bottom: 20px;
  }

  .tax-area .pagination {
    order: 5;
  }

  /* テキストブロックは少しだけタイトに */
  .tax-area .mij-genre-lead {
    margin: 0.6rem 0 1.4rem;
    font-size: 0.9rem;
  }

  .tax-area .mij-genre-section__title {
    font-size: 1rem;
  }
}

/* =========================
   Area landing - PC order
   ========================= */
@media (min-width: 769px) {

  .tax-area .home-feature-grid .home-container {
    display: flex;
    flex-direction: column;
  }

  /* 1. 見出し（H1＋リード） */
  .tax-area .home-feature-head {
    order: 1;
  }

  /* 2. 子カテゴリタブ */
  .tax-area .mf-tabs {
    order: 2;
    margin-top: 16px;
    margin-bottom: 20px;
  }

  /* 3. カード一覧 */
  .tax-area .grid {
    order: 3;
  }

  /* 4. ページネーション */
  .tax-area .pagination {
    order: 4;
  }

  /* 5. 説明セクション（3枚カード） */
  .tax-area .mij-genre-sections {
    order: 5;
    margin-top: 40px;
    margin-bottom: 56px;
  }
}

/* =========================
   Genre landing - PC layout (sections under cards)
   ========================= */
@media (min-width: 1025px) {

  /* コンテナは普通のブロックレイアウトに戻す */
  .tax-mij_category .home-feature-grid .home-container {
    display: block;
  }

  /* 説明セクションをカードグリッド化（3カラム） */
  .tax-mij_category .mij-genre-sections {
    margin-top: 40px;
    margin-bottom: 56px;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 24px;
  }

  /* 各セクションをカード風に */
  .tax-mij_category .mij-genre-section {
    margin: 0;
    padding: 18px 20px 20px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .03);
  }

  /* 縦並び用の線・余白はPCではリセット */

  .tax-mij_category .mij-genre-section__title {
    margin-bottom: 0.6rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .05em;
  }

  .tax-mij_category .mij-genre-section__body {
    font-size: 0.95rem;
    line-height: 1.8;
  }

  .tax-mij_category .mij-genre-section__body p {
    margin-bottom: 0.6rem;
  }

  .tax-mij_category .mij-genre-section__body p:last-child {
    margin-bottom: 0;
  }
}

/* スマホ調整 */
/* =========================
   Genre landing - SP layout tweak
   ========================= */

@media (max-width: 768px) {

  /* コンテナを縦並びのflexにして、子要素の順番を入れ替え可能に */
  .tax-mij_category .home-feature-grid .home-container {
    display: flex;
    flex-direction: column;
  }

  /* 順番：
     1. 見出し（H1＋リード）
     2. タブ（子カテゴリ）
     3. カード一覧
     4. 詳細説明（日本製の包丁を選ぶ理由 など）
     5. ページネーション
  */
  .tax-mij_category .home-feature-head {
    order: 1;
  }

  .tax-mij_category .mf-tabs {
    order: 2;
    margin-bottom: 16px;
  }

  .tax-mij_category .grid {
    order: 3;
    margin-top: 4px;
  }

  .tax-mij_category .mij-genre-sections {
    order: 4;
    margin-top: 24px;
    margin-bottom: 20px;
  }

  .tax-mij_category .pagination {
    order: 5;
  }

  /* テキストブロックは少しだけタイトに */
  .tax-mij_category .mij-genre-lead {
    margin: 0.6rem 0 1.4rem;
    font-size: 0.9rem;
  }

  .tax-mij_category .mij-genre-section__title {
    font-size: 1rem;
  }
}

/* =========================
   Genre landing - PC order
   ========================= */
@media (min-width: 769px) {

  /* コンテナを縦並びflexにして順番を制御 */
  .tax-mij_category .home-feature-grid .home-container {
    display: flex;
    flex-direction: column;
  }

  /* 1. 見出し（H1＋リード） */
  .tax-mij_category .home-feature-head {
    order: 1;
  }

  /* 2. 子カテゴリタブ */
  .tax-mij_category .mf-tabs {
    order: 2;
    margin-top: 16px;
    margin-bottom: 20px;
  }

  /* 3. カード一覧 */
  .tax-mij_category .grid {
    order: 3;
  }

  /* 4. ページネーション */
  .tax-mij_category .pagination {
    order: 4;
  }

  /* 5. 説明セクション（3枚カード） */
  .tax-mij_category .mij-genre-sections {
    order: 5;
    margin-top: 40px;
    /* カードとの間の余白 */
    margin-bottom: 56px;
  }


}

/* =========================
   A) Doors / 入口カード
   ========================= */

.home-doors .home-container {
  max-width: 1600px;
}

.home-doors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.home-door-link {
  display: block;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
}

.home-door-media {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #d9d9d9, #bfbfbf) center/cover no-repeat;
}

.home-door-meta {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 8px 10px;
}

.home-door-kicker {
  font-size: 11px;
  color: #777;
}

.home-door-title {
  margin: 2px 0 0;
  font-weight: 600;
  font-size: 15px;
}

/* =========================
   B) New row（横スクロール：投稿）
   ========================= */
.home-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.home-row-ctrl button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
  cursor: pointer;
  margin-left: 6px;
}

.home-row-ctrl button:hover {
  background: #f9f9f9;
}

.home-row-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 2px;
}

.home-row-card {
  flex: 0 0 auto;
  width: 240px;
  scroll-snap-align: start;
}

.home-row-link {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
}

.home-row-thumb {
  height: 140px;
  background: linear-gradient(135deg, #d9d9d9, #bfbfbf) center/cover no-repeat;
}

.home-row-title {
  padding: 10px 12px 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.home-row-meta {
  padding: 4px 12px 12px;
  color: #777;
  font-size: 12px;
}

.home-row-empty {
  color: #777;
  font-size: .9rem;
  padding: 8px 0;
}

.pm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}

/* ===== Unified Policy+Map（scoped） ===== */
.pm {
  padding: clamp(48px, 6vw, 96px) 5%;
}

.pm-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.pm-grid {
  display: grid;
  grid-template-columns: 2fr 4fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}

.pm-col {
  min-width: 0;
}

.pm-sub {
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 20px);
  margin: 0 0 12px;
}

/* --- MAP --- */
.sfm-canvas {
  position: relative;
  background-image: var(--sfm-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  aspect-ratio: 1 / 1;
  min-height: 600px;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
}

.sfm-card {
  position: absolute;
  background: rgba(255, 255, 255, .35);
  backdrop-filter: blur(4px);
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
  padding: 12px 16px;
  width: 135px;
  font-size: .95rem;
  line-height: 1.9;
}

.sfm-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.sfm-card ul li {
  flex-basis: calc(100% / 2);
}

.sfm-card a {
  color: #1a1a1a;
  text-decoration: none;
}

.sfm-card a:hover {
  color: var(--red, #c1272d);
  text-decoration: underline;
}

.sfm-card .sfm-region {
  font-weight: 700;
  margin-bottom: 6px;
  flex-basis: 100% !important;
}

/* 配置（目安座標：必要に応じて微調整） */
.sfm-hokkaido {
  top: 100px;
  right: 10px;
}

.sfm-tohoku {
  top: 190px;
  right: 10px;
}

.sfm-kanto {
  top: 392px;
  right: 10px;
}

.sfm-hokushin {
  top: 100px;
  left: 266px;
  width: 100px;
}

.sfm-tokai {
  top: 450px;
  left: 305px;
}

.sfm-kansai {
  top: 100px;
  left: 156px;
  width: 100px;
}

.sfm-shikoku {
  top: 450px;
  left: 156px;
}

.sfm-chugoku {
  top: 100px;
  left: 10px;
}

.sfm-kyushu {
  top: 327px;
  left: 10px;
}

.sfm-okinawa {
  bottom: 29px;
  left: 10px;
}

.sfm-kansai ul li {
  -ms-flex-preferred-size: 100% !important;
  flex-basis: 100% !important;
}

.sfm-hokushin ul li {
  -ms-flex-preferred-size: 100% !important;
  flex-basis: 100% !important;
}

/* ===== Mobile Tabs ===== */
.sfm-tabs {
  display: none;
}

.sfm-tablist {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding: 6px 2px 10px;
  -webkit-overflow-scrolling: touch;
}

.sfm-tab {
  flex: 0 0 auto;
  border: 1px solid #e6e6e6;
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.sfm-tab[aria-selected="true"] {
  background: #111;
  color: #fff;
  border-color: #111;
}

.sfm-panels {
  margin-top: 8px;
}

.sfm-panel {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 14px;
}

.sfm-panel ul {
  columns: 2;
  column-gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sfm-panel li {
  break-inside: avoid;
  line-height: 1.9;
}

.sfm-panel a {
  color: #1a1a1a;
  text-decoration: none;
}

.sfm-panel a:hover {
  text-decoration: underline;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .pm-grid {
    grid-template-columns: 1fr;
  }

  .pm-policy {
    order: 2;
  }

  .pm-map {
    order: 1;
  }

  .pm-map .sfm-canvas {
    display: none;
  }

  /* ←スマホは地図を非表示 */
  .sfm-tabs {
    display: block;
  }

  .sfm-tablist {
    display: grid;
    /* ← flex から grid に */
    grid-template-columns: repeat(5, 1fr);
    /* 5列 */
    gap: 8px 8px;
    /* 行/列の余白 */
    padding: 6px 0 10px;
    overflow: visible;
    /* 横スクロール解除 */
  }

  .sfm-tab {
    width: 100%;
    /* 各セルいっぱいに */
    text-align: center;
    padding: 10px 8px;
    min-height: 36px;
    /* 高さそろえ（お好みで） */
    font-size: clamp(11px, 3.2vw, 13px);
  }
}

/* --- POLICY（右カラム）--- */
.mij-policy__promises {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mij-policy__item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 16px;
  display: grid;
  gap: 10px;
  align-items: start;
}

.mij-policy__icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.mij-policy__title {
  font-size: 1rem;
  margin: 0;
}

.mij-policy__text {
  margin: 4px 0 0;
  color: #444;
  font-size: .95rem;
  line-height: 1.8;
}

/* --- Responsive --- */
@media (max-width: 1200px) {
  .mij-policy__promises {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  section.sfm.pm {
    margin-top: 60px;
  }

  .pm-grid {
    grid-template-columns: 1fr;
  }

  .sfm-canvas {
    aspect-ratio: auto;
    min-height: 420px;
    background-size: 120%;
    background-position: 50% 30%;
  }

  .search-from-map {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    padding: 16px;
  }

  .sfm-card {
    position: static;
    width: auto;
    box-shadow: none;
    backdrop-filter: none;
  }
}

/* ===== Brands / ブランドから探す ===== */


.home-brands-head {
  margin-bottom: 22px;
}

.home-brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.home-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, border-color .2s ease, transform .06s ease;
}

.home-brand:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  border-color: #e6e6e6;
}

.home-brand:active {
  transform: translateY(1px);
}

.home-brand-logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #f2f2f2 center/cover no-repeat;
  flex: 0 0 52px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}

.home-brand-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.home-brand-name {
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-brand-region {
  margin-top: 2px;
  font-size: .85rem;
  color: #666;
}

/* 小さめ画面での密度調整 */
@media (max-width: 640px) {
  .home-brands-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .home-brand-logo {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }
}

/* =========================
   Home sections: reset global section rules
   （他ページの section{ min-height:100vh } 等の影響を解除）
   ========================= */
.home-topics-chips,
.home-doors,
.home-feature-grid,
.home-row,
.home-trust {
  min-height: auto;
  display: block;
  align-items: initial;
  justify-content: initial;
}

/* =========================
   Utilities / Misc
   ========================= */
.chip {
  display: inline-block;
}

.is-hidden {
  display: none !important;
}

/* =========================
   Responsive tweaks
   ========================= */
@media (max-width: 1024px) {
  .hero-title {
    font-size: clamp(2.2rem, 5.6vw, 3rem);
  }
}

@media (max-width: 768px) {
  .hero-slider {
    height: 72vh;
    min-height: 560px;
  }

  /* モバイルはやや低め可（必要なら） */
  .home-search-overlay {
    bottom: 16px;
  }

  .home-search-suggest {
    left: 12px;
    right: 12px;
  }

  .home-feature-grid .grid {
    gap: 18px;
  }

  .feature-card .feature-thumb {
    height: 160px;
  }

  .home-row-card {
    width: 200px;
  }
}

/* ヒーローレール専用の少し大きめサイズ */
.home-hero-rail {
  padding-top: 24px;
}

.home-hero-rail .home-row-card {
  width: 320px;
}

/* PCで3〜4枚見える幅 */
.home-hero-rail .home-row-thumb {
  height: 190px;
}

/* 見出しとのバランス */
@media (max-width: 768px) {
  .l-breadcrumb {
    margin-top: 130px;
  }

  .home-hero-rail .home-row-card {
    width: 240px;
  }

  /* モバイルは軽めに */
  .home-hero-rail .home-row-thumb {
    height: 150px;
  }
}

/* ヘッダーと干渉するなら上マージンを微調整 */
.home-hero-rail.section {
  padding-top: 2.4rem;
}

/* ========== 5-up Peek Carousel ========== */

.carousel5 {
  position: relative;
  margin: 3rem 0;
}

.carousel-window {
  position: relative;
  padding: 0 var(--carousel-peek);
  scrollbar-width: none;
  overflow-x: hidden;
  overflow-y: visible;
}

.carousel-window::-webkit-scrollbar {
  display: none;
}

/* Win/Chromium用 */

.carousel-track {
  display: flex;
  gap: var(--carousel-gap);
  will-change: transform;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.carousel-card {
  flex: 0 0 auto;
  width: 320px;
  /* JSで上書きされます */
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}

.carousel-card__img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  display: block;
}

.carousel-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.carousel-card__title {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  padding: 0 1rem 0;
  margin-bottom: .5rem;
}

.carousel-card__date {
  display: block;
  padding: .6rem 1.2rem 1.2rem;
  color: #888;
  font-size: .85rem;
}

/* ナビゲーション */
.carousel-nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #e5e5e5;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* ==== 中央ナビ（矢印・ページャ・再生/一時停止） ==== */
.c5-centernav {
  position: absolute;
  left: 50%;
  top: 115%;
  transform: translate(-50%, -60%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 4;
  pointer-events: none;
}

.c5-row {
  display: flex;
  align-items: center;
  gap: 16px;
  pointer-events: auto;
}

.c5-prev,
.c5-next {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-block;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
  cursor: pointer;
  font-size: 0;
}

.c5-prev::before,
.c5-next::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  background: currentColor;
  /* 簡易SVG矢印をマスクで描画（どのフォントでもズレない） */
  -webkit-mask: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\<path d="M6 11h9.5l-3.8-3.8 1.4-1.4L19.3 12l-6.2 6.2-1.4-1.4 3.8-3.8H6z"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\<path d="M6 11h9.5l-3.8-3.8 1.4-1.4L19.3 12l-6.2 6.2-1.4-1.4 3.8-3.8H6z"/></svg>') no-repeat center / contain;
  color: #333;
}

.c5-prev::before {
  transform: translate(-50%, -50%) scaleX(-1);
}

.c5-pager {
  font-weight: 700;
  letter-spacing: .06em;
  color: #333;
  font-variant-numeric: tabular-nums;
}

.c5-sep {
  opacity: .6;
  padding: 0 .25em;
}

.c5-toggle {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #222;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  cursor: pointer;
  font-size: 0;
  pointer-events: auto;
}

.c5-toggle::before,
.c5-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 14px;
  background: #fff;
  border-radius: 1px;
  transform: translate(-50%, -50%);
}

/* 左バー */
.c5-toggle::before {
  transform: translate(calc(-50% - 3px), -50%);
}

/* 右バー */
.c5-toggle::after {
  transform: translate(calc(-50% + 3px), -50%);
}

/* ==== 再生（▶︎）: aria-pressed="true" のときに三角形へ切り替え ==== */
.c5-toggle[aria-pressed="true"]::after {
  display: none;
}

/* 右バーを消す */
.c5-toggle[aria-pressed="true"]::before {
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  /* 完全中央 */
  background: #fff;
  /* 三角形をマスクで描画（フォントに依存しない） */
  -webkit-mask: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\<path d="M6 4l12 8-12 8z"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\<path d="M6 4l12 8-12 8z"/></svg>') no-repeat center / contain;
}

/* 旧・左右矢印を残している場合は消す */
.carousel-nav {
  display: none !important;
}

/* 端のフェード（チラ見せを綺麗に） */
.carousel-window::before,
.carousel-window::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--carousel-peek);
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.carousel-window::after {
  left: auto;
  right: 0;
  transform: scaleX(-1);
}


/* =========================
   (任意) 特集ページの共通骨格だけ最低限
   ※ 既存の feature-page 系CSSがあるなら不要
   ========================= */
.feature-page .feature-hero {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
}

.feature-page .feature-hero-image {
  position: absolute;
  inset: 0;
  opacity: .318;
}

.feature-page .feature-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 5%;
}

.feature-page .feature-hero-subtitle {
  letter-spacing: .3em;
  font-size: .9rem;
  margin-bottom: 1rem;
}

.feature-page .feature-hero-title {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 300;
  margin: 0 0 .8rem;
}

.feature-page .feature-hero-description {
  color: #666;
}

.feature-page .feature-products {
  padding: 40px 0;
}

.feature-page .feature-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.feature-page .feature-product-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
}

.feature-page .feature-product-image {
  height: 264px;
  background: linear-gradient(135deg, #d9d9d9, #bfbfbf) center/cover no-repeat;
  opacity: .9;
}

.feature-page .feature-product-name {
  font-weight: 700;
  padding: 12px 14px 0;
}

.feature-page .feature-product-description {
  color: #666;
  padding: 6px 14px 0;
  font-size: .95rem;
}

.feature-page .feature-product-price {
  padding: 0px 14px 0px;
  font-weight: 600;
  margin: 5px 0 15px;
}

/* =========================
   Footer fallback（クラスが合わない場合でも最低限復旧）
   ========================= */
footer.site-footer,
footer[role="contentinfo"],
footer.theme-footer {
  background: #111;
  color: #e9e9e9;
}

footer.site-footer .footer-container,
footer[role="contentinfo"] .footer-container,
footer.theme-footer .footer-container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 48px 5% 28px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 24px;
}

footer .footer-title {
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 12px;
}

footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  max-width: 1800px;
  margin: 0 auto;
  padding: 14px 5% 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #aaa;
  font-size: 12px;
}

@media (max-width:960px) {

  footer.site-footer .footer-container,
  footer[role="contentinfo"] .footer-container,
  footer.theme-footer .footer-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:600px) {
  footer .footer-container {
    grid-template-columns: 1fr !important;
  }

  footer .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}


/* =======================================================
   Footer hard patch v2（クラス不明でも 4 カラムに強制）
   ======================================================= */

/* 本体の見た目（背景/文字） */
body>footer {
  background: #111 !important;
  color: #e9e9e9 !important;
  margin-top: 40px;
}

/* 1) “最初の子”をフッターのグリッド容器として扱う
      （footer-container 等のクラスが無くても効く） */
body>footer>.footer-container,
body>footer>.container,
body>footer>.inner,
body>footer>.wrap,
body>footer>.columns,
body>footer> :first-child:not(.footer-bottom):not(.copyright) {
  max-width: 1800px;
  margin: 0 auto;
  padding: 48px 5% 28px;
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) repeat(1, minmax(0, 1fr));
  gap: 24px;
}

/* 2) 見出しとリンク */
body>footer h2,
body>footer h3,
body>footer h4,
body>footer .footer-title {
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 12px;
}

body>footer a {
  color: #d8d8d8;
  text-decoration: none;
}

body>footer a:hover {
  color: #fff;
  text-decoration: underline;
}

body>footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px;
  align-items: end;
}

body>footer li+li {
  margin-top: 8px;
}

/* 3) SNS/外部リンクの横並び（要素名が不明でも網羅） */
body>footer .footer-social ul,
body>footer .social ul,
body>footer .sns ul,
body>footer .footer-social,
body>footer .social,
body>footer .sns {
  display: flex !important;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

body>footer .footer-social li+li,
body>footer .social li+li,
body>footer .sns li+li {
  margin-top: 0;
}

/* 4) コピーライト行（最後の行っぽい要素を拾う） */
body>footer>.footer-bottom,
body>footer>.bottom,
body>footer>.copy,
body>footer>.copyright,
body>footer> :last-child {
  border-top: 1px solid rgba(255, 255, 255, .12);
  max-width: 1800px;
  margin: 0 auto;
  padding: 14px 5% 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #aaa;
  font-size: 12px;
}

/* レスポンシブ：2列 → 1列 */
@media (max-width: 960px) {

  body>footer>.footer-container,
  body>footer>.container,
  body>footer>.inner,
  body>footer>.wrap,
  body>footer>.columns,
  body>footer> :first-child:not(.footer-bottom):not(.copyright) {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {

  body>footer>.footer-container,
  body>footer>.container,
  body>footer>.inner,
  body>footer>.wrap,
  body>footer>.columns,
  body>footer> :first-child:not(.footer-bottom):not(.copyright) {
    grid-template-columns: 1fr !important;
  }

  body>footer>.footer-bottom,
  body>footer>.bottom,
  body>footer>.copy,
  body>footer>.copyright,
  body>footer> :last-child {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* =========================================================
   Feature page styles (unique `feature-` prefix)
   ========================================================= */
.feature-page {
  --white: #fff;
  --black: #1A1A1A;
  --red: #C1272D;
  --gold: #D4AF37;
  --light-gray: #F8F8F8;
  --text-gray: #666;
  font-family: 'Noto Serif JP', serif;
  color: var(--black);
}

/* Hero */
.feature-hero {
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden
}

.feature-hero-image {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #8B7355 0%, #5D4E37 100%);
  opacity: .15
}

.feature-hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 5%
}

.feature-hero-subtitle {
  font-size: .9rem;
  letter-spacing: .3em;
  color: var(--red);
  margin-bottom: 2rem;
  font-weight: 400
}

.feature-hero-title {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 300;
  letter-spacing: .1em;
  line-height: 1.3;
  margin-bottom: 3rem
}

.feature-hero-description {
  font-size: clamp(1rem, 2vw, 1.2rem);
  max-width: 600px;
  margin: 0 auto;
  color: var(--text-gray);
  font-weight: 300;
  letter-spacing: .05em
}

/* Full width image */
.feature-full-image {
  width: 100%;
  height: 80vh;
  background: linear-gradient(to bottom, #D2B48C 0%, #8B7355 100%);
  opacity: .2
}

/* Story */
.feature-story {
  padding: 10rem 5%;
  max-width: 1400px;
  margin: 0 auto
}

.feature-section-label {
  font-size: .85rem;
  letter-spacing: .3em;
  color: var(--gold);
  margin-bottom: 3rem;
  font-weight: 400
}

.feature-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8rem;
  align-items: center;
  margin-bottom: 8rem
}

.feature-story-text h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  letter-spacing: .05em;
  margin: 0 0 2rem;
  line-height: 1.5
}

.feature-story-text p {
  font-size: 1.1rem;
  line-height: 2.2;
  color: var(--text-gray);
  margin: 0 0 1.5rem;
  font-weight: 300
}

.feature-story-image {
  width: 100%;
  height: 500px;
  background: linear-gradient(45deg, #E6D5C3 0%, #C4A882 100%);
  opacity: .3
}

/* Vertical */
.feature-vertical {
  position: relative;
  padding: 15rem 5%;
  background: var(--light-gray);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh
}

.feature-vertical-content {
  display: flex;
  gap: 8rem;
  align-items: center;
  max-width: 1800px
}

.feature-vertical-text {
  writing-mode: vertical-rl;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  letter-spacing: .3em;
  line-height: 2;
  font-weight: 300
}

.feature-vertical-image {
  width: 600px;
  height: 600px;
  background: linear-gradient(to bottom right, #DEB887 0%, #8B7355 100%);
  opacity: .25;
  margin: auto;
}

/* Craftsman */
.feature-craftsman {
  padding: 10rem 5%;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center
}

.feature-craftsman h2 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  letter-spacing: .1em;
  margin: 0 0 4rem;
  line-height: 1.5
}

.feature-craftsman-image {
  width: 100%;
  height: 600px;
  background: linear-gradient(135deg, #BC8F8F 0%, #8B6969 100%);
  opacity: .2;
  margin: 0 0 4rem
}

.feature-craftsman-quote {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  line-height: 2.2;
  color: var(--text-gray);
  font-weight: 300;
  letter-spacing: .05em;
  padding: 3rem 0;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  margin: 4rem 0
}

.feature-craftsman-name {
  font-size: 1rem;
  letter-spacing: .2em;
  color: var(--black);
  font-weight: 400;
  margin-top: 2rem
}

/* Products */
.feature-products {
  padding: 10rem 5%;
  background: var(--white)
}

.feature-products-header {
  max-width: 1400px;
  margin: 0 auto 6rem;
  text-align: center
}

.feature-products-header h2 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  letter-spacing: .1em;
  margin: 0 0 2rem
}

.feature-products-header p {
  font-size: 1.1rem;
  color: var(--text-gray);
  font-weight: 300;
  letter-spacing: .05em
}

.feature-products-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem
}

.feature-product-card {
  text-align: center
}

.feature-product-image {
  width: 100%;
  height: 400px;
  background: linear-gradient(135deg, #F5DEB3 0%, #D2B48C 100%);
  opacity: .3;
  margin: 0;
  transition: transform .5s
}

.feature-product-card:hover .feature-product-image {
  transform: scale(1.02)
}

.feature-product-name {
  font-size: 1.3rem;
  letter-spacing: .1em;
  margin: 0;
  font-weight: 400
}

.feature-product-description {
  font-size: .95rem;
  color: var(--text-gray);
  line-height: 1.8;
  font-weight: 300;
  margin: 0 0 1.5rem
}

.feature-product-price {
  font-size: 1.1rem;
  letter-spacing: .05em;
  font-weight: 400
}

/* Detail */
.feature-detail {
  padding: 10rem 5%;
  background: var(--light-gray)
}

.feature-detail-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8rem
}

.feature-detail-item h3 {
  font-size: 1.5rem;
  letter-spacing: .1em;
  margin: 0 0 2rem;
  font-weight: 500
}

.feature-detail-item p {
  font-size: 1rem;
  line-height: 2.2;
  color: var(--text-gray);
  font-weight: 300
}

.feature-detail-item ul {
  list-style: none;
  font-size: 1rem;
  line-height: 2.5;
  color: var(--text-gray);
  font-weight: 300;
  padding: 0;
  margin: 0
}

.feature-detail-item ul li::before {
  content: "・";
  color: var(--gold);
  margin-right: .5rem
}

/* CTA */
.feature-cta {
  padding: 12rem 5%;
  text-align: center;
  background: var(--white)
}

.feature-cta h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  letter-spacing: .1em;
  margin: 0 0 3rem;
  line-height: 1.8
}

.feature-cta-buttons {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap
}

.feature-cta-button {
  padding: 1.5rem 4rem;
  font-size: 1rem;
  letter-spacing: .15em;
  text-decoration: none;
  transition: all .3s ease;
  font-family: 'Noto Serif JP', serif;
  cursor: pointer;
  border: 2px solid
}

.feature-cta-primary {
  background: var(--red);
  color: #fff;
  border-color: var(--red)
}

.feature-cta-primary:hover {
  background: #fff;
  color: var(--red)
}

.feature-cta-secondary {
  background: transparent;
  color: var(--black);
  border-color: var(--black)
}

.feature-cta-secondary:hover {
  background: var(--black);
  color: #fff
}

/* Fade-in (only for this page) */
.feature-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s ease
}

.feature-fade.feature-visible {
  opacity: 1;
  transform: none
}

/* Responsive */
@media (max-width:968px) {

  .feature-story,
  .feature-craftsman,
  .feature-products,
  .feature-detail,
  .feature-cta {
    padding: 6rem 5%
  }

  .feature-vertical {
    padding: 8rem 5%
  }

  .feature-story-grid,
  .feature-vertical-content,
  .feature-detail-grid {
    display: block;
  }

  .feature-products-grid {
    grid-template-columns: 1fr;
    margin: 15px;
  }

  .feature-vertical-text {
    writing-mode: horizontal-tb
  }

  .feature-vertical-image {
    width: 100%;
    height: auto
  }
}

/* ==== Featureページの背景画像を1枚でフルカバー ==== */
.feature-page .feature-hero-image,
.feature-page .feature-full-image,
.feature-page .feature-story-image,
.feature-page .feature-vertical-image,
.feature-page .feature-craftsman-image {
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

/* ===== About us / 私たちについて ===== */


.home-about .home-container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 5%;
}

.home-about-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  /* 左テキスト/右ビジュアル */
  gap: 56px;
  align-items: start;
}

.home-about-eyebrow {
  letter-spacing: .3em;
  font-size: .78rem;
  color: #a3a3a3;
  margin: 0 0 10px;
}

.home-about-title {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.35;
  margin: 1em 0 .8em;
}

.home-about-lead {
  color: #666;
  line-height: 1.9;
  margin: 1em 0 2em;
}

.home-about-points {
  list-style: none;
  margin: 0;
  padding-bottom: 1em;
  display: grid;
  gap: 10px;
}

.home-about-points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #333;
  line-height: 1.8;
}

.home-about-points li span {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: .92rem;
  color: #111;
  padding: .2rem .5rem;
  border: 1px solid #eee;
  border-radius: 999px;
  background: #fafafa;
}

.home-about-cta {
  display: flex;
  gap: 14px;
  margin: 18px 0 8px;
  flex-wrap: wrap;
  padding: 2em;
}

.home-about-button {
  display: inline-block;
  padding: .85rem 1.4rem;
  border: 1.5px solid #111;
  border-radius: 999px;
  text-decoration: none;
  color: #111;
  background: #fff;
}

.home-about-button:hover {
  background: #111;
  color: #fff;
}

.home-about-link {
  align-self: center;
  color: #555;
  text-decoration: none;
}

.home-about-link:hover {
  text-decoration: underline;
}

.home-about-stats {
  display: flex;
  gap: 24px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.home-about-stats .stat {
  min-width: 110px;
}

.home-about-stats strong {
  display: block;
  font-size: 1.6rem;
  line-height: 1;
}

.home-about-stats span {
  display: block;
  font-size: .82rem;
  color: #777;
  margin-top: 6px;
}

.home-about-visual {
  margin-top: 3em;
}

.home-about-image {
  aspect-ratio: 4/3;
  border-radius: 16px;
  background: linear-gradient(135deg, #d6d3d1, #c2b7a6) center/cover no-repeat;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .06);
}

.home-about-caption {
  font-size: .82rem;
  color: #777;
  margin-top: 8px;
}

/* Responsive */
@media (max-width: 980px) {
  .home-about-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .home-about-stats {
    gap: 16px;
  }
}

/* ===== 技法と文化 ===== */

.home-culture .home-container {
  max-width: 1800px;
}

.home-culture-head {
  margin-bottom: 22px;
}

.home-culture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.home-culture-link {
  display: block;
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.home-culture-link:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
  border-color: #e8e8e8;
}

.home-culture-media {
  height: 160px;
  background: linear-gradient(135deg, #d9d9d9, #bfbfbf) center/cover no-repeat;
}

.home-culture-body {
  padding: 14px 16px 16px;
}

.home-culture-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.home-culture-excerpt {
  color: #666;
  font-size: .92rem;
  line-height: 1.7;
}

/* ===== 職人を知る（横スクロール） ===== */

.home-artisans .home-container {
  max-width: 1800px;
}

.home-artisans-head {
  max-width: 1800px;
  margin: 0 auto 22px;
  padding: 0 5%;
}

.home-artisans-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 2px;
}

.home-artisan {
  flex: 0 0 auto;
  width: 260px;
  scroll-snap-align: start;
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 14px;
  background: #fff;
  padding: 10px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
  text-decoration: none;
  color: inherit;
}

.home-artisan:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  border-color: #e6e6e6;
}

.home-artisan-face {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 50%;
  background: #f2f2f2 center/cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}

.home-artisan-meta {
  min-width: 0;
}

.home-artisan-name {
  font-weight: 700;
  line-height: 1.3;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-artisan-sub {
  font-size: .86rem;
  color: #666;
}

/* 小さめ画面 */
@media (max-width:640px) {
  .home-culture-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .home-artisan {
    width: 220px;
  }

  .home-artisan-face {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }
}

/* ===== 職人を知る：無限ループ用の見た目 ===== */
.artisan-loop {
  position: relative;
  margin-top: 8px;
}

.artisan-window {
  overflow: hidden;
  /* スクロールバーを出さない */
  position: relative;
}

.artisan-track {
  display: flex;
  gap: 16px;
  will-change: transform;
}

/* 既存の .home-artisan を“縦カード”に見せる */
.artisan-loop .home-artisan {
  display: block;
  /* 横並び→縦カード */
  width: 240px;
  /* ここでカード幅（お好みで） */
  border: 1px solid #eee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
  padding: 0;
  /* 既存の内側余白をリセット */
  overflow: hidden;
}

/* 顔画像を“正方形の大きなサムネ”に */
.artisan-loop .home-artisan-face {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  /* 正方形 */
  border-radius: 0;
  /* 丸→角 */
  background-size: cover;
  background-position: center;
  flex: none;
}

/* テキストは下にまとめる */
.artisan-loop .home-artisan-meta {
  padding: 10px 12px 12px;
}

.artisan-loop .home-artisan-name {
  font-weight: 700;
  line-height: 1.4;
}

.artisan-loop .home-artisan-sub {
  color: #666;
  font-size: .9rem;
}

/* 小さめ画面 */
@media (max-width:640px) {
  .artisan-loop .home-artisan {
    width: 200px;
  }
}

/* ===== 職人を知る：ループの土台を安定 ===== */
.artisan-loop {
  position: relative;
  margin-top: 8px;
}

.artisan-window {
  position: relative;
  overflow: hidden;
  /* 横スクロールバーを出さない */
  min-height: 260px;
  /* 高さゼロ化の保険（カード幅に応じて後で自動で伸びます） */
}

.artisan-track {
  display: flex;
  gap: 16px;
  will-change: transform;
}

/* カードの見た目（幅固定・高さは中の正方形＋テキストで決まる） */
.artisan-loop .home-artisan {
  flex: 0 0 240px;
  /* ← 横幅を“必ず”持たせる（0幅防止） */
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
  overflow: hidden;
}

/* 画像(要素でもimgでもOK)を正方形で表示 */
.artisan-loop .home-artisan-face,
.artisan-loop .home-artisan img {
  width: 100%;
  aspect-ratio: 1 / 1;
  /* 正方形 */
  object-fit: cover;
  display: block;
  border-radius: 0;
  /* もし丸くなっていれば角に戻す */
}

/* テキスト部 */
.artisan-loop .home-artisan-meta {
  padding: 10px 12px 12px;
}

.artisan-loop .home-artisan-name {
  font-weight: 700;
  line-height: 1.4;
}

.artisan-loop .home-artisan-sub {
  color: #666;
  font-size: .9rem;
}

@media (max-width:640px) {
  .artisan-loop .home-artisan {
    flex-basis: 200px;
  }

  .artisan-window {
    min-height: 220px;
  }
}

/* 職人：ループ用の上書き（行そのものをトラック化） */
.home-artisans-row.is-loop {
  --page-pad: clamp(16px, 4vw, 32px);
  --edge: 0px;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-inline: calc(var(--page-pad) + var(--edge));
  overflow: hidden;
}

/* カードを縦レイアウト＆幅固定に（0幅防止） */
.home-artisans-row.is-loop .home-artisan {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid #eee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
  overflow: hidden;
}

/* 画像を正方形で */
.home-artisans-row.is-loop .home-artisan-face,
.home-artisans-row.is-loop .home-artisan img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.home-artisans-row.is-loop .home-artisan-meta {
  padding: 10px 12px 12px;
}

.home-artisans-row.is-loop .loop-belt {
  display: flex;
  gap: 16px;
  /* JSはこのgapを参照 */
  will-change: transform;
}

@media (max-width:640px) {
  .home-artisans-row.is-loop .home-artisan {
    flex-basis: 200px;
  }
}

/* ===== 職人を知る：カード列をフルブリード（右端が切れない） ===== */

/* サイトの基本幅と左右余白（お好みで） */
:root {
  --site-w: 1200px;
  /* ふだんのコンテンツ幅 */
  --page-pad: clamp(16px, 4vw, 32px);
  /* 画面端の“安全余白” */
}

/* 行そのものをビューポート幅に広げる（見出しは従来幅のまま） */
.home-artisans-row.is-loop {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  --edge: 0px;
  padding-inline: calc(var(--page-pad) + var(--edge));
  overflow: hidden;
}

/* （任意）超広い画面で“安全余白”をサイト幅に合わせたい場合 */
@media (min-width: 1280px) {
  .home-artisans-row.is-loop {
    padding-inline: calc((100vw - var(--site-w)) / 2);
  }
}

/* ループ専用に切り替える時はコンテナを block 固定＆スクロール無効 */
.home-artisans-row.is-loop {
  display: block !important;
  /* ← ここが重要（既存の display:flex を打ち消す） */
  scroll-snap-type: none !important;
  overflow: hidden;
}

/* ベルトは横並び＆幅は中身に従う */
.home-artisans-row.is-loop .loop-belt {
  display: flex;
  gap: 16px;
  will-change: transform;
  min-width: max-content;
  /* 中身の合計幅ぶん広がる（scrollWidthが正しくなる） */
}

/* カードは幅固定（0幅化の事故を防止） */
.home-artisans-row.is-loop .home-artisan {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 画像は正方形でトリミング */
.home-artisans-row.is-loop .home-artisan img,
.home-artisans-row.is-loop .home-artisan-face {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* ===== Jobs / 求人 ===== */

.home-jobs .home-container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 5%;
}

.home-jobs-head {
  margin-bottom: 22px;
}

.home-jobs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.home-jobs-chips .chip {
  font-size: .82rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: #f4f4f4;
  border: 1px solid #eee;
}

.home-jobs-chips .chip:hover {
  background: #eee;
}

.home-jobs-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.home-job-link {
  display: block;
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.home-job-link:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
  border-color: #e8e8e8;
}

.home-job-media {
  height: 160px;
  background: linear-gradient(135deg, #d9d9d9, #bfbfbf) center/cover no-repeat;
}

.home-job-body {
  padding: 14px 16px 16px;
}

.home-job-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.home-job-excerpt {
  color: #666;
  font-size: .92rem;
  line-height: 1.7;
}

.home-job-meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.home-job-meta .chip {
  font-size: .75rem;
  padding: .35rem .6rem;
  border: 1px solid #eee;
  border-radius: 999px;
  background: #fafafa;
  color: #444;
}

.home-jobs-cta {
  text-align: center;
  margin-top: 16px;
}

.home-about-button {
  display: inline-block;
  padding: .85rem 1.4rem;
  border: 1.5px solid #111;
  border-radius: 999px;
  text-decoration: none;
  color: #111;
  background: #fff;
}

.home-about-button:hover {
  background: #111;
  color: #fff;
}

/* ===== 求人 共通 ===== */
.jobs-archive .home-container,
.job-single .home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}

/* アーカイブ */
.jobs-arch-head h1 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 22px 0 6px;
  font-weight: 700;
}

.jobs-filters .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 14px;
}

.chip {
  display: inline-block;
  padding: .45rem .8rem;
  font-size: .82rem;
  background: #f5f5f5;
  border: 1px solid #eee;
  border-radius: 999px;
  text-decoration: none;
  color: #333;
}

.chip:hover {
  background: #eee;
}

.jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 8px 0 18px;
}

.job-link {
  display: block;
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
  text-decoration: none;
  color: inherit;
}

.job-link:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
  border-color: #e8e8e8;
}

.job-media {
  height: 160px;
  background: #ddd center/cover no-repeat;
}

.job-body {
  padding: 14px 16px 16px;
}

.job-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.job-excerpt {
  color: #666;
  font-size: .92rem;
  line-height: 1.7;
}

.job-meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jobs-pager {
  margin: 8px 0 24px;
  text-align: center;
}

/* シングル */
.job-hero {
  position: relative;
  padding: 64px 0 26px;
}

.job-hero-media {
  position: absolute;
  inset: 0;
  background: #d9d9d9 center/cover no-repeat;
  opacity: .2;
}

.job-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.job-ttl {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 700;
  margin: .2rem 0 .4rem;
}

.job-chips {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-block;
  padding: .85rem 1.4rem;
  border: 1.5px solid #111;
  background: #111;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
}

.btn-primary:hover {
  filter: brightness(1.1);
}

.btn-ghost {
  display: inline-block;
  padding: .85rem 1.4rem;
  border: 1.5px solid #111;
  border-radius: 999px;
  text-decoration: none;
  color: #111;
  background: #fff;
  margin-left: 8px;
}

.btn-ghost:hover {
  background: #111;
  color: #fff;
}

.job-cta {
  margin: 12px 0 0;
}

.job-body {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
  margin: 20px 0 40px;
}

.job-main .prose p {
  margin: 0 0 1em;
  line-height: 1.9;
  color: #222;
}

.job-section {
  margin: 18px 0;
}

.job-section h2 {
  font-size: 1.2rem;
  margin: 0 0 8px;
}

.job-dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px 14px;
}

.job-dl dt {
  color: #666;
}

.job-dl dd {
  margin: 0;
}

.job-aside .job-box {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
}

.job-aside .job-box+.job-box {
  margin-top: 14px;
}

.job-mini {
  list-style: none;
  padding: 0;
  margin: 0;
}

.job-mini li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: .95rem;
  border-top: 1px dashed #eee;
  padding: 8px 0;
}

.job-related {
  list-style: disc;
  margin: .4rem 0 .2rem 1.2rem;
  padding: 0;
}

@media (max-width: 980px) {
  .job-body {
    grid-template-columns: 1fr;
  }

  .job-dl {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Genre Gateway（入口UI）
   ========================= */
.gg {
  --gg-gap: 24px;
  --gg-radius: 16px;
  --gg-border: #e9e6df;
  --gg-bg: #fff;
  --gg-head: #111;
  --gg-muted: #777;
  --gg-accent: #0d6efd;
}

.gg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 40px 0 16px;
}

.gg-head h2 {
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--gg-head);
  letter-spacing: .02em;
}

.gg-more {
  appearance: none;
  border: 1px solid var(--gg-border);
  background: #fff;
  color: #333;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  cursor: pointer;
}

.gg-more:hover {
  border-color: #d6d1c8;
}

.gg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--gg-gap);
}

.gg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #111;
  padding: 18px 14px;
  border-radius: var(--gg-radius);
  border: 1px solid var(--gg-border);
  background: var(--gg-bg);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

.gg-card:hover,
.gg-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
  border-color: #dcd6c9;
  outline: none;
}

.gg-card__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
}

.gg-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gg-card__icon i {
  display: block;
  width: 100%;
  height: 100%;
  background: no-repeat center/contain;
}

/* 例：CSS側のアイコン割当（必要に応じて追加）
.ic-tableware-kitchen{ background-image:url("/wp-content/themes/mij/img/icons/tableware.svg"); }
.ic-knives { background-image:url("/wp-content/themes/mij/img/icons/tools.svg"); }
.ic-food-drink{ background-image:url("/wp-content/themes/mij/img/icons/food.svg"); }
.ic-fashion{ background-image:url("/wp-content/themes/mij/img/icons/fashion.svg"); }
.ic-beauty-care{ background-image:url("/wp-content/themes/mij/img/icons/cosme.svg"); }
.ic-home-interior{ background-image:url("/wp-content/themes/mij/img/icons/home.svg"); }
*/
.gg-card__label {
  font-size: 14px;
  letter-spacing: .02em;
}

/* ---- Drawer ---- */
.gg-drawer[hidden] {
  display: none;
}

.gg-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.gg-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .36);
}

.gg-dialog {
  position: absolute;
  left: 50%;
  top: 6vh;
  transform: translateX(-50%);
  width: min(1200px, 92vw);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .25);
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  overflow: hidden;
}

.gg-dialog__head {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 360px);
  grid-template-rows: auto auto;
  gap: 12px 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--gg-border);
}

.gg-dialog__head h3 {
  margin: 0;
  align-self: center;
}

.gg-search {
  justify-self: end;
  width: 100%;
  max-width: 360px;
  border: 1px solid var(--gg-border);
  border-radius: 999px;
  padding: 8px 12px;
  outline: none;
}

.gg-search:focus {
  border-color: var(--gg-accent);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, .12);
}

.gg-chips {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  overflow: auto;
  padding-bottom: 2px;
}

.gg-chip {
  appearance: none;
  border: 1px solid var(--gg-border);
  background: #fff;
  color: #333;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.gg-chip.is-active,
.gg-chip[aria-selected="true"] {
  border-color: var(--gg-accent);
  color: var(--gg-accent);
  font-weight: 600;
}

.gg-list {
  padding: 12px 20px 20px;
  overflow: auto;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 18px;
}

@media (max-width: 920px) {
  .gg-dialog__head {
    grid-template-columns: 1fr;
  }

  .gg-search {
    justify-self: stretch;
    max-width: none;
  }

  .gg-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .gg-list {
    grid-template-columns: 1fr;
  }
}

.gg-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .05);
  text-decoration: none;
  color: #111;
  transition: box-shadow .2s, transform .2s;
}

.gg-list a:hover,
.gg-list a:focus-visible {
  background: #f7f6f2;
  outline: none;
}

.gg-list .gg-li__icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}

.gg-list .gg-li__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gg-list .gg-li__icon i {
  display: block;
  width: 100%;
  height: 100%;
  background: no-repeat center/contain;
}

/* パネル（タブの中身）はデフォルト非表示にして、is-activeだけ表示 */
.gg-list {
  display: none;
}

.gg-list.is-active {
  display: block;
}

/* アクティブタブの見た目 */
.gg-chip {
  cursor: pointer;
}

.gg-chip.is-active {
  font-weight: 600;
  border-bottom: 2px solid currentColor;
}

.gg-close {
  position: absolute;
  right: 12px;
  top: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--gg-border);
  background: #fff;
  cursor: pointer;
}

.gg-drawer {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.gg-lock {
  overflow: hidden;
}

.gg-group {
  padding: 12px 0;
  border-bottom: 1px dashed #eceae4;
}

.gg-group__head {
  font-weight: 600;
  margin-bottom: 10px;
}

.gg-parent {
  text-decoration: none;
  color: #111;
}

.gx-group__head {
  margin-bottom: 12px;
  font-weight: 600;
}

.gg-children {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px 12px;
}

.gg-item {
  display: block;
  padding: 6px 10px;
  border-radius: 10px;
  background: #f8f7f2;
  color: #333;
  text-decoration: none;
}

.gg-item:hover {
  background: #f0eee6;
}

.genre-explore {
  margin: 56px 0 32px;
}

.genre-explore .sec-title {
  margin: 0;
}

.gx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.btn-outline {
  appearance: none;
  border: 1px solid #ddd;
  background: #fff;
  color: #222;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 600;
}

.btn-outline:hover {
  background: #f7f6ee;
}

.gx-grid {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1200px) {
  .gx-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 760px) {
  .gx-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gx-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .05);
  text-decoration: none;
  color: #111;
  transition: box-shadow .2s, transform .2s;
}

.gx-link:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
  transform: translateY(-1px);
}

.gx-ico {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
}

.gx-label {
  font-weight: 700;
  letter-spacing: .02em;
  font-size: .8em;
}

.gx-empty {
  color: #666;
  margin-top: 12px;
}

@media (max-width: 480px) {
  .section {
    padding: 4em 0;
  }

  .carousel5 {
    margin: 0;
  }

  .carousel-card__title {
    padding: 0rem 1.2rem;
    margin: .8rem 0 .3rem;
  }

  .carousel-card__date {
    padding: 0 1.2rem 1.2rem;
  }

  .feature-meta {
    padding: 0rem 1.2rem 1rem;
    font-size: .8em;
  }

  .gx-head {
    display: block;
  }

  .mij-hdg.mij-hdg--sumi.mij-hdg--ico-latest-feature {
    margin: 0;
  }

  .mij-hdg>span {
    font-size: .8em;
  }

  .btn-outline {
    margin-bottom: 15px;
    display: inline-block;
    font-size: .8em;
  }

  .gx-grid {
    gap: 6px;
  }

  .gx-link {
    gap: 5px;
    padding: 14px 5px;
    border-radius: 10px;
  }

  .gx-label {
    font-size: 0.6em;
  }
}

/* ===== Genre Modal ===== */
.gx-modal[hidden] {
  display: none !important;
}

.gx-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
}

.gx-m-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(2px);
}

.gx-m-dialog {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(960px, 92vw);
  max-height: 88vh;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
  display: grid;
  grid-template-rows: auto 1fr;
}

.gx-m-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}

.gx-m-head h3 {
  font-size: 20px;
  margin: 0;
}

.gx-m-close {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 999px;
  border: 1px solid #e5e5e5;
  background: #fff;
}

.gx-m-body {
  padding: 16px 20px 20px;
  overflow: auto;
}

.gx-m-searchwrap {
  margin: 8px 0 16px;
}

.gx-m-search {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e6e6e6;
}

.gx-m-kids {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 960px) {
  .gx-m-kids {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gx-m-item {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #eee;
  background: #fafafa;
  text-decoration: none;
  color: #111;
}

.gx-m-item:hover {
  background: #f3f6ff;
  border-color: #dfe8ff;
}

.gx-m-seeall {
  display: inline-block;
  margin-top: 16px;
  text-decoration: none;
  color: #0b63f6;
}

/* モーダル本体を「縦に並ぶフレックス」にして高さ制限 */
.gg-dialog {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 4rem);
  /* 上下に余白を少し残す */
}

/* ヘッダー部分は高さ固定（内容分だけ） */
.gg-dialog__head {
  flex: 0 0 auto;
}

/* リスト部分だけスクロール可能にする */
.gg-body {
  flex: 1 1 auto;
  min-height: 0;
  /* ← これ大事。これがないとflex子がはみ出してスクロールできないことがある */
  overflow-y: auto;
}

/* 既存の body スクロールロックと合わせる */
html.gg-lock,
body.gg-lock {
  overflow: hidden;
}

/* ============================================
   Service Policy (Modern whitespace-first, White ver.)
   - 背景は純白で固定、文字色も濃色にロック
   - 余白リズムと読みやすさを最優先
   ============================================ */

/* ---- Tokens ---- */
:root {
  --mij-max: 1120px;
  /* セクション内の最大幅 */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: clamp(36px, 5vw, 56px);
  --space-8: clamp(48px, 7vw, 96px);

  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 20px;
  --radius-xl: 28px;
}

/* コンテナ幅（このセクション内だけ最大幅を揃える） */
.mij-policy .home-container {
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 28px);
}

.mij-policy__inner {
  text-align: center;
}

/* --------------------------------------------
   Base（配色ロック：白背景＆濃色テキスト）
-------------------------------------------- */
.mij-policy {
  --bg-1: #fff;
  --bg-2: #fff;
  --fg-1: #111;
  --fg-2: #1a1a1a;
  --fg-3: #4a4a4a;
  --fg-4: #777;
  --border: 1px solid rgba(0, 0, 0, .08);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-2: 0 8px 30px rgba(0, 0, 0, .08);

  border-radius: var(--radius-xl);
  padding: 50px 0;
  margin: clamp(16px, 2.4vw, 40px) auto;
  background: #fff;
  /* セクション背景を白で固定 */
}

/* ページ内アンカー遷移時の余白 */
.mij-policy [id] {
  scroll-margin-top: 80px;
}

/* --------------------------------------------
   Hero
-------------------------------------------- */
.mij-policy__head--hero {
  text-align: center;
  padding-block: var(--space-8);
  position: relative;
  overflow: hidden;
}

.mij-policy__eyebrow {
  font-size: clamp(12px, .95vw, 14px);
  letter-spacing: .16em;
  color: var(--fg-4);
  margin: 0 0 var(--space-2);
  font-weight: 700;
  text-transform: uppercase;
}

.mij-policy__title__h1 {
  font-size: clamp(26px, 5.6vw, 46px);
  line-height: 1.08;
  margin: 0 0 var(--space-2);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--fg-1);
}

.mij-policy__subtitle {
  color: var(--fg-2);
  margin: 0 0 var(--space-5);
  font-weight: 600;
  font-size: clamp(14px, 1.6vw, 24px);
}

.mij-policy__desc {
  color: var(--fg-2);
  margin: var(--space-7) auto 0;
  font-size: clamp(14px, 1.5vw, 20px);
  line-height: 2.2;
}

/* 背景の巨大タイポ（白背景でも視認できる薄さ） */
@media (min-width: 1025px) {
  .mij-policy__head--hero::before {
    content: "POLICY";
    position: absolute;
    inset: 0;
    font-weight: 800;
    font-size: 10vw;
    line-height: 1;
    color: rgba(0, 0, 0, .035);
    transform: translateY(0%);
    pointer-events: none;
    user-select: none;
    letter-spacing: .06em;
  }
}

/* --------------------------------------------
   CTA
-------------------------------------------- */
.mij-policy__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin: var(--space-6) 0 var(--space-7);
}

.mij-policy__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--fg-1);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  will-change: transform;
}

.mij-policy__btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

.mij-policy__btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-1);
}

.mij-policy__btn:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

.mij-policy__btn--outline {
  background: transparent;
  color: var(--fg-1);
  border: var(--border);
}

.mij-policy__btn--outline:hover {
  background: #f7f7f7;
}

/* --------------------------------------------
   Promises（カード）
-------------------------------------------- */
.mij-policy__item {
  display: grid;
  grid-column: span 2;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  text-align: center;
  padding: clamp(16px, 2.6vw, 24px);
  min-height: 100%;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  will-change: transform;
}

.mij-policy__item:hover {
  transform: translateY(-2px);
}

.mij-policy__promises h3 {
  margin: 0 0 var(--space-2);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.35;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.mij-policy__promises p {
  color: var(--fg-3);
  font-size: clamp(13px, 1.1vw, 16px);
}

/* --------------------------------------------
   Future / Note
-------------------------------------------- */
.mij-policy__future {
  background: var(--bg-1);
  border: var(--border);
  border-radius: var(--radius-l);
  padding: clamp(16px, 3vw, 28px);
  box-shadow: var(--shadow-1);
  margin-top: var(--space-7);
}

.mij-policy__future h3 {
  margin: 0 0 var(--space-3);
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--fg-1);
}

.mij-policy__future ul {
  margin: 0;
  padding-inline-start: 1.2em;
  color: var(--fg-2);
  text-align: center;
}

.mij-policy__future li {
  margin: 6px 0;
  line-height: 1.9;
}

.mij-policy__note {
  margin-top: var(--space-6);
  color: var(--fg-3);
  font-size: clamp(13px, 1.05vw, 15px);
}

.mij-policy__note strong {
  color: var(--fg-2);
}

.mij-policy__motto {
  margin: var(--space-2) 0 0;
  font-weight: 700;
  color: var(--fg-1);
}

/* --------------------------------------------
   About page 用の下層セクション（存在する場合）
-------------------------------------------- */
.mij-policy__section {
  padding-block: var(--space-7);
}

.mij-section__head {
  margin: 0 0 var(--space-4);
  text-align: center;
}

.mij-section__title {
  margin: 0 0 var(--space-2);
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 800;
  color: var(--fg-1);
}

.mij-section__lead {
  font-size: clamp(14px, 1.3vw, 18px);
}

/* ページ内ナビ（存在する場合） */
.mij-localnav {
  margin-top: var(--space-5);
}

.mij-localnav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.mij-localnav__link {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  border: var(--border);
  background: var(--bg-1);
  color: var(--fg-2);
  text-decoration: none;
  font-weight: 600;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.mij-localnav__link:hover {
  background: #f7f7f7;
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
}

.mij-localnav__link:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

/* 汎用箇条書き（存在する場合） */
.mij-bullets {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.mij-bullets li {
  list-style: none;
  padding-left: 1.4em;
  position: relative;
  color: var(--fg-2);
  line-height: 1.9;
}


/* --------------------------------------------
   Responsive fine-tuning
-------------------------------------------- */
@media (max-width: 640px) {
  .mij-policy .home-container {
    padding: 0;
  }

  .mij-policy {
    border-radius: var(--radius-l);
    padding: 0;
  }

  .mij-policy__cta {
    margin: var(--space-5) 0 var(--space-6);
  }

  .mij-policy__desc {
    line-height: 2;
  }
}

/* --------------------------------------------
   Motion
-------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  .mij-policy__btn,
  .mij-policy__item,
  .mij-localnav__link {
    transition: none !important;
  }
}

/* ——— Service Policy / Promises ——— */
.mij-policy__icon {
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

.mij-policy__icon img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  /* 画像の縦横比を保ったまま内側に収める */
  display: block;
}

.mij-policy__text strong {
  color: var(--red, #C1272D);
  font-weight: 700;
}

/* Responsive */
@media (max-width: 1200px) {
  .mij-policy__promises {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 680px) {
  .mij-policy__promises {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 24px;
  }
}

@media (max-width: 420px) {
  .mij-policy__promises {
    grid-template-columns: 1fr;
  }
}

/* ============================
   Contact Section (mij)
   scope: .contact だけに限定
   ============================ */

:root {
  --mij-red: #C40021;
  --mij-gold: #C9A44D;
  --ink: #111;
  --muted: #6B7280;
  --bg: #ffffff;
  --surface: #F7F7F9;
  --line: #E6E8EC;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(17, 24, 39, .08);
}

/* セクション全体 */
.contact {
  background: var(--bg);
  padding: clamp(48px, 6vw, 80px) 0;
  border-top: 1px solid var(--line);
}

.contact .contact-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

/* 見出し */
.contact .section-title {
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: .02em;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 10px;
  position: relative;
}

.contact .section-title::after {
  content: "";
  display: block;
  width: 84px;
  height: 4px;
  margin-top: 12px;
  background: linear-gradient(90deg, var(--mij-red), var(--mij-gold));
  border-radius: 2px;
}

.contact .section-subtitle {
  font-size: clamp(18px, 1.6vw, 22px);
  margin: 4px 0 28px;
  text-align: center;
}

/* リード文 */
.contact .about-text {
  color: #1F2937;
  line-height: 1.9;
}

.contact .about-text strong {
  color: var(--ink);
}

/* メリットカード */
.contact .brand-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}

.contact .brand-card h3 {
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--ink);
}

.contact .brand-card p {
  color: #374151;
  line-height: 1.8;
  margin: 0;
}

.contact .brand-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(17, 24, 39, .12);
}

/* FAQ（details / summary） */
.contact details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
}

.contact details+details {
  margin-top: 10px;
}

.contact summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: #111;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact summary::-webkit-details-marker {
  display: none;
}

.contact summary::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid var(--mij-red);
  border-radius: 50%;
  position: relative;
  flex: 0 0 18px;
}

.contact summary::after {
  content: "+";
  font-weight: 800;
  color: var(--mij-red);
  margin-left: 0px;
  /* ○の中に配置 */
}

.contact details[open] summary::after {
  content: "−";
}

.contact details p {
  margin: 12px 0 4px 28px;
  color: #374151;
  line-height: 1.9;
}

/* 掲載までの流れ（タイムライン風） */
.contact ol {
  counter-reset: step;
  padding: 0;
  margin: 10px 0 0;
}

.contact ol li {
  list-style: none;
  position: relative;
  padding: 12px 12px 12px 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  margin-top: 10px;
}

.contact ol li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 12px;
  top: 50%;
  translate: 0 -50%;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, var(--mij-red), #800016);
  border-radius: 50%;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
}

/* フォーム */
.contact .contact-form {
  margin-top: 24px;
  display: grid;
  gap: 14px;
}

.contact .contact-form label {
  display: block;
  font-size: 13px;
  color: #111;
  font-weight: 700;
  margin-bottom: 6px;
}

.contact .contact-form input,
.contact .contact-form select,
.contact .contact-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px 14px;
  font-size: 16px;
  color: #111;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.contact .contact-form textarea {
  min-height: 180px;
  resize: vertical;
}

.contact .contact-form input::placeholder,
.contact .contact-form textarea::placeholder {
  color: #9CA3AF;
}

.contact .contact-form input:focus,
.contact .contact-form select:focus,
.contact .contact-form textarea:focus {
  border-color: var(--mij-red);
  box-shadow: 0 0 0 3px rgba(196, 0, 33, .12);
}

/* チェックボックス */
.contact .contact-form input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--mij-red);
  border-radius: 4px;
  display: inline-grid;
  place-content: center;
  margin-right: 8px;
}

.contact .contact-form input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  background: var(--mij-red);
  border-radius: 2px;
  transition: transform .12s ease-in-out;
}

.contact .contact-form input[type="checkbox"]:checked::before {
  transform: scale(1);
}

/* 送信ボタン */
.contact .contact-form button {
  appearance: none;
  border: none;
  border-radius: 14px;
  padding: 14px 22px;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  background:
    linear-gradient(90deg, var(--mij-red), #8F0017) padding-box,
    linear-gradient(90deg, var(--mij-gold), var(--mij-red)) border-box;
  border: 2px solid transparent;
  box-shadow: 0 10px 26px rgba(196, 0, 33, .25);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease;
}

.contact .contact-form button:hover {
  box-shadow: 0 12px 28px rgba(196, 0, 33, .33);
}

.contact .contact-form button:active {
  transform: translateY(1px);
}

/* 備考文 */
.contact .contact-form p {
  color: #6B7280;
  line-height: 1.7;
}

/* レイアウトのレスポンシブ微調整 */
@media (max-width: 768px) {
  .contact .brand-card {
    padding: 16px;
  }

  .contact .contact-form {
    gap: 12px;
  }
}

/* ==========================================
   Made-in-japan.jp — About / 掲載・お問い合わせ
   全体デザイン（このページ専用）
   scope: .mij-about 配下のみ
   ========================================== */

.mij-about {
  /* ページ専用トークン（他ページに影響なし） */
  --about-ink: #111;
  --about-sub: #444;
  --about-muted: #6B7280;
  --about-line: #E6E8EC;
  --about-soft: #F7F8FB;
  --about-card: #FFFFFF;
  --about-red: #C40021;
  --about-gold: #C9A44D;
  --about-shadow: 0 10px 30px rgba(17, 24, 39, .08);
  --about-radius: 18px;
  --about-max: 1120px;
  --about-pad: clamp(16px, 3.5vw, 28px);
}

/* 共通コンテナとセクション余白 */
.mij-about .about-container {
  max-width: var(--about-max);
  margin: 0 auto;
  padding: 0 var(--about-pad);
}

.mij-about .about-sec {
  padding: clamp(40px, 6vw, 80px) 0;
  border-top: 1px solid var(--about-line);
  background: #fff;
}

.mij-about .about-sec--soft {
  background: var(--about-soft);
}

/* タイポスケール */
.mij-about .about-eyebrow {
  letter-spacing: .16em;
  color: var(--about-muted);
  font-size: clamp(12px, .95vw, 13px);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 .4rem;
}

.mij-about .about-h1 {
  font-size: clamp(28px, 5.2vw, 52px);
  line-height: 1.16;
  letter-spacing: .01em;
  font-weight: 800;
  margin: 0;
}

.mij-about .about-h2 {
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.35;
  font-weight: 800;
  margin: 0 0 .6rem;
}

.mij-about .about-lead {
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 2;
  margin: 10px 0 0;
}

.mij-about p {
  font-size: .88em;
  line-height: 1.9;
  margin: 0;
}

.mij-about a.text-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ヒーロー（タイトル帯） */
.mij-about .about-hero {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.mij-about .about-hero .about-container {
  padding-top: clamp(36px, 6vw, 72px);
  padding-bottom: clamp(22px, 2.8vw, 32px);
}

.mij-about .about-hero .rule {
  width: 96px;
  height: 4px;
  border-radius: 3px;
  margin: 14px 0 0;
  background: linear-gradient(90deg, var(--about-red), var(--about-gold));
}

/* ページ内ローカルナビ（固定） */
.mij-about .mij-localnav {
  margin-top: 14px;
}

.mij-policy__meta {
  text-align: center;
}

.mij-about .mij-localnav__list {
  position: sticky;
  top: calc(var(--header-h, 76px) + var(--bigmenu-h, 72px) + 10px);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: center;
}

.mij-about .mij-localnav__link {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  background: #fff;
  border: 1px solid var(--about-line);
  color: #333;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

.mij-about .mij-localnav__link:hover {
  transform: translateY(-1px);
  box-shadow: var(--about-shadow);
  border-color: #d8dbe3;
}

/* 見出しブロック（各セクションの頭） */
.mij-about .about-head {
  margin-bottom: 16px;
}

.mij-about .about-head .about-lead {
  margin-top: .3rem
}

/* 2カラム基礎グリッド */
.mij-about .about-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(18px, 3vw, 32px);
  align-items: start;
}

@media (max-width:980px) {
  .mij-about .about-grid {
    grid-template-columns: 1fr;
  }
}

/* カード系 */
.mij-about .card {
  border: 1px solid var(--about-line);
  border-radius: var(--about-radius);
  box-shadow: var(--about-shadow);
  padding: clamp(16px, 2.4vw, 22px);
}

.mij-about .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(12px, 2vw, 18px);
}

.mij-about .card h3 {
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--about-ink);
}

.mij-about .card p {
  margin: 0;
  color: #374151;
}

/* 箇条書き（課題/背景・使途など） */
.mij-about .bullets {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.mij-about .bullets li {
  list-style: none;
  position: relative;
  padding-left: 1.4em;
  color: #333;
  line-height: 1.9;
}

.mij-about .bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .75em;
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--about-red), #8F0017);
}

/* 強調ボックス（“発見の入口”など） */
.mij-about .em {
  border: 1px dashed #d9dfea;
  background: linear-gradient(0deg, #fff, #fff) padding-box,
    linear-gradient(90deg, var(--about-red), var(--about-gold)) border-box;
  border-radius: 16px;
  padding: 16px 18px;
  color: #222;
  box-shadow: 0 8px 26px rgba(17, 24, 39, .06);
}

/* ステップ（活動の流れ） */
.mij-about .steps {
  counter-reset: about;
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.mij-about .step {
  list-style: none;
  position: relative;
  padding: 14px 12px 14px 50px;
  background: #fff;
  border: 1px solid var(--about-line);
  border-radius: 14px;
}

.mij-about .step::before {
  counter-increment: about;
  content: counter(about);
  position: absolute;
  left: 12px;
  top: 50%;
  translate: 0 -50%;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  background: linear-gradient(180deg, var(--about-red), #8F0017);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
}

/* 表組（支援の使い道・連絡先などで使える） */
.mij-about .dl-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 10px 16px;
}

.mij-about .dl-grid dt {
  color: var(--about-muted);
}

.mij-about .dl-grid dd {
  margin: 0;
}

@media (max-width:720px) {
  .mij-about .dl-grid {
    grid-template-columns: 1fr;
  }
}

/* CTA ボタン（共通） */
.mij-about .btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
  color: #fff;
  background: linear-gradient(90deg, var(--about-red), #8F0017) padding-box,
    linear-gradient(90deg, var(--about-gold), var(--about-red)) border-box;
  box-shadow: 0 10px 26px rgba(196, 0, 33, .25);
  transition: transform .08s ease, box-shadow .2s ease;
}

.mij-about .btn:hover {
  box-shadow: 0 12px 28px rgba(196, 0, 33, .33);
}

.mij-about .btn:active {
  transform: translateY(1px);
}

.mij-about .btn--ghost {
  background: #fff;
  color: #111;
  border-color: #111;
  box-shadow: 0 10px 26px rgba(17, 24, 39, .08);
}

.mij-about .btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

/* このサイトの目的 */
.mij-policy__purpose {
  text-align: center;
}

/* FAQ（このページ版。contact内のFAQと並びを合わせる） */
.mij-about .faq details {
  border: 1px solid var(--about-line);
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
}

.mij-about .faq details+details {
  margin-top: 10px;
}

.mij-about .faq summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: #111;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mij-about .faq summary::-webkit-details-marker {
  display: none;
}

.mij-about .faq summary::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid var(--about-red);
  border-radius: 50%;
}

.mij-about .faq summary::after {
  content: "+";
  font-weight: 800;
  color: var(--about-red);
  margin-left: -18px;
}

.mij-about .faq details[open] summary::after {
  content: "−";
}

.mij-about .faq details p {
  margin: 12px 0 4px 28px;
  color: #374151;
  line-height: 1.9
}

/* 画像のダミー枠（必要なら） */
.mij-about .ph {
  aspect-ratio: 16/9;
  border-radius: 16px;
  background: linear-gradient(135deg, #d9d9d9, #bfbfbf) center/cover no-repeat;
  box-shadow: 0 10px 26px rgba(17, 24, 39, .08)
}

.about-recruit,
.about-yell,
.about-contact {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 12px;
  max-width: 1000px;
  margin: 6rem auto;
  text-align: left;
}


/* レスポンシブ細かい調整 */
@media (max-width:768px) {
  .mij-about .about-h1 {
    font-size: clamp(24px, 6.4vw, 36px)
  }

  .mij-about .mij-localnav__list {
    justify-content: flex-start
  }
}

/* ダークモード（任意） */
@media (prefers-color-scheme: dark) {
  .mij-about {
    --about-ink: #F5F6F8;
    --about-sub: #D6DAE2;
    --about-muted: #A7AFC1;
    --about-card: #0F1013;
    --about-soft: #0E0F12;
    --about-line: #22242A;
  }

  .mij-about .about-sec {
    border-top-color: var(--about-line);
  }

  .mij-about .card,
  .mij-about .faq details,
  .mij-about .step {
    border-color: var(--about-line);
  }

  .mij-about .em {
    background: #0F1013;
    border-color: #2a2e39;
  }

  .mij-about .mij-localnav__link {
    background: #0F1013;
    border-color: var(--about-line);
    color: #E8EAF0;
  }
}

/* Promises：3-2（下段を中央寄せ）*/
.mij-promises--3-2-center {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 40px 48px;
  max-width: 1000px;
  margin: auto;
}

.mij-policy__item:nth-child(4) {
  grid-column: 2 / span 2;
}

.mij-policy__item:nth-child(5) {
  grid-column: 4 / span 2;
}

/* ========== Contact (page only) ========== */
.contact-form-box {
  /* theme variables があれば自動で拾い、なければフォールバック */
  --box-bg: #fff;
  --text: #111;
  --muted: #666;
  --line: #e5e7eb;
  /* #ddd〜#e5e7eb 程度の薄グレー */
  --accent: var(--red, #e60033);
  --radius: 14px;
  --pad: 16px;
  color: var(--text);
  background: var(--box-bg);
}

/* フォーム全体 */
.contact-form-box .wpcf7-form {
  margin: 0;
}

/* ラベル */
.contact-form-box label {
  display: block;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 .4rem;
  color: var(--text);
}

/* 入力系（text / email / url / tel / select / textarea） */
.contact-form-box input[type="text"],
.contact-form-box input[type="email"],
.contact-form-box input[type="url"],
.contact-form-box input[type="tel"],
.contact-form-box select,
.contact-form-box textarea {
  width: 100%;
  padding: calc(var(--pad) - 2px) var(--pad);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* プレースホルダ */
.contact-form-box ::placeholder {
  color: var(--muted);
}

/* テキストエリア */
.contact-form-box textarea {
  min-height: 180px;
  resize: vertical;
}

/* フォーカス */
.contact-form-box input[type="text"]:focus,
.contact-form-box input[type="email"]:focus,
.contact-form-box input[type="url"]:focus,
.contact-form-box input[type="tel"]:focus,
.contact-form-box select:focus,
.contact-form-box textarea:focus {
  border-color: var(--accent);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}

/* select の矢印（ネイティブを隠してカスタム） */
.contact-form-box select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  padding-right: 42px;
  /* 矢印分の余白 */
}

/* チェックボックス（同意） */
.contact-form-box input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin-right: .5rem;
  vertical-align: -2px;
  accent-color: var(--accent);
}

/* 送信ボタン */
.contact-form-box .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem 2rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--accent);
  font-weight: 700;
  letter-spacing: .06em;
  transition: .2s ease;
  cursor: pointer;
}

.contact-form-box .wpcf7-submit:hover {
  background: #fff;
  color: var(--accent);
}

.contact-form-box .wpcf7-submit:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* バリデーション・メッセージ */
.contact-form-box .wpcf7-not-valid-tip {
  color: #c30;
  font-size: .9rem;
  margin-top: .35rem;
}

.contact-form-box [aria-invalid="true"] {
  border-color: #c30 !important;
}

.contact-form-box .wpcf7-response-output {
  margin-top: 1rem;
  padding: .9rem 1rem;
  border-left: 4px solid var(--line);
  background: #fafafa;
  color: #333;
  font-size: .95rem;
}

.contact-form-box .wpcf7 form.invalid .wpcf7-response-output {
  border-left-color: #c30;
  background: #fff5f5;
}

.contact-form-box .wpcf7 form.sent .wpcf7-response-output {
  border-left-color: #16a34a;
  background: #f0fdf4;
}

/* スピナー位置微調整 */
.contact-form-box .wpcf7-spinner {
  margin-left: .6rem;
}

/* フッターノート */
.contact-form-box p {
  line-height: 1.8;
}

/* reCAPTCHA バッジ（隠さない・位置だけ控えめに） */
.grecaptcha-badge {
  right: 12px !important;
  bottom: 12px !important;
  z-index: 10;
  opacity: .75;
}

.grecaptcha-badge:hover {
  opacity: 1;
}

/* ---（任意）インラインstyleをクラス化したい場合 --- */
/* マークアップを書き換え可能なら、下の .form-grid を使って
   div の style を外し、class="form-grid" に置き換えると管理しやすくなります。 */
.contact-form-box .form-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  text-align: left;
}

/* 余白最適化（本文ラベル行など） */
.contact-form-box .mt-12 {
  margin-top: 1.2rem;
}

.contact-form-box .note {
  font-size: .9rem;
  color: var(--muted);
  margin-top: 1rem;
}

/* ===== Mega menu (header内：新規) ===== */
.site-nav .menu-item.has-mega {
  position: static;
}

.site-nav .menu-item.has-mega .mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
  display: none;
}

.site-nav .menu-item.has-mega.is-open .mega,
.site-nav .menu-item.has-mega:focus-within .mega {
  display: block;
}

.mega__inner {
  max-width: min(1200px, 92vw);
  margin: 0 auto;
  padding: 14px 16px 18px;
}

/* 頭：検索 */
.mega__head {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 420px);
  gap: 12px 16px;
  align-items: center;
  padding: 8px 0 12px;
  border-bottom: 1px solid #f1f1f1;
}

.mega__tabs {
  display: inline-flex;
  gap: 8px;
}

.mega__tabs .search-tab {
  appearance: none;
  border: 1px solid #e1e1e1;
  background: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
}

.mega__tabs .search-tab.is-active,
.mega__tabs .search-tab[aria-selected="true"] {
  border-color: #111;
  color: #111;
}

.mega__search {
  display: flex;
  gap: 8px;
}

.mega__search input[type="search"] {
  flex: 1;
  border: 1px solid #e1e1e1;
  border-radius: 999px;
  padding: 8px 12px;
  outline: none;
}

.mega__search button {
  border: 1px solid #111;
  background: #111;
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
}

/* 本体：4カラム */
.mega__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 18px;
  padding-top: 12px;
}

.mega__title {
  margin: 6px 0 8px;
  font-size: 14px;
  color: #666;
  font-weight: 700;
}

.mega__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.mega__list--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
}

.mega__list a {
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
  color: #111;
  text-decoration: none;
}

.mega__list a:hover,
.mega__list a:focus-visible {
  background: #f7f7f7;
  outline: none;
}

/* メガメニュー全体の列レイアウト */
.mega__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

/* 2列組リスト（カテゴリ・地域共通） */
.mega__list--2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25em 1.5em;
}

/* 「すべてのカテゴリ」だけ横幅いっぱい使いたければ */
.mega__all {
  grid-column: 1 / -1;
  margin-top: 0.75em;
  font-weight: 600;
}

/* モバイル調整 */
@media (max-width: 960px) {
  .mega__head {
    grid-template-columns: 1fr;
  }

  .mega__cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== モバイルドロワー（primary-nav） ===== */
.nav-open {
  overflow: hidden;
}

/* 1) CONTACT（has-sub）のドロップダウンを絶対配置にしてレイアウト干渉を防ぐ */
.site-nav .menu>.menu-item.has-sub {
  position: relative;
}

.site-nav .menu>.menu-item.has-sub>.sub-menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 10px);
  min-width: 240px;
  padding: 8px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
  display: none;
  /* 通常は非表示 */
  white-space: nowrap;
  z-index: 1200;
}

.site-nav .menu>.menu-item.has-sub:hover>.sub-menu,
.site-nav .menu>.menu-item.has-sub.is-open>.sub-menu {
  display: block;
}

.site-nav .menu>.menu-item.has-sub>.sub-menu li {
  display: block;
}

.site-nav .menu>.menu-item.has-sub>.sub-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: #111;
}

.site-nav .menu>.menu-item.has-sub>.sub-menu a:hover,
.site-nav .menu>.menu-item.has-sub>.sub-menu a:focus-visible {
  background: #f7f7f7;
  outline: none;
}

/* 2) ビッグメニュー行の左「メニュー」トグルを高さ・位置揃え */
.bigmenu .menu-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  /* 行中央にピタッと */
  padding: 0 18px;
  border: 1px solid #111;
  border-radius: 12px;
  background: #fff;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.bigmenu__inner {
  align-items: center;
}

/* 行内の上下センター合わせ */
.bigmenu__list {
  align-items: center;
}

/* アイコン列も高さ合わせ */

@media (max-width:1024px) {

  /* モバイルでは少しだけ低めに */
  .bigmenu .menu-toggle {
    height: 38px;
    padding: 0 14px;
  }
}

/* 3) ヘッダー圧縮時もドロップ位置を自動追従 */
.site-nav.scrolled+.bigmenu~* {
  /* 既存のレイアウト確保の保険 */
}

/* ===== Header fixes ===== */
#site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
}

/* メニュー（ハンバーガー）: デスクトップでは隠す、モバイルで表示 */
#site-header .menu-toggle {
  display: none;
}


/* ===== MEGAの基本（横幅いっぱい、上からドロップ） ===== */
#site-header .menu-item.has-mega {
  position: static;
}

#site-header .menu-item.has-mega .mega-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid #eee;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s linear;
  z-index: 1100;
}

#site-header .menu-item.has-mega.is-open>.mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ===== CONTACT（簡易サブメニュー） ===== */
#site-header .menu-item.has-sub {
  position: relative;
}

#site-header .menu-item.has-sub .sub-menu {
  position: absolute;
  left: 50%;
  top: calc(100% + 12px);
  transform: translateX(-50%);
  min-width: 240px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .10);
  opacity: 0;
  visibility: hidden;
  transition: .15s ease;
  z-index: 1150;
}

#site-header .menu-item.has-sub.is-open>.sub-menu,
#site-header .menu-item.has-sub>.menu-link[aria-expanded="true"]+.sub-menu {
  opacity: 1;
  visibility: visible;
}

/* サブメニューのテキスト整列（スクショのズレ対策） */
#site-header .menu-item.has-sub .sub-menu a {
  display: block;
  padding: .4rem .6rem;
  line-height: 1.6;
}

/* デスクトップでは通常の水平ナビ、モバイルでは縦積み */
@media (min-width:1025px) {
  #primary-nav {
    position: static;
    transform: none;
    box-shadow: none;
    padding: 0;
  }
}

/* 言語トグルやナビの重なり順（ボタンが潜る対策） */
#site-header .lang-switch,
#site-header .menu-toggle {
  z-index: 990;
  position: relative;
}

/* 既存の .mega に合わせる */
#site-header .menu-item.has-mega {
  position: static;
}

#site-header .menu-item.has-mega .mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid #eee;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s linear;
  z-index: 1100;
}

#site-header .menu-item.has-mega.is-open>.mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* PCはボタンを隠す */
@media (min-width:1025px) {
  #site-header .menu-toggle {
    display: none !important;
  }
}

#site-header .menu>.menu-item.has-sub {
  position: relative;
}

#site-header .menu>.menu-item.has-sub>.sub-menu {
  position: absolute;
  right: 0;
  left: auto;
  top: calc(100% + 10px);
  min-width: 240px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
  opacity: 0;
  visibility: hidden;
  transition: .15s ease;
  z-index: 1150;
}

#site-header .menu>.menu-item.has-sub.is-open>.sub-menu,
#site-header .menu>.menu-item.has-sub>.menu-link[aria-expanded="true"]+.sub-menu {
  opacity: 1;
  visibility: visible;
}

/* === Category Hub: Feature Cards ============================== */
.grid {
  display: grid;
  gap: 28px;
}

.grid--pins {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--features {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .grid--pins {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {

  .grid--pins,
  .grid--features {
    grid-template-columns: 1fr;
  }
}

.cat-hub-container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 5%;
}

.card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

.card__thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: #f7f7f7;
}

.card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.badge--pin {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  letter-spacing: .02em;
}

.card__title {
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.35;
  margin: 12px 16px 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__meta {
  color: #777;
  font-size: 12px;
  margin: 0 16px 8px;
}

.card__excerpt {
  font-size: 14px;
  color: #444;
  margin: 0 16px 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 先頭の“リード1件”を大きく見せる */
.grid--features .card.is-hero {
  grid-column: span 2;
}

.grid--features .card.is-hero .card__thumb {
  aspect-ratio: 21/9;
}

.grid--features .card.is-hero .card__title {
  font-size: clamp(22px, 2.6vw, 28px);
}

@media (max-width: 1024px) {
  .grid--features .card.is-hero {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .grid--features .card.is-hero {
    grid-column: auto;
  }
}

/* ===== Hero stats（件数表示） ===== */
.cat-hero__stats {
  display: flex;
  gap: 20px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.cat-hero__stats li {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.cat-hero__stats li span {
  font-size: 22px;
  font-weight: 700;
}

.cat-hero__stats li small {
  font-size: 12px;
  color: #777;
}

/* ===== Tabs（タブ） ===== */
.cat-tabs__wrap {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin: 16px 0 24px;
}

.cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 10px 0;
}

.cat-tabs__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .42rem .8rem;
  border-radius: 999px;
  background: #f6f6f7;
  color: #222;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  border: 1px solid #eee;
}

.cat-tabs__item.is-active {
  background: #111;
  color: #fff;
  border-color: #111;
}

.cat-tabs__item:hover {
  filter: brightness(.96);
}

/* 小さめ画面での余白調整 */
@media (max-width: 640px) {
  .cat-tabs__wrap {
    margin: 10px 0 18px;
  }

  .cat-hero__stats li span {
    font-size: 18px;
  }
}

/* ===== Topics Chips Marquee ===== */
.home-topics-chips {
  padding: 1rem 0;
  background: var(--light-gray, #f8f8f8);
  overflow: hidden;
  margin-top: 0vw;
}

.home-topics-chips .home-container {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.chips-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  --chip-gap: 0.6rem;
  --chip-radius: 9999px;
  --chip-bg: #fff;
  --chip-border: #e7e7e7;
  --chip-hover: var(--red, #C1272D);
}

.chips-inner {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: chips-marquee var(--marquee-duration, 40s) linear infinite;
}

.chips-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 1rem;
  margin-right: var(--chip-gap);
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: var(--chip-radius);
  color: var(--black, #1A1A1A);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.03em;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}

.chip:hover,
.chip:focus-visible {
  color: #fff;
  background: var(--chip-hover);
  border-color: var(--chip-hover);
  outline: none;
  transform: translateY(-1px);
}

.chips-marquee:hover .chips-inner,
.chips-marquee:focus-within .chips-inner {
  animation-play-state: paused;
}

@keyframes chips-marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }

  /* 2トラックの半分＝1本分の長さだけ移動 */
}

@media (prefers-reduced-motion: reduce) {
  .chips-inner {
    animation: none;
  }
}

/* =========================================
   About（/about/）スマホ追加スタイル
   scope: .mij-about 以下のみ／既存に上書き
   ========================================= */
@media (max-width: 768px) {

  /* 余白・タイポ微調整 */
  .mij-about .about-container,
  .mij-about .home-container {
    /* このページの冒頭は .home-container 内に構造あり */
    padding-left: 16px;
    padding-right: 16px;
  }

  .mij-about .about-sec {
    padding: 28px 0;
  }

  .mij-about .about-h1 {
    font-size: clamp(22px, 7.2vw, 32px);
    line-height: 1.28;
  }

  .mij-about .about-h2 {
    font-size: clamp(18px, 4.6vw, 22px);
  }

  .mij-about .about-lead {
    font-size: 14px;
    line-height: 1.9;
  }

  /* ヒーロー（mij-policy系で出ているタイトル帯をモバイル最適化） */
  .mij-policy--about .mij-policy__head--hero {
    text-align: center;
  }

  .mij-policy--about .mij-policy__title__h1 {
    font-size: clamp(26px, 7vw, 34px);
    line-height: 1.3;
  }

  .mij-policy--about .mij-policy__subtitle {
    font-size: 14px;
    margin-top: 6px;
  }

  .mij-policy--about .mij-policy__desc {
    font-size: 14px;
    line-height: 1.9;
    margin-top: 12px;
  }

  /* ページ内ローカルナビ（チップを横スクロールに） */
  .mij-about .mij-localnav {
    margin-top: 10px;
  }

  .mij-about .mij-localnav__list {
    top: calc(var(--header-h, 64px) + 6px);
    /* ヘッダー圧縮時に合わせて低めに */
    gap: 8px 10px;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 0 12px 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }

  .mij-about .mij-localnav__list::-webkit-scrollbar {
    display: none;
  }

  .mij-about .mij-localnav__link {
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* 2カラム→1カラム / カード間隔 */
  .mij-about .about-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .mij-about .cards {
    grid-template-columns: 1fr;
  }

  .mij-about .card {
    padding: 16px;
  }

  /* 箇条書き・ステップ */
  .mij-about .steps {
    gap: 8px;
  }

  .mij-about .step {
    padding: 12px 12px 12px 46px;
  }

  /* 定義リスト（表組） */
  .mij-about .dl-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* ボタン行は折り返して1列幅優先 */
  .mij-about .btn-row {
    gap: 8px;
  }

  .mij-about .btn {
    width: 100%;
    padding: 12px 16px;
  }

  /* CF7 フォーム（このページに限り軽めに整える） */
  .mij-about .contact-form {
    gap: 12px;
  }

  .mij-about .contact-form input,
  .mij-about .contact-form select,
  .mij-about .contact-form textarea {
    font-size: 16px;
    /* iOSズーム回避 */
    padding: 12px;
  }
}

@media (max-width: 520px) {

  .mij-about .about-container,
  .mij-about .home-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .mij-about .mij-localnav__link {
    font-size: 12px;
    padding: 7px 10px;
  }

  .mij-about .about-h1 {
    font-size: clamp(20px, 7.8vw, 28px);
  }
}

/* =========================================

/* =========================================
   Policy Promises（3-2 配置）スマホ最適化
   追加CSS：既存に上書き／HTML改変不要
   ========================================= */
@media (max-width: 768px) {

  /* アイコンの見やすさ最適化 */
  .mij-policy__icon {
    line-height: 0;
  }

  .mij-policy__icon img {
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    /* ブラウザ差対策のダミー */
  }

  /* タイトル・本文の余白とサイズ */
  .mij-policy__title {
    margin: 0 0 6px;
    font-size: clamp(15px, 4.2vw, 17px);
    line-height: 1.35;
  }

  .mij-policy__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .mij-policy__text strong {
    font-weight: 700;
  }
}

@media (max-width: 480px) {

  /* 5つの約束 */
  .mij-policy__promises.mij-promises--3-2-center {
    display: block;
  }

  .mij-policy__item {
    margin: 2rem 0;
  }

  .mij-policy__icon {
    margin-bottom: 6px;
  }

  .mij-policy__icon img {
    width: 100px;
    height: 100px;
  }

  .mij-policy__title {
    font-size: clamp(16px, 5vw, 18px);
  }

  /* これから */
  .mij-policy__future ul {
    padding-inline-start: 0;
  }

  .mij-bullets li {
    padding-left: 0;
  }
}


/* モバイルはバッジを隠す（v3 / Invisible想定） */
@media (max-width: 560px) {
  .grecaptcha-badge {
    visibility: hidden !important;
  }

  /* display:none でなく visibility を推奨 */
}

/* 注意書きの体裁（任意） */
.recaptcha-notice {
  font-size: 12px;
  opacity: .75;
  margin-top: 8px;
}

@media (max-width:1024px) {
  #site-header .menu-toggle {
    display: inline-flex;
    gap: 10px;
    font-size: 0;
    width: 44px;
    min-width: 44px;
    height: auto;
    padding: 7px;
    justify-content: center;
    border: 0;
    background: #fff;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* 3本線を1つの疑似要素で描画 */
  #site-header .menu-toggle::before {
    content: "";
    display: block;
    width: 22px;
    height: 14px;
    margin: 0 auto;
    background:
      linear-gradient(#111 0 0) 0 0/100% 2px no-repeat,
      linear-gradient(#111 0 0) 0 6px/100% 2px no-repeat,
      linear-gradient(#111 0 0) 0 12px/100% 2px no-repeat;
  }

  /* 背景スクロール抑止＆薄いオーバーレイ（DOM不要、html擬似要素で） */
  html.nav-open,
  html.nav-open body {
    overflow: hidden;
  }

  html.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .28);
    z-index: 950;
  }

  html.nav-open #primary-nav {
    position: fixed;
    z-index: 1250;
    /* メニューはさらに上なので普通に触れる */
    pointer-events: auto;
  }

  #primary-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(520px, 78vw);
    background: #fff;
    box-shadow: -14px 0 28px rgba(0, 0, 0, .08);
    overflow-y: auto;
    z-index: 9999;
    padding: 20px 18px;
    transform: translateX(100%);
    transition: transform .25s ease;
    display: block !important;
  }

  #primary-nav.is-open {
    transform: translateX(0);
  }
}

/* ===== Mobile drawer: 縦並び & 全高 ===== */
@media (max-width:1024px) {

  /* パネル自体を全高＋カラム化（iOS対策に 100dvh） */
  #primary-nav {
    height: 100dvh;
    /* 画面下端まで白背景を伸ばす */
    display: flex;
    flex-direction: column;
    padding: 20px 18px;
    /* 既存と同値。お好みで */
  }

  /* メニューは縦積みにしてスクロール可能に */
  #primary-nav .nav-links,
  #primary-nav .menu,
  #primary-nav>ul {
    display: block;
    /* ← 横並び(flex)を解除 */
    white-space: normal;
    /* ← nowrapの影響を打ち消し */
    gap: 0;
    margin: 0;
    padding: 12px 0;
    list-style: none;
  }

  #primary-nav li {
    display: block;
  }

  /* 仕切り線とタップ領域 */
  #primary-nav .menu>li+li {
    border-top: 1px solid #eee;
  }

  #primary-nav a,
  #primary-nav .menu-link {
    display: block;
    padding: 14px 8px;
    font-size: 1.1rem;
    line-height: 1.45;
  }

  /* メガメニューなど“横に広がるUI”はモバイルでは展開しない */
  #primary-nav .mega,
  #primary-nav .mega-panel,
  #primary-nav .sub-menu {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* パネル内が長いときだけ中身だけスクロール */
  #primary-nav .nav-links,
  #primary-nav .menu {
    max-height: calc(100dvh - 40px);
    overflow: auto;
  }
}

/* （任意）モーダルの黒スクリーンはメニューより下に */
@media (max-width:1024px) {
  html.nav-open::before {
    z-index: 900;
  }

  /* メニューは 1200 で上にいるためクリック可 */
}

@media (max-width: 480px) {
  .fp-hero-content {
    margin-top: 14rem;
  }
}

/* ===== Minimal Feature (mf-*) ===== */
.mf-wrap {
  --mf-gap: clamp(16px, 2.5vw, 28px);
  --mf-max: 980px;
}

.mf-article {
  margin: 0 auto;
  max-width: var(--mf-max);
  padding: var(--mf-gap);
}

.mf-hero {
  text-align: center;
  padding: calc(var(--mf-gap)*1.5) 0 var(--mf-gap);
}

.mf-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.mf-monogram {
  width: 84px;
  height: 84px;
  border-radius: 16px;
  background: #f2f4f7;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: .04em;
}

.mf-title {
  font-size: clamp(22px, 3.4vw, 32px);
  margin: 4px 0 12px;
  font-weight: 700;
}

.mf-lead {
  color: #444;
  line-height: 1.7;
  margin-top: 8px;
}

.mf-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}

.mf-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .68em 1.1em;
  border-radius: 10px;
  border: 1px solid #d7dce2;
  background: #fff;
  font-weight: 600;
}

.mf-btn--pri {
  background: #111;
  color: #fff;
  border-color: #111;
}

.mf-snapshot {
  margin-top: calc(var(--mf-gap)*1.2);
}

.mf-dl {
  display: grid;
  gap: 8px;
}

.mf-dl__row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.mf-dl__row dt {
  color: #666;
}

.mf-meta {
  margin-top: 10px;
  font-size: .92rem;
  color: #666;
}

.mf-links {
  margin-top: calc(var(--mf-gap)*1.2);
}

.mf-links__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.mf-links__list a {
  padding: .4em .8em;
  border-radius: 999px;
  background: #f6f7f9;
  border: 1px solid #e7eaf0;
}

.mf-gallery {
  margin-top: calc(var(--mf-gap)*1.2);
}

.mf-grid {
  --cols: 3;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(var(--cols), 1fr);
}

.mf-grid__item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

@media (max-width: 720px) {
  .mf-grid {
    --cols: 2;
  }
}

.mf-note {
  margin-top: calc(var(--mf-gap)*1.2);
  padding: 12px 14px;
  background: #f9fafb;
  border: 1px solid #edf0f4;
  border-radius: 10px;
  color: #444;
}

.mf-content {
  margin-top: calc(var(--mf-gap)*1.2);
  line-height: 1.9;
}

/* エリア（areaタクソノミー）アーカイブだけカード幅を固定 */
.tax-area .home-feature-grid .grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  justify-content: start;
}

/* モバイルは少し細く＆中央寄せ */
@media (max-width: 768px) {
  .tax-area .home-feature-grid .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    justify-content: center;
  }

  .home-feature-grid .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    justify-content: center;
  }
}

.mij-allcats {
  padding: 4rem 0;
}

.mij-allcats__lead {
  margin-bottom: 2rem;
  text-align: left;
  color: #555;
}

.mij-allcats__block {
  margin-top: 3rem;
}

.mij-allcats__grid {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.mij-allcats__group {
  border-bottom: 1px solid #eee;
  padding-bottom: 1.2rem;
}

.mij-allcats__parent a {
  font-weight: 700;
  text-decoration: none;
}

.mij-allcats__children {
  margin: .4rem 0 0;
  padding-left: 1.1rem;
  list-style: none;
}

.mij-allcats__children li+li {
  margin-top: .1rem;
}

.mij-allcats__children a {
  text-decoration: none;
  color: #555;
  font-size: .95rem;
}

.mij-allcats__children a:hover {
  text-decoration: underline;
}

/* =========================
   すべてのカテゴリ ページ
   ========================= */

.mij-allcats {
  padding: 4rem 0 5rem;
  background-color: #fff;
}

/* 見出しまわりの余白を少し締める */
.mij-allcats>.mij-container>.mij-hdgRow {
  margin-bottom: 0.75rem;
}

.mij-allcats__lead {
  margin: 0.75rem auto 2.5rem;
  max-width: 720px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #555;
}

/* セクション（MIJ / 地域）のブロック */
.mij-allcats__block {
  padding-top: 3rem;
  border-top: 1px solid #eee;
}

.mij-allcats__block+.mij-allcats__block {
  margin-top: 3rem;
}

.mij-allcats__block>.mij-hdgRow {
  margin-bottom: 1.25rem;
}

/* 親カテゴリのグリッド */
.mij-allcats__grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2rem 3rem;
}

/* 親カテゴリブロック */
.mij-allcats__group {
  min-height: 100%;
}

/* 親カテゴリのタイトル */
.mij-allcats__parent {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.mij-allcats__parent a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: #111;
  font-weight: 700;
  padding-bottom: 0.12rem;
  border-bottom: 2px solid transparent;
}

.mij-allcats__parent a:hover,
.mij-allcats__parent a:focus-visible {
  border-bottom-color: #111;
}

/* 子カテゴリのリスト */
.mij-allcats__children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mij-allcats__children li+li {
  margin-top: 0.15rem;
}

.mij-allcats__children a {
  display: inline-block;
  padding: 0.2rem 0;
  text-decoration: none;
  color: #555;
  font-size: 0.9rem;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: .02em;
  font-size: 1em;
}

.mij-allcats__children a:hover,
.mij-allcats__children a:focus-visible {
  color: #d60000;
  text-decoration: underline;
}

.all-gx-link .gx-ico {
  width: 2em;
  height: 2em;
}

.all-gx-link .gx-label {
  font-size: 1em;
}

a.all-gx-link {
  display: flex;
  align-items: center;
  font-size: 1em;
}

.mij-allcats__item {
  margin-bottom: 2rem;
}

/* PC では各グループの下に薄い線だけ入れる */
@media (min-width: 768px) {
  .mij-allcats__group {
    border-bottom: 1px solid #f3f3f3;
    padding-bottom: 1rem;
  }
}

/* =========================
   スマホ〜タブレット向け調整
   ========================= */

@media (max-width: 767px) {
  .mij-allcats {
    padding: 2.5rem 0 3.5rem;
  }

  .mij-allcats__lead {
    margin-bottom: 2rem;
    padding: 0 0.75rem;
    font-size: 0.9rem;
  }

  .mij-allcats__block {
    padding-top: 2.5rem;
  }

  .mij-allcats__grid {
    gap: 1.5rem;
  }

  /* スマホでは1カードごとにボックス化してタップしやすく */
  .mij-allcats__group {
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    padding: 0.9rem 0.95rem 1rem;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
  }

  .mij-allcats__parent {
    margin-bottom: 0.3rem;
  }

  .mij-allcats__children a {
    font-size: 0.88rem;
  }
}

/* すべてのカテゴリページ専用のコンテンツ幅＆サイド余白 */
.mij-allcats>.mij-container {
  max-width: 1120px;
  /* 好みで 1040〜1200px くらいに調整してOK */
  margin: 0 auto;
  /* 中央寄せ */
  padding: 0 24px;
  /* 左右の余白 */
}

/* スマホは少しだけ狭めに */
@media (max-width: 767px) {
  .mij-allcats>.mij-container {
    max-width: 100%;
    padding: 0 16px;
  }
}

/* 共通スタイル */
.mij-allcats__parent {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.mij-allcats__parent>a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--black);
}

.mij-allcats__icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--white);
  border: 1px solid var(--gold);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
}

/* ここから各カテゴリごとのアイコン割り当て（例） */
.mij-allcats__icon--food {
  background-image: url('<?php echo get_template_directory_uri(); ?>/img/icons/nav-food.svg');
}

.mij-allcats__icon--drink-sake {
  background-image: url('<?php echo get_template_directory_uri(); ?>/img/icons/nav-drink.svg');
}

.mij-allcats__icon--craft {
  background-image: url('<?php echo get_template_directory_uri(); ?>/img/icons/nav-craft.svg');
}

/* 地域用の例 */
.mij-allcats__icon--area-hokkaido {
  background-image: url('<?php echo get_template_directory_uri(); ?>/img/icons/area-hokkaido.svg');
}

/* ===== ページネーション共通 ===== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin: 3rem 0 0;
  font-size: 0.9rem;
}

/* 各ページ番号リンク */
.pagination .page-numbers {
  display: inline-flex;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.8rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fff;
  color: #555;
  text-decoration: none;
  line-height: 1;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.1s ease;
}

/* 通常ホバー */
.pagination .page-numbers:hover {
  background-color: #111;
  color: #fff;
  border-color: #111;
  transform: translateY(-1px);
}

/* 現在ページ */
.pagination .page-numbers.current {
  background-color: #111;
  color: #fff;
  border-color: #111;
  cursor: default;
  font-weight: 600;
}

/* 「前へ」「次へ」 */
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
  padding: 0 1.1rem;
  font-size: 0.85rem;
}

/* 省略記号（…） */
.pagination .page-numbers.dots {
  border: none;
  background: transparent;
  color: #999;
  pointer-events: none;
}

/* スマホ時ちょっと詰める */
@media (max-width: 600px) {
  .pagination {
    gap: 0.2rem;
    font-size: 0.85rem;
  }

  .pagination .page-numbers {
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.6rem;
  }
}

.mij-sitemap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 8rem 5% 6rem;
}

.mij-sitemap__header {
  margin-bottom: 4rem;
}

.mij-sitemap__title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.mij-sitemap__lead {
  font-size: 0.95rem;
  color: #666;
  line-height: 2;
}

.mij-sitemap__section+.mij-sitemap__section {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid #eee;
}

.mij-sitemap__heading {
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  margin-bottom: 1.5rem;
  color: var(--red);
}

.mij-sitemap__list {
  list-style: none;
  columns: 2;
  column-gap: 4rem;
}

.mij-sitemap__list li {
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}

.mij-sitemap__list a {
  color: var(--black);
  text-decoration: none;
  position: relative;
}

.mij-sitemap__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--red);
  transition: width 0.2s ease;
}

.mij-sitemap__list a:hover::after {
  width: 100%;
}

@media (max-width: 768px) {
  .mij-sitemap {
    padding-top: 6rem;
  }

  .mij-sitemap__list {
    columns: 1;
  }
}

.mf-sort {
  margin: 0 0 24px;
}

.mf-sort__label {
  font-size: 0.9rem;
  margin-bottom: 8px;
  opacity: 0.8;
}

.mf-sort__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mf-sort__button {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #ddd;
  font-size: 0.9rem;
  text-decoration: none;
}

.mf-sort__button.is-active {
  border-color: #000;
  font-weight: 600;
}

.mf-tabs {
  margin: 16px 0 24px;
}

.mf-tabs__inner {
  overflow-x: auto;
}

.mf-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mf-tabs__btn {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}

.mf-tabs__btn.is-active {
  border-color: #000;
  font-weight: 600;
}

/* =========================================
   カテゴリ下部：このカテゴリーの GUIDES & STORIES
   ========================================= */

.mij-genre-guides {
  margin: 40px 0 64px;
  padding-top: 32px;
  border-top: 1px solid #eee2c8;
}

.mij-genre-guides__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mij-genre-guides__title {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.mij-genre-guides__title::before {
  content: "●";
  display: inline-block;
  font-size: 11px;
  color: #c4001a;
}

.mij-genre-guides__lead {
  font-size: 13px;
  line-height: 1.9;
  color: #555;
  margin: 0;
}

/* ---- カードグリッド ---- */

.mij-genre-guides__grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: 20px;
}

/* カード本体 */

.mij-genre-guides__card {
  margin: 0;
}

.mij-genre-guides__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 18px;
  border: 1px solid #eee2c8;
  background: #ffffff;
  overflow: hidden;
  text-decoration: none;
  color: #111;
  transition: box-shadow 0.18s ease, transform 0.12s ease, border-color 0.18s ease;
}

.mij-genre-guides__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.mij-genre-guides__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mij-genre-guides__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mij-genre-guides__cardTitle {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

.mij-genre-guides__excerpt {
  font-size: 12px;
  line-height: 1.8;
  color: #555;
  margin: 0;
}

/* ホバー */

.mij-genre-guides__link:hover {
  border-color: #c89a3c;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
}

/* ---- レスポンシブ調整 ---- */

@media (max-width: 640px) {
  .mij-genre-guides {
    margin: 32px 0 48px;
  }

  .mij-genre-guides__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 960px) {
  .mij-genre-guides__lead {
    font-size: 13px;
    max-width: 760px;
  }
}

/* =========================================
   トップ：日本製の選び方ガイド（home-guides）
   ========================================= */

.home-guides {
  margin: 40px 0 56px;
}

.home-guides-head {
  margin-bottom: 16px;
}

.home-guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

/* カード */

.home-guides-card {
  margin: 0;
}

.home-guides-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 18px;
  border: 1px solid #eee2c8;
  background: #ffffff;
  overflow: hidden;
  text-decoration: none;
  color: #111;
  transition: box-shadow 0.18s ease, transform 0.12s ease, border-color 0.18s ease;
}

.home-guides-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.home-guides-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-guides-body {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.home-guides-title {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

.home-guides-excerpt {
  font-size: 12px;
  line-height: 1.8;
  color: #555;
  margin: 0;
}

/* ホバー */

.home-guides-link:hover {
  border-color: #c89a3c;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
}

/* レスポンシブ */

@media (min-width: 1024px) {

  /* PCではきっちり4カラムに */
  .home-guides-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .home-guides {
    margin: 32px 0 48px;
  }

  .home-guides-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {

  /* タブレットでは2カラム */
  .home-guides-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================
   ページトップに戻るボタン
   ========================================= */

.mij-backTop {
  position: fixed;
  right: 16px;
  bottom: 88px;
  /* reCAPTCHA をよけるため少し高めに */
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #e4dbc5;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease;
}

.mij-backTop__icon {
  font-size: 16px;
  color: #c4001a;
  line-height: 1;
}

.mij-backTop:hover {
  border-color: #c89a3c;
  background-color: #fff9ee;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

/* 表示状態 */
.mij-backTop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* スマホ：少しだけ内側に寄せる */
@media (max-width: 640px) {
  .mij-backTop {
    right: 12px;
    bottom: 80px;
    width: 40px;
    height: 40px;
  }

  .mij-backTop__icon {
    font-size: 14px;
  }
}