/* ① Light（300）-------------------------------------- */
/*@font-face{
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Light"),
       local("HelveticaNeue-Light"),
       url("../fonts/HelveticaNeueLight.otf") format("opentype");
  font-weight: 300;
  font-style : normal;
  font-display: swap;
}

/* 追加：Helvetica Neue Roman（Regular = 400） */
/*@font-face{
  font-family:"Helvetica Neue";
  src:url("../fonts/HelveticaNeueRoman.otf") format("opentype");
  font-weight:400;      /* Regular/Roman は 400 */
  /*font-style:normal;/*
  font-display:swap;/*
}

/* ③ Medium（500）------------------------------------- */
/*@font-face{
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Medium"),
       local("HelveticaNeue-Medium"),
       url("../fonts/HelveticaNeueMedium.otf") format("opentype");
  font-weight: 500;
  font-style : normal;
  font-display: swap;
}

/* ④ Bold（700）--------------------------------------- */
/*@font-face{
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Bold"),
       local("HelveticaNeue-Bold"),
       url("../fonts/HelveticaNeueBold.otf") format("opentype");
  font-weight: 700;
  font-style : normal;
  font-display: swap;
}

/*-----------------------------------------------
  変数定義
-----------------------------------------------*/
:root {
  /* フォントサイズ */
  --fs-base: 1rem;       /* 16px */
  --fs-lg: 1.25rem;      /* 20px */
  --fs-xl: 1.5rem;       /* 24px */

  /* スペーシング */
  --space-xs: 0.5rem;    /* 8px */
  --space-s : 1rem;      /* 16px */
  --space-m : 2rem;      /* 32px */
  --space-l : 4rem;      /* 64px */

  /* カラー */
  --yellow: #FFFF00;
  --black : #000;
  --bg-light: #FFFADD;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* 英数字 → Helvetica Neue（Mac には必ずある書体）
     日本語 → Source Han Sans JP（Web フォント or ローカルにある場合）
     どちらも無い環境はシステム既定の sans‑serif にフォールバック */
  font-family:
     'Helvetica Neue LT Std',  
     'Source Han Sans JP',      /* 日本語用 */
     'Noto Sans JP',            /* 予備：Google の日本語フォント */
     'Helvetica', 'Arial',      /* さらに古い環境の保険 */
     sans-serif;                /* 最終フォールバック */
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--black);
  background-color: #fff;
  margin: 0;
  padding: 20px;
}

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

main {
  max-width: 1100px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}

body.price-page {
  padding-top: 120px;  /* ← ヘッダー高さに合わせて調整（96px〜120px） */
}


.button-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 50px;  /* 横の間隔（そのまま） */
  row-gap: 80px;     /* ← ここを増やせば縦が広がる */
  margin-bottom: 20px;
}


/* 丸いボタン本体 */
.button-item{
  width: 210px;          /* 直径。% にしても OK */
  aspect-ratio: 1;       /* 正円。IE は height:200px も書く */
  border-radius: 50%;    /* 完全な円 */
  background: #fff;
  border: 1px solid #deb037;     /* ゴールドの枠線 */
  margin-bottom: 20px; 

  /* 影 = 浮いて見せる */
  box-shadow: 3px 3px 0 0 #deb037; /* 右下へ 12px */

  /* 押し込みアニメ */
  transition: box-shadow .2s, transform .2s;

  /* 中身のレイアウトは今のまま流用 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .4em;

  color: #6b4e2a;
  text-decoration: none;
  font-weight: bold;
  box-sizing: border-box;   /* ここは残す */
  cursor: pointer;
  position: relative;
}

/* ホバーで“押した”感じ */
.button-item:hover{
  transform: translate(12px,12px);   /* 本体を影の分だけ動かす */
  box-shadow: 0 0 0 0 #deb037;       /* 影をなくす＝凹む演出 */
}

/* 右下の三角は不要なので出さない */
.button-item::after{ content:none; }

.button-item img {
  width: 70px;
  height: 70px;
  margin-bottom: 8px;
}

/* 噛み合わせ治療アイコンを大きく */
.button-item.icon-large-kamiawase img {
  width: 80px;
  height: 74px;
}

/* 矯正治療アイコンをさらに大きく */
.button-item.icon-large-kyousei img {
  width: 77px;
  height: 75px;
}

/* 入れ歯治療アイコンを大きく */
.button-item.icon-large-ireba img {
  width: 80px;
  height: 80px;
}

.button-item span {
  display: block;
  font-size: 16px;
  margin-top: 0.5px;    /* ← 追加：上との余白を調整 */
  line-height: 0.8;   /* ← 行間を少し詰める（必要なら） */
  color: #6b4e2a; /* 日本語文字：茶色 */
}

.button-item .en-label {
  color: #d4af37;
  font-size: 14px;
  margin-top: 1px;     /* ←必要なら少し狭く */
  line-height: 1.0;    /* ← これが上下の詰まり具合に効く */
}

.tax-info-box {
  font-size: 16px;
  line-height: 1.7;
  margin-top: -10px;
  margin-bottom: 30px;
  padding: 1em 1.5em;
  border-radius: 4px;
}


.section-header {
  background-color: #edb83c; /* または #e87c30 */
  color: white;
  font-size: 20px;
  font-weight: bold;
  padding: 8px 20px;
  margin-top: 40px;
  margin-bottom: 20px;
  text-align: center;
  border-radius: 4px;
}

.subheading {
  font-weight: bold;
  color: #8d6449;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 18px;
  padding-left: 12px;  /* 余白 */
  border-left: 4px solid #8d6449;  /* ← 縦線を追加 */
}


.custom-price-table table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
  font-size: 16px;
  border: 1px solid #ccc; /* 外枠に線を追加 */
}

.custom-price-table td {
  padding: 15px 20px;
  border: 1px solid #ccc; /* すべてのセルに線 */
  vertical-align: middle;
}

/* 左列（治療名） */
.custom-price-table .treatment {
  background-color: #f5f5f5;
  width: 50%;
  border-right: 1px solid #ccc;
}

/* 右列（金額） */
.custom-price-table .price {
  background-color: #ffffff;
  width: 50%;
  text-align: right;
  color: #444;
}

.price.insurance {
  color: #007bff;
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* ← 横4列に変更 */
  gap: 10px;
  margin-bottom: 30px;
}

.button-grid button {
  background-color: #edb83c;
  border: none;
  padding: 20px 30px;
  font-size: 16px;
  cursor: pointer;
  color: white;
  font-weight: bold;
  width: 100%;
}




/* ---------- 固定ヘッダー高さぶんだけ止まる位置を下げる ---------- */
.section-header,
.subheading {
  scroll-margin-top: 10px;   /* ← ヘッダーの高さ＋少し余裕 */
}

/* ＝＝＝＝＝＝ 料金ページ専用オーバーライド ＝＝＝＝＝＝ */
body.price-page{
  padding:0;                /* 余白だけゼロにして動画を端まで見せる */
  background:none;          /* ↓ポイント：塗りつぶし色は付けない */
}

/* ▼動画を画面いっぱいに貼り付けて最背面へ */
body.price-page .video-background{
  position:fixed;           /* スクロールしても追従 */
  inset:0;                  /* top:0; right:0; bottom:0; left:0 と同義 */
  z-index:-1;               /* コンテンツより背面へ */
  overflow:hidden;
}

/* ▼動画そのものを拡大して常に全面をカバー */
body.price-page .video-background video{
  width:100%;
  height:100%;
  object-fit:cover;         /* 余白ナシで中央トリミング */
}

/* （任意）黄色いトーンを薄く重ねたい場合は ↓ */
body.price-page::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;               /* 動画のすぐ上、コンテンツの下 */
}

/* ＝＝＝＝＝ 料金ページ見出し（2行） ＝＝＝＝＝ */
.lead {
  font-size: 25px;
  text-align: center;
  line-height: 1.4;
  font-family: 'Kiwi Maru', sans-serif;
}

.lead .highlight {
  color: #e87c30;
  font-family: 'Kiwi Maru', sans-serif;
}

.description {
  font-size: 17px;
  line-height: 1.7;
  margin: 1rem 0 4rem;
  color: #555;
  text-align: center;
  font-family: 'Kiwi Maru', sans-serif;
}

.page-title {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  margin-top: 100px;  /* ヘッダーとの余白 */
  margin-bottom: 40px; /* 下の余白 */
  line-height: 1.2;
}

.page-title .en{
  display:block;      /* 1行目 */
  font-family:'Inter','Helvetica Neue',sans-serif;
  font-size:50pt;     /* ≒ 66.7px */
  font-weight:400;
  letter-spacing:0.02em;
}

.page-title .jp{
  display:block;      /* 2行目 */
  font-family:'Noto Sans JP','Source Han Sans JP',sans-serif;
  font-weight:400;
  font-size:16pt;     /* ≒ 24px */
  margin-top:4px;     /* 英語と少し離す */
}

/* 固定位置（中央下） */
.floating-return-top {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 表示状態 */
.floating-return-top.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}



/* ボタンの見た目 */
.custom-top-btn a {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 2px solid #edb83c;
  color: #333;
  padding: 12px 40px;
  border-radius: 50px;
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
  overflow: visible;
}

/* 上向き矢印（三角形） */
.custom-top-btn .arrow-up {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid #d2a336;
  margin-bottom: 6px;
  transition: transform 0.3s ease;
}

.custom-top-btn a:hover {
  color: #d2a336;  /* ← テキスト色を縁と同じに変更 */
  box-shadow: 0 10px 20px rgba(232, 124, 48, 0.2); /* ← オレンジの影だけ追加 */
}

/* ホバー時に矢印を上にスライド */
.custom-top-btn a:hover .arrow-up {
  transform: translateY(-5px);
}

/* 文字（必要に応じて調整） */
.custom-top-btn .top-label {
  line-height: 1;
}

/*-----------------------------------------------
  REASONS セクション
-----------------------------------------------*/

.section-subtitle {
  padding-top: 1vw;
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: top;   /* インラインボックスならこれでも */
  align-self: flex-start; /* flex子要素ならこれで上揃え */
}



/* ------------------------------
   予約ボタン
--------------------------------*/
.reservation-wrapper {
  position: fixed;
  bottom: 4vw;
  right: 7vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  z-index: 1000;
}

@keyframes rotate-text {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rotating-group {
  animation: rotate-text 40s linear infinite;
  transform-origin: 75px 75px; /* ボタンの中心に合わせる */
}

/* 歯のキャラ */
.tooth-mascot {
  position: absolute;
  top: -40px;
  right: -22px;
  width: 90px;
  height: 90px;
  z-index: 1;
  opacity: 1;
  transform-origin: 50% 100%;
  animation: cute-mascot 2s ease-in-out infinite;
}

@keyframes cute-mascot {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  50% {
    transform: rotate(5deg) translateY(0);
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}

/* ------------------------------
   ヘッダー
--------------------------------*/
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  background: transparent;
  padding-inline: 2vw;
  display: flex;
  align-items: center;
  z-index: 100;
}

.header-inner {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--space-m);
}

/* 左側まとめ：フラッグ + テキスト + 院名 */
.logo-block {
  display: flex;
  align-items: center;
  gap: var(--space-m);
}

/* フラッグ + テキスト */
.flag-block {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.flag-block img {
  height: 6rem; /* 96px相当 */
}

/* 「もうすぐ開業～」テキスト */
.flag-text {
  display: flex;
  margin-bottom: 20px;
  flex-direction: column;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0;
  text-align: right;
  text-transform: uppercase;
}

.flag-text p {
  margin: 0;
}

/* 旗ブロックの中でアイコンを決まったサイズに */
.flag-icon {
  display: flex;
  align-items: center;
  margin-right: 8px;          /* テキストとの間隔 */
}

.flag-icon svg #cloth-wrapper{
  transform-origin: 0 50%;        /* 左端を支点に */
  transform-box:   fill-box;      /* SVG 内座標を採用 */
  animation: flagWave 2.5s ease-in-out infinite;
}

@keyframes flagWave{
  /*          平行移動       回転        横スケール */
  0%   { transform: translate(20.5px,6px) rotate( 0deg)  scaleX(1);   }
  50%  { transform: translate(21.5px,4.6px) rotate( 4deg)  scaleX(0.9) scaleY(1.02);}
 100%  { transform: translate(20.5px,6px) rotate( 0deg)  scaleX(1);   }
}

/* 院名エリア */
.clinic-name {
  display: flex;
  flex-direction: column;
  font-weight: 500;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.clinic-name .jp {
  font-size: var(--fs-xl);
  font-weight: 700;
}

.clinic-name .en {
  margin-top: 7px;
  font-size: var(--fs-lg);
  color: var(--black);
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
}
/* ※フォント未指定 */
.en-bold {
  font-weight: 900;
}

/* ハンバーガーメニュー */
.menu-toggle {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 50px;            /* ← ここで横幅をきちんと与える */
  height: 30px;           /* ← ３本線の間隔＋線の高さを含めた高さを指定 */
  gap: 4px;               /* ← var(--space-xs) の代わりに固定値でもOK */
  cursor: pointer;
  margin-bottom: 1vw;
}

.menu-toggle span {
  display: block;
  width: 100%;            /* 親の30px幅いっぱい */
  height: 3px;            /* 0.1875rem = 3px */
  background: #000;       /* var(--black) の代わりに直接 #000 を指定 */
  border-radius: 1px;
}






/* --------- ACCESS セクション --------- */
.access-section {
  padding: 80px 0;
}

.access-section .section-subtitle {
  margin-bottom: 40px;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  letter-spacing: 0;
  text-align: center;
}

/* 左右2カラムレイアウト */
.access-content {
  display: flex;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.access-info {
  flex: 1;
}
.access-map {
  flex: 1;
  min-height: 320px;
  border-radius: 8px;
  overflow: hidden;
}

/* バッジ */
.access-badges {
  margin-bottom: 16px;
}
.badge {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  padding: 6px 10px;
  margin-right: 18px;
}

.badge-outline {
  border: 1px solid #000;
  color: #000;
}

/* クリニック名 */
.clinic-name {
  font-weight: 600;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: uppercase;
}

/* ========= 診療時間セクション ========= */
/*────────── 診療時間セクション (最終版) ──────────*/
.clinic-hours{
  margin:2rem 0;
  font-weight: 800;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  text-transform: uppercase;
}

/* 親：2 列グリッド（左＝ラベル列／右＝曜日グリッド） */
.hours-container{
  display:grid;
  grid-template-columns:max-content 1fr; /* 左は最小幅・右は残り全部 */
  column-gap:2rem;
  row-gap:.75rem;
  align-items:start;
}

/* ── 左列 ───────────────────────────────*/
.hours-label,
.extra-label{
  grid-column:1 / 2;       /* ★ 常に左列 */
  white-space:nowrap;
}
.hours-label:first-child{font-weight:700;} /* 「診療時間」を太字 */

/* ── 右列：曜日グリッド ＆ 補足テキスト ─────────────*/
.days-header,
.days-row,
.extra-text{
  grid-column:2 / 3;       /* ★ 常に右列 */
}

.days-header,
.days-row{
  display:grid;
  grid-template-columns:repeat(6,2.2rem); /* 月〜土 6 等幅 */
  column-gap:.25rem;
}

.day-cell{
  text-align:left;         /* 黒丸を左寄せ */
  justify-self:start;
  line-height:1;
}
.days-row .day-cell{font-size:1.35rem;}     /* ● / △ の大きさ */

/* 補足テキスト（右列） */
.extra-text{font-weight:400;}

/* ── スマホ：縦 1 列に切替 ───────────────────*/
@media (max-width:768px){
  .hours-container{grid-template-columns:1fr;}
  .days-header,
  .days-row{grid-template-columns:repeat(6,1fr);}
}


/* ======== 診療時間レイアウト微調整 ======== */

/* 親を「左：ラベル列」「右：曜日グリッド」の 2 列に */
.hours-container{
  display:grid;
  grid-template-columns:max-content 1fr; /* 左は必要最小、右は残り幅 */
  column-gap: 28px;                      /* 左右のすき間 */
  align-items:start;
}

/*────────── 診療時間セクション ──────────*/
.clinic-hours {
  font-size: 18px;
  line-height: 28px;
  margin: 2rem 0;
}

/* 親：2 列グリッド（左＝ラベル列 / 右＝曜日グリッド） */
.hours-container {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 2rem;   /* 左右のすき間 */
  row-gap: 0.3rem;   /* 行のすき間 */
  align-items: start;
}

/* ── 左列 ──────────────────────────────*/
.hours-label {
  font-weight: 400;
  font-size: 19px;
  white-space: nowrap;
}

.hours-label:first-child {           /* 「診療時間」を太字 */
  font-weight: 600;
}

/* ── 右列：曜日グリッド ─────────────────*/
.days-header,
.days-row {
  display: grid;
  grid-template-columns: repeat(6, 2rem); /* セル幅固定 */
  column-gap: 0rem;
  margin-top: 2px;
}
.day-cell {
  text-align: left;
  justify-self: start;
  line-height: 1;
}
.days-row .day-cell {
  font-size: 1.35rem;  /* ● / △ のサイズ */
}

/* ── 補足行（左：ラベル / 右：テキスト） ─────────*/
.extra-label {
  font-weight: 500;
  white-space: nowrap;
  justify-self: end; /* グリッドセル内で右端に寄せる */
  text-align: right; /* 文字自体も右寄せに */
}
.extra-text {
  font-weight: 400;
}

/* ① 左列に来るもの ―――――――――――――― */
.hours-label  { grid-column: 1 / 2; }   /* 診療時間 / 09:00〜13:00 / 15:00〜19:00 */
.extra-label  { grid-column: 1 / 2; }   /* 土曜日 / 休診日 */

/* ② 右列に来るもの ―――――――――――――― */
.days-header,
.days-row,
.extra-text  { grid-column: 2 / 3; }    /* 曜日ヘッダー・●△行・補足テキスト */

/* ※ スマホ用レイアウトはそのまま（縦 1 列）で OK  */


/* ── スマホ：縦並びに切替 ─────────────────*/
@media (max-width: 768px) {
  .hours-container { grid-template-columns: 1fr; }
  .days-header,
  .days-row   { grid-template-columns: repeat(6, 1fr); }
}

/* 電話番号 */

/* 住所 */

/* メモ */
.access-note {
  font-size: 14px;
  color: #000000;
  margin-bottom: 24px;
  line-height: 1.6;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
}

/* SNS */
.social-links a {
  display: inline-block;
  margin-right: 35px;
}
.social-links img {
  width: 35px;
  height: 35px;
}

/* -------- 電話番号 & 住所：2 列グリッド -------- */
.access-row{
  display:grid;
  grid-template-columns:max-content 1fr; /* 左＝ラベル／右＝値 */
  column-gap:2rem;
  row-gap:.5rem;
  margin-bottom:1rem;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
}

.access-label{
  font-weight:600;
  white-space:nowrap;
}

.access-value{
  font-weight:400;
  line-height:1.6;
}

.access-value a{
  color:#0066cc;            /* 既存の青リンク色に合わせる */
  text-decoration:none;
}

/* 電話番号行だけ 1 列にして縦に並べる */
.access-row.phone{
  grid-template-columns: 1fr;   /* ★ 1 列 */
  row-gap: .25rem;              /* 行間を少し狭く */
}
.access-row.phone .access-label{
  margin-bottom: 0;             /* 余白リセット（好みで調整） */
}

/* 住所行は 1 列＋3 行表示（ラベル上、値下：3 行） */
.access-row.address{
  grid-template-columns:1fr;  /* ★ 1 列に */
  row-gap:.25rem;             /* 行間 */
}
.access-row.address .access-label{
  margin-bottom:0;            /* ラベルすぐ下に値 */
}

/* Google Map 表示サイズを拡大（PC） */
.access-map iframe{
  width:100%;            /* 親幅いっぱい（横） */
  height:540px;          /* ← 好きな高さに調整 */
}

/* SP は少し小さめに（既存ルールに上書き） */
@media(max-width:768px){
  .access-map iframe{
    height:320px;        /* 以前の 200px より大きめ */
  }
}


@media(max-width:768px){
  .access-row{
    grid-template-columns:1fr;  /* スマホでは縦並び */
  }
  .access-label{
    margin-bottom:.25rem;
  }
}

/* レスポンシブ（スマホ1カラム） */
@media screen and (max-width: 768px) {
  .access-content {
    flex-direction: column;
  }
  .access-map {
    height: 200px;
  }
}


/* ナビ部分をグリッドで 4 列固定 */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 3rem; /* 元は32px程度なので、お好みで増減してください */
  padding: 60px 0 40px; 
  margin-top: -3rem;       /* 上の余白をなくす */
}

/* 各カラムタイトル */
.footer-col-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 0.5rem; /* 元は1.5remくらい入っていた想定なので半分に */
}

/* リストの点は「・」で再現 */
.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-list li {
  position: relative;
  padding-left: 1em;
  margin-bottom: 8px;
  line-height: 1.2;      /* デフォルト 1.5 くらい → 1.2 に詰める */
}

.footer-list li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: #000;
}

/* ───────── footer bottom ───────── */
.footer-bottom{
  /* ★ 親自身の横幅を区切り線と同じクランプ幅に固定 */
  width: 90%;
  max-width: 1200px;
  margin: 20px auto 70px;      /* ← auto でページ中央に配置 */
  /* 子を縦に並べる */
  display: flex;
  flex-direction: column;
  align-items: flex-start;     /* ← 左にそろえる ※ここ重要 */
}

/* 区切り線は "親いっぱい" に広げれば左端がそろう */
.footer-bottom hr{
  width: 100%;
  margin: 0 0 16px;            /* ← 左右 auto は不要 */
  line-height: 1.6;
}

/* コピーライトは特に位置指定しなくても OK */
.footer-bottom .copyright{
  margin: 0;
  text-align: left;
}


/* 「TOP / 痛みが少ない麻酔」のタイトルを
  .container と同じ幅で中央寄せ */
 .site-footer > .footer-col-title {
    width: 83%;               /* .container と同じ幅 */
    max-width: 1200px;        /* .container と同じ上限 */
    margin: 30rem auto 0.5rem;    /* 上マージン0、下1.5rem、左右自動中央寄せ */
    text-align: left;         /* 左揃えはそのまま */
    border-bottom: 1px solid #B0B0B0;
    padding-bottom: 1rem;  /* ← 下線までの距離をここで調整 */
    margin-top: 2rem;       /* 上の余白をなくす */
    color: #000;
    font-size: 14px;
    line-height: 1.6;
  }

  .container {
    width: 90%;
    max-width: 1200px;
    margin-inline: auto;
  }

  /* ▼ 固定フッター（スマホのみ表示） */
.fixed-footer {
  display: none; /* PCは非表示 */
}

/* モーダルの背景 */
.modal {
  display: none; /* 初期は非表示 */
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.modal.show {
  display: flex; /* 表示時は flex で中央配置 */
}


/* モーダルの中身 */
.modal-content {
  background: white;
  padding: 1rem;
  border-radius: 20px;
  width: 84%;
  max-width: 400px;
  text-align: center;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* 表示アニメーション */
.modal-content.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* 閉じるボタン */
.modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}

/* モーダル内ボタン */
.modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.modal-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 20px;
  text-decoration: none;
  background: #fff;
  transition: box-shadow 0.2s ease;
  margin-bottom: 12px;
}

.modal-btn:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.modal-btn img {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

.modal-btn div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2em;
}

.modal-btn small {
  font-weight: normal;
  font-size: 0.875rem;
  line-height: 1.4;
}

.modal.show {
  display: flex !important;
}

.icon-box {
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box img {
  width: 24px;
  height: 24px;
}

/* カラー別背景 */
.icon-blue { background-color: #E6F4FF; }
.icon-green { background-color: #E6F9EC; }
.icon-gray  { background-color: #F1F1F1; }

.text-box strong {
  font-size: 16px;
  color: #333;
  display: block;
  margin-bottom: 4px;
}

.text-box small {
  font-size: 13px;
  color: #666;
}

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

.reason-item.expanded .content {
  max-height: 70vh;
  overflow-y: auto;
}


/* PC：main表示、mobile-view非表示 */
.price-mobile-view {
  display: none;
}

@media (max-width: 768px) {
  main {
    display: none;
  }
  .price-mobile-view {
    display: block;
  }
}


/* スマホ対応 */

@media (max-width: 768px) {
  
  /* スマホ専用料金セクション */
.price-mobile-view {
  background: #fffadd;
  padding: 1.5rem;
  font-family: 'Noto Sans JP', sans-serif;
}

.price-mobile-view .section-title {
  font-size: 20px;
  text-align: center;
  margin-bottom: 1rem;
}

.price-mobile-view .lead {
  font-size: 18px;
  text-align: center;
  line-height: 1.4;
  font-family: 'Kiwi Maru', sans-serif;
}

.price-mobile-view .lead .highlight {
  color: #e87c30;
  font-family: 'Kiwi Maru', sans-serif;
}

.price-mobile-view .description {
  font-size: 14px;
  line-height: 1.7;
  margin: 1rem 0 2rem;
  color: #555;
  text-align: center;
  font-family: 'Kiwi Maru', sans-serif;
}

.accordion-header {
  color: #000; 
  width: 100%;
  padding: 1rem;
  background: #fff;
  border: 1px solid #f0d394;
  font-size: 16px;
  text-align: left;
  border-radius: 15px;
  margin-bottom: 0.5rem;
  cursor: pointer;
  position: relative;
}

.accordion-header::after {
  content: "▼";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  transition: transform 0.3s;
}

.accordion-header {
  display: flex;
  align-items: center;
  gap: 16px; /* アイコンとテキストの間隔 */
  font-size: 16px;
  padding: 12px 16px;
  background-color: #fff;
  border: 1px solid #deb037;
  border-radius: 6px;
  color: #6b4e2a;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

.accordion-header .accordion-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* 噛み合わせ治療のアイコンだけ大きく */
.icon-kamiawase .accordion-icon {
  width: 40px;
  height: 40px;
}

/* 矯正治療のアイコンだけさらに大きく */
.icon-kyousei .accordion-icon {
  width: 40px;
  height: 40px;
}


.accordion-header.active::after {
  transform: translateY(-50%) rotate(180deg);
}

.accordion-content {
  display: none;
  padding: 1rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.accordion-content .treatment-list {
  list-style: none;
  padding: 0;
  font-size: 14px;
}

.treatment-list li {
  margin-bottom: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.treatment-list .label {
  flex: 1;
  padding-right: 1em; /* ← “見えない区切り”感を出す */
}

.treatment-list .price {
  text-align: right;
  font-size: 14px;
  color: #444;
  min-width: 120px; /* ← 幅を揃えて整列感UP */
}

 .treatment-list .price.insurance {
    color: #007bff;
  }

  .subsection-title {
  text-align: center;
  font-size: 14px;
  margin: 1rem 0 1rem;
  border-bottom: 0.5px solid #888;
  padding-bottom: 3px;
  width: 100%;
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin: 50px 0 20px;
  padding-bottom: 5px;         /* 下線との距離 */
  border-bottom: 2px solid #444; /* お好みの色に変更可能 */
  display: inline-block;       /* 下線の長さを文字に合わせる */
}

.flex-center {
  display: flex;
  justify-content: center;
}




  
  .button-grid {
  .button-grid,
  .custom-price-table,
  .section-header,
  .subheading {
    display: none !important;
    }
  }

  .button-item {
    width: 166px;      /* スマホでフィットしやすいサイズ */
    aspect-ratio: 1;
    padding: 10px;
    margin-bottom: 0;  /* 個別の余白不要に */
  }

  /* 共通の画像サイズを一律に */
  .button-item img {
    width: 50px;
    height: 50px;
    margin-bottom: 6px;
  }



  /* テキストサイズも小さめに */
  .button-item span {
    font-size: 12px;
    line-height: 1;
    text-align: center; /* ←追加：中央揃え（見栄えの安定） */
    word-break: keep-all; /* ←追加：単語途中で改行しない */
  }

  .button-item .en-label {
    font-size: 11px;
    line-height: 1.2;
    word-break: break-word;
    text-align: center;
  }

  .floating-return-top a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    background-color: #fff;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  
  .floating-return-top a:hover {
    background-color: #fff;
    transform: translateY(-4px);
  }

  .top-label {
    display: none; /* モバイルでは文字を隠す */
  }

  /* 矢印を表示するアイコン風デザイン */
  .arrow-up::before {
    font-size: 20px;
    color: #fff;
    line-height: 1;
  }
  

  .logo-block {
    gap: 12px;
  }

  .flag-block img {
    height: 60px;
    margin-top: 2vw;

  }

  .flag-text {
    display: none;
  }

  .clinic-name .jp {
    font-size: 16px;
  }

  .clinic-name .en {
    font-size: 12px;
  }

  .menu-toggle {
    position: static;    /* これで flex の流れに乗る */
    margin-left: auto;   /* 右端固定 */
    width: 20px;         /* 幅 */
    height: 18px;        /* 高さ */
  }

  /* テキスト位置調整 */

  .sp-br {
    display: inline;  /* br 自体が行を分けるので inline で OK */
  }

  .tooth-mascot {
    width: 70px;
    height: 70px;
    top: -32px;
    right: -18px;
  }
  
  .tooth-mascot {
    width: 4.375rem; /* 70px */
    height: 4.375rem;
    top: -4rem;      /* 32px 相当 */
    right: -1.125rem;/* 18px 相当 */
  }

  .footer-overlay {
    display: flex; /* SP時に表示 */
    /* 以下はさっきのコードと同じ */
    position: fixed;
    bottom: -10px;
    left: 0;
    width: 100%;
    justify-content: space-around;
    z-index: 9999;
  }



  .fixed-footer.show {
    opacity: 1;
    visibility: visible;
  }

  .fixed-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;

    /* 全体影 */
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);

    /* フェードイン */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;

    /* ★ 高さ固定 → これが重要！ */
    height: 56px;
}

.fixed-footer.show {
    opacity: 1;
    visibility: visible;
}

.fixed-footer .footer-item {
    flex: 1;
    text-align: center;
    padding: 6px;              /* ← padding 0にする（上下余白はimg側で調整） */
    position: relative;

    /* ★ 高さ揃え → これが重要！ */
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.fixed-footer .footer-item img {
    height: 32px;            /* ← 画像高さはこれくらいがバランス良い */
    width: auto;
}

.fixed-footer .footer-item:not(:first-child) {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.fixed-footer .footer-reservation {
    background-color: #edb83c;
    height: 100%;            /* ← 全体背景にするため必要 */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}


  .fixed-footer .footer-item:active {
    opacity: 0.8;
    transition: opacity 0.2s;
  }

  /* ▼ 個別画像サイズ（追加） */
  .fixed-footer .footer-access img {
    height: 45px;
  }
  .fixed-footer .footer-tel img {
    height: 30px;
  }
  .fixed-footer .footer-reservation img {
    height: 30px;
  }

  .modal.show {
    display: flex !important;
  }

}





/* =========  DOCTORS：ビューポート in でフェードアップ  ========= */

/* 初期状態：非表示＋下に 60px ずらす（–delay は JS で流し込む）*/

/* IntersectionObserver が付けるクラスで可視化 */

/* =========  MENU & PRICE：ビューポート in でフェードアップ  ========= */

/* ★ ビューポート in で付くクラス -------------- */

/* ---------- PRICE LIST セクション：フェードアップ ---------- */
/* ❶ 最初は少し下に  + 透明にしておく（※ delay は JS で上書き） */

/* ❷ IntersectionObserver が付ける .is-visible で元の位置＋不透明へ */

/* ===== CASES：タイトル・サブタイトル・各症例 ===== */

/* ===== GALLERY：タイトル・サブタイトル・各ギャラリー ===== */

/* ===== ACCESS：タイトル・サブタイトル・左情報・GoogleMap ===== */

.access-section .section-subtitle,
.access-info,
.access-map{
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s ease-out var(--delay,0s),
              transform .9s ease-out var(--delay,0s);
}

.access-section .section-subtitle.is-visible,
.access-info.is-visible,
.access-map.is-visible{
  opacity: 1; transform: translateY(0);
}

/* こっからレスポンシブ対応 */

@media screen and (max-width: 768px) {
  

  html, body {
    overflow-x: hidden;
  }

  .site-header {
    position: fixed;           /* ← ヘッダーを固定 */
    top: 0;                    /* ← ページの最上部に配置 */
    left: 0;
    right: 0;
    background: var(--bg-light);
    backdrop-filter: blur(10px);
    padding-inline: 4vw;
    padding-block: 0px;
    height: auto;
    align-items: center;
    z-index: 1000;             /* ← 前面に出すための z-index */
  }
  

  .logo-block {
    align-items: center; /* フラッグ＋院名の縦位置中央 */
  }

  .clinic-name {
    margin-bottom: 0; /* 下マージンを消す */
    line-height: 1;   /* 行間を詰める */
  }

  .flag-block {
    margin-top: 8px;  /* お好みで px 調整してOK */
  }

  .flag-block svg {
    height: 71px !important;
    width: auto !important;
  }

  /* ② 院名（日本語）をもう少し大きく */
  .clinic-name .jp {
    font-size: 16px;     /* 今15～16px → 少し大きく */
    font-weight: 700;    /* 太さも少し強調 */
  }

  /* サブの英語表記もバランス調整（任意） */
  .clinic-name .en {
    font-size: 12px;
    margin-top: 4px;
  }

  .sp-br {
    display: inline;
  }

  .section-subtitle {
    font-size: 12px !important;
  }

  /* GALLERY セクションのアニメーションを解除 */

  /* CASESセクション内の.containerだけ幅100%に */

/* GALLERYセクション内の.containerだけ幅100%に */

  
  .access-section .section-subtitle,
  .access-row,
  .access-note {
    font-size: 16px; /* 例：一律で16pxに */
    line-height: 1.6;
  }

  .access-map iframe {
  width: 100vw;
  height: 300px;
  border-radius: 0px;
  }
  

  /* ==========  ACCESS  ========== */
.access-section {
  padding: 60px 0;
}

/*  縦ライン（左右） */
.access-section .container {
  max-width: 480px;          /* スクリーンショットとほぼ同じ横幅 */
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

/*  バッジ  */
.access-badges {
  display: flex;
  justify-content: flex-start;
  gap: 0px;
  margin-bottom: 24px;
}

.badge-outline {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  border: 1px solid #000;
  border-radius: 2px;
}

/*  クリニック名と診療時間ブロックを "ひとかたまり" にして幅をそろえる  */
.access-info {
  display: inline-block;   /* shrink‑to‑fit にして左右幅を固定 */
  text-align: left;        /* 内部だけ左寄せ */
}

/*  クリニック名 */
.clinic-name {
  font-size: 20px;
  margin-bottom: 2px;
}

/* ==========  診療時間表  ========== */
.clinic-hours {
  --gap: 6px;             /* 行・列のすき間を一元管理 */
}

.hours-container {
  display: grid;
  grid-template-columns: auto 1fr;   /* 左：ラベル列 / 右：曜日・●列 */
  column-gap: 16px;
  row-gap: var(--gap);
  max-width: 300px;        /* 「クリニック名」と同じくらいの幅に収める */
}

/* ラベル列（診療時間・時間帯） */
.hours-label,
.extra-label {
  font: 14px;
}

/*  曜日ヘッダー・●行  */
.days-header,
.days-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);  /* 月〜土６マス */
  gap: var(--gap);
}

.day-cell {
  text-align: center;
  font: 16px "Noto Sans JP", sans-serif;
}

.extra-text {
  grid-column: 2 / -1;    /* 説明文を右側いっぱいに流す */
  font: 16px;
}

/* ● △ 用セルだけフォントを小さく */
.days-row .day-cell {
  font-size: 14px;
  line-height: 1;      /* ムダな上下余白を詰める */
}

.days-header,
.days-row {
  column-gap: 4px;        /* ←お好みで 2〜6px 辺りに調整 */
}

.footer-nav {
    grid-template-columns: 1fr;  /* ← 1列に */
    gap: 24px;
    padding: 40px 16px; /* 左右にも余白を入れると美しく見えます */
  }

.footer-col-title {
  margin-bottom: 0.5rem;
}

.footer-list li {
  padding-left: 0.8em;
}

.site-footer {
    max-width: 480px;
    padding-inline: 10px;
    width: 100%;
  }

  .site-footer a {
  color: inherit !important;
  text-decoration: none !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}


  .footer-section .footer-list {
    display: none;
    padding-left: 1rem;
    padding-top: 0.5rem;
  }
  .footer-section.open .footer-list {
    display: block;
  }
  
  .footer-toggle {
    color: #000;   
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    border: none;
    background: none;
    padding: 12px 0;
    border-top: 1px solid #ccc;
    cursor: pointer;
  }
  .footer-icon {
    font-weight: bold;
  }

  /* 明示的にリンク風を殺す */
.footer-col-title:link,
.footer-col-title:visited,
.footer-col-title:hover,
.footer-col-title:active {
  color: #000 !important;
  text-decoration: none !important;
  pointer-events: none;
}
}

/* PC版では footer-toggle を非表示に */
@media screen and (min-width: 769px) {
  .footer-toggle {
    display: none !important;
  }
}

.reservation-button {
  display: inline-block;
  position: relative;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 1);   /* 背景 */
  color: #222;                          /* テキストカラー */
  border-radius: 50%;
  border: 1px solid #000;              /* 黒い枠線 */
  backdrop-filter: blur(8px) saturate(120%);
  text-align: center;
  font-size: 18.5px;
  font-weight: bold;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 2;
  --grad-start: #ff8a00;
  --grad-end: #ff8a00;
  outline: none;
  transition:
    background-color 0.45s ease,
    background-image 0.45s ease,
    color 0.45s ease,
    border-color 0.45s ease,
    transform 0.25s ease;
}

.reservation-button:hover {
  background-color: #80CEFF;
}

/* 擬似要素：ホバー時の背景グラデーション */
.reservation-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  opacity: 0;
  transition: opacity 0.65s ease;
  z-index: 0;
}

.reservation-button:hover::before,
.reservation-button:focus-visible::before {
  opacity: 1;
}

/* 中央テキストの設定 */
.center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  -webkit-background-clip: text;
  background-clip: text;
  transition: color 0.45s ease, background 0.45s ease;
}

.reservation-button:hover .center-text,
.reservation-button:focus-visible .center-text {
  background: none;
  color: #ffffff;
}

/* SVG 回転テキスト */
.reservation-button svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.reservation-button svg text {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 300;
  fill: #9fa2b3;
  transition: fill 0.45s ease;
}

.reservation-button:hover svg text,
.reservation-button:focus-visible svg text {
  fill: #ffffff;
}


/* ===== 再診・お問い合わせボタン（装飾全カット） ===== */
.revisit-link-button {
  position: absolute;
  left: 50%;                        /* ページ幅の中央を起点に */
  bottom: -60px;                    /* 初診ボタンの下に配置（調整OK） */
  transform: translateX(-50%);      /* ボタン自体の中央を揃える */
  z-index: 1000;
  display: block;
  text-align: center;
  text-decoration: none !important;
  width: fit-content;
  background: none;
  border: none;
  padding: 0;
  white-space: nowrap;
  overflow: visible;
  line-height: 1.1;        /* 行間も詰める */
}

.revisit-link-text {
  font-size: 12px;
  font-weight: 300;
  color: inherit; /* ← 親の色を継承するように変更 */
  line-height: 1;
  display: inline;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.revisit-link-button:hover .revisit-link-text,
.revisit-link-button:focus-visible .revisit-link-text {
  color: #fff;
}

/* ▼ 再診ボタンのホバー演出（オレンジ背景・白文字・角丸） ▼ */

/* 初期状態 */
.revisit-link-button {
  background-color: transparent;
  color: inherit;
  border-radius: 50px; /* ピル型 */
  padding: 0.5em 1.5em;      /* 縦paddingをさらに詰める */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ホバー時 */
.revisit-link-button:hover {
  background-color: #ff8a00;
  color: #fff; /* 白文字 */
}




@media screen and (max-width: 768px) {
  .reservation-wrapper {
    display: none;
  }

  /* 以下、revisit-link-text / ::after / hover のスタイルは消してOK！！ */
  /* コメントアウト or 完全に削除して問題なし */

  .floating-return-top {
    right: 20px;
    left: auto; /* ← PC用指定を無効化 */
    transform: none;
    bottom: 80px;
  }

  .custom-top-btn a {
    padding: 3px 23px;
    font-size: 14px;
  }

  .custom-top-btn .arrow-up {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #d2a336;
    margin-bottom: 4px;
  }
}


@media screen and (max-width: 375px) {
  .fixed-footer {
    padding: 0 ;
  }

  /* アクセスボタン */
  .fixed-footer .footer-access {
    flex: 0.5;
    padding: 0 2px;
    justify-content: center;
    align-items: center;
  }


  .fixed-footer .footer-access img {
    height: 38px !important;  /* ← 小さめ */
    margin: 0;                /* ← 余白カット */
  }

  .fixed-footer .footer-access span {
    font-size: 10px;
    line-height: 1;
    margin-top: 2px;          /* ← テキストの上余白だけ調整 */
  }

  /* 電話ボタン */
  .fixed-footer .footer-tel {
    flex: 1;
    padding: 15px;
  }

  .fixed-footer .footer-tel img {
    height: 24px !important;
  }

  /* WEB予約ボタン */
  .fixed-footer .footer-reservation {
    flex: 1; /* 少し広めにとる */
    padding: 2px;
  }

  .fixed-footer .footer-reservation img {
    height: 25px !important;
  }

  /* 全体共通で縮める設定（テキストが長すぎる場合） */
  .fixed-footer .footer-item {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}




/* ===== NEWS セクション ===== */

/* 最新記事のスタイル */

/* NEWバッジのスタイル */

/* NEWバッジのスタイル（重複を削除） */

/* iPad用のスタイル */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .reservation-wrapper {
    bottom: 90px;
  }

  
}