/*
Theme Name: NAKANISHI Child
Theme URI: https://tcd-theme.com/tcd110/
Template: nakanishi
Author: TCD
Author URI: https://tcd-theme.com/
Version: 1.5.1755576119
Updated: 2025-08-19 13:01:59

*/

/*全体*/
body {
	font-family: -apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic","Meiryo",sans-serif;
}
.cb_free_space {
	width: 1200px;
	/*padding: 150px 0 !important;*/
}

h2, h3, h4, h5 {
	letter-spacing: 0.08em;
}

#cb_content_1 h2 ,
#cb_content_2 h2 ,
#cb_content_3 h2 ,
#cb_content_4 h2 ,
#cb_content_5 h2 ,
#cb_content_6 h2 ,
#cb_content_7 h2 {
	font-weight: bold !important;	
}

body.mobile_device h1, body.mobile_device h2, body.mobile_device h3, body.mobile_device h4, body.mobile_device h5, body.mobile_device h6 {
	font-weight: 600 !important;
}

#global_menu > ul > li {
	font-size: 12px;
	margin: 0 0 0 25px;
}

.sp_ap {
	display: none;
}


@media (max-width: 768px) {
	.sp_ap {
		display: block;
	}
	.sp_dis {
		display: none;
	}
}


/*googlemap埋め込み*/
/* マップを包むカード風の枠 */
.map-card {
width: clamp(280px, 90vw, 850px); /* スマホ〜PCで伸縮 */
aspect-ratio: 4 / 3; /* 8:6 ≒ 4:3 の比率を維持 */
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,.08);
overflow: hidden;
background: #fff;
position: relative;
	margin: auto;
}


/* 古いブラウザ向けのフォールバック（aspect-ratio未対応時） */
.map-card::before {
content: "";
display: block;
padding-top: calc(100% * 3 / 4); /* 高さ=幅×(3/4) → 4:3比率 */
}
.map-inner {
position: absolute;
inset: 0;
}


.map-iframe, .map-canvas {
width: 100%;
height: 100%;
border: 0;
display: block;
}


/* 極端に小さな画面での余白調整 */
@media (max-width: 360px) {
.map-card { border-radius: 12px; }
}
/*googlemap埋め込み 終わり*/


@media (hover: hover) {
    .post_content a:hover {
        text-decoration: none !important;
    }
}

@media (max-width:1024px){
h2, h3, h4, h5 {
	letter-spacing: 0.05em;
}
}


/*共通ボタン*//* ===== 特大エントリーボタン ===== */
/* ===== 特大エントリーボタン ===== */
.nk-btn--entry {
  display: flex;
  flex-direction: column;        
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 150px auto 0;

  background: #FFC627;
  color: #fff !important;
  font-weight: 600;               /* デフォルトを600に */
  text-align: center;
  text-decoration: none;
  border-radius: 9999px;         
  padding: 40px 80px;
  box-shadow: 0 0 50px rgba(255, 198, 39, 0.65);
  transition: all 0.35s ease;
}

.nk-btn--entry:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 0 60px rgba(255, 198, 39, 0.8);
  background: #f4e100;
}

.nk-btn--entry:active {
  transform: scale(0.98);
  box-shadow: 0 0 40px rgba(255, 198, 39, 0.6);
}

.nk-btn--entry .main-text {
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.2;
  font-weight: 800; /* strongの700より少し細め */
}

.nk-btn--entry .sub-text {
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 500;
  margin-top: 6px;
}


/*共通ボタン 終わり*/




/*トップページ*/
:is(.design_header, .tcdce-body .design_header) .desc {
	font-size: 16px;
}
/*院長あいさつ*/
/* ====== incho-section.css ====== */
#incho-section.incho {
  --c-text:#22313f; --c-muted:#5a6b7a; --c-accent:#0a5a74; --c-bg:#fff; --c-pill:#f9eb50;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic","Meiryo",sans-serif;
  color:var(--c-text); background:var(--c-bg);
}
#incho-section .incho__inner {
  max-width:var(--max);
  margin:0 auto;
  /*padding:clamp(28px,4vw,56px) 16px;*/
}
#incho-section p {
  line-height:1.9;
  font-size:clamp(14px,1.7vw,16.5px);
  color:var(--c-muted);
}
#incho-section .sp{display:none;}
#incho-section .incho__nowrap{white-space:nowrap;}
#incho-section .incho__eyebrow {
  font-weight:700;letter-spacing:.08em;font-size:clamp(16px,2vw,20px);color:var(--c-accent);margin:0 0 10px;
}
#incho-section .incho__title {
	font-weight:800 !important;
	font-size:clamp(24px,3.2vw,34px);
	line-height:2;
	margin:0 0 22px;
	color:#1e2a36;
	text-align: left;
}
#incho-section .incho__lead p + p{margin-top:1em;}

/* === ヒーロー === */
#incho-section .incho__hero{position:relative;}
#incho-section .incho__hero-figure{margin:0;position:relative;}
#incho-section .incho__hero-figure img{
  width:100%;
  border-radius:18px;
  /*box-shadow:0 10px 30px rgba(30,42,54,.12);*/
}
#incho-section .incho__badge{
  position: absolute;
    top: 230px;
    right: -50px;
    width: clamp(120px, 26vw, 210px);
    aspect-ratio: 1 / 1;
    background: var(--c-pill);
    border-radius: 999px;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    transform: rotate(8deg);
    z-index: 3;
}
#incho-section .incho__badge span{
  font-weight: 800;
    font-size: clamp(14px, 1.6vw, 22px);
    line-height: 1.5;
    color: #1c1c1c;
    text-align: center;
}

/* === CTA === */
#incho-section .incho__cta{position:relative;margin-top:clamp(32px,5vw,56px);}
#incho-section .incho__cta-figure{margin:0;position:relative;}
#incho-section .incho__cta-figure img{
  width:100%;
  border-radius:18px;
  /*box-shadow:0 10px 30px rgba(30,42,54,.12);*/
}
#incho-section .incho__cta-title{
  font-weight:800 !important;
  font-size:clamp(24px,3.2vw,34px);
  line-height:2;
  margin:0 0 14px;
  color:#1e2a36;
	text-align: left;
}
#incho-section .incho__body p + p{margin-top:.9em;}
#incho-section .incho__note{font-weight:600;color:#2a3b4a;}

/* === プロフィール === */
#incho-section .incho__profile{
  margin-top:clamp(20px,3.5vw,36px);
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:flex-start;
  position: relative; /* 疑似要素の基準にする */
  padding: clamp(50px, 3.5vw, 40px) 0; /* 背景が見える余白（上下調整用） */
	background-color:#f5f7f8;
}

#incho-section .incho__profile::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;              /* 画面幅いっぱい */
  background: #f5f7f8;       /* ← 背景色（変更可） */
  z-index: -1;               /* 背景として背面に敷く */
}
#incho-section .incho__sign{flex:1;min-width:220px;text-align:left;}
#incho-section .incho__clinic{font-size:22px;color:var(--c-accent);margin:0 0 4px;font-weight:700;}
#incho-section .incho__name{font-size:clamp(32px,3vw,40px);font-weight:800;letter-spacing:.06em;margin:0;}
#incho-section .incho__name-roma{margin:2px 0 0;font-size:18px;letter-spacing:.12em;text-transform:capitalize;}
#incho-section .incho__edu{flex:1;min-width:220px;text-align:right; margin: 40px 0 40px;}
#incho-section .incho__edu p{margin:0 0 6px;font-size:18px;color:#6b7b88;}

/* === PC時の重ね表示 === */
@media (min-width:1025px){
  #incho-section .incho__hero-figure{position:absolute;right:0;top:0;width:70%;z-index:1;}
  #incho-section .incho__cta-figure{position:absolute;right:0;top:-200px;width:70%;z-index:1;}
  #incho-section .incho__lead,
  #incho-section .incho__body,
  #incho-section .incho__title,
  #incho-section .incho__cta-title{
    position:relative;z-index:2;max-width:750px;/*background:rgba(255,255,255,.9);*/padding:1% 0;
  }
}

/* === テキスト 幅調整 ===*/
#incho-section .incho__lead p,
#incho-section .incho__body p {
	width: 85%;
	font-size: 18px;
	line-height: 2.5em;
	color: #000;
}

/* === スマホ === */
@media (max-width:1024px){
  #incho-section .incho__hero-figure,
  #incho-section .incho__cta-figure{
    position:static;width:100%;margin:12px 0;z-index:auto;pointer-events:auto;
  }
  #incho-section .incho__lead,
  #incho-section .incho__body,
  #incho-section .incho__title,
  #incho-section .incho__cta-title{background:none;padding:3% 0;
	}
	#incho-section .incho__edu p {
		font-size: 14px;
	}
	#incho-section .incho__clinic {
		font-size: 20px;
	}
	#incho-section .incho__name-roma {
		font-size: 15px;
	}
  /* バッジを画像左上に（回転は維持） */
  #incho-section .incho__badge{
    top:310px; left:-10px; right:auto;
    transform:rotate(-8deg);
  }

  /* プロフィール縦積み */
  #incho-section .incho__profile{flex-direction:column;text-align:left;}
  #incho-section .incho__edu{text-align:left;}
}
@media (max-width:860px){#incho-section .sp{display:inline;}}
@media (max-width:520px){
  /*#incho-section .incho__inner{padding:24px 12px;}*/
  #incho-section .incho__badge{width:150px;}
  #incho-section .incho__title{font-size:22px;}
	#incho-section .incho__lead p, #incho-section .incho__body p{
		width: 100%;
	}
	#incho-section .incho__lead p,
	#incho-section .incho__body p {
		font-size: 1em;
	}
	#incho-section .incho__edu {
		margin: 20px 0 0;
	}
}
/*院長あいさつ 終わり*/





/*医院について*/
#about-clinic-section.clinic-about {
  --c-text:#22313f;
  --c-muted:#5a6b7a;
  --c-bg:#ffffff;
  --max:1100px;

  color:var(--c-text);
  background:var(--c-bg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic","Meiryo",sans-serif;
}

/* コンテナ */
#about-clinic-section .clinic-about__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(28px,4vw,56px) 16px 0;
}

/* 画像共通 */
#about-clinic-section .clinic-about__figure{
  margin:0 auto clamp(18px,3vw,28px);
  border-radius:20px;
  overflow:hidden;
}
#about-clinic-section .clinic-about__figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

/* 1枚目と2枚目の間のリード文 */
#about-clinic-section .clinic-about__lead{
  text-align:center;
  font-size:clamp(15px,1.8vw,25px);
  line-height:2;
  color:var(--c-text);
  font-weight:700;
  letter-spacing:.02em;
  margin:clamp(18px,6vw,80px) auto clamp(22px,6vw,80px);
  max-width:900px;
}

/* 2枚目の画像は少し上下に余白を広めにする */
#about-clinic-section .clinic-about__figure--secondary{
  margin-top:clamp(10px,2vw,18px);
  margin-bottom:clamp(18px,3.5vw,28px);
}

/* 下段テキスト */
#about-clinic-section .clinic-about__desc{
  max-width:900px;
  margin:5% auto;
  text-align:center;
  color:var(--c-muted);
  line-height:2;
  font-size:clamp(14px,1.7vw,18px);
	color: #000;
}
#about-clinic-section .clinic-about__desc p{ margin:.4em 0; }

/* レスポンシブ微調整 */
@media (max-width:720px){
  #about-clinic-section .clinic-about__figure{ border-radius:16px; }
}
@media (max-width:520px){
  #about-clinic-section .clinic-about__inner{ padding: 0; }
  #about-clinic-section .clinic-about__figure{ border-radius:14px; }
}
#topaccess_about-clinic {
	padding-top: 15%;
}
/*医院について 終わり*/





/*院長紹介ムービー*/
/* ====== movie-section.css ====== */
:root {
  --nk-color-text: #22313f;
  --nk-color-bg: #ffffff;

  /* ボタン用カラー（共通で使い回せる） */
  --nk-btn-bg: #3f5c68;
  --nk-btn-bg-hover: #2f4b56;
  --nk-btn-fg: #ffffff;
  --nk-btn-shadow: 0 10px 24px rgba(48, 72, 82, 0.24);
}

/* ===== セクション ===== */
#movie-section.nk-movie {
  color: var(--nk-color-text);
  background: var(--nk-color-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
               "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
}
#movie-section .nk-movie__inner {
  /*max-width: 980px;*/
  margin: 0 auto;
  padding: clamp(28px, 5vw, 60px) 16px;
  text-align: center;
}

/* ===== YouTubeプレーヤー ===== */
#movie-section .nk-movie__player {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;        /* 比率固定 */
  border-radius: 18px;
  overflow: hidden;
  background: #eef3f6;
}
#movie-section .nk-movie__player iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ===== アクションボタンエリア ===== */
/*#movie-section .nk-movie__actions {
  margin-top: clamp(20px, 10vw, 150px);
}*/

/* ===== 汎用ボタン（どこでも中央配置になるように修正） ===== */
.nk-btn {
  --_bg: var(--nk-btn-bg, #3f5c68);
  --_bg-hover: var(--nk-btn-bg-hover, #2f4b56);
  --_fg: var(--nk-btn-fg, #ffffff);

  display: flex;                 /* 中身を中央揃え */
  align-items: center;
  justify-content: center;
  gap: .5em;

  text-decoration: none;
  color: var(--_fg);
  background: var(--_bg);
  border: 0;
  cursor: pointer;

  /* 常に中央寄せ */
  margin-left: auto;
  margin-right: auto;

  transition: 
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background-color 0.5s ease,
    opacity 0.3s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  will-change: transform, box-shadow, background-color;
}

/* pill型ボタン */
.nk-btn--pill {
  border-radius: 9999px;
  padding: 14px 28px;
  box-shadow: var(--nk-btn-shadow);
}

/* サイズバリエーション */
.nk-btn--lg   { font-size: clamp(16px, 3vw, 26px); padding: 50px 80px; color: #fff !important; font-weight: 600; width: 30%; margin-top: clamp(20px, 10vw, 150px); line-height: 1.3em;}
.nk-btn--md   { font-size: 14px; padding: 12px 24px; }
.nk-btn--sm   { font-size: 13px; padding: 9px 18px; }

/* ===== hoverアニメーション ===== */
.nk-btn:hover {
  background: var(--_bg-hover);
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 28px rgba(48, 72, 82, 0.28);
	text-decoration: none !important;
}

/* active（クリック押下時） */
.nk-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 6px 16px rgba(48,72,82,.22);
}

/* フォーカス可視 */
.nk-btn:focus-visible {
  outline: 2px solid #8fb7c8;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(143,183,200,.25), 0 10px 24px rgba(48, 72, 82, 0.24);
}

/* 無効 */
.nk-btn[disabled],
.nk-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ===== レスポンシブ ===== */
@media (max-width: 1030px) {
  .nk-btn--lg { padding: 40px 60px; width: 50%;}
}

@media (max-width: 520px) {
  #movie-section .nk-movie__inner { padding: 24px 12px; }
  #movie-section .nk-movie__player { border-radius: 14px; }
  .nk-btn--lg { padding: 40px 60px; width: 85%;}
}
/*院長紹介ムービー 終わり*/






/*こんな歯並び、一緒に治していきましょう*/
.cb_service_list .service_list .image_wrap {
	margin-top: 8%;
}
.cb_service_list .service_list .title {
	font-weight: bold;
	font-size: 22px;
	padding: 0 30px;
}
.cb_service_list .service_list .desc {
	font-size: 13px;
	text-align: center;
}
.cb_service_list{
	padding: 10% 0;
	width: 90%;
	margin: auto;
	border-radius: 80px;
}
section#cb_content_4 a {
  pointer-events: none;
  text-decoration: none;
}

#case_chosei {
	margin-bottom: 15%;
}

@media (max-width: 860px){
	.cb_service_list{
		padding:15% 5% !important;
		border-radius: 30px;
}
	.cb_service_list .service_list .title {
		font-weight: bold !important;
	}
}
/*こんな歯並び、一緒に治していきましょう 終わり*/







/*診療メニュー*/
/* ====== menu-section.css ====== */
#menu-section.nk-menu{
  --c-text:#22313f;
  --c-muted:#5a6b7a;
  --c-bg:#ffffff;
  --card-bg:#f5f7f8;
  --max:1100px;

  color:var(--c-text);
  background:var(--c-bg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic","Meiryo",sans-serif;
}
#menu-section .nk-menu__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(28px,5vw,60px) 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px,2.8vw,28px);
}
#menu-section .nk-menu__item{
  background: var(--card-bg);
  border-radius: 22px;
  padding: clamp(25px,3.4vw,25px);
  text-align: center; /* ← カード全体を中央揃え */
}
#menu-section .nk-menu__thumb{
  margin:0 0 clamp(50px,3vw,35px);
  border-radius: 18px;
  overflow: hidden;
}
#menu-section .nk-menu__thumb img{
  display:block;
  width:100%;
  height:auto;
  object-fit: cover;
}
#menu-section .nk-menu__text{
  color:#2F35B2;
  line-height: 2;
  font-size: clamp(14px,1.7vw,14px);
  margin: 0 0 clamp(20px,3vw,35px);
	font-weight: 600;
}
#menu-section .nk-menu__action{
  margin: 0;
  text-align: center; /* ボタン中央揃え */
}

/* スマホ：縦並び */
@media (max-width: 860px){
  #menu-section .nk-menu__inner{ grid-template-columns: 1fr; }
}

/* ====== セクション専用ボタン ====== */
.menu-btn {
  display:inline-block;
  font-weight:700;
  font-size:clamp(14px,1.6vw,16px);
  padding:4% 18%;
  border-radius:9999px;
  color:#2F35B2 !important;
  text-align:center;
  text-decoration:none;
  transition: all .35s ease;
  box-shadow:0 8px 18px rgba(0,0,0,.15);
}

/* カラーバリエーション */
.menu-btn--teal {
  background:#fff;
}
.menu-btn--teal:hover {
  background:#e7e8f1;
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(46,127,165,.3);
}
.menu-btn--indigo {
  background:#fff;
}
.menu-btn--indigo:hover {
  background:#e7e8f1;
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(47,57,200,.3);
}

/* active */
.menu-btn:active {
  transform:translateY(0);
  box-shadow:0 6px 12px rgba(0,0,0,.2);
}

@media (max-width: 860px){
	.menu-btn {
		padding: 6% 28%;
	}
}
/*診療メニュー 終わり*/





/*矯正治療の流れ*/
#treatment-flow {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    background: transparent;
}

.flow-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    position: relative;
}

.flow-step {
    background: white;
    border-radius: 20px;
    padding: 10% 12%;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.flow-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #4fd1c7, #63b3ed);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(79, 209, 199, 0.3);
}

.step-icon {
    width: 80px;
    height: 80px;
    margin: 25% auto 0;
    background: linear-gradient(135deg, #e6fffa, #b2f5ea);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #2c5282;
    transition: all 0.3s ease;
}

.flow-step:hover .step-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, #4fd1c7, #63b3ed);
    color: white;
}

.step-title {
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    color: #2d3748;
    margin: 2em 0 1.3em 0 !important;
}

.step-description {
    color: #4a5568;
    line-height: 2.2em !important;
    text-align: left;
    margin-bottom: 0 !important;
}

/* 矢印のスタイル（デスクトップ用） */
@media (min-width: 1061px) {
    .flow-container {
        grid-template-columns: repeat(4, 1fr);
    }

    .flow-step:not(:last-child)::after {
        content: '→';
        position: absolute;
        top: 50%;
        right: -37px;
        transform: translateY(-50%);
        font-size: 2rem;
        color: #4fd1c7;
        font-weight: bold;
        z-index: 10;
    }
}

/* タブレット用 */
@media (max-width: 1060px) and (min-width: 768px) {
    .flow-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 60px 40px;
    }

    /* 1→2への右矢印 */
    .flow-step:nth-child(1)::after {
        content: '→';
        position: absolute;
        top: 50%;
        right: -36px;
        transform: translateY(-50%);
        font-size: 2rem;
        color: #4fd1c7;
        font-weight: bold;
        z-index: 10;
    }

    /* 3→4への右矢印 */
    .flow-step:nth-child(3)::after {
        content: '→';
        position: absolute;
        top: 50%;
        right: -36px;
        transform: translateY(-50%);
        font-size: 2rem;
        color: #4fd1c7;
        font-weight: bold;
        z-index: 10;
    }

    /* 2→3への矢印（中央配置） */
    .flow-container::after {
        content: '→';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(135deg);
        font-size: 2rem;
        color: #4fd1c7;
        font-weight: bold;
        z-index: 10;
    }
}

/* スマートフォン用 */
@media (max-width: 767px) {
    .flow-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .flow-step:not(:last-child)::after {
        content: '↓';
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 2rem;
        color: #4fd1c7;
        font-weight: bold;
        z-index: 10;
    }

    .flow-step {
        padding: 30px 25px;
    }
}

/* アニメーション */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.flow-step {
    animation: fadeInUp 0.6s ease forwards;
}

.flow-step:nth-child(1) { animation-delay: 0.1s; }
.flow-step:nth-child(2) { animation-delay: 0.2s; }
.flow-step:nth-child(3) { animation-delay: 0.3s; }
.flow-step:nth-child(4) { animation-delay: 0.4s; }
/*矯正治療の流れ 終わり*/



/* よくある質問セクション（トップページ用） */
#top-faq-section {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    background: transparent;
}

#top-faq-section .faq-title {
    text-align: center;
    margin-bottom: 60px;
}

#top-faq-section .faq-title h2 {
    font-size: 2.5rem !important;
    font-weight: 600 !important;
    color: #2c5282;
    margin-bottom: 10px !important;
    position: relative;
    display: inline-block;
}

#top-faq-section .faq-title h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #4fd1c7, #63b3ed);
    border-radius: 2px;
}

#top-faq-section .faq-container {
    display: grid;
    gap: 30px;
}

#top-faq-section .faq-item {
    background: white;
    border-radius: 20px;
    padding: 60px 45px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
}

#top-faq-section .faq-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

#top-faq-section .faq-question {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    color: #2d3748;
    margin-bottom: 50px !important;
    line-height: 1.5 !important;
    position: relative;
    padding-left: 70px !important;
    padding-top: 10px !important;
}

#top-faq-section .faq-question::before {
    content: 'Q';
    position: absolute;
    left: 0;
    top: 0;
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #4fd1c7, #63b3ed);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
}

#top-faq-section .faq-answer {
    color: #4a5568;
    line-height: 2.2em !important;
    margin-bottom: 0 !important;
    padding-left: 70px;
    position: relative;
}

#top-faq-section .faq-answer::before {
    content: 'A';
    position: absolute;
    left: 0;
    top: 0;
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #e6fffa, #b2f5ea);
    color: #2c5282;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    margin-top: 0.2em;
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
    #top-faq-section {
        padding: 60px 15px;
    }

    #top-faq-section .faq-title h2 {
        font-size: 2rem !important;
    }

    #top-faq-section .faq-item {
        padding: 30px 25px;
    }

    #top-faq-section .faq-question {
        font-size: 1.2rem !important;
        padding-left: 60px !important;
        padding-top: 0 !important;
        margin-bottom: 20px !important;
    }

    #top-faq-section .faq-answer {
        padding-left: 65px;
    }

    #top-faq-section .faq-question::before,
    #top-faq-section .faq-answer::before {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
}

/* アニメーション */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#top-faq-section .faq-item {
    animation: fadeInUp 0.6s ease forwards;
}

#top-faq-section .faq-item:nth-child(1) { animation-delay: 0.1s; }
#top-faq-section .faq-item:nth-child(2) { animation-delay: 0.2s; }
#top-faq-section .faq-item:nth-child(3) { animation-delay: 0.3s; }

/* よくある質問セクション 終わり */



/*トップページ 終わり*/




.nk-btn--gr {
    font-size: clamp(16px, 3vw, 26px);
    padding: 50px 80px;
    color: #fff !important;
    font-weight: 600;
    width: 50%;
    margin-top: clamp(20px, 3vw, 150px);
	background-color: green;
}

.nk-btn--gr:hover {
	background-color: #096b09;
}





/*無料個別相談ページ*/
#page_headline {
	background: none !important;
	color: #3a5664;
	margin: 4em 0 1em;
	font-weight: bold !important;
	font-size: 4em !important;
}

.page-id-45 h2,
.page-id-43 h2 {
	font-size: 2.5em !important;
	font-weight: bold !important;
	color: #3a5664;
	margin: 5% 0 !important;
}

#consultation_page_top,
#contact_page_top {
	text-align: center;
}

#contact_page_top #consultation_topp,
#consultation_page_top #consultation_topp {
	font-size: 1.5em;
}

#consultation_page_top_cont {
	background-color: #f5f7f8;
	padding: 8%;
    border-radius: 50px;
}

#consultation_page_top_int {
	margin: 0 0 20%;
}

#consultation_page_top_int img {
	border-radius: 30px;
}

#consultation_page_top_int_flex {
	display: flex;
	gap: 2%;
	margin: 2% 0 10%;
}

.consultation_p_app {
	background: white;
    border-radius: 20px;
    padding: 60px 45px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    padding: 5%;
	margin: 10% auto;
}

.consultation_p_app #app_tel {
	font-size: 4em;
	font-weight: bold !important;
	color: #202d34;
	margin: 0 0 0.5em 0;
}

.consultation_p_app #line_qr {
	width: 30%;
	margin: auto;
}

.consultation_p_app .wpcf7 p {
	margin: 0;
}

@media (max-width: 767px) {
.page-id-45 h2,
	#consultation_page_top h2,
	#consultation_page .consultation_p_app h2 {
		font-size: 1.8em !important;
		font-weight: bold !important;
	}
	#page_headline {
		font-size: 3em !important;
		font-weight: bold !important;
		margin: 3em 0 1em;
	}
	#page_headline span {
		font-weight: bold;
	}
	.consultation_p_app #app_tel {
		font-size: 3em;
	}
	.consultation_p_app #line_qr {
		width: 60%;
	}
	.nk-btn--gr {
		width: 70%;
		padding: 30px 0;
	}
	/*.wpcf7 select, .wpcf7 input[type=checkbox], .wpcf7 input[type=radio] {
		max-width: 30%;
	}*/
	.wpcf7 input[type=radio] {
		padding: 10px !important;
	}
	#consultation_page_top_int img {
		border-radius: 10px;
	}
}


/* --------------------------------------------------
コンタクトフォームすべて
--------------------------------------------------*/
.wpcf7 {
	border: none !important;
	background: none !important;
}

.post_content .table-contactform7 th ,
.post_content .table-contactform7 td {
	background: none !important;
	border: none !important;
	text-align: left;
	display: block !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.post_content .table-contactform7 th {
	padding-top: 30px !important;
	font-family: "游ゴシック","Yu Gothic","游ゴシック体","YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}

.post_content .table-contactform7 td {
	padding-top: 0 !important;
	font-family: "游ゴシック","Yu Gothic","游ゴシック体","YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}

.wpcf7 input, .wpcf7 textarea {
	background: #ffffff94 !important;
	width: 100%;
	border-radius: 10px;
	padding: 25px !important;
	background-color: #fff !important;
	font-family: "游ゴシック","Yu Gothic","游ゴシック体","YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}

.post_content table {
	border: none !important;
}

.post_content .table-contactform7 th p .required-contactform7 {
	color: #E60039;
    font-size: 0.75em;
    vertical-align: 0.8px;
    margin-right: 10px;
}

.post_content .table-contactform7 th p .optional-contactform7 {
	color: #606ed8;
    font-size: 0.75em;
    vertical-align: 0.8px;
    margin-right: 10px;
}

.post_content .table-contactform7 th p .title-contactform7 {
	font-size: 0.9em;
}

.wpcf7 input.btn-success {
	background: #3f5c68 !important;
}

.wpcf7 .wpcf7-submit {
	height: 80px !important;
}

.wpcf7 .wpcf7-submit:hover, .wpcf7 .wpcf7-previous:hover {
	background-color: var(--main_color_light) !important;
}

.wpcf7-file {
	font-size: 0.8em;
}

/*.wpcf7-turnstile {
	width: 50%;
	margin-left: 50%;
}

.wpcf7-turnstile div {
	width: 100%;
}*/

.wpcf7 select {
	padding: 20px !important;
    border-radius: 10px;
}

#attention_cs {
	/*border: 3px solid #ff9eb6;*/
	background: #ff9eb642;
	border-radius: 10px;
	padding: 5%;
	margin-bottom: 5%;
	text-align: center;
}



/*PCサイドリンクボタン調整*/
#side_icon_button {
z-index: 9999;
}

#side_icon_button .label {
  writing-mode: vertical-rl;   /* 縦書き */
  text-orientation: upright;   /* 文字を直立 */
  margin: 0 auto;              /* ブロックを中央に配置 */
  width: fit-content;          /* コンテンツ幅に合わせる */
}

#side_icon_button a {
height: 190px;
}


/*フッターカレンダー部*/

.footer_calender {
font-size: 0.85em;
line-height: 1.5;
}




/*診療カレンダー*/
.wpsbc-calendar {
max-width: 100% !important;
}

.wpsbc-select-container select {
height: 50px !important;
text-align: center !important;
font-size: 1.5em !important;
}



@media (min-width: 1024px) {
  .wpsbc-date-inner {
    height: 65px !important;
    line-height: 65px !important;
  }
}

@media (max-width: 1023px) {
  .wpsbc-date-inner {
    height: auto !important;
    line-height: normal !important;
    aspect-ratio: 1 / 1; /* 正方形維持（対応ブラウザなら） */
  }
}

.wpsbc-date-number {
  display: flex !important;
  align-items: center !important;   /* 縦中央 */
  justify-content: center !important; /* 横中央 */
}




.schedule-legend {
margin: 20px 0 30px;
}

:root{
  --gap: 24px;                     /* ボックス間の余白 */
  --h: clamp(96px, 12vw, 180px);   /* ボックスの高さ（可変） */

  --c-open:  #ddffcc;   /* 診療日（薄いグリーン） */
  --c-pm:    #fee2a0;   /* 午後のみ（薄いイエロー） */
  --c-close: #ffc0bd;   /* 休診日（薄いピンク） */
}

.legend-row{
  display: flex;
  gap: var(--gap);
  width: 100%;
  margin: 30px 0px;          /* 外側余白リセット */
  padding: 0;         /* 外側余白リセット */
}

.legend-card{
  flex: 1 1 0;
  display: grid;
  place-items: center;
  /*font-size: clamp(14px, 1.8vw, 20px);*/
  border-radius: 6px;

  padding: 16px 0;  /* 上下に余白追加 */
}

.legend-open  { background: var(--c-open); }
.legend-pmonly{ background: var(--c-pm); }
.legend-closed{ background: var(--c-close); }

@media (max-width: 700px){
  .legend-row{ flex-direction: column; }
  .legend-card{ padding: 20px 0; } /* スマホはさらに余白を大きく */
}



/*フッター*/

#footer #footer_info .nk-btn--entry {
	box-shadow: none !important;
	text-decoration: none !important;
	margin: 0 !important;
}
@media (max-width: 700px){
#footer {
	text-align: center;
}
#footer #footer_info .nk-btn--entry {
    margin: 0px auto 50px !important;
}
}
/*フッター 終わり*/






/*よくある質問*/

.page-id-41 .nk-btn--entry {
	margin: 70px auto 150px !important;
}



/*フッタープライバシーポリシーリンク*/
#footer_bottom {
height: 120px;
}

.footer-privacypolicy {
text-align: center;
margin: -1px 0 0;
background: #f5f7f8;
height: 50px;
  display: flex !important;
  align-items: center !important;   /* 縦中央 */
  justify-content: center !important; /* 横中央 */
}

.footer-privacypolicy a {
color: #2f2f2f;
}

#copyright {
margin: -30px 0 0;
}











/* 患者様の声セクション（吹き出し版） */
#testimonials-bubble-section {
    padding: 80px 20px;
    max-width: 1000px;
    margin: 0 auto;
    background: transparent;
}

.testimonial-bubble-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.testimonial-bubble-item.animate {
    opacity: 1;
    transform: translateY(0);
}

/* 左配置（奇数番目） */
.testimonial-bubble-item:nth-child(odd) {
    flex-direction: row;
}

/* 右配置（偶数番目） */
.testimonial-bubble-item:nth-child(even) {
    flex-direction: row-reverse;
}

/* 人物イラスト部分 */
.character-illustration {
    width: 120px !important;
    height: 120px !important;
    margin: 0 20px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 強制的に円形と影を無効化 */
    border-radius: 0 !important;
    box-shadow: none !important;
    background: none !important;
    overflow: visible !important;
}

.character-illustration img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transition: all 0.3s ease;
    /* 強制的に円形を無効化 */
    border-radius: 0 !important;
    box-shadow: none !important;
    /* Retinaディスプレイ対応 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* キャラクター別クラス（影なし） */
.character-illustration.businessman,
.character-illustration.student,
.character-illustration.child,
.character-illustration.mother,
.character-illustration.senior,
.character-illustration.nurse {
    /* 影やbackgroundを削除してPNGイラストをそのまま表示 */
}

.character-illustration:hover {
    transform: scale(1.05) rotate(5deg);
}

.character-illustration:hover img {
    transform: scale(1.1);
}

/* 吹き出し部分 */
.speech-bubble {
    max-width: 400px;
    padding: 25px 30px;
    background: #ffffff;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

/* 角丸四角の吹き出し */
.speech-bubble.rounded {
    border-radius: 20px;
}

/* 吹き出しの矢印（左側から） - デフォルト */
.testimonial-bubble-item:nth-child(odd) .speech-bubble::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 30px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid #ffffff;
}

/* 吹き出しの矢印（右側から） - デフォルト */
.testimonial-bubble-item:nth-child(even) .speech-bubble::before {
    content: '';
    position: absolute;
    right: -15px;
    top: 30px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #ffffff;
}

/* 吹き出し内のテキスト */
.bubble-text {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    color: #374151;
    margin-bottom: 0 !important;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    #testimonials-bubble-section {
        padding: 60px 15px;
    }

    .testimonial-bubble-item {
        margin-bottom: 40px;
    }

    .testimonial-bubble-item:nth-child(even) {
        flex-direction: row;
    }

    .character-illustration {
        width: 80px;
        height: 80px;
        margin: 0 15px 0 0;
    }

    .speech-bubble {
        max-width: 280px;
        padding: 20px 25px;
    }

    .bubble-text {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    .testimonial-bubble-item:nth-child(even) .speech-bubble::before {
        display: none;
    }
}

/* スクロールアニメーション */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.testimonial-bubble-item.animate {
    animation: fadeInUp 0.8s ease forwards;
}

/* 浮遊アニメーション */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
}

.testimonial-bubble-item:hover .speech-bubble {
    animation: float 2s ease-in-out infinite;
}

/* 患者様の声セクション（吹き出し版） 終わり */





/*全固定ページ幅*/
body.page #page_contents .post_content {
	width: 1200px;
}
/*全固定ページ幅 終わり*/


/*医院についてページ*/
#clinic_page {
	text-align: center;
}

#clinic_int_flex {
    display: grid;
    gap: 2%;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	margin: 15% 0;
}

#clinic_int_flex div {
	margin-top: 5%;
}

#clinic_int_flex div h4 {
	margin: 5% 0 1%;
	color: #3A5664;
	font-weight: bold !important;
}

#clinic_int_flex div p {
	color: #3A5664;
	line-height: 2em;
}

#clinic_page img {
	border-radius: 30px;
}

#clinic_page h3 ,
#clinic_page h2 {
	color: #3A5664;
	font-weight: bold !important;
}

#clinic_page h2 {
	font-size: 3em;
}

#clinicparking_p {
	font-size: 1.3em;
	margin-top: 5%;
}

@media (max-width: 768px) {
	#clinic_page #clinic_page_parking h2 {
		margin-top: 45%;
	}
}
/*医院についてページ 終わり*/




/*子どもの矯正・大人の矯正ページ*/
#kyoseiservise_page {
	text-align: center;
}

/*#kyoseiservise_page section:not(:last-of-type) {
	margin-bottom: 10%;
}*/

#kyoseiservise_page section{
	padding: 10% 0;
}

#kyoseiservise_page #kyoseiservise_page_top img {
	border-radius: 30px;
}

#kyoseiservise_page #kyoseiservise_page_top {
	position: relative;
}

#kyoseiservise_page h2 {
	color: #3A5664;
	font-weight: bold !important;
	margin: 8% 0 5%;
	font-size: 3.2em;
}

#kyoseiservise_page .p-main01 {
	font-size: 1.2em;
	color: #3A5664;
	font-weight: bold !important;
	line-height: 2em;
}

#kyoseiservise_page #kyoseiservise_page_merit{
    background: #f5f7f8;
	border-radius: 30px;
}

#kyoseiservise_page_merit h2 {
	margin-top: 10px;
}

#kyoseiservise_page_merit #kyoseiservise_page_merit_flex div h3 {
	font-size: 1.5em;
	margin-top: 10%;
}

#kyoseiservise_page #kyoseiservise_page_merit #kyoseiservise_page_merit_flex {
	display: flex;
    width: 90%;
    gap: 2%;
    margin: 6% auto 5%;
}

#kyoseiservise_page #kyoseiservise_page_merit #kyoseiservise_page_merit_flex div {
	width: 50%;
	background-color: #fff;
	padding: 3% 2%;
	border-radius: 20px;
}

#kyoseiservise_page #kyoseiservise_page_merit #kyoseiservise_page_merit_flex div img {
	width: 80%;
	margin: auto;
}


#kyoseiservise_page #kyoseiservise_page_merit #kyoseiservise_page_merit_flex div p {
	margin: 10% 0 0;
	font-weight: bold;
	color: #3A5664;
	line-height: 2em;
}

#kyoseiservise_page .main_frame {
	border: 7px solid #3A5664;
	margin: 10% 0;
	padding: 5%;
	border-radius: 30px;
	color: #3A5664;
	font-weight: 500;
	background-color: #fff;
}

#kyoseiservise_page h3 {
	font-weight: bold;
	color: #3A5664;
	font-size: 2.3em;
}

#kyoseiservise_page .kyoseiservise_page_timing_pb {
	font-size: 4em;
	font-weight: bold;
	color: #3A5664;
	margin-bottom: 0;
}

#kyoseiservise_page .kyoseiservise_page_timing_pm {
	font-weight: bold;
}

#kyoseiservise_page .kyoseiservise_page_timing_pl {
	margin: 0 0 -3%;
}

#kyoseiservise_page #kyoseiservise_page_fee {
	position: relative;
}

#kyoseiservise_page #kyoseiservise_page_fee::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: #f5f7f8;
    z-index: -1;
}

#kyoseiservise_page .main_frame hr {
	margin: 7% 0 10%;
}

/*大人ページ専用*/
#kyoseiservise_page #kyoseiservise_page_merit #kyoseiservise_page_merit_flex .merit_flex_adult img {
	width: 100%;
}
/*大人ページ専用 終わり*/

@media (max-width: 1024px) {
	#kyoseiservise_page h2 {
		font-size: 2.5em;
	}
	#kyoseiservise_page #kyoseiservise_page_merit {
		padding-left: 7%;
		padding-right: 7%;
	}
	#kyoseiservise_page #kyoseiservise_page_merit #kyoseiservise_page_merit_flex {
		width: 100%;
	}
	#kyoseiservise_page #kyoseiservise_page_merit #kyoseiservise_page_merit_flex div p {
		font-size: 1.2em;
	}
	#kyoseiservise_page_merit_flex {
		display: block !important;
	}
	#kyoseiservise_page #kyoseiservise_page_merit #kyoseiservise_page_merit_flex div {
		width: 100%;
		margin: 5% 0;
		padding: 8% 5%;
	}
	#kyoseiservise_page_merit #kyoseiservise_page_merit_flex div h3 {
		font-size: 2.5em;
	}
}

@media (max-width: 768px) {
	#kyoseiservise_page h2 {
		font-size: 1.7em;
	}
	#kyoseiservise_page .p-main01 {
		font-size: 1em;
	}
	#kyoseiservise_page h3 {
		font-size: 1.8em;
	}
	#kyoseiservise_page .kyoseiservise_page_timing_pb {
		font-size: 2em;
	}
	#kyoseiservise_page_top_h2_b {
		font-size: 1.3em;
	}
	#wide-line {
		line-height: 3;
	}
	#kyoseiservise_page_merit_flex {
		display: block !important;
	}
	#kyoseiservise_page #kyoseiservise_page_merit #kyoseiservise_page_merit_flex div {
		width: 100%;
		margin: 5% 0;
		padding: 8% 5%;
	}
	#kyoseiservise_page #kyoseiservise_page_merit #kyoseiservise_page_merit_flex div p {
		font-size: 1em;
	}
}

/*子どもの矯正・大人の矯正ページ終わり*/






/*治療事例ページ*/
#casepage {
	text-align: center;
}

#casepage h3 {
	font-weight: bold;
	color: #3a5664;
}

#case_midashi {
	width: 40%;
	margin: 10% auto 2%;
}

.caseimg {
	width: 70%;
	margin: auto;
}

#case_midashi_smp {
	display: none;
}

.casemidashi_part {
	color: #3a5664;
	font-weight: bold;
	margin-top: 5% !important;
	font-size: 1.2em;
}

@media (max-width: 1024px) {
	.caseimg {
		width: 100%;
}
	#case_midashi {
    	width: 58%;
}
}

@media (max-width: 768px) {
	#case_midashi {
		display: none;
	}
	#case_midashi_smp {
		display: block;
		width: 68%;
        margin: auto;
	}
}