/* =========================
   基本スタイル
========================= */
.spacer {
  margin-top: 50px !important;
  margin-bottom: 50px !important;
}
.spacer2 {
  margin-top: 20px !important;
  margin-bottom: 0px !important;
}

.free_section .inner p:not(.no-textstyle){
  font-size: 14px;
  line-height: 1.9;
  color: #333;
}

.content_narrow {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

hr {
  margin: 20px 0;
}

.free_section h2,
.free_section h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: #333;
  margin: 0 0 10px;
}

.text-list ul,
.text-list li {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}


/* =========================
   サイトマップ links（カード風）
========================= */
.sitemap_links{
  list-style: none;
  padding: 0;
  margin: 20px 0;
  display: grid;
  gap: 10px;
}

.sitemap_links a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  background: #fff;
  color: #111;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* 右矢印（控えめ） */
.sitemap_links a::after{
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid #c69c6d;
  border-bottom: 2px solid #c69c6d;
  transform: rotate(-45deg);
  opacity: .9;
}

.sitemap_links a:hover{
  border-color: #c69c6d;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

@media (max-width: 768px){
  .sitemap_links a{ padding: 12px 14px; border-radius: 12px; }
}

/* =========================
   ベタ塗り h2 見出し（ベージュ）
========================= */
.content_narrow h2.section_box_title {
  display: inline-block;
  padding: 12px 26px;
  background: #c69c6d;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .10em;
  line-height: 1.4;
  border-radius: 999px;
  margin: 35px 0 20px;
}


/* =========================
   FAQ Accordion
========================= */
.faq__list {
  display: grid;
  gap: 10px;
}

.faq__item {
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s ease;
}

.faq__q {
  list-style: none;
  cursor: pointer;
  padding: 14px 44px 14px 14px;
  position: relative;
  line-height: 1.4;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::after {
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.06);
  font-weight: 700;
}

.faq__item[open] .faq__q::after {
  content: "−";
}

.faq__a {
  padding: 0 14px 14px;
  line-height: 1.75;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .2s ease;
}
.faq__a > * { overflow: hidden; }
.faq__item[open] .faq__a { grid-template-rows: 1fr; }

.faq__item:hover,
.faq__item:focus-within,
.faq__item[open] {
  border-color: #c69c6d;
}

/* =========================
   Page Nav（ページ内ナビ）
========================= */
.pagenav {
  position: sticky;
  top: 115px;
  z-index: 50;

  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  padding: 10px 0;
  margin: 0 0 18px;
}

.pagenav__list {
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pagenav__link {
  display: inline-block;
  padding: 7px 12px;
  font-size: 13px;

  border: 1px solid var(--color_gley1);
  border-radius: 999px;
  background: #fff;
  color: var(--color_txt);
  text-decoration: none;

  transition: border-color .2s ease, background .2s ease;
}

.pagenav__link:hover,
.pagenav__link:focus-visible {
  border-color: var(--color_beige);
  background: rgba(198,156,109,.06);
  outline: none;
}

/* ジャンプ先 */
.page-section {
  margin: 18px 0 35px;
}

.page-section__title {
  font-size: 18px;
  margin: 0 0 20px;
  padding-left: 10px;
  border-left: 3px solid var(--color_beige);
}

/* =========================
   SP：固定＋横スクロール
========================= */
@media (max-width: 767px) {

  .pagenav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;

    padding: 6px 0;
    margin: 0;

    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }

  body.is-pagenav-visible .pagenav {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .pagenav + * { margin-top: 0; }
  body.is-pagenav-visible .pagenav + * { margin-top: 52px; }

  .pagenav__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    gap: 8px;
    padding: 4px 16px 6px;
    margin: 0;

    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }

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

  .pagenav__link {
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  body.is-menu-open .pagenav{
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-8px) !important;
  }

  body.is-menu-open.is-pagenav-visible .pagenav + *{
    margin-top: 0 !important;
  }
}

/* =========================
   価格表 Table
========================= */

/* テーブル外枠（カード風） */
.price_table_wrap{
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

/* テーブル本体 */
.price_table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  color: #222;
}

/* 見出し行 */
.price_table thead th{
  background: #faf7f2;      /* うすベージュ */
  font-weight: 600;         /* 太すぎない */
  color: #111;
  border-bottom: 1px solid #e6e6e6;
}

/* セル共通 */
.price_table th,
.price_table td{
  padding: 14px 14px;
  border-bottom: 1px solid #eee;

  text-align: center;       /* 横中央 */
  vertical-align: middle;   /* 縦中央 */

  line-height: 1.55;        /* 行間に余裕 */
  font-weight: 400;         /* 基本は細め */
}

/* 左列（項目名） */
.price_table tbody th{
  font-weight: 600;         /* 少しだけ強調 */
  color: #111;
  width: 42%;
}

/* 右列（価格・備考） */
.price_table td{
  width: 58%;
}

/* 備考（3列目）のみ左揃え */
.price_table td:nth-child(3){
  text-align: left;
}
/* 備考欄（3列目）だけ読みやすく調整 */
.price_table td:nth-child(3){
  font-size: 13px;   /* ← 少しだけ小さく */
  line-height: 1.7;    /* ← 行間を広げて詰まり解消 */
  
}

/* 行の最後の線を消す */
.price_table tr:last-child th,
.price_table tr:last-child td{
  border-bottom: none;
}

/* 価格表の補足（注意書き） */
.price_note {
  display: none;
}

@media (max-width: 768px) {
  .price_note {
    display: block;
    position: relative;
    padding-right: 18px;
  }
  .price_note::after{
    content: "→";
    position: absolute;
    right: 0;
    top: 0;
    animation: nudge 1.2s ease-in-out infinite;
  }
  @keyframes nudge{
    0%,100%{ transform: translateX(0); opacity: .5; }
    50%{ transform: translateX(6px); opacity: 1; }
  }
}


/* 価格の見せ方（強調しすぎない） */
.price_yen{
  font-weight: 400;
  white-space: nowrap;
}

/* =========================
   SP：横スライド（横スクロール）
========================= */
@media (max-width: 767px){

  /* 横スクロールの器 */
  .price_scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }

  /* スクロールバー非表示（iOS/Chrome） */
  .price_scroll::-webkit-scrollbar{
    display: none;
  }

  /* SPはテーブルを横に逃がす */
  .price_table{
    min-width: 720px;       /* 列数・文量に応じて調整 */
    font-size: 13px;        /* SPは少し小さく */
  }

  .price_table th,
  .price_table td{
    padding: 10px 6px;  /* ←左右を狭く */
  }

  /* 備考列は長文なので、左右をさらに狭くして縦伸び抑制 */
  .price_table td:nth-child(3){
    padding-left: 6px;
    padding-right: 6px;
    font-size: 12.5px;
    line-height: 1.65;
  }
}

/* =========================
   汎用 丸ボタン（白×青：fvの逆配色）
========================= */
.btn_round_reverse {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 120px;
  padding: 10px 34px 10px 26px;
	margin-top: 20px;  
  margin-bottom: 20;   

  font-size: 16px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;

  color: #fff;
  background-color: var(--color_blue);
  text-decoration: none;

  border-radius: 999px;
  box-shadow: 0 0 10px rgba(0,0,0,.25);

  transition: background-color .3s ease, color .3s ease;
}

/* 矢印 */
.btn_round_reverse::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;

  width: 8px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;

  transform: translateY(-50%) rotate(-45deg);
  transition: .3s ease;
}

/* hover */
.btn_round_reverse:hover {
  background-color: #fff;
  color: var(--color_blue);
}

.btn_round_reverse:hover::after {
  border-color: var(--color_blue);
  right: 14px;
}

/* =========================
   丸ボタン（スマホ縮小対応）
========================= */
.btn_round_reverse2 {
  /* PCでは基本そのまま（必要なら微調整） */
}

/* スマホ */
@media (max-width: 767px) {
  .btn_round_reverse2 {
    min-width: 100px;
    padding: 8px 28px 8px 20px;

    font-size: 12px;
    box-shadow: 0 0 6px rgba(0,0,0,.25);
  }

  .btn_round_reverse2::after {
    width: 7px;
    height: 7px;
    right: 16px;
    border-width: 2px;
  }

  .btn_round_reverse2:hover::after {
    right: 12px;
  }
}

.blue-radical{
  white-space: nowrap;
}

/* スマホ */
@media (max-width: 375px){
  .blue-radical{
    font-size: 0.75em; /* 75% */
  }
}



/* =========================
  診療時間（お問合せ）
========================= */

.notice-box {
  border: 1px solid #e5e5e5;
  border-left: 4px solid #2f7ed8; /* 医療系に合う落ち着いたブルー */
  padding: 16px 18px;
  margin: 0px 0;
  background: #fafafa;
}

.notice-box p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}



.hours-card{
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  background: #fff;
  padding: 16px;
  margin: 20px 0;
}

.hours-row{
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}
.hours-row:last-of-type{
  border-bottom: none;
}

.hours-label{
  font-weight: 700;
  color: #111;
  font-size: 14px;
  line-height: 1.4;
  padding-top: 2px;
}

.hours-body{
  display: grid;
  gap: 6px;
}

.hours-line{
  font-size: 14px;
  line-height: 1.7;
  color: #333;
}

.hours-pill{
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f3f6fb;
  border: 1px solid #e6eefc;
  margin-right: 8px;
  vertical-align: 1px;
}

.hours-sub{
  font-size: 12px;
  color: #666;
  margin-left: 6px;
}

.hours-note{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fafafa;
  border: 1px solid #ededed;
  font-size: 13px;
  line-height: 1.7;
  color: #333;
}

.hours-closed{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e6e6e6;
  font-size: 14px;
  line-height: 1.7;
  color: #333;
}

.hours-closed-label{
  display: inline-block;
  font-weight: 700;
  margin-right: 8px;
  color: #111;
}

/* スマホ最適化 */
@media (max-width: 767px){
  .hours-row{
    grid-template-columns: 56px 1fr;
    gap: 10px;
  }
  .hours-card{
    padding: 14px;
  }
}

/* =========================
   診療科目（お問合せ）
========================= */
.service-box{
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  background: #fff;
  padding: 18px;
  margin: 24px 0;
}

.service-list{
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px 12px;
}

.service-list li{
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  padding-left: 14px;
  position: relative;
}

.service-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2f7ed8;
}

.service-note{
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}
/* =========================
  点線
========================= */
hr.dotted {
  border: none;
  border-top: 1.5px dotted #d6d6d6;
  margin: 24px 0;
}


/* =========================
  可変カラム（two-colのまま）
========================= */
.two-col{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 24px;
  margin: 24px 0;
}

.two-col img{
  width: 100%;
  height: auto;
  display: block;
}

/* スマホ */
@media (max-width: 767px){
  .two-col{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* =========================
  Youtube比率レスポンシブ
========================= */
.yt-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* ← YouTube標準 */
}

.yt-wrap iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#lottie { width: 250px; height: 250px; }

@media (max-width: 767px) {
  #lottie {
    width: 180px;
    height: 160px;
  }
}

/* =========================
  治療の流れ
========================= */
.treatment-flow{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

.treatment-flow li{
  position:relative;
  padding:20px 20px 20px 65px; /* ←左にバッジ分の余白 */
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:16px;
}

/* STEPを丸バッジ化して、絶対位置でも重ならない */
.treatment-flow .step{
  position:absolute;
  top:18px;
  left:18px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;

  font-size:12px;
  font-weight:700;
  letter-spacing:0.02em;
  color:#555;

  background:#f5f5f5;
  border:1px solid #e6e6e6;
  border-radius:999px;
  line-height:1; /* ←数字位置 */
}

/* タイトルと本文 */
.treatment-flow h4{
  margin:0 0 6px;
  font-size:15px;
  font-weight:600;
  color:#111;
}

.treatment-flow p{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:#333;
}

/* スマホ */
@media (max-width: 767px){
  .treatment-flow li{
    padding:18px 16px 18px 58px;
  }
  .treatment-flow .step{
    top:16px;
    left:16px;
    width:32px;
    height:32px;
    font-size:11px;
  }
  .treatment-flow h4{ font-size:14px; }
  .treatment-flow p{ font-size:13px; line-height:1.7; }
}

/* =========================
  ホワイトニング比較テーブル（意味ベース完成版）
========================= */

/* ====== 横スクロールの器 ====== */
.table-scroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* テーブル本体 */
.compare-table{
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  table-layout: fixed;
}

/* 共通セル */
.compare-table th,
.compare-table td{
  border: 1px solid #d7d7d7;
  padding: 14px 16px;
  vertical-align: middle;
  box-sizing: border-box;
}

/* =========================
   ラベル列（比較／白さ等）
========================= */
.compare-table th.label{
  width: 140px;
  white-space: nowrap;
  text-align: center;
  background: #96d1e0;
  color: #fff;
  font-weight: 700;
}

/* =========================
   ヘッダー
========================= */
.compare-table thead th{
  text-align: center;
  font-weight: 700;
  padding: 16px 14px;
}

.compare-table thead th.label{
  background: #ffffff;
  color: #666;
}

.compare-table thead th.clinic{
  background: #c9c06e;
  color: #fff;
}

.compare-table thead th.conventional{
  background: #bfbdbd;
  color: #fff;
}

/* =========================
   本文
========================= */
.compare-table td.clinic{
  background: #fffbe6;
  color: #f28a00;
  font-weight: 600;
}

.compare-table td.conventional{
  background: #ffffff;
  color: #444;
}

/* =========================
   スマホ対応（横スクロールのみ）
========================= */
@media (max-width: 767px){
  .compare-table th,
  .compare-table td{
    font-size: 14px;
  }
}

/* =========================
   PC：4列 / スマホ：2列
========================= */

/* 基本スタイル */
.grid-container {
  display: grid;
  gap: 10px;           /* アイテム間の余白（好みで調整） */
  padding: 0px;       /* 外側の余白（任意） */
}

/* スマホ・タブレット（デフォルト = モバイルファースト） */
.grid-container {
  grid-template-columns: repeat(2, 1fr);   /* 横2列 */
}

/* PCサイズ（768px以上、好みで変えてもOK） */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);   /* 横4列 */
    max-width: 1000px;                       /* 広すぎ防止（任意） */
    margin: 0 auto;                          /* 中央寄せ（任意） */
  }
}

/* アイテム自体のスタイル例（必要に応じて） */
.item {
  background: #;
  padding: 10px 10px 20px 10px; 
  border-radius: 8px;
	border: 1px solid #e6e6e6; 
  text-align: center;
  /* 高さがバラバラでも大丈夫 */
}
.item {
  background: #fff;           /* 背景色をちゃんと入れる（#; はおそらくタイポ） */
  padding: 10px 10px 20px 10px;  /* 上10px 左右10px 下80px */
  border-radius: 8px;
  text-align: center;

  /* ↓ これが超重要！画像やSVGがはみ出さないようにする */
  overflow: hidden;               /* はみ出しを隠す（必須級） */

  /* カードっぽくしたいなら追加しても良い */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 影（任意） */
}

/* 画像やSVG自体にこれを必ずつける */
.item img,
.item svg {
  display: block;                 /* 下の隙間防止（imgのデフォルトinlineが原因） */
  max-width: 100%;                /* 親のコンテンツ幅を超えない */
  height: auto;                   /* アスペクト比を保持 */
  /* object-fit: contain;         ← 全部見せたいならこれ（上下左右に余白出るかも） */
  /* object-fit: cover;           ← 枠いっぱいにしたいならこれ（はみ出し部分カット） */
}

/* SVG特有の対策（必要に応じて） */
.item svg {
  width: 100%;                    /* SVGはwidth/heightを明示するとスケールしやすい */
  height: auto;
}