@charset "UTF-8";
/* CSS Document */

/****************************************************************************************************
初期設定
****************************************************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* IE8以下への対応 */
article, aside, figure, figcaption, footer, header, nav, section {
	display:block;
}
/* IE8以下への対応 */

.pcOnly {
	display:block;
}
span.pcOnly,
i.pcOnly {
	display:inline;
}
.spOnly {
	display:none;
}

html,body{
	font-family:"Noto Sans", "Noto Sans CJK JP", sans-serif;
	font-weight:320;
	width:100%;
	color:#454545;
	font-feature-settings:"palt";
	scroll-padding-top:121px;
	line-height: 40px;
	font-size: 20px;
	letter-spacing: 1px;
}

	
* {
	box-sizing:border-box;
}
img {
	vertical-align:middle;
}
strong {
	font-weight:600;
}
a {
	color:#000;
	text-decoration:none;
	-webkit-transition:opacity .3s;
	-moz-transition:opacity .3s;
	transition:opacity .3s;
}
a:hover {
	opacity:.6;
}

/* clear fix */
.clearfix:before,
.clearfix:after {
	content:" ";
	display:table;
}
.clearfix:after {
	clear:both;
}
.clearfix {
	*zoom:1;
}
/* clear fix */

/* メインビジュアル */

#header {
display: block;              /* ヘッダー全体の箱 */
  width:100vw;
  margin: 0 auto;
  position: relative;
  background: #fff;            /* 背景は白だけにしておく */
  padding-top: 0;              /* 高さはスライドショー側で決める */
}	
/*=============================================================================================
スライドショーPC
=============================================================================================*/


/* スライドショー（メインビジュアル） */
.img-frame{
  position: relative;
  width: 100vw;

  /* ★PCの縦幅（自由に調整してください） */
  height: 45vw;          /* 例：少し大きめ。38vw → 45vw */
  max-height: 700px;     /* 上限も自由にOK */

  overflow: hidden;
  margin: 0 auto;
}

/* ★スマホ専用の高さ調整 */
@media (max-width: 767px){
  .img-frame{
    height: 70vw;        /* 例：SPは縦長表示 */
    max-height: none;    /* スマホでは上限を解除する */
  }
}

.img-01,
.img-02{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position:center;
  background-repeat: no-repeat;
  /* opacity はここでは指定しない */
}


/* 全スライド共通 */
.img-01,
.img-02{
  animation-duration: 16s;            /* 切替速度（お好みで調整） */
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  opacity: 0;
}

/* 1枚目：常に表示（アニメーションなし） */
.img-01{
  background-image: url('../img/h-main1.png');
  opacity: 1;                /* ずっと見えている */
}

/* 2枚目：フェードイン・フェードアウトを繰り返す */
.img-02{
  background-image: url('../img/h-main2.png');
  opacity: 0;                /* 初期状態は非表示 */
  animation: fade2 10s ease-in-out infinite;  /* 速度はお好みで 8s / 12s など */
}

/* ---- ふわっとクロスフェード（完全対称版） ---- */
/* ポイント：両方とも 40〜60% の間で入れ替わるようにする */

@keyframes fade1 {
  0%   { opacity: 1; }
  30%  { opacity: 1; }
  70%  { opacity: 0; }   /* 1枚目がゆっくり消える */
  100% { opacity: 0; }
}

/* 2枚目だけを「ふわっ」と出したり消したりするアニメーション */
@keyframes fade2 {
  0%   { opacity: 0; }   /* 1枚目だけ見えている */
  10%  { opacity: 1; }   /* ふわっと出てくる */
  50%  { opacity: 1; }   /* しばらく2枚目のまま */
  60%  { opacity: 0; }   /* ふわっと消える → 1枚目が見えてくる */
  100% { opacity: 0; }   /* 1枚目だけの状態に戻る */
}

@media (min-width: 768px){
  .img-01{
    background-position: center 10%;  
    /* ↑ 20% の部分を調整して上下移動（数値↑で下に下がる） */
  }
}

	
/* 共通 */
.page-width{
	width:1400px;
	margin:0 auto;
}
.title-right{
	text-align: right;
	padding:50px 0;
}
.title-center{
	text-align: center;
	padding:50px 0;
}
.title-left{
	text-align: left;
	padding:50px 0;
}
.flex-contents{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
/* 改行させたくない部分用 */
.nowrap {
  white-space: nowrap;
}



/* 院長メッセージ */
#message{
    background:url(../img/background1.png) no-repeat center center;
    background-size: cover;         /* ← auto → coverの方が綺麗 */
    padding: 60px 0 10px 0!important;        /* ← 上80px・下120pxの余白 */
    height: auto !important;        /* ← 固定高さを解除 */
    box-sizing: border-box;
}


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

.mes1{
	margin-top:140px;
}

.flex-contents{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}

.flex-contents2{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
}

.mes2{
	margin-top:63px;
  padding-left: 55px;
	width:40%;
}

.mes3{
	margin-top:100px;
	width:60%;
	-webkit-box-pack: left;
	-webkit-justify-content: left;
	-ms-flex-pack: left;
	justify-content: left;
}
.mes3 p{
	width:85%;
	padding: 45px 0;
}
.mes4{
	position:relative;
	left:350px;
}


/* クリニック紹介 */
#clinic{
  background:none;
  background-size: auto;
  padding-bottom: 80px;
}
/* タイトル画像の下の 1行テキスト（もし使っていればそのまま流用） */
.clinic-box{
  margin-bottom: 20px;
}
.clinic-box p{
	width:550px;
	font-size: 26px;
	font-weight: 400;
	text-align: center;
	margin:0 35px;
}
.clinic-box p img{
	margin:0 23px;
	width:26px;
	height: 26px;
}

.clinic-box p.clinic-text{
  font-size:22px;
  font-weight: 300;
}
/* 左カラム上に入るサブタイトル・説明 */
.clinic-sub,
.clinic-subtext{
  max-width: 430px;   /* 左カラムと同じくらいの幅 */
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
}
/* 2カラム1セットのブロック */
.clinic-row{
  margin-bottom: 40px;
}

/* クリニック紹介：2カラム共通のサブタイトル・説明 */
.clinic-sub{
  color: #D8B41A;
  font-size: 24px;
  font-weight: 500;
  margin-top: 40px;   /* タイトル画像との距離 */
}

.clinic-subtext{
  color: #454545;
  font-size: 16px;
  font-weight: 300;
}


/* ────────────────
   clinic：PC用（768px～）
   ──────────────── */
@media (min-width: 768px){

  /* 行ごと（1セット）の下余白 */
  .clinic-row.pc-only{
    margin-bottom: 60px;
  }

  /* 左右2カラムの並び方 */
  .clinic-detail{
    display: flex;
    justify-content: center;   /* 中央寄せ */
    gap: 40px;
    align-items: flex-start;
  }

  /* 各カラムの幅（画像側） */
  .clinic-img{
    flex: 0 0 500px;           /* 450〜520px の範囲でお好み調整可 */
  }

  /* 左右どちらの画像も同じ起点から */
  .clinic-img img{
    display:block;
    width:100%;
    height:auto;
    margin-top: 20px;          /* 説明文との間隔。もう少し詰めたいなら 10px などに */
  }

  /* サブタイトル＋説明文（左カラム） */
  #clinic .clinic-sub,
  #clinic .clinic-subtext{
    max-width: 430px;
    margin-left: 0;
    padding-left: 0;
    text-align: left;
  }

  #clinic .clinic-sub{
    color: #D8B41A;
    font-size: 1.2rem;
    font-weight: 400!important;
    margin-top: 24px;          /* タイトル画像との距離 */
    margin-bottom: 1px!important;        /* サブタイトルと説明文の間 */
  }

  #clinic .clinic-subtext{
    color: #454545;
    font-size: 1rem;
    font-weight: 300!important;
    line-height: 1.6;
    margin-bottom: -40px!important;       /* 説明文と画像の間 */
  }
  /* ← この中に追加する */

  /* サブタイトル＋説明文の箱を、画像２枚と同じ幅で中央に */
  #clinic .clinic-text{
    max-width: 1040px;          /* 画像(約500px×2)＋間隔40px を想定 */
    margin: 0 auto 24px;        /* 上0 / 左右autoで中央寄せ / 下24pxくらい余白 */
  }

  /* ここより下は、今すでに書いてある .clinic-detail や .clinic-img などのCSSをそのまま残す */	
/* 全体の横幅（画像2枚＋間隔と同じ幅） */
  #clinic .clinic-row{
    max-width: 1040px;   /* ← ここが重要 */
    margin: 0 auto 60px;  /* 中央寄せ＋下余白 */
  }

  /* サブタイトル＋説明文（幅100%で改行しなくなる） */
  #clinic .clinic-text{
    width: 100%;
    margin-bottom: 24px;
  }

  #clinic .clinic-sub,
  #clinic .clinic-subtext{
    width: 100%;
    max-width: none;  /* ← ここが重要：変な折り返しを禁止 */
  }	
/* 全体の横幅（画像2枚＋間隔と同じ幅） */
  #clinic .clinic-row{
    max-width: 1040px;   /* ← ここが重要 */
    margin: 0 auto 60px;  /* 中央寄せ＋下余白 */
  }

  /* サブタイトル＋説明文（幅100%で改行しなくなる） */
  #clinic .clinic-text{
    width: 100%;
    margin-bottom: 24px;
  }

  #clinic .clinic-sub,
  #clinic .clinic-subtext{
    width: 100%;
    max-width: none;  /* ← ここが重要：変な折り返しを禁止 */
  }	
 .jet-cleaning {
  font-size: 1rem;        /* ホワイトニングと揃える（お好みで） */
  font-weight: 500;       /* 太さも揃える */
  color: inherit;         /* 同じ色にする */
  line-height: inherit;   /* 行間を揃える */
}
.shin-title {
  font-size: 1.2rem;
  font-weight: 500!important; 
  text-align: center;
  margin: 0;
}

.shin-text {
  font-size: 1rem;
  font-weight: 400!important;  /* ← 通常（細め） */
  text-align: center;
  line-height: 1.6;
}

.shin-text .jet-cleaning {
  font-weight: 700!important;  /* ← これだけ太字 */
}


}



/* インプラント */
#implant{
	background:url(../img/background2.png) no-repeat center center;
	background-size: auto;
	height: 750px;
}
.implant-detail{
	justify-content: space-around;
}
.imp1{
	position: relative;
	top:20px;
	left: 80px;
}
.imp2{
	position: relative;
	top:-130px;
	right:30px;
	z-index:10;
}
/* ---- Clinic → Implant の区切り ---- */
.section-divider{
  width: 100%;
  margin: 
	  40px 0 10px;
  padding: 0;
}

.section-divider .divider-line{
  width: 95% !important;   /* 必ず親いっぱいまで伸ばす */
  max-width: none !important; /* 1200px の制限を外す */
  height: 2px;
  background-color: #D8B41A;
  margin: 0 auto 20px;
  display: block;
}

.section-divider .divider-title{
  width: 700px; /* title11.png の横幅に合わせて調整 */
  height: auto;
  display: block;
  margin: 0 auto;
}
/* clinic → implant の間に表示する説明文 */
.clinic-desc{
  max-width: 1040px;
  margin: 30px auto 40px;
  padding: 0 20px;
  font-size: 18px;
  line-height: 1.8;
  color: #454545;
  text-align: left;
}

/* スマホ用調整 */
@media (max-width: 767px){
  .clinic-desc{
    font-size: 14px;
    line-height: 1.7;
    margin: 20px auto 30px;
    padding: 0 4vw;
  }
}





/* 矯正 */
#kyosei{
	background:url(../img/background3.png) no-repeat center center;
	background-size: auto;
	height:950px;
}
.kyosei-img1{
	text-align: left;
	position: relative;
}
.kyo1{
	margin:12px 100px 12px 30px;
	position: relative;
}
.kyo-t1{
	font-size: 28px;
	color:#fff;
	position: absolute;
	top:60px;
	left:200px;
}
.kyo-t2{
	font-size: 16px;
	color:#454545;
	position: absolute;
	top:110px;
	left:200px;
}

.kyosei-img2{
	text-align: left;
	position: relative;
}
.kyo2{
	margin:12px 0 12px 120px;
}
/* 第2期アイコンだけ左余白を付ける */
.kyosei-img2 .kyo2{
    padding-left: 20px;   /* ← 好きな値（30〜60px 推奨） */
}
.kyo-t3{
	font-size: 28px;
	color:#fff;
	position: absolute;
	top:50px;
	left:300px;
}
.kyo-t4{
	font-size: 15px;
	color:#454545;
	position: absolute;
	top:100px;
	left:300px;
	line-height: 2.1;   /* ← 行間を詰める */
}


/* =========================
   審美セクション（PC用）
   ========================= */
@media (min-width: 768px){

  /* セクション全体の余白 */
  #shinbi{
    background:url(../img/background4.png) no-repeat center center;
  background-size: cover;   /* ← auto から cover に変更 */
  padding: 60px 0 60px;     /* お好みで増やしてOK */
  }

  /* 2カラムを中央に */
  .shinbi-detail{
    display: flex;
    justify-content: center;
  }

  /* 各カラム（画像＋テキストの箱）を中央寄せ */
  .shin-img{
    display: flex;
    justify-content: center;
  }

  /* 画像＋テキストの共通の「箱」 */
  .shin-box{
    width: 550px;           /* ここが基準幅：画像とテキストを揃える */
    margin: 40px 35px 0;    /* 上40pxで見出しとの間を空ける */
    text-align: center;
  }

  /* 画像：箱いっぱいに広げて中央表示 */
  .shin-box img{
    display: block;
    width: 100%;            /* ＝ 550px */
    height: auto;
    margin: 0 0 20px;       /* 下だけ余白 */
  }

  /* タイトル行 */
  .shin-box p{
    width: 100%;
    font-size: 25px;
    font-weight: 400;
    margin: 0;
  }

  /* きらきらアイコン付きのとき */
  .shin-box p img{
    margin: 0 23px;
    width: 26px;
    height: 26px;
  }

  /* 説明文 */
  .shin-box p.shin-text{
    font-size: 19px;
    font-weight: 300 !important;
    margin-top: 10px;
    line-height: 1.7;
  }
}


/* 医療用CT */
#ct{
  background: url(../img/background6.png) no-repeat center top;
  background-size: cover;        /* セクションの高さに合わせて伸ばす */
  background-color: #e9e2d1;     /* 画像外には近い色を敷いておく（保険） */
  margin: 0;                     /* 上下の白いスキマ防止 */
  padding: 80px 0 40px;               /* 上下の余白は padding で */
}
.ct-detail{
	justify-content: center;
}
.ct-box{
	margin-bottom: 20px;
}
.ct-box p{
	width:550px;
	font-size: 26px;
	font-weight: 400;
	text-align: center;
	margin:0 35px;
}
.ct-box p img{
	margin:0 23px;
	width:26px;
	height: 26px;
}
.ct-img img{
	margin:35px;
}
.ct-box p.ct-text{
	font-size:23px;
	font-weight: 300;
}
/* クリニック紹介：画像上のサブタイトル・説明 */
.ct-sub{
  color: #000!important;
  font-size: 24px;
  font-weight: 400!important;
  margin: 10px 0 5px;
  text-align: center;
}

.ct-subtext{
  color: #454545;
  font-size: 19px;
  font-weight: 300;
  margin: 0 0 15px;
  text-align: center;
}
/* PC だけ（768px〜）で CT セクションを2カラム安定させる */
@media (min-width: 768px){

  /* CT セクション内の2カラムコンテナ */
  #ct .clinic-detail{
    display: flex;               /* 念のため明示 */
    justify-content: center;
    align-items: flex-start;
    gap: 40px;                   /* 画像間の隙間 */
    margin-bottom: 60px;
  }

  /* 各カラムの幅（左右そろえる） */
  #ct .ct-img{
    flex: 0 0 500px;             /* お好みで 480〜520px などに変更可 */
  }

  /* 見出しテキストの幅＆位置 */
  #ct .ct-box p{
    width: 100%;                 /* 550px 固定をやめる */
    margin: 0;                   /* 左右の35pxも不要ならリセット */
    text-align: left;            /* 中央のままが良ければ center に */
  }

  /* 画像まわりの調整 */
  #ct .ct-img img{
    width: 100%;
    height: auto;
    display: block;
    margin: 20px 0 0;            /* 上だけ少しあける。35pxが広すぎる場合 */
  }

  /* サブタイトル／説明文の細かい調整（好みで） */
  #ct .ct-sub{
    text-align: left;
    font-size: 22px;
    margin: 10px 0 4px;
  }

  #ct .ct-subtext{
    text-align: left;
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 10px;
  }
}
/* PC用：医療用CTセクション 2カラムレイアウト */
@media (min-width: 768px){

  /* 2カラムの並び */
  .ct-detail{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;                /* 画像間のすき間 */
    margin-bottom: 60px;
  }

  /* 各カラム幅をそろえる */
  #ct .ct-img{
    flex: 0 0 500px;          /* お好みで 480〜520px 程度に調整可 */
  }

  /* 画像サイズ・余白 */
  #ct .ct-img img{
    width: 100%;
    height: auto;
    display: block;
    margin: 20px 0 0;         /* 上だけ少しあける。35pxだと広すぎるのでリセット */
  }

  /* 見出し／説明テキストの幅・位置をそろえる */
  #ct .ct-box p{
    width: 100%;
    margin: 0;
    text-align: left;
  }

  #ct .ct-sub{
    font-size: 22px;
    color: #D8B41A;
    font-weight: 600;
    margin: 10px 0 3px;
  }

  #ct .ct-subtext{
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 0px;
  }
}
@media (min-width: 768px){
  #ct .ct-detail{
    gap: 40px;        /* ← 間隔も少し広げるとバランスが良くなる */
  }

  #ct .ct-img{
    flex: 0 0 550px;  /* ← ここを広げるだけでOK（580〜620pxなど自由） */
  }
}

/* 衛生管理 */
.sp-only{
	display: none;
}
.sp-x-only{
	display: none;
}
#eisei{
	background:url(../img/background5.png) no-repeat center center;
	background-size: auto;
	height:850px;
}
.eisei1{
	position: relative;
	top:-120px;
	left:40px;
}
.eisei2{
	position: relative;
	top:90px;
	left:90px;
}
.eisei3{
	position: relative;
	top:0;
	left:100px;
}
.eisei4{
	position: relative;
	top:60px;
	left: 60px;
}



/* その他 */
#other{
	background:url(../img/background6.png) no-repeat center center;
	background-size: auto;
	height:550px;
}

#other .page-width{
	padding:105px 0;
}
.oth1{
	padding-right:30px;
}



/* スタッフ */
#staff{
	background:url(../img/background7.png) no-repeat center center;
	background-size: auto;
	height:2900px;
}
@media screen and (min-width: 768px) {

  /* プロフィール全体を左寄せで縦積み */
  #staff-big-box1 .staff-prof {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;  /* 1行目と2行目の間 */
  }

  /* 1行目：ロゴ + 院長 + 名前 を横並びに */
  #staff-big-box1 .staff-title-row {
    display: flex;
    align-items: center;
    gap: 16px;            /* ロゴとテキストの間 */
  }

  /* 名前のボックスを完成形っぽく */
  #staff-big-box1 .staff-title-row h3 {
    display: inline-block;
    padding: 8px 40px;
    background: #fff;
    border: 1px solid #ccc;
    font-size: 40px;      /* 既存と同じくらい */
  }

  /* 2行目：サインの位置（名前の下に少し下げる） */
  #staff-big-box1 .staff-sign-row {
    margin-top: 8px;
  }

  /* サイン画像を名前の左端あたりから出したい場合 */
  #staff-big-box1 .staff-sign-row .staff-name {
    display: block;
    margin-left: 40px;    /* 名前ボックスのパディングに合わせて調整 */
  }
	/* PC用：スタッフ名の枠線を消す */
#staff-big-box1 .staff-prof h3 {
    border: none;             /* 枠線を消す */
    background: transparent;  /* もし白い箱もいらなければこれも */
    padding: 0;               /* 余白もいらなければ 0 に */
  }
}


#staff-big-box1{
	position: relative;
}
.staff-center{
	text-align: center;
	position: relative;
	z-index: 1000;
}

.staff-box {
	justify-content: center;
}
.staff-box .flex-contents{
	align-items: center;
	padding:10px 0;
}
.staff-box h4{
	font-size: 30px;
}
.staff-box h3{
	font-size: 40px;
}
.staff-box .staff-img{
	margin:22px;
	position: absolute;
	top:-60px;
	left:100px;
	width:30%;
	z-index: 10;
}
.staff-box .staff-prof{
	width:650px;
	position: absolute;
	top:30px;
	right:185px;
}
.staff-name{
	margin-left:35px;
}
#staff-big-box1 .history{
	width:1040px;
	height:470px;
	background-color: #cce3fa;
	margin:0 auto;
	position: absolute;
	top:220px;
	right:130px;
	padding-bottom: 25rem;  /* お好みで 30〜40px くらい */
}


.history .staff-prof{
	margin:0;
	margin-left:340px;
}
.history ul li{
	line-height: 1.5;
 }
.history ul li img{
 vertical-align: middle;
 padding:0 15px;
}
.history h5{
	font-size: 25px;
	color:#1277e1;
	margin-bottom:30px;
	padding:30px 0 20px 0;
	border-bottom: 1px #000 solid;
	width:600px;
}
#staff-big-box2{
	position: relative;
	margin-top:200px;
}
#staff-big-box2 h5{
	color:#2a3762;
}
#staff-big-box2 .history{
	width:1040px;
	height:330px;
	background-color: #cfd4e8;
	margin:0 auto;
	position: absolute;
	top:220px;
	right:130px;
}
#staff-big-box3{
	position: relative;
	margin-top:200px;
}
#staff-big-box3 h5{
	color:#eb7070;
}
#staff-big-box3 .history{
	width:1040px;
	height:330px;
	background-color: #f2d7d7;
	margin:0 auto;
	position: absolute;
	top:220px;
	right:130px;
}
#staff-big-box4{
	position: relative;
	margin-top:200px;
}
#staff-big-box4 h5{
	color:#68d8d0;
}
#staff-big-box4 .history{
	width:1040px;
	height:330px;
	background-color: #d6ebea;
	margin:0 auto;
	position: absolute;
	top:220px;
	right:130px;
}
#staff-big-box5{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.staff-btm1{
	background:url(../img/staff-back1.png) no-repeat center center;
	width:510px;
	height: 400px;
	margin:80px 50px 80px 0;
}
.staff-btm2{
	background:url(../img/staff-back2.png) no-repeat center center;
	width:510px;
	height: 400px;
	/* 250110変更 */
	margin:80px auto;
	/* margin:80px 0 80px 50px; */
}
#staff-big-box5 .flex-contents{
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin:45px 45px;
}
/* 230428追加 */
#staff-big-box5 .flex-contents1{
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin:20px 23px 0;
}

.staff-btm1 h4,
.staff-btm2 h4{
	font-size: 30px;
	margin:10px 0 0 70px;
}
#staff-big-box5 .flex-contents ul li{
	font-size: 32px;
		/* 250110変更 */
	padding:40px 0;
}
#staff-big-box5 .flex-contents ul li span{
	padding:0 30px 0 10px;
}
.staff-cmt{
	text-align: center;
}
#staff-big-box5 .flex-contents .staff-cmt ul li{
	font-size: 25px;
}
/* 役職と名前の間隔を広げる（1・2・3 個別に効く） */
#staff-big-box1 h4 { margin-right: 12px; }  /* 院長 */
#staff-big-box2 h4 { margin-right: 19px; }  /* 歯科医師A */
#staff-big-box3 h4 { margin-right: 19px; }  /* 歯科医師B */


#info{
	background:url(../img/background8.png) no-repeat center center;
	background-size:  auto;
	background-position: center 59%;   /* ← 50% → 60% にすると背景画像が下へ移動して下側が伸びる */
	height: 1250px;
	/* padding-top: 25rem;
	padding-bottom: 25rem;
	margin: 0 auto;
	margin-bottom:300px; */
	position: relative;
}	
#info .flex-contents{
	justify-content: center;
	color:#fff;
}

.info-title{
	position: absolute;
	top:10%;    /* ★ ここを調整（10〜20%の間で好みに合わせられる） */
	left:50%;
	transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}
/* インフォメーション：PC */
.info-logo{
	position: absolute;
	top:25%;          /* ★ここを 12% → 28% に変更 */
	left:50%;
	transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}
.info-logo img{
	margin-bottom:0px;
}
.info-box1{
	margin:200px auto;
	padding-top: 100px;
	margin-bottom:40px;
}

.info-add{
  margin-right: calc(50 / 1200 * 100%);
	font-size: 25px;
	line-height: 2;
	color:#fff;
	padding:0;
}
.info-add .tel1{
	text-align: left;
	position: static;
}
.info-add .tel1 a{
	font-size: 25px;
	color:#fff;
	font-weight: 300;
}
.info-box2{
	text-align: center;
}

.info-mar{
	margin-top:40px;
}
.info-right{
	margin-left: 260px;
}
.info-right img{
	padding:0 10px 0 20px;
}

/* 採用情報 */
#recruit{
	background:url(../img/background9.png) no-repeat center center;
	background-size: auto;
	height:850px;
	margin: 0 auto;
	margin-top:240px;
	margin-bottom:150px;
	text-align: center;
	position: relative;
}
.rec1{
	position: absolute;
	top:-120px;
	left:50%;
	transform: translateX(-50%);
	text-align: center;         /* 念のため内部要素も中央に */
	 /* 横幅調整用 */
  width: 80vw;                /* 画面幅に対する比率で指定（例: 40%） */
  max-width: 1200px;           /* 最大幅を制限（任意） */
  min-width: 200px;           /* 最小幅を指定して崩れ防止（任意） */
}
.rec1 img {
  width: 100%;                /* コンテナ幅に合わせて拡縮 */
  height: auto;
  display: block;
}

.rec2{
	position: absolute;
	top:240px;
	left:49%;
	transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}
.rec3{
	position: absolute;
	top:430px;
	left:49%;
	transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}
.rec3 p{
	font-size:25px;
}
.rec4{
	position: absolute;
	top:540px;
	left:49%;
	transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}


/* アクセス */
#google{
	width: 1400px;
	margin: 0 auto;
}
.google-left{
	width:700px;
	/* height:400px; */
	background-color: #e7e4dd;
	text-align: center;
	padding:2rem 0;
	display: block;
	position: relative;
}
.google-left p{
	font-size: 13px;
	position:absolute;
	bottom:0;
	left:0;
	margin-bottom:calc(0 / 700 * 100%);
	margin-left: calc(180 / 700 * 100%);
}
.google-right{
	width:700px;
	/* height:400px; */
	background-color: #b1aa9b;
	text-align: center;
	padding:2rem 0;
	display: block;
	position: relative;
}
.google-right a p{
	font-size: 20px;
	position:absolute;
	bottom:0;
	left:0;
	margin-bottom:calc(100 / 700 * 100%);
	margin-left: calc(130 / 700 * 100%);
}
/* contact-block 全体の中央揃え */
.contact-block {
  text-align: center;
}

/* 画像を完全に中央に寄せる */
.contact-block img {
  display: block;
  margin: 0 auto;
}

/* コピーライトの中央寄せ */
.contact-block .copyright {
  text-align: center;
  margin: 10px auto 0;
}

/* contact1.png の画像調整 */
  .google-left .pc-only img{
    width: 600px;          /* 必要に応じて */
    height: auto;         /* 必要に応じて */
    margin: 65px 0 0;    /* ←ここを好きに変更 */
    display: block;       /* 中央寄せ */
  }

  /* y_insta.png の画像調整 */
  .google-left .y-insta img{
    width: 150px!important;          /* 大きさも調整可（例として80px） */
    margin-top: 20px;     /* 上の余白 */
    margin-left: auto;    /* 左右中央寄せのため */
    margin-right: auto;   /* ここも中央寄せ */
    display: block;
	
  }

  /* y-insta コンテナ自体の位置を動かしたい時はここ */
  .google-left .y-insta{
    margin-top: 0px!important;     /* y-insta ブロック全体の余白 */
    text-align: center;   /* 画像を中央に */
  }

/* google-left 内のすべての画像を中央寄せ */
.google-left img {
  display: block!important;
  margin-left: auto!important;
  margin-right: auto!important;
}

/* y-insta コンテナも中央寄せ */
.google-left .y-insta {
  text-align: center!important;
}

/* 公式HPはこちら（テキスト部分） */
.google-left .official-link{
  text-align: center;       /* ← センター寄せ */
  font-size: 16px;          /* ← 好きなサイズに変更 */
  margin-top: 0px;         /* 画像との間隔（上） */
  margin-bottom: 15px;      /* 下の余白（必要に応じて調整） */
  font-weight: 500;         /* 文字を少し太く */
  color: #454545;           /* ← 好きな色に変更可能 */
}

/* PCで「公式HPはこちら」を中央寄せ＋色指定 */
@media (min-width: 768px){
  .google-left p.hp-link{
    position: static !important;        /* 絶対位置指定を解除 */
    margin: 20px auto 0 !important;     /* 上20px・左右autoで中央寄せ */
    text-align: center !important;      /* 中央揃え */
    font-size: 22px !important;         /* 文字サイズ */
    color: #454545 !important;          /* ← ここで好きな色に */
  }
}



  /* .wait-r と .wait-i の縦積みレイアウト */
/* PCだけ縦積み＆中央寄せ */
@media (min-width: 768px) {
  .flex-contents2{                 /* ← .wait-r と .wait-i の親 */
    display: flex;                 /* すでに flex なら OK */
    flex-direction: column;        /* 横 → 縦 */
    align-items: center;           /* 中央揃え */
    gap: 24px;                     /* 上下の間隔（お好みで） */
  }

  .wait-r, .wait-i{
    width: 100%;
    text-align: center;
  }
  .wait-r img{
    width: 80%;        /* お好みで 40〜80% */
    height: auto;
  }
  .wait-i img{
    width: 70px;      /* お好みで固定 or % でもOK */
    height: auto;
  }
/* wait-i の上下余白調整 */
.wait-i {
  padding-top: 20px;   /* 上の余白（お好みで 10〜40px に調整可） */
  padding-bottom: 40px;/* 下の余白（同上） */
  text-align: center;  /* センター配置を保つ */
}

.wait-i img {
  display: block;
  margin: 0 auto;      /* 画像の中央寄せを確実に */
}

/* アイコン画像リンク範囲の調整 */
.wait-i a {
  display: inline-block;   /* ← ブロックではなく「画像サイズに合わせる」 */
  width: auto;             /* ← 幅をリセット */
  height: auto;            /* ← 高さをリセット */
  text-decoration: none;   /* ← 下線を消す（任意） */
}

.wait-i img {
  display: block;          /* ← 画像の上下余白を消してきっちり収まる */
  width: 10vw;             /* ← ここは元のサイズ指定を維持 */
  height: auto;
  margin: 0 auto;          /* ← 中央寄せ */
}

	
}

/* ===========================
   Google セクション：Instagram アイコン調整
   =========================== */

/* PC用（768px以上） --------------------------- */
@media (min-width: 768px){

  .google-left .y-insta{
    margin-top: 20px;       /* アイコン上の余白 */
    text-align: center;     /* 中央寄せ */
  }

  .google-left .y-insta img{
    width: 180px;           /* ← PCのアイコンサイズ（お好みで） */
    height: auto;
    display: inline-block;
  }
	.jda-badge{
    width: 360px!important;        /* ←バナーを少し小さめに */
    max-width: 60%;
    margin-top: 0rem!important;   /* ←バナーを“もう少し上”へ寄せる */
  }
}
/* スマホ用（767px以下） --------------------------- */
@media (max-width: 767px){

  .google-left .y-insta{
    margin-top: 3vw;        /* 上の余白 */
    text-align: center;
  }

  .google-left .y-insta img{
    width: 25vw;            /* アイコンサイズ */
    height: auto;
    display: inline-block;
    margin-bottom: 6vw;      /* ← ★ここが「下の余白」 */
  }
}

/*=============================================================================================
スマホ画面サイズ（767px以下）のときだけ適用する
=============================================================================================*/
@media screen and (max-width: 767px) {
/* メインビジュアル */

#header {
	width:100vw;
  margin: 0 auto;
  position: relative;
  background: #fff;      /* 背景色だけ */
  padding-top: 0;
}	

#top-icon{
	position: absolute;
	top:9vw;
	left: 0;
	background: url(../img/logo.png) no-repeat;
	background-size: 80vw;
	width:100vw;
	padding-top:50vh;
	padding-left:0;
}

#top-con{
	display: none;
}
#top-con-sp{
	display: block;
	position: absolute;
	top:1vw;
	left:50%;
	transform: translateY(0) translateX(-50%);
  -webkit-transform: translateY(0) translateX(-50%);
	margin:0 auto;
	z-index:100;
}
#top-con-sp img{
	width:45vw;
}
.smile{
	position: absolute;
	bottom: -3vw;
	right:-5vw;
	z-index: 0;
}
.smile img{
	width:90vw;
}


/* 共通 */
.page-width{
	width:100vw;
	margin:0 auto;
	text-align: center;
}
.title-sp img{
	width:100vw;
	margin:0;
}
.title-right{
	text-align: right;
	padding:0 0;
}
.title-center{
	text-align: center;
	padding:0 0;
}
.title-left{
	text-align: left;
	padding:0 0;
}


/* 院長メッセージ 多分スマホ*/
#message{
	background:url(../img/background1.png) no-repeat center center;
	background-size:  auto;
	width:100vw;
	margin:0 0 0vw 0;
	padding: 3vw 0 3vw 0;
	height: auto;          /* ← これを追加 */
}
.mes1{
	margin-top:0;
	width:80vw;
}
.mes1 img{
	width:50vw;
}

.flex-contents{
	display: block;
}

.mes2{
	margin-top:3vw;
  padding-left:0;
	width:100vw;
}
.mes2 img{
	width: 50vw;
}

.mes3{
	width:100vw;
	margin-top:10vw;
}
.mes3 p{
	font-family: "Noto Sans", "Noto Sans CJK JP", sans-serif;
	font-size: 0.9rem;
	color:#454545;
	font-weight: 300;
	width:90vw;
	padding: 20px 0 0;   /* 上20px / 横0 / 下0 */
	line-height: 2;
	margin:0 auto;
	text-align: left;
}
.mes3 img{
	width:80vw;
}

.mes4{
	width:50vw;
	position:relative;
	bottom:20%;
	left:0px;
}


/* インフォメーション*/
/* インフォメーション（スマホ用・@media (max-width: 767px) の中） */
#info{
  background-image: url(../img/background8_sp.png) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center top !important; /* ここは一旦 top 固定でOK */
    height: auto;
    padding-top: 3.5rem;
    padding-bottom: 4.5rem;
    margin: 0 0 10vw;
}
#info .flex-contents{
	margin: 0 auto;
}
#info .title-center{
	height: auto;        /* ★ 20vh の固定高さをやめる＝①の白枠がぎゅっと詰まる */
}
/* ①の中でタイトル画像を配置 */
.info-title{
  position: relative;
  top: 0;              /* いったん0。もっと下にしたければ 2vw などに調整 */
}
.info-title img{
	width:70vw;
}
#info .sp-only{
	display: block;
}
/* インフォ：バリアフリーP45台 と チェアー7台(個室3台) の間の余白（スマホ） */
#info br.info-gap{
  display: block;        /* 行を分ける */
  margin-top: 0.3em;     /* 上の行との間隔 */
  margin-bottom: 0.3em;  /* 下の行との間隔 */
}

.info-add1{
	text-align:center;
	position: absolute;
	top:0;
	left:0;
	font-size: 0.65rem;
	color:#fff;
	padding:0 10px;
	line-height: 20px;
}
.info-add1 .tel1{
	text-align: left;
	position: static;
}
.info-add1 .tel1 a{
	font-size: 0.65rem;
	color:#fff;
	font-weight: 300;
}
/* 「木村歯科医院」ロゴをそのすぐ下へ */
.info-logo{
  position: relative;
  top: -6vw;            /* タイトルのすぐ下あたりに来るように少しだけ下げる */
}
.info-logo img{
	width:50vw!important;
}

.info-box1{
	text-align: center;
	margin: 10px auto 5px;  /* ★ 上200px → 20px くらいに */
    padding-top: 0;          /* ★ PCの100pxをリセット */
}
.info-box1 img{
	width: 85vw;
	margin-left: 0;
	margin-top: -75px;        /* 30px → 10px など、お好みで少なめに */
}
.info-box2{
	text-align: center;
}
.info-box2 img{
	width: 90vw;
	margin-bottom:10px;
}
.info-add-sp{
	font-size: 18px;
	line-height: 1.3;
	margin-top:5px;
	color:#fff;
}
.tel1-sp a{
	color:#fff;
	font-size: 18px;
} 
.info-left p{
	font-size: 13px;
	line-height: 1.5;
	width:90vw;
	padding-left: 50px;
}
.info-right{
	display: flex;
	padding:0;
	padding-left: 30px;
	width:90vw;
}
.info-right p{
	font-size: 13px;
	line-height: 1.5;
}
.info-right img {
	padding: 0 10px 0 0;
}

#info .flex-contents {
	justify-content: flex-start;
}
.info-mar{
	margin-top:5px;
}
@media (max-width: 767px){
  /* 2行目をブロック化して、ここで上下の間隔を調整する */
  #info .info-mar .info-second{
    display: block;
    margin-top: 0.1em;   /* ← この値を変えれば「間隔」を自由に調整できる */
  }
}
 /* クリニック紹介（SP） */
@media (max-width: 767px){
#clinic{
  background: none !important;
  width: 100% !important;          /* ★ 100vw → 100% に */
  padding: 0 1vw !important;       /* 左右に4vw分の余白 */
  margin: 0 auto !important;
  box-sizing: border-box;          /* ★ padding込みで100%に収める */
  text-align: left !important;
}

/* 1セットごとの余白 */
#clinic .clinic-row{
  margin-bottom: 10vw;
}

/* 上のテキスト部分（サブタイトル＋説明） */
#clinic .clinic-text{
  margin-bottom: 4vw;
}

#clinic .clinic-text .clinic-sub{
  color: #D8B41A;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 4px;
}

#clinic .clinic-text .clinic-subtext{
  color: #454545;
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.4;
}

/* 下の画像2枚を横並び2カラムに */
#clinic .clinic-detail{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1vw;
}

#clinic .clinic-img{
  margin: 0 !important;
}

#clinic .clinic-img img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
}
	}
 /* サブタイトル */
  #clinic .clinic-sub{
    font-size: 0.8rem!important;       /* ← 文字サイズ（例：1.1rem ≒ 17.6px） */
    font-weight: 600;        /* ← 太さ（500〜700が一般的） */
    color: #D8B41A;          /* ← 色 */
    margin-bottom: 0px!important;      /* ← 下の余白 */
    margin-top: 4vw;         /* ← 上の余白（必要に応じて調整） */
  }

  /* 説明文 */
  #clinic .clinic-subtext{
    font-size: 0.6rem!important;       /* ← 文字サイズ（例：0.9rem） */
    font-weight: 300;        /* ← 太さ */
    line-height: 1.5;        /* ← 行間（1.4〜1.7が読みやすい） */
    margin-bottom: 0!important;      /* ← 下の余白 */
    color: #444444!important;          /* ← 色 */
  }
  /* 2カラム画像幅の追加調整*/
  #clinic .clinic-detail{
    column-gap: 3vw;
  }

  #clinic .clinic-img img{
    width: 94% !important;       /* 画像を少し小さく */
    height: auto !important;
    display: block !important;
    margin: 0 -1 auto !important;   /* 左右を中央寄せにして白余白を作る */
  }
 .jet-cleaning {
  font-size: 1rem;        /* ホワイトニングと揃える（お好みで） */
  font-weight: 500;       /* 太さも揃える */
  color: inherit;         /* 同じ色にする */
  line-height: inherit;   /* 行間を揃える */
}
.shin-title {
  font-size: 1.2rem;
  font-weight: 500!important; 
  text-align: center;
  margin: 0;
}

.shin-text {
  font-size: 1rem;
  font-weight: 400!important;  /* ← 通常（細め） */
  text-align: center;
  line-height: 1.6;
}

.shin-text .jet-cleaning {
  font-size: 0.9rem;
  font-weight: 500!important;  /* ← これだけ太字 */
}
@media (max-width: 767px){

  /* clinic セクション全体に左右余白を 5vw ずつ付ける */
  #clinic .page-width{
    width: 90vw !important;  /* ← ここで左右 5vw の余白が生まれる */
    margin: 0 auto !important;
  }

  /* 画像2枚もちょうど中央に収まるように調整 */
  #clinic .clinic-detail{
    column-gap: 4vw !important;   /* ← 画像の間を自然に */
  }

  #clinic .clinic-img img{
    width: 100% !important;       /* → page-width が 90vw なので自然に狭くなる */
    margin: 0 auto !important;
    display: block;
  }
}
	
/*medical*/
/* =====================================
   スマホ専用バナー（sp-only）の調整
   ===================================== */
@media (max-width: 767px){

  /* sp-only の画像全体の表示方法 */
  .section-divider .sp-only{
    display: block;           /* ブロック要素化して自由に扱えるようにする */
    text-align: center;       /* 中央寄せ（左寄せ・右寄せも可） */
    margin-top: 0px;         /* 上の余白 */
    margin-bottom: 20px;      /* 下の余白 */
  }

  /* スマホ版タイトル画像のサイズ調整 */
  .section-divider .sp-only .medical-title{
    width: 80%;               /* 画像サイズ（例：80%） */
    max-width: 350px;         /* 最大幅（必要なら） */
    height: auto;             /* 比率維持 */
  }
}

	
	
/* インプラント */
#implant{
	background:url(../img/background2.png) no-repeat center center;
	background-size: auto;
	width:100vw;
	padding: 3vw 0 10vw 0;
	line-height: 2;
}
.implant-detail{
	justify-content: center;
	width:100vw;
}
.implant-detail p{
	font-size: 0.9rem;
	text-align:left;
	width:70vw;
	margin:0 auto;
}
.imp1{
	position: static;
	top:0;
	left: 0;
	margin:5vw;
}
.imp1 img{
	width:70vw;
}
.imp2{
	position: static;
	top:0;
	right:0;
	z-index:0;
	margin:5vw;
}
.imp2 img{
	width:70vw;
}




/* 矯正 */
/* 矯正（スマホ用新レイアウト） */
#kyosei{
  background: url(../img/background3.png) no-repeat center top;
  background-size: cover;
  width:100vw;
  height: auto !important;      /* ★ これを追加して固定高さを解除 */
  padding: 10vw 0 10vw !important;  /* 下の余白はお好みで 25〜40vw など */
}
/* PC用パーツはスマホでは非表示 */
#kyosei .kyosei-img1,
#kyosei .kyosei-img2{
  display:none;
}

/* pcOnly / spOnly の切り替え明示（他で使っていても安全） */
#kyosei .pcOnly{ display:none; }
#kyosei .spOnly{ display:block; }

.kyosei-sp{
  width: 90vw;
  margin: 0 auto;
}

/* 各期のブロック全体 */
.kyosei-sp-block{
  margin-bottom: 8vw;
}

/* 上のピンク帯（ロゴ＋見出し） */
.kyosei-sp-head{
  display:flex;
  align-items:center;
  gap: 3vw;
  background-color:#e3adad;
  padding: 3vw 4vw;
  margin-top: 4vw; /* ← 上に余白を追加（お好みで調整） */
  border-radius: 0px;
}

.kyosei-sp-head img{
  width: 16vw;
  height:auto;
}

.kyosei-sp-head p{
  font-size: 0.9rem;
  color:#fff;
  font-weight:400;
}

/* 下段：左テキスト＋右画像２枚縦積み */
.kyosei-sp-body{
  display:flex;
  align-items:flex-start;
  gap: 4vw;
  padding: 4vw 1vw 0;
}

.kyosei-sp-text{
  flex:1;
  font-size: 0.8rem;
  line-height: 1.7;
  text-align:left;
}

.kyosei-sp-imgs{
  width: 32vw;
  display:flex;
  flex-direction:column;
  gap: 3vw;
  align-items:center;
}

.kyosei-sp-imgs img{
  width:100%;
  height:auto;
  display:block;
}




/* 審美 */
#shinbi{
	background:url(../img/background4.png) no-repeat center center;
	background-size: auto;
	width:100vw;
	padding: 10vw 0 5vw 0;   /* ← 下側を20vw→8vwに圧縮 */
	margin:0 auto;
	text-align: center;
}
.shinbi-detail{
	margin:0 auto;
	text-align: center;
	width: 100vw;
}
.shin-img{
	width:100vw;
	margin:0 auto;
	text-align: center;
}
.shin-img img{
	margin:5vw 0 1vw 0;
	width:75vw;
}
.shin-box{
	margin-bottom: 40px;
	width: 100vw;
}
.shin-box p{
	width:100vw;
	font-size: 0.9rem;
	font-weight: 400;
	text-align: center;
	padding:0 10px;
	margin:0;
}
.shin-box p img{
	margin:0 15px;
	width:26px;
	height: 26px;
}

.shin-box p.shin-text{
	font-size:0.6rem;
	font-weight: 300;
	line-height: 1.3;
}
/* 審美：スマホ用レイアウト調整 */
  #shinbi .page-width{
    width: 90vw;          /* kyosei と同じ幅 */
    margin: 0 auto;       /* 画面中央に配置 */
  }

  #shinbi .shinbi-detail{
    display: flex;        /* flex のまま */
    flex-direction: column;
    align-items: center;  /* 中身を中央に寄せる */
  }

  #shinbi .shin-img{
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  #shinbi .shin-box{
    width: 100%;
  }

  #shinbi .shin-box p{
    width: 100%;
    text-align: center;
  }
/* 審美セクション：スマホで“箱”を中央寄せ＋画像もど真ん中にする */
  #shinbi{
    width: 100vw;
    padding: 10vw 0 5vw 0;
    margin: 0 auto;
    text-align: center;
  }

  #shinbi .page-width{
    width: 90vw;        /* ← kyosei と同じ感覚の細めの箱 */
    margin: 0 auto;     /* 画面中央に寄せる */
  }

  #shinbi .shinbi-detail{
    width: 100%;
    margin: 0 auto 6vw;
    display: block;     /* flex のままだと左右にぶれやすいので一旦縦積み */
    text-align: center;
  }

  #shinbi .shin-img{
    width: 100%;
    margin: 0 auto 4vw;
    text-align: center;
  }

  #shinbi .shin-img img{
    width: 80vw;             /* 画像も“箱”いっぱいに */
    max-width: 100%;
    display: block;          /* inline ではなく block にして */
    margin: 5vw auto 1vw;    /* ← 完全中央寄せ */
  }
/* 医療用CT */
#ct{
background: url(../img/background6.png) no-repeat center top;
  background-size: cover;       /* セクション全体をカバー */
  width: 100vw;
  padding: 10vw 0 5vw 0;
  margin: 0 auto;
  text-align: center;
}
.ct-detail{
	margin:0 auto;
	text-align: center;
	width: 100vw;
}
.ct-img{
	width:100vw;
	margin:0 auto;
	text-align: center;
}
.ct-img img{
	margin:5vw 0 1vw 0;
	width:75vw;
}
.ct-box{
	margin-bottom: 20px;
	width: 100vw;
}
.ct-box p{
	width:100vw;
	font-size: 0.8rem;
	font-weight: 400;
	text-align: center;
	padding:0 10px;
	margin:0;
}
.ct-box p img{
	margin:0 15px;
	width:26px;
	height: 26px;
}

.ct-box p.subtext-text{
	font-size:0.6rem;
	font-weight: 300;
	line-height: 1.3;
}	
/* ===============================
   スマホ専用：医療用CTのテキストと間隔調整
   =============================== */
@media (max-width: 767px){

  /* サブタイトル */
  #ct .ct-sub{
    font-size: 1rem;          /* ← サブタイトルの文字サイズ */
    font-weight: 600;
    margin-top: -2vw;          /* ← 上の余白 */
    margin-bottom: 3vw;       /* ← 下の余白（説明文との間） */
    color: #D8B41A;
    text-align: center;
  }

  /* 説明文 */
  #ct .ct-subtext{
    font-size: 0.8rem;       /* ← 説明文の文字サイズ */
    line-height: 1.6;         /* ← 説明文の行間 */
    font-weight: 300;
    margin-bottom: 0vw;       /* ← 画像との間を大きく・小さく調整 */
    padding: 0 6vw;           /* ← 左右の余白（読みやすく） */
    text-align: center;
  }

  /* 画像と上下の間隔 */
  #ct .ct-img img{
    width: 80vw;              /* ← 画像サイズ（75vw → 80vwなど調整可能） */
    margin-top: 0;
    margin-bottom: 6vw;       /* ← 画像下の余白（お好みで） */
  }
}

/* 衛生管理 */
.pc-only{
	display: none;
}
.sp-only{
	display: block;
}
.sp-x-only{
	display: none;
}
.eisei3{
	margin: 30px auto;
	position: static;
	width:80vw;
}
.eisei3 p{
	text-align: left;
	font-size: 0.8rem;
	line-height: 1.5;
}
.flex-contents-sp{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-around;
	width:100vw;
}
#eisei{
	background:url(../img/background5.png) no-repeat center center;
	background-size:  auto;
	width:100vw;
	height:auto;
	padding: 10vw 0 20vw 0;
}
.eisei1{
	position: static;
}
.eisei1 img,
.eisei2 img,
.eisei4 img
{
	width:43vw;
}
.eisei2{
	position: static;
}
.eisei4{
	position: static;
}

/* その他 */
#other{
	background:url(../img/background6.png) no-repeat center center;
	background-size: cover;
	width:100vw;
	height: 110vh;
	padding: 0 0 20vw 0;
}
#other .title-sp{
	padding:0;
	width:100vw;
	height: auto;
}
#other .title-sp img{
	width:100vw;
	margin-top:0;
}
#other .page-width{
	padding:0;
}
.oth1{
	padding-right:0;
	width:100vw;
}
.oth1 img{
	width:50vw;
}
.oth2{
	width:100vw;
}
.oth2 img{
	margin-top:10px;
	width:80vw;
}


/* スタッフ */
#staff{
	/* 250110変更 */
	/* height: 3530px; */
	height:auto;
	padding: 10vw 0 0vw 0;
}
.title-center img{
	width:90vw;
}
#staff-big-box1{
	position: relative;
}

  /* スタッフ紹介（青いボックス）の下余白を詰める */
  #staff-big-box1 .history {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* もし下の全体セクション(#staff)自体に余白が残る場合 */
  #staff {
    padding-bottom: 0 !important;
  }
 /* staff セクション木村清貴：写真左・プロフィール右の2カラムにする */
  #staff-big-box1 .staff-box {
    display: flex;                 /* flex に戻す */
    align-items: flex-start;
    justify-content: center;
    gap: 4vw;                      /* 写真と右カラムの間の余白 */
    margin-bottom: 0;              /* 下の余白を消しておく */
  }

  /* 左カラム：顔写真 */
  #staff-big-box1 .staff-img {
    width: 40vw;
    margin-left: 1vw;  /* ← 数値を調整（例：3vw〜5vwが自然） */
  }
  #staff-big-box1 .staff-img img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* 右カラム：ロゴ＋肩書＋名前＋サインを縦並びに */
  #staff-big-box1 .staff-prof {
    width: 56vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* ロゴ＋肩書＋名前を縦方向に積む */
  #staff-big-box1 .staff-prof .staff-title-row {
    display: flex;                 /* flex を復活 */
    flex-direction: column;        /* 縦並び */
    align-items: flex-start;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
  }

  #staff-big-box1 .staff-prof .staff-title-row img {
    width: 12vw;                   /* ロゴの大きさ（お好みで調整） */
    max-width: 70px;
    height: auto;
  }

  #staff-big-box1 .staff-prof h4 {
    font-size: 0.9rem;
  }
  #staff-big-box1 .staff-prof h3 {
    font-size: 1.2rem;
  }

  /* サイン画像はその下に */
  #staff-big-box1 .staff-prof .staff-sign-row {
    margin-top: 0.5rem;
  }
  #staff-big-box1 .staff-prof .staff-sign-row img.staff-name {
    width: 55vw;
    max-width: 220px;
    height: auto;
    margin: 0;
  }
/* 木村清貴さん：右カラムをセンター寄せ */
  #staff-big-box1 .staff-box .staff-prof {
    display: flex;
    flex-direction: column;
    align-items: center;   /* 子要素を中央寄せ */
    text-align: center;    /* テキストも中央揃え */
  }

  /* ロゴ＋肩書き＋名前の縦並びも中央に */
  #staff-big-box1 .staff-box .staff-prof .staff-title-row {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* サイン画像も中央に */
  #staff-big-box1 .staff-box .staff-prof .staff-sign-row img.staff-name {
    display: block;
    margin: 0 auto;
  }	
 /* staff セクション木村清貴：写真左・プロフィール右の2カラムにする ココまで*/
 /* staff セクション山本恵理子：写真左・プロフィール右の2カラムにする */
  #staff-big-box3 .staff-box {
    display: flex;                 /* flex に戻す */
    align-items: flex-start;
    justify-content: center;
    gap: 4vw;                      /* 写真と右カラムの間の余白 */
    margin-bottom: 0;              /* 下の余白を消しておく */
  }

  /* 左カラム：顔写真 */
  #staff-big-box3 .staff-img {
    width: 40vw;
    margin-left: 1vw;  /* ← 数値を調整（例：3vw〜5vwが自然） */
  }
  #staff-big-box3 .staff-img img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* 右カラム：ロゴ＋肩書＋名前＋サインを縦並びに */
  #staff-big-box3 .staff-prof {
    width: 56vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* ロゴ＋肩書＋名前を縦方向に積む */
  #staff-big-box3 .staff-prof .staff-title-row {
    display: flex;                 /* flex を復活 */
    flex-direction: column;        /* 縦並び */
    align-items: flex-start;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
  }

  #staff-big-box3 .staff-prof .staff-title-row img {
    width: 18vw;                   /* ロゴの大きさ（お好みで調整） */
    max-width: 70px;
    height: auto;
  }

  #staff-big-box3 .staff-prof h4 {
    font-size: 0.9rem;
  }
  #staff-big-box3 .staff-prof h3 {
    font-size: 1.2rem;
  }

  /* サイン画像はその下に */
  #staff-big-box3 .staff-prof .staff-sign-row {
    margin-top: 0.5rem;
  }
  #staff-big-box3 .staff-prof .staff-sign-row img.staff-name {
    width: 55vw;
    max-width: 220px;
    height: auto;
    margin: 0;
  }
/* 木村清貴さん：右カラムをセンター寄せ */
  #staff-big-box3 .staff-box .staff-prof {
    display: flex;
    flex-direction: column;
    align-items: center;   /* 子要素を中央寄せ */
    text-align: center;    /* テキストも中央揃え */
  }

  /* ロゴ＋肩書き＋名前の縦並びも中央に */
  #staff-big-box3 .staff-box .staff-prof .staff-title-row {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* サイン画像も中央に */
  #staff-big-box3 .staff-box .staff-prof .staff-sign-row img.staff-name {
    display: block;
    margin: 0 auto;
  }	
 /* staff セクション山本恵理子：写真左・プロフィール右の2カラムにする ココまで*/	
 /* staff セクション木村清和：写真左・プロフィール右の2カラムにする */
  #staff-big-box2 .staff-box {
    display: flex;                 /* flex に戻す */
    align-items: flex-start;
    justify-content: center;
    gap: 4vw;                      /* 写真と右カラムの間の余白 */
    margin-bottom: 0;              /* 下の余白を消しておく */
  }

  /* 左カラム：顔写真 */
  #staff-big-box2 .staff-img {
    width: 40vw;
    margin-left: 1vw;  /* ← 数値を調整（例：3vw〜5vwが自然） */
  }
  #staff-big-box2 .staff-img img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* 右カラム：ロゴ＋肩書＋名前＋サインを縦並びに */
  #staff-big-box2 .staff-prof {
    width: 56vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* ロゴ＋肩書＋名前を縦方向に積む */
  #staff-big-box2 .staff-prof .staff-title-row {
    display: flex;                 /* flex を復活 */
    flex-direction: column;        /* 縦並び */
    align-items: flex-start;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
  }

  #staff-big-box2 .staff-prof .staff-title-row img {
    width: 18vw;                   /* ロゴの大きさ（お好みで調整） */
    max-width: 70px;
    height: auto;
  }

  #staff-big-box2 .staff-prof h4 {
    font-size: 0.9rem;
  }
  #staff-big-box2 .staff-prof h3 {
    font-size: 1.2rem;
  }

  /* サイン画像はその下に */
  #staff-big-box2 .staff-prof .staff-sign-row {
    margin-top: 0.5rem;
  }
  #staff-big-box2 .staff-prof .staff-sign-row img.staff-name {
    width: 55vw;
    max-width: 220px;
    height: auto;
    margin: 0;
  }
/* 木村清貴さん：右カラムをセンター寄せ */
  #staff-big-box2 .staff-box .staff-prof {
    display: flex;
    flex-direction: column;
    align-items: center;   /* 子要素を中央寄せ */
    text-align: center;    /* テキストも中央揃え */
  }

  /* ロゴ＋肩書き＋名前の縦並びも中央に */
  #staff-big-box2 .staff-box .staff-prof .staff-title-row {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* サイン画像も中央に */
  #staff-big-box2 .staff-box .staff-prof .staff-sign-row img.staff-name {
    display: block;
    margin: 0 auto;
  }	
 /* staff セクション木村清和：写真左・プロフィール右の2カラムにする ココまで*/	
	
.staff-center{
	text-align: center;
	position: relative;
	z-index: 1000;
}
.staff-center img{
	display: none;
}

.staff-box {
	justify-content: center;
}
.staff-box .flex-contents{
	align-items: center;
	padding:0;
}
.staff-box h4{
	font-size: 0.9rem;
}
.staff-box h3{
	font-size: 1.2rem;
}
.staff-box .staff-img{
	margin:0;
	position: static;
	top:0;
	left:0;
	width:100vw;
	z-index: 10;
}
.staff-box .staff-img img{
	width:60vw;
}
.staff-box .staff-prof{
	width:100vw;
	position: static;
}
.staff-box .staff-prof img{
	width:10vw;
}
.staff-box .staff-prof img.staff-name{
	margin-left:0;
	margin:15px 0;
	width:60vw;
}
#staff-big-box1 .history{
	width:100vw;
	height: auto;          /* ← 400px 固定をやめて自動に */
	background-color: #cce3fa;
	margin:0 auto;
	position: static;
	top:400px;
	right:0;
	text-align: left;
	padding-bottom: 2rem;  /* 下に少し余白を足して、きれいに収める */
}
.history .staff-prof{
	margin:0;
	margin-left:0;
}
.history ul li{
	line-height: 1.7;
	font-size: 0.8rem;
	margin-left:5px;
 }
.history ul li img{
 vertical-align: middle;
 padding:0 10px;
}
.history h5{
	font-size: 0.9rem;
	color:#1277e1;
	margin-bottom:30px;
	padding:20px 20px 10px 20px;
	border-bottom: 1px #000 solid;
	width:100vw;
}
#staff-big-box2{
	position: static;
	margin-top:50px;
}
#staff-big-box2 h5{
	color:#2a3762;
}
#staff-big-box2 .history{
	width:100vw;
	height:250px;
	background-color: #cfd4e8;
	margin:0 auto;
	position: static;
	top:220px;
	right:0;
	text-align: left;
}
#staff-big-box3{
	position: static;
	margin-top:50px;
}
#staff-big-box3 h5{
	color:#eb7070;
}
#staff-big-box3 .history{
	width:100vw;
	height:300px;
	background-color: #f2d7d7;
	margin:0 auto;
	position: static;
	top:220px;
	right:0;
	text-align: left;
}
#staff-big-box4{
	position: static;
	margin-top:50px;
}
#staff-big-box4 h5{
	color:#68d8d0;
}
#staff-big-box4 .history{
	width:100vw;
	height:250px;
	background-color: #d6ebea;
	margin:0 auto;
	position: static;
	top:220px;
	right:0;
	text-align: left;
}
#staff-big-box5{
	display: block;
	height: auto;
}
.staff-btm1{
	background:url(../img/staff-back1.png) no-repeat center center;
	background-size: contain;
	width:355px;
	height: 300px;
	margin:2vw auto;
}
.staff-btm2{
	background:url(../img/staff-back2.png) no-repeat center center;
	background-size: contain;
	width:355px;
	height: 300px;
	margin:2vw auto;
}
#staff-big-box5 .flex-contents{
	margin:15vw 0;
}
#staff-big-box5 .flex-contents1{
	margin:15vw 0;
}
.staff-btm1 h4,
.staff-btm2 h4{
	font-size: 1.3rem;
	margin: 10vw 0 0 18vw;
	position: relative;
	top:10vw;
}
#staff-big-box5 .flex-contents ul{
	width:90vw;
	margin:0 auto;
}
#staff-big-box5 .flex-contents ul li{
	font-size: 0.9rem;
	text-align: center;
	width:90vw;
	/* 250110追加 */
	padding: 70px 0;
}
#staff-big-box5 .flex-contents ul li .staff-kira{
	width:5vw;
	height: auto;
}
#staff-big-box5 .flex-contents ul li span{
	padding:0 10px;
}
.staff-cmt{
	text-align: center;
}

/* 230428追加 */
#staff-big-box5 .flex-contents1 ul{
	line-height: 0.5;
	margin:0 auto;
}
#staff-big-box5 .flex-contents1 ul li{
	font-size: 0.7rem;
	text-align: left;
	width:92vw;
	padding-left:15px;
}
#staff-big-box5 .flex-contents1 ul li span{
	padding:0 6px;
}


#staff-big-box5 .flex-contents .staff-cmt ul li{
	font-size: 0.9rem;
	text-align: center;
	width:90vw;
}



/* スタッフ詳細：余白の詰め調整 */
#staff .history h5 {
  margin-bottom: 10px !important;   /* 下の余白を小さく */
  padding-bottom: 5px !important;   /* 線との間を詰める */
}

#staff .history ul {
  margin-top: 0 !important;         /* 上の余白をリセット */
  padding-top: 0 !important;
}

#staff .history ul li:first-child {
  margin-top: 0 !important;         /* 最初の行も詰める */
  padding-top: 0 !important;
}
/* 木村清貴さん：プロフィールの縦方向のスキマを少し詰める */
  #staff-big-box1 .staff-prof {
    row-gap: 0.1rem;   /* 全体のスキマを小さく */
  }

  #staff-big-box1 .staff-prof .staff-title-row {
    margin-bottom: 0.1rem;  /* 「院長」「木村 清貴」の下の余白 */
  }

  #staff-big-box1 .staff-prof .staff-sign-row {
    margin-top: 0.2rem;     /* サイン画像の上の余白 */
  }
/* 山本恵理子さん：プロフィールの縦方向のスキマを少し詰める */
 #staff-big-box3 .staff-prof {
    row-gap: 0.1rem;   /* 全体のスキマを小さく */
  }

  #staff-big-box3 .staff-prof .staff-title-row {
    margin-bottom: 0.1rem;  /* 「院長」「木村 清貴」の下の余白 */
  }

  #staff-big-box3 .staff-prof .staff-sign-row {
    margin-top: 0.2rem;     /* サイン画像の上の余白 */
  }


/* 木村清和さん：プロフィールの縦方向のスキマを少し詰める */
 #staff-big-box2 .staff-prof {
    row-gap: 0.1rem;   /* 全体のスキマを小さく */
  }

  #staff-big-box2 .staff-prof .staff-title-row {
    margin-bottom: 0.1rem;  /* 「院長」「木村 清貴」の下の余白 */
  }

  #staff-big-box2 .staff-prof .staff-sign-row {
    margin-top: 0.2rem;     /* サイン画像の上の余白 */
  }
/* 山本恵理子さんの略歴下の余白を詰める */
@media (max-width: 767px) {
  #staff-big-box3 .history {
    height: auto !important;
    padding-bottom: 12px; /* お好みで微調整 */
  }
}
@media (max-width: 767px){

  /* 各スタッフボックス共通：中央寄せ＋写真の下に同じ余白 */
  #staff-big-box1 .staff-box,
  #staff-big-box2 .staff-box,
  #staff-big-box3 .staff-box{
    width: 90vw;
    margin: 0 auto 4vw;   /* ← 下に 4vw の余白を追加 */
    gap: 4vw;
  }

  /* 共通：画像とテキストの幅調整 */
  #staff-big-box1 .staff-img,
  #staff-big-box2 .staff-img,
  #staff-big-box3 .staff-img{
    width: 30vw;
    margin-left: 0;
  }

  #staff-big-box1 .staff-prof,
  #staff-big-box2 .staff-prof,
  #staff-big-box3 .staff-prof{
    width: 53vw;
  }

  /* 略歴・所属テキスト 左余白 */
  #staff-big-box1 .history ul li,
  #staff-big-box2 .history ul li,
  #staff-big-box3 .history ul li{
    padding-left: 5vw !important;
  }

  #staff-big-box1 .history h5,
  #staff-big-box2 .history h5,
  #staff-big-box3 .history h5{
    padding-left: 5vw !important;
  }
}


/* 採用情報 */
#recruit{
	background:url(../img/background9.png) no-repeat center center;
	background-size: auto;
	width:100vw;
	/* 250110変更 */
	/* height: 65vh; */
	height: 550px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 40vw;
}
.rec1{
	position: relative;
	top:-27px;
	left:50%;
	transform: translateX(-50%);   /* ← これで正確に中央寄せ */
    width: 90vw;                   /* 100vw → 90vw にすると自然な中央寄せ */
    text-align: center;
}
.rec1 img{
	 width: 100%;                   /* コンテナに合わせて拡縮 */
	height: auto;
    display: block;
    margin: 0 auto;
	}
.rec2{
	position: absolute;
	top:100px;
}
.rec2 img{
	width: 70vw;
}
.rec3{
	position: absolute;
	top:200px;
	width:95vw;
}
.rec3 p{
	font-size: 0.7rem;
	text-align: center;
}
.rec4{
	position: absolute;
	top:280px;
	width: 100vw;
}
.rec4 img{
	width: 90vw;
}



/* アクセス */
#google{
	width: 100vw;
	margin: 0 auto;
}
#google iframe{
	margin: 0 auto;
}
.google-left{
	width:100vw;
	padding:10vw 0 0 0;
}
.google-left img{
	width:90vw;
}
.google-left p{
	position:static;
	margin-left: calc(0 / 700 * 100%);
	margin:0 auto;
	text-align: center;
}

.google-right{
	width:100vw;
	text-align: center;
	padding:10vw 0 0 0;
}
.google-right img{
	width:100vw;
}
.google-right a p{
	position:static;
	font-size: 0.7rem;
	margin:0 auto;
	text-align: center;
	margin-bottom:0;
	margin-left: calc(0 / 700 * 100%);
	padding-bottom:0;
}


	
.flex-contents2{
	display: block;
	width: 100vw;
	text-align: center;
	padding-top:30px;
	padding-bottom: 30px;
}

.wait-r{
	padding: 10px;
}

.wait-r img{
	width: 85vw;
}
.wait-i{
	padding: 10px;
}

.wait-i img{
	width: 30vw;
}
@media (max-width: 767px){
  .google-left p.hp-link{
    position: static !important;       
    margin: 3vw auto 2vw !important;    
    text-align: center !important;      
    font-size: 4vw !important;          
    color: #454545 !important;          
  }
}

/* --- MAP手前の余白を詰める（最終オーバーライド） --- */

	
	
/* スマホ */
@media (max-width: 767px) {
  /* 採用セクションとMAPの間をぐっと詰める */
  #recruit { 
    margin-bottom: 6vw !important;   /* 40vw → 6vw に縮小 */
  }

  /* MAP側の余白も軽く圧縮 */
  .google-left,
  .google-right {
    padding-top: 20vw !important;     /* 10vw → 2vw */
	padding-bottom: 20vw !important;     /* 10vw → 2vw */
  }

  .flex-contents2 {
    padding-top: 8px !important;     /* 30px → 8px */
    padding-bottom: 8px !important;  /* 30px → 8px */
  }

  /* 念のため、MAPコンテナの上マージンはゼロ固定 */
  #google { 
    margin-top: 0 !important; 
  }
}

/*アクセス y_insta コンテナ（上下の余白など） */
  .google-left .y-insta {
    text-align: center;
    padding-top: 4vw;     /* ←ここを調整 */
    padding-bottom: 4vw;  /* ←ここを調整 */
    margin-top: 3vw;      /* ←ここを調整 */
    margin-bottom: 3vw;   /* ←ここを調整 */
  }

  /* y_insta の画像サイズ */
  .google-left .y-insta img {
    width: 20vw!important;   /* ← スマホではこの数値が画像サイズ */
    height: auto;
    margin: 0 auto;    /* 中央寄せ */
  }	
/* contact1_sp.png の画像サイズを調整 */
  .google-left .sp-only img {
    width: 90vw;     /* ← 好きな数値に変更 */
    height: auto;
    margin: 0 auto!important;  /* 中央寄せ */
    padding-top: 0vw;   /* ← 必要なら余白追加 */
    padding-bottom: 0vw;
  }
	

}
@media (max-width: 767px){
  .google-left .p.hp-link{
    font-size: 14px;     /* スマホ用に少し小さめ */
    margin-top: 8px;
    margin-bottom: 12px;
	color: #454545 !important;
    text-align: center;
  }
}

/*=============================================================================================
画面幅が960px以下 かつ 画面が横向きのときにだけ適用される 
/*=============================================================================================*/
@media screen and (max-width: 960px) and (orientation: landscape) {
	/* メインビジュアル */
	
	#header {
		background-size:cover;
		padding-top:100vh;
		width:100vw;
		height: auto;
		margin: 0 auto;
		position: relative;
	}	
	
	#top-icon{
		position: absolute;
		top:0;
		left: 0;
		background: url(../img/logo.png) no-repeat;
		background-size: 40vw;
		width:100vw;
		padding-top:50vh;
		padding-left:0;
	}
	
	#top-con{
		display: block;
		width: 30vw;
	}
	#top-con .sp-only{
		display: none;
	}
	#top-con-sp{
		display: none;
	}
	#top-con-sp img{
		display: none;
	}
	.smile{
		position: absolute;
		bottom: -3vw;
		right:-5vw;
		z-index: 0;
	}
	.smile img{
		width:70vw;
	}
	
	
	/* 共通 */
	.page-width{
		width:100vw;
		margin:0 auto;
		text-align: center;
	}
	.title-sp img{
		width:90vw;
		margin:0;
	}
	.title-right{
		text-align: right;
		padding:0 0;
	}
	.title-center{
		text-align: center;
		padding:0 0;
	}
	.title-left{
		text-align: left;
		padding:0 0;
	}
	
	
	/* 院長メッセージ */
	#message{
		background:url(../img/background1.png) no-repeat center center;
		background-size: auto;
		width:100vw;
		margin:0 auto;
		padding: 5vw 0;
	}
	.mes1{
		margin-top:0;
		width:80vw;
	}
	.mes1 img{
		width:50vw;
	}
	
	.flex-contents{
		display: block;
	}
	
	.mes2{
		margin-top:0;
		padding-left:0;
		width:100vw;
	}
	.mes2 img{
		width: 30vw;
	}
	
	.mes3{
		width:100vw;
		margin-top:3vw;
	}
	.mes3 p{
		font-family: "Noto Sans", "Noto Sans CJK JP", sans-serif;
		font-size: 0.9rem;
		color:#454545;
		font-weight: 300;
		width:90vw;
		padding: 30px 0;
		line-height: 2;
		margin:0 auto;
	}
	.mes3 img{
		width:80vw;
	}
	.mes4{
		width:30vw;
		position:relative;
		bottom:30%;
		left:0px;
	}
	
	
	
	/* インプラント */
	#implant{
		background:url(../img/background2.png) no-repeat center center;
		background-size: auto;
		width:100vw;
		padding:0;
		line-height: 2;
		position: relative;
	}
	.implant-detail{
		justify-content: sta;
		width:100vw;
	}
	.implant-detail p{
		font-size: 1rem;
		font-weight: 300;
	}
	.imp1{
		position: absolute;
		top:50%;
		left: 5%;
		margin:0;
		width:40vw;
	}
	.imp1 img{
		width:40vw;
	}
	.imp2{
		position: absolute;
		top:50%;
		right:5%;
		margin:0;
		width:40vw;
	}
	.imp2 img{
		width:40vw;
	}
	
	
	
	/* 矯正 */
	#kyosei{
		background:url(../img/background3.png) no-repeat center center;
		background-size: cover;
		width:100vw;
		padding: 5vw 0;
	
	}
	.kyosei-img1{
		text-align: left;
		padding-top:5vw;
		padding-bottom:5vw;
		margin-top:0;
	}
	.kyo1{
		width:100vw;
		margin:12px 0;
		position: relative;
	}
	.kyo-t1{
		font-size: 1.5rem;
		color:#fff;
		position: absolute;
		top:22vw;
		left:3vw;
		font-weight: 400;
	}
	.kyo-t2{
		font-size: 1rem;
		color:#454545;
		position: absolute;
		top:32vw;
		left:3vw;
		line-height: 2;
	}
	
	.kyosei-img2{
		text-align: left;
		padding-top:10vw;
		padding-bottom:20vw;
	}
	.kyo2{
		width:100vw;
		margin:12px 0;
		position: relative;
	}
	.kyo-t3{
		font-size: 1.5rem;
		color:#fff;
		position: absolute;
		top:27vw;
		left:3vw;
		font-weight: 400;
	}
	.kyo-t4{
		font-size: 1rem;
		color:#454545;
		position: absolute;
		top:37vw;
		left:3vw;
		line-height: 2;
	}
	
	
	
	/* 審美 */
	#shinbi{
		background:url(../img/background4.png) no-repeat center center;
		background-size: auto;
		height: auto;
		padding: 5vw 0;
		margin:0 auto;
		text-align: center;
	}
	.shinbi-detail{
		margin:0 auto;
		text-align: center;
		width: 100vw;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}
	.shin-img{
		width:100vw;
		margin:0 auto;
		text-align: center;
	}
	.shin-img img{
		margin:5vw 0;
		width:35vw;
	}
	.shin-box{
		margin-bottom: 20px;
		width: 50vw;
	}
	.shin-box p{
		width:50vw;
		font-size: 1.5rem;
		font-weight: 400;
		text-align: center;
		padding:0 10px;
		margin:0;
	}
	.shin-box p img{
		margin:0 15px;
		width:26px;
		height: 26px;
	}
	.shin-box p.shin-text{
		font-size:1rem;
		font-weight: 300;
		line-height: 1.3;
	}
	
	
	/* 衛生管理 */
	.pc-only{
		display: none;
	}
	#eisei .sp-only{
		display: block;
	}

	.eisei3{
		margin: 30px auto;
		position: static;
		width:78vw;
	}
	.eisei3 p{
		text-align: center;
		font-size: 0.9rem;
		line-height: 1.5;
	}
	.flex-contents-sp{
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		justify-content: space-around;
		width:100vw;
	}
	#eisei{
		background:url(../img/background5.png) no-repeat center center;
		background-size: auto;
		width:100%;
		padding: 5vw 0;
	}
	.eisei1{
		position: static;
	}
	.eisei1 img,
	.eisei2 img,
	.eisei4 img
	{
		width:30vw;
	}
	.eisei2{
		position: static;
	}
	.eisei4{
		position: static;
	}
	
	/* その他 */
	#other{
		background:url(../img/background6.png) no-repeat center center;
		background-size: cover;
		width:100vw;
		height: 650px;
		padding:5vw 0;
	}
	#other .flex-contents{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		width:100vw;
		position: relative;
	}
	#other .title-sp{
		padding:0;
		width:50vw;
		height: auto;
	}
	#other .title-sp img{
		width:50vw;
		margin-top:0;
	}
	#other .page-width{
		padding:0;
	}
	.oth1{
		padding-right:0;
		width:30vw;
		position: absolute;
		left:43%;
		top:-10px;
		z-index: 100;
	}
	.oth1 img{
		width:30vw;
	}
	.oth2{
		padding-right:0;
		width:50vw;
		position: absolute;
		top:85%;
		right: 15px;
	}
	.oth2 img{
		margin-top:20px;
		width:50vw;
	}
	
	
	/* スタッフ */
	#staff{
		padding: 5vw 0;
		background: url(../img/background7.png) no-repeat center center;
    background-size: auto;
    height: 4250px;
	}
	.title-center img{
		width:80vw;
	}
	#staff-big-box1{
		position: relative;
	}
	.staff-center{
		text-align: center;
		position: relative;
		z-index: 1000;
	}
	.staff-center img{
		display: none;
	}
	
	.staff-box {
		justify-content: center;
	}
	.staff-box .flex-contents{
		align-items: center;
		padding:0;
	}
	.staff-box h4{
		font-size: 0.9rem;
	}
	.staff-box h3{
		font-size: 1.2rem;
	}
	.staff-box .staff-img{
		margin:0;
		position: static;
		top:0;
		left:0;
		width:100vw;
		z-index: 10;
	}
	.staff-box .staff-img img{
		width:40vw;
	}
	.staff-box .staff-prof{
		width:100vw;
		position: static;
	}
	.staff-box .staff-prof img{
		width:10vw;
	}
	.staff-box .staff-prof img.staff-name{
		margin-left:0;
		margin:15px 0;
		width:60vw;
	}
	#staff-big-box1 .history{
		width:90vw;
		height:400px;
		background-color: #cce3fa;
		margin:0 auto;
		position: static;
		top:400px;
		right:0;
		text-align: left;
	}
	.history .staff-prof{
		margin:0;
		margin-left:0;
	}
	.history ul li{
		line-height: 1.7;
		font-size: 0.8rem;
		margin-left:5px;
	 }
	.history ul li img{
	 vertical-align: middle;
	 padding:0 10px;
	}
	.history h5{
		font-size: 0.9rem;
		color:#1277e1;
		margin-bottom:30px;
		padding:20px 20px 10px 20px;
		border-bottom: 1px #000 solid;
		width:90vw;
	}
	#staff-big-box2{
		position: static;
		margin-top:50px;
	}
	#staff-big-box2 h5{
		color:#2a3762;
	}
	#staff-big-box2 .history{
		width:90vw;
		height:250px;
		background-color: #cfd4e8;
		margin:0 auto;
		position: static;
		top:220px;
		right:0;
		text-align: left;
	}
	#staff-big-box3{
		position: static;
		margin-top:50px;
	}
	#staff-big-box3 h5{
		color:#eb7070;
	}
	#staff-big-box3 .history{
		width:90vw;
		height:300px;
		background-color: #f2d7d7;
		margin:0 auto;
		position: static;
		top:220px;
		right:0;
		text-align: left;
	}
	#staff-big-box4{
		position: static;
		margin-top:50px;
	}
	#staff-big-box4 h5{
		color:#68d8d0;
	}
	#staff-big-box4 .history{
		width:90vw;
		height:250px;
		background-color: #d6ebea;
		margin:0 auto;
		position: static;
		top:220px;
		right:0;
		text-align: left;
	}
	
#staff-big-box5 .flex-contents{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin:6vw 0;
}
.staff-btm1{
	background:url(../img/staff-back1.png) no-repeat center center;
	background-size: contain;
	width:45vw;
	height: 400px;
	margin:2vw;
}
.staff-btm2{
	background:url(../img/staff-back2.png) no-repeat center center;
	background-size: contain;
	width:45vw;
	height: 400px;
	margin:2vw;
}

.staff-btm1 h4,
.staff-btm2 h4{
	font-size: 1.3rem;
	margin:0 0 0 10vw;
	position: relative;
	top:5vw;
}
#staff-big-box5 .flex-contents1{
	margin: 20px 4px 0;
}

#staff-big-box5 .flex-contents ul{
	width:45vw;
	margin:0 auto;
}
#staff-big-box5 .flex-contents1 ul{
	line-height: 0.8;
}

#staff-big-box5 .flex-contents ul li{
	font-size: 1rem;
	text-align: left;
	width:45vw;
}
#staff-big-box5 .flex-contents1 ul li .staff-kira{
	width:3vw;
	height: auto;
}

#staff-big-box5 .flex-contents ul li span{
	padding:0 10px;
}
.staff-cmt{
	text-align: center;
}
#staff-big-box5 .flex-contents .staff-cmt ul li{
	font-size: 1rem;
	text-align: center;
	width:45vw;
}	
	
	
	/* インフォメーション */
	#info{
		/* padding-top: 5rem;
		padding-bottom: 8rem; */
		margin-bottom:30vw;
		background: url(../img/background8.png) no-repeat center;
    background-size: auto;
    height: 1100px;
	}

	#info .flex-contents{
		margin: 0 auto;
	}
	#info .title-center{
		height: 70vh;
	}
	.info-title{
		position: relative;
		top:0;
	}
	.info-title img{
		width:80vw;
	}
	.info-add .pc-only{
		display: block;
	}
	.info-add .tel1{
		text-align: center;
	}
	.info-add1{
		text-align:center;
		position: absolute;
		top:0;
		left:0;
		font-size: 0.65rem;
		color:#fff;
		padding:0 10px;
		line-height: 20px;
	}
	.info-add1 .tel1{
		text-align: left;
		position: static;
	}
	.info-add1 .tel1 a{
		font-size: 0.65rem;
		color:#fff;
		font-weight: 300;
	}
	.info-logo{
		position: relative;
		top:-20vw;
	}
	.info-logo img{
		width:50vw;
	}
	.info-box1{
		text-align: center;
		margin:80px 0 0 0;
	}
	.info-box1 img{
		width: 70vw;
		margin-left: 0;
	}
	.info-box2{
		text-align: center;
	}
	.info-box2 img{
		width: 100vw;
		margin-bottom:10px;
	}
	.info-add-sp{
		font-size: 18px;
		line-height: 1.3;
		margin-top:20px;
		color:#fff;
	}
	.tel1-sp a{
		color:#fff;
		font-size: 18px;
	} 
	.info-btm{
		display: flex;
		display:-webkit-box;
		display:-ms-flexbox;

		width:100vw;
		padding-left: 60px;
	}
	.info-left p{
		font-size: 0.7rem;
		line-height: 1.5;
		width:40vw;
		padding-left: 60px;
	}
	.info-right{
		display: flex;
		padding:0;
		padding-left: 30px;
		width:40vw;
	}
	.info-right p{
		font-size: 0.7rem;
		line-height: 1.5;
	}
	.info-right img {
		padding: 0 10px 0 0;
	}
	
	#info .flex-contents {
		justify-content: flex-start;
	}
	.info-mar{
		margin-top:5px;
	}

	
	
	/* 採用情報 */
	#recruit{
		background:url(../img/background9.png) no-repeat center center;
		background-size: cover;
		width:100vw;
		margin: 0 auto;
		text-align: center;
		margin-bottom: 10rem;
		position: relative;
	}
	.rec1{
		position: absolute;
		top:-200px;
		left:50%;
		transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
	}
	.rec1 img{
		width:80vw;
	}
	.rec2{
		position: absolute;
		top:220px;
		left:49%;
		transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
	}
	.rec3{
		position: absolute;
		top:410px;
		left:49%;
		transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
	}
	.rec3 p{
		font-size:25px;
		width: 100vw;
	}
	.rec4{
		position: absolute;
		top:540px;
		left:49%;
		transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
	}
	.rec4 img{
		width:70vw;
	}
	
	
	
	/* アクセス */
	.sp-x-only{
		display: block;
	}
	.sp-only{
		display: none;
	}
	.pc-only{
		display: none;
	}

	#google{
		width: 100vw;
		margin: 0 auto;
		text-align: center;
	}
	#google .flex-contents{
		display: flex;
  	display:-webkit-box;
		display:-ms-flexbox;
		justify-content: center;
	}

	.google-left{
		width:50vw;
		/* height:400px; */
		background-color: #e7e4dd;
		text-align: center;
		padding:2rem 0;
		display: block;
		position: relative;
	}
	.google-left p{
		position:static;
	margin-left: calc(0 / 700 * 100%);
	margin:0 auto;
	text-align: center;
	}
	.google-left img{
		width:50vw;
	}
	.google-right{
		width:50vw;
		/* height:400px; */
		background-color: #b1aa9b;
		text-align: center;
		padding:2rem 0;
		display: block;
		position: relative;
	}
	.google-right img{
		width:50vw;
	}
	.google-right a p{
		position:static;
		bottom:0;
	font-size: 0.8rem;
	margin:0 auto;
	text-align: center;
	margin-bottom:0;
	margin-left: calc(0 / 700 * 100%);
	padding-bottom:10vw;
	}

	.flex-contents2{
	}

	.wait-r img{
		width: 45vw;
		margin:5vw 1vw;
	}
	
}	

@media screen and (max-width: 700px) and (orientation: landscape) {

	/* インプラント */
	.implant-detail p{
		font-size: 1rem;
		text-align: center;
	}


/* その他 */

#other{
	background:url(../img/background6.png) no-repeat center center;
	background-size: cover;
	width:100vw;
	height: 600px;
	padding: 10vw 0;
}

/* スタッフ */

#staff {
	padding: 5vw 0;
	background: url(../img/background7.png) no-repeat center center;
	background-size: auto;
	height: 4400px;
}
.staff-btm1, .staff-btm2{
	height: 300px;
}
.staff-btm1 h4, .staff-btm2 h4 {
	font-size: 1rem;
	margin:2vw;
	position: relative;
	top: 7vw;
	left:5vw;
}
#staff-big-box5 .flex-contents ul {
	margin-top:30px;
}
#staff-big-box5 .flex-contents ul li {
	font-size: 1rem;
	text-align: left;
	width: 45vw;
	padding:5px 0;
}
#staff-big-box5 .flex-contents ul li span {
	padding: 1vw;
	font-size: 1rem;
}
#staff-big-box5 .flex-contents ul li img {
	width: 20vw;
}
#staff-big-box5 .flex-contents {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin: 0;
}
#staff-big-box5 .flex-contents ul li .staff-kira {
	width: 3vw;
	height: auto;
	margin-left: 2vw;
}
#staff-big-box5 .flex-contents .staff-cmt ul li {
	font-size: 0.85rem;
	text-align: center;
	width: 45vw;
	padding:10px 0;
}


/* インフォメーション */

.info-title{
	position: relative;
	top:-100px;
}

.info-logo{
	position: relative;
	top:-220px;
}
#info .sp-only {
	display: none;
}
.info-box1{
	position: relative;
	top:-20px;
}

#info .title-center {
	height: 50vh;
}


/* 採用情報 */
#recruit {
	background: url(../img/background9.png) no-repeat center center;
	background-size: auto;
	width: 100vw;
	height: 700px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 10rem;
	position: relative;
}

.rec2{
	position: absolute;
	top:130px;
}
.rec2 img{
	width: 80vw;
}
.rec3{
	position: absolute;
	top:350px;
}
.rec3 p{
	width: 100vw;
 }
 .rec4{
	position: absolute;
  bottom:-50vw;
}
.rec4 img{
		width: 60vw;
}


/* アクセス */

.pc-only{
	display: none;
}
.sp-x-only{
	display:block;
}
.sp-only{
	display:none;
}

}

/* ===============================
   Header new layout (PC完成形 / SP完成形)
   =============================== */
#header{
  background: #fff;     /* 白背景にするだけ */
  width: 100vw;
  margin: 0 auto;
  position: relative;
  padding-top: 0;       /* 高さは .img-frame に任せる */
}

/* 旧要素は非表示にする（残置してもOK） */
#top-icon, #top-con, #top-con-sp { display: none !important; }

#header .header-inner{
   /* position: absolute;  ← 消す */
  /* top: 12px; left: 0; right: 0; ← 消す */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;   /* 上下にも少し余白を付ける */
}

/* ロゴ */
#header .logo img{
  height: 80px;        /* PC完成形に近い見え方 */
  width: auto;
}

/* PCアクション部（カレンダー・インスタ・TELボタン） */
#header .actions.pc-only{
  display: flex;
  align-items: center;
  gap: 20px;
}
#header .actions .ico img{
  width: 32px; height: 32px; /* 256px素材を縮小 */
}
#header .actions .telbtn img{
  height: 96px; width: auto; /* header-info.pngをそのままボタン表示 */
}

/* ------- SP（～767px） ------- */
/* ==== レイアウト保険（共通） ==== */
html, body { overflow-x: hidden; }        /* 横スクロール防止 */
#header { width: 100% !important; }       /* 100vwのズレ対策 */

@media (max-width: 767px){

  /* ヒーロー部の縦感（必要なら調整） */
  #header{ 
    padding-top: 0; 
  }

  /* ヘッダー内コンテンツを縦積み＆中央寄せ */
  #header .header-inner{
    padding: 0 12px;
    display: flex;
    flex-direction: column;     /* ← 縦積み */
    align-items: center;        /* ← 中央寄せ */
    gap: 10px;
  }

  /* PC用アクションは隠す */
  #header .actions.pc-only{ 
    display: none; 
  }

  /* SP用アクションは表示 */
  #header .actions.sp-only{
    display: flex;
    flex-direction: column;     /* ← 縦積み */
    align-items: center;
    gap: 10px;
    order: 1;                   /* TEL＋アイコンを上に */
  }

  /* ====== 上段：TEL＋アイコン行 ====== */
  #header .actions.sp-only .top-row{
    display: flex;
    align-items: center;
    justify-content: center;  /* 右寄せ（中央にしたい場合は center） */
    gap: 12px;                  /* アイコンとの間隔 */
    width: 100%;
    margin-top: 5px !important;  /* ← お好みで 5〜15px に */
    margin-bottom: -3px;
  }

  /* TEL（電話番号画像）サイズ */
  #header .actions.sp-only .top-row .telbtn-sp img{
    height: 20px !important;
    width: auto !important;
  }

  /* ★アイコン画像サイズ（ここが効く！） */
  #header .actions.sp-only .top-row .ico img{
    width: 20px !important;     /* ← お好みで 10?24px など */
    height: 20px !important;    /* 高さ固定。比率維持なら height:auto でも可 */
  }

  /* ====== 下段：ロゴ ====== */
  #header .logo{
    order: 3;                   /* 明示的に一番下へ */
    text-align: center;
    margin-top: -20px;          /* ロゴを少し上に寄せる */
  }
  #header .logo img{
    height: 62px;               /* ロゴの見え方調整 */
    width: auto;
    margin-left: -15px;         /* 位置の微調整（不要なら削除） */
  }
}
/*Header new layout (PC完成形 / SP完成形)ここまで*/

/* インプラント */
/* ===============================
   SP（～767px）：implant セクション最終版
   - テキスト .txt1 の体裁
   - 2画像（.imp1/.imp2）を横並び＆小さめ
   - 画像下の余白調整（ブロック全体）
   =============================== */
@media screen and (max-width: 767px){

  /* テキスト装飾：スマホ用に少し小さめ */
  .txt1{
    font-size: 0.7rem !important;      /* スマホ用に少し小さめ */
    line-height: 1.8;                   /* 行間をゆったり */
    color: #000;                        /* 落ち着いた文字色 */
    font-weight: 300;                   /* やや軽め */
    text-align: left;                   /* 左揃え（必要に応じて） */
    padding: 10px 20px;                 /* 左右余白を追加 */
  }

  /* セクションの固定高さを解除＋下に少し余白 */
  #implant{
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 10px !important;    /* 0?20pxでお好み */
  }

  /* 親をフレックス：2画像を横並びに、間隔を少し詰める */
  #implant .implant-detail{
    display: flex !important;           /* 既存の display:block を打ち消す */
    flex-wrap: wrap !important;         /* はみ出し防止 */
    justify-content: center !important; /* 中央寄せ */
    gap: 6px !important;                /* 画像間のすき間（4?12pxで調整可） */
    margin-bottom: 30px !important;     /* ② 2枚まとめて下全体に余白 */
    width: 100% !important;
  }

  /* テキストは1段目に全幅表示（画像の上） */
  #implant .implant-detail > p{
    width: 100% !important;
    margin: 0 0 10px !important;
    text-align: center !important;
  }

  /* 子要素（画像ボックス）を2列化。位置指定は無効化 */
  #implant .implant-detail > .imp1,
  #implant .implant-detail > .imp2{
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important;
    flex: 0 0 46% !important;           /* 画像を小さめに（42?48%で調整可） */
    max-width: 46% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 画像は親幅いっぱい・下の隙間ナシ */
  #implant .implant-detail img{
    display: block !important;          /* 行内要素由来の下隙間を消す */
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
}

/* 横向き 700px 以下でも同等の見え方に */
@media screen and (max-width: 700px) and (orientation: landscape){
  #implant .implant-detail{ gap: 6px !important; }
  #implant .implant-detail > .imp1,
  #implant .implant-detail > .imp2{
    flex: 0 0 46% !important;
    max-width: 46% !important;
  }
}
/* インプラントここまで */


/* ===== footer contact layout (PC & SP 共通) ===== */
.contact-block{
  display:flex;
  flex-direction:column;   /* 画像 → バナー → コピーライト の縦並び */
  align-items:center;
  gap: 0.75rem;            /* 各要素の間隔 */
}
.contact-tel{ display:inline-block; }  /* クリック範囲を電話画像だけに限定 */
.contact-title{
  display:block;
  max-width: 560px;        /* 電話画像の最大幅（必要に応じ調整） */
  width: 90%;
  height:auto;
}
.jda-badge{
  display:block;
  width: 360px;            /* PC基準のバナー幅 */
  max-width: 70%;
  height:auto;
  margin-top: .25rem;      /* 電話画像との間隔を少しだけ */
}
.google-right .copyright{
  position: static !important;  /* 既存の absolute 指定を無効化 */
  margin: .25rem 0 0;           /* バナーのすぐ下に寄せる */
  text-align:center;
  font-size: 18px;              /* 元サイズ感に合わせて調整可 */
  line-height: 1.6;
}

/* ===== スマホ最適化 ===== */
@media (max-width: 767px){
  .contact-title{ width: 92%; max-width: 480px; }
  .jda-badge{
    width: 260px;        /* ←バナーを少し小さめに */
    max-width: 60%;
    margin-top: .2rem;   /* ←バナーを“もう少し上”へ寄せる */
  }
  .google-right{ padding-top: 6vw; }  /* 余白が多ければ 0～4vw に下げてもOK */
  .google-right .copyright{
    font-size: 14px;
    margin-top: .2rem;   /* バナー直下に詰める */
  }
}

/* =============== PC 調整 =============== */
@media (min-width: 768px){
  /* 右カラムの中身（電話画像＋バナー＋コピーライト）を中央に集約 */
  .contact-block{
    /* 既に column だと思うのでそのまま */
    align-items: center;            /* 横方向の中央寄せを強制 */
    justify-content: flex-start;    /* コピーライトを除く塊を上から並べる */
    gap: 0.1rem;                    /* 要素間の間隔（お好みで） */

    /* かたまり全体の幅を絞って “面のど真ん中” に配置 */
    max-width: 560px;               /* ここを広げ/狭めで微調整 */
    margin: 0 auto;                 /* 左右の中央に */
  }

  /* 電話画像（リンクボタン）とバナーの見た目調整 */
  .contact-title{
    width: 90%;
    max-width: 560px;               /* 電話画像の最大幅 */
  }
  .jda-badge{
    width: 340px;                   /* バナーのPC幅（好みで 300〜380px 程度） */
    max-width: 70%;
    margin-top: .3rem;
	transform: translateY(-64px);
  }
/* 画像やpタグ自体の余白をゼロに */
.contact-block img,
.contact-block p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* バナー画像の上余白もリセット */
.jda-badge {
  margin-top: 0 !important;
}

/* 電話画像とバナーの距離を詰める */
.contact-title {
  margin-bottom: 2px !important;
}

/* コピーライトとの距離を調整（小さく） */
.google-right .copyright {
  margin-top: 4px !important;
}

  /* コピーライトは最下段でOK。少しだけ離す場合は margin-top を増やす */
  .google-right .copyright{
    position: static !important;
    margin-top: 0.7rem;
    text-align: center;
  }
}


/* ===== スマホだけ強制で詰める（CSS末尾に追加） ===== */
@media (max-width: 767px){

  /* 右カラムの上下余白そのものを圧縮（背景も詰まる） */
  .google-right{
    padding-top: 0.1vw !important;   /* もっと詰めたければ 1.5vw などに */
    padding-bottom: 1.5vw !important;
  }

  /* flex間隔よりも要素自身の margin/padding を優先的にゼロ化 */
  .contact-block img,
  .contact-block p{
    margin: -20 0!important;
    padding:-20 0 !important;
    line-height: 1.2;               /* コピーライトの行間も控えめに */
  }

  /* 電話画像直下の隙間をほぼゼロに */
  .contact-title{
    display:block;
    margin-bottom: -70px !important;
  }

  /* バナーをさらに上へ（transform が効かない場合は負の margin を使用） */
  .jda-badge{
    display:block;
    width: 56vw !important;         /* 以前より少し小さめ */
    max-width: none !important;
    margin-top: -8px !important;    /* ← まずはこれで確実に上げる */
    /* transform を使いたい場合は下を使う（環境によっては効かないことがある） */
    /* transform: translateY(-8px) !important; */
  }

  /* バナー直下のコピーライトも詰める */
  .google-right .copyright{
    margin-top: 2px !important;
    font-size: 12px;
    text-align: center;
  }
}

/* ===== スマホ用：衛生セクション3枚横並び ===== */
@media (max-width: 767px) {
  .flex-contents-sp {
    display: flex;
    justify-content: space-between; /* 均等配置 */
    align-items: flex-start;
    flex-wrap: nowrap;              /* 折り返さない */
    gap: 2vw!important;                       /* 各画像の間隔 */
    width: 100vw;
    margin-top: 2vw;
  }

  .flex-contents-sp img {
    width: 30vw;        /* ← 3枚並ぶように縮小 */
    height: auto;
  }

  /* テキスト部分と画像群の間隔を少し詰める */
  .eisei3 {
    margin-bottom: 4vw;
  }
/* 衛生 eisei：3枚の画像コンテナに左右の余白を付ける */
  #eisei .flex-contents-sp{
    width: 90vw !important;   /* ← 全体の箱を少し細くする */
    margin: 0 auto;           /* ← その箱を中央寄せ */
    justify-content: space-between;
  }

  #eisei .flex-contents-sp img{
    width: 26vw;              /* 3枚入るように少しだけ縮小（好みで調整OK） */
  }
}

/* 1) #shinbi 本体の下をゼロに（最優先） */
/*#shinbi{
  padding-bottom: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden;                 /* margin折り畳み対策 */
 /* position: relative;*/
/*}*/

/* 2) #shinbi 内の“最後の要素”が持つ下余白を全て殺す（保険） */
/*#shinbi .shinbi-detail:last-child,
#shinbi .shin-box:last-child,
#shinbi .shin-img:last-child,
#shinbi .page-width:last-child,
#shinbi p:last-child,
#shinbi img:last-child{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 3) clearfix等で高さを作っている疑似要素を止める（保険） */
/*#shinbi::before,
#shinbi::after{
  content: none !important;
  display: none !important;
}

/* 4) それでも水色が残る場合、視覚的に境界を食い込ませる（確実に効く） */
/*#shinbi{
  margin-bottom: -6vw !important;   /* -3〜-10vwで微調整 */
/*}*/
/* 必要なら最後の中身に少しだけ“当てゴム” */
/*#shinbi .shinbi-detail:last-child{ padding-bottom: 1vw; }  /* 被る場合だけ */


/* SP/タブレットだけ底を少し延長（値はお好みで） */
/*@media (max-width: 767px){
  #kyosei{
    padding-bottom: 50vw !important;   /* 20vw → 30vw に拡張 */
 /* }*/
  /* 中の2ブロックにも底マージンがあるので、合わせて少し増やす */
  /*.kyosei-img1,
  .kyosei-img2{
    padding-bottom: 26vw !important;   /* 元 20vw → 26vw など */
 /* }
}*/

/* ===== フッター2カラム（木村歯科 ←→ 耳鼻科）を 50% / 50% にする ===== */
@media (min-width: 768px){
  /* 親：flex で横並び */
  .flex-contents.footer-contact{
    display: flex;
  }

  /* 子：左右をきっちり半分ずつにする */
  .flex-contents.footer-contact > .google-right,
  .flex-contents.footer-contact > .google-left{
    flex: 0 0 50% !important;   /* 50% 固定 */
    max-width: 50% !important;
    width: 50% !important;
    margin: 0 !important;       /* 変な余白があれば潰す */
  }
}

/* ===== clinic：PC用の最終上書き（768px以上） ==================== */
@media (min-width: 768px){

  /* 行全体（1セット） */
  #clinic .clinic-row{
    margin-bottom: 60px;      /* 行と行の間 */
  }

  /* 左右2カラムの並び方 */
  #clinic .clinic-row .clinic-detail{
    display: flex !important;
    justify-content: center !important;   /* 中央寄せ */
    align-items: flex-start !important;   /* 上をそろえる */
    gap: 40px !important;                 /* 左右のすき間 */
  }

  /* 各カラムの幅（画像の箱） */
  #clinic .clinic-row .clinic-img{
    flex: 0 0 500px !important;           /* 450〜520pxで好みに調整可 */
    margin: 0 !important;
  }

  /* 左右どちらの画像もまったく同じ扱いにする */
  #clinic .clinic-row .clinic-img img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 20px !important;         /* タイトル＆説明文との間隔 */
  }

  /* サブタイトル＆説明文（左カラム上） */
  #clinic .clinic-sub,
  #clinic .clinic-subtext{
    max-width: 430px;
    margin-left: 0;
    padding-left: 0;
    text-align: left;
  }

  #clinic .clinic-sub{
    color: #D8B41A;
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 24px;        /* タイトル画像との距離 */
    margin-bottom: 6px;      /* サブタイトルと説明文の間 */
  }

  #clinic .clinic-subtext{
    color: #454545;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 12px;     /* 説明文と画像の間 */
  }
}
/* ===== ここまで clinic PC用上書き ==================== */
/* クリニック紹介：PC用テキスト幅の調整（上書き用） */
@media (min-width: 768px){
  /* 1行分のブロック自体の幅を画像2枚と合わせて中央寄せ */
  #clinic .clinic-row.pc-only{
    max-width: 1040px;      /* 画像 500px ×2 ＋ 間隔40px を想定 */
    margin: 0 auto 60px;    /* 左右autoで中央寄せ & 下の余白 */
  }

  /* サブタイトル＆説明文の幅を100％にして、余計な折り返しをなくす */
  #clinic .clinic-sub,
  #clinic .clinic-subtext{
    width: 100%;
    max-width: none;        /* ここがポイント：430px制限を上書き */
  }
}