@charset "UTF-8";
/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
:root {
  --color-base: #f9f6f1;
  --color-main: #6b4f3a;
  --color-accent: #d9a56b;
}

/* ==========================================================================
   _breakpoints.scss
   各ブレークポイントの管理用マップ
   - メディアクエリの条件指定（mq() mixin など）と連携して使用
   ========================================================================== */
.u-font-a {
  font-family: "Noto Sans JP", sans-serif;
}

.u-font-b {
  font-family: "Roboto", sans-serif;
}

.u-font-c {
  font-family: "YuGothic", "Yu Gothic", sans-serif;
}

.u-font-d {
  font-family: "Meiryo", sans-serif;
}

.u-font-e {
  font-family: "Georgia", "Times New Roman", serif;
}

.u-font-f {
  font-family: "Courier New", monospace;
}

.u-font-g {
  font-family: "Hiragino Mincho ProN", serif;
}

.u-font-h {
  font-family: "Playfair Display", "Georgia", serif;
}

.u-font-i {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ===================================================================  
   _variables.scss : グローバル変数の定義テンプレート
   =================================================================== */
/* --------------------------------------------------
   1. z-index（使用頻度の高いレイヤー順）
-------------------------------------------------- */
/* --------------------------------------------------
   2. ボーダー角丸（radius）
-------------------------------------------------- */
/* --------------------------------------------------
   3. ボーダー線の太さ（基本パターン）
-------------------------------------------------- */
/* --------------------------------------------------
   4. シャドウ（影）プリセット
-------------------------------------------------- */
/* --------------------------------------------------
   5. 透明度（opacity）
-------------------------------------------------- */
/* --------------------------------------------------
   6. デバッグ・開発用装飾
-------------------------------------------------- */
/* ============================================================
   _functions.scss
   Sassの関数定義用（rem変換・clamp関数・階層取得・map判定等まとめ）
   Dart Sass 1.56.0 以降の構文対応
============================================================ */
/* -------------------------
   px → rem 変換関数（基準値: 16px）
------------------------- */
/* -------------------------
   rem → px 変換関数（必要に応じて）
------------------------- */
/* -------------------------
   clamp関数（最小値、推奨値、最大値）
   例：clamp(12rem, 2.5vw, 72rem)
------------------------- */
/* -------------------------
   clamp-rem関数（rem単位でのclamp指定）
   例：clamp-rem(14, 18, 24) → clamp(0.875rem, 1.125rem, 1.5rem)
------------------------- */
/* -------------------------
   strip-unit関数（単位を除去）
   例：strip-unit(16px) → 16
------------------------- */
/* -------------------------
   単位チェック関数（is-rem / is-px）
------------------------- */
/* -------------------------
   map-get-deep関数（ネスト対応）
   例：map-get-deep($themes, woman30s, main)
------------------------- */
/* -------------------------
   map-has-deep関数（ネスト存在チェック）
------------------------- */
/* -------------------------
   z-index取得用ショートカット関数
------------------------- */
/* --------------------------------------------------
   _utils.scss
   ユーティリティ向けの共通変数・関数・mixin定義
   （rem変換・ブレークポイント制御）
-------------------------------------------------- */
/* ------------------------------
   rem変換用のルートフォントサイズ
------------------------------ */
/* ------------------------------
   px → rem 変換関数
   使用例：u.rem(16) → 1rem
------------------------------ */
/* ------------------------------
   ブレークポイント定義
   使用例：@include mq(sm) { ... }
------------------------------ */
/* ------------------------------
   メディアクエリ用 mixin
------------------------------ */
/* ============================================================
   _functions.scss
   Sassの関数定義用（rem変換・clamp関数・階層取得・map判定等まとめ）
   Dart Sass 1.56.0 以降の構文対応
============================================================ */
/* ---------------------------------------------
   3. 基本スタイル（base）
--------------------------------------------- */
/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #2f4f4f;
  background-color: #f9f6f1;
}

/* どこかのグローバル（reset/base）に追加 */
html,
body {
  margin: 0;
  padding: 0;
}

/* ついでに横スクロールの保険 */
html {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html {
    overflow-x: hidden;
  }
}
/* --- horizontal overflow guard --- */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
} /* 古いブラウザ用 */
/* flex / grid の子が縮められず横あふれするのを防ぐ */
:is(.flex, .grid, [class*=__row], [class*=__grid]) > * {
  min-inline-size: 0; /* = min-width: 0; */
}

/* ===== base.scss（共通の縦リズム） ===== */
/* 1) fluid spacing tokens */
:root {
  --space-2: clamp(8px, 1vw, 12px);
  --space-3: clamp(12px, 1.4vw, 16px);
  --space-4: clamp(16px, 2vw, 24px);
  --space-6: clamp(24px, 3vw, 36px);
  --space-8: clamp(32px, 4vw, 48px);
  --space-12: clamp(48px, 6vw, 72px);
  --space-16: clamp(64px, 8vw, 112px);
}

/* 2) コンテナ左右の余白 */
.l-inner {
  padding-inline: clamp(20px, 4vw, 48px);
}

/* 3) セクション上下の余白（ページの呼吸） */
.home-section {
  padding-block: clamp(40px, 5.5vw, 72px);
}

.section-title {
  margin: 0 0 var(--space-6);
}

/* 4) セクション直下の兄弟間隔を自動化 */
.home-section > .l-inner > * + * {
  margin-top: var(--space-8);
}

/* 5) テキストの縦流し用ユーティリティ */
.flow > * + * {
  margin-top: var(--space-4);
}

/* 6) よく使う並びの gap を太めに */
.cards-grid,
.posts-grid,
.menu-grid {
  gap: var(--space-6);
}

/* base.scss などに */
:root {
  --divider: color-mix(in srgb, #000 8%, transparent);
}

.home-section {
  position: relative;
}

/* 直後のセクションの上端だけにヘアラインを描く */
@media (min-width: 768px) {
  .home-section + .home-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: clamp(20px, 4vw, 48px); /* .l-inner と揃える */
    right: clamp(20px, 4vw, 48px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--divider), transparent);
    pointer-events: none;
  }
}
/* 最後以外の section の“下端”に極薄ライン */
.home-section:not(:last-of-type)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: clamp(20px, 4vw, 48px); /* .l-inner と揃える */
  right: clamp(20px, 4vw, 48px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--divider), transparent);
  pointer-events: none;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Noto Sans JP", sans-serif;
  color: #3b3029;
  line-height: 1.4;
  margin-block: 0 1.5rem;
}

h1 {
  font-size: 2.625rem;
  font-weight: 700;
}

h2 {
  font-size: 2.25rem;
  font-weight: 700;
  margin-block-end: 1.4em;
}

h3 {
  font-size: 1.875rem;
  font-weight: 700;
  margin-block-end: 1.2em;
}

h4 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-block-end: 1.1em;
}

h5 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-block-end: 1em;
}

h6 {
  font-size: 1rem;
  font-weight: 700;
  margin-block-end: 1em;
}

p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}

small,
.small {
  font-size: 0.875rem;
  color: #f5f5f5;
}

strong {
  font-weight: bold;
}

blockquote {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 0.25rem solid #007bff;
  color: #111111;
  font-style: italic;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.6;
}

.caption {
  font-size: 0.8125rem;
  color: #f5f5f5;
  line-height: 1.4;
}

a {
  color: #007bff;
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
}

.text-base {
  font-size: 1rem;
  color: #111111;
  line-height: 1.8;
}

.text-sub {
  font-size: 0.875rem;
  color: #666666;
  line-height: 1.6;
}

ul,
ol {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

ul li,
ol li {
  line-height: 1.6;
  margin-bottom: 0.25rem;
}

dl {
  margin-bottom: 1rem;
}
dl dt {
  font-weight: bold;
  margin-top: 0.5rem;
}
dl dd {
  margin-left: 1rem;
  line-height: 1.6;
}

hr {
  border: none;
  border-top: 1px solid #e0e6ed;
  margin: 2rem 0;
}

figure {
  margin: 0 0 1.5rem;
}

figcaption {
  font-size: 0.8125rem;
  color: #f5f5f5;
  line-height: 1.4;
  margin-top: 0.5rem;
}

legend {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(8px);
  }
}
.fade-in {
  animation: fade-in 0.5s ease-in-out forwards;
}

.fade-out {
  animation: fade-out 0.5s ease-in-out forwards;
}

@keyframes scale-in {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.scale-in {
  animation: scale-in 0.3s ease-out forwards;
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.slide-in-left {
  animation: slide-in-left 0.4s ease-out forwards;
}

@keyframes slide-in-right {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.slide-in-right {
  animation: slide-in-right 0.4s ease-out forwards;
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-up {
  animation: fade-in-up 0.5s ease-out forwards;
}

.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}

.delay-400 {
  animation-delay: 0.4s;
}

.delay-500 {
  animation-delay: 0.5s;
}

.is-animated {
  opacity: 1;
  pointer-events: auto;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    background-color: #f66;
  }
  50% {
    transform: scale(1.3);
    background-color: #6f6;
  }
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

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

.sr-only-focusable,
.sr-only-focusable:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.heading {
  font-size: 1.5rem;
  font-weight: 700;
  padding-left: 0.75rem;
  border-left: 0.25rem solid #d9a56b;
  color: #111111;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.heading-sub {
  font-size: 1.125rem;
  font-weight: 600;
  color: #666666;
  margin-bottom: 0.75rem;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
}

ul, ol {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

dl {
  margin-bottom: 1.5rem;
}

dt {
  font-weight: bold;
  margin-bottom: 0.25rem;
}

dd {
  margin-left: 1rem;
  margin-bottom: 0.5rem;
}

.img-decoration {
  display: block;
  max-width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.img-card {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  object-fit: cover;
}

.img-frame {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.img-circle {
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.img-center {
  display: block;
  margin-inline: auto;
}

.img-shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ---------------------------------------------
   4. レイアウト構造（layouts）
--------------------------------------------- */
/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-container {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 48rem) {
  .c-container {
    padding: 0 1.5rem;
  }
}

/* ラベル */
.f-label {
  display: block;
  margin: 0 0 0.5rem;
  font-weight: 600;
}

/* 必須マーク */
.req {
  color: #c03535;
  font-weight: 700;
}

/* テキスト入力＆テキストエリア */
.f-input,
.f-textarea,
.contact input[type=text],
.contact input[type=email],
.contact input[type=tel],
.contact input[type=url],
.contact textarea,
.contact select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  appearance: none;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 10px;
  background: #fff;
  line-height: 1.6;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.f-textarea {
  resize: vertical;
}

/* 例：入力フォーカス時（今あるブロックを置き換え） */
.f-input:focus-visible,
.f-textarea:focus-visible {
  /* フォールバック（Chrome <111 等） */
  outline: 3px solid rgba(106, 77, 57, 0.45); /* #6a4d39 45% */
  outline-offset: 2px;
  border-color: #d9a56b;
  box-shadow: 0 0 0 2px rgba(217, 165, 107, 0.22);
}

/* 対応ブラウザだけ色計算を color-mix にアップグレード */
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
  .f-input:focus-visible,
  .f-textarea:focus-visible {
    /* ここは色だけ上書き（サイズはそのまま） */
    outline-color: color-mix(in srgb, #6a4d39 45%, transparent);
  }
}
/* 例：.f-check 内に user-select があるブロックを置き換え */
.f-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  /* ベンダープレフィックスは先、標準は最後 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.f-check input {
  margin-top: 0.25rem;
}

/* 透明のハニーポット */
.hp-field {
  position: absolute !important;
  left: -999em !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.l-inner {
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .l-inner {
    padding-inline: 1.5rem;
  }
}

.l-container {
  width: 100%;
  max-width: 67.5rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media screen and (min-width: 768px) {
  .l-container {
    padding-inline: 1.5rem;
  }
}

.l-section {
  margin-block: 3rem;
}
@media screen and (min-width: 768px) {
  .l-section {
    margin-block: 4rem;
  }
}

.l-inner {
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .l-inner {
    padding-inline: 1.5rem;
  }
}
@media (max-width: 400px) {
  .l-inner {
    padding-inline: 14px;
  }
}
/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.grid {
  display: grid;
  gap: 1rem;
}
.grid--1 {
  grid-template-columns: 1fr;
}
.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid.is-gap-none {
  gap: 0;
}
.grid.is-gap-sm {
  gap: 0.5rem;
}
.grid.is-gap-md {
  gap: 1rem;
}
.grid.is-gap-lg {
  gap: 2rem;
}
@media (max-width: 768px) {
  .grid--2, .grid--3, .grid--4 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .grid.is-collapse-sm {
    grid-template-columns: 1fr !important;
  }
}
.grid.is-center {
  justify-items: center;
  align-items: center;
}
.grid.is-left {
  justify-items: start;
  align-items: start;
}
.grid.is-right {
  justify-items: end;
  align-items: end;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
/* ========== Globals ========== */
:root {
  --adminbar: 0px;
  --header-h: 60px; /* 基準（SP） */
  --header-h-sm: 48px; /* 参照用（必要なら） */
  --ff-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", Meiryo,
    sans-serif;
}

/* アンカーの上オフセット */
html {
  scroll-padding-top: calc(var(--header-h) + var(--adminbar));
}

.section-anchor,
#concept,
#menu,
#voices,
#blog,
#contact,
#menu-drinks,
#menu-food {
  scroll-margin-top: calc(var(--header-h) + var(--adminbar) + 8px);
}

/* WP管理バー */
body.admin-bar {
  --adminbar: 46px;
}

@media (min-width: 783px) {
  body.admin-bar {
    --adminbar: 32px;
  }
}
/* 画面幅でヘッダー高さを上書き（※SPは 991px 以下） */
@media (max-width: 991px) {
  :root {
    --header-h: var(--header-h-sm, 60px);
  }
}
/* ========== Header ========== */
.site-header {
  --h: var(--header-h, 60px);
  position: sticky;
  top: var(--adminbar, 0px);
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease;
  box-sizing: border-box;
  min-height: var(--h); /* ← height ではなく min-height */
}
.site-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: var(--h); /* 中身は固定して縦センター */
  gap: clamp(12px, 3vw, 24px);
}
.site-header__inner > * {
  min-inline-size: 0;
}

/* Brand */
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.site-brand img {
  display: block;
  height: 44px;
  width: auto;
}
.site-brand__text {
  font-weight: 800;
  font-size: 1.15rem;
  color: #3b2b22;
}

@media (min-width: 992px) {
  .site-brand img,
  .custom-logo {
    height: 52px;
    width: auto;
  }
}
/* Toggle */
.nav-toggle {
  inline-size: 40px;
  block-size: 40px;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-toggle .nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #333;
  position: relative;
  transition: background 0.2s;
}
.nav-toggle .nav-toggle__bar::before,
.nav-toggle .nav-toggle__bar::after {
  content: "";
  position: absolute;
  inset: auto 0;
  height: 2px;
  background: #333;
  transition: transform 0.25s;
}
.nav-toggle .nav-toggle__bar::before {
  top: -7px;
}
.nav-toggle .nav-toggle__bar::after {
  top: 7px;
}

.nav-open .nav-toggle .nav-toggle__bar {
  background: transparent;
}

.nav-open .nav-toggle .nav-toggle__bar::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-open .nav-toggle .nav-toggle__bar::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* ========== Desktop Nav (base) ========== */
.site-nav {
  justify-self: end;
}
.site-nav .menu {
  display: flex;
  gap: clamp(12px, 2.2vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: inline-block;
  padding: 0.35rem 0.2rem;
  color: #3b2b22;
  text-decoration: none;
}
.site-nav .current-menu-item > a {
  color: #6b4f3a;
}

/* 下線（PC時） */
.site-header .site-nav .menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  position: relative;
  padding: 0.35rem 0.9rem 0.25rem 0.2rem;
}

.site-header .site-nav .menu > li > a::before {
  content: "";
  position: absolute;
  left: 0.2rem; /* 文字幅に合わせたいなら左右をパディング分に */
  right: 0.9rem;
  bottom: 0; /* テキスト直下。離したいなら -1px ～ -2px */
  height: 2px;
  background: transparent;
  transition: background 0.2s ease, transform 0.2s ease;
  transform: scaleX(0); /* ついでにアニメも */
  transform-origin: left;
}

/* 表示トリガー（現在地/親/aria-current/hover/focus） */
.site-header .site-nav .menu > li > a:hover::before,
.site-header .site-nav .menu > li > a:focus-visible::before,
.site-header .site-nav .current-menu-item > a::before,
.site-header .site-nav .current-menu-ancestor > a::before,
.site-header .site-nav a[aria-current=true]::before {
  background: #d9a56b;
  transform: scaleX(1);
}

/* 低モーション */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}
/* ========== SP Drawer (≤991px) ========== */
@media (max-width: 991px) {
  body.nav-open {
    overflow: hidden;
    overscroll-behavior: contain;
  }
  .site-nav {
    position: fixed;
    inset: var(--adminbar, 0) 0 0 auto;
    inline-size: min(82vw, 320px);
    box-sizing: border-box;
    z-index: 1001;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline: 20px;
    padding-block: calc(var(--h) + 16px) 24px;
    transform: translate3d(calc(100% + 32px), 0, 0);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    background: #fff;
    box-shadow: none;
  }
  .site-nav .menu {
    flex-direction: column;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  /* iOS Safari系のみ：オーバーフローの慣性スクロールを明示 */
  @supports (-webkit-overflow-scrolling: touch) {
    .site-nav {
      -webkit-overflow-scrolling: touch;
    }
  }
  .nav-toggle {
    position: relative;
    z-index: 1002;
  }
  .nav-overlay {
    position: fixed;
    inset: var(--adminbar, 0) 0 0 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
  }
  .nav-overlay[hidden] {
    display: block !important;
    opacity: 0;
    pointer-events: none;
  }
  .nav-open .site-nav {
    transform: translate3d(0, 0, 0);
    box-shadow: -24px 0 40px rgba(0, 0, 0, 0.12);
  }
  .nav-open .nav-overlay {
    display: block;
  }
  /* まず全部の記号をオフにしてから… */
  .site-nav .menu,
  .site-nav .menu li {
    list-style: none !important;
  }
  .site-nav .menu > li::marker,
  .site-nav .menu > li::before,
  .site-nav .menu > li::after,
  .site-nav .menu > li > a::before,
  .site-nav .menu > li > a::after {
    content: none !important;
  }
  .site-nav .menu .dropdown-toggle,
  .site-nav .menu .sub-arrow {
    display: none !important;
  }
  /* 親メニューだけ、右に“くの字”を描き直す */
  .site-nav .menu-item-has-children > a {
    position: relative;
    padding-right: 36px; /* くの字ぶんの余白 */
  }
  .site-nav .menu-item-has-children > a::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-top: 0;
    border-left: 0;
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .site-nav .menu-item-has-children.open > a::after {
    transform: translateY(-50%) rotate(135deg);
  }
  /* サブメニュー開閉（grid トリック） */
  .site-nav .menu-item-has-children > .sub-menu {
    display: grid;
    grid-template-rows: 0fr;
    grid-auto-rows: 0fr;
    overflow: hidden;
    opacity: 0;
    transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
  }
  .site-nav .menu-item-has-children > .sub-menu > * {
    overflow: hidden;
  }
  .site-nav .menu-item-has-children.open > .sub-menu {
    grid-template-rows: 1fr;
    grid-auto-rows: 1fr;
    overflow: visible;
    opacity: 1;
    margin-top: 6px;
    padding-left: 12px;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
  }
  /* 念のためのUAリセット */
  .site-nav ul.sub-menu {
    margin: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
  }
  .site-nav .menu > li,
  .site-nav .sub-menu > li {
    margin: 0 !important;
  }
}
/* ========== Desktop (≥992px) ========== */
@media (min-width: 992px) {
  .site-nav {
    position: static;
    transform: none;
    inline-size: auto;
    display: flex;
    gap: 2rem;
    overflow: visible;
    box-shadow: none;
    padding: 0;
  }
  .site-nav .menu {
    flex-direction: row;
    gap: 1.5rem;
  }
  .nav-toggle,
  .nav-overlay {
    display: none !important;
  }
}
/* ========== PC Dropdown ========== */
@media (min-width: 992px) {
  .site-nav .menu-item-has-children {
    position: relative;
  }
  .site-nav .menu-item-has-children > .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-inline-size: 180px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    z-index: 1002;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .site-nav .menu-item-has-children:hover > .sub-menu,
  .site-nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
  }
  .site-nav .sub-menu > li > a {
    display: block;
    padding: 10px 14px;
    white-space: nowrap;
    line-height: 1.2;
  }
}
/* === 991px以下でロゴが伸びないように強制 === */
@media (max-width: 991px) {
  .site-header .custom-logo,
  .site-header .site-brand img {
    width: auto !important;
    max-width: none !important; /* width:100% などの横伸びを無効化 */
    height: clamp(38px, var(--h) - 8px, 44px) !important; /* ヘッダー高に収める（60pxなら44px） */
    object-fit: contain; /* 念のため */
  }
}
/* PC側も念のため明示（すでに書いてあれば不要） */
@media (min-width: 992px) {
  .site-header .custom-logo,
  .site-header .site-brand img {
    width: auto;
    height: 52px; /* 好みで */
    max-width: none;
  }
}
/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
/* ================================
   Footer
   ================================ */
.l-footer {
  background: #2f2f2f;
  color: #fff;
  padding: 2rem 1rem;
  font-size: 0.875rem;
  /* 内側ラッパー */
}
.l-footer__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  text-align: center;
}
@media (min-width: 768px) {
  .l-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
  }
}
.l-footer {
  /* コンテナ（中央寄せ） */
}
.l-footer__container {
  max-width: 1080px;
  margin: 0 auto;
}
.l-footer {
  /* 上段：ロゴ＋SNS */
}
.l-footer__top {
  text-align: center;
  margin-bottom: 1.5rem;
}
.l-footer__logo img {
  width: 96px;
  height: auto;
  display: inline-block;
}
@media (min-width: 768px) {
  .l-footer__logo img {
    width: 110px;
  }
}
.l-footer {
  /* ================================
   SNS（ブランド色・サイズ調整）
   ================================ */
}
.l-footer__sns {
  /* 上下の余白と並び */
  margin: 1.75rem 0 2rem;
  display: flex;
  justify-content: center;
  gap: 14px;
  /* ボタン（土台） */
}
.l-footer__sns a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  transition: transform 0.15s ease, background-color 0.2s ease;
}
.l-footer__sns a:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.14);
}
.l-footer__sns a {
  /* Font Awesome 本体は ::before なので両方に指定 */
}
.l-footer__sns a i,
.l-footer__sns a i::before {
  font-size: 26px;
  line-height: 1;
  color: inherit; /* ↓のブランド色を継承させる */
}
.l-footer__sns {
  /* —— ブランド別カラー —— */
}
.l-footer__sns a[href*="x.com"] {
  color: #000000;
}
.l-footer__sns {
  /* X */
}
.l-footer__sns a[href*="instagram.com"] {
  color: #e1306c;
}
.l-footer__sns {
  /* Instagram */
}
.l-footer__sns a[href*="line.me"] {
  color: #06c755;
}
.l-footer__sns {
  /* LINE */
}
.l-footer {
  /* 下段：SP=縦積み / PC=2カラム */
}
.l-footer__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 900px) {
  .l-footer__body {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
.l-footer {
  /* 店舗情報 */
}
.l-footer__info p,
.l-footer__info address {
  margin: 0.25rem 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #f2f2f2;
  font-style: normal;
}
.l-footer__info__name {
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.l-footer__info__hours {
  opacity: 0.95;
}
.l-footer {
  /* Google Map */
}
.l-footer__map iframe {
  width: 100%;
  height: 220px;
  border: none;
  border-radius: 8px;
}
@media (min-width: 900px) {
  .l-footer__map iframe {
    height: 240px;
  }
}
.l-footer {
  /* コピーライト */
}
.l-footer__copy {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.78rem;
  opacity: 0.72;
}

/* フォーカス可視化（キーボード操作対策） */
.l-footer__sns a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

/* ホバー時は背景だけ変えて色は維持（ブランド色を保つ） */
.l-footer__sns a:hover i,
.l-footer__sns a:hover i::before {
  color: inherit;
}

/* 郵便番号と住所は必ず改行 */
.l-footer__info .l-footer__address .zip,
.l-footer__info .l-footer__address .street {
  display: block;
}

/* 住所：読み幅を32chに制限し中央寄せ。改行バランスは対応ブラウザだけ適用 */
.l-footer__info .l-footer__address .street {
  max-inline-size: 36h; /* 文字数ベースで読み幅を調整 */
  margin-inline: auto;
  text-align: center;
  /* 変な所での分割を避ける系のフォールバック */
  word-break: normal;
  overflow-wrap: anywhere;
  -webkit-hyphens: none;
  hyphens: none;
  /* 対応ブラウザだけ balance をON */
}
@supports (text-wrap: balance) {
  .l-footer__info .l-footer__address .street {
    text-wrap: balance;
  }
}

/* スマホは読み幅を少しだけ絞っても◎＆左寄せにしたいなら切替 */
@media (max-width: 520px) {
  .l-footer__info .l-footer__address .street {
    max-inline-size: 28ch;
    text-align: left;
  }
  .l-footer__hours {
    text-align: left;
  }
}
.home-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}
.home-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.home-hero__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
  padding: 0 1rem;
}
.home-hero__title {
  font-size: clamp(28px, 5vw, 64px);
  margin-bottom: 0.5em;
}
.home-hero__catch {
  font-size: clamp(16px, 2vw, 24px);
  margin-bottom: 1.5em;
}
.home-hero__cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
/* 変数（cafe テーマ前提） */
:root {
  --color-base: #f9f6f1;
  --color-main: #6b4f3a;
  --color-accent: #d9a56b;
}

/* ===============================
   Front Page (Hero / Sections)
   =============================== */
/* ==============================
   MV / Hero — fixed for Swiper
   ============================== */
:root {
  --hero-overlay-top: 0.18;
  --hero-overlay-mid: 0.32;
  --hero-overlay-btm: 0.52;
}

/* ===== Hero base ===== */
.home-hero {
  position: relative;
  width: 100%;
  margin-inline: calc(50% - 50vw);
  min-height: clamp(520px, 82vh, 1000px);
  overflow: hidden;
  isolation: isolate;
  padding-bottom: clamp(64px, 10vh, 120px); /* CTAぶんの底上げ */
  padding-top: 0;
}

/* 横スクが出る環境があれば、上の2行を↓に変更
  width:100%;
  margin-inline:0;
*/
.home-hero .swiper {
  width: 100%;
  height: 100%;
  min-height: inherit;
  margin: 0;
}

.home-hero .swiper-wrapper,
.home-hero .swiper-slide {
  height: 100%;
}

.home-hero .swiper-slide picture,
.home-hero .swiper-slide picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* グローバル固定は危険。必要なら画像ごとに .-left / .-center クラスで個別制御へ */
  object-position: 55% 45%;
}

/* ===== Overlay ===== */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, var(--hero-overlay-top)) 0%, rgba(0, 0, 0, var(--hero-overlay-mid)) 55%, rgba(0, 0, 0, var(--hero-overlay-btm)) 100%);
}

.home-hero__texts {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  text-align: center;
  padding-inline: min(6vw, 40px);
  max-width: min(92vw, 1040px);
  margin-inline: auto;
}

.home-hero__title {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.01em;
  font-size: clamp(28px, 5vw, 60px);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  margin: 0 0 0.55em;
  /* ---- フォールバック ---- */
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  max-width: 32ch; /* 行長を制御して読みやすさを担保 */
  /* ---- モダンブラウザのみ ---- */
}
@supports (text-wrap: balance) {
  .home-hero__title {
    max-width: none;
    text-wrap: balance;
  }
}

.u-sp-only {
  display: none;
}

.u-line {
  display: inline;
  white-space: nowrap;
}

.home-hero__catch {
  color: #f2f2f2;
  opacity: 0.95;
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.7;
  margin: 0 auto 1.5rem;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
  /* ---- フォールバック ---- */
  white-space: normal;
  max-width: 40ch; /* 1行が長すぎないように調整 */
  /* ---- モダンブラウザのみ ---- */
}
@supports (text-wrap: balance) {
  .home-hero__catch {
    max-width: none;
    text-wrap: balance;
  }
}

/* ===== CTA ===== */
.home-hero__cta {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 6vh, 64px);
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;
  width: min(92vw, 720px);
  z-index: 2;
}

/* ===== Media queries ===== */
/* ～480px：スマホ縦 */
@media (max-width: 480px) {
  .home-hero__title {
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.35;
    text-align: center;
  }
  .home-hero__catch {
    font-size: clamp(13px, 4.2vw, 16px);
    line-height: 1.6;
    max-width: 88vw;
  }
}
/* 481–767px：スマホ横～小タブ */
@media (min-width: 481px) and (max-width: 767px) {
  .home-hero__title {
    font-size: clamp(22px, 5.2vw, 30px);
    line-height: 1.35;
  }
  .home-hero__catch {
    font-size: clamp(14px, 3.2vw, 18px);
    max-width: 88vw;
  }
}
/* 768～1199px：タブレット横～小型PC */
@media (min-width: 768px) and (max-width: 1199px) {
  .home-hero__title {
    font-size: clamp(26px, 3.8vw, 38px);
    line-height: 1.3;
    max-width: min(90vw, 32ch);
  }
  .home-hero__catch {
    font-size: clamp(15px, 2.5vw, 19px);
    max-width: none;
    white-space: nowrap; /* 1行固定 */
    margin-inline: auto;
  }
}
/* 1200～1439px：中型PC */
@media (min-width: 1200px) and (max-width: 1439px) {
  .home-hero__title {
    font-size: clamp(28px, 3.8vw, 48px);
    white-space: nowrap; /* PC: 1行固定 */
  }
  .home-hero__catch {
    font-size: clamp(16px, 2vw, 20px);
  }
}
/* 1440px～：広いPC */
@media (min-width: 1440px) {
  .home-hero__title {
    font-size: clamp(30px, 3.5vw, 56px);
    white-space: nowrap;
  }
  .home-hero__catch {
    font-size: clamp(16px, 1.8vw, 22px);
  }
}
/* ===============================
   Concept / Spotlight  (mobile-first)
   =============================== */
/* アンカーずれ対策（ヘッダー分の上オフセット） */
#concept {
  scroll-margin-top: calc(var(--header-h, 60px) + var(--adminbar, 0px) + 8px);
}

/* 枠（画像＋オーバーレイの土台） */
.spotlight {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  inline-size: min(100%, 1120px);
  margin: clamp(16px, 3vw, 24px) auto;
}

/* 写真：モバイルは 16:9 で見切る */
.spotlight__media img,
.spotlight > img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* --- モバイル（既定）：重ねない＝独立カード表示 --- */
.spotlight__content {
  position: static;
  margin: 10px auto 0;
  padding: clamp(12px, 3vw, 18px);
  max-inline-size: min(92vw, 640px);
  border-radius: 12px;
  /* blur 非対応でも確実に読める白カード */
  background: #fff;
  color: var(--color-text, #222);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

/* 画像下グラデは、重ねないモバイルでは不要 */
.spotlight::after {
  display: none;
}

/* かなり狭い端末（≤360px）：余白だけ微調整 */
@media (max-width: 360px) {
  .spotlight__content {
    margin: 10px auto 0;
    max-inline-size: min(92vw, 620px);
  }
}
/* --- 768px 以上：画像の上に重ねる（可読性最優先） --- */
@media (min-width: 768px) {
  .spotlight__content {
    position: absolute;
    left: clamp(16px, 2.5vw, 24px);
    right: clamp(16px, 2.5vw, 24px);
    bottom: clamp(16px, 2.5vw, 24px);
    margin: 0;
    max-inline-size: none;
    /* フォールバック（blur非対応/低性能時）＝白パネル */
    background: rgba(255, 255, 255, 0.94);
    color: #222;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    z-index: 1;
  }
  /* 写真下部にうっすら暗めグラデを入れて視認性を底上げ */
  .spotlight::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.12) 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  /* 対応端末だけガラス効果へ差し替え（読みやすさ重視の値） */
  @supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
    .spotlight__content {
      background: rgba(255, 255, 255, 0.1);
      -webkit-backdrop-filter: blur(8px) saturate(1.1);
      backdrop-filter: blur(8px) saturate(1.1);
      border-color: rgba(255, 255, 255, 0.22);
      color: #fff;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    }
  }
}
/* --- 992px 以上：わずかにリッチ化（性能に余裕がある想定） --- */
@media (min-width: 992px) {
  @supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
    .spotlight__content {
      background: rgba(255, 255, 255, 0.18);
      -webkit-backdrop-filter: blur(10px) saturate(1.05);
      backdrop-filter: blur(10px) saturate(1.05);
    }
    /* 文字の下だけ薄く明度ブースト（均一膜） */
    .spotlight__content::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: rgba(255, 255, 255, 0.18);
    }
  }
}
/* テキスト（共通） */
.spotlight__lead {
  margin: 0 0 0.8rem;
  font-size: clamp(15px, 0.98rem + 0.2vw, 18px);
  line-height: 1.9;
}

/* CTA（Concept用の軽いボタン） */
.spotlight__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(106, 77, 57, 0.35); /* brandの薄枠 */
  background: #6b4f3a;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
  transition: transform 0.08s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.spotlight__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.spotlight__cta:active {
  transform: translateY(0);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
}

@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .spotlight__content {
    background: rgba(255, 255, 255, 0.96);
    color: #222;
    text-shadow: none;
    border-color: rgba(0, 0, 0, 0.08);
  }
}
@media (min-width: 768px) {
  .spotlight::after {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.22) 35%, transparent 65%);
  }
}
/* スマホ時の左右ガター */
@media (max-width: 768px) {
  .home-contact .l-inner,
  .contact-section .l-inner,
  .wpcf7 form {
    padding-inline: clamp(14px, 4.5vw, 22px);
  }
}
/* フォームカードの幅と中央寄せ（任意） */
.home-contact .form-card,
.contact-section .form-card,
.wpcf7 form {
  width: min(92vw, 720px);
  margin-inline: auto;
}

/* カード幅を制限（任意） */
.contact-form form {
  width: min(92vw, 720px);
  margin-inline: auto;
  box-sizing: border-box;
}

/* セクションのアンカーずれ対策（固定ヘッダーぶん） */
#contact {
  scroll-margin-top: calc(var(--header-h, 60px) + var(--adminbar, 0px) + 8px);
}

/* カード幅＆センタリング */
.contact .contact-form {
  width: min(92vw, 720px);
  margin-inline: auto;
  box-sizing: border-box;
}

/* スマホの左右ガター */
@media (max-width: 768px) {
  .contact .l-inner,
  .contact .contact-form {
    padding-inline: clamp(14px, 4.5vw, 22px);
    box-sizing: border-box;
  }
}
/* 行レイアウト（2カラム → 1カラム） */
.contact .contact-form__grid {
  --gap: clamp(12px, 2.8vw, 18px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.contact .f-row {
  flex: 1 1 100%; /* 基本は1カラム */
  min-width: 0; /* 右端に張り付いたり溢れるのを防止 */
}

.contact .f-row--full {
  flex-basis: 100%;
}

/* タブレット以上で2カラム化したい行は .f-row（デフォルト）、
   全幅で使いたい行は .f-row--full を付与済みなのでそのままOK */
@media (min-width: 768px) {
  .contact .f-row {
    flex: 1 1 calc(50% - var(--gap) / 2);
  }
  .contact .f-row--full {
    flex-basis: 100%;
  }
}
/* 送信ボタン行 */
.contact .f-row--actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(8px, 1.5vw, 12px);
}

/* ===============================
   Menu (集約・一本化)
   =============================== */
/* 480px以下=1列 / 768px以上=3列 */
.home-menu__grid {
  display: grid;
  gap: clamp(16px, 3vw, 28px);
  grid-template-columns: 1fr;
  margin-top: 16px;
  justify-items: stretch;
}
@media (min-width: 768px) {
  .home-menu__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.home-menu__item {
  list-style: none;
}

/* ========== Figure Card ========== */
/* 画像を包むボタンを“ブロック要素・幅100%”に */
.home-menu__card {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: zoom-in;
}

/* figure も幅100%＆余白ゼロに */
.home-menu__figure {
  position: relative;
  width: 100%;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-menu__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* ========== 品名＋価格バー（端まで） ========== */
/* 共通 */
.home-menu__meta {
  position: absolute;
  inset: auto 8px 8px 8px; /* ← 左右を 8px 内側に収める */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  color: #6b4f3a;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

/* モダンブラウザ */
@supports (-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px)) {
  .home-menu__meta {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(3px) saturate(1.05);
    backdrop-filter: blur(3px) saturate(1.05);
  }
}
/* SP調整（767px以下） */
@media (max-width: 767px) {
  .home-menu__meta {
    inset: auto 6px 6px 6px; /* ← 余白をさらに小さく */
    padding: 4px 8px; /* ← バー自体をコンパクトに */
    font-size: 12px;
  }
  .home-menu__grid {
    justify-items: center;
  }
  .home-menu__item {
    width: 100%; /* グリッド幅いっぱい */
    max-width: 420px; /* 好みで 360～420px あたり */
    margin-inline: auto; /* 中央寄せ */
  }
}
/* 中身の伸縮（SPでの押し出し防止） */
.home-menu__name {
  flex: 1 1 auto;
  min-width: 0; /* ← 省略記号を効かせる鍵 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(12px, 1.4vw, 14px);
}

.home-menu__price {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: clamp(12px, 1.4vw, 14px);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(217, 165, 107, 0.4);
  color: #6b4f3a;
}

/* 動きが苦手な環境への配慮 */
@media (prefers-reduced-motion: reduce) {
  .home-menu__figure,
  .home-menu__figure img,
  .home-menu__meta {
    transition: none !important;
  }
}
/* ===============================
   Blog / CTA / Lightbox
   =============================== */
.home-blog__list {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  list-style: none; /* ← マーカーを消す */
  margin: 0; /* ← ブラウザ既定の外側余白を消す */
  padding: 0;
}
@media (min-width: 768px) {
  .home-blog__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.home-blog__list img {
  border-radius: 12px;
}

/* Blog セクションのヒント文（中央寄せ） */
.home-blog__note-wrap {
  display: flex;
  justify-content: center; /* 要素自体を中央配置 */
}

.home-blog__note {
  text-align: left;
  margin: 0.75rem auto 2rem;
  max-width: clamp(36ch, 90vw, 56ch);
  line-height: 1.75;
  font-size: clamp(13px, 1.4vw, 14px);
  color: rgba(0, 0, 0, 0.58); /* フォールバック */
}
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
  .home-blog__note {
    color: color-mix(in srgb, #6b4f3a 38%, #000); /* ブランド寄りの中間色 */
  }
}
.home-blog__note .nowrap {
  white-space: nowrap;
}
@media (max-width: 767px) {
  .home-blog__note .home-blog__note {
    max-width: min(92vw, 36ch); /* 30–36chの範囲で好みに調整 */
    margin-inline: auto;
    overflow-wrap: normal;
    word-break: normal;
    line-break: strict;
  }
  @supports (text-wrap: balance) {
    .home-blog__note .home-blog__note {
      text-wrap: balance;
    }
  }
}
@media (min-width: 768px) {
  .home-blog__note .home-blog__note {
    max-width: 56ch;
  }
}
@media (max-width: 400px) {
  .home-blog__note .home-blog__note {
    text-align: left !important;
  }
}

.home-blog__item {
  background: #fff;
  color: #2f2f2f;
  border-radius: 12px;
  padding: 16px;
  list-style: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.home-cta {
  background: color-mix(in srgb, #f9f6f1 70%, white);
  text-align: center;
}

.home-blog__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.home-blog__link:hover .home-blog__title {
  text-decoration: underline; /*  hover時だけ下線で可読性UP */
}

/* 仕切り図形 */
.c-sep {
  display: grid;
  place-items: center;
  color: rgba(217, 165, 107, 0.55);
  margin: 16px 0 24px;
}

/* 紹介文（Gutenbergでも崩れにくく） */
.blog-intro {
  margin-bottom: clamp(20px, 4vw, 32px);
}

.blog-intro > *:first-child {
  margin-top: 0;
}

.blog-intro > *:last-child {
  margin-bottom: 0;
}

/* Blogカード：タイトル＆抜粋の見た目調整 */
.home-blog__title {
  font-weight: 800;
  line-height: 1.35;
  font-size: clamp(18px, 5vw, 22px); /* SP(1列)は読みやすく大きめ */
  margin: 0.35em 0 0.45em;
}

/* 768～1023px：3カラム帯は少し小さく */
@media (min-width: 768px) and (max-width: 1023px) {
  .home-blog__title {
    font-size: clamp(15px, 2vw, 18px);
  }
  .home-blog__date {
    font-size: 12px;
    opacity: 0.85;
  }
}
/* 1024px～：PCは少し戻す（列幅に余裕が出る） */
@media (min-width: 1024px) {
  .home-blog__title {
    font-size: clamp(16px, 1.5vw, 20px);
  }
}
.home-blog__title,
.home-blog__excerpt {
  display: -webkit-box; /* WebKit 系の必要セット */
  -webkit-box-orient: vertical;
  overflow: hidden; /* 非対応環境のフォールバックでも効く */
  /* 先に標準、次に -webkit（lint 対策） */
  -webkit-line-clamp: 2; /* 旧 WebKit */
  line-clamp: 2; /* 標準 */
}

/* タイトル：2行まで（フォールバック用の高さ指定はそのまま） */
.home-blog__title {
  line-height: 1.35;
  max-height: 2.7em;
}

/* 抜粋：2行まで */
.home-blog__excerpt {
  line-height: 1.6;
  max-height: 3.2em;
}

/* 標準実装では overflow: clip が推奨（対応環境だけ差し替え） */
@supports (overflow: clip) {
  .home-blog__title,
  .home-blog__excerpt {
    overflow: clip;
  }
}
/* line-clamp を実装していない環境向けの最後の保険（任意） */
@supports not (line-clamp: 2) {
  .home-blog__title,
  .home-blog__excerpt {
    display: block; /* -webkit-box が無効な環境での保険 */
  }
}
/* ========== Single (記事ページ) タイトル調整 ========== */
/* 記事タイトル：まずは汎用フォールバック */
.single .post-title {
  overflow-wrap: anywhere; /* 長い英字やURLのはみ出し対策 */
  word-break: break-word; /* Safariの癖対策（anywhere未対応の古環境向け） */
  line-break: loose; /* 日本語の折り返しを少し緩めに */
}

/* 「テキストをバランスよく折る」対応ブラウザで強化 */
@supports (text-wrap: balance) {
  .single .post-title {
    text-wrap: balance;
  }
}
/* 英語など“ハイフン分割”が有効な言語だけで使う */
:lang(en) .single .post-title {
  -webkit-hyphens: auto; /* 先にベンダー付きを書く */
  hyphens: auto; /* 次に標準プロパティ */
  word-break: normal; /* hyphens優先に戻す */
  overflow-wrap: normal;
}

/* メタ(投稿日・カテゴリ)も少し控えめに */
.single .post-meta {
  display: flex;
  gap: 12px;
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: clamp(12px, 2vw, 20px);
}

.single h1.c-heading-lv2.post-title {
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.25;
  letter-spacing: 0.01em;
}

/* 記事ページでヘッダー下に余白を作る（初期表示の重なり防止） */
.single .site-main {
  padding-top: calc(var(--header-h, 60px) + var(--adminbar, 0px) + 12px);
}

/* 念のため、タイトルへ内部リンクで飛んだ時のずれも補正 */
.single .entry-header,
.single .entry-title {
  scroll-margin-top: calc(var(--header-h, 60px) + var(--adminbar, 0px) + 8px);
}

.post-comments {
  padding-block: clamp(28px, 6vw, 64px);
}

.comments-area,
#comments,
.comment-respond {
  max-width: min(92vw, 760px);
  margin-inline: auto;
}

/* メインラッパに上スペーサーを差し込む（どれかにヒットすればOK） */
body.single .site-main,
body.single .content-area,
body.single .l-main,
body.single #main,
body.single main {
  position: relative;
}

body.single .site-main::before,
body.single .content-area::before,
body.single .l-main::before,
body.single #main::before,
body.single main::before {
  content: "";
  display: block;
  height: calc(var(--header-h, 60px) + var(--adminbar, 0px) + 12px);
}

/* 念のため：タイトル位置にスクロールで飛んだ時のずれも補正 */
body.single .entry-header,
body.single .entry-title,
body.single .post-header,
body.single .article-header {
  scroll-margin-top: calc(var(--header-h, 60px) + var(--adminbar, 0px) + 8px);
}

/* 記事内の見出しに着地オフセット（目次・直リンク対策） */
body.single article h2,
body.single article h3,
body.single article h4,
body.single article h5,
body.single article h6 {
  scroll-margin-top: calc(var(--header-h, 60px) + var(--adminbar, 0px) + 8px);
}

.menu-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  place-items: center;
  background: rgba(0, 0, 0, 0.56);
  padding: min(6vw, 24px);
}

.menu-lightbox.is-open {
  display: grid;
}

.menu-lightbox__img {
  max-width: 92vw;
  max-height: 80vh;
  border-radius: 12px;
  display: block;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.menu-lightbox__cap {
  transform: translateY(-70px);
  margin-top: 0;
  color: #fff;
  text-align: center;
  font-size: clamp(14px, 1.8vw, 16px);
  font-weight: 600;
}

.menu-lightbox__close {
  position: absolute;
  top: 27px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

/* 動き弱め（配慮） */
@media (prefers-reduced-motion: reduce) {
  .home-menu__link picture,
  .home-menu__link img {
    transition: none;
  }
}
/* ===============================
   Voices（口コミ）— 正書（整理版）
   依存: 992px で2カラム
   =============================== */
/* セクション変数 */
.home-voices {
  --gap: clamp(16px, 3vw, 28px);
  --radius: 14px;
  --shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  --pad: clamp(16px, 3.2vw, 28px);
}

/* リスト */
.home-voices__list,
.home-voices .voices__list {
  /* 互換 */
  display: grid;
  gap: var(--gap);
}

/* カード（画像 + テキスト） */
.voice-card,
.home-voices .voices__item {
  /* 互換 */
  display: grid;
  grid-template-columns: 1fr; /* SP: 縦積み */
  gap: var(--gap);
  align-items: center;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  padding: var(--pad);
  overflow: hidden;
  /* 交互反転 */
}
.voice-card.is-reverse, .voice-card.is-rev,
.home-voices .voices__item.is-reverse,
.home-voices .voices__item.is-rev {
  /* 互換 */
}
@media (min-width: 992px) {
  .voice-card.is-reverse .voice-card__media,
  .voice-card.is-reverse .voices__figure, .voice-card.is-rev .voice-card__media,
  .voice-card.is-rev .voices__figure,
  .home-voices .voices__item.is-reverse .voice-card__media,
  .home-voices .voices__item.is-reverse .voices__figure,
  .home-voices .voices__item.is-rev .voice-card__media,
  .home-voices .voices__item.is-rev .voices__figure {
    order: 2;
  }
  .voice-card.is-reverse .voice-card__body,
  .voice-card.is-reverse .voices__quote, .voice-card.is-rev .voice-card__body,
  .voice-card.is-rev .voices__quote,
  .home-voices .voices__item.is-reverse .voice-card__body,
  .home-voices .voices__item.is-reverse .voices__quote,
  .home-voices .voices__item.is-rev .voice-card__body,
  .home-voices .voices__item.is-rev .voices__quote {
    order: 1;
  }
}

/* 画像 */
.voice-card__media,
.home-voices .voices__figure {
  /* 互換 */
  position: relative;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
}
.voice-card__media img,
.voice-card__media picture,
.home-voices .voices__figure img,
.home-voices .voices__figure picture {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  transform: translateZ(0);
}
.voice-card__media,
.home-voices .voices__figure {
  /* 下部に薄いグラデ */
}
.voice-card__media::after,
.home-voices .voices__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.15));
  pointer-events: none;
}

/* 本文側 */
.voice-card__body,
.home-voices .voices__quote {
  /* 互換 */
  padding: clamp(6px, 1.2vw, 10px);
  display: grid;
  align-content: center;
  gap: 0.9rem;
}

/* 引用：自然な折返し（SP/PC共通） */
.voice-quote,
.home-voices .voices__text {
  /* 互換 */
  position: relative; /* ::before の基準 */
  display: block !important; /* 旧 -webkit-box の打消し */
  white-space: normal !important;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
  text-overflow: clip;
  margin: 0 0 0.8em;
  font-size: clamp(18px, 1.35vw, 22px); /* 収まりやすい可変 */
  line-height: 1.8;
  letter-spacing: 0.01em;
  font-weight: 700;
  color: #2d2a27;
  font-feature-settings: "palt" 1;
  /* 折返し：日本語は anywhere を避ける（SP側で上書きあり） */
  overflow-wrap: anywhere;
  word-break: normal;
  /* 装飾クォートぶんの左余白 */
  padding-left: 0.8em;
}

/* 左の装飾クォート */
.voice-quote::before,
.home-voices .voices__text::before {
  content: "“";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: #a68a6f;
  opacity: 0.5;
  font-weight: 700;
}

/* お名前 */
.voice-cite,
.home-voices .voices__name {
  /* 互換 */
  display: block;
  margin-top: 0.4em;
  color: #6b5a49;
  font-weight: 700;
  font-size: clamp(14px, 1.4vw, 16px);
}

/* ホバー（動き配慮） */
.voice-card:hover .voice-card__media img,
.home-voices .voices__item:hover .voices__figure img {
  /* 互換 */
  transform: scale(1.02);
  transition: transform 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .voice-card:hover .voice-card__media img,
  .home-voices .voices__item:hover .voices__figure img {
    transform: none !important;
    transition: none !important;
  }
}
/* ── セクション冒頭リード ───────────────────────── */
/* ラッパ：中央配置の土台 */
.home-voices__intro,
.voices__intro {
  display: grid;
  justify-items: center; /* 子を中央配置 */
  text-align: center; /* 子で左に戻す */
  line-height: 1.8;
  font-size: clamp(15px, 1.6vw, 18px);
  color: #5a514a;
  margin-inline: auto;
}

/* リード文（本文） */
.voices__intro-lead {
  width: min(90%, 56ch); /* 基本はやや細め */
  max-width: 56ch;
  margin: 0.75rem auto 2rem;
  text-align: left;
  /* 日本語の自然な折返し */
  overflow-wrap: normal;
  word-break: normal;
}

/* MD以上：2行固定（改行のみで折らせる） */
@media (min-width: 768px) {
  .br-md {
    display: inline;
  }
  .lead-chunk {
    white-space: nowrap;
  } /* 改行位置以外で折返さない */
  .voices__intro-lead {
    max-inline-size: none;
    width: min(82%, 52ch);
    max-width: 52ch;
  }
}
/* XL：見出し系は48chが端正 */
@media (min-width: 1200px) {
  .voices__intro-lead {
    width: 48ch;
    max-width: 48ch;
  }
}
/* ── レイアウト（PCでテキスト側を広めに） ─────────────── */
@media (min-width: 992px) {
  .voice-card {
    /* 画像 : テキスト = 0.95 : 1.25（基本1行に収まりやすい） */
    grid-template-columns: 0.95fr 1.25fr;
    border-radius: 12px;
  }
  .voice-card img {
    border-radius: 12px;
  }
  .voice-card.is-reverse,
  .home-voices .voices__item.is-rev {
    /* 互換 */
    grid-template-columns: 1.25fr 0.95fr;
    border-radius: 12px;
  }
}
/* ── 旧指定の後始末：残存制限の打消し ─────────────────── */
.voice-card__body,
.voice-quote,
.home-voices .voices__text {
  max-inline-size: none !important;
  width: auto !important;
}

/* ── JP向け：狭幅時の折返しを自然に ─────────────────── */
@media (max-width: 640px) {
  .voice-quote,
  .home-voices .voices__text {
    max-inline-size: none !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-break: strict; /* 句読点の禁則（対応ブラウザ） */
  }
}
/* ── 英文混在時のみハイフン分割 ─────────────────────── */
:lang(en) .voice-quote,
:lang(en) .home-voices .voices__text {
  -webkit-hyphens: auto; /* Safari/iOS */
  -ms-hyphens: auto; /* 旧 Edge / IE（任意） */
  hyphens: auto; /* 標準（最後に） */
  overflow-wrap: break-word;
  word-break: normal;
}

/* ========== Contact ========== */
.contact {
  /* 雰囲気：ややベージュ寄りの淡色 */
  background: #f7f3ec;
}

.contact__lead-center {
  display: flex;
  justify-content: center;
  text-align: center;
}

.contact__lead {
  margin: 0 0 1.25rem;
  text-align: left;
  color: #6b5a49;
  line-height: 1.9;
}
.contact__lead a {
  font-weight: 700;
  text-decoration: underline;
}

.contact-form__grid {
  display: grid;
  gap: clamp(14px, 2vw, 18px);
  grid-template-columns: 1fr; /* SP */
}
@media (min-width: 768px) {
  .contact-form__grid {
    grid-template-columns: repeat(2, 1fr); /* md+ */
  }
}

.f-row {
  display: grid;
  gap: 6px;
}

.f-row--full {
  grid-column: 1/-1;
}

.f-row--actions {
  grid-column: 1/-1;
  text-align: center;
  margin-top: 0.5rem;
}

.f-label {
  font-weight: 700;
  color: #3b2b22;
}

.req {
  display: inline-block;
  margin-left: 0.25em;
  color: #c44;
}

.f-input,
.f-textarea {
  width: 100%;
  border: 1px solid #e0e0da;
  border-radius: 10px;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  background: #fff;
  color: #2f2f2f;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.f-input:focus,
.f-textarea:focus {
  outline: none;
  border-color: #d9a56b; /* $color-button-hover 相当 */
  box-shadow: 0 0 0 3px rgba(217, 165, 107, 0.25);
}

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

/* ハニーポット：人には見えない */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 管理バーの押し下げを無効化（フロントのみ） */
html {
  margin-top: 0 !important;
}

/* 管理バーは画面上に固定しておく（被り防止） */
#wpadminbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* 基準（全幅） */
:root {
  --h2-pad: clamp(28px, 6vw, 120px); /* h2 の左オフセット */
  --h3-gap: 40px;
}

.home-section .c-heading-lv2 {
  padding-inline-start: var(--h2-pad);
}

.home-menu__group-title {
  display: inline-block;
  /* ⬇ 背景ごと右へ移動（ここがポイント） */
  margin-inline-start: calc(var(--h2-pad) + var(--h3-gap));
  /* 上下マージンは block で指定 */
  margin-block: clamp(12px, 1.6vw, 20px) clamp(20px, 2.2vw, 28px);
  /* pill 本体の内側余白は左右同じに */
  padding: 0.35em 0.9em;
  border-radius: 999px;
  background: #f3ebe4;
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 0.03em;
  background: color-mix(in srgb, #d9a56b 20%, white);
}

/* 1200px 以上だけ微調整したいなら、変数だけ上書き */
@media (min-width: 1200px) {
  :root {
    --h2-pad: clamp(48px, 8vw, 120px);
    /* --h3-gap: 20px;  // 変えたければここで */
  }
}
label[for=cf-agree] {
  font-size: 1rem;
  line-height: 1.7;
}

@media (max-width: 600px) {
  label[for=cf-agree] {
    font-size: 0.95rem;
  }
}
@media (max-width: 375px) {
  label[for=cf-agree] {
    font-size: 0.9rem;
  }
}
/* アラートは縦積みで固定 */
#contact-alert {
  display: block; /* 念のため flex/grid を打ち消す */
}

#contact-alert > * {
  width: 100%; /* 横並び対策の保険 */
}

/* 1行目の本文と、その下にリスト */
#contact-alert p {
  margin: 0 0 0.4rem;
}

/* リストの体裁を強制 */
#contact-alert .c-alert__list {
  display: block !important; /* 横並び化されていたら打ち消す */
  float: none !important; /* 万一のfloat対策 */
  margin: 0.2rem 0 0;
  padding-left: 1.2em;
  list-style: disc;
}

#contact-alert .c-alert__list li {
  list-style: disc;
  margin: 0.15rem 0;
}

/* =========================
   layouts/_404.scss（404専用）
   ========================= */
/* base */
.not-found {
  padding-block: clamp(32px, 6vw, 72px);
  text-align: left;
}

/* headings */
.not-found__title {
  font-size: clamp(22px, 2.2vw, 28px);
  margin: 0 0 8px;
}

.not-found__lead {
  color: rgba(0, 0, 0, 0.66);
  margin: 0 0 20px;
}

/* actions / lists */
.not-found__actions {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
}

.not-found__links ul,
.not-found__posts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.not-found__links li {
  margin: 6px 0;
}

.not-found__links .nf-sub {
  margin-left: 1rem;
  color: rgba(0, 0, 0, 0.7);
}

.not-found__h2 {
  font-size: 1rem;
  margin: 28px 0 12px;
  color: rgba(0, 0, 0, 0.7);
}

.not-found__posts li {
  margin: 6px 0;
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

.not-found__posts time {
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.9em;
}

.not-found__back .btn {
  display: inline-block;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: #6a4d39;
  color: #fff;
  text-decoration: none;
}

/* >=992px：中央寄せ・幅 860px */
@media (min-width: 992px) {
  .l-inner.not-found,
  .not-found {
    max-width: 860px;
    margin-inline: auto;
  }
  .l-inner.not-found {
    padding-inline: clamp(16px, 4vw, 24px);
  }
}
/* ── 検索フォーム：モバイルファースト（基本は縦積み） */
.not-found .search-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.not-found .search-field {
  inline-size: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}

.not-found .search-submit {
  width: 100%;
  padding: 0.6rem;
  border-radius: 999px;
  background: #6a4d39;
  color: #fff;
  border: 0;
  cursor: pointer;
}

@media (min-width: 481px) and (max-width: 991px) {
  .not-found .search-form {
    flex-wrap: nowrap;
  }
  .not-found .search-field {
    /* 50vw → 60vw に戻す／min少し上げるのもアリ */
    inline-size: clamp(300px, 60vw, 460px);
  }
  .not-found .search-submit {
    width: auto;
    padding: 0.55rem 0.9rem;
  }
}
/* >=992px：横並び固定・入力欄やや広め */
@media (min-width: 992px) {
  .not-found .search-form {
    flex-wrap: nowrap;
  }
  .not-found .search-field {
    inline-size: clamp(320px, 40vw, 560px);
  }
  .not-found .search-submit {
    width: auto;
    padding: 0.55rem 1rem;
  }
}
/* ── SPの“上に被る”対策：ヘッダー＋管理バーぶんだけ余白
   ※ var(--header-h) / var(--adminbar) が無くても 60px/0px で動作 */
@media (max-width: 991px) {
  .l-inner.not-found,
  .not-found {
    padding-top: calc(var(--header-h, 60px) + var(--adminbar, 0px) + 8px);
  }
  .not-found .search-field {
    inline-size: clamp(360px, 40vw, 560px);
  }
}
/* 〜480px：入力欄→ボタンの縦積み、ボタンは全幅 */
@media (max-width: 480px) {
  .not-found .search-form {
    flex-wrap: wrap;
    gap: 10px;
  }
  .not-found .search-field {
    inline-size: 100%;
  }
  .not-found .search-submit {
    inline-size: 100%;
    padding: 0.6rem;
  }
}
/* === 404: placeholder 切れ対策（最後に追記） === */
/* 入力欄の「×」等の装飾を消して内側の幅を確保 */
.not-found input.search-field {
  -webkit-appearance: none;
  appearance: none;
  text-overflow: ellipsis; /* 収まり切らない時は…で省略 */
  overflow: hidden;
  /* Safari の cancel ボタン分の余白確保（念のため） */
  padding-right: 0.9rem;
}

.not-found input.search-field::-webkit-search-cancel-button,
.not-found input.search-field::-webkit-search-decoration {
  display: none;
}

/* placeholder を段階的に小さく（確実に勝たせるため input 指定＋!important） */
@media (max-width: 530px) {
  .not-found input.search-field::placeholder {
    font-size: 0.85rem !important;
  }
  .not-found input.search-field::-webkit-input-placeholder {
    font-size: 0.85rem !important;
  }
  .not-found input.search-field::-moz-placeholder {
    font-size: 0.85rem !important;
  }
  .not-found input.search-field:-ms-input-placeholder {
    font-size: 0.85rem !important;
  }
}
@media (max-width: 420px) {
  .not-found input.search-field::placeholder {
    font-size: 0.78rem !important;
  }
  .not-found input.search-field::-webkit-input-placeholder {
    font-size: 0.78rem !important;
  }
  .not-found input.search-field::-moz-placeholder {
    font-size: 0.78rem !important;
  }
  .not-found input.search-field:-ms-input-placeholder {
    font-size: 0.78rem !important;
  }
}
/* ===== Privacy テンプレ専用：ヘッダー分の上スペーサーを main の先頭に挿入 ===== */
/* どのクラスでも拾えるように複数マッチさせる */
body.page-template-template-privacy main::before,
body.page-template-template-privacy-php main::before,
body.page-slug-privacy main::before,
body.privacy-policy main::before {
  content: "";
  display: block;
  height: calc(var(--header-h, 60px) + var(--adminbar, 0px) + 12px);
}

/* 念のため main 自体の position を確保（他要素との干渉を避ける保険） */
body.page-template-template-privacy main,
body.page-template-template-privacy-php main,
body.page-slug-privacy main,
body.privacy-policy main {
  position: relative;
}

/* タイトル＆節見出しの scroll-margin-top を広く付与 */
body.page-template-template-privacy #pp-title,
body.page-template-template-privacy-php #pp-title,
body.page-slug-privacy #pp-title,
body.privacy-policy #pp-title,
body.page-template-template-privacy .privacy-policy [id],
body.page-template-template-privacy-php .privacy-policy [id],
body.page-slug-privacy .privacy-policy [id],
body.privacy-policy .privacy-policy [id] {
  scroll-margin-top: calc(var(--header-h, 60px) + var(--adminbar, 0px) + 8px);
}

/* ===== Blog Manual 専用：ヘッダー分の上スペーサー ===== */
/* テンプレ名・派生名・スラッグで拾えるように複数指定 */
body.page-template-page-template-blog-manual main::before,
body.page-template-template-blog-manual main::before {
  content: "";
  display: block;
  height: calc(var(--header-h, 60px) + var(--adminbar, 0px) + 8px);
}

body.page-template-page-template-blog-manual h1,
body.page-template-template-blog-manual h1,
body.page-template-page-template-blog-manual h2,
body.page-template-template-blog-manual h2 {
  scroll-margin-top: calc(var(--header-h, 60px) + var(--adminbar, 0px) + 8px);
}

/* blog-manual 専用パレット（前面表示用） */
.manual .has-main-color {
  color: #6b4f3a;
} /* ブランド（ブラウン） */
.manual .has-accent-color {
  color: #bf8b5a;
} /* アクセント（キャラメル） */
.manual .has-text-main-color {
  color: #2b2b2b;
} /* 本文テキスト（濃グレー） */
.manual .has-text-sub-color {
  color: #666666;
} /* 補助テキスト（薄グレー） */
.manual .has-line-color {
  color: #e8e2da;
} /* ライン（境界） */
.manual .has-success-color {
  color: #3da35d;
} /* 成功（緑） */
.manual .has-warning-color {
  color: #f2b134;
} /* 注意（黄） */
.manual .has-danger-color {
  color: #d35d5d;
} /* エラー（赤） */
.manual .has-text-white-color {
  color: #fff;
  background: #666;
  padding: 2px 6px;
  border-radius: 4px;
} /* 白は背景付きで表示 */
/* ===== cafe-biyori 専用：ヘッダー分の上スペーサー ===== */
:root {
  --header-h: 84px;
} /* ← 実ヘッダー高に合わせて */
body.admin-bar {
  --adminbar: 32px;
}

@media (max-width: 782px) {
  body.admin-bar {
    --adminbar: 46px;
  } /* WP管理バーのSP高さ */
}
/* テンプレ名・スラッグ由来の body クラスを幅広く拾う */
body.page-template-page-cafe-biyori main::before,
body.page-cafe-biyori main::before,
body.page-slug-cafe-biyori main::before {
  content: "";
  display: block;
  height: calc(var(--header-h, 60px) + var(--adminbar, 0px) + 8px);
}

/* 見出しのアンカーずれ防止（h1/h2がヘッダー下に潜らない） */
body.page-template-page-cafe-biyori h1,
body.page-cafe-biyori h1,
body.page-slug-cafe-biyori h1,
body.page-template-page-cafe-biyori h2,
body.page-cafe-biyori h2,
body.page-slug-cafe-biyori h2 {
  scroll-margin-top: calc(var(--header-h, 60px) + var(--adminbar, 0px) + 8px);
}

/* 余計な上マージンがあればリセット（任意） */
body.page-template-page-cafe-biyori .page-head,
body.page-cafe-biyori .page-head,
body.page-slug-cafe-biyori .page-head {
  margin-top: 0;
}

/* 単一記事：前後ナビ ↓ 関連セクション の間を必ず空ける */
.single nav.post-navigation,
.single .navigation.post-navigation {
  margin-bottom: 28px !important; /* 必要なら 24〜40px で調整 */
}

/* 関連セクションの“直前”にスペーサーを置く：マージン相殺を回避 */
.single .post-related::before {
  content: "";
  display: block;
  height: 32px; /* ここが上の余白量 */
}

/* 見出し周りの詰まり解消 */
.single .post-related .c-heading-lv3,
.single .post-related h2 {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

/* 単一記事：記事下CTA（/cafe/contact/へ）の余白＆中央寄せ */
.single .post-cta {
  /* 上下の余白：24〜56pxで可変 */
  margin: clamp(24px, 4vw, 56px) auto;
  /* 親子のマージン相殺を止める（確実に余白が出る） */
  display: flow-root;
  /* ボタンを中央に */
  text-align: center;
  /* 万一相殺が残る環境向けの保険 */
  padding-top: 2px;
}

/* ボタンサイズを少し大きめに（任意） */
.single .post-cta .c-button {
  /* 中央寄せのため inline (or inline-flex) でOK。親に text-align:center を指定済み */
  padding: 0.85em 1.25em;
  min-width: 12rem; /* 見栄え用（お好みで） */
  text-decoration: none; /* 念のため下線OFF */
}

/* 単一記事の前後ナビまわりの余白（上下） */
.single .navigation.post-navigation,
.single nav.post-navigation {
  margin: clamp(20px, 3vw, 40px) 0; /* 上下の外側余白 */
}

/* 前ページ/次ページの行間（縦の間隔） */
.single .post-navigation .nav-previous,
.single .post-navigation .nav-next {
  display: block;
  margin: 8px 0; /* 2本のリンクの間に余白 */
}

/* 念のため：ラッパーが .nav-links のテーマもカバー */
.single .post-navigation .nav-links {
  row-gap: 8px;
  display: grid;
}

/* 下線を消すなどの微調整（任意） */
.single .post-navigation a {
  text-decoration: none;
}

.single .post-navigation a:hover {
  opacity: 0.85;
}

/* --------------------------------------
  5. UIコンポーネント（components）
-------------------------------------- */
/* ▼ 汎用UI部品 */
.c-card {
  padding: 1.5rem;
  border-radius: 8px;
}

.card + .card {
  margin-top: 1rem;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-card {
  background-color: #fff;
  border: 1px solid #007bff;
  box-shadow: 0 0 1px rgba(0, 123, 255, 0.1);
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
/* 入力プリミティブ（再利用用） */
.f-input, .form-unstyled input,
.form-unstyled textarea,
.form-unstyled select,
.f-textarea,
.f-select {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 0.0625rem solid #e0e6ed;
  border-radius: 0.25rem;
  background-color: #fff;
  color: #111111;
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.f-input::placeholder, .form-unstyled input::placeholder,
.form-unstyled textarea::placeholder,
.form-unstyled select::placeholder,
.f-textarea::placeholder,
.f-select::placeholder {
  color: #999;
  opacity: 1;
}
.f-input:focus, .form-unstyled input:focus,
.form-unstyled textarea:focus,
.form-unstyled select:focus,
.f-textarea:focus,
.f-select:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 0.125rem rgba(0, 123, 255, 0.25);
}
.f-input:disabled, .form-unstyled input:disabled,
.form-unstyled textarea:disabled,
.form-unstyled select:disabled,
.f-textarea:disabled,
.f-select:disabled {
  background-color: #f0f0f0;
  color: #999;
  cursor: not-allowed;
}

/* 要素別の微差があればここで */
.f-textarea, .form-unstyled textarea {
  /* 例：最小高さや縦リサイズ */
  min-height: 11.25rem;
  resize: vertical;
}

/* “素のフォーム”（既存の .form-unstyled 互換） */
.form-unstyled input,
.form-unstyled textarea,
.form-unstyled select {
  /* 必要なら .f-* を継承：@extend は暫定的に最小限で */
}
/* ラベル */
.f-label,
.c-label {
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #111111;
}

/* 入力（input / textarea / select） */
.f-input,
.form-unstyled input,
.form-unstyled textarea,
.form-unstyled select,
.c-form .c-form__group .c-input,
.f-textarea,
.c-form .c-form__group .c-textarea,
.f-select,
.c-form .c-form__group .c-select,
.c-form__select {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 0.0625rem solid #e0e6ed;
  border-radius: 0.25rem;
  background-color: #fff;
  color: #111111;
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.f-input::placeholder,
.c-form .c-form__group .c-input::placeholder,
.form-unstyled input::placeholder,
.f-textarea::placeholder,
.c-form .c-form__group .c-textarea::placeholder,
.form-unstyled textarea::placeholder,
.f-select::placeholder,
.c-form .c-form__group .c-select::placeholder,
.c-form__select::placeholder,
.form-unstyled select::placeholder {
  color: #999;
  opacity: 1;
}
.f-input:focus,
.c-form .c-form__group .c-input:focus,
.form-unstyled input:focus,
.f-textarea:focus,
.c-form .c-form__group .c-textarea:focus,
.form-unstyled textarea:focus,
.f-select:focus,
.c-form .c-form__group .c-select:focus,
.c-form__select:focus,
.form-unstyled select:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 0.125rem rgba(0, 123, 255, 0.25);
}
.f-input:disabled,
.c-form .c-form__group .c-input:disabled,
.form-unstyled input:disabled,
.f-textarea:disabled,
.c-form .c-form__group .c-textarea:disabled,
.form-unstyled textarea:disabled,
.f-select:disabled,
.c-form .c-form__group .c-select:disabled,
.c-form__select:disabled,
.form-unstyled select:disabled {
  background: #f0f0f0;
  color: #999;
  cursor: not-allowed;
}

.f-textarea, .form-unstyled textarea {
  min-height: 11.25rem;
  resize: vertical;
}

/* セレクトは見た目＋カーソル */
.f-select, .form-unstyled select,
.c-form__select {
  appearance: none;
  cursor: pointer;
}

/* ラジオ / チェックのラッパ */
.f-choice,
.c-form__radio,
.c-form__checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* フォーム領域限定のアクセント色 */
.form-shell input[type=radio],
.form-shell input[type=checkbox] {
  accent-color: #007bff;
  width: 1.125rem;
  height: 1.125rem;
}

/* ボタン（フォーム内） */
.f-button,
.c-form .c-button,
.c-form__submit {
  background-color: #007bff;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.25rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.f-button:hover,
.c-form .c-button:hover,
.c-form__submit:hover {
  background-color: rgb(0, 110.7, 229.5);
}
.f-button:disabled,
.c-form .c-button:disabled,
.c-form__submit:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* 入力UIの共通（幅は常に100%） */
.f-input, .form-unstyled input,
.form-unstyled textarea,
.form-unstyled select,
.f-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.9rem;
  border: 1px solid #d7d7d7;
  border-radius: 0.5rem;
  background: #fff;
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.f-input:focus, .form-unstyled input:focus,
.form-unstyled textarea:focus,
.form-unstyled select:focus,
.f-textarea:focus {
  outline: none;
  border-color: #6b4f3a;
  box-shadow: 0 0 0 2px color-mix(in srgb, #6b4f3a 25%, transparent);
}

.f-input::placeholder, .form-unstyled input::placeholder,
.form-unstyled textarea::placeholder,
.form-unstyled select::placeholder,
.f-textarea::placeholder {
  color: #9aa0a6;
}

/* テキストエリアだけ少し高さを確保 */
.f-textarea, .form-unstyled textarea {
  min-height: 10rem;
}

/* 同意チェックの行はちょい詰め気味に */
.f-consent {
  gap: 0.5rem;
}

/* iOSズーム防止 */
@supports (-webkit-touch-callout: none) {
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    font-size: 16px;
  }
}
:lang(en) .voice-quote,
:lang(en) .home-voices .voices__text,
:lang(en) .f-input,
:lang(en) .form-unstyled input,
.form-unstyled :lang(en) input,
:lang(en) .form-unstyled textarea,
.form-unstyled :lang(en) textarea,
:lang(en) .form-unstyled select,
.form-unstyled :lang(en) select,
:lang(en) .f-textarea {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}

/* 入力要素はみ出し防止 & 幅合わせ */
.wpcf7 .wpcf7-form-control,
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 input[type=url],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 見た目の基本（任意） */
.wpcf7 .wpcf7-form-control {
  padding: 0.85rem 1rem;
  border-radius: 10px;
}

/* === CF7 共通: 入力を確実に100%幅に === */
.wpcf7 .wpcf7-form-control-wrap {
  display: block; /* inline のままだと幅が不安定 */
  width: 100%;
  min-width: 0; /* flex の子でも縮められるように */
  box-sizing: border-box;
}

.wpcf7 .wpcf7-form-control,
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 input[type=url],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  max-width: 100%;
  min-width: 0; /* ← flex アイテム対策 */
  box-sizing: border-box;
}

/* 同意の説明文 */
.f-consent .f-help {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.6);
}

/* アラートのリスト（任意） */
.c-alert__list {
  margin: 0.25rem 0 0;
  padding-left: 1.2em;
}
.c-alert__list li {
  list-style: disc;
}

/* =========================
   Consent block（縦積み・安全版）
   ========================= */
.consent-block {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0.5rem;
}

/* 1行目：チェック + ラベル（横並び） */
.consent-block__check {
  display: flex;
  align-items: baseline; /* テキストの先頭に合わせる */
  gap: 0.55rem;
}

/* チェックボックスは“位置だけ”微調整（拡大・変形はしない） */
.consent-block__check input[type=checkbox] {
  margin-top: 0.18em; /* ここだけで上下を微調整 */
  accent-color: #6b4f3a; /* 対応ブラウザのみ反映 */
  /* 競合の完全排除（もし他所で transform 指定が残っていても無効化） */
  transform: none !important;
  translate: 0 !important;
  scale: 1 !important;
  rotate: 0 !important;
  -webkit-appearance: checkbox;
  appearance: checkbox;
  vertical-align: top;
}

/* ラベル */
.consent-block__check label {
  line-height: 1.7;
  cursor: pointer;
}

/* ポリシー行（リンク） */
.consent-block__policy {
  margin: 0;
  font-size: 0.95rem;
  white-space: nowrap;
}

.consent-block__policy a {
  color: #6b4f3a;
  text-decoration: underline;
}

/* 補足（説明文） */
.consent-block__help {
  margin: 0.1rem 0 0;
  font-size: 0.95rem;
  color: rgba(0, 0, 0, 0.75);
}

/* （任意）PCでだけ“チェック＋ラベル”と“ポリシー”を横並びにしたい場合
   コメントアウトを外してください
@media (min-width: 768px) {
  .consent-block {
    grid-template-columns: 1fr auto;
    column-gap: 1rem;
  }
  .consent-block__policy {
    align-self: center;
    justify-self: start;
  }
  .consent-block__help {
    grid-column: 1 / -1;
  }
}
*/
/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
/* components/forms/_layout-form.scss */
/* 汎用フォームコンテナ（新基準） */
.form-shell,
.c-form,
.contact-form {
  width: 100%;
  max-width: 100%;
  padding-inline: 1rem;
  margin-inline: auto;
}
@media (max-width: 600px) {
  .form-shell,
  .c-form,
  .contact-form {
    max-width: 30rem;
  }
}
@media (max-width: 768px) {
  .form-shell,
  .c-form,
  .contact-form {
    max-width: 40rem;
  }
}
@media (max-width: 1024px) {
  .form-shell,
  .c-form,
  .contact-form {
    max-width: 50rem;
  }
}

/* 中のグリッド（あなたの contact-form__grid 用） */
.contact-form__grid {
  display: grid;
  gap: clamp(12px, 2.5vw, 20px);
}

@media (min-width: 768px) {
  .contact-form__grid {
    grid-template-columns: 1fr 1fr; /* 2列 */
  }
  .f-row--full {
    grid-column: 1/-1; /* 2列またぎ */
  }
}
/* 同意（チェックボックス）の横並び */
.f-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 必須バッジ */
.req {
  margin-left: 0.25em;
  color: #dc3545;
  font-weight: 700;
}

/* ハニーポットは画面外へ（人は見えない、bot は埋めがち） */
.hp-field {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}

/* 行（ラベル＋入力など1ブロック） */
.f-row,
.c-form__group {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

/* 行セット（横並びで複数アイテムを配置） */
.f-rowset,
.c-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

/* 列（行セット内のアイテム） */
.f-col,
.c-form__item {
  flex: 1 1 100%;
  min-width: 12.5rem;
}
@media (max-width: 768px) {
  .f-col,
  .c-form__item {
    flex: 1;
  }
}

/* 補足・注意書き */
.f-hint,
.c-form__notice {
  font-size: 0.875rem;
  color: #cccccc;
  margin-top: 0.25rem;
}

.f-note,
.c-form__note {
  font-size: 0.875rem;
  color: #666666;
  margin-top: 0.25rem;
}

/* 内側センター制御のラッパ */
.form-shell__inner,
.c-form__inner {
  max-width: 40rem;
  margin-inline: auto;
}

/* ボタン行の配置 */
.f-row--actions,
.form__button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* （任意）検証スキン */
.form--test,
.test-form {
  background: #eee;
  padding: 1rem;
}
@media (max-width: 600px) {
  .form--test,
  .test-form {
    max-width: 30rem;
    background: #ccf;
  }
}

/* 補助：氏名2分割 / スライダー行 */
.f-namepair,
.name-wrapper {
  display: flex;
  gap: 0.5rem;
}
.f-namepair > *,
.name-wrapper > * {
  flex: 1;
}

.f-slider,
.slider-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.f-slider input[type=range],
.slider-wrapper input[type=range] {
  flex: 1;
}

.f-slider__val,
.slider-wrapper span {
  min-width: 2em;
  text-align: right;
  font-weight: 700;
}

/* フォーム全体の読みやすい最大幅を制限 */
.contact-form {
  max-width: 860px; /* ← ここで全体幅を抑える（お好みで 720–960px） */
  margin-inline: auto;
}

/* グリッド：SPは1列、md+で2列 */
.contact-form__grid {
  display: grid;
  gap: clamp(14px, 2.2vw, 22px);
  grid-template-columns: 1fr; /* SP: 1列 */
}

@media (min-width: 768px) {
  .contact-form__grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr)); /* md+: 2列、最小幅280pxを確保 */
  }
}
/* 行ブロック（ラベル＋入力） */
.f-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 横幅いっぱい使う行（本文・同意・送信ボタンなど） */
.f-row--full {
  grid-column: 1/-1;
}

/* 送信ボタン行：中央寄せ */
.f-row--actions {
  grid-column: 1/-1;
  display: flex;
  justify-content: center;
  margin-top: 0.25rem;
}

/* ラベル/必須マーク */
.f-label {
  font-weight: 700;
  line-height: 1.4;
}

.req {
  color: #c0392b;
  margin-left: 0.25em;
}

/* スマホ=縦積み、md+=2カラム */
.contact-form__grid {
  display: grid;
  gap: 1rem;
}

.f-row--full {
  grid-column: 1/-1;
}

@media (min-width: 768px) {
  .contact-form__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
  .f-row--actions {
    grid-column: 1/-1;
    justify-self: center;
  }
}
/* お問い合わせ固有の軽いレイアウト調整（任意） */
.contact-form .contact-form__grid {
  display: grid;
  gap: 1rem;
}

.contact-form .f-row--full {
  grid-column: 1/-1;
}

/* md 以上で2カラム→見やすく */
@media (min-width: 768px) {
  .contact-form .contact-form__grid {
    grid-template-columns: 1fr 1fr;
  }
}
/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
/* ---- フォーム用 バリデーション状態 ---- */
/* --- エラー状態（既存仕様を尊重） --- */
.f-input.is-error,
.f-textarea.is-error,
.f-select.is-error,
.is-error {
  /* 互換：.is-error 単体でも効く */
  border-color: #d9a56b !important;
  background-color: rgb(232.2, 201, 166.2) !important;
}

/* 参考：成功状態（既にあればこのまま／なければ追加） */
.f-input.is-success,
.f-textarea.is-success,
.f-select.is-success,
.is-success {
  border-color: #198754 !important;
}

/* 無効（見た目だけ弱める） */
.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* アクセシビリティ：フォーカスリング */
:focus-visible {
  outline: 2px solid rgba(217, 165, 107, 0.55); /* 既存のカフェ系色味に合わせる */
  outline-offset: 2px;
}

/* focus-visible: フォーム全体 */
.contact-form :focus-visible {
  outline: 2px solid var(--color-primary, #6a4d39);
  outline-offset: 2px;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
/* 行内エラーメッセージ */
.f-error,
.c-form__error-message {
  font-size: 0.875rem;
  color: #dc3545;
  margin-top: 0.25rem;
}

/* フォーム全体に出す通知（任意） */
.f-alert {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-top: 0.75rem;
}

.f-alert--error {
  background: #fdeaea;
  color: #b42318;
}

.f-alert--success {
  background: #e9f7ef;
  color: #0f5132;
}

.f-alert--info {
  background: #e7f3fe;
  color: #084298;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #111111;
}
.c-table thead {
  background-color: #f5f5f5;
  color: #111111;
}
.c-table th,
.c-table td {
  padding: 0.75rem 1rem;
  border: 1px solid #e0e6ed;
  text-align: left;
  vertical-align: middle;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-table thead {
  background-color: #f5f5f5;
  color: #111111;
}
.c-table th,
.c-table td {
  border: 1px solid #e0e6ed;
}
.c-table tbody tr:nth-child(even) {
  background-color: #f0f0f0;
}

.c-table--fixed thead {
  position: sticky;
  top: 0;
  z-index: 1;
}
.c-table--wrapper {
  overflow-x: auto;
  width: 100%;
}

.icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: middle;
  fill: currentColor;
  aspect-ratio: 1/1;
}

.icon--left {
  margin-right: 0.5rem;
}
.icon--right {
  margin-left: 0.5rem;
}
.icon--sm {
  width: 1rem;
  height: 1rem;
}
.icon--lg {
  width: 1.5rem;
  height: 1.5rem;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
/* ============================================================
   _functions.scss
   Sassの関数定義用（rem変換・clamp関数・階層取得・map判定等まとめ）
   Dart Sass 1.56.0 以降の構文対応
============================================================ */
.c-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 300;
}

.c-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 600px;
  width: 90%;
  z-index: 400;
}

.c-modal {
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  padding: 2rem;
}

.c-modal__title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.c-modal__content {
  font-size: 1rem;
  color: #333;
  margin-bottom: 2rem;
}

.c-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #999;
  transition: color 0.3s;
}

.c-modal__close:hover {
  color: #000;
}

.c-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.c-modal {
  display: none;
  z-index: 10000;
}

.is-modal-open .c-modal-overlay,
.is-modal-open .c-modal {
  display: flex;
}

body.is-modal-open {
  overflow: hidden;
}

.c-tab__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.c-tab__contents {
  margin-top: 1rem;
}

.c-tab__content {
  display: none;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-tab__btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #111111;
  background-color: #f9f9f9;
  border: 1px solid #e0e6ed;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.c-tab__btn:hover {
  background-color: #f9f9f9;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-tab__btn.is-active {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

.c-tab__btn.is-disabled {
  background-color: #cccccc;
  color: #f5f5f5;
  cursor: not-allowed;
  opacity: 0.6;
}

.c-tab__content.is-active {
  display: block;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-accordion {
  border: 0.0625rem solid #e0e6ed;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #ffffff;
}
.c-accordion__item {
  border-top: 0.0625rem solid #e0e6ed;
}
.c-accordion__item:first-child {
  border-top: none;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-accordion__header {
  padding: 1rem;
  font-size: 1rem;
  font-family: "Noto Sans JP", sans-serif;
  background-color: #f9f9f9;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.c-accordion__header:hover {
  background-color: #f0f0f0;
}
.c-accordion__icon {
  transition: transform 0.3s ease;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-accordion__icon.is-open {
  transform: rotate(180deg);
}
.c-accordion__content {
  padding: 1rem;
  font-size: 0.875rem;
  color: #111111;
  display: none;
}
.c-accordion__content.is-open {
  display: block;
}

.c-tooltip {
  position: relative;
  display: inline-block;
}
.c-tooltip__content {
  position: absolute;
  z-index: 100;
  white-space: nowrap;
}

.c-tooltip__content {
  padding: 0.5em 0.75em;
  background-color: #333;
  color: #fff;
  font-size: 0.875rem;
  border-radius: 0.25em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.c-tooltip__content {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.c-tooltip:hover .c-tooltip__content,
.c-tooltip:focus-within .c-tooltip__content {
  visibility: visible;
  opacity: 1;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-loader {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  border: 0.25rem solid #ccc;
  border-top: 0.25rem solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.c-loader--sm {
  width: 1.5rem;
  height: 1.5rem;
  border-width: 0.125rem;
}

.c-loader--lg {
  width: 4.5rem;
  height: 4.5rem;
  border-width: 0.375rem;
}

.c-loader__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.25rem;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-loader--secondary {
  border-top-color: #6c757d;
}

.c-loader--accent {
  border-top-color: #d9a56b;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.is-loading {
  pointer-events: none;
  opacity: 0.6;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.text-sub {
  font-size: 0.875rem;
  color: #666666;
  line-height: 1.6;
}

.text-base {
  font-size: 1rem;
  color: #111111;
  line-height: 1.8;
}

.text-dark {
  color: #111111;
}

.text-light {
  color: #f5f5f5;
}

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

.text-small {
  font-size: 0.75rem;
  line-height: 1.4;
}

.text-lead {
  font-size: 1.125rem;
  line-height: 1.8;
  color: #111111;
}

.c-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-badge {
  color: #ffffff;
  background-color: #007bff;
  border-radius: 4px;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-badge--primary {
  background-color: #007bff;
  color: #fff;
}

.c-badge--secondary {
  background-color: #6c757d;
  color: #fff;
}

.c-badge--success {
  background-color: #198754;
  color: #fff;
}

.c-badge--danger {
  background-color: #dc3545;
  color: #fff;
}

.c-badge--accent {
  background-color: #d9a56b;
  color: #fff;
}

.c-badge--sm {
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
}

.c-badge--md {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

.c-badge--lg {
  font-size: 0.875rem;
  padding: 0.375rem 0.625rem;
}

.c-badge--pill {
  border-radius: 9999px;
}

.c-badge--square {
  border-radius: 0;
}

.c-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.25rem;
  margin: 0.75rem 0 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border: 1px solid rgba(0, 0, 0, 0.08);
  /* modifier（BEM） */
}
.c-alert--with-icon {
  /* ベースが flex なので特別な指定は不要。必要ならここに追記 */
}
.c-alert__icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  margin-top: 0.125rem;
  color: inherit;
}
.c-alert__body {
  flex: 1;
  min-width: 0;
}
.c-alert__title {
  font-weight: 700;
  margin: 0 0 0.25rem;
  line-height: 1.4;
}
.c-alert {
  /* 任意：閉じるボタン */
}
.c-alert__close {
  margin-left: auto;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-alert {
  /* primary */
}
.c-alert--primary, .c-alert.is-primary {
  background-color: #007bff;
  color: #ffffff;
}
.c-alert--primary .c-alert__icon {
  color: #ffffff;
}
.c-alert {
  /* success */
}
.c-alert--success, .c-alert.is-success {
  background-color: #198754;
  color: #ffffff;
}
.c-alert--success .c-alert__icon {
  color: #ffffff;
}
.c-alert {
  /* danger / error */
}
.c-alert--danger, .c-alert.is-danger, .c-alert--error, .c-alert.is-error {
  background-color: #dc3545;
  color: #ffffff;
}
.c-alert--danger .c-alert__icon, .c-alert--error .c-alert__icon {
  color: #ffffff;
}
.c-alert {
  /* warning（文字は濃色の方が可読性◎） */
}
.c-alert--warning, .c-alert.is-warning {
  background-color: #ffc107;
  color: #7a5200; /* ここは意図して濃色に */
}
.c-alert--warning .c-alert__icon {
  color: currentColor;
}
.c-alert {
  /* info（secondary ではなく info を使用） */
}
.c-alert--info, .c-alert.is-info {
  background-color: #17a2b8;
  color: #ffffff;
}
.c-alert--info .c-alert__icon {
  color: #ffffff;
}

/* 任意：ソフト（低彩度）版も用意しておくとUIに馴染みます */
.c-alert--success-soft {
  background: #e9f7ef;
  color: #0f5132;
}
.c-alert--error-soft, .c-alert--danger-soft {
  background: #fdeaea;
  color: #842029;
}
.c-alert--info-soft {
  background: #e7f3fe;
  color: #084298;
}
.c-alert--warning-soft {
  background: #fff8e1;
  color: #7a5200;
}
.c-alert {
  /* 必要なら border-color も薄く足すと締まる */
}

/* alert: 余白＆枠だけ少し強めに */
.c-alert {
  margin: 0.75rem 0 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.c-alert.is-success {
  background: #e9f7ef;
  color: #0f5132;
  border-color: #b7e2c8;
}

.c-alert.is-error {
  background: #fdeaea;
  color: #842029;
  border-color: #f1b0b7;
}

/* Contact セクションのアラートをフォーム幅に寄せる */
.contact .c-alert {
  width: min(92%, 40rem); /* だいたいフォームくらいの幅に */
  margin: 0.75rem auto 1.25rem; /* 中央寄せ */
}

/* 非表示状態（JSで付け外し想定） */
.c-alert[hidden],
.c-alert.is-hidden {
  display: none !important;
}

/* クリックで閉じられる見た目（任意） */
.c-alert.is-dismissible {
  padding-right: 2.25rem;
} /* × ボタン分の余白 */
/* アニメ・アクセシビリティ */
.c-alert {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .c-alert {
    transition: none;
  }
}
.c-alert:focus-visible {
  outline: 2px solid rgba(217, 165, 107, 0.55); /* カフェ系の強調色に合わせる */
  outline-offset: 2px;
}

/* BEMがある場合の互換（BEMが無ければこの塊は不要） */
.c-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-block: 1.5rem;
}

.c-pagination--start {
  justify-content: flex-start;
}

.c-pagination--end {
  justify-content: flex-end;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-pagination__item {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.875rem;
  color: #111111;
  background-color: #ffffff;
  border: 1px solid #e0e6ed;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.c-pagination__item:hover {
  background-color: #f0f0f0;
}
.c-pagination__item.is-active {
  background-color: #007bff;
  color: #ffffff;
  font-weight: bold;
}
.c-pagination__item.is-disabled {
  opacity: 0.4;
}
.c-pagination__item.c-pagination__prev, .c-pagination__item.c-pagination__next {
  font-weight: bold;
  font-size: 1.125rem;
}
.c-pagination__item.c-pagination--sm .c-pagination__item {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.75rem;
}
.c-pagination__item.c-pagination--lg .c-pagination__item {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1rem;
}

.c-pagination__ellipsis {
  pointer-events: none;
  color: #cccccc;
  font-size: 0.875rem;
}

.c-nav__item .js-scroll.is-scrolled {
  color: #fff !important;
  background-color: #2f4f4f !important;
  font-weight: bold;
  text-decoration: underline;
  transition: all 0.3s ease;
}

nav a.is-current {
  color: red;
  background-color: yellow;
  font-weight: bold;
  border-bottom: 2px solid red;
}

.item {
  margin-bottom: 16px;
  background: #eee;
  padding: 12px 16px;
  border-radius: 6px;
  max-width: 480px;
  margin-inline: auto;
  font-size: 1rem;
  line-height: 1.6;
}

.item-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  padding: 0 16px;
}

/* _swiper.scss */
/* --- ベース: どのスライダーにも共通する最小限だけ --- */
/* スライダーがレイアウト幅を押し広げないように */
.swiper,
.swiper-wrapper {
  inline-size: 100% !important;
  max-inline-size: 100%;
  overflow: clip; /* 古い環境なら hidden でも可 */
}

.swiper-slide {
  min-inline-size: 0;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100%;
}

.swiper-slide img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.6s ease;
  transform: scale(0.9);
}

.swiper-slide-active img {
  width: 120%;
  transform: scale(1.1);
  transition: transform 0.6s ease, width 0.6s ease;
}

@media screen and (max-width: 767px) {
  .swiper-slide-active img {
    width: 100%;
    transform: scale(1);
  }
}
.swiper-container {
  aspect-ratio: 16/9;
  max-width: 1080px;
  height: 400px;
  margin: 0 auto;
  padding: 0 16px;
}

.swiper-button-next,
.swiper-button-prev {
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.swiper-button-next.swiper-button-next,
.swiper-button-prev.swiper-button-next {
  right: 10px;
}
.swiper-button-next.swiper-button-prev,
.swiper-button-prev.swiper-button-prev {
  left: 10px;
}

.swiper-pagination-bullet {
  background: white;
  opacity: 0.7;
}

.swiper-pagination-bullet-active {
  background: #007bff;
  opacity: 1;
}

.main-visual {
  width: 100%;
  height: 600px;
  overflow: hidden;
  position: relative;
}

@media (max-width: 768px) {
  .swiper {
    height: auto;
  }
  .swiper-button-prev,
  .swiper-button-next {
    top: 40%;
    width: 24px;
    height: 24px;
  }
}
.swiper-pagination {
  bottom: 10px;
  text-align: center;
}

/* 箱型スライダー（従来の16:9/1080px制限） */
.swiper--boxed {
  aspect-ratio: 16/9;
  max-width: 1080px;
  margin: 0 auto;
}

/* ヒーロースライダー（トップのMV用） */
.swiper--hero {
  max-width: none;
  width: 100%;
  margin-inline: calc(50% - 50vw);
  aspect-ratio: auto;
  height: 100%;
}

.swiper--hero .swiper-slide {
  position: relative;
}

.swiper--hero .swiper-slide picture,
.swiper--hero .swiper-slide picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#news {
  padding: 4rem 1rem;
  background-color: #f9f9f9;
  margin-bottom: 4rem;
}
#news .c-news {
  width: clamp(32rem, 90vw, 64rem);
  margin-inline: auto;
  padding-inline: 1rem;
}
#news h2 {
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2rem;
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.5rem;
}
#news .news-wrapper {
  max-width: 800px;
  margin: 0 auto;
  background-color: #f9f9f9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
#news ul.news-list {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}
#news ul.news-list li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #eee;
}
#news ul.news-list li:last-child {
  border-bottom: none;
}
#news ul.news-list li .date {
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  min-width: 7rem;
}
#news ul.news-list li .text {
  color: #333;
  font-weight: 500;
  flex: 1;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-button--tel {
  width: 340px;
  height: 58px;
  line-height: 58px;
  font-size: 18px;
  background-color: #d9a56b;
  color: #fff;
  font-weight: bold;
  padding: 12px 24px;
  border-radius: 6px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
}
.c-button--tel:active {
  background-color: rgb(176.6451612903, 114.5806451613, 45.3548387097);
  box-shadow: inset 3px 3px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(1px);
}
.c-button--tel:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* ▼ ボタン系 UI（button配下） */
/* --- 基本ボタン構造 --- */
/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  /* prefix は -webkit → -moz → -ms → 標準 の順に */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  border: 1px solid transparent;
  background: #6b4f3a;
  color: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  transition: transform 0.12s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.c-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  background: color-mix(in srgb, #6b4f3a 85%, black);
  text-decoration: none;
}
.c-button:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}
.c-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* サイズ */
.c-button--sm {
  padding: 0.55rem 0.95rem;
  font-size: 0.95rem;
}

.c-button--lg {
  padding: 0.9rem 1.5rem;
  font-size: 1.05rem;
}

/* 配置ユーティリティ */
.c-button--center {
  display: block;
  width: max-content;
  margin-inline: auto;
}

.c-button--full {
  display: block;
  width: 100%;
}

.c-button-row {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.u-center {
  text-align: center;
}

/* フォーカス：色混合のフォールバック → color-mix 本命 */
.c-button:focus-visible {
  outline: 3px solid rgba(106, 77, 57, 0.45); /* フォールバック */
  outline-offset: 2px;
}
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
  .c-button:focus-visible .c-button:focus-visible {
    outline-color: color-mix(in srgb, #6a4d39 45%, transparent);
  }
}

/* ---------------------------------
 * Variations
 * --------------------------------- */
/* 1) アウトライン（明るい背景用＝ブランド色） */
.c-button--outline {
  background: transparent;
  color: #6b4f3a;
  border: 2px solid currentColor;
  box-shadow: none;
}
.c-button--outline:hover {
  background: rgba(107, 79, 58, 0.1); /* fallback */
}
@supports (background: color-mix(in srgb, #000 10%, transparent)) {
  .c-button--outline:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
  }
}

/* MVなど暗い写真の上で使う白アウトライン */
.home-hero .c-button--outline {
  color: #f5f1eb;
  border-color: rgba(255, 255, 255, 0.85);
  /* ぼかし＋フォールバック */
  background: rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: saturate(140%) blur(2px);
  backdrop-filter: saturate(140%) blur(2px);
}
.home-hero .c-button--outline:hover {
  background: rgba(0, 0, 0, 0.26);
}
.home-hero .c-button--outline:focus-visible {
  outline-color: rgba(255, 255, 255, 0.75);
}
.home-hero .c-button--outline {
  /* ぼかし非対応端末では濃いめに */
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .home-hero .c-button--outline {
    background: rgba(0, 0, 0, 0.38);
  }
}

/* 2) ゴースト（Concept 用：存在感を一段落とす） */
.c-button--ghost {
  background: transparent;
  color: #6b4f3a;
  /* 枠色：fallback → color-mix 本命 */
  border: 1px solid rgba(107, 79, 58, 0.45); /* fallback */
}
@supports (border-color: color-mix(in srgb, #000 45%, transparent)) {
  .c-button--ghost {
    border-color: color-mix(in srgb, currentColor 45%, transparent);
  }
}
.c-button--ghost:hover {
  background: rgba(107, 79, 58, 0.08); /* fallback */
}
@supports (background: color-mix(in srgb, #000 8%, transparent)) {
  .c-button--ghost:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
  }
}

/* 写真の上で使うゴースト（白字・白枠＋グラス感） */
.c-button--ghost.on-image {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: saturate(1.1) blur(2px);
  backdrop-filter: saturate(1.1) blur(2px);
}
.c-button--ghost.on-image:hover {
  background: rgba(0, 0, 0, 0.26);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .c-button--ghost.on-image {
    background: rgba(0, 0, 0, 0.36);
  }
}

/* 狭い端末の押しやすさ */
@media (max-width: 360px) {
  .home-hero__cta {
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .c-button {
    padding: 0.7rem 1.1rem;
  }
}
/* 低モーション配慮：画像フェード */
@media (prefers-reduced-motion: no-preference) {
  .swiper-slide picture > img {
    transition: opacity 0.5s ease;
  }
}
.c-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72em 1.1em;
  border-radius: 6px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  transition: filter 0.15s ease;
}
.c-button:hover {
  filter: brightness(0.95);
}

/* 塗りつぶし（これを使う） */
.c-button--primary {
  background: #5b3a2e;
  color: #ffffff;
  border-color: #5b3a2e;
  /* 画像の上でも読めるよう影を少し */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

/* 予備：白ボタン（暗い写真の上で使いたい時） */
.c-button--light {
  background: #fff;
  color: #5b3a2e;
  border-color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

/* 既存のゴーストは残しつつ触らない（透明のまま） */
.c-button--ghost {
  background: transparent;
  color: #5b3a2e;
  border: 1px solid #5b3a2e;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-button--sm {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
}

.c-button--lg {
  font-size: 1.25rem;
  padding: 1rem 2rem;
}

.c-button--xl {
  font-size: 1.5rem;
  padding: 1.25rem 2.5rem;
}

.c-button--full,
.c-button--block {
  display: block;
  width: 100%;
  margin-inline: auto;
}

.c-button--cta {
  background-color: #d9a56b;
  color: #fff;
  font-size: 1.25rem;
  font-weight: bold;
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}
.c-button--cta:hover {
  filter: brightness(0.9);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}

.c-button--pill {
  border-radius: 9999px;
  padding-left: 1.5em;
  padding-right: 1.5em;
}
.c-button.btn--square {
  width: 3rem;
  height: 3rem;
  padding: 0;
  text-align: center;
  line-height: 3rem;
  font-size: 1rem;
}
.c-button.btn--icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border-radius: 50%;
}
.c-button--circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.c-button--circle .btn--sm {
  width: 2rem;
  height: 2rem;
  font-size: 0.875rem;
}
.c-button--circle .btn--lg {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.5rem;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-button--secondary {
  background-color: #6c757d;
  color: #fff;
}
.c-button--danger {
  background-color: #dc3545;
  color: #fff;
}
.c-button--success {
  background-color: #198754;
  color: #fff;
}
.c-button--warning {
  background-color: #ffc107;
  color: #000;
}
.c-button--warning:hover {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}
.c-button--accent {
  background-color: #d9a56b;
  color: #fff;
}
.c-button.c-button--outline-secondary {
  background-color: transparent;
  border: 1px solid #6c757d;
  color: #6c757d;
}
.c-button.c-button--outline-secondary:hover {
  background-color: #6c757d;
  color: #fff;
}
.c-button.c-button--outline-danger {
  background-color: transparent;
  border: 1px solid #dc3545;
  color: #dc3545;
}
.c-button.c-button--outline-danger:hover {
  background-color: #dc3545;
  color: #fff;
}
.c-button.c-button--outline-success {
  background-color: transparent;
  border: 1px solid #198754;
  color: #198754;
}
.c-button.c-button--outline-success:hover {
  background-color: #198754;
  color: #fff;
}
.c-button.c-button--outline-warning {
  background-color: transparent;
  border: 1px solid #ffc107;
  color: #ffc107;
}
.c-button.c-button--outline-warning:hover {
  background-color: #ffc107;
  color: #fff;
}
.c-button.c-button--outline-accent {
  background-color: transparent;
  border: 1px solid #d9a56b;
  color: #d9a56b;
}
.c-button.c-button--outline-accent:hover {
  background-color: #d9a56b;
  color: #fff;
}
.c-button.c-button--ghost {
  background: none;
  border: none;
  color: #007bff;
  text-decoration: underline;
  padding: 0.25rem 0.5rem;
  font-weight: normal;
}
.c-button.c-button--ghost:hover {
  filter: brightness(0.9);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}

.c-button.btn-main-kids {
  background-color: #ffd700;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-main-kids:hover {
  background-color: #ccac00;
}

.c-button.btn-main-boy {
  background-color: #1e90ff;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-main-boy:hover {
  background-color: rgb(0, 118.56, 234);
}

.c-button.btn-main-girls {
  background-color: #ff9aa2;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-main-girls:hover {
  background-color: rgb(255, 103, 115.0396039604);
}

.c-button.btn-main-teenboy {
  background-color: #2c3e50;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-main-teenboy:hover {
  background-color: rgb(25.9032258065, 36.5, 47.0967741935);
}

.c-button.btn-main-teengirl {
  background-color: #c080d1;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-main-teengirl:hover {
  background-color: rgb(173.4277456647, 90.5606936416, 195.4393063584);
}

.c-button.btn-main-teenboth {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-main-teenboth:hover {
  background-color: rgb(0, 98.4, 204);
}

.c-button.btn-main-man30s {
  background-color: #0d47a1;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-main-man30s:hover {
  background-color: rgb(9.1896551724, 50.1896551724, 113.8103448276);
}

.c-button.btn-main-woman30s {
  background-color: #a67c9b;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-main-woman30s:hover {
  background-color: rgb(142.3136363636, 96.6863636364, 130.3636363636);
}

.c-button.btn-main-30sboth {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-main-30sboth:hover {
  background-color: rgb(0, 98.4, 204);
}

.c-button.btn-main-senior {
  background-color: #5d7261;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-main-senior:hover {
  background-color: rgb(70.0869565217, 85.9130434783, 73.1014492754);
}

.c-button.btn-main-elder {
  background-color: #888888;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-main-elder:hover {
  background-color: rgb(110.5, 110.5, 110.5);
}

.c-button.btn-main-cafe {
  background-color: #6b4f3a;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-main-cafe:hover {
  background-color: rgb(73.9272727273, 54.5818181818, 40.0727272727);
}

.c-button.btn-accent-kids {
  background-color: #00bfff;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-accent-kids:hover {
  background-color: rgb(0, 152.8, 204);
}

.c-button.btn-accent-boy {
  background-color: #ff7f50;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-accent-boy:hover {
  background-color: rgb(255, 89.6971428571, 29);
}

.c-button.btn-accent-girls {
  background-color: #92b6f4;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-accent-girls:hover {
  background-color: rgb(99.675, 150.975, 239.325);
}

.c-button.btn-accent-teenboy {
  background-color: #00ced1;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-accent-teenboy:hover {
  background-color: rgb(0, 155.7320574163, 158);
}

.c-button.btn-accent-teengirl {
  background-color: #6eceda;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-accent-teengirl:hover {
  background-color: rgb(69.3681318681, 192.2692307692, 207.6318681319);
}

.c-button.btn-accent-teenboth {
  background-color: #ffa500;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-accent-teenboth:hover {
  background-color: #cc8400;
}

.c-button.btn-accent-man30s {
  background-color: #ffa000;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-accent-man30s:hover {
  background-color: #cc8000;
}

.c-button.btn-accent-woman30s {
  background-color: #0097a7;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-accent-woman30s:hover {
  background-color: rgb(0, 104.8862275449, 116);
}

.c-button.btn-accent-30sboth {
  background-color: #ffa500;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-accent-30sboth:hover {
  background-color: #cc8400;
}

.c-button.btn-accent-senior {
  background-color: #c96480;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-accent-senior:hover {
  background-color: rgb(185.4066985646, 64.5933014354, 98.0861244019);
}

.c-button.btn-accent-elder {
  background-color: #111;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-accent-elder:hover {
  background-color: hsl(0, 0%, -3.3333333333%);
}

.c-button.btn-accent-cafe {
  background-color: #d9a56b;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.c-button.btn-accent-cafe:hover {
  background-color: rgb(206.5806451613, 140.3225806452, 66.4193548387);
}

.c-button.btn-outline-kids {
  background-color: transparent;
  color: #ffd700;
  border: 1px solid #ffd700;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  transition: background-color 0.3s, color 0.3s;
}
.c-button.btn-outline-kids:hover {
  background-color: #ffd700;
  color: #fff;
}

.c-button.btn-outline-boy {
  background-color: transparent;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  transition: background-color 0.3s, color 0.3s;
}
.c-button.btn-outline-boy:hover {
  background-color: #1e90ff;
  color: #fff;
}

.c-button.btn-outline-girls {
  background-color: transparent;
  color: #ff9aa2;
  border: 1px solid #ff9aa2;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  transition: background-color 0.3s, color 0.3s;
}
.c-button.btn-outline-girls:hover {
  background-color: #ff9aa2;
  color: #fff;
}

.c-button.btn-outline-teenboy {
  background-color: transparent;
  color: #2c3e50;
  border: 1px solid #2c3e50;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  transition: background-color 0.3s, color 0.3s;
}
.c-button.btn-outline-teenboy:hover {
  background-color: #2c3e50;
  color: #fff;
}

.c-button.btn-outline-teengirl {
  background-color: transparent;
  color: #c080d1;
  border: 1px solid #c080d1;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  transition: background-color 0.3s, color 0.3s;
}
.c-button.btn-outline-teengirl:hover {
  background-color: #c080d1;
  color: #fff;
}

.c-button.btn-outline-teenboth {
  background-color: transparent;
  color: #007bff;
  border: 1px solid #007bff;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  transition: background-color 0.3s, color 0.3s;
}
.c-button.btn-outline-teenboth:hover {
  background-color: #007bff;
  color: #fff;
}

.c-button.btn-outline-man30s {
  background-color: transparent;
  color: #0d47a1;
  border: 1px solid #0d47a1;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  transition: background-color 0.3s, color 0.3s;
}
.c-button.btn-outline-man30s:hover {
  background-color: #0d47a1;
  color: #fff;
}

.c-button.btn-outline-woman30s {
  background-color: transparent;
  color: #a67c9b;
  border: 1px solid #a67c9b;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  transition: background-color 0.3s, color 0.3s;
}
.c-button.btn-outline-woman30s:hover {
  background-color: #a67c9b;
  color: #fff;
}

.c-button.btn-outline-30sboth {
  background-color: transparent;
  color: #007bff;
  border: 1px solid #007bff;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  transition: background-color 0.3s, color 0.3s;
}
.c-button.btn-outline-30sboth:hover {
  background-color: #007bff;
  color: #fff;
}

.c-button.btn-outline-senior {
  background-color: transparent;
  color: #5d7261;
  border: 1px solid #5d7261;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  transition: background-color 0.3s, color 0.3s;
}
.c-button.btn-outline-senior:hover {
  background-color: #5d7261;
  color: #fff;
}

.c-button.btn-outline-elder {
  background-color: transparent;
  color: #888888;
  border: 1px solid #888888;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  transition: background-color 0.3s, color 0.3s;
}
.c-button.btn-outline-elder:hover {
  background-color: #888888;
  color: #fff;
}

.c-button.btn-outline-cafe {
  background-color: transparent;
  color: #6b4f3a;
  border: 1px solid #6b4f3a;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  transition: background-color 0.3s, color 0.3s;
}
.c-button.btn-outline-cafe:hover {
  background-color: #6b4f3a;
  color: #fff;
}

/* --- ボタン機能・状態管理 --- */
.c-button--fixed--scroll-up.show-scroll-up {
  display: block !important;
}

.c-button-fixed--scroll-up.is-loading {
  pointer-events: none;
  opacity: 0.7;
}

.c-button.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  z-index: 1;
}

.c-button.is-loading.is-disabled {
  background-color: rgb(178.5, 178.5, 178.5);
  color: #fff;
  opacity: 0.5;
  cursor: not-allowed;
}

.c-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.c-button.is-loading.is-disabled::after {
  display: none;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.c-button.is-success {
  background-color: #28a745;
  color: #fff;
  opacity: 1;
}

button.c-button.is-error {
  background-color: #dc3545 !important;
  color: #fff !important;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-button.btn-main {
  background-color: #007bff;
  color: #fff;
  border: none;
}
.c-button.btn-main:hover {
  opacity: 0.85;
}
.c-button.btn-main:focus {
  outline: 2px solid rgb(38.25, 142.8, 255);
  outline-offset: 2px;
}

.c-button.btn-accent {
  background-color: #0dcaf0;
  color: #fff;
  border: none;
}
.c-button.btn-accent:hover {
  opacity: 0.85;
}
.c-button.btn-accent:focus {
  outline: 2px solid rgb(47.7747035573, 210.9646245059, 243.7752964427);
  outline-offset: 2px;
}

.c-button.btn-secondary {
  background-color: #6c757d;
  color: #fff;
  border: none;
}
.c-button.btn-secondary:hover {
  opacity: 0.85;
}
.c-button.btn-secondary:focus {
  outline: 2px solid rgb(128.6856223176, 137.7802575107, 145.8643776824);
  outline-offset: 2px;
}

.c-button.btn-success {
  background-color: #198754;
  color: #fff;
  border: none;
}
.c-button.btn-success:hover {
  opacity: 0.85;
}
.c-button.btn-success:focus {
  outline: 2px solid rgb(33.203125, 179.296875, 111.5625);
  outline-offset: 2px;
}

.c-button.btn-danger {
  background-color: #dc3545;
  color: #fff;
  border: none;
}
.c-button.btn-danger:hover {
  opacity: 0.85;
}
.c-button.btn-danger:focus {
  outline: 2px solid rgb(225.25, 83.3, 96.9);
  outline-offset: 2px;
}

.c-button.btn-warning {
  background-color: #ffc107;
  color: #fff;
  border: none;
}
.c-button.btn-warning:hover {
  opacity: 0.85;
}
.c-button.btn-warning:focus {
  outline: 2px solid rgb(255, 202.3, 44.2);
  outline-offset: 2px;
}

.c-button.btn-info {
  background-color: #0dcaf0;
  color: #fff;
  border: none;
}
.c-button.btn-info:hover {
  opacity: 0.85;
}
.c-button.btn-info:focus {
  outline: 2px solid rgb(47.7747035573, 210.9646245059, 243.7752964427);
  outline-offset: 2px;
}

.c-button.btn-default {
  background-color: #6c757d;
  color: #fff;
  border: none;
}
.c-button.btn-default:hover {
  opacity: 0.85;
}
.c-button.btn-default:focus {
  outline: 2px solid rgb(128.6856223176, 137.7802575107, 145.8643776824);
  outline-offset: 2px;
}

.c-button.btn-accent-main {
  background-color: transparent;
  color: #007bff;
  border: 1px solid #007bff;
}
.c-button.btn-accent-main:hover {
  background-color: rgba(0, 123, 255, 0.08);
}
.c-button.btn-accent-main:focus {
  outline: 2px solid rgb(38.25, 142.8, 255);
  outline-offset: 2px;
}

.c-button.btn-accent-accent {
  background-color: transparent;
  color: #0dcaf0;
  border: 1px solid #0dcaf0;
}
.c-button.btn-accent-accent:hover {
  background-color: rgba(13, 202, 240, 0.08);
}
.c-button.btn-accent-accent:focus {
  outline: 2px solid rgb(47.7747035573, 210.9646245059, 243.7752964427);
  outline-offset: 2px;
}

.c-button.btn-accent-secondary {
  background-color: transparent;
  color: #6c757d;
  border: 1px solid #6c757d;
}
.c-button.btn-accent-secondary:hover {
  background-color: rgba(108, 117, 125, 0.08);
}
.c-button.btn-accent-secondary:focus {
  outline: 2px solid rgb(128.6856223176, 137.7802575107, 145.8643776824);
  outline-offset: 2px;
}

.c-button.btn-accent-success {
  background-color: transparent;
  color: #198754;
  border: 1px solid #198754;
}
.c-button.btn-accent-success:hover {
  background-color: rgba(25, 135, 84, 0.08);
}
.c-button.btn-accent-success:focus {
  outline: 2px solid rgb(33.203125, 179.296875, 111.5625);
  outline-offset: 2px;
}

.c-button.btn-accent-danger {
  background-color: transparent;
  color: #dc3545;
  border: 1px solid #dc3545;
}
.c-button.btn-accent-danger:hover {
  background-color: rgba(220, 53, 69, 0.08);
}
.c-button.btn-accent-danger:focus {
  outline: 2px solid rgb(225.25, 83.3, 96.9);
  outline-offset: 2px;
}

.c-button.btn-accent-warning {
  background-color: transparent;
  color: #ffc107;
  border: 1px solid #ffc107;
}
.c-button.btn-accent-warning:hover {
  background-color: rgba(255, 193, 7, 0.08);
}
.c-button.btn-accent-warning:focus {
  outline: 2px solid rgb(255, 202.3, 44.2);
  outline-offset: 2px;
}

.c-button.btn-accent-info {
  background-color: transparent;
  color: #0dcaf0;
  border: 1px solid #0dcaf0;
}
.c-button.btn-accent-info:hover {
  background-color: rgba(13, 202, 240, 0.08);
}
.c-button.btn-accent-info:focus {
  outline: 2px solid rgb(47.7747035573, 210.9646245059, 243.7752964427);
  outline-offset: 2px;
}

.c-button.btn-accent-default {
  background-color: transparent;
  color: #6c757d;
  border: 1px solid #6c757d;
}
.c-button.btn-accent-default:hover {
  background-color: rgba(108, 117, 125, 0.08);
}
.c-button.btn-accent-default:focus {
  outline: 2px solid rgb(128.6856223176, 137.7802575107, 145.8643776824);
  outline-offset: 2px;
}

.c-button.btn-outline-main {
  background-color: transparent;
  color: #007bff;
  border: 1px solid #007bff;
  transition: background-color 0.3s, color 0.3s;
}
.c-button.btn-outline-main:hover {
  background-color: #007bff;
  color: #fff;
}
.c-button.btn-outline-main:focus {
  outline: 2px solid rgb(38.25, 142.8, 255);
  outline-offset: 2px;
}

.c-button.btn-outline-accent {
  background-color: transparent;
  color: #0dcaf0;
  border: 1px solid #0dcaf0;
  transition: background-color 0.3s, color 0.3s;
}
.c-button.btn-outline-accent:hover {
  background-color: #0dcaf0;
  color: #fff;
}
.c-button.btn-outline-accent:focus {
  outline: 2px solid rgb(47.7747035573, 210.9646245059, 243.7752964427);
  outline-offset: 2px;
}

.c-button.btn-outline-secondary {
  background-color: transparent;
  color: #6c757d;
  border: 1px solid #6c757d;
  transition: background-color 0.3s, color 0.3s;
}
.c-button.btn-outline-secondary:hover {
  background-color: #6c757d;
  color: #fff;
}
.c-button.btn-outline-secondary:focus {
  outline: 2px solid rgb(128.6856223176, 137.7802575107, 145.8643776824);
  outline-offset: 2px;
}

.c-button.btn-outline-success {
  background-color: transparent;
  color: #198754;
  border: 1px solid #198754;
  transition: background-color 0.3s, color 0.3s;
}
.c-button.btn-outline-success:hover {
  background-color: #198754;
  color: #fff;
}
.c-button.btn-outline-success:focus {
  outline: 2px solid rgb(33.203125, 179.296875, 111.5625);
  outline-offset: 2px;
}

.c-button.btn-outline-danger {
  background-color: transparent;
  color: #dc3545;
  border: 1px solid #dc3545;
  transition: background-color 0.3s, color 0.3s;
}
.c-button.btn-outline-danger:hover {
  background-color: #dc3545;
  color: #fff;
}
.c-button.btn-outline-danger:focus {
  outline: 2px solid rgb(225.25, 83.3, 96.9);
  outline-offset: 2px;
}

.c-button.btn-outline-warning {
  background-color: transparent;
  color: #ffc107;
  border: 1px solid #ffc107;
  transition: background-color 0.3s, color 0.3s;
}
.c-button.btn-outline-warning:hover {
  background-color: #ffc107;
  color: #fff;
}
.c-button.btn-outline-warning:focus {
  outline: 2px solid rgb(255, 202.3, 44.2);
  outline-offset: 2px;
}

.c-button.btn-outline-info {
  background-color: transparent;
  color: #0dcaf0;
  border: 1px solid #0dcaf0;
  transition: background-color 0.3s, color 0.3s;
}
.c-button.btn-outline-info:hover {
  background-color: #0dcaf0;
  color: #fff;
}
.c-button.btn-outline-info:focus {
  outline: 2px solid rgb(47.7747035573, 210.9646245059, 243.7752964427);
  outline-offset: 2px;
}

.c-button.btn-outline-default {
  background-color: transparent;
  color: #6c757d;
  border: 1px solid #6c757d;
  transition: background-color 0.3s, color 0.3s;
}
.c-button.btn-outline-default:hover {
  background-color: #6c757d;
  color: #fff;
}
.c-button.btn-outline-default:focus {
  outline: 2px solid rgb(128.6856223176, 137.7802575107, 145.8643776824);
  outline-offset: 2px;
}

.c-button--block {
  display: block;
  width: 100%;
}
.c-button--shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.c-button--ghost {
  background-color: transparent;
  border: 2px solid currentColor;
  color: inherit;
}
.c-button--pill {
  border-radius: 9999px;
}

/* --- 固定ボタン・位置系 --- */
.c-button--fixed--bottom-right {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1000;
}

.c-button--fixed--bottom-left {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 1000;
}

.c-button--fixed--top-right {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
}

.c-button--fixed--top-left {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1000;
}

.c-button--fixed--center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.c-button--fixed--mobile-only {
  display: none;
}
@media (max-width: 768px) {
  .c-button--fixed--mobile-only {
    display: block;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1000;
  }
}

.c-button--fixed--cta {
  position: fixed;
  bottom: 1.5rem;
  right: 1rem;
  padding: 1rem 2rem;
  font-size: 1.25rem;
  z-index: 1000;
  animation: pulse 1.5s ease-in-out infinite !important;
  will-change: transform;
}

.c-button--fixed--scroll-up {
  display: none;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.c-button--fixed--scroll-up.show-scroll-up {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* --- 装飾・見た目変化系 --- */
.c-button--block {
  display: block;
  width: 100%;
}
.c-button--block:hover {
  opacity: 0.7;
  transition: opacity 0.2s;
}
.c-button--full {
  display: inline-block;
  width: 100%;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-link-button {
  display: inline-block;
  font-size: 1rem;
  font-weight: normal;
  color: #007bff;
  text-decoration: none;
  cursor: pointer;
}
.c-link-button:hover {
  text-decoration: underline;
  color: rgb(0, 98.4, 204);
}

.c-link-button--underline {
  text-decoration: underline;
}
.c-link-button--underline:hover {
  text-decoration: none;
  color: rgb(0, 98.4, 204);
}

.c-link-button--bold {
  font-weight: bold;
}
.c-link-button--bold:hover {
  color: rgb(0, 98.4, 204);
}

.c-button--icon-left {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.c-button--icon-left i,
.c-button--icon-left svg {
  margin-right: 0.25em;
}
.c-button--icon-right {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.c-button--icon-right i,
.c-button--icon-right svg {
  margin-left: 0.25em;
}

/* --- 特定用途ボタン --- */
/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-button--admin {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  font-weight: bold;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  text-align: center;
  transition: 0.3s;
  background-color: #cccccc;
  color: #ffffff;
}
.c-button--admin:hover {
  background-color: rgb(76.5, 76.5, 76.5);
  opacity: 0.9;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}

.c-button--admin.is-disabled {
  opacity: 0.5;
}

.c-button--admin.is-loading::after {
  content: "...";
  margin-left: 0.5rem;
  font-size: 0.875rem;
}

/* ▼ ボタン系 UI（button配下） */
/* --- 基本ボタン構造 --- */
/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-button--lp {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  font-weight: bold;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  text-align: center;
  transition: 0.3s;
  background-color: #d9a56b;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: 2.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}
.c-button--lp:hover {
  background-color: rgb(206.5806451613, 140.3225806452, 66.4193548387);
  opacity: 0.9;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}

.c-button--lp.is-wide {
  width: 100%;
  text-align: center;
}

.c-button--lp.is-large {
  padding: 1.125rem 2.5rem;
  font-size: 1.125rem;
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.c-button--cta {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #ccc;
  opacity: 0.6;
  color: #fff;
  font-size: 1.25rem;
  font-weight: bold;
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: background-color 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
  text-align: center;
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
}
.c-button--cta:hover {
  filter: brightness(0.9);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}
.c-button--cta.is-active {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
  background-color: deepskyblue;
  padding: 1rem 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transform: none;
}
.c-button--cta.is-loading {
  opacity: 0.6;
  pointer-events: none;
  cursor: wait;
}
.c-button--cta:disabled {
  background-color: #ccc !important;
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------------------------------------------
   6. 状態管理（state）
--------------------------------------------- */
.is-hidden {
  display: none !important;
}

.is-visible {
  display: block !important;
}

.is-active {
  opacity: 1;
  pointer-events: auto;
}

.is-inactive {
  opacity: 0.5;
}

.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.is-loading {
  cursor: wait;
  opacity: 0.5;
}

/* ---------------------------------------------
   7. ユーティリティ（utility）
--------------------------------------------- */
.mt-16 {
  margin-top: 1rem;
}

.mb-16 {
  margin-bottom: 1rem;
}

.mt-32 {
  margin-top: 2rem;
}

.mb-32 {
  margin-bottom: 2rem;
}

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

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.hidden {
  display: none !important;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.w-100 {
  width: 100%;
}

.max-w-full {
  max-width: 100%;
}

.fs-14 {
  font-size: 0.875rem;
}

.fs-16 {
  font-size: 1rem;
}

.fs-20 {
  font-size: 1.25rem;
}

/* ---------------------------------------------
   8. ユーティリティロジック（utils）
--------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

.full-screen {
  inline-size: 100% !important;
  block-size: 100vh !important;
}

/* 古いブラウザ向けゆるフォールバック（任意） */
@supports not (width: 100svw) {
  .full-screen {
    inline-size: 100%;
  }
}
.mt-16 {
  margin-top: 1rem !important;
}

.mb-8 {
  margin-bottom: 0.5rem !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.u-text-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.u-overflow-auto {
  overflow: auto !important;
}

.u-overflow-hidden {
  overflow: hidden !important;
}

.u-scroll-x {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.u-inline-block {
  display: inline-block !important;
}

.u-block {
  display: block !important;
}

.u-flex {
  display: flex !important;
}

.u-grid {
  display: grid !important;
}

.no-scroll {
  overflow: hidden !important;
  height: 100% !important;
  touch-action: none !important;
}

.u-visible {
  visibility: visible !important;
}

.u-hidden {
  visibility: hidden !important;
}

.is-active {
  display: block !important;
}

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

.u-invisible-aria {
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.is-hover:hover {
  opacity: 0.8;
}

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

.u-visible {
  display: block !important;
}

.is-invisible {
  visibility: hidden !important;
}

.is-visible-inline {
  display: inline !important;
}

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

.is-opacity-0 {
  opacity: 0 !important;
}

.is-opacity-100 {
  opacity: 1 !important;
}

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

.hidden-sm {
  display: none;
}
@media screen and (min-width: 768px) {
  .hidden-sm {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .hidden-md {
    display: none;
  }
}

.visible-sm {
  display: block;
}
@media screen and (min-width: 768px) {
  .visible-sm {
    display: none;
  }
}

.visible-md {
  display: none;
}
@media screen and (min-width: 768px) {
  .visible-md {
    display: block;
  }
}

.only-sm {
  display: block;
}
@media screen and (min-width: 768px) {
  .only-sm {
    display: none;
  }
}

.only-md {
  display: none;
}
@media screen and (min-width: 768px) {
  .only-md {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .u-hidden-md {
    display: none !important;
  }
}

.u-visible-md {
  display: none !important;
}
@media screen and (min-width: 768px) {
  .u-visible-md {
    display: block !important;
  }
}

@media screen and (min-width: 1024px) {
  .u-hidden-lg {
    display: none !important;
  }
}

.u-visible-lg {
  display: none !important;
}
@media screen and (min-width: 1024px) {
  .u-visible-lg {
    display: block !important;
  }
}

/* =============================================
  main.scss
============================================ */
/*
  ■ プロジェクト全体の読み込み統括ファイル（エントリーポイント）
  ■ フォルダ別にすべての @use を統制
  ■ 各ファイルの依存関係も意識して読み込み順を調整
  ■ 実際にCSSに出力されるルール（body など）もここに記述
*/
/* ---------------------------------------------
   1. sassのモジュール（組み込み）
--------------------------------------------- */
/* ---------------------------------------------
   2. 抽象系（abstracts）
--------------------------------------------- */
.mt-1 {
  margin-top: 0.5rem !important;
}

.mb-1 {
  margin-bottom: 0.5rem !important;
}

.my-1 {
  margin-block: 0.5rem !important;
}

.mx-1 {
  margin-inline: 0.5rem !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-left {
  text-align: left !important;
}

.is-sm {
  font-size: 0.875rem;
  padding: 0.25em 0.5em;
}

.is-lg {
  font-size: 1.125rem;
  padding: 0.75em 1.5em;
}

.is-rounded {
  border-radius: 9999px;
}

.is-square {
  border-radius: 0;
}

.is-borderless {
  border: none !important;
}

.is-shadow {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.is-primary {
  background-color: #007bff;
  color: #fff;
}

.is-accent {
  background-color: #d9a56b;
  color: #fff;
}

.is-muted {
  background-color: #f0f0f0;
  color: #666;
}

.is-white {
  background-color: #fff;
  color: #111;
}

.is-dark {
  background-color: #111;
  color: #fff;
}

.is-block {
  display: block !important;
}

.is-inline {
  display: inline !important;
}

.is-inline-block {
  display: inline-block !important;
}

.is-flex {
  display: flex !important;
}

.is-grid {
  display: grid !important;
}

.is-bold {
  font-weight: bold !important;
}

.is-normal {
  font-weight: normal !important;
}

.is-italic {
  font-style: italic !important;
}

.swiper-button-next,
.swiper-button-prev {
  color: #333;
  width: 40px;
  height: 40px;
}

.swiper-pagination-bullet {
  background-color: #ccc;
}

.swiper-pagination-bullet-active {
  background-color: #007aff;
}

[data-aos] {
  transition-duration: 1000ms;
  opacity: 0.8;
}