/* ページ全体のフォントを指定 */
body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #2c2c2c;
}

.iframe-wrapper {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  margin-bottom: 40px;
}

.iframe-inner {
  width: 100%;
  max-width: 580px;
  position: relative;
  overflow: hidden;
}

.iframe-inner iframe {
  width: 100%;
  height: 210px;
  border: none;
}


/*------------------- ヘッダー -------------------*/

header {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 3% 0;
}

header .h_inbox {
  display: flex;
  justify-content: space-between;
}

header .h_left {
  position: relative;
  width: 35%;
  margin-top: 1em;
}

header .h_left .h_logo {
  margin-bottom: 1em;
}

header .h_left .h_logo img {
  margin-left: 0;
  width: 30%;
}

header .h_left .h_logo span {
  display: block;
  width: 54%;
  margin-bottom: 1em;
}

header h1 {
  font-size: 0.7rem;
  letter-spacing: .14em;
  line-height: 1.4em;
}

header .h_contact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  position: relative;
  color: #fff;
}

header .h_tel dl {
  position: relative;
}

header .h_tel dt {
  text-align: left;
  color: #938068;
  font-size: min(1.4vw, 94%);
  letter-spacing: .14em;
  margin-bottom: .2em;
}

header .h_tel dt span {
  font-size: 80%;
  color: #363636;
}

header .h_tel dt,
header .h_tel .phone_num {
  padding-left: 20%;
}

header .h_tel img {
  margin: 0;
}

header .h_tel .phone_num {
  font-size: min(1.8vw, 130%);
}

header .h_tel .icon {
  left: 0;
  top: auto;
  bottom: 0;
  transform: none;
}

header .h_tel .h_time {
  /* margin-top: .8em; */
}

header .h_time {
  font-size: 15px;
}

header .h_web a {
  padding: .8em .8em .7em;
}

header .h_web a>div {
  position: relative;
  box-sizing: border-box;
  padding-left: 25%;
}

header .h_web .icon_web {
  position: absolute;
  width: 23%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

header .h_web .com_web_style {
  width: 96%;
  max-width: 154px;
  padding-left: 4%;
  padding-bottom: .6em;
  transition: all .5s;
  overflow: hidden;
}

header .h_web .com_web_style::before {
  position: absolute;
  content: "";
  background-color: #FFF;
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0;
}

header .h_web .com_arrow2 {
  bottom: .5em;
}

header .h_web .h_web_txt {
  width: 84%;
  margin: .7em auto 0;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

  header {
    padding-top: 2%;
  }

  header .h_left {
    margin-top: .5em;
  }

  header .h_left .h_logo span {
    margin-bottom: .6em;
  }

  header .h_right {
    width: 60%;
  }

  header h1 {
    letter-spacing: .1em;
  }
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 768px) {

  header {
    padding: 3% 3% 0;
  }

  header .h_inbox {
    display: block;
  }

  header .h_left {
    width: 65%;
    margin-top: 0;
  }

  header .h_left .h_logo {
    margin-bottom: .6em;
  }

  header .h_left .h_logo span {
    margin-bottom: .4em;
  }

  header .h_contact {
    display: none !important;
  }

  header h1 {
    display: none;
  }
	
	header .h_left .h_logo img {
  width: 30%;
}

  .spnone {
    display: none;
  }

}

	

/*------------------- ファーストビューブロック -------------------*/
.main-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 1;
  transition: opacity 2s ease-in-out;
}

.background-image.active {
  opacity: 1;
  z-index: 2;
}

.image1 {
  background-image: url('https://tanumashika.com/wp-content/uploads/2026/02/メインビジュアル-6.png');
}

.image2 {
  background-image: url('https://tanumashika.com/wp-content/uploads/2026/01/メインビジュアル-2.png');
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #dddddd29;
  z-index: 3;
}

/* キャッチコピー */
.text-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  z-index: 4;
  top: 27%;
  padding: 15px;
	text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 15px #fff, 0px 0px 15px #fff;
	
}

.size3rem {
  font-size: 4rem;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 25px;
}

.bgwrap {
  position: relative;
  display: inline-block;
}

.size1-5rem {
  font-size: 1.5rem;
  color: #5c4a1f;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.bgwrap .catchhighlight {
  font-weight: 500;
  font-size: 4rem;
	color: #2c6fb2;
}

.catchhighlight {
  font-weight: 500;
  font-size: 1.5rem;
}


@media screen and (max-width: 768px) {
  .main-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-size: cover;
    background-position: center;
	  margin-top: 34px;
}

  .image1 {
  background-image: url('https://tanumashika.com/wp-content/uploads/2026/02/メインビジュアル-5.png');
}

.image2 {
  background-image: url('https://tanumashika.com/wp-content/uploads/2026/02/メインビジュアル-3.png');
}

  .background-image {
    background-position: center top;
  }

  .text-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center !important;
    justify-content: center;
    text-align: center !important;
	  margin-top: -30px;
  }

  .size3rem {
    font-size: 2.1rem;
    font-weight: 400;
  }

  .size1-5rem {
    font-size: 0.8rem;
	  margin-top: -20px;
  }

  .bgwrap .catchhighlight {
    font-size: 2.1rem;
    font-weight: 400;
  }
}



/*-------------------------------------- お知らせについて --------------------------------------*/

.news-section {
  font-family: Arial, sans-serif;
  margin: 60px auto;
  max-width: 1000px;
  padding: 0 20px; /* Optional: adds padding to avoid content touching the sides */
}

.news-title {
  font-size: 36px;
  font-weight: bold;
  color: #2c6fb2;  /* ピンクをメインカラーに変更 */
  margin-bottom: 10px;
}

.news-subtitle {
  font-size: 18px;
  color: #6c757d;  /* ピンク以外はそのまま */
  margin-bottom: 20px;
}

.news-list {
  list-style: none;
  padding-left: 0;
}

.news-item {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}

.news-date {
  font-size: 14px;
  color: #888;
  margin-right: 10px;
}

.news-title-link {
  font-size: 14px;
  color: #4d4d4d;
  text-decoration: none;
  font-weight: 600;
}

.news-title-link:hover {
  text-decoration: underline;
}

/*------------------- 実習生 -------------------*/
.training-section {
  padding: 80px 20px;
}

/* 全体を囲む枠 */
.training-box {
  max-width: 1100px;
  margin: 0 auto;
  padding: 70px 60px;
  background: #ffffff;
  border: 1px solid #E1F3FF;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

.training-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.training-text {
  flex: 1;
}

.training-message {
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 30px;
}

.recruit-lead {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

/* 枠ボタン */
.outline-btn {
  display: inline-block;
  padding: 14px 42px;
  font-size: 1.1rem;
  text-decoration: none;
  border: 2px solid #004EA2;
  color: #004EA2;
  border-radius: 50px;
  background: transparent;
  transition: 0.3s ease;
}

.outline-btn:hover {
  background: #004EA2;
  color: #fff;
}

.training-image {
  flex: 1;
}

.training-image img {
  width: 100%;
  height: auto;
}
@media (max-width: 768px) {
	
	.training-section {
  padding: 20px 10px;
}

  .training-box {
    padding: 40px 20px;
  }

  .training-inner {
    flex-direction: column;
    text-align: center;
  }
	
	.training-message {
  font-size: 1rem;
}
	.recruit-lead {
  font-size: 1rem;
}
	
	.outline-btn {
  font-size: 1rem;
}

}




/*-------------------------------------- チーム医療について --------------------------------------*/
.leading-clinic {
  background-image: url(https://tanumashika.com/wp-content/uploads/2025/12/img-3.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 8.6em 0 0;
  overflow: hidden;
  min-height: 100vh;
}

.hero {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.hero-text {
  margin: 50px 0;
  padding: 0 50px;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  gap: 20px;
}

.hero-text h2 {
  font-size: max(1.786vw, 23px);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #4d4d4d;
  text-align: center;
}

.hero-overlay .pttl {
  line-height: 1.3;
  text-align: center;
  font-size: max(2.6vw, 26px);
  letter-spacing: .08em;
  font-feature-settings: "palt";
}

span.pttlbaio {
  color: #2c6fb2; /* メインカラーに変更 */
}

span.pttlpro {
  background: linear-gradient(180deg, rgba(0, 123, 199, 0) 70%, rgba(0, 123, 199, 0.3) 100%); /* サブカラーに変更 */
}

.mission-wrapper {
  text-align: center;
  margin-top: 20px;
}

.pttl-diamond {
  display: inline-block;
  padding: 0.1em 2.1em;
  background: rgba(255, 255, 255, 0.5);
  font-size: 1.6rem;
  font-weight: 500;
  color: #2c6fb2;  /* メインカラーに変更 */
  text-align: center;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(4px);
}

.hero-text {
  flex: 1;
}

.nomalverticalout {
  display: flex;
  justify-content: center;
  padding: max(1.071vw, 13px) 0 max(.857vw, 11px);
  background-color: rgba(255, 255, 255, .8);
  margin-top: 65px;
}

.nomalverticaloutli p {
  line-height: 2;
  padding-left: max(2.857vw, 37px);
  font-size: max(1.934vw, 25px);
  letter-spacing: .08em;
  font-feature-settings: "palt";
  background: url(https://tanumashika.com/wp-content/uploads/2025/11/3-5.png) no-repeat left center;
  background-size: max(2.036vw, 26px) auto;
}

p.nomalvertical-text {
  font-size: 2rem;
  text-align: start;
  color: #fff;
  line-height: 2;
  flex-shrink: 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
  padding: 0 50px;
}

.nomalvertical-text span {
  color: #f0e68c; 
  font-weight: bold;
  font-size: 3rem;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* 強めの影 */
}

.clinic-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  justify-content: center;
  padding: 50px 20px;
  color: #2c6fb2; /* メインカラーに変更 */
  max-width: 1300px;
  margin: 0 auto;
}

.point {
  position: relative;
  background: #fff;
  padding: 20px;
  border: 1px solid #2c6fb2; /* メインカラーに変更 */
  text-align: center;
  box-shadow: 0 4px 10px rgba(201, 167, 99, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.point:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(201, 167, 99, 0.3);
}

.point img {
  max-width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
  border: 1px solid #E9F3FF; /* 薄い水色に変更 */
}

.point h3 {
  position: absolute;
  top: 189px;
  right: -2px;
  font-size: 17px;
  box-shadow: 4px 4px 4px rgba(184, 169, 142, .25);
  padding: .1em 2em .1em .1em;
  background-color: #E9F3FF; /* 薄い水色に変更 */
  background-repeat: no-repeat;
  background-size: 10px auto;
  background-position: calc(100% - .5em) 50%;
  background-image: url(https://tanumashika.com/wp-content/uploads/2025/11/6-1.png);
  color: #2c6fb2; /* メインカラーに変更 */
}

.point .gold {
  color: #FF696C; 
  font-size: 18px;
  margin: 0 5px;
}

.point p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #5b4633;
}

@media (max-width: 768px) {

  .hero {
    height: auto;
    /* 固定600pxを解除 */
    overflow: visible;
    /* 余白カット */
  }

  .hero-overlay {
    position: static;
    /* 絶対配置をやめて親の高さに合わせる */
    inset: auto;
    /* 念のためリセット */
    padding: 16px 0;
    /* 適度な上下余白だけ残す（好みで調整） */
  }

  /* タイトルやリストのサイズはそのままでOK。必要なら微調整 */
  .hero-text {
    margin: 24px 0;
    padding: 0 16px;
  }

  .hero-text h2 {
    font-size: max(4vw, 18px);
    /* 見出しのフォントサイズを調整 */
    text-align: center;
    padding: 0 15px;
  }

  .hero-overlay .pttl {
    font-size: max(4vw, 18px);
    /* フォントサイズの調整 */
    line-height: 1.4;
    text-align: center;
  }

  .mission-wrapper {
    margin-top: 40px;
    /* ← 少し余白を大きめに */
  }
	
.pttl-diamond {
  padding: 0.2em 1.6em;       /* 内側の余白 */
  font-size: 1rem;            /* フォントサイズを1remに統一 */
  letter-spacing: 0.05em;     /* 文字間隔 */
  margin-top: -0.5em;         /* 上方向に上げる */
}

  .nomalverticalout {
    margin-top: 25px;
    /* ← 下に50px移動 */
  }

.nomalverticaloutli p {
  line-height: 2;
  padding-left: max(2.857vw, 37px);
  font-size: max(1vw, 17px);
  letter-spacing: .08em;
  font-feature-settings: "palt";
  background: url(http://tanumashika.com.testrs.jp/test/wp-content/uploads/2025/11/3-5.png) no-repeat left center;
  background-size: max(2.036vw, 26px) auto;
}

  .point h3 {
    position: absolute;
    top: 160px;
    right: -2px;
    font-size: 16px;
    box-shadow: 4px 4px 4px rgba(184, 169, 142, .25);
    padding: .1em 2em .1em .1em;
    background-repeat: no-repeat;
    background-size: 10px auto;
    background-position: calc(100% - .5em) 50%;
  }

  .clinic-points {
    flex-direction: column;
    align-items: center;
  }

  .nomalvertical-text {
    writing-mode: horizontal-tb;
    text-align: left;
  }
}

/* タブレット用（768px〜1024px） */
@media (max-width: 1024px) {
  .leading-clinic {
    background-position: center top;
    background-size: cover;
  }
}

/* スマホ用（〜767px） */
@media (max-width: 767px) {
  .leading-clinic {
    background-image: url(https://tanumashika.com/wp-content/uploads/2025/12/leading-clinicmb-2.png);
    /* モバイル専用画像があれば */
    background-size: cover;
    background-position: center top;
    min-height: auto;
    /* コンテンツ量で高さ自動調整 */
    padding-top: 80px;
    /* 上部に余白が必要なら */
  }
}

/*-------------------------------------- チーム医療についてここまで --------------------------------------*/

/* -------------------選ばれる理由ブロック------------------- */

/* 見出し */
.dream-ttlbloc {
  margin: 30px auto;
}

.dreamttl {
  font-size: max(2.274vw, 37px);
  color: #2c2c2c; /* メインカラーに変更 */
  line-height: 1.4;
  margin-bottom: 15px;
  text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.6);
  position: relative;
  text-align: center;
  margin: 30px 0;
}

.dreamttl .mini {
  font-size: 25px;
}

.dream-ttlbloc p {
  text-align: center;
}

.dream-ttlbloc p .underline {
  text-decoration: none;
  border-bottom: 2px solid #2c6fb2; /* メインカラーに変更 */
}

/* セクションの背景 */
.sedai {
  position: relative;
  background: radial-gradient(circle,
      #E9F3FF 0%, /* 薄い水色 */
      #E1F3FF 40%, /* さらに薄い水色系 */
      #E1F3FF 80%, /* 同系色を使用 */
      #ffffff 100%  /* 完全な白 */
    );
  z-index: 0;
  overflow: hidden;
}


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

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

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

.idx_box {
  display: block;
  position: relative
}

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

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

/* 偶数（02/04/06）：左右を反転 */
.sedai .idx_inr:nth-of-type(even) {
  background-position: 0 0;
  /* 画像を左側 */
}

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

/* テキストボックスの寄せ方向と影（偶数） */
.sedai .idx_inr:nth-of-type(even) .idx_box {
  box-shadow: -3px 3px 5px rgba(162, 162, 162, .2);
  margin: 0 0 0 auto;
  /* 右寄せ */
}

/* 共通 */
.sedai_ttl {
  position: relative;
  font-size: 26.87px;
  margin: 0 0 24px;
}

/* 01用 */
.sedaittl01 {
  border-bottom: 1px solid #2c6fb2;
}

/* 02用 */
.sedaittl02 {
  border-bottom: 1px solid #007BC7;
}

/* 03用 */
.sedaittl03 {
  border-bottom: 1px solid #00A6C7;
}

/* 04用 */
.sedaittl04 {
  border-bottom: 1px solid #FF696C;
}

/* 01 */
.sedaittl01 span {
  color: #2c6fb2;
}

/* 02 */
.sedaittl02 span {
  color: #007BC7;
}

/* 03 */
.sedaittl03 span {
  color: #00A6C7;
}

/* 04 */
.sedaittl04 span {
  color: #FF696C;
}



.sedai_ttl:before {
  content: "";
  display: block;
  position: absolute;
  width: 99px;
  aspect-ratio: 1/1;
  left: -45px;
  top: -24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.sedai_lead {
  display: flex;
  align-items: center;
  padding: 0 0 16px;
  margin: 0 auto 15px 0;
  width: 100%;
  /* ← ここを60%から100%に変更 */
}

.sedai_lead p {
  display: block;
}

.sedai_lead p i {
  display: block
}

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

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

.sedai_lead figure {
  flex: 1
}

.sedai .idx_lst {
  font-size: 15px
}

.sedai .idx_lst li {
  line-height: 1.3;
  /* letter-spacing: -.06em */
}

/* 共通デザイン */
.sedai .idx_lst li::before {
  content: "●";
  font-size: 20px;
  margin-right: 10px;
  position: relative;
  top: 3px;
}

/* 01用 */
.sedai .idx_lst.sedai01 li::before {
  color: #2c6fb2;
}

/* 02用 */
.sedai .idx_lst.sedai02 li::before {
  color: #007BC7;
}

/* 03用 */
.sedai .idx_lst.sedai03 li::before {
  color: #00A6C7;
}

/* 04用 */
.sedai .idx_lst.sedai04 li::before {
  color: #FF696C;
}


.sedai .idx_lst li span {
  display: block
}

.sedai .idx_lst li em {
  font-weight: 600;
  font-size: 19px;
}

.sedai01 li em {
  color: #2c6fb2;
}

.sedai02 li em {
  color: #007BC7;
}

.sedai03 li em {
  color: #00A6C7;
}

.sedai04 li em {
  color: #FF696C;
}


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

.idx_gnr_01 {
  background-image: url(https://tanumashika.com/wp-content/uploads/2026/02/田沼歯科医院-9.png);
  background-repeat: no-repeat;
}


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

.idx_gnr_01 .sedai_lead figure img {
  width: 109px;
  aspect-ratio: 109/149
}

.idx_gnr_01 .idx_lst li:nth-of-type(3) {
  /* padding-left: .8em */
}


.idx_gnr_02 {
  background-image: url(https://tanumashika.com/wp-content/uploads/2025/12/3-2.png);
  background-repeat: no-repeat;
}

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

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

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


.idx_gnr_03 {
  background-image: url(https://tanumashika.com/wp-content/uploads/2026/02/田沼歯科医院-2.png);
  background-repeat: no-repeat;
}


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

.idx_gnr_03 .sedai_lead figure img {
  width: 109px;
  aspect-ratio: 109/149
}

.idx_gnr_03 .idx_lst li:nth-of-type(3) {
  /* padding-left: .8em */
}




.idx_gnr_04 {
  background-image: url(https://tanumashika.com/wp-content/uploads/2025/12/img-8.png);
  background-repeat: no-repeat;
}

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

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

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


.idx_gnr_05 {
  background-image: url(../img/reason05.png);
  background-repeat: no-repeat;
}


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

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

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


.idx_gnr_06 {
  background-image: url(../img/reason06.png);
  background-repeat: no-repeat;
}

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

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

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




.idx_gnr_07 {
  background-image: url(../img/reason07.png);
  background-repeat: no-repeat;
}


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

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

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

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

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

/* ------------------- モバイル版 ------------------- */
@media screen and (max-width: 768px) {

  /* 見出し */
  .dream-ttlbloc {
    margin: 20px auto;
  }

  .dreamttl {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 15px;
    text-align: center;
  }

  .dreamttl .mini {
    font-size: 18px;
  }

  /* セクション背景 */
  .sedai {
    padding: 50px 0;
    background: linear-gradient(to right, #fffef8 0%, #fffdf3 20%, #fffefa 80%, #ffffff 100%);
  }

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

  .sedai::after {
    bottom: 0;
    top: unset;
  }

  .idx_inr {
    display: block;
    padding: 20px;
    margin: 0 auto;
    max-width: 100%;
  }

  .idx_inr .idx_box {
    margin: 0 auto;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #ffffffec;
  }

  .sedai_ttl {
    font-size: 18px;
    margin: 0 0 24px;
  }

  .sedai_ttl span {
    font-size: 22px;
  }

  /* セクションリスト調整 */
  .idx_lst {
    font-size: 14px;
    margin-left: 0;
    padding-left: 0;
    text-align: left;
    /* 左寄せに変更 */
    list-style-position: inside;
    /* リストのアイコンを内側に配置 */
  }

  .idx_lst li {
    line-height: 1.6;
    margin-bottom: 10px;
    text-align: left;
  }

  .idx_lst li::before {
    content: "●";
    font-size: 18px;
    color: #00a0e9;
    margin-right: 10px;
    top: 3px;
  }

  .sedai .idx_lst li em {
    font-size: 18px;
  }

  .sedai_lead {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
  }

  .sedai_lead p {
    font-size: 16px;
  }

  .sedai_lead p .ja {
    font-size: 20px;
  }

  .sedai_lead p .en {
    font-size: 26px;
    font-weight: bold;
  }

  .sedai_lead figure {
    flex: 1;
    display: none;
    /* モバイルでは非表示 */
  }

  /* インプラントの特徴セクション */
  .idx_gnr_01,
  .idx_gnr_02,
  .idx_gnr_03,
  .idx_gnr_04,
  .idx_gnr_05,
  .idx_gnr_06,
  .idx_gnr_07 {
    background-size: contain;
    background-repeat: no-repeat;
    padding-left: 10px;
  }

  /* それぞれのインプラント理由セクション */
  .idx_gnr_01 .sedai_lead p,
  .idx_gnr_02 .sedai_lead p,
  .idx_gnr_03 .sedai_lead p,
  .idx_gnr_04 .sedai_lead p,
  .idx_gnr_05 .sedai_lead p,
  .idx_gnr_06 .sedai_lead p,
  .idx_gnr_07 .sedai_lead p {
    margin-right: unset;
  }

  /* ボタン調整 */
  .idx_gnr_01 .idx_gnr_btn,
  .idx_gnr_02 .idx_gnr_btn,
  .idx_gnr_03 .idx_gnr_btn,
  .idx_gnr_04 .idx_gnr_btn,
  .idx_gnr_05 .idx_gnr_btn,
  .idx_gnr_06 .idx_gnr_btn,
  .idx_gnr_07 .idx_gnr_btn {
    position: unset;
    right: unset;
    bottom: unset;
    margin-top: 20px;
  }

  /* サイズ調整 */
  .sedai_lead figure img {
    max-width: 80px;
    aspect-ratio: 1/1;
  }
}

/* デスクトップ版で非表示にする */
@media screen and (min-width: 769px) {
  .sedai_fig {
    display: none; /* デスクトップ版で画像を非表示 */
  }
}
/* モバイル版で画像を表示 */
@media screen and (max-width: 768px) {
  .sedai_fig {
    display: flex;
    justify-content: center; /* 横方向に中央揃え */
    align-items: center; /* 縦方向に中央揃え */
    width: 100%; /* 画像の幅を親要素に合わせて100% */
    height: auto;
    padding: 0;
    margin: 0; /* マージンをリセット */
  }

  .sedai_fig img {
    max-width: 100%; /* 画像の最大幅を親要素に合わせる */
    height: auto; /* 高さを自動調整してアスペクト比を維持 */
    display: block; /* 画像をブロック表示にする */
    margin: 0 auto; /* 自動で中央寄せ */
    object-fit: contain; /* 画像を親要素に収まるように調整 */
  }
}

/*-------------------------------------- 選ばれる理由ブロックここまで --------------------------------------*/



/* ----------------------特徴ブロック---------------------- */
.efforts-section {
  padding: 60px 20px;
  background-color: #E9F3FF !important;
  background: url(https://tanumashika.com/wp-content/uploads/2026/02/田沼歯科医院-8.png) no-repeat top center / 100%;
  padding-top: max(5.714vw, 74px);
  box-sizing: border-box;
  width: 100%;
}

.efforts-header {
  text-align: center;
  margin-bottom: 50px;
}

.head_wrap p.efforts-label {
  font-size: 20px;
  letter-spacing: 1px;
  color: #2c6fb2; /* ピンクからネイビーに変更 */
  margin-bottom: 5px;
  text-align: center;
}

.efforts-subtitle {
  font-size: 14px;
  color: #666;
  margin: 0 auto;
  max-width: 600px;
}

.efforts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 30px;
  margin: 0 auto;
  padding: max(3.214vw, 41px) max(3.571vw, 0px);
  max-width: 1400px;
}

.efforts-item {
  position: relative;
  background: #fefefe;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 20px 30px;
}

.efforts-img {
  width: 85%;
  height: auto;
  display: block;
  margin: auto;
}

.efforts-text {
  padding: 20px;
  position: relative;
}

.efforts-text h3 {
  font-size: 1.5rem;
  margin: 0 0 10px;
  color: #5b4633;
  position: relative;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid #2c6fb2; /* ピンクからネイビーに変更 */
  padding-bottom: 15px;
}

.efforts-text span {
  color: #2c6fb2; /* ピンクからネイビーに変更 */
  font-size: 1.8rem;
}

.efforts-text p {
  line-height: 1.6;
}

@media screen and (max-width: 768px) {
  .efforts-grid {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .efforts-item {
    padding: 20px 0;
  }

  .efforts-item::before {
    font-size: 36px;
    top: 10px;
    left: 10px;
  }

  .efforts-text {
    padding: 15px;
  }

  .efforts-text h3 {
    font-size: 1rem;
  }

  .efforts-text span {
    font-size: 1.2rem;
  }

}

/* ----------------------特徴ブロックここまで---------------------- */
/* ----------------------スタッフ紹介ブロック---------------------- */
/* === 全体のレイアウト === */
.intyou {
  background: linear-gradient(
    to bottom,
    rgba(233, 243, 255, 0.9) 0%,  /* 薄い水色に変更 */
    rgba(185, 239, 242, 0.8) 40%, /* 明るい水色に変更 */
    rgba(188, 239, 242, 0.9) 100% /* さらに明るい水色に変更 */
  );   
  padding: 40px;
  backdrop-filter: blur(10px);
  position: relative;
}

.intyou::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#BCEBF2 1px, transparent 1px); /* 薄い水色のテクスチャ */
  background-size: 6px 6px;
  opacity: 0.15; /* より控えめなテクスチャ */
  z-index: 0;
}

.profile-container {
  display: flex;
  max-width: 1400px;
  margin: 20px auto;
  align-items: center;
  gap: 40px;
  padding: 60px;
  background: #ffffff91;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* 非常に薄い影 */
  position: relative;
}

/* === 左側の画像エリア === */
.profile-image {
  flex: 1;
  max-width: 450px;
  position: relative;
}

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

/* === 右側のテキストエリア === */
.profile-text {
  flex: 2;
  padding: 10px;
}

/* === 見出しデザイン === */
.clinic-name {
  font-size: 20px;
  font-weight: bold;
  color: #2c6fb2;  /* メインカラーに変更 */
}

.position {
  font-size: 18px;
  font-weight: normal;
  color: #007BC7; /* サブカラーに変更 */
}

.doctor-name {
  font-size: 26px;
  font-weight: bold;
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.jp-name {
  font-size: 32px;
  font-weight: bold;
  margin: 0 10px;
  color: #644a2f;
}

.en-name {
  font-size: 16px;
  font-weight: normal;
  color: #977c4c;
}

/* === 罫線デザイン === */
.profile-line {
  width: 100%;
  border: 1px solid #2c6fb2; /* メインカラーに変更 */
  margin: 20px 0;
}

.greetbox {
  margin: 15px 0;
  text-align: left;
}

/* `.profile-details` を2カラムレイアウトにする */
.profile-details {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 20px; 
}
.profile-details li {
  font-size: 12px;
}

/* 各セクションのスタイル */
.profile-section {
  padding: 20px;
  background: rgb(255 255 255 / 85%);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* 見出しデザイン */
.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #2c6fb2; /* メインカラーに変更 */
  margin-bottom: 10px;
}

/* 略歴は1列全体を使う */
.profile-section.history {
  grid-column: span 2; /* 2カラムをまたぐ */
}

/* === 略歴・学会・講演情報のデザイン === */
.profile-section {
  margin-bottom: 20px;
}

.profile-info {
  list-style: none;
  padding: 0;
  font-size: 16px;
  line-height: 1.8;
}

.profile-info li {
  margin-bottom: 8px;
}

.year {
  font-weight: bold;
  color: #FF8070;  /* アクセントカラーに変更 */
}

.image-columns {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1400px;
  margin: 30px auto;
  padding: 0 70px;
}

.image-box {
  flex: 1 1 calc(33.333% - 20px);
  text-align: center;
}

.image-box img {
  width: 70%;
  height: auto;
  border-radius: 6px;
}

.image-box p {
  margin-top: 10px;
  font-size: 0.95rem;
}



/* ----------------------------------------------------
スマホ用（〜767px）
---------------------------------------------------- */
@media (max-width: 768px) {
  .intyou {
    padding: 15px;
  }

  .profile-details {
      grid-template-columns: 1fr; /* 1カラムに変更 */
  }

  .profile-section.history {
      grid-column: span 1; /* 1カラムで表示 */
  }

  .profile-container {
      flex-direction: column;
      text-align: center;
      padding: 0;
  }

  .profile-image {
      max-width: 80%;
  }

  .profile-text {
      padding: 15px;
      width: 90%;
  }
  .profile-section {
    padding: 10px;
  }

  .doctor-name {
      flex-direction: column;
      text-align: center;
  }

  .jp-name {
      font-size: 28px;
  }

  .en-name {
      font-size: 14px;
  }

  .section-title {
      font-size: 18px;
  }
  .image-columns {
    padding: 0 15px;
    flex-wrap: nowrap;
    gap: 10px
  }
  .image-box p {
    font-size: 0.7rem;
  }
  .image-box {
    flex: 1 1 100%;
  }
}

.leading-clinic2 {
  color: #5b4633;
  background-image: url(https://tanumashika.com/wp-content/uploads/2025/12/img-1.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 6em 0 6em; 
  overflow: hidden;
  min-height: 100vh;
}


.staff {
  position: relative;
  width: 100%;
  /* height: 1245px; */
  overflow: hidden;
  padding-top: 220px;
}

.staff-text {
  margin: 50px 0;
  padding: 0 50px;
}

.staff img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.staff-overlay {
  position: absolute;
  inset: 0;
  gap: 20px;
  margin: 0 3%;
}

.staff-text h2 {
  font-size: max(1.786vw,23px);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #5b4633;
}
.staff-overlay .pttl {
  line-height: 1.3;
  font-size: max(2.8vw, 20px);
  letter-spacing: .08em;
  font-feature-settings: "palt";
}

span.pttlbaio2 {
  color: #2c6fb2;
}
span.pttlpro2 {
  background: linear-gradient(180deg, rgba(44, 111, 178, 0) 70%, rgba(44, 111, 178, 0.3) 100%);
}

.staff-text {
  flex: 1;
}


p.nomalvertical-text {
  font-size: 2rem;
  text-align: start;
  color: #fff;
  line-height: 2;
  flex-shrink: 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
  padding: 0 50px;
}

.nomalvertical-text span {
  color: #f0e68c;
  font-weight: bold;
  font-size: 3rem;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* ← 強めに追加 */
}

/* タブレット用（768px〜1024px） */
@media (max-width: 1024px) {
  .leading-clinic2 {
    background-position: center top;
    background-size: cover;
  }
}
@media (max-width: 921px) and (min-width: 768px) {
  .profile-container {
    padding: 0;
  }
.profile-details {
gap:5px;
}
  .doctor-name {
    flex-direction: column;　
}
  .clinic-name {
    text-align: center;
  }
}


/* スマホ用（〜767px） */
@media (max-width: 767px) {
  .leading-clinic2 {
    background-image: url(https://tanumashika.com/wp-content/uploads/2025/12/imgmb.png);
    background-size: cover;
    background-position: center top;
    min-height: auto; /* コンテンツ量で高さ自動調整 */
    padding-top: 80px; /* 上部に余白が必要なら */
  }
  .staff {
    padding: 0;
  }
  .staff-text {
    flex-direction: column;
  }

  .staff-overlay {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
  }
  .nomalvertical-text {
    writing-mode: horizontal-tb;
    text-align: left;
  }
}

/* ----------------------スタッフ紹介ブロックここまで---------------------- */

/*-------------------------------------- ピックアップ診療 --------------------------------------*/

/* 見出し */
.picupspan {
  font-size: 50px;
  background: linear-gradient(135deg, #004EA2, #004EA2); /* 青系 #004EA2 のみ */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.picupspan02 {
  font-size: 50px;
  background: linear-gradient(135deg, #007BC7, #007BC7); /* 水色系 #007BC7 のみ */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.flex_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px;
  background-color: #fff;
  position: relative;
  border-radius: 10px;
}

.flex_box2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px;
  background-color: #fff;
  position: relative;
  border-radius: 10px;
  gap: 20px;
}

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  font-family: 'Noto Serif JP', serif;
  font-size: 25px;
  color: #004EA2; /* ピンク系をメインカラー（青系）に変更 */
  letter-spacing: 2px;
  font-weight: bold;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  border-left: 3px solid #004EA2; /* メインカラー（青系）に変更 */
}

.vertical-text2 {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  font-family: 'Noto Serif JP', serif;
  font-size: 25px;
  color: #007BC7; /* オレンジ系をサブカラー（青系）に変更 */
  letter-spacing: 2px;
  font-weight: bold;
  position: absolute;
  right: 60%;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  border-left: 3px solid #007BC7; /* サブカラー（青系）に変更 */
}

.vertical-text2-2 {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  font-family: 'Noto Serif JP', serif;
  font-size: 25px;
  color: #007BC7; /* オレンジ系をサブカラー（青系）に変更 */
  letter-spacing: 2px;
  font-weight: bold;
  position: absolute;
  right: 59%;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  border-left: 3px solid #007BC7; /* サブカラー（青系）に変更 */
}

/* ---------------------------- ピックアップボックス ---------------------------- */

.pickupbox2 {
  width: 60%;
  padding-right: 20px;
  background-color: rgba(0, 78, 162, 0.2); /* メインカラーに基づく水色 */
  border-radius: 5px;
  margin: 0 0 0 15px;
  padding: 15px 20px;
}

.pickupbox2 h3 {
  font-size: 24px;
  color: #004EA2; /* メインカラーに変更 */
  border-bottom: 2px solid #004EA2; /* メインカラーに変更 */
  padding-bottom: 5px;
	font-weight: bold;
  display: inline-block;
}

.pickupbox2-2 {
  width: 60%;
  padding-right: 20px;
  background-color: rgba(0, 123, 199, 0.2); /* サブカラー（青系）に基づく水色 */
  border-radius: 5px;
  margin: 0 0 0 15px;
  padding: 15px 20px;
}

.pickupbox2-2 h3 {
  font-size: 24px;
  color: #007BC7; /* サブカラーに変更 */
  border-bottom: 2px solid #007BC7; /* サブカラーに変更 */
  padding-bottom: 5px;
	font-weight: bold;
  display: inline-block;
}

.pickupbox3 {
  width: 60%;
  padding-right: 20px;
  background-color: rgba(0, 78, 162, 0.2); /* メインカラーに基づく水色 */
  border-radius: 5px;
  margin: 0 0 0 15px;
  padding: 15px 20px;
}

.pickupbox3 h3 {
  font-size: 24px;
  color: #004EA2; /* メインカラーに変更 */
  border-bottom: 2px solid #004EA2; /* メインカラーに変更 */
  padding-bottom: 5px;
	font-weight: bold;
  display: inline-block;
}

.vertical-text3 {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  font-family: 'Noto Serif JP', serif;
  font-size: 25px;
  color: #004EA2; /* メインカラー（青系）に変更 */
  letter-spacing: 2px;
  font-weight: bold;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  border-left: 3px solid #004EA2; /* メインカラー（青系）に変更 */
}


.pickupbox1 {
  width: 40%;
  display: flex;
  justify-content: center;
  margin: 10px;
}

.pickup-image {
  width: 100%;
  max-width: 500px;
  height: auto;
}

/* リストのデザイン */
.picup-list {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

.picup-list li,
.picup-list2 li,
.picup-list3 li {
  font-size: 16px;
  color: #333;
  padding-left: 25px;
  position: relative;
  margin-bottom: 8px;
}

.picup-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #004EA2; /* メインカラー（青系）に変更 */
  font-weight: bold;
}

.picup-list2 li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #007BC7; /* サブカラー（青系）に変更 */
  font-weight: bold;
}

.picup-list3 li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #004EA2; /* メインカラー（青系）に変更 */
  font-weight: bold;
}


/* 強調デザイン */
.pickupbox2 p span {
  font-size: 20px;
  color: #004EA2; /* メインカラー（青系）に変更 */
  font-weight: bold;
  padding: 3px 6px;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  z-index: 1;
}

.pickupbox2 p span::after {
  content: "";
  display: block;
  width: 100%;
  height: 8px;
  background-color: rgba(0, 78, 162, 0.15); /* メインカラーに基づいた透過色 */
  position: absolute;
  bottom: 5px;
  z-index: 0;
}

.pickupbox2-2 p span {
  font-size: 20px;
  color: #007BC7; /* サブカラー（青系）に変更 */
  font-weight: bold;
  padding: 3px 6px;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  z-index: 1;
}

.pickupbox2-2 p span::after {
  content: "";
  display: block;
  width: 100%;
  height: 8px;
  background-color: rgba(0, 123, 199, 0.15); /* サブカラーに基づいた透過色 */
  position: absolute;
  bottom: 5px;
  z-index: 0;
}

.pickupbox3 p span {
  font-size: 20px;
  color: #004EA2; /* メインカラーに変更 */
  font-weight: bold;
  padding: 3px 6px;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  z-index: 1;
}

.pickupbox3 p span::after {
  content: "";
  display: block;
  width: 100%;
  height: 8px;
  background-color: rgba(0, 78, 162, 0.15); /* メインカラーに基づいた透過色 */
  position: absolute;
  bottom: 5px;
  z-index: 0;
}

/* buttonデザイン 青 */
.pickup-btn {
  display: inline-block;
  padding: 12px 24px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(135deg, #2c6fb2, #007BC7); /* 青系のグラデーション */
  border-radius: 50px;
  text-align: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 6px 12px rgba(44, 111, 178, 0.4); /* メインカラーの影 */
}

.pickup-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s ease;
}

.pickup-btn:hover {
  background: linear-gradient(135deg, #007BC7, #2c6fb2); /* サブカラーとメインカラーのグラデーション */
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(44, 111, 178, 0.5); /* メインカラーの影 */
}

.pickup-btn:active {
  transform: translateY(2px);
  box-shadow: 0 6px 12px rgba(44, 111, 178, 0.3); /* メインカラーの影（アクティブ時） */
}



.pickup-btn:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

/* buttonデザイン　紫 */
.pickup-btn-purple {
  display: inline-block;
  padding: 12px 24px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(135deg, #007BC7, #007BC7); /* メインカラー #007BC7 のみ */
  border-radius: 50px;
  text-align: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 123, 199, 0.4); /* メインカラー #007BC7 の影 */
}

.pickup-btn-purple::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s ease;
}

.pickup-btn-purple:hover {
  background: linear-gradient(135deg, #007BC7, #007BC7); /* メインカラー #007BC7 のみ */
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 123, 199, 0.5); /* メインカラー #007BC7 の影 */
}

.pickup-btn-purple:active {
  transform: translateY(2px);
  box-shadow: 0 5px 15px rgba(0, 123, 199, 0.3); /* メインカラー #007BC7 の影（アクティブ時） */
}

.pickup-btn-purple:hover::before {
  transform: translate(-50%, -50%) scale(1);
}


/* buttonデザイン 緑 */
.pickup-btn-green {
  display: inline-block;
  padding: 12px 24px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(135deg, #2c6fb2, #007BC7); /* 青系のグラデーション */
  border-radius: 50px;
  text-align: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 6px 12px rgba(44, 111, 178, 0.4); /* メインカラー（青系）の影 */
}

.pickup-btn-green::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s ease;
}

.pickup-btn-green:hover {
  background: linear-gradient(135deg, #007BC7, #2c6fb2); /* 青系のグラデーション */
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(44, 111, 178, 0.5); /* メインカラー（青系）の影 */
}

.pickup-btn-green:active {
  transform: translateY(2px);
  box-shadow: 0 6px 12px rgba(44, 111, 178, 0.3); /* メインカラー（青系）の影（アクティブ時） */
}

.pickup-btn-green:hover::before {
  transform: translate(-50%, -50%) scale(1);
}


/* ----------------------------------------------------
タブレット用（768px〜1024px）
---------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .vertical-text2-2 {
    right: 57%;
  }
}

/* ----------------------------------------------------
スマホ用（〜767px）
---------------------------------------------------- */

@media (max-width: 768px) {
	
	
  /* 見出し */
.picupspan {
  font-size: 24px;
}
.picupspan02 {
  font-size: 24px;
}

  .picuph2 {
    font-size: 24px;
  }

  .dots::before {
    content: none;
  }

  .dots1::before {
    content: none;
  }

  /* 1つ目 */
  .flex_box {
    flex-direction: column-reverse;
    align-items: stretch;
    padding: 15px;
  }

  /* 2つ目 */
  .flex_box2 {
    flex-direction: column;
    padding: 15px;
  }

  .pickupbox2-2 {
    width: 100%;
    margin: 0;
    padding: 10px;
  }

  .pickupbox2,
  .pickupbox3,
  .pickupbox1 {
    width: 100%;
    padding: 20px;
    margin: 0;
  }

  .pickupbox2 {
    padding: 10px;
    border-left: none;
  }

  .vertical-text {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin-bottom: 10px;
  }
}


/*-------------------------------------- ピックアップ診療ここまで --------------------------------------*/

/*-------------------------------------- 診療項目 --------------------------------------*/

.treatment-section {
  width: 1200px;  /* セクションの最大幅を1400pxに設定 */
  margin: 0 auto; /* 中央寄せにする */
  padding: 40px;  /* セクション内に適度な余白を設定 */
}

/* スマホやタブレット用にレスポンシブ対応（最大幅768px以下で調整） */
@media (max-width: 768px) {
  .treatment-section {
    width: 100%; /* スマホやタブレットでは幅100%に設定 */
    padding: 20px; /* より小さい余白に変更 */
  }
}

.treatment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* PCは3カラム */
  gap: 32px;
  max-width: 1600px;
  /* 横幅制限 */
  margin: 0 auto;
  /* 中央寄せ */
  padding: 40px 0;
  /* 中の余白 */
}

.treatment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid #ddd;
  position: relative;
  gap: 16px;
}

/* 下線ベース */
.treatment-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background-color: #ddd;
  z-index: 1;
}

/* アニメーション用の色付きライン */
.treatment-item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 0;
  background-color: #2c6fb2;
  transition: width 0.8s ease;
  z-index: 2;
}

/* ホバーでアニメーション実行 */
.treatment-item:hover::before {
  width: 100%;
}

.icon-wrap {
  min-width: 56px;
  height: 56px;
  background: #E9F3FF;  /* 薄い水色に変更 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.6s ease-in-out;
}

.treatment-item:hover .icon-wrap {
  background-color: #BCEBF2;  /* 少し濃い水色に変更 */
}

.icon-wrap img {
  width: 28px;
  height: 28px;
}

.treatment-text {
  flex: 1;
}

.treatment-desc {
  font-size: 15px;
  color: #333;  /* ダークグレーを残しておく（必要に応じて変更可能） */
  margin: 0;
}


.title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.treatment-title {
  font-size: 25px;
  font-weight: 600;
  color: #1e1e1e;
  margin: 4px 0 0;
}

.arrow-icon {
  font-size: 30px;
  color: #1e1e1e;
  transition: transform 0.2s ease;
}

.title-row:hover .arrow-icon {
  transform: translateX(4px);
}

@media (max-width: 767px) {
  .treatment-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 100%;
    padding: 0 0px;
    box-sizing: border-box;
  }

  .treatment-item {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .icon-wrap {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    min-width: 22px;
    /* ← 上書きが必要！ */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5f5f5;
  }

  .icon-wrap img {
    width: 12px;
    height: 12px;
    object-fit: contain;
    display: block;
  }

  .treatment-text {
    flex: 1;
    min-width: 0;
  }

  .treatment-title {
    font-size: 16px;
    white-space: normal;
  }

  .treatment-desc {
    font-size: 10px;
    white-space: normal;
    /* 説明文は折り返してOK */
  }

  .arrow-icon {
    font-size: 20px;
  }

  .title-row {
    gap: 4px;
  }

}

/*-------------------------------------- 診療項目ここまで --------------------------------------*/

/* -------------------支払方法------------------- */
.paymentsec {
  background: linear-gradient(to bottom, #E9F3FF, #BCEBF2); /* 薄い水色から少し濃い水色系のグラデーション */
  box-sizing: border-box;
  margin-top: max(7.64svw, 99.36px);
  margin-bottom: max(4.29svw, 55.71px);
  padding-bottom: max(3.21svw, 41.79px);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}



.payttl {
  font-size: max(2.274vw, 37px);
  color: #2c2c2c;
  line-height: 1.4;
  margin-bottom: 15px;
  text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.6);
  position: relative;
  text-align: center;
  margin: 30px 0;
}

.payttl .mini {
  font-size: 25px;
}

.payout {
  background: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  padding: 40px;
  max-width: 1300px;
  margin: 20px auto;
}

.paytxtbox {
  flex: 1 1 55%;
  padding: 20px 30px;
}

.paymark {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.paymark span {
  background: linear-gradient(transparent 70%, #E9F3FF 70%); /* 薄い水色に変更 */
  padding-bottom: 5px;
  font-weight: bold;
  font-size: 20px;
}

.marker {
  margin-bottom: 16px;
  line-height: 1.6;
  position: relative;
  font-size: 20px;
  padding-left: 30px;
}

.marker::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 2px;
  color: #007BC7; /* サブカラー（青系）に変更 */
  font-size: 18px;
}


.payp {
  padding-top: 20px;
  line-height: 1.8;
  font-size: 16px;
  color: #333;
  text-align: center;
}

.payimg {
  flex: 1 1 40%;
  padding: 20px;
  text-align: center;
}

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

.flowing-images {
  overflow: hidden;
  width: 100%;
  background: #fff;
  /* 背景色はお好みで */
  padding: 30px 0;
  margin-top: -30px;
}

.flow-track {
  display: flex;
  width: calc(200%);
  /* 2倍に伸ばすことでループ */
  animation: scroll-left 30s linear infinite;
}

.flow-track img {
  width: 200px;
  height: auto;
  object-fit: contain;
  margin-right: 30px;
}

/* アニメーション設定 */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}



/* =========================
   Payment section (mobile)
   ========================= */
@media (max-width: 768px) {

  /* セクション余白と背景の見直し */
  .paymentsec {
    margin-top: 48px;
    /* svw依存を抑えて安定させる */
    margin-bottom: 32px;
    padding-bottom: 28px;
    background-position: center top;
    background-size: cover;
  }

  /* 見出し */
  .payttl {
    font-size: clamp(20px, 5.2vw, 24px);
    line-height: 1.4;
    margin: 20px 16px 10px;
  }

  .payttl .mini {
    font-size: clamp(13px, 3.4vw, 14px);
  }

  /* 白箱 */
  .payout {
    margin: 12px 10px;
    /* 左右10pxの外側余白 */
    padding: 16px;
    /* 内側をコンパクトに */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  }

  /* テキスト＆画像のレイアウト（縦並び） */
  .paytxtbox,
  .payimg {
    flex: none;
    width: 100%;
    padding: 8px 0;
  }


  .payimg img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

  /* マーカー付き文言 */
  .paymark {
    align-items: flex-start;
  }

  .paymark span {
    font-size: clamp(14px, 3.9vw, 16px);
    background: linear-gradient(transparent 70%, #B3E5FF24 70%);
  }

  .marker {
    font-size: clamp(14px, 3.9vw, 16px);
    padding-left: 26px;
    margin-bottom: 10px;
  }

  .marker::before {
    top: 1px;
    font-size: 16px;
  }

  .payp {
    padding-top: 12px;
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
  }

  /* 画像（上の白箱の右側） */
  .payimg {
    padding: 0;
  }

  /* 20px → 0 に */
  .payout {
    padding-left: 10px;
    padding-right: 10px;
  }
	}

	
	/*------------------- Instagram -------------------*/
.sns-section {
  width: 1200px;  
  margin: 0 auto;
  padding: 40px;  
}

@media (max-width: 768px) {
  .sns-section {
    width: 100%; 
    padding: 20px; 
  }
}

.sns-icon-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 20px;
}

.sns-profile-link {
  text-decoration: none;
  color: #000;
  display: flex;
  align-items: center;
}

.sns-profile-icon {
  width: 50px;  
  height: 50px; 
  border-radius: 50%;
  margin-right: 10px;
  transition: transform 0.3s ease;
}

.sns-profile-icon:hover {
  transform: scale(1.1);
}

.sns-profile-text {
  font-size: 18px;
  font-weight: bold;
}


/* 投稿一覧 */
.sns-posts-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 20px;
  width: 90%;
  box-sizing: border-box;
}

.sns-post {
  width: 100%;
}

/* 投稿画像 */
.sns-post img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  transition: transform 0.15s ease-out;
}

.sns-post img:hover {
  transform: scale(1.02);
}

/* タブレット版: 3カラム */
@media (max-width: 768px) {
  .sns-posts-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* モバイル版: 2カラム */
@media (max-width: 480px) {
  .sns-posts-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ボタンを中央配置 */
.follow-button-container {
  display: flex;
  justify-content: center; 
  align-items: center; 
  margin-top: 20px;
}

/* フォローボタン */
.follow-button {
  text-decoration: none;
  background-color: #2c6fb2; 
  color: white; 
  font-size: 16px; 
  padding: 12px 24px;
	border-radius: 6px;
  text-align: center;
  transition: background-color 0.3s ease; 
}

.follow-button:hover {
  background-color: #007bc7;
}