/* ==========================================
   ◼︎ カラーパレット（青系ベース）
   ==========================================
--base-blue: #A2CFFE; 
  --accent-blue: #72B4FD; 
  --navy-blue: #1E40AF;
  --light-blue: #E6F2FF; 
  --text-dark: #1B1B1B; 
  --text-light: #FFFFFF;
  --shadow-blue: rgba(162, 207, 254, 0.45); 
  --primary: #4a90e2; 
*/

:root {
  --base-blue: #A2CFFE;   /* 基準カラー */
  --accent-blue: #72B4FD; /* 補色として少し濃いめのブルー */
  --navy-blue: #1E40AF;   /* 深みのあるネイビーブルー */
  --light-blue: #E6F2FF;  /* 下地に使える淡いブルー */
  --text-dark: #1B1B1B;   /* メインテキスト用 */
  --text-light: #FFFFFF;  /* 反転テキスト用 */
  --shadow-blue: rgba(162, 207, 254, 0.45); /* ベースブルー由来の影色 */
  --primary: #4a90e2; 
}
.center {
    text-align: center;
}
/*------------------- ヘッダー -------------------*/
header{
	position:absolute; 
	z-index:10; left:0; top:0; width:100%;
	box-sizing:border-box; 
	position: relative;
	top: 0;
	z-index: 10;
}

/* 横並び骨組み */
header .h_inbox{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;background: #ffffffad;}

/* 左：ロゴ＋H1 */
header .h_left{width:min(40%,520px)}
header .h_logo{
  display:flex;
  align-items: flex-start;
  flex-direction: column;
}

@media screen and (max-width: 768px) {
  header .h_logo {
    display: none;
  }
}
header .h_left .h_logo img{width:auto;max-width:45%;height:auto}
header h1{
  color: var(--c-text);
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing:.14em; line-height:1.4;
  border-radius:4px;
  padding-left: 78px;
}

/* 右：縦積みコンテナ */
.h_right{display:flex;align-items:flex-start;}
.h_stack{display:flex;flex-direction:column;gap:10px}

/* ベージュの情報バッジ */
.info-badge .badge-inner{
  position:relative;
  display:flex; align-items:center; gap:10px;
  background:#e4cdb7; /* ベージュ */
  color:#5b4634; padding:10px 14px; border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.info-badge .badge-ttl{font-weight:700; font-size:clamp(13px,1.1vw,14px)}
.info-badge .badge-sub{font-size:clamp(12px,.95vw,13px)}
.info-badge .badge-sub .sun{color:#c64a5d; font-weight:700}
.info-badge .badge-time{font-size:clamp(11px,.9vw,12px); opacity:.85}
.info-badge .badge-leaf{margin-left:auto; color:#9b7c63}

/* CTA 共通 */
.h_contact{display:flex; align-items:stretch;}
.cta{
  display:flex; 
  flex-direction:column; 
  justify-content:center;
  min-width: 240px; 
  text-decoration:none; 
  color:#fff;
  padding:8px 12px; 
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  text-align: center;
}
.cta .cta-lbl{font-size:clamp(12px,1vw,13px); opacity:.95}
.cta .cta-main{
  display:flex; 
  align-items:center; gap:8px;
  margin-top:2px; 
  line-height:1;
  justify-content: center;
}
.cta .ico{display:inline-flex}
.cta .num{font-weight:800; letter-spacing:.04em; font-size:clamp(16px,1.5vw,20px)}
.cta .cta-note{font-size:clamp(10px,.8vw,12px); opacity:.9; margin-top:3px}

/* TEL */
.cta-tel{
	background:#4a90e2;
}
.cta-tel:hover{
	background: #4a90e2;
  color: #fff;
  filter:brightness(0.98);
}

/* WEB */
.cta-web{
	background:#a2cffe;
}
.cta-web .num{
  font-weight:700;
}
.cta-web:hover{
	background: #a2cffe;
  filter:brightness(0.98);
  color: #fff;
}

/* LINE */
.cta-line{
  background:#64b172;
  min-width: 170px;
}
.cta-line .num{
  font-weight:700;
}
.cta-line:hover{
  background: #7dc58a;
  filter:brightness(0.98);
  color: #fff;
}

/* 右端：メニューボタン */
.menu-btn{
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  justify-content:center;
  gap:6px; 
  padding: 19px 12px; 
  min-width:88px;
  background: #b5ab9f;
  color:#fff; 
  border:none;
  box-shadow:0 2px 8px rgba(0,0,0,.08); 
  cursor:pointer;
}
.menu-btn .menu-text{font-size:12px; letter-spacing:.08em}
.menu-btn .bars{display:flex; flex-direction:column; gap:5px; width:30px}
.menu-btn .bars span{display:block; height:2px; background:#fff; border-radius:2px}

/* Tablet */
@media (max-width: 992px){
  header .h_left{width:52%}
  .cta{min-width:220px}
}

/* Mobile */
@media (max-width: 768px){
  header .h_inbox{flex-wrap:wrap; gap:10px}
  header .h_left{width:100%}
  header .h_logo{gap:10px}
  header .h_left .h_logo img{max-width:180px}
  header h1{font-size:12px; letter-spacing:normal;padding-left: 10px;}

  .h_right{width:100%; align-items:stretch}
  .h_stack{flex:1}
  .info-badge{order:1}
  .h_contact{order:2; gap:2px}
  .cta{flex:1; min-width:auto;padding: 5px;}
  .menu-btn{order:3; margin-left:auto; min-width:76px}
  .cta .cta-main {flex-direction: column;}
  .cta-line{height: 65px;}
}
@media screen and (min-width: 769px) {
  .h_inbox {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .h_inbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
  }

  body {
    padding-top: 30px;
  }
}

/* ------------- メニュー本体 ------------- */
.site-header {
    position: sticky;
    top: 0;
	z-index: 1;
    background: #fff;
}
.nav{
	width: 100%;
	background: #fff;
	padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;      /* ←追加 */
    top: 0;                /* ←位置固定 */
    transition: .3s ease;
	z-index: 10;          /* ←ヘッダーより上に */
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    font-size: 0.98rem;
}

/* スクロール固定用クラス（既存そのまま） */
.nav.fixed{
  position: fixed;
  top:0; 
  left:0; 
  width:100%;
  background:#fff; 
  z-index:15;
}

/* リスト：均等配置＋区切り線 */
.nav-list{
  display:flex; justify-content:space-between; gap:0;
  width:100%; list-style:none; margin:0; padding:0;
  border-left:1px solid var(--c-border);
	align-items: center;
}
.nav-item{
  position:relative;
  flex: 1;
  text-align: center;
  border-right: 1px solid var(--c-border);
}

/* リンク：縦並びで中央寄せ（上：日本語／下：英字） */
.nav-item > a,
.nav-item > p.navp{
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  justify-content:center;
  font-size: 0.9rem;
  text-decoration:none; color:var(--c-text-muted);
  font-weight:700; letter-spacing:.08em;
  padding:18px 10px 16px;
  position:relative;
  /* 下線アニメ（背景サイズで） */
  background: linear-gradient(var(--c-primary) 0 0) bottom / 0 2px no-repeat;
  transition: background-size .25s ease, color .25s ease, opacity .25s ease;
	margin: 0;
}

/* 下段の英字は data-en から生成 */
.nav-item > a::after,
.nav-item > p.navp::after{
  content: attr(data-en);
  display:block; margin-top:8px;
  font-weight:600; letter-spacing:.18em;
  font-size:14px;
	color:#6d8bbd;
  text-transform: lowercase;
}

/* ホバー：文字色＋下線を伸ばす */
.nav-item > a:hover,
.nav-item > p.navp:hover{
  color:#7a5a2f; /* ほんのりブラウン寄り（好みで調整） */
  background-size: 100% 2px;
}

/* アクティブ状態（任意：クラス .is-current を付与） */
.nav-item.is-current > a,
.nav-item.is-current > p.navp{
  color:#7a5a2f;
  background-size:100% 2px;
}
@media (max-width: 1050px) {
  .nav {
    display: none;
  }
}

/* ------------- ドロップダウン ------------- */
.has-dropdown .dropdown{
  position:absolute; top:100%; left:50%;
  transform:translate(-50%, 12px);
  background:#fff; list-style:none; margin:0; padding:10px 0;
  min-width:220px; border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  opacity:0; visibility:hidden; transition:.25s ease;
  border:1px solid var(--c-border);
}
.has-dropdown:hover .dropdown{
  opacity:1; visibility:visible; transform:translate(-50%, 8px);
  z-index:20;
}
.dropdown li{padding:0}
.dropdown li a{
  display:block; padding:10px 16px;
  color:var(--c-text-muted); font-weight:600; font-size:14px;
  text-decoration:none; transition:.2s ease;
}
.dropdown li a:hover{
  background:var(--c-bg);
  color:var(--c-text);
  padding-left:22px;
}

/* ------------- レスポンシブ ------------- */
@media (max-width: 1024px){
  .nav-item > a{padding:16px 8px}
  .nav-item > a::after{font-size:13px; letter-spacing:.16em}
}
@media (max-width: 840px){
  .nav-list{flex-wrap:wrap}
  .nav-item{flex:1 1 33.33%}
}
@media (max-width: 600px){
  .nav-item{flex:1 1 50%}
  .nav-item > a{padding:14px 6px}
}

/* ----------------------------------------------------
タブレット用（768px〜1024px）
---------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
}

/* ----------------------------------------------------
スマホ用（〜767px）
---------------------------------------------------- */
@media (max-width: 768px) {

}

/*------------------- ハンバーガーメニュー -------------------*/
/* ハンバーガーアイコン */
.drawer-hamburger {
  position: relative;
  /* top: 20px;
  right: 20px; */
	background: #5b84b1;
  width: 85px;
	height: 77px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10001;
  cursor: pointer;
}
.drawer-hamburger-icon {
  width: 24px;
  height: 2px;
  background: #fff;
  position: relative;
  transition: all 0.3s ease;
  top: 8px;
}
span.menu_txt {
  top: 12px;
  position: relative;
}
.drawer-hamburger-icon::before,
.drawer-hamburger-icon::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: all 0.3s ease;
}
.drawer-hamburger-icon::before {
  top: -8px;
}
.drawer-hamburger-icon::after {
  top: 8px;
}
.menu_txt::before {
  content: 'MENU';
  font-size: 10px;
  margin-top: 6px;
}
#drawer-checkbox:checked + #drawer-icon .drawer-hamburger-icon {
  background: transparent;
}
#drawer-checkbox:checked + #drawer-icon .drawer-hamburger-icon::before {
  transform: rotate(45deg);
  top: 0;
}
#drawer-checkbox:checked + #drawer-icon .drawer-hamburger-icon::after {
  transform: rotate(-45deg);
  top: 0;
}
#drawer-checkbox:checked + #drawer-icon .menu_txt::before {
  content: 'CLOSE';
}

/* メニュー全体 */
#drawer-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
	position: fixed; 
	top: -100px; 
	left: -9999px;
}
#drawer-content {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fffdf7;
  z-index: 10000;
  overflow-y: auto;
  padding: 2rem 1rem;
}
#drawer-checkbox:checked ~ #drawer-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ベース装飾 */
.drw_index {
  font-weight: bold;
  font-size: 1.2em;
  margin: 1.5em 0 0.5em;
  color: var(--c-cta);
}

.com_sp_menu li,
.com_medical li {
	margin-bottom: 0.6em;
	font-size: 1rem;
}
li.littl {
	font-size:1rem;
	font-weight:600;
}
.com_sp_menu li:not(.littl),
.com_medical li:not(.littl) {
  position: relative;
  padding-left: 1.4em; /* マーク分の余白 */
  list-style: none;
}

.com_sp_menu li:not(.littl)::before,
.com_medical li:not(.littl)::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.5em;
  height: 0.5em;
  background-color: var(--c-cta);
  border-radius: 50%;
}

.tel {
  font-size: 1em;
/*   margin-top: 1.5em; */
}

.drw_info .schedule-table{
  margin: 10px 0;
}
.telp {
  font-size: 1.5rem;
}
.telp i {
  margin: 0 5px 0 0;
}
.web-reserve a {
  display: inline-block;
  font-size: 1.2rem;
  margin-top: 0.5em;
  background: var(--base-blue);
  color: #fff;
  padding: 0.6em 1.2em;
  border-radius: 30px;
  text-decoration: none;
}
/* ========== PCのサイトマップ段組み ========== */
@media (min-width: 1024px) {
  .com_sp_menu {
    column-count: 2;         /* まず2段に */
    column-gap: 2rem;
  }
  /* さらに横幅がある場合は3段に */
  @media (min-width: 1280px) {
    .com_sp_menu { column-count: 3; }
  }

  /* セクション見出し（.littl）は段をまたがない／余白を付与 */
  .com_sp_menu .littl {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
    margin-top: 1rem;
    margin-bottom: .4rem;
    font-size: 1rem;
    color: #333;
  }

  /* 通常リンク（.littl以外）は段組み対象 */
  .com_sp_menu li:not(.littl) {
    break-inside: avoid;
    padding-left: 1.2em;
    margin-bottom: .5em;
  }
  .com_sp_menu li:not(.littl)::before {
    top: .55em;
    width: .45em; height: .45em;
    opacity: .9;
  }
}
@media (max-width: 768px) {
  .drawer-hamburger {
    height: 65px;
  }
}

/*==================================================================================================================================

  *メイン画像

==================================================================================================================================*/
/* ベーススタイル */
.main-image {padding:0}
.main-image img {
  width: 100%;   /* 画像の幅を親要素に合わせる */
  height: auto;  /* 画像の高さを自動調整 */
}

/* デスクトップ版画像（初期設定：表示） */
.desktop-image {
  display: block;
}

/* モバイル版画像（初期設定：非表示） */
.mobile-image {
  display: none;
}

/* モバイルサイズ用スタイル */
@media only screen and (max-width: 767px) {
  /* モバイル版画像を表示 */
  .mobile-image {
    display: block;
  }

  /* デスクトップ版画像を非表示 */
  .desktop-image {
    display: none;
  }
}

/* デスクトップ版のメディアクエリ（767px以上） */
@media only screen and (min-width: 768px) {
  /* デスクトップ版画像を表示 */
  .desktop-image {
    display: block;
  }

  /* モバイル版画像を非表示 */
  .mobile-image {
    display: none;
  }
}

/*==================================================================================================================================

  *改行設定

==================================================================================================================================*/
/* デフォルト（PC用）：改行 */
.pc-br {
  display: block;
}

/* タブレット版専用 */
@media (min-width: 768px) and (max-width: 1024px) {
  .pc-br {
    display: inline-block; /* 改行を防ぐ */
  }
}

/* モバイル版 */
@media (max-width: 767px) {
  .pc-br {
    display: none; /* モバイル版では非表示 */
  }
}

/* PCでは表示しない（改行しない） */
.sp-br {
  display: none;
}

/* モバイル版（768px以下）とタブレット版（768px以上1024px以下）で改行させる */
@media (max-width: 1024px) {
  .sp-br {
    display: block;
  }
}

.sp-right {
    display: inline;
  }
@media (max-width: 768px) {
    .sp-right {
        display: block;
        text-align: right;
      }
}

/*==================================================================================================================================

  *日本最大級の自費専門クリニック

==================================================================================================================================*/
.custom-info-section {
    font-size: clamp(calc(16px*0.93), calc((16/1400)*100vw), calc(16px*1.5));
    padding: 3rem 2em 4em 2rem;
    margin: 0 0 90px;
/*     height: 25em; */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    background-image: url(../images/back-m.png);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直方向の中央揃え */
    align-items: center; /* 水平方向の中央揃え */
    text-align: center; /* テキストを中央揃え */
/* 	margin: 60px 0; */
}

/* タイトルのスタイル */
.custom-title {
    display: flex;
    justify-content: center;  /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    width: 28em;
    font-size: 2.7em;  /* テキストサイズ調整 */
    font-weight: bold; /* 太字 */
    color: transparent; /* テキスト色を透明にする */
    background-image: linear-gradient(180deg, #E6BF52, #C8892C); /* グラデーションを設定 */
    background-clip: text; /* テキストに背景を適用 */
    -webkit-background-clip: text; /* Webkitブラウザ用 */
    font-family: "shippori-mincho", serif;
}

/* リストアイテム部分のスタイル */
.custom-info-list {
    padding: 0;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    text-align: left; /* テキストを中央揃え */
}

/* 各リストアイテムのスタイル */
.custom-info-list li {
    font-size: 25px;
    font-weight: 600;
	top: 20px;
    position: relative;
    padding: 0 0 0 1.9em;
    margin: 0 0 0.5em;
    background-repeat: no-repeat;
    background-size: 1.5em auto; /* 画像のサイズ調整 */
    background-position: 0 50%; /* 画像の位置調整 */
    background-image: url(../images/point.png); /* 画像のパス */
    font-family: "shippori-mincho", serif;
    text-align: left; /* テキストを左揃え */
    color: #666;
    display: flex; /* アイテム全体をフレックスボックスで配置 */
    align-items: center; /* 画像とテキストの垂直方向の配置 */
}

/* ロケーション部分のスタイル */
.custom-info-location {
    font-size: 1.4em; /* 文字の大きさを変更 */
    color: transparent; /* テキスト色を透明にする */
    background-image: /* 本体の金属グラデ */ linear-gradient(180deg, #fff4ce 0%, #f7e4a0 14%, #e8c76b 32%, #d2ac4f 50%, #b98933 66%, #d9bd66 82%, #f3e6ac 100%), /* 上部ハイライト */ radial-gradient(140% 220% at 50% -20%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 55%), /* 下部のごく薄い締め */ linear-gradient(0deg, rgba(140, 96, 15, .14), rgba(0, 0, 0, 0) 60%);
    background-clip: text; /* テキストに背景を適用 */
    font-weight: bold; /* 文字を太字にする（必要に応じて調整） */
}

/* その他のスタイル */
.custom-info-list li i {
    font-size: 26px;
}

.custom-info-list li span {
    font-size: 55px;
	margin: 0;
}

.custom-info-list li:nth-of-type(1) {
    left: 50px;
}

.custom-info-list li:nth-of-type(2) {
    left: 0px;
}

.custom-info-list li:nth-of-type(3) {
    left: -50px;
}
/* =========================
   タブレッド ～1024px
   ========================= */
.custom-title {width:100%;}
/* =========================
   モバイル ～600px
   ========================= */
@media screen and (max-width: 768px) {
	.custom-info-section {
		padding:20px 10px 0px 10px;
		margin: 0 0 0;
	}
	.custom-title {
		font-size: 1.5rem;
		width:100%;
}
	.custom-info-list {
		margin: 15px 0;
	}
	.custom-info-list li {
		font-size: 1rem;
	}
.custom-info-list li span {
	font-size: 1.5rem;
}
.custom-info-list li:nth-of-type(1) {
	left: auto;
}

.custom-info-list li:nth-of-type(2) {
	left: auto;
}

.custom-info-list li:nth-of-type(3) {
	left: auto;
}
}
/*==================================================================================================================================

  *福岡でTOPクラスの症例数

==================================================================================================================================*/
/*------------------------ 共通 ------------------------*/
/*-------------- 端末表示非表示対応 --------------*/
.pc_only {
  display: block;
}
.sp_only {
  display: none;
}
.tb_only {
	display:none;
}
/* タブレッド版 */
@media (min-width: 769px) and (max-width: 1100px) {
.sp_only {
  display: none;
}
.tb_only {
	display:block;
}
}
/* モバイル版 */
@media (max-width: 768px) {
  .pc_only {
    display: none;
}
.sp_only {
  display: block;
}
}

/*==================================================================================================================================

  *【最新版】症例数TOP

==================================================================================================================================*/
.topcase {
  /* display: flex; */
    position: relative;
    /* padding: max(3.286vw, 42px) max(4.857vw, 63px) max(3.286vw, 42px) max(4.857vw, 63px); */
    font-family: serif;
	background-image: url(../images/top/bgimg4.png);
    background-repeat: no-repeat;
    background-size: cover;
    /* height: max(98.357vw, 1278px); */
    margin-top: max(5vw, 65px);
    padding-top: max(3.857vw, 50px);
    position: relative;
    background-position: center center;
    padding: 3.857vw 0 20px;
}

.catch {
    width: 90%;
    margin: auto;
}
.topcase .catch p {
    font-size: 1.5rem;
}
.topcase .catch h2 {
  font-size: 3.5rem;
  margin: 20px 0;
  line-height: 1.2;
  color: #536c95;
}
.topcase .head h2 span.sizeup {
    font-size: 4.5rem;
}
.catch h2{
  font-size:clamp(28px,6vw,56px);
  line-height:1.15;
  font-weight:700;
  letter-spacing:.02em;
  color:#2f3e5e;
  text-wrap:balance;
  position:relative;
  display:inline-block;
  padding-bottom:.3em;
}
.catch h2::before{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:64%;
  height:3px;
  border-radius:2px;
}
span.under_line {
  background: linear-gradient(transparent 62%, #eef3fb 0);
}
.catch h2 span.sizeup {
    font-size: 4.5rem;
}
.catch h2 .sizeup{font-size:inherit;color:#223a70}


.flex_23 {
    display: flex;
    justify-content: center;
}
.img_box {
    position: relative;
}
img.inchou {
    width: 700px;
}
img.daiyamond02wi {
    position: absolute;
    bottom: 46px;
    left: 459px;
    width: 62%;
}
.right_box {
    width: 60%;
    margin: auto;
}
.inchou-career {
  position: relative;
    margin: 0.667vw 3.467vw;
    padding: 2vw 2vw 2vw;
    background-color: #ffffffa3;
    box-shadow: 0 .2em .4em rgba(0, 0, 0, .15);
}

.doctornamebox {
  display: flex;
  position: relative;
}
.doctornamebox .doctor {
  background: #6d8bbd;
  padding: 10px;
  color: #fff;
  margin: auto 0;
}
.doctornamebox .doctor p{
	color:#fff;
	margin:0;
}
.doctornamebox .namebox {
  padding: 10px;
}
.doctornamebox .namebox p {
  font-size: 4rem;
}
.doctornamebox::after {
  content: "Dr.Mishima Ippei";
    position: absolute;
    bottom: -34px;
    left: -32px;
    font-size: 5rem;
    color: rgb(0 0 0 / 8%);
    font-style: italic;
    pointer-events: none;
}

/* 受賞行（左に薄金ライン＋金色強調） */
.award_catch {
  font-size: 1.2rem;
  margin: 0 0 4%;
  text-align: left;
  padding: 0 0 0 20px;
}
.award_catch .sizeup {
  font-size: 1.5rem;
}
.award_catch .marker {
  background-image: linear-gradient(transparent 60%, #c3d1e7a6 60%);
    background-repeat: no-repeat;
    background-size: 100% 1.6em;
    background-position: 0 85%;
    padding: 0 .06em;
    line-height: 1.8;
    border-radius: 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
p.invisalign-award{
  font-size: 1.5rem;
  color: #5c5c5c;
  font-family: serif;
  text-align: right;
}
p.award_p {
  text-align: right;
}
.award-label{
  position: relative;
  padding-right: 16px;
}
.award-em::before{
  content: "";
  display: inline-block;
  width: 54px;
  height: 2px;
  background: #e6d9ae; 
  margin: 0 10px 5px;
  vertical-align: middle;
}
.award-em{
  display: inline-block;
  margin-left: 6px;
  color: #caa850; 
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: .06em;
  font-family: serif;
  text-shadow:
      0 1px 0 rgba(255,255,255,.35),
      0 2px 6px rgba(0,0,0,.12); 
}
.award-em .sizeup {
  font-size: 3.5rem;
}
.gallerywrap {
    margin: 50px 0 0 55px;
}
.award-gallery1,
.award-gallery2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
	gap: 5px;
  margin: 0 auto;
  padding: 10px 0;
}
.awardimg {
	width: 145px;
}
/* 著書情報 */
.book_box {
  display: flex;
  background: #ffffff75;
  width: 90%;
  margin: 20px auto;
  padding: 20px;
}
.book_box .img_box,
.book_box .double_crown {
  flex: 2;
  margin: auto;
}
.book_box .txt_box {
  flex:4;
}
.topcase .book_box .img_box img{
  width: 70%;
}
.double_crown {
  margin: auto;
}
.book_box .txt_box {
  margin: auto;
}
.book_box .txt_box .flex_box{
  display: flex;
}
.bookttl {
  font-size: 1.2rem;
  margin: 15px 0;
}
.kansyu {
  margin-left: 15px;
}
/* =========================
   タブレット（~1024px）
   ========================= */
@media (max-width: 1024px) {
  .catch {
    width: 92%;
  }
  .topcase .catch p { font-size: 1.25rem; }
  .catch h2 { font-size: clamp(28px, 5vw, 48px); }
  .catch h2::before { width: 58%; }

  .flex_23 {
    gap: 24px;
    align-items: flex-start;
    padding-inline: 3.5vw;
  }
  .right_box {
    width: 100%;
    margin: 0;
  }

  /* 先生画像＋ピラミッドの重なり調整 */
  img.inchou { max-width: 60vw; }
  img.daiyamond02wi {
    left: 40%;
    bottom: -6px;
    width: 58%;
  }

  .inchou-career {
    margin: 1.6vw 0;
    padding: 2.2vw;
    backdrop-filter: blur(2px);
  }

  .doctornamebox .namebox p { font-size: clamp(28px, 4.2vw, 40px); }
  .doctornamebox::after {
    font-size: clamp(40px, 6vw, 64px);
    bottom: -22px;
    left: -8px;
  }

  .award_catch { font-size: 1.05rem; }
  .award_catch .sizeup { font-size: 1.3rem; }
  p.invisalign-award { font-size: 1.3rem; }
  .award-em { font-size: clamp(22px, 3.6vw, 36px); }
  .award-em .sizeup { font-size: clamp(24px, 4vw, 40px); }

  /* ガレリー：横詰まり回避・均一化 */
  .gallerywrap {
    margin: 32px 0 0 0;
    padding: 0 1vw;
  }
  .award-gallery1 .award-item,
  .award-gallery2 .award-item {
    flex: 0 1 calc(25% - 8px);
    max-width: calc(25% - 8px);
  }

  /* 著書ボックス：横2カラム→縦寄せに近づける */

}

/* =========================
   モバイル（~767px）
   ========================= */
@media (max-width: 767px) {
  .sp_only { display: inline; }
  .pc_only { display: none; }

  .topcase {
    margin-top: max(4vw, 40px);
    padding: max(20px, 4vw) 0;
    background-position: center top;
  }
  .catch {
    width: 100%;
    margin-left: 11px;
  }
  .catch.inner_txtbox {
    margin-left: 0;
  }
  .topcase .catch p {
	  font-size: 0.9rem;
	  line-height: 1.7;
	  padding: 0;
	  margin: 0;
  }
  .topcase .catch h2 {
    font-size: 1.7rem;
  }
  .catch h2 span.sizeup {
    font-size: 2.3rem;
  }
  .catch h2::before { width: 52%; height: 2px; }

  .flex_23 {
    gap: 0;
    padding: 0;
  }

  /* 画像周り：縦積み＆重なり解除 */
  .img_box { width: 100%; display: grid; place-items: center; }
  img.inchou {
    /* margin-left: -10px; */
    max-width: 100%;
  }
  img.daiyamond02wi {
	  width: 100%;
	  bottom: 190px;
	  left: 119%;
  }
  .img_box {
  flex: 2.5;
  }
  .right_box {
    width: 100%;
    margin: auto;
    flex: 3;
  }

  .inchou-career {
	  margin: 85px 5px 0 0;
    padding: 5px;
    background-color: #ffffffcf;
    box-shadow: 0 .15em .35em rgba(0,0,0,.12);
  }

  .award_catch {
    font-size: .98rem;
    margin: 0 0 12px;
    padding-left: 14px;
  }
  .award_catch .sizeup {
    font-size: 1rem;
  }
  .award_catch .marker {
    background-size: 100% 1.4em;
  }
  p.invisalign-award {
    font-size: 1.05rem;
    text-align: left;
    margin-top: 6px;
  }
  p.award_p { text-align: left; margin-top: 2px; }
  .award-em { font-size: 1.6rem; }
  .award-em .sizeup { font-size: 1.9rem; }
  .award-em::before {
    width: 40px;
    height: 2px;
    margin: 0 8px 4px 0;
  }

  /* ドクター名の帯 */
  .doctornamebox { margin-top: 8px; }
  .doctornamebox .doctor { padding: 8px 10px; font-size: .9rem; }
  .doctornamebox .namebox { padding: 8px 10px; }
  .doctornamebox .namebox p { font-size: clamp(22px, 6.4vw, 28px); }

  .doctornamebox::after {
    font-size: clamp(28px, 12vw, 44px);
    bottom: -16px;
    left: -2px;
    opacity: .08;
  }

  /* 受賞バッジ：2列グリッドに */
  .gallerywrap {
    margin: 18px 0 0;
    width: 100%;
  }
  .book_box {
    flex-direction: column;
    padding: 10px;
    margin: 0 auto;
    width: 95%;
  }
  .book_box .flex_box {
    display: flex;
  }
  
  .book_box .txt_box p {
	  font-size: 0.8rem;
	  margin: 0;
  }
	.book_box .txt_box p.kansyu {
		margin-left: 15px;
	}
  .book_box p.bookttl {
    font-size: 1rem;
  }
  .book_box .txt_box .flex_box {
    margin-bottom: 5px;
  }
}

/* =========================
   ほんの少し小さい端末（~420px）
   ========================= */
@media (max-width: 420px) {
  .catch h2 { font-size: clamp(22px, 7.6vw, 28px); }
  .award-em { font-size: 1rem; }
  .award-em .sizeup { font-size: 1.2rem; }
  .doctornamebox .namebox p { font-size: clamp(20px, 6.8vw, 24px); }
}


/*==================================================================================================================================

  *日本全国からも来院されます

==================================================================================================================================*/
.section-design {
	margin: 0 auto 0;
    padding: 6.6em 0 0 16em;
    width: auto;
    aspect-ratio: 1318/438;
    background-repeat: no-repeat;
    background-position: center center;  /* 画像が中央に配置されるように */
    background-size: contain;  /* 画像が切れないように、要素内に収める */
    background-image: url(../images/bg-mpc.png);
    color: #2e2e2e;
    font-family: "shippori-mincho", serif;
}

.section-design .section-title {
    margin: 0 0 1.8em 13em;
}

.section-design .section-title span {
    font-size: 200%;
    font-feature-settings: "palt";
    letter-spacing: .06em;
	margin: 0 0 1.8em 4em;
	font-weight: 700;
}

.section-design .section-title em {
    color: #6091c3;
    border-bottom: 1px solid #6091c3;
    margin: 0 5px;
}

.section-design .details-box {
    display: grid;
    grid-template-columns: 4.8em 1fr;
}

.section-design .details-box:nth-of-type(1) {
    margin: 4em 0 0.7em 23em;
}

.section-design .details-box:nth-of-type(2) {
    margin: 1.4em 0 1.4em 23em;
}

.section-design .details-box:nth-of-type(3) {
    margin: 1.4em 0 1.4em 23em;
}

.section-design .details-box dt {
    font-size: 139%;
    background: #345981;
    color: #fff;
    text-align: center;
}

.section-design .details-box dt i {
    font-size: 160%;
}

.section-design .details-box dd {
    position: relative;
    font-size: 166%;
    width: 15.76em;
    border-bottom: 1px solid #6091c3;
    border-right: 1px solid #6091c3;
    padding: .2em 0 .2em 1.2em;
}

.section-design .details-box dd:before {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    aspect-ratio: 1/2;
    left: -1px;
    top: 0;
    clip-path: polygon(0 0,100% 0,1px 100%,0 100%);
    background-color: #345981;
}

.section-design .details-box dd i {
    font-size: 70%;
}
@media screen and (min-width: 1700px) {
	.section-design {
		padding: 8.6em 0 0 24em;
	}
}
/* =========================
   タブレット ～1024px
   ========================= */
@media (min-width: 769px) and (max-width: 1100px) {
	.section-design {
		padding: 2em 0 0 16em;
	}
		.section-design .section-title {
		margin:0;
		text-align: center;
	}
	
		.section-design .section-title span {
		margin:0;
	}
	
	.section-design .details-box dd {
    font-size: 120%;
		padding: 0.7em 1rem .1em 1.2em;
}
	
	.section-design .details-box:nth-of-type(1) {
    margin: 1em 0 0 9em;
}
	
	.section-design .details-box:nth-of-type(2) {
    margin: 0.1em 0 0 9em;
}

.section-design .details-box:nth-of-type(3) {
    margin: 0.1em 0 0 9em;
}
}

/* =========================
   モバイル ～600px
   ========================= */
@media screen and (max-width: 768px) {
    .section-design {
        padding: 2em 0.5rem; /* モバイル版のパディング調整 */
        background-image: url(../images/bg-msp.png); /* モバイル用の背景画像に変更 */
        background-size: cover; /* 画像がカバーされるように */
        background-position: center center; /* 背景画像が中央に配置 */
        background-repeat: no-repeat; /* 繰り返しを防ぐ */
        position: relative; /* コンテンツの位置調整 */
    }

    .content {
        position: relative;
        z-index: 1; /* 背景画像の上にコンテンツを表示 */
        padding: 2em;
        text-align: center; /* テキストの中央揃え */
    }
	.section-design .section-title {
		margin:0;
		text-align: center;
	}
	.section-design .section-title span {
		margin:0;
	}
	.section-design .details-box:nth-of-type(1) {
		margin: 20px 0 0 10px
	}
	.section-design .details-box:nth-of-type(2) {
		margin: 10px 0 10px 10px;
	}
	.section-design .details-box:nth-of-type(3) {
		margin: 5px 0 10rem 10px;
	}
	.section-design .details-box {
		margin:0;
	}
.section-design .details-box dd {
    font-size: 1rem;
    padding: 0.5em 0 0.5em 1.2em;  /* 正常な半角スペース */
    font-weight: 500;
}
.section-design .details-box dt {
	font-size: 1rem;
	}
}

/*==================================================================================================================================

  *経験豊富なドクターによる「十字歯列矯正」

==================================================================================================================================*/
.specialty {
	position: relative;
	background-image: url(../images/b.p-bg1.png);
	background-size: contain;
	background-repeat: no-repeat;
	aspect-ratio: 1400 / 1188;
}
.specialtyhead h2 {
  font-family: serif;
    font-size: 5.1rem;
    color: #fff;
    position: absolute;
    top: 73px;
    left: 23px;
    letter-spacing: 0.3rem;
}
.subinner {
    padding: 370px 5% 0;
}
.subinner p {
  color: #fff;
  font-size: 1.5rem;
  margin-top: 50px;
}
.specialty-inner {
  width: max(49.786vw, 647px);
  padding: 110px 0 0 max(4.643vw, 60px);
  }

.specialty-inner .subcatch {
  font-size: 1.2rem;
  color: #f7961d;
  padding-right: 30px;
  padding-left: 20px;
}
.specialty-inner h3 {
  font-size: 1.7rem;
  color: #2c3e50;
  line-height: 1.3;
  font-feature-settings: "palt";
  margin: 0 0 30px;
  padding-right: 30px;
}
.specialty-inner h3 span {
  font-size: 2.5rem;
  color: #4c5c75;
}
.specialty-inner .txtbox {
    margin-top: max(0.714vw, 9px);
    padding-top: max(1.571vw, 20px);
    border-top: 1px solid #2e2e2e;
    padding-right: 30px;
}

.specialty-inner .txtbox p {
  position: relative;
    font-size: 1.3rem;
    line-height: 1.5;
    /* display: flex;
    align-items: center;
    gap: max(0.857vw, 11px); */
}

.specialty-inner .txtbox p span{
  color: #1a2d4d; /* 紺 */
  background: linear-gradient(transparent 65%, #fff3e0 65%); /* 薄いベージュで下線 */
}
.specialty-inner .txtbox p span.size {
    font-size: 1.5rem;
}

.value-two{
  margin: 32px auto 0;           /* 下の空白は後で調整OK */
	padding: 0 16px 75px;
}
.value-two__inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr; /* PCは2列 */
  gap: 28px;
}
.value-card{
  background: #6d8bbd63;
  border: 1px solid #355891;
  padding: 18px 18px 16px;
}
.value-ttl{
  font-size: 1.5rem;
  margin: 0 0 10px;
  color: #49618b;
  line-height: 1.6;
  text-align: center;
}
.value-list{
  margin: 0; padding: 0; list-style: none;width: 90%;margin: auto;
}
.value-list li{
  padding: 8px 0;
  line-height: 1.8;
  color: #364156;
}
.value-list li::before{
  content: "✔";
  color: #3f66a0;
  margin-right: .6em;
  font-weight: 700;
}
.value-card img {
    width: 80%;
}
.zyuzibtn {
    margin: 25px auto;
    text-align: center;
}
.cross-btn {
  display: inline-block;
  padding: 14px 36px;
  border-radius: 40px;
  border: 1.5px solid #7db2e5;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  color: #4979b8;
  font-size: 16px;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-decoration: none;
  transition: all .3s ease;
  box-shadow: 0 4px 12px rgba(125,178,229,0.15);
}

/* hover */
.cross-btn:hover {
  background: #7db2e5;
  color: #fff;
  box-shadow: 0 6px 18px rgba(125,178,229,0.35);
  transform: translateY(-2px);
}

@media screen and (min-width: 1700px) {	
	.subinner p {
		margin-top: 165px;
	}
}
/* レスポンシブ対応 */
@media screen and (max-width: 768px) {	
.specialty-inner {
	width: 100%;
}
.value-two{
	padding: 0 5px;
}
.value-two__inner{
  gap: 10px;
}
.value-card{
  padding: 18px 10px 16px;
}
.value-ttl{
	font-size: 0.8rem;
	font-weight: 700;
}
.value-list {
	width: 100%;
	}
.value-list li{
	font-size: 0.8rem;
}
.value-card img {
    width: 100%;
}
.specialty-inner h3 {
	font-size: 1.3rem;
	padding-right: 0;
}
.specialty-inner h3 span {
	font-size: 2rem;
}
}

/* =========================
   タブレット ～1024px
   ========================= */
@media screen and (max-width: 1024px) {
  .subinner {
    /* 背景ビジュアルの上にのるリードの余白を調整 */
    padding: 280px 6% 0;
  }
    .subinner p {
        font-size: 1.4rem;
        margin: 0px 0px 5px 0;
        line-height: 1.6;
        padding-right: 400px;
  }

    .specialty-inner {
        width: clamp(560px, 70vw, 760px);
        padding: 0px 0 0 48px;
    }
	
  .specialty-inner .subcatch {
    font-size: 1.1rem;
    padding-left: 16px;
    padding-right: 24px;
  }
  .specialty-inner h2 {
    font-size: 1.6rem;
    margin-bottom: 24px;
    padding-right: 24px;
  }
  .specialty-inner h2 span {
    font-size: 2.2rem;
  }
  .specialty-inner .txtbox {
    margin-top: 10px;
    padding-top: 16px;
    padding-right: 24px;
  }
  .specialty-inner .txtbox p {
    font-size: 1.15rem;
    line-height: 1.7;
  }
  .specialty-inner .txtbox p span.size {
    font-size: 1.35rem;
  }
	  }

/* =========================
   モバイル ～600px
   ========================= */
@media screen and (max-width: 600px) {
	.specialtyhead h2 {
    font-family: serif;
    font-size: 1.2rem;
    color: #fff;
    position: absolute;
    top: 20px;
    left: 6px;
    letter-spacing: 0.14rem;
}
  /* 背景上のテキストは読みやすさ重視で余白＆サイズをさらに圧縮 */
  .subinner {
    padding: 1% 8% 0 3%;
    width: 63%;
    }
  .subinner p {
    font-size: 0.7rem;
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25); /* 視認性UP（任意） */
	color: #444;
    margin: 70px 0 0 0;
	padding-right: 0px;
  }

  .specialty-inner {
    position: static; /* 背景から切り離して縦積みに */
    width: 100%;
    padding: 16px 15px 0;
  }
  .specialty-inner .subcatch {
    font-size: 0.9rem;
    padding: 3% 0 6px;
  }
  .specialty-inner h2 {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0 0 16px;
    padding-right: 0;
  }
  .specialty-inner h2 span {
    font-size: 1.5rem;
  }
  .specialty-inner .txtbox {
    margin-top: 8px;
    padding-top: 12px;
    padding-right: 0;
  }
  .specialty-inner .txtbox p {
    font-size: 1rem;
    line-height: 1.8;
  }
  .specialty-inner .txtbox p span.size {
    font-size: 1.15rem;
  }

  /* 背景が主張し過ぎる場合は少し暗くする（任意） */
  .specialty {
    padding: 20.733333vw 0 0;
    background-image: url(../images/b.p-bg1.png);
    background-size: contain;
    aspect-ratio: 550 / 433;
    background-repeat: no-repeat;
  }
  .specialty::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0));
    pointer-events: none;
  }
}

/* =========================
   さらに小さい端末 ～360px（任意）
   ========================= */
@media screen and (max-width: 360px) {
  .subinner {
    padding-top: 130px;
  }
  .subinner p {
    font-size: 0.7rem;
  }
  .specialty-inner h2 {
    font-size: 1.2rem;
  }
  .specialty-inner h2 span {
    font-size: 1.6rem;
  }
  .specialty-inner .txtbox p {
    font-size: 0.95rem;
  }
}
/*================================================================

  * 選べる矯正治療法(3カラム)
  
================================================================*/
/* ====== レイアウト ====== */
.choose-ortho{
  position: relative;
  overflow: hidden;
}
.co-inner{
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(28px,4vw,48px) 16px;
}

/* ====== 右側の七角形画像 ====== */
.co-heptagon {
  position: absolute;
  right: -101px;
  top: -10px;
  width: min(48vw, 520px);
  height: min(36vw, 400px);
  background: center / contain no-repeat url(../images/top/heptagon.png);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

/* ====== 見出し ====== */
.co-head{ position: relative;}
.co-title{
  margin: 0 0 .6em;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.2;
  color: #0f0f0f;
  font-size: clamp(30px,5.2vw,56px);
}

/* 「選」の背面に画像を付与 */
.co-mark{
  position: relative;
  display: inline-block;
  z-index: 0;
  font-size: 5rem;
}
.co-mark::before{
    content: "";
    position: absolute;
    z-index: -1;
    left: -34px;
    top: 34%;
    width: 150px;
    height: 150px;
	background: center / contain no-repeat url(../images/top/mark-bg.png);
    transform: translateY(-40%);
    opacity: .9;
    pointer-events: none;
}

/* ====== テキスト ====== */
.co-lead{
  margin: .2em 0 0;
  color: #202429;
  font-size: 1.5rem;
  letter-spacing: .04em;
  line-height: 1.9;
}
.co-sub{
  margin: .35em 0 0;
  color: #33383e;
  font-size: 1.5rem;
  letter-spacing: .04em;
  line-height: 1.9;
}

/* アンダーライン（キーワードだけ） */
.co-uline {
  border-bottom: 2px solid #b8aa6a;
}

/* ====== レスポンシブ ====== */
@media (max-width: 768px){
  .co-heptagon{
    right: 0;
    top: -6px;
    width: 54vw;
    height: 42vw;
    opacity: .85;
  }
  .co-mark::before{
    width: 150px;
    height: 150px;
    left: -27px;
  }
  .co-lead,
  .co-sub {
    font-size: 1rem;
  }
}

/* 三カラム */
:root{
  --ink:#26313c;
  --muted:#6f7a86;
  --line:#e7e9ee;
  --shadow:0 14px 28px rgba(17,28,45,.08), 0 2px 6px rgba(17,28,45,.05);
  --green:#3e7a3a;
  --blue:#2d7d90;
  --pink:#a95078;
  --gold1:#b8aa6a;
  --gold2:#e3d8a2;
  --accent-price:#b73355;
}

.ortho-choices {
  font-family: serif;
  padding: 40px 16px;
  color: var(--ink);
  font-feature-settings: "palt";
  position: relative;
  background: url("../images/top/bg-3ortho.png") center center no-repeat;
  background-size: 1520px 1042px;
  background-color: #fff;
  overflow: hidden;
}
h3.oc-title {
	text-align: center;
}
.oc-inner{max-width:90%;margin:0 auto;}
.oc-eyebrow{font-size:18px;margin:0 0 18px;color:#212a33;}

/* グリッド */
.oc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

/* カード */
.oc-card{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.95)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.012) 0 1px, transparent 1px 3px);
  overflow:hidden;
  box-shadow:var(--shadow);
  padding:24px 15px 16px;
}
.oc-card::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 14px;
    height: 14px;
    background: rgba(0, 0, 0, .28);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    pointer-events: none;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5));
    transition: transform .2s 
ease;
}
.oc-card::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0));
  pointer-events:none;
}

/* タイトル */
.oc-kicker{color:var(--muted);font-size:13px;margin:0 0 6px;}
.oc-title{margin:2px 0 10px;font-size:26px;line-height:1.45;letter-spacing:.01em;}
.oc-title .oc-strong{font-weight:700;}
.oc-title-link{color:inherit;text-decoration:none;}
a.oc-title-link{font-family: 'Noto Serif JP', serif;}
.oc-title-link:hover{opacity:.9}

/* 強調色 */
.oc-green .oc-title .oc-strong{color:var(--green);}
.oc-blue  .oc-title .oc-strong{color:var(--blue);}
.oc-pink  .oc-title .oc-strong{color:var(--pink);}

/* リード */
.oc-lead{font-size:15px;line-height:1.9;color:#3a434d;margin:0 0 14px;}

/* バッジ*/
.oc-badges{display:flex;gap:10px;list-style:none;padding:0;margin:12px 0 16px;}
.oc-badges li{
  position: relative;
  width: 120px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: #fff;
  font-weight: 500;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(160deg, #4f7c53 0%, #3c6440 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.45),
    inset 0 -2px 3px rgba(0,0,0,0.15), 
    0 2px 4px rgba(0,0,0,0.08);
  outline: 1px solid rgba(255,255,255,0.2);
}
.oc-badges li span {
  display: inline-block;
  text-shadow:
    0 1px 1px rgba(0,0,0,0.25);
}
.oc-green .oc-badges li{background:radial-gradient(circle at 30% 20%, #a8ce98, #3e7a3a 75%);}
.oc-blue  .oc-badges li{background:radial-gradient(circle at 30% 20%, #9cc9d2, #2d7d90 75%);}
.oc-pink  .oc-badges li{background:radial-gradient(circle at 30% 20%, #d7a3bc, #a95078 75%);}
.oc-badges li::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  pointer-events:none;
}
.oc-divider{
  height:8px;border-bottom:none;border-radius:999px;margin:12px 0 10px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(90deg,
      transparent 0 6%,
      var(--gold1) 6%,
      var(--gold2) 28%,
      var(--gold1) 50%,
      var(--gold2) 72%,
      var(--gold1) 94%,
      transparent 94% 100%) border-box;
  border-bottom:5px solid transparent;
}
.oc-price{margin:6px 0 12px;padding-top:12px;border-top:1px dashed rgba(17,28,45,.12);font-size:14px;}
.oc-price > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 0;border-bottom:1px solid var(--line);}
.oc-price dt{color:#2e3944;}
.oc-price dd{margin:0;color:var(--accent-price);font-variant-numeric:tabular-nums;}
.oc-price b{font-size:20px;letter-spacing:.01em;}
.oc-thumb{
  display:block; margin:12px -6px 0; overflow:hidden;
  background:#eef2f6;
  box-shadow:0 8px 16px rgba(17,28,45,.08);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.oc-thumb img{width:100%;height:auto;display:block;object-fit:cover;}
.oc-thumb:hover{
  transform: translateY(-1px);
  box-shadow:0 14px 24px rgba(17,28,45,.12);
  filter:saturate(1.03);
}
@media (prefers-reduced-motion: reduce){ .oc-thumb{transition:none;} }

/* ====== レスポンシブ ====== */
@media (max-width:1024px){
  .oc-grid{grid-template-columns:1fr 1fr;}
  .oc-badges li{width:calc(33.333% - 7px);}
}
@media (max-width:768px){
  .oc-grid{grid-template-columns:1fr;}
  .oc-title{font-size:24px;}
  .oc-badges li{width:calc(50% - 6px);}
  .oc-inner {max-width: 100%;}
  .oc-badges li {width: 25%;font-size: 10px;}
	.oc-card {padding: 24px 10px 16px;}
}
/*================================================================

  * 無料相談
  
================================================================*/

.cta-section{
  --ink:#223047;
  --muted:#6c7484;
  --panel:#ffffff;
  --bg-a:#f6f9fc;
  --bg-b:#eef3f9;
  --line:#e5e9f1;
  --shadow:0 8px 22px rgba(30,45,70,.06);

  --brand:#5b8fd6;
  --brand-deep:#3d6fb6;
  --gold:#bda46c;

  background:
    linear-gradient(to right, rgba(34,48,71,.04) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(to bottom, rgba(34,48,71,.04) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(135deg, var(--bg-a), var(--bg-b));
  padding: 88px 20px;
}
.cta-inner{ max-width:90%; margin:0 auto; text-align:center; }
.cta-title{
  font-family: serif;
  color:var(--ink);
  font-weight:600;
  letter-spacing:.01em;
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.1rem);
  margin:0 0 10px;
}
/* タイトル下に金の細ライン（上品に） */
.cta-title::after{
  content:""; display:block; width:72px; height:2px; margin:14px auto 0;
  background: linear-gradient(90deg, rgba(189,164,108,.0), var(--gold), rgba(189,164,108,.0));
  border-radius:2px;
}
.cta-sub{ color:var(--muted); font-size:.98rem; margin:12px 0 40px; }

/* グリッド */
.cta-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
@media (max-width: 960px){ .cta-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .cta-grid{ grid-template-columns: 1fr; } }

/* カード：薄い境界線＋控えめ影＋上辺に青→金の極細グラデ */
.cta-box{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:32px 28px 26px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cta-box::before{
  content:""; position:absolute; left:12px; right:12px; top:10px; height:3px; border-radius:3px;
  background: linear-gradient(90deg, rgba(91,143,214,.55), rgba(189,164,108,.55));
}
.cta-box:hover{
  transform: translateY(-2px);
  box-shadow:0 12px 28px rgba(30,45,70,.08);
  border-color:#dbe2ec;
}

/* アイコン：薄い青グレータイル＋Font Awesome（色は青系に統一） */
.cta-icon{
  width:64px; height:64px; margin:2px auto 14px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:#eef3f8;      /* ページの面の色味に合わせる */
  color:var(--brand);
  font-size:26px;
  position:relative;
}
.cta-icon::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(61,111,182,.18); opacity:0; transition:opacity .2s;
}
.cta-box:hover .cta-icon::after{ opacity:1; }

/* 見出し・本文 */
.cta-box h3{ color:var(--ink); font-size:1.12rem; font-weight:600; margin:6px 0 8px; }
.cta-box p{ color:var(--muted); font-size:.95rem; line-height:1.8; margin:0 0 18px; }

/* ボタン：ソリッド青（光沢なし）＋金の細縁取りで“品”を演出 */
.cta-btn{
  font-family: serif;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:48px; padding:10px 22px;
  border-radius:999px; font-weight:600; text-decoration:none; color:#fff;
	background:#76a1cd;
  border:1px solid rgba(189,164,108,.42); /* 金の極細縁 */
  box-shadow:0 6px 16px rgba(61,111,182,.12);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.cta-btn:hover{ transform:translateY(-1px); background:#8ab4df; box-shadow:0 10px 22px rgba(61,111,182,.16);color: #fff; }
.cta-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(91,143,214,.25); }

/* 3種とも色は統一 → 世界観を崩さない（LINEだけアイコン色で識別） */
.cta-btn.tel{ }
.cta-btn.line{ }
.cta-btn.form{display: inline; }
.cta-btn.form{background: #94b0cb;}
.cta-btn.form:hover{background: #b5cde5;}

/* モバイル */
@media (max-width:480px){
	.cta-section{ padding:72px 16px; }
	.cta-btn{ width:100%; }
	.cta-box {padding: 32px 15px 26px;}
}
/*================================================================

  * 支払い方法
  
================================================================*/
/* -------------------支払方法------------------- */
.paymentsec {
	background: linear-gradient(to bottom, #ffffff, #faf8f5);
	box-sizing: border-box;
	margin-top: max(7.64svw, 99.36px);
	margin-bottom: max(4.29svw, 55.71px);
	padding-bottom: max(6.21svw, 41.79px);
	background-image: url(../images/top/paybg.png);
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}
.payttl {
  font-size: 3.5rem;
  line-height: 1.4;
  margin-bottom: 15px;
  text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.6);
  position: relative;
  text-align: center;
  margin: 30px 0;
}
.payttl .mini {
  font-size: 2.5rem;
}
.payttl span.color {
    color: #6d8bbd;
}
.payout {
  background: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  padding: 40px;
  max-width: 90%;
  margin: 20px auto;
}
.paytxtbox {
  flex: 1 1 55%;
  padding: 20px 30px;
}
.paymark {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.paymark span {
  background: linear-gradient(transparent 70%, #6d8bbd24 70%);
  padding-bottom: 5px;
  font-weight: bold;
  font-size: 20px;
}
.paymark .marker {
  font-family: 'Noto Serif JP', serif;
  margin-bottom: 16px;
  line-height: 1.6;
  position: relative;
  font-size: 20px;
  padding-left: 30px;
}
.paymark .marker::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 2px;
  color: #6d8bbd;
  font-size: 18px;
}
.payp {
  padding-top: 20px;
  line-height: 1.8;
  font-size: 16px;
  color: #333;
}
.payimg {
  flex: 1 1 40%;
  padding: 20px;
  text-align: center;
}

/* 流れる画像 */
.payimg img {
  max-width: 80%;
    height: auto;
    border-radius: 8px;
    margin: 0 auto;
}

/*------------------- 2カラム費用比較 -------------------*/
  :root{
    --base:#A2CFFE;
    --ink:#1B1B1B;
    --muted:#6b7280;
    --bg:#ffffff;
    --line:#e5e7eb;
    --accent:#b91c1c; 
  }
  .pay-sim{padding:32px 0;margin:40px auto;}
  .pay-sim__ttl{font-size:2rem;text-align:center;margin:0 0 35px;color:#111827;letter-spacing:.08em}
  .pay-sim__inner{display:grid;grid-template-columns:1fr 1fr;gap:18px;width: 90%;margin: 0 auto;}
  .pay-card{background: #ffffffde;padding: 16px;--line: rgba(120, 140, 170, .14);--gap: 10px;background-image: linear-gradient(to right, rgb(120 140 170 / 5%) 1px, transparent 1px), linear-gradient(to bottom, rgb(120 140 170 / 4%) 1px, transparent 1px);background-size: var(--gap) var(--gap), var(--gap) var(--gap);background-repeat: repeat;box-shadow: inset 0 0 0 1px rgba(130, 150, 180, .22), inset 0 0 0 2px rgba(255, 255, 255, .5);}
  .pay-card__headline{font-family: 'Noto Serif JP', serif;font-size:1.15rem;font-weight:600;color:#3f3f46;background:#9dbddf;padding:10px 12px;border-radius:8px;color: #Fff;}
  .pay-card__inner{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center;margin-top:14px}
  .pay-card__img img{width:50%;height:auto;border-radius:10px;display:block}
  .pay-card__lead{font-size: 1.2rem;color:#555;margin:0 0 6px}
  .pay-card__lead .tax{font-size:.9em;color:var(--muted)}
  .pay-card__monthly{font-family: 'Noto Serif JP', serif;font-size:3rem;line-height:1.1;color:var(--accent);font-weight:700;letter-spacing:.04em}
  .pay-card__monthly span{font-size:2rem;color:#3f3f46;font-weight:500;letter-spacing:.05em;margin:0 .1em}
  .pay-card__rule{border:none;border-top:2px solid #d6d3d1;margin:14px 0}
  .pay-card__sum{display:flex;justify-content:space-between;align-items:center;color:#3f3f46}
  .pay-card__sum b{font-size:1.1rem}
  .pay-card__note{margin:10px 0 0;color:var(--muted);font-size:.92rem}
  .pay-sim__cta{text-align:center;margin-top:18px;width: 90%;margin: 0 auto;}

  @media (max-width: 900px){
	  .pay-sim__cards{grid-template-columns:1fr}
	  .pay-card__inner{grid-template-columns:1fr}
	  .pay-card__monthly{font-size:2rem}
  }

:root{
  --diag-a: #E6F2FF;
	--diag-b: #FFFFFF;
	--diag-angle: 116deg;
	--diag-split: 51%;
}
.pay-sim__cards{
  background: linear-gradient(var(--diag-angle), #6989ab45 0 var(--diag-split), #ffffff30 var(--diag-split) 100%);
	padding: 73px 15px;
}
/* 見出し両端 */
.pay-sim__ttl::before,
.pay-sim__ttl::after{
  font-weight:700;
  color: var(--base-blue, #A2CFFE);
  position: relative;
  top: .06em;
}
.pay-sim__ttl::before{
  content: "＼";
  margin-right:.5em;
}
.pay-sim__ttl::after{
  content: "／";
  margin-left:.5em;
}

@media (max-width: 768px){
  .payttl {font-size: 2rem;}
  .payttl .mini {font-size: 1.5rem;}
  .paytxtbox {flex: 1 1 55%;padding: 20px 0;}
  .paymark span {font-size: 1rem;}
  .paymark{align-items: flex-start;}
  .payout{max-width: 100%;padding: 40px 10px;}
  .pay-sim__ttl {font-size: 1rem;}

	.pay-sim__inner.w95 {width:100%;}
	.pay-sim__inner {gap:5px;}
  .pay-card {padding: 16px 5px;}
	.pay-card__headline {font-size:100%;}
	.pay-card__lead {font-size:70%;}
	.pay-card__monthly{margin:5px;}
	.pay-card__monthly span {font-size:1rem;}
	.pay-card__sum {flex-direction: column;}
	p.pay-card__note {font-size:70%}
	.paymentsec {margin-top:20px}
}

/*==================================================================================================================================

  *あなたの歯並びを教えてください

==================================================================================================================================*/
.teeth-types {
  background-color: #f9f9f9;
  padding: 40px 0;
  text-align: center;
  font-family: "shippori-mincho", serif;
  background-image: url(../images/dot-back.png);
}

.teeth-types h2 {
  color: #666;
  font-size: 40px;
  margin-bottom: 20px;
}

.teeth-types p {
  color: #666;
  font-size: 20px;
  margin-bottom: 60px;
}

.teethlight {
  background-image: linear-gradient(to right, #A2CFFE, #5B84B1);
  /* グラデーションの色 */
  -webkit-background-clip: text;
  /* 背景のグラデーションをテキストに適用 */
  color: transparent;
  /* 文字色を透明にして、グラデーションを見せる */
  font-weight: bold;
  /* 強調するために太字 */
  font-size: 60px;
}

.teeth-type-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.teeth-type {
  background-color: white;
  padding: 20px 5px;
  width: 250px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  background-image: url(../images/dot.png);
}

.teeth-type img {
  width: 60%;
  height: auto;
  border-radius: 10px;
}

.teeth-type h3 {
  font-size: 18px;
  margin: 15px 0;
  color: #333;
}

.teeth-type .btn {
  background-color: #A2CFFE;
  color: white;
  padding: 5px 20px;
  text-decoration: none;
  font-size: 15px;
  display: inline-block;
  margin-top: 10px;
}

.teeth-type .btn:hover {
  background-color: #8bb9e3;
}

/* =========================
   タブレット ～1024px
   ========================= */
@media screen and (max-width: 1024px) {
    .teeth-types h2 {
    font-size: 30px;
  }

  .teethlight {
    font-size: 40px;
  }

  .teeth-types p {
    font-size: 16px;
    margin-bottom: 30px;
  }

  .teeth-type h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 15px 0;
}

.teeth-type .btn {
  font-size: 15px;
}

  .teeth-type-container {
    gap: 10px;
  }

  .teeth-type {
    width: 30%;
  }
}

/* =========================
   モバイル ～600px
   ========================= */
@media screen and (max-width: 600px) {
  .teeth-types h2 {
    font-size: 25px;
  }

  .teethlight {
    font-size: 35px;
  }

  .teeth-types p {
    font-size: 16px;
    margin-bottom: 30px;
  }

  .teeth-type h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 15px 0;
}

.teeth-type .btn {
  font-size: 14px;
}

  .teeth-type-container {
    gap: 10px;
  }

  .teeth-type {
    width: 40%;
  }
}
/*==================================================================================================================================

  *世代ごと

==================================================================================================================================*/
 .sedaihead {
  position: relative;
  /* color: #fff; */
 }
 .sedaihead .first {
  position: absolute;
  /* top: 155px;
  left: 123px;
  font-size: 4.5rem; */
  writing-mode: vertical-rl;
  font-size: 4rem;
  top: 0;
  right: 20px;
 }
.sedaihead .second {
  position: absolute;
  /* top: 362px;
  left: 123px;
  font-size: 4.5rem; */
  writing-mode: vertical-rl;
	font-size: 3rem;
  top: 100px;
  right: 180px;
  }
  .sedaihead em{
font-size: 7rem;
  }


.sedaihead .first{
  position:absolute;
  writing-mode: vertical-rl;
  font-size:4rem;
  top:0; right:20px;
}

/* 画像を置く基準にする */
.sedaihead .first em{
  position: relative;
  z-index: 0;             /* 文字は前面 */
  line-height: 1;
  display: inline-block;
  padding-inline: .04em;
  color: #6d8bbd;
}

/* モバイルで縦→横に切り替える場合の例 */
@media (max-width: 768px){
.sedaihead .first,
.sedaihead .second {
	writing-mode: horizontal-tb;
	font-size: 1.5rem;
	}
.sedaihead .first{
	position: relative;
	top:-95px;
	right:auto;
	}
.sedaihead .second {
/* 	position: relative; */
	top: 210px;
	right: 10px;
	}
.sedaihead .first em {
	font-size: 3rem;
	color: #2c3338;
}
}


/* セクションの背景 */
.sedai {
  padding: 60px 0 0 0;
  position: relative;
    background: linear-gradient(to right, rgb(255 255 255) 0%, rgb(234 237 246 / 90%) 20%, /* #eaf0f6（明るめ）*/ rgb(245 247 250 / 90%) 80%, /* #f5f7fa（ほぼ白）*/ rgb(255 255 255) 100%);
  overflow: hidden;
  font-family: 'Noto Serif JP', serif;
}

.sedai::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	z-index: 0;
}

.sedai::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px; 
  background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  z-index: 1;
}

.idx_inr {
  position: relative;
  display: block;
  margin: 0 auto;
}

.idx_box {
  display: block;
  position: relative
}

.idx_lst li {
  position: relative;
  display: block;
  padding-left: 1em;
  margin-bottom: .5em;
  background-repeat: no-repeat;
  background-position: 0 .4em;
  background-size: .8em auto
}

.sedai .idx_inr {
  max-width: 1400px;
  width: 100%;
  padding: 36px 0;
  margin-bottom: 30px;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-color: #fff;
  background-position: 100% 0
}

.sedai .idx_inr:nth-of-type(2) {
  background-position: 0 0
}
.sedai .idx_inr:nth-of-type(4) {
  background-position: 0 0
}
.sedai .idx_inr:nth-of-type(6) {
  background-position: 0 0
}

.sedai .idx_box {
  background-color: #ffffffba;
  box-shadow: 3px 3px 5px rgba(162,162,162,.2);
  max-width: 858px;
  margin: 0 auto 0 0;
  padding: 30px 24px 24px 65px;
}

.sedai .idx_inr:nth-of-type(2) .idx_box {
  box-shadow: -3px 3px 5px rgba(162,162,162,.2);
  margin: 0 0 0 auto
}
.sedai .idx_inr:nth-of-type(4) .idx_box {
  box-shadow: -3px 3px 5px rgba(162,162,162,.2);
  margin: 0 0 0 auto
}
.sedai .idx_inr:nth-of-type(6) .idx_box {
  box-shadow: -3px 3px 5px rgba(162,162,162,.2);
  margin: 0 0 0 auto
}

.sedai_ttl {
	position: relative;
	font-size: 24.87px;
	margin: 0 0 24px;
	border-bottom: 1px solid #6d8bbd;
	color: #6d8bbd;
}
.sedai_ttl span{
  font-size: 35px;
  color: #3f5b89;
}
  

.sedai_ttl:before {
  content: "";
  display: block;
  position: absolute;
  width: 99px;
  aspect-ratio: 1/1;
  left: -45px;
  top: -24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.sedaittl01:before{
  background-image: url(../images/top/h-img.png);
  background-repeat: no-repeat;
}
.sedaittl02:before{
  background-image: url(../images/top/h-img2.png);
  background-repeat: no-repeat;
}
.sedaittl03:before{
  background-image: url(../images/top/h-img3.png);
  background-repeat: no-repeat;
}

.sedai_lead {
  display: flex;
  align-items: center;
  padding: 0 0 16px;
  margin: 0 auto 15px 0;
  width: 60%;
}

.sedai_lead p {
  display: block;
  /* text-align: center */
}

.sedai_lead p i {
  display: block
}

.sedai_lead p .ja {
  font-size: 27.52px
}

.sedai_lead p .en {
  font-size: 39.63px;
  font-weight: 700
}

.sedai_lead figure {
  flex: 1
}

.sedai .idx_lst {
  font-size: 15px
}
.sedai .idx_lst li {
  line-height: 1.3;
  /* letter-spacing: -.06em */
}
.sedai .idx_lst li::before {
  content: "●";
  font-size: 20px;
  color: #6d8bbd;
  margin-right: 10px;
  position: relative;
  top: 3px;
}
.sedai01 li {
    background-image: url(../images/top/check.png);
    background-repeat: no-repeat;
    line-height: 1.3;
    /* letter-spacing: -.06em; */
}
.sedai02 li {
  background-image: url(../images/top/check2.png);
  background-repeat: no-repeat;
  line-height: 1.3;
  /* letter-spacing: -.06em */
}
.sedai03 li {
  background-image: url(../images/top/check3.png);
  background-repeat: no-repeat;
  line-height: 1.3;
  /* letter-spacing: -.06em */
}

.sedai .idx_lst li span {
  display: block
}
.sedai .idx_lst li em {
    font-weight: 600;
    font-size: 19px;
}
.sedai01 li em{
  color: #6d8bbd;
}
.sedai02 li em{
    color: #6d8bbd;
}
.sedai03 li em{
    color: #6d8bbd;
}
.sedai04 li em{
  color: #6d8bbd;
}

.sedai_fig {
  position: absolute
}

.sedai .idx_gnr_btn {
  width: unset;
  left: unset;
  right: 36px;
  bottom: 20px
}

.idx_gnr_01 {
	background-image: url(../images/top/kodomobg.png);
  background-repeat: no-repeat;
}


.idx_gnr_01 .sedai_lead p {
  margin-right: 42px
}

.idx_gnr_01 .sedai_lead figure img {
  width: 109px;
  aspect-ratio: 109/149
}
.idx_gnr_01 .sedai_fig {
  width: 366px;
  bottom: 40px;
  right: 0px;
}
.idx_gnr_01 .sedai_fig img {
  aspect-ratio: 366/272;
  padding: 10px;
  width: 366px;
}

.idx_gnr_02 {
	background-image: url(../images/top/otonabg.png);
  background-repeat: no-repeat;
}

.idx_gnr_02 .sedai_lead p {
  margin-right: 36px
}

.idx_gnr_02 .sedai_lead figure img {
  width: 103px;
  aspect-ratio: 103/138
}

.idx_gnr_02 .idx_lst li:nth-of-type(2) span:nth-of-type(2) {
  margin-left: -.4em
}

.idx_gnr_02 .sedai_fig {
  width: 343px;
  bottom: 70px;
  right: 42px;
}

.idx_gnr_02 .sedai_fig img {
  aspect-ratio: 378/269
}

.idx_gnr_03 {
	background-image: url(../images/top/koureibg.png);
  background-repeat: no-repeat;
}


.idx_gnr_03 .sedai_lead p {
  margin-right: 30px
}

.idx_gnr_03 .sedai_lead figure img {
  width: 117px;
  aspect-ratio: 117/144
}

.idx_gnr_03 .idx_lst li:nth-of-type(2),.idx_gnr_03 .idx_lst li:nth-of-type(3) {
  padding-left: 1em
}

.idx_gnr_03 .sedai_fig {
    width: 349px;
    bottom: 82px;
    right: 9px;
}

.idx_gnr_03 .sedai_fig img {
  aspect-ratio: 377/269;
  width: 366px;
}

/* .idx_gnr_04{
  background-repeat: no-repeat;
}
.idx_gnr_04 .sedai_lead p {
  margin-right: 30px
}

.idx_gnr_04 .sedai_lead figure img {
  width: 117px;
  aspect-ratio: 117/144
}

.idx_gnr_04 .idx_lst li:nth-of-type(2),.idx_gnr_04 .idx_lst li:nth-of-type(3) {
  padding-left: 1em
}

.idx_gnr_04 .sedai_fig {
  width: 377px;
  bottom: 40px;
  right: 42px
}

.idx_gnr_04 .sedai_fig img {
  aspect-ratio: 377/269
} */

.spimg {
  display: none;
}
.spnone {
  display: block;
}


/*------------------------------
ボタン
------------------------------*/

.btn03 {
	position: relative;
/* 	text-align:center; */
}
.btn03 a {
	display: inline-block;
	position: relative;
	min-width: 250px;
	box-sizing: border-box;
	padding: 17px 38px 17px;
	margin: 6px 0;
	line-height: 1;
	border-radius: 40px;
	text-align: left;
	font-weight: bold;
	text-decoration: none;
	font-size: 15px;
}
.btn03 a:hover::before {
  right: 20px;
}

.btn03 a:hover::before{
	right: 20px;
}

.btn03 a:hover::after{
	left:0;
	top:0;
}
.btn03 a i{
	margin-right: 7px;
	font-size: 12px;
}
/* 一つ目のボタン */
.sedaibtv01 a {
	border: 1px solid #6d8bbd;
	color: #6d8bbd;
	transition: background-color 1s ease, color 1s ease;
}
.sedaibtv01 a:hover {
	color: #fff;
	background:#6d8bbd;
}

/* 二つ目のボタン */
.sedaibtv02 a {
  border: 1px solid #6d8bbd;
  color: #6d8bbd;
	transition: background-color 1s ease, color 1s ease;
}
.sedaibtv02 a:hover {
	color:#fff;
	background:#6d8bbd;
}

/* 三つ目のボタン */
.sedaibtv03 a {
	border: 1px solid #6d8bbd;
	color: #6d8bbd;
	transition: background-color 1s ease, color 1s ease;
}

.sedaibtv03 a:hover{
	color:#fff;
	background-color:#6d8bbd;
}
.sedaibtv03 a:hover::before{
	border-color:#6d8bbd;
  color: #fff;
}

/* 四つ目のボタン */
.sedaibtv04 a {
	border: 1px solid #6d8bbd;
	color: #6d8bbd;
	transition: background-color 1s ease, color 1s ease;
}

.sedaibtv04 a:hover{
	color:#fff;
	background-color:#977c4c;
}
.sedaibtv04 a:hover::before{
	border-color:#977c4c;
  color: #fff;
}
/* ----------------------------------------------------
タブレット（768px～1024px）
---------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.sedai .idx_box {
    background-color: #ffffffd6;
  }
}
/* ----------------------------------------------------
スマホ用（〜767px）
---------------------------------------------------- */
@media screen and (max-width: 768px) {
	.sedai { 
		padding:0;
	}
  .spimg {
    display: block;
  }
  .sedai .idx_box {
    background-color: #ffffffed;
    padding: 20px 10px;
  }
  .sedai_ttl {
    font-size: 1rem;
  }
  .sedai_ttl span {
    font-size: 1.7rem;
  }
  .sedai_lead {
    width: 100%;
    margin: 15px auto
  }
  .idx_gnr_01 .sedai_lead p,
  .idx_gnr_02 .sedai_lead p,
  .idx_gnr_03 .sedai_lead p {
    margin-right: 0;
}
.sedai .idx_lst li em {
  font-size: 18px;
}
.spnone {
  display: none;
}
.sedai .idx_inr,
.sedai .idx_inr:nth-of-type(2){
  background-position: left top;
}
.sedaihead .first em {
	font-size:2.4rem;
	}
}
/*==================================================================================================================================

  *患者様のお悩みにお応えします

==================================================================================================================================*/
.problem-heading-section {
  background-color: #dbe4ee;
  background-size: cover;
  background-position: center;
  padding: 80px 20px;
  text-align: center;
  color: #4b3621;
  position: relative;
  margin-bottom: 50px;
  /* 三角形の切り取りを下部に適用 */
  clip-path: polygon(0 0, 100% 0, 55% 98.5%, 50% 100%, 45% 98.5%, 0 0);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
  width: 100%;
}

.problem-heading-section h2 {
  font-family: "shippori-mincho", serif;
  font-size: 45px;
  color: #535353;
}

.problem-heading-inner p {
  color: #535353;
}

.highlight-word {
  background-image: linear-gradient(to right, #A2CFFE, #5B84B1);
  /* グラデーションの色 */
  -webkit-background-clip: text;
  /* 背景のグラデーションをテキストに適用 */
  color: transparent;
  /* 文字色を透明にして、グラデーションを見せる */
  font-size: 150%;
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  margin: 0 10px;
}

/* カード配置 */
.problem-grid {
  background-image: url('img/dot-back.png');
  /* 背景画像パス */
  margin-top: -20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

/* 各カード */
.problem-box {
  display: flex;
  flex-direction: column;
  width: 30%;
  /* モバイル版も含めて3列にするため、幅を30%に設定 */
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.problem-box:hover {
  transform: translateY(-5px);
}

.problem-box img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* コンテンツ全体 */
.problem-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 15px 15px;
  align-items: center;
  /* 中央揃え！ */
  text-align: center;
}

/* タイトル（高さを固定） */
.problem-content h3 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #3D587E;
  line-height: 1.5;
  min-height: 3.0em;
  /* 1行：1.5em → 2行分程度で固定 */
  font-family: "shippori-mincho", serif;
}

/* 本文 */
.problem-content p {
  font-size: 1rem;
  color: #444;
  flex-grow: 1;
  line-height: 1.6;
  margin: 20px;
  text-align: left;
}

.problemlight {
/*   background: linear-gradient(to bottom, transparent 50%, yellow 50%); */
	background: linear-gradient(transparent 70%, #edeb927d 70%);
	padding: 0 5px;
	border-radius: 3px;
/* 	display: inline-block; */
}

/* View More 部分 */
.problem-link {
  margin-top: auto;
  font-family: 'Noto Serif', serif;
}

.problem-link a {
  color: #A2CFFE;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;
  font-family: 'Noto Serif', serif;
}

.problem-link a:hover {
  text-decoration: underline;
}

/* =========================
   タブレット ～1024px
   ========================= */
@media screen and (max-width: 1024px) { 
    .problem-heading-section {
    width: auto;
  }

    .highlight-word {
    font-size: 105%;
  }

  .problem-heading-section h2 {
    font-size: 30px;
  }

  .problem-heading-inner p {
    text-align: left;
  }

  .small {
    font-size: 14px;
  }
 }

/* =========================
   モバイル ～768px
   ========================= */
@media screen and (max-width: 768px) {
  .problem-heading-section {
    width: auto;
  }

  .highlight-word {
    font-size: 105%;
  }

  .problem-heading-section h2 {
    font-size: 35px;
  }

  .problem-heading-inner p {
    text-align: left;
  }

  .problem-box {
    width: 100%;
    max-width: 90%;
  }

  .sp-only {
    display: inline;
  }

  .problem-box img {
    height: auto;
  }

  .small {
    font-size: 15px;
  }
}
/*==================================================================================================================================

  *博多で当院の矯正が選ばれる理由

==================================================================================================================================*/
/* 見出し部分 */
.square-heading {
  font-family: "shippori-mincho", serif;
  font-weight: normal;
  padding: 30px 200px;
}

.square-heading-inner {
  /* 透過白を上に、画像を下に重ねる */
  background:
    linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)),
    url("../images/image (1).webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 50px 0;
}


.s-right {
  text-align: right;
  margin-bottom: 0;
}

.s-center {
  text-align: center;
  margin: 0;
}

.s-left {
  text-align: left;
  margin: 0;
}

.square-box {
  font-size: 60px;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.8);
  /* 透明度を持たせた白背景 */
  padding: 5px 15px;
  margin: 5px 3px;
  color: #666;
  font-weight: bold;
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
  /* より強い影を追加 */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  /* 文字のシャドウを追加 */
}

.square-box-clr {
  font-size: 75px;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.8);
  /* 透明度を持たせた白背景 */
  padding: 5px 15px;
  margin: 5px 3px;
  color: #6297b9;
  font-weight: bold;
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
  /* より強い影を追加 */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  /* 文字のシャドウを追加 */
}

.square {
  font-family: "shippori-mincho", serif;
  text-align: center;
  font-weight: 600;
  color: #444;
  background: rgba(255, 255, 255, 0.7);
  /* もやっと白 */
  padding: 0.8em 1.2em;
  /* 背景が分かる余白 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
  /* ほんのり影（任意） */
  display: block;
  /* テキスト幅だけ白にしたいなら */
  margin: 0 200px;
}

/* 理由セクション */
.treatment-section {
  padding: 50px 20px;
  background-color: #f9f9f9;
}

/* コンテンツのラッパー */
.treatment-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 30px 50px 30px 80px;
  /* 左側に余白を追加 */
  background-image: url(../images/stripe.png);
  margin-bottom: 40px;
}

/* テキスト部分 */
.text-container {
  width: 45%;
  padding-right: 20px;
}

/* 逆にしたい場合（画像とテキストの位置を変更） */
.reverse {
  flex-direction: row-reverse;
}

/* 見出し番号 */
.treatment-number {
  font-size: 60px;
  font-weight: bold;
  background-image: linear-gradient(to right, #A2CFFE, #5B84B1);
  /* グラデーションの色 */
  -webkit-background-clip: text;
  /* 背景のグラデーションをテキストに適用 */
  color: transparent;
  /* 文字色を透明にして、グラデーションを見せる */
  margin-bottom: 10px;
  text-align: center;
  font-family: "shippori-mincho", serif;
}

/* 見出し */
.treatment-heading {
  font-size: 32px;
  color: #444;
  font-family: "shippori-mincho", serif;
  margin-bottom: 20px;
  text-align: center;
}

/* チェックリスト部分 */
.checklist {
  background-color: #fff;
  margin: 20px 80px;
  padding: 30px;
  border-left: 6px solid #456075;
  /* 左側に太い枠 */
  border-top: 1px solid #456075;
  /* 上部に細い枠 */
  border-right: 1px solid #456075;
  /* 右側に細い枠 */
  border-bottom: 1px solid #456075;
  /* 下部に細い枠 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* わずかな影を付けて立体感を出す */
}

.checklist label {
  display: block;
  color: #444;
  font-size: 16px;
  margin-bottom: 10px;
  font-family: "shippori-mincho", serif;
  font-weight: 600;
}

.checklist input[type="checkbox"] {
  margin-right: 10px;
}

/* 画像部分 */
.image-container {
  width: 50%;
  /* 画像の幅を調整 */
  margin-left: 20px;
  /* 左側に余白を追加 */
}

.treatment-img {
  width: 100%;
  height: auto;
}

/* =========================
   タブレット ～1024px
   ========================= */
@media screen and (max-width: 1024px) {
  .square-heading {
    font-size: 35px;
    font-weight: normal;
    text-align: center;
    padding-right: 0px;
  }

  .square-box {
    padding: 5px 10px;
  }

  .square {
    margin: 0 20px;
  }

  .treatment-content {
    align-items: center;
    padding: 30px 10px 30px 10px;
    /* 左側に余白を追加 */
    margin-bottom: 40px;
  }

  .treatment-heading {
    font-size: 25px;
    margin-bottom: 20px;
    text-align: center;
  }

  p {
    font-size: 16px;
    margin-bottom: 20px;
    margin: 20px 10px;
    text-align: left;
  }

  .text-container {
    text-align: center;
    padding-right: 0;
  }

  .image-container {
    margin-top: 20px;
    width: 45%;
  }

  .checklist {
    background-color: #fff;
    margin: 20px 10px;
    padding: 30px;
    text-align: left;
  }
}

/* =========================
   モバイル ～600px
   ========================= */
@media screen and (max-width: 600px) {
  .square-heading {
    padding: 30px 0px 10px 0px;
  }

  .square-heading-inner {
    padding: 0 0 10px 0;
  }


  .s-right {
    text-align: right;
    margin-bottom: 0;
  }

  .s-center {
    text-align: center;
    margin: 0;
  }

  .s-left {
    text-align: left;
    margin: 0;
  }

  .square-box {
    font-size: 20px;
    padding: 5px 10px;
    margin: 5px 1px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    /* より強い影を追加 */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
    /* 文字のシャドウを追加 */
  }

  .square-box-clr {
    font-size: 25px;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.8);
    /* 透明度を持たせた白背景 */
    padding: 5px 10px;
    margin: 5px 1px;
  }

  .square {
    font-size: 15px;
    padding: 0.8em 1em;
    /* 背景が分かる余白 */
    margin: 0 10px 10px 10px;
    text-align: left;
  }

  .treatment-content {
    align-items: center;
    padding: 30px 10px 30px 10px;
    /* 左側に余白を追加 */
    margin-bottom: 40px;
  }

  .treatment-heading {
    font-size: 25px;
    margin-bottom: 20px;
    text-align: center;
  }

  p {
    font-size: 16px;
    margin-bottom: 20px;
    margin: 20px 10px;
    text-align: left;
  }

  .text-container {
    width: 100%;
    text-align: center;
    padding-right: 0;
  }

  .image-container {
    width: 100%;
    margin-top: 20px;
  }

  .checklist {
    background-color: #fff;
    margin: 20px 10px;
    padding: 30px;
    text-align: left;
  }
}

/* オールインワン治療 */
.aio {
  font-size: max(calc((15 / 1400) * 100vw), calc(15px * 0.97));
  position: relative;
  font-family: "shippori-mincho", serif;
  color: #444;
  background-image: url(../images/stripe.png);
}

.aio img {
  width: 100%;
  max-width: 100%
}

.aio_otr {
  position: relative
}

.aio_inr {
  position: relative;
  display: block;
  margin: 0 auto
}

.aio_box {
  display: block;
  position: relative
}

.aio_ttl {
  position: relative
}

.aio_lst li {
  position: relative;
  display: block;
  padding-left: 1.4em;
  margin-bottom: .5em;
  background-repeat: no-repeat;
  background-position: 0 .4em;
  background-size: .8em auto
}

.aio_lm {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  text-align: center
}

.aio_lm span {
  display: inline-block;
  width: 4.67em
}

.aio_lm span img {
  aspect-ratio: 70/110
}


.aio_team .aio_mrt {
  margin: 0 3em;
  display: grid;
  grid-template-columns: 31em 1fr;
  grid-template-rows: max-content max-content 1fr;
  column-gap: 3.3em;
  align-content: center;
  padding: 30px 0;
}

.aio_team .aio_mrt figure {
  grid-column: 1/2;
  grid-row: 1/4
}

.aio_team .aio_mrt figure img {
  margin-top: 30px;
  aspect-ratio: 465/523
}

.aio_team .aio_mrt h3 {
  grid-column: 2/3;
  grid-row: 1/2;
  align-self: start;
  width: fit-content;
  margin: 2.2em 0 2.4em auto;
  position: relative
}

.aio_team .aio_mrt h3 span {
  position: relative;
  font-size: 250%;
  text-align: center;
  border-bottom: 1px solid #333;
  padding-right: 1.6em;
  line-height: 1;
  display: inline-block;
  letter-spacing: .04em
}

.aio_team .aio_mrt h3 i {
  font-size: 100%;
  display: inline-block;
  margin: 20px 10px 10px 200px;
  color: #233f64;
}

.aio_team .aio_mrt_lead {
  grid-column: 2/3;
  grid-row: 2/3;
  align-self: start;
  font-size: 152.8%;
  margin: 0 0 1em;
  text-align: center;
}
/* 6角形 */
.aio_team .aio_mrt_desc{
  position: relative;
  border: 1px solid #bfbfbf;
  background:#fff;
  padding: 2em 2.6em;
  --deco-size: 5em;
  --deco-gap: .5em;
  --deco-bg: #e8e8e8;
  z-index: 0;                 /* ← スタッキングコンテキストを作る */
}

/* 角のデコ（背面へ） */
.aio_team .aio_mrt_desc::before,
.aio_team .aio_mrt_desc::after{
  content:"";
  position:absolute;
  z-index: -1;                /* ← 背面に回す */
  width: var(--deco-size);
  aspect-ratio: 1 / 1;
  background: var(--deco-bg);
  mix-blend-mode: multiply;   /* 必要なら維持、気になるなら外してOK */
  pointer-events: none;
  clip-path: polygon(
    25% 0%, 75% 0%, 100% 50%,
    75% 100%, 25% 100%, 0% 50%
  );
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.15));
}

/* 中のテキストを明示的に前面へ（保険） */
.aio_team .aio_mrt_desc > *{
  position: relative;
  z-index: 1;
}


/* 左上 */
.aio_team .aio_mrt_desc::before{
  top: var(--deco-gap);
  left: var(--deco-gap);
}

/* 右下 */
.aio_team .aio_mrt_desc::after{
  bottom: var(--deco-gap);
  right: var(--deco-gap);
  /* 少し傾けたいなら： transform: rotate(15deg); */
}

/* =========================
   モバイル ～768px
   ========================= */
@media (max-width: 768px) {
  .aio_team .aio_mrt {
    display: grid;
    grid-template-columns: 1fr;   /* 1カラム */
    grid-auto-rows: auto;
    row-gap: 1em;
    margin: 0 0.6em 3.2em;
  }

  /* 位置指定をリセットしてHTML順に従わせる */
  .aio_team .aio_mrt h3,
  .aio_team .aio_mrt .aio_mrt_lead,
  .aio_team .aio_mrt figure,
  .aio_team .aio_mrt .aio_mrt_desc {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: normal;
  }

  /* 見た目の微調整だけ残す */
  .aio_team .aio_mrt h3 {
    text-align: center;
    margin: .6em auto .8em;
  }
  .aio_team .aio_mrt h3 span {
    font-size: 120%;
    border-bottom: 1px solid #333;
    padding: 0;
    letter-spacing: .04em;
  }
  .aio_team .aio_mrt h3 i {
    font-size: 150%;
    margin: 20px .2em 0 .1em;
    color: #233f64;
  }

  .aio_team .aio_mrt figure {
    justify-self: center;  /* 中央寄せにしたい場合 */
    margin: 0;
    width: 100%;
    max-width: 520px;
  }
  .aio_team .aio_mrt figure img {
    width: 88%;
    margin-top: .8em;
    aspect-ratio: 465 / 523;
  }

  .aio_team .aio_mrt_lead {
    text-align: center;
    font-size: 120%;
    margin: 0 0 .6em;
  }

  .aio_team .aio_mrt_desc {
    padding: 1.2em;
    margin: 0 .2em;
    --deco-size: 3.2em;
    --deco-gap: .35em;
  }
  .aio_team .aio_mrt_desc span {
    font-size: 100%;
    line-height: 1.8;
	z-index:3;
  }
}

/* 経験豊富なドクターによる矯正治療 */
/* 元の背景指定は外す（または残してもOKだが下で上書き） */
.doctor-section{
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 40px);
  font-family: "Shippori Mincho", serif;
  position: relative;
  isolation: isolate; /* 子要素の背面に擬似要素を敷くため */
  background: none;   /* ←ここで背景は消す */
}

/* 画面幅いっぱいの“下地背景”を追加 */
.doctor-section::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* 中央基準で全幅に */
  width: 100vw;                /* 画面幅ぴったり */
  height: 100%;                /* セクションの高さに追従 */
  background: url('../images/top/tile-bc.png')
              no-repeat left bottom / cover;
  z-index: -1;                 /* 本文より背面に表示 */
}

.dct-eng {
  font-size: 100px;
  font-weight: bold;
  font-style: italic;
  text-align: right;
  margin: 0 20px -60px 0;
  /* フォールバック（グラデ未対応ブラウザ用） */
  color: #5B84B1;

  /* 半透明グラデ文字 */
  --alpha: .75;
  /* 0～1で濃さ調整。例: .6, .9 など */
  background-image: linear-gradient(90deg,
      rgba(91, 132, 177, var(--alpha)),
      rgba(162, 207, 254, var(--alpha)));
  -webkit-background-clip: text;
  /* Safari/Chrome */
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Safari */
}

.doctor-section__h3 {
  font-size: clamp(30px, 2.2vw, 45px);
  color: #444;
  margin: 0 0 18px;
  text-align: left;
  letter-spacing: .04em;
  position: relative;
  display: inline-block;
  padding-bottom: .35em;
}

.ital {
  font-size: clamp(60px, 2.2vw, 85px);
  font-style: italic;
  margin-right: 10px;
}

.doctor-section__h3 .overline {
  display: block;
  font: 600 12px/1.1;
  color: #5B84B1;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .35em;
}

.doctor-section__h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 240px;
  height: 5px;
  background: linear-gradient(90deg, #A2CFFE, #5B84B1);
}

/* カード全体 */
.doctor-card {
  position: relative;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
  margin: 18px 0;
}
.doctor-card{
  grid-template-columns: 3.5fr 7.5fr;  /* 左:右 = 40% : 60% */
}
.doctor-card.is-reverse{
  grid-template-columns: 7.5fr 3.5fr;  /* 右写真レイアウト用に反転 */
}

/* 斜めの影（台形っぽい土台） */
.doctor-card::before {
  content: "";
  position: absolute;
  inset: 14px 0 -14px 220px;
  /* 左から少し空けて影を出す */
  background: #c7cfda;
  opacity: .28;
  transform: skewX(-12deg);
  z-index: 0;
  pointer-events: none;
}

/* 写真 */
.doctor-card__photo {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 350px;
  margin: 0;
  align-self: start;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  background: #fff;
}

.doctor-card__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 179 / 229;
  object-fit: cover;
}

/* 右側の白ボックス（右端を斜めカット） */
.doctor-card__body {
  position: relative;
  z-index: 3;
  background: #fff;
  border: 1px solid #d5d8df;
  padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 28px);
  clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 50%, calc(100% - 36px) 100%, 0 100%, 0 0);
}

/* タイトル行 */
.doctor-card__role {
  margin: 0 0 6px;
  color: #6b7280;
  font-size: 20px;
}

.doctor-card__name {
  margin: 0 0 4px;
  font-size: 40px;
  letter-spacing: .08em;
  font-weight: 400;
}

.doctor-card__field {
  margin: 0 0 10px;
  font-size: clamp(13px, 1.5vw, 15px);
  color: #444;
  text-align: right;
  font-weight: 600;
}

/* 仕切り線 */
.doctor-card__line {
  border: none;
  border-top: 1px solid #d5d8df;
  margin: 10px 0 12px;
}

/* 実績リスト（四角アイコン） */
.doctor-card__list {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: .4em;
  font-size: 20px;
  color: #2f2f2f;
}

.doctor-card__list li {
  list-style: none;
  position: relative;
  padding-left: 1.2em;
}

.doctor-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: .6em;
  height: .6em;
  border: 2px solid #a9b6c9;
  background: #fff;
}

.doctor-card.is-reverse .doctor-card__photo {
  order: 2;
  justify-self: end;
}

.doctor-card.is-reverse .doctor-card__body {
  order: 1;
}

/* ===== セクションのアクセント ===== */
.doctor-section--accent {
  position: relative;
  padding: 24px 0 8px;
  isolation: isolate;
}

.doctor-section--accent::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 88px;
  background:
    radial-gradient(1200px 120px at 50% 0, rgba(162, 207, 254, .18), transparent 60%),
    linear-gradient(to right, rgba(162, 207, 254, .12), rgba(162, 207, 254, 0));
  z-index: -1;
}

/* ===== カード強化アクセント ===== */

.doctor-card.is-reverse::before {
  inset: 14px 220px -14px 0;
  transform: skewX(12deg);
}

.doctor-card.is-reverse .doctor-card__photo {
  order: 2;
  justify-self: end;
}

.doctor-card.is-reverse .doctor-card__body {
  order: 1;
}

/* 右端カット部分に薄いグラデ */
.doctor-card__body {
  background: #fff;
  border: 1px solid #d5d8df;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 50%, calc(100% - 36px) 100%, 0 100%, 0 0);
}

.doctor-card__body::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42px;
  background: linear-gradient(90deg, transparent, rgba(162, 207, 254, .12));
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* コーナーバッジ（リボン風） */
.doctor-card__badge {
  top: 10px;
  left: 10px;
  display: inline-block;
  padding: .28em .7em;
  margin-bottom: 20px;
  font-size: 20px;
  font-family: "Shippori Mincho", serif;
  color: #fff;
  background: linear-gradient(90deg, #5B84B1, #A2CFFE);
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

/* テキスト微調整（色トーンアップ） */
.doctor-card__role {
  color: #6b7280;
}

.doctor-card__name {
  color: #1f2937;
}

.doctor-card__field {
  color: #334155;
}

/* リストのチェックをブランド色へ */
.doctor-card__list li::before {
  border-color: #A2CFFE;
}


/* モバイル */
@media (max-width: 768px) {
  .doctor-card {
    grid-template-columns: 1fr;
  }

  .doctor-card::before {
    inset: auto 0 10px 0;
    height: 14px;
    transform: none;
  }

  .doctor-card__photo {
    justify-self: center;
    /* gridのセル中央へ */
    width: 100%;
    max-width: 420px;
    /* 親ボックスの上限（お好みで） */
  }

  .doctor-card__photo img {
    width: clamp(70%, 80vw, 82%);
    /* 少し小さめに */
    margin: 0 auto;
    /* 中央寄せ */
    display: block;
    /* margin: auto が効くように */
    aspect-ratio: 179 / 229;
    /* 比率は維持 */
    object-fit: cover;
  }

  .doctor-card__body {
    clip-path: none;
    /* 斜めカットは外す（読みやすさ優先） */
    border-radius: 6px;
  }

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

  .dct-eng {
    font-size: 50px;
    text-align: center;
    margin: 0;
  }

  .doctor-section__h3 {
    font-size: clamp(25px, 2.2vw, 30px);
  }

  .ital {
    font-size: clamp(40px, 2.2vw, 50px);
    margin-right: 0px;
  }

  .doctor-section__h3::after {
    width: 330px;
    height: 5px;
  }

  .doctor-card {
    grid-template-columns: 1fr;
    margin-bottom: 28px;
  }

  .doctor-card.is-reverse {
    grid-template-columns: 1fr;
    margin-bottom: 28px;
  }

  .doctor-card.is-reverse .doctor-card__photo {
    order: 1;
    justify-self: center;
  }

  .doctor-card.is-reverse .doctor-card__body {
    order: 2;
  }

  .doctor-card__body {
    clip-path: none;
    border-radius: 8px;
  }

  .doctor-card__body::after {
    content: none;
  }

  .doctor-card__badge {
    top: 8px;
    left: 8px;
    font-size: 16px;
  }
	
  .doctor-card__list {
  font-size: 16px;
}
}

/* --- PC/タブレットは従来レイアウトのまま（変更不要） --- */

/* === モバイル: スライダーに切替（～768px） === */
@media (max-width: 768px) {

  /* スライダーの器 */
  .doctor-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 8px 12px 16px;
    margin: 0 -12px;
    /* 端までスワイプしやすい余白相殺 */
  }

  .doctor-slide {
    flex: 0 0 88%;
    /* 1画面に1カード（少し左右に余白が見える） */
    scroll-snap-align: center;
  }

  /* カード内部は縦積みでOK（前に入れていたモバイルCSSそのままで可） */
  .doctor-card {
    grid-template-columns: 1fr;
    margin: 0;
    /* スライド内で上下余白はslide側で管理 */
  }

  .doctor-card::before {
    inset: auto 0 10px 0;
    /* 斜めの土台は薄く調整 */
    height: 14px;
    transform: none;
  }

  .doctor-card__photo {
    max-width: 520px;
    justify-self: center;
  }

  .doctor-card__body {
    clip-path: none;
    /* 読みやすさ優先で斜めカット解除 */
    border-radius: 8px;
  }

  /* ナビゲーション */
  .doctor-slider__nav {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
  }

  .doctor-slider__btn {
    appearance: none;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f1f5f9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    font-size: 22px;
    line-height: 40px;
    text-align: center;
    color: #476b87;
  }

  .doctor-slider__btn:active {
    transform: scale(.98);
  }

  .doctor-slider__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .doctor-slider__dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c9d6e6;
    border: none;
  }

  .doctor-slider__dots button.is-active {
    background: #5B84B1;
    width: 22px;
    border-radius: 999px;
    transition: width .2s;
  }
}

/* === デスクトップではナビ非表示 === */
@media (min-width: 769px) {
  .doctor-slider__nav {
    display: none;
  }
}
/* =========================
   各方面で評価される多数の実績
   ========================= */
/* ========== セクション枠 ========== */
.achievements-section{
  position: relative;                 /* 疑似要素の基準 */
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(24px,5vw,48px) clamp(16px,5vw,40px);
  font-family: "Shippori Mincho", serif;
  color: #666;
}

/* 背景だけ100vwで敷く */
.achievements-section::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0;                  /* 親の高さにフィット */
  left: 50%;
  width: 100vw;                        /* 画面幅いっぱい */
  transform: translateX(-50%);         /* 中央合わせ */
  z-index: -1;                          /* 背面へ */
  background-image: url(../images/ach-back.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;               /* 必要に応じて contain */
  pointer-events: none;                 /* クリック無効化（任意） */
  /* 透過したい場合は rgba() の上に単色を重ねるなどで調整 */
}

/* ========== 見出し（参考画像トーン） ========== */
.achievements__h3{
  margin: 0;
  line-height: 1.15;
  letter-spacing: .02em;
  text-align: center;
}
.achievements__h3 .h3-top{
  display:block;
  font-size: clamp(20px, 1.5vw, 25px);
  color:#5B84B1;
  letter-spacing: .18em;
}
.achievements__h3 .h3-main{
  display:inline-block;
  font-size: clamp(60px, 3vw, 75px);
  position: relative;
  padding-bottom: .25em;
  margin-top: 10px;
}
.achievements__h3 .h3-main::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width: 300px; height: 4px;
  background: linear-gradient(90deg, #A2CFFE, #5B84B1);
  border-radius: 99px;
}

/* リード（「理想の顔」マーカー） */
.achievements__lead{
  margin: .6em 0 1.6em;
  font-size: clamp(16px, 2vw, 20px);
  font-family: "Shippori Mincho", serif;
  color:#444;
  text-align: center;
}
.lead-mark{
  background: linear-gradient(to bottom, transparent 58%, rgba(162,207,254,.45) 0);
  padding: 0 .12em;
  border-radius: 2px;
}

/* ========== 3カラムグリッド ========== */
.achievements__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
  margin-top: clamp(12px, 2vw, 20px);
}

/* カード */
.ach-card{
  background: #fff;
  border: 1px solid #dfe6ee;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ach-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.09);
}
.ach-card__fig{
  margin:0;
  /* aspect-ratio: 4 / 3;  ←削除 */
  background: #f3f7fb; /* 任意 */
  overflow: hidden;    /* 任意（はみ出し防止） */
}
.ach-card__fig img{
  width: 100%;
  height: auto;   /* ← これがポイント */
  display: block;
  object-fit: unset; /* または削除 */
}
.ach-card__ttl{
  margin: 14px 16px 6px;
  font-size: clamp(16px, 1.8vw, 18px);
  color:#fff;
  text-align: center;
  background-color: #1f2937;
  padding: 10px 20px;
}
.ach-card__txt{
  margin: 0 16px 18px;
  font-size: clamp(14px, 1.6vw, 15px);
  color:#4b5563;
  line-height: 1.8;
  font-weight: 600;
}

/* ========== レスポンシブ ========== */
@media (max-width: 1024px){
  .achievements__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px){
  .achievements__grid{
    grid-template-columns: 1fr;   /* 1カラム */
  }
  .achievements__h3 .h3-main::after{
    width: 160px; height: 3px;
  }

  .achievements__h3 .h3-main {
    font-size: clamp(40px, 3vw, 55px);
}

.achievements__h3 .h3-top{
  font-size: clamp(15px, 1.5vw, 25px);
}
}

/* =========================
   ドクターによる無料相談実施
   ========================= */
/* ====== カラー調整用（必要に応じて変更） ====== */
:root {
  --accent1: rgba(134, 145, 161, .72);
  /* リボンの赤系（画像寄せ） */
  --accent-dark: #4D6181;
  --brand: #5B84B1;
  /* サブアクセント（英字や線に） */
  --ink: #666;
}

/* ====== セクション土台 ====== */
.consult-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  max-width: auto;
  margin: 0 auto;
  padding: clamp(24px, 6vw, 56px) clamp(16px, 5vw, 40px);
  font-family: "Shippori Mincho", serif;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
}

/* 背景画像（左右） */
.consult-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.consult-bg .bg-left {
  position: absolute;
  left: -4%;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.95) brightness(1.02);
}

.consult-bg .bg-right {
  position: absolute;
  right: -4%;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) brightness(1.02);
}

/* コンテンツ中央寄せ */
.consult-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  backdrop-filter: saturate(1.05);
}

/* 見出し */
.consult-h3 {
  font-size: clamp(24px, 3.2vw, 40px);
  font-weight: 600;
  letter-spacing: .05em;
  margin: 0 0 clamp(12px, 1.8vw, 16px);
}

.consult-h3 span {
  background: linear-gradient(to bottom, transparent 58%, rgba(162, 207, 254, .45) 0);
  padding: 0 .18em;
  border-radius: 2px;
}

.consult-label{
  position: relative;
  display: inline-block;
  font-weight: 700;
  letter-spacing: .18em;
  color: #fff;
  background: var(--accent1);
  padding: 0.4em 1.8em;
  margin: 0 0 50px 0;
  font-size: 45px;
  box-shadow: 0 6px 18px rgba(166,84,77,.25);

  /* ← ココで斜めの四角に */
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}


.consult-ribbon {
  display: inline-block;
  color: #fff;
  background: linear-gradient(90deg, var(--accent1), var(--accent-dark));
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: .06em;
  padding: .7em 1.6em;
  margin: 1rem auto 1.2em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

.consult-ribbon strong {
  font-weight: 800;
}

/* 説明文 */
.consult-text {
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.9;
  color: #444;
  margin: 0 auto clamp(16px, 2.2vw, 24px);
}

.consult-text p {
  margin: .4em 0;
}

/* CTAボタン */
.consult-cta {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-weight: 800;
  color: var(--ink);
  border: 2px solid #cfd6de;
  padding: .85em 1.6em;
  background: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.consult-cta span {
  font-size: 1.25em;
  line-height: 1;
}

.consult-cta:hover {
  transform: translateY(-1px);
  border-color: var(--brand);
  box-shadow: 0 8px 18px rgba(91, 132, 177, .18);
}

/* ====== モバイル最適化 ====== */
@media (max-width: 768px) {

  .consult-bg .bg-left,
  .consult-bg .bg-right {
    width: 100%;
    left: 0;
    right: 0;
    filter: opacity(.2);
  }

  .consult-inner {
    max-width: 680px;
  }

    .consult-section {
    padding: 24px 16px 32px;
  }

  .consult-label {
    clip-path: none;
    font-size: 25px;
    text-align: center;
    margin: 0em 0 20px 0;
    padding: 0.4em 1.4em;
    clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  }

  .consult-cta {
    width: 70%;
    justify-content: center;
  }
	
  .consult-ribbon {
  padding: .7em 1.2em;
}
}

/* =========================
   「抜かない/削らない」
   ========================= */
/* ===== 色・共通設定 ===== */
:root{
  --brand: #A2CFFE;     /* 基本カラー */
  --brand-d: #5B84B1;   /* 濃いめ */
  --ink: #2f2f2f;
  --mute: #707070;
  --band-bg: #757f93;   /* 帯の色（参考画像寄せのグレー青） */
}

.preserve-section{
  background:#fff;
  padding: clamp(20px,4vw,40px) 0;
  color: var(--ink);
  font-family: "Shippori Mincho", serif;
}
.preserve-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px,4vw,24px);
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(16px,2.5vw,24px);
}

/* 左レール（縦見出し） */
.preserve-rail{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4em;
  padding-top: 20px;
}
.rail-en{
  writing-mode: vertical-rl;
  letter-spacing: .2em;
  color: var(--brand-d);
  font-size: 14px;
}
.rail-kanji{
  writing-mode: vertical-rl;
  font-size: clamp(38px,5vw,70px);
  line-height: 1;
  color:#8a92a7;
}
.rail-sub{ color:#484d56; }

/* 右側メイン */
.preserve-content{ position: relative; }

/* 上段：小カード×2 + フォト */
.preserve-top{
  display: grid;
  grid-template-columns: 1fr 40px 1fr minmax(260px, 38%);
  align-items: start;
  gap: clamp(12px,2vw,20px);
}

.mini-card{
  background:#fff;
  border:1px solid #e4e8f0;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  padding: 14px 14px 10px;
}
.mini-card__lead{
  margin:0 0 .2em;
  color:#6b7280;
  font-size: 14px;
  letter-spacing: .06em;
}
.mini-card__ttl{
  margin:0 0 .6em;
  font-size: clamp(18px,2.2vw,22px);
  color:#222;
}
.mini-card__fig{
  margin:0;
  background:#f3f6fb;
  border:1px solid #eef2f7;
}
.mini-card__fig img{
  display:block;
  width:100%;
  height:auto;
  object-fit: cover;
}

/* プラス記号 */
.plus{
  align-self: center;
  justify-self: center;
  font-size: clamp(28px,3.2vw,36px);
  color: var(--brand-d);
}

/* 右の大きめ写真（任意） */
.preserve-photo{
  margin:0;
  overflow:hidden;
  border-radius: 2px;
}
.preserve-photo img{
  width:100%; height:auto; display:block;
  object-fit: cover;
}

/* 下向き矢印 */
.arrow-down{
  text-align:center;
  color: var(--brand-d);
  font-size: 26px;
  margin: 8px 0 0;
}

/* 中央帯＋H3 */
.preserve-band{
  margin-top: 14px;
  background: var(--band-bg);
  color:#fff;
  padding: clamp(16px,2.4vw,24px) clamp(12px,2vw,20px);
  position: relative;
  /* 六角パターンなど敷きたい場合は以下で背景画像を */
  /* background-image: url(img/hex-bg.png);
     background-size: cover; background-position: center; */
}
.preserve-h3{
  margin:0;
  font-size: clamp(25px,4vw,40px);
  letter-spacing:.06em;
  text-align:center;
}

/* 箇条書き */
.preserve-points{
  list-style:none;
  margin: clamp(18px,2.5vw,24px) 0 clamp(6px,1.5vw,12px);
  padding:0 clamp(8px,1.6vw,10px);
  display:grid; gap:.8em;
  font-size: clamp(15px,2vw,18px);
}
.preserve-points li{
  position: relative; padding-left: 1.6em;
}
.preserve-points li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.55em; height:.55em; border-radius:50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(162,207,254,.28) inset;
}

/* ===== レスポンシブ ===== */
@media (max-width: 1024px){
  .preserve-inner{ grid-template-columns: 100px 1fr; }
}
@media (max-width: 768px){
	.mini-card__lead{font-size: 0.8rem;text-align:center;}
	.mini-card__ttl{text-align:center;}
  .preserve-inner{ grid-template-columns: 1fr; }
  .preserve-rail{
    flex-direction: row; gap: .6em; justify-content: center;
  }
  .rail-en, .rail-kanji{ writing-mode: initial; }
  .preserve-top{
    grid-template-columns: 1fr 32px 1fr;   /* フォトを下へ回す */
  }
  .preserve-photo{ grid-column: 1 / -1; }
}
@media (max-width: 520px){
  .plus{ font-size: 28px; }
  .mini-card{ padding: 12px 5px; }
  .preserve-points{ font-size: 15px; }
}

:root {
  --btn-line: #5971A4;   /* 中央ラインの色 */
  --btn-text: #2F353A;    /* ボタンのテキスト色 */
  --btn-bg: #ffffff;     /* ボタンの背景色 */
  --btn-extend: 56px;     /* ボタンの外にはみ出す線の幅 */
}

/* 横並びの親コンテナ */
.preserve-bottom{
  display: flex;
  justify-content: space-between;  /* 箇条書きとボタンを両端に */
  gap: 20px;                       /* 横の隙間 */
  margin-top: clamp(12px, 2vw, 18px);
  flex-wrap: wrap;                 /* 画面幅が狭いときは縦並びに */
}

/* 箇条書き（広く取れる場合） */
.preserve-bottom .preserve-points{
  flex: 1;                         /* 可能なら広がる */
  margin: 0;
  padding-left: 1.5em;
  display: grid;
  gap: .8em;
  font-size: clamp(15px, 2vw, 18px);
}

/* ボタン（ボタンは右寄せにする場合） */
.preserve-bottom .preserve-more{
  display: flex;
  justify-content: flex-end;  /* 右寄せ */
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

/* ボタンと箇条書きを横並びにする */
.preserve-more {
  display: flex;
  justify-content: flex-end; /* ボタンを右寄せ */
  align-items: center;       /* ボタンとテキストを縦方向に中央揃え */
  margin: -50px 16px 16px 0;                /* 余白をリセット */
}

.btn-centerline {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  color: var(--btn-text);
  background: var(--btn-bg);
  border: 1px solid var(--btn-text);
  line-height: 1.5;
  text-decoration: none;
  overflow: visible;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
  font-family: "Shippori Mincho", serif;
  font-size: 18px;
  margin-top: 10px;
  position: relative;
}

/* 中央の線：ボタンのテキストの真ん中を通る線 */
.btn-centerline::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  right: -20px;
  width: 110%;
  height: 1.5px;
  background: var(--btn-line);
  transform: translateY(-50%);  /* 線を中央に調整 */
  pointer-events: none;
}

/* ボタン内のテキスト */
.btn-centerline > span {
  position: relative;
  z-index: 1;
  padding: 0 .6rem;
  background: var(--btn-bg);
  text-align: center;
}

/* ホバー時の演出（背景色と線が変わる） */
.btn-centerline:hover {
  color: #fff;
  background: var(--btn-line);
  border-color: var(--btn-line);
}

/* ホバー時：テキストが白く、背景が透明に */
.btn-centerline:hover > span {
  background: transparent;
  color: #fff;
}

.btn-centerline:hover::before {
  background: rgba(255, 255, 255, .45);  /* 透明度を調整 */
}
/* 画面幅が狭くなった場合の対応（モバイル用） */
@media (max-width: 768px) {
  .preserve-more {
    justify-content: center; /* ボタンを中央寄せ */
    margin: 0 auto;           /* 親要素の余白をリセット */
  }

  .btn-centerline {
    padding: .8rem 1.6rem;    /* ボタンのサイズ調整 */
    font-size: 16px;           /* フォントサイズ調整 */
  }
}

/* ボタンのホバー演出 */
.btn-centerline:hover {
  color: #fff;
  background: var(--btn-line);
  border-color: var(--btn-line);
}

/* 追加：ホバー時は背景色だけ透明化 */
.btn-centerline:hover>span {
  background: transparent;
  color: #fff; /* 文字は白のまま見える */
}

.btn-centerline:hover::before {
  background: rgba(255, 255, 255, .45);
}

/* 画面サイズが小さいときのレスポンシブ対応 */
@media (max-width: 768px){
  .preserve-bottom{
    flex-direction: column;
    align-items: center;  /* 中央寄せ */
  }

  /* 箇条書きが縦並びに */
  .preserve-bottom .preserve-points{
    flex: 0 0 auto;
    margin-bottom: 20px;
  }

  /* ボタンを中央寄せ */
  .preserve-bottom .preserve-more{
    justify-content: center;
  }

  /* ボタンのサイズを調整 */
  .btn-centerline{
    font-size: 16px;
    padding: .8rem 1.5rem;
  }
}


/*==================================================================================================================================

  *症例

==================================================================================================================================*/
.casehead {
    margin: auto;
  }
 .casehead h2{
  padding: 0 20px;
  margin-right: 30px;
  text-align: right;
  font-size: 2.5rem;
  border-bottom: 1px solid #2e2e2e;
 }
  .casehead h2 span{
    background: linear-gradient(transparent 70%, #edeb927d 70%);
    padding-bottom: 5px;
  }
 .dreamsec {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 12px 12px;
  background-color: #fff;   
}
.dreamsec {
     font-family: 'Noto Serif JP', serif；
}


 .rejuvenation-block {
  background: #f9f6f2;
  padding: 60px 20px;
  position: relative;
  max-width: 1400px;
  margin: 20px auto;
}

.rejuvenation-inner {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  gap: 30px;
  align-items: flex-start;
}


.rejuvenation-left {
  flex: 1 1 50%;
}

.rejuvenation-right {
  flex: 1 1 45%;
  margin: auto;
}

.rejuvenation-right img {
  width: 100%;
  border-radius: 4px;
}

.rejuvenation-number {
  font-size: 72px;
  font-weight: bold;
  color: #b59b7d;
  line-height: 1;
  margin-bottom: 16px;
  font-family: 'Noto Serif JP', serif；
}

.rejuvenation-left h3 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.rejuvenation-left .accent {
  color: #b59b7d;
  font-weight: bold;
  font-size: 26px;
}

.rejuvenation-text {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 24px;
}

.rejuvenation-box {
  display: flex;
  gap: 20px;
  align-items: center;
  border-top: 3px solid #d2ba9f;
  padding-top: 20px;
}

.before-after-img img {
  width: 120px;
  height: auto;
}

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

.rejuvenation-list li {
  font-size: 16px;
  line-height: 2;
  color: #333;
}

.rejuvenation-list .check {
  color: #b59b7d;
  font-weight: bold;
  margin-right: 8px;
}

.caption {
  font-size: 12px;
  color: #666;
  text-align: right;
  max-width: 1200px;
  margin: 10px auto 0;
}

.readmore {
  text-align: right;
  font-size: 14px;
  margin-top: 8px;
  margin-right: 20px;
  color: #444;
}

.readmore span {
  font-size: 12px;
}
/* 色 */
/* ─── 01： ─── */
.rejuvenation-block.pink01 {
  background: #f0f7ff;
}
.pink01 .rejuvenation-number,
.pink01 .accent,
.pink01 .check {
  color: #4c8ad9;
}
.pink01 .rejuvenation-box {
  border-top: 3px solid #8dc7f1;
}

/* ─── 02： ─── */
.rejuvenation-block.pink02 {
  background: #e8f0fc;
}
.pink02 .rejuvenation-number,
.pink02 .accent,
.pink02 .check {
  color: #5c7ab3;
}
.pink02 .rejuvenation-box {
  border-top: 3px solid #a4bdd7;
}

/* ─── 03： ─── */
.rejuvenation-block.pink03 {
  background: #f4f7f8;
}
.pink03 .rejuvenation-number,
.pink03 .accent,
.pink03 .check {
  color: #4e678f;
}
.pink03 .rejuvenation-box {
  border-top: 3px solid #99a4c3;
}


.twentytwenty {
  width: 100%;
  max-width: 800px;
  margin: 40px auto;
}

.twentytwenty img {
  width: 100%;
  height: auto;
  display: block;
}
/* ----------------------------------------------------
タブレット（768px～1024px）
---------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
}
/* ----------------------------------------------------
スマホ用（〜767px）
---------------------------------------------------- */
@media screen and (max-width: 768px) {
	.casehead h2 {
		padding: 0 15px;
		margin-right: 0;
		font-size: 1.2rem;
}
  .rejuvenation-block.pink02 .rejuvenation-inner {
    flex-direction: column-reverse;
  }

  .rejuvenation-block.pink02 .rejuvenation-right {
    width: 100%;
    display: block;
  }

  .rejuvenation-block.pink02 .twentytwenty {
    min-height: 200px; /* 必要に応じて調整 */
  }
  span.color {
  font-size: 40px;
  }
}
:root { --blue:#506b95; }

.case-btn{
  display:inline-block;
  padding:12px 22px;            /* 丸く見える比率 */
  background:var(--blue);
  color:#fff;
  text-decoration:none;
  border-radius:9999px;         /* ピル型（最大） */
  font-weight:700;
  line-height:1;
  transition:background-color .15s ease, transform .05s ease;
}

.case-btn:hover{ background:rgb(65, 118, 179); color: #fff;}
.case-btn:active{ transform:translateY(1px); }
.case-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(47,111,208,.28);
}

/* 幅いっぱいにしたい時だけ */
.case-btn--block{ display:block; width:100%; }

/* サイズバリエ（任意） */
.case-btn--sm{ padding:10px 18px; font-size:.95rem; }
.case-btn--lg{ padding:14px 26px; font-size:1.05rem; }

/* 枠だけ（背景なし） */
.case-btn--ghost{
  background:#fff; color:var(--blue);
  border:1px solid currentColor;
}
.case-btn--ghost:hover{ background:rgba(47,111,208,.06); }

/*==================================================================================================================================

  *診療メニュー

==================================================================================================================================*/
.clinic-menu {
  text-align: center;
  position: relative;
  margin-top: 78px;
	padding: 100px 0;
}
.headmenu {
	position: absolute;
	top: -85px;
  width: 100%;
  /* margin: 50px 0; */
}
.menu-heading {
    font-size: 3rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.2em;
    border-bottom: 1px solid rgba(83, 102, 135, .95);
    width: 80%;
    margin: 20px auto;
}

.menu-subheading {
  font-size: 1.5rem;
  color: #555;
  margin-bottom: 3em;
}
.menuwrap {
  /* display: flex;
  flex-direction: column;
  flex-wrap: wrap; */
  gap: max(.714vw, 9px) max(2.143vw, 27px);
  position: relative;
  /* height: 47.143vw; */
  /* margin-top: min(-6.429vw, -84px); */
  padding: 10vw 3.571vw 5vw;
	background: url(../images/top/menubg2.png) no-repeat left bottom;
	background-size: 100% auto;
}
.menu-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* width: max(45.357vw, 589px); */
    text-align: center;
    margin: 20px 0;
}

.topmenu-title {
  display: flex;
    align-items: center;
    justify-content: center;
    width: max(12.857vw, 167px);
    height: max(5.714vw, 74px);
    font-size: max(1.286vw, 16px);
    line-height: 1.3;
    color: #fff;
    /* background: url(../images/menulibg.png) no-repeat 0 0 / cover; */
    background: #253651;
    margin-right: 20px;
    text-align: center;
  }

.topmenu-title::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3em 0 0 1.5
}
.menu-grid {
  /* width: max(31.429vw, 408px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: max(.714vw, 9px); */
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: max(.714vw, 9px);
}
.menu-item {
    width: max(10vw, 130px);
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-size: max(1.286vw, 16px);
    height: max(5.714vw, 74px);
    line-height: 1.3;
    padding: 0;
    box-shadow: .1em .1em .3em rgba(0, 0, 0, .15);
    transition: all .3s;
}
.menu-item p {
	margin:0;
}
@media (max-width: 520px){
	.menu-heading {text-align: center;}
	.menu-subheading {font-size: 1.3rem;}
	.menu-item p {font-size: 0.8rem;}
	.menu-section {flex-direction: column;}
	.topmenu-title{width: 100%;height: 3rem;margin:10px 0}
	.menu-item {margin:auto;}
	.menuwrap {background-size: cover;}
	.clinic-menu {padding: 100px 0 0;}
}

/*==================================================================================================================================

  *歯は臓器

==================================================================================================================================*/
/* ===== tokens ===== */
:root{
  --ink:#222;
  --sub:#5f6774;
  --base:#fff;
  --glow1:#fff7e3;   /* ヒーロー上部 */
  --glow2:#ffffff00; /* ヒーロー下部フェード */
  --panel1:#fff8e7;  /* テキストパネルの淡ベージュ */
  --line:#e7dcc2;    /* 線色 */
  --accent:#e9dfb6;  /* CTA塗り */
  --bar:#d5c697;     /* カード上辺バー */
  --shadow:0 14px 28px rgba(0,0,0,.08);
}
.hazou.v2{background: url(../images/top/hahazoukibg.png) no-repeat center top;
    background-size: 100% auto;
    padding-top: 150px;font-family:"Noto Serif JP",serif;}
img.h2catch {
  position: absolute;
  max-width: 283px;
  right: 21em;
  top: -9.8em;
}
/* 共通 */
/* .container{max-width:1200px;margin:0 auto;padding:0 16px;} */
.hz-eyebrow{font-size:13px;letter-spacing:.12em;color:#8a8a8a;margin:0 0 6px;text-align: center;}
.hz-title{font-family:"Noto Serif JP",serif;line-height:1.25;text-align: center;
  font-size:5rem;margin:0;color: #4a6179;text-shadow: 3px 3px 3px #a8adb7;}
.hz-title__sub{display:block;color: #4a6179;text-shadow: 3px 3px 3px #a8adb7;}
.hazoubg {background-color: #6d8bbd3d; width: 90%;margin: auto;padding: 60px 4.4%;}
/* ===== hero：縦グラ＋上辺を斜めカット（角丸ナシ） ===== */
.hz-hero{
  position:relative;
  padding:54px 0 24px;
  /* background:linear-gradient(180deg,var(--glow1),var(--glow2)); */
  /* clip-path:polygon(0 0, 100% 0, 100% 88%, 0 100%); */
}
.hz-hero__in{position:relative;}

/* ===== mid：左パネル / 右ビジュアル ===== */
.hz-mid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;margin-top:8px;max-width:1200px;margin:0 auto;padding:0 16px;}
.hz-panel{
/*   background:linear-gradient(180deg,var(--panel1),#fff);
  border:1px solid var(--line); */
	padding:75px 30px;
/*   box-shadow:var(--shadow); */
}
.hz-h3{font-size:2.5rem;margin:0 0 8px;}
.hz-lead{color:var(--sub);line-height:1.9;margin:0;}
.hz-cta{
  display:inline-flex;gap:10px;align-items:center;margin-top:16px;
  padding:10px 18px;border:1px solid var(--line);background:#B8AA8F;color:#ffffff;
  text-decoration:none;transition:transform .08s ease, box-shadow .12s ease; border-radius:0;
}
.hz-cta:hover{color:#fff;transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.12);}
.hz-cta{
	display:inline-flex;
	gap:10px;
	align-items:center;
	margin-top:16px;
	padding:12px 22px;
	border:1px solid var(--line);
	background:#B8AA8F;
	color:#ffffff;
	text-decoration:none;
	border-radius:40px;
  
  /* 大きくゆっくり、余韻のあるアニメーション */
  transition:
    transform .6s cubic-bezier(.25,1,.30,1),
    box-shadow .8s cubic-bezier(.25,1,.30,1);
}

.hz-cta:hover{
  transform:translateY(-6px) scale(1.04);
  box-shadow:
    0 18px 45px rgba(0,0,0,.08),
    0 8px 22px rgba(0,0,0,.05);
}

/* 右ビジュアル：直線のみ＋ひし形バッジ（角丸ゼロ） */
.hz-visual{position:relative;border:1px solid var(--line);box-shadow:var(--shadow);margin:8px 0 0;}
.hz-visual img{display:block;width:100%;height:auto;object-fit:cover;}

.hz-badge .b-sub{font-size:11px;color:#8b6f4a;letter-spacing:.1em;margin-top:6px;}
.hz-badge .b-main{font-size:15px;line-height:1.25;color:#6b4b2b;font-weight:700}

/* ===== 下段カード：直線・バー・シャドウ ===== */
/* 下段カード：画像＋ベージュ下地の2段構成 */
.hz-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 40px auto 0;
  /* max-width:1300px; */
  padding:0 16px;
  width: 116%;
  margin-left: -8%;
}

.hz-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
/* .hz-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
} */

/* 画像エリア */
.hz-card__img {
  position: relative;
  overflow: hidden;
  height: 200px;
}
.hz-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
/* .hz-card:hover .hz-card__img img {
  transform: scale(1.05);
} */

/* テキストエリア */
.hz-card__body {
  /* background: #f6e2a7; */
  text-align: center;
  padding: 24px 12px 26px;
  border-top: none;
  /* min-height: 120px; */
  height: 50%;
	background: linear-gradient(338deg, #B8AA8F, #fffef7);
}
.hz-card__body h4 {
  /* font-weight: 600; */
  font-size: 1.3rem;
  color: #2a2a2a;
  margin: 0 0 6px;
  letter-spacing: .02em;
}
.hz-card__body p {
	color: #363636;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
}


/* レスポンシブ */
@media (max-width: 980px) {
  .hz-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .hz-card__img { height: 180px; }
}
@media (max-width: 540px) {
  .hz-cards { grid-template-columns: 1fr 1fr; }
  .hz-card__img { height: 160px; }
}


@media (max-width:980px){
  .hz-mid{grid-template-columns:1fr;}
  .hz-visual{order:-1;}
}
@media (max-width:760px){
  .hz-cards{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:420px){
  .hz-cards{grid-template-columns: 1fr 1fr;}
  .hz-badge{width:112px;height:112px;right:10px;bottom:10px;}
}

/* アニメの控えめ化（ユーザー設定に配慮） */
@media (prefers-reduced-motion:reduce){
  .hz-cta{transition:none}
}
/* =========================
   Responsive overrides ONLY
   (PCは現状維持)
   ========================= */

/* タブレット以下：タイポ・余白の縮小、h2キャッチの追従 */
@media (max-width: 980px){
  .hazou.v2{ padding-top: 110px; }

  .hz-title{
    font-size: clamp(28px, 4.6vw, 40px);
    line-height: 1.25;
    text-align: center;
  }

  /* h2右の装飾画像：はみ出し抑制＆位置調整 */
  img.h2catch{
    max-width: 200px;
    right: 4%;
    top: -4.2em;
  }

  /* 背景の半透明ボックスは横幅を100%化（はみ出し対策） */
  .hazoubg{
    width: 100%;
    margin: 0;
    padding: 40px 3.5%;
  }

  /* すでに1カラム化しているが内側パディングを軽く */
  .hz-mid{
    gap: 20px;
    padding: 0 12px;
  }

  .hz-panel{
    padding: 28px 20px;
  }
  .hz-h3{ color:#363636;font-size: clamp(20px, 2.6vw, 24px); }
  .hz-lead{ color:#363636;font-size: 15px; line-height: 1.85; }

  /* CTAは中央寄せ＆タップしやすく */
  .hz-cta{
    width: 100%;
    justify-content: center;
    padding: 12px 18px;
  }

  /* 右ビジュアルの余白を調整 */
  .hz-visual{
    margin: 8px 0 0;
  }

  /* カード：横はみ出し解消（PCの幅ハックをモバイルで無効） */
  .hz-cards{
    width: 100%;
    margin-left: 0;
    gap: 16px;
    padding: 0 12px;
    grid-template-columns: repeat(2, 1fr);
  }

  .hz-card__img{ height: 180px; }

  /* 固定高さはモバイルで外す（文量差で崩れないように） */
  .hz-card__body{
    height: auto;
    padding: 18px 12px 20px;
  }
  .hz-card__body h4{ font-size: 1.15rem; }
  .hz-card__body p{ font-size: 14px; line-height: 1.7; }
}

/* スマホ：1カラム化、装飾画像は小型 or 非表示、余白さらに圧縮 */
@media (max-width: 540px){
  .hazou.v2{ padding-top: 90px; }

  .hz-title{
    font-size: clamp(22px, 6.4vw, 30px);
  }

  img.h2catch{
    max-width: 150px;
    right: 2%;
    top: -7.2em; 
  }

  /* レイアウト */
  .hz-mid{ padding: 0 10px; gap: 16px; }
  .hz-panel{ padding: 22px 16px; }
  .hz-lead{ font-size: 14px; line-height: 1.8; }
	.hz-card {
		flex-direction: row;
	}
  /* カードは1列 */
  .hz-cards{
	  grid-template-columns: 1fr;
	  gap: 5px;
	  padding: 0;
  }
  .hz-card__img{ height: 160px; }
  .hz-card__body h4{ font-size: 0.9rem; }
  .hz-card__body p{ font-size: 0.8rem; }

  /* CTA：親指タップ優先 */
  .hz-cta{
    padding: 14px 16px;
    letter-spacing: .02em;
  }
	.hz-card__img {
		flex:2;
	}
	.hz-card__body {
		flex: 3;
	}
}

/* 極小端末：タイトルの折返し安定化＆装飾を抑制 */
@media (max-width: 380px){
  .hz-title{ font-size: 2rem; }
  .hz-card__img{ height: 140px; }
}
.zyunbi p {
    font-size: 2rem;
    text-align: center;
}