@charset "utf-8";
html{
    box-sizing: border-box;
}
body{
    box-sizing: border-box;
}

/* ── ヒーローセクション ── */
.clinic-hero {
  position: relative;
  margin-top: 15px; /* 固定ヘッダー分の余白 */
}
.clinic-hero-bg {
  display: block;
  width: 100%;
  height: auto;
}
.clinic-hero-inner {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.clinic-hero-title {
  font-family: var(--font-catch);
  font-size: var(--font-size-xxl);
  color: var(--color-bg-dark);
  /* 背景は不要とのこと */
}
.clinic-menu-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.clinic-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 152px;
  font-size: 13px;
  padding: 12px 6px;
  background-color: #fff;
  border-radius: 4px;
  text-decoration: none;
  color: var(--color-bg-dark);
  transition: background-color 0.2s;
}
.clinic-menu-btn:hover {
  background-color: var(--color-bg-base);
}
.clinic-menu-btn img {
  width: 24px;
  height: auto;
}
/* モットー */
.clinic-hero-motto {
  position: absolute;
  left: 0; top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: left top;
  font-family: var(--font-catch);
  font-size: var(--font-size-lg);
  letter-spacing: var(--ls-wide);
  color: var(--color-bg-dark);
  white-space: nowrap;
}

/* モバイル：背景画像を削除し、はみ出し対策 */
@media (max-width: 767px) {
  .clinic-hero-bg {
    display: none;
  }
  /**/
  .clinic-hero-inner{
    position:static;
  }
  /* ボタンの背景色は維持 */
  .clinic-menu-btn {
    background-color: #fff;
  }
}

/* ── About Clinic セクション ── */
.clinic-about {
  max-width: 1000px;
  margin: 120px auto;
  padding: 0 20px;
  text-align: center;
}
.clinic-about .page-title-en {
  margin-bottom: 24px;
}
.clinic-about-text {
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--lh-loose);
  color: #333;
}
.clinic-about-text p {
  margin-bottom: 16px;
}

/* ── キャッチコピーセクション ── */
.clinic-catch-section {
  padding: 80px 20px;
  text-align: center;
}
.clinic-catch-section .container {
  max-width: 1000px;
  margin: 0 auto;
}

/* 色変更用ユーティリティ */
.text-pink {
  color: var(--color-bg-deep-key);
}
.text-teal {
  color: var(--color-bg-mid);
}

/* ── 共通コンテナ ── */
.container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

/* ── キャッチコピーセクション ── */
.clinic-catch-section {
  margin: 80px 0;
}
.clinic-catch-section .section-heading {
  font-family: var(--font-catch);
  font-size: var(--font-size-xxl);
  line-height: var(--lh-normal);
  margin: 0;
}
.text-pink { color: var(--color-bg-deep-key); }
.text-teal { color: var(--color-bg-mid); }

/* ── Clinic 特徴セクション ── */
.clinic-features-section {
  background-color: var(--color-bg-light-key);
  padding: 40px 0;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  margin-bottom:100px;
}
.features-header {
  position: relative;
  text-align: center;
  margin-bottom: 40px;
}
.features-main {
  font-family: var(--font-catch);
  font-size: var(--font-size-xxl);
  line-height: var(--lh-normal);
  display: inline-block;
  padding: 0 16px;
  position: relative;
  top: -60px;
  margin: 0;
}
.features-main span {
  color: var(--color-bg-deep-key);
}
.features-sub {
  font-family: var(--font-catch);
  font-size: var(--font-size-xl);
  margin: 8px 0;
  letter-spacing: var(--ls-normal);
}
.features-desc {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  color: #333;
  margin: 0 auto;
  max-width: 600px;
}

/* タイトル画像 */
.clinic-features-title {
  display: block;
  margin: 0 auto 32px;
  max-width: 240px;
}

/* 特徴グリッド */
.clinic-features-grid {
    width: 100%;
    max-width: 100%;
}
.feature-item {
    box-sizing: border-box;
    background: #fff;
    margin: 0 auto;
    border-radius: 4px;
    padding: 24px;
    flex: 1;
    text-align: left;
    margin-bottom: 10px;
    width: 100%;
    max-width: 800px;
}
.feature-icon {
  width: 56px;
  margin-bottom: 16px;
}
.feature-title {
  font-family: var(--font-catch);
  font-size: var(--font-size-lg);
  margin: 0 0 8px;
  color: var(--color-bg-deep-key);
}
.feature-desc {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: #333;
  line-height: var(--lh-loose);
  margin: 0;
}

/* モバイル対応 */
@media (max-width: 767px) {
  .clinic-features-grid {
    flex-direction: column;
    gap: 24px;
  }
  .features-main {
    top: 0;
    background: none;
    padding: 0;
  }
}

/* ── 院内フォトツアーセクション ── */
.clinic-photo-zone {
  max-width: 1000px;
  margin: 140px auto; /* 前後の余白 */
  padding: 0 20px;
}

/* アイコン＋見出し＋テキスト */
/* 写真ツアー部分 */
.clinic-photo-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}
.clinic-photo-icon {
  width: 24px;
  height: auto;
}
.clinic-photo-text {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  margin: 0;
  text-align: left;
}


.photo-zone-header {
  margin-bottom: 40px;
}
.photo-zone-header .section-heading {
  display: inline-block;
  font-family: var(--font-catch);
  font-size: var(--font-size-xxl);
  line-height: var(--lh-normal);
  margin: 0 0 12px;
}
.photo-zone-text {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--lh-loose);
  color: #333;
  max-width: 1000px;
  margin: 0 auto;
}

/* 写真グリッド */
.photo-zone-grid {
  display: flex;
  gap: 16px;
  align-items: center;
}
.photo-large {
  flex: 2;
}
.photo-large img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-sizing: border-box;
}
.photo-small {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0px;
}
@media (max-width: 767px) {
  .photo-small {
    gap: 16px;
  }
}
.photo-small img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-sizing: border-box;
}

/* モバイル時：縦並び */
@media (max-width: 767px) {
  .photo-zone-grid {
    flex-direction: column;
  }
}

/* ── ドクター紹介セクション ── */
.doctor-section {
  max-width: 1000px;
  margin: 120px auto;
  padding: 0 20px;
  text-align: center;
}
.doctor-section .section-heading {
  margin-bottom: 8px;
}
.doctor-section .section-sub {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: #666;
  margin-bottom: 40px;
}

/* プロフィール部分 */
.doctor-profile {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 40px;
}
.doctor-photo img {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 4px;
  display: block;
}
.doctor-intro {
  text-align: left;
}
.doctor-catch {
  font-family: var(--font-catch);
  font-size: var(--font-size-xxl);
  line-height: var(--lh-tight);
  margin: 0 0 16px;
}
.text-teal {
  color: var(--color-bg-mid);
}
.doctor-name {
  font-family: var(--font-catch);
  font-size: var(--font-size-xl);
  margin: 0;
}

/* 本文 */
.doctor-bio p {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--lh-loose);
  text-align: left;
}

/* モバイル：縦並びに切り替え */
@media (max-width: 767px) {
  .doctor-profile {
    flex-direction: column;
    text-align: center;
  }
  .doctor-intro {
    text-align: center;
  }
}

.text_top{
    display: block;
    padding-top:12px;
}

.text_middle{
    display: block;
}

.text_bottom{
    display: block;
    padding-bottom:12px;
}

/* ── ドクター情報：経歴・資格 ── */
.doctor-info-section {
  max-width: 1000px;
  margin: 80px auto;
  padding: 0 20px 60px 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.doctor-info-box {
  background-color: var(--color-bg-base);
  padding: 24px;
  border-radius: 4px;
}

.info-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  border-bottom:solid 3px var(--color-bg-mid);
  padding-bottom:10px;
}

.info-icon {
  width: 24px;
  height: auto;
  margin-right: 8px;
}

.info-title {
  font-family: var(--font-catch);
  font-size: var(--font-size-xl);
  line-height: var(--lh-tight);
  margin: 0;
}

.info-list {
  list-style: disc inside;
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--lh-loose);
  color: #333;
  margin: 0;
  padding: 0;
}

.info-list li {
  margin-bottom: 4px;
}

/* モバイル時：ボックス間の余白を狭く */
@media (max-width: 767px) {
  .doctor-info-section {
    gap: 24px;
  }
}

/* ── インプラント専門医セクション ── */
.specialist-section {
  max-width: 1000px;
  margin: 80px auto;
  padding: 0px 20px 60px 20px;
}

.specialist-inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

/* 写真 */
.specialist-photo {
  width: 30%;
  max-width: 100%;
}
@media (max-width: 767px) {
  .specialist-photo {
    width: 100%;
  }
}
.specialist-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-sizing: border-box;
}

/* タイトル＋名前 */
.specialist-content {
  width: 65%;
  max-width: 100%;
}
.specialist-title {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  margin: 0 0 16px;
  line-height: var(--lh-tight);
}
.specialist-title .text-teal {
  color: var(--color-bg-mid);
  font-family: var(--font-catch);
}
.specialist-name {
  font-family: var(--font-catch);
  font-size: var(--font-size-xl);
  margin-left: 8px;
  color: var(--color-bg-dark);
}

/*挨拶わく*/
.greet_waku{
  padding-bottom: 20px;
}

/* 経歴ボックス */
.specialist-info-box {
  background-color: var(--color-bg-base);
  padding: 24px;
  border-radius: 4px;
  box-sizing: border-box;
}

/* info-header */
.info-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  border-bottom: 3px solid var(--color-bg-mid);
  padding-bottom: 10px;
}
.info-icon {
  width: 24px;
  height: auto;
  margin-right: 8px;
}
.info-title {
  font-family: var(--font-catch);
  font-size: var(--font-size-lg);
  margin: 0;
}

/* info-list */
.info-list {
  list-style: disc inside;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--lh-loose);
}
.info-list li {
  margin-bottom: 4px;
}

/* モバイル時：縦並び */
@media (max-width: 767px) {
  .specialist-inner {
    flex-direction: column;
    gap: 24px;
  }
  .specialist-content{
    width: 100%;
  }
}

/* ── 他担当医師の紹介 ── */
.other-doctors-section {
  max-width: 1000px;
  margin: 80px auto;
  padding: 0 20px;
}

.other-header {
  font-family: var(--font-catch);
  font-size: var(--font-size-xl);
  line-height: var(--lh-normal);
  margin: 0 0 16px;
}

.other-divider {
  border: none;
  border-top: 2px solid var(--color-bg-mid);
  margin-bottom: 32px;
}

.other-group {
  margin-bottom: 32px;
}

.other-subtitle {
  font-family: var(--font-catch);
  font-size: 18px;
  line-height: var(--lh-tight);
  margin: 0 0 8px;
}

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

.other-list li {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--lh-normal);
  margin-bottom: 4px;
}

.other-note {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: #666;
  margin-top: 16px;
}

/* ── アクセスマップセクション ── */
.access-section {
  background-color: var(--color-bg-base);
  padding: 80px 0;
  box-sizing: border-box;
}
.access-section .container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
  box-sizing: border-box;
}
.access-section .section-sub {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: #666;
  margin-bottom: 40px;
}

/* map */
.access-map {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 16px;
}
.access-map iframe {
  width: 100%;
  height: 450px;
  border: 0;
}

/* 住所 */
.access-address {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: #333;
  margin-bottom: 32px;
  text-align: left;
}

/* 道順ガイド見出し */
.access-guide-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 24px;
}
.guide-icon {
  width: 24px;
  height: auto;
}
.guide-title {
  font-family: var(--font-catch);
  font-size: var(--font-size-md);
}

/* ステップカードグリッド */
.access-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

/* 各ステップカード */
.access-step {
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  text-align: left;
  box-sizing: border-box;
}
.step-title {
  font-family: var(--font-catch);
  font-size: var(--font-size-md);
  margin: 0 0 8px;
}
.step-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 8px;
}
.step-desc {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: #333;
  line-height: var(--lh-normal);
  margin: 0;
}

/* モバイル時：縦並び */
@media (max-width: 767px) {
  .access-steps-grid {
    grid-template-columns: 1fr;
  }
}

/* ── ご予約ガイドセクション ── */
.reservation-guide-section {
  padding: 80px 0;
}
.reservation-guide-section .container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
  box-sizing: border-box;
}
.reservation-guide-section .section-sub {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: #666;
  margin-bottom: 24px;
}

/* グラデ帯 */
.rg-gradient-band {
  margin: 0 auto 40px;
  max-width: 1000px;
  height: 48px;
  line-height: 48px;
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  background: linear-gradient(90deg, #FDC9BE 0%, #8DF1EA 100%);
}

/* ステップ全体 */
.rg-steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 40px;
}
.rg-step {
  display: flex;
  gap: 16px;
  text-align: left;
}
.rg-icon {
  flex: 0 0 48px;
  width: 48px;
  height: auto;
}
.rg-step-content {
  flex: 1;
}
.rg-step-title {
  font-family: var(--font-catch);
  font-size: var(--font-size-lg);
  margin: 0 0 8px;
}
.rg-step-title .text-teal {
  color: var(--color-bg-mid);
}
.rg-step-desc {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
  color: #333;
  margin: 0;
}

/* グラデーションボックス共通 */
.rg-box {
  max-width: 1000px;
  margin: 0 auto 24px;
  padding: 24px;
  border-radius: 4px;
  text-align: left;
}
.rg-box--gradient {
  background: linear-gradient(90deg, #FDC9BE 0%, #8DF1EA 100%);
}
.rg-box-title {
  font-family: var(--font-catch);
  font-size: var(--font-size-lg);
  margin: 0 0 12px;
}
.rg-box-desc {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
  color: #333;
  margin: 0;
}

/* ポリシーボタン横並び */
.rg-policy-buttons {
  display: flex;
  gap: 4%;
  justify-content: space-between;
  margin: 40px auto;
  max-width: 1000px;
}
.btn-policy {
  display: inline-block;
  width: 48%;
  padding: 24px 0;
  font-family: var(--font-catch);
  font-size: var(--font-size-lg);
  text-decoration: none;
  color: #000;
  border-radius: 4px;
  text-align: center;
}
.btn-policy--teal {
  background-color: var(--color-bg-mid);
}
.btn-policy--pink {
  background-color: var(--color-bg-key);
}

/* グラデリンクボタン */
.rg-link-buttons {
  margin: 0 auto;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 0px 80px;
}
.btn-gradient-link {
  display: block;
  font-family: var(--font-catch);
  font-size: var(--font-size-lg);
  text-decoration: none;
  color: #000;
  padding: 16px 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #FDC9BE 0%, #8DF1EA 100%);
  text-align: center;
}

/* モバイル対応 */
@media (max-width: 767px) {
  .rg-steps {
    gap: 24px;
  }
  .rg-step {
    flex-direction: column;
    align-items: flex-start;
  }
  .rg-policy-buttons {
    flex-direction: column;
  }
  .btn-policy {
    width: 100%;
    margin-bottom: 16px;
  }
  .rg-link-buttons {
    padding-bottom: 40px;
  }
}

/* ===== Cancellation Policy (page local) ===== */
.cpolicy { 
  padding: 80px 20px 40px;
}

.cpolicy-head{
  text-align: center;
  margin-bottom: 24px;
}

.cpolicy-inner{
  max-width: 900px;   /* 読みやすさ優先でやや広め */
  margin: 0 auto;
}

.cpolicy-item{
  padding: 16px 0;
  border-bottom: 1px solid #eee;   /* セクションの区切り（点線は使わない） */
}

.cpolicy-item:last-child{
  border-bottom: none;
}

.cpolicy-title{
  font-family: var(--font-catch);
  font-size: var(--font-size-lg);
  line-height: var(--lh-tight);
  margin: 8px 0 4px;
}

.cpolicy-text{
  font-family: var(--font-body);
  font-size: var(--font-size-m);
  line-height: var(--lh-relaxed);
  color: #000;
  margin: 6px 0;
}

.cpolicy-note{
  color: #666;        /* 注意書きは控えめに */
  font-size: var(--font-size-sm);
}

/* Mobile */
@media (max-width: 767px){
  .cpolicy { padding: 64px 16px 32px; }
  .cpolicy-title{ font-size: calc(var(--font-size-lg) - 1px); }
  .cpolicy-text{ font-size: var(--font-size-m); }
}

/* ===== Management Policy (page local) ===== */
.mpolicy{
  padding: 80px 20px 40px;
}
.mpolicy-head{
  text-align: center;
  margin-bottom: 24px;
}
.mpolicy-sub{
  font-family: var(--font-body);
  font-size: var(--font-size-m);
  color: #666;
  margin-top: 4px;
}
.mpolicy-inner{
  max-width: 900px;
  margin: 0 auto;
}
.mpolicy-item{
  padding: 16px 0;
  border-bottom: 1px solid #eee;
}
.mpolicy-item:last-child{ border-bottom: none; }

.mpolicy-title{
  font-family: var(--font-catch);
  font-size: var(--font-size-lg);
  line-height: var(--lh-tight);
  margin: 8px 0 4px;
}
.mpolicy-text{
  font-family: var(--font-body);
  font-size: var(--font-size-m);
  line-height: var(--lh-relaxed);
  color: #000;
  margin: 6px 0;
}
.mpolicy-list{
  margin: 6px 0;
  padding: 0;
  list-style: disc;
  font-family: var(--font-body);
  font-size: var(--font-size-m);
  line-height: var(--lh-relaxed);
  color: #000;
}

/* Mobile */
@media (max-width: 767px){
  .mpolicy{ padding: 64px 16px 32px; }
  .mpolicy-title{ font-size: calc(var(--font-size-lg) - 1px); }
  .mpolicy-text, .mpolicy-list{ font-size: var(--font-size-m); }
}