/* ------------------------------------------------

*共通CSS

　------------------------------------------------ */
* {
  font-family: 'Noto Serif JP', serif;
}

/* ------------------------------------------------

*ヘッダーCSS

　------------------------------------------------ */
/* ====== Base ====== */
:root {
  --ink: #f7f7f7;
  --ink-dim: #d7dbe0;
  --bg: #2F353A;
  --bg-hover: #262c31;
  --accent: #C0A146;
  --gap: clamp(12px, 2vw, 20px);
}

* {
  box-sizing: border-box
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sp_only {
  display: none;
}
  .pc_only{
    display: block;
  }
.red-p{
	font-weight:600;
	color:#B20014;
}
  @media (max-width:48em) {
      .sp_only {
    display: block;
  }
  .pc_only{
    display: none;
  }
  }

/* ====== Header ====== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing:border-box;
   z-index: 20;
}

.header-inner {
  margin: 0 auto;
  padding: 0.75em clamp(0.875em, 4vw, 1.75em);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1em;
}

/* 追加：右側の中身を整列（バナー + ハンバーガー） */
.header-right {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  position: relative;
}

/* 追加：左側を縦書きH1の基準にする */
.header-left {
  position: relative;
}

.logo-text {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: #333;
  letter-spacing: 0.05em;
  line-height: 1.25;
}

.logo-text_name {
  font-size: clamp(1.25em, 4vw, 1.625em);
  font-weight: 600;
  color: #3e2c2e;
}

.logo-text_line {
  width: 100%;
  max-width: 16.25em;
  height: 1px;
  background: rgba(0, 0, 0, .5);
  margin: 0.5em 0 0.375em;
}

.logo-text_tagline {
  margin: 0;
  font-size: 0.75em;
  font-weight: 500;
  color: #3e2c2e;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.header-banner {
  display: inline-block;
  text-decoration: none;
}

.header-banner img {
  display: block;
  width: min(13.75em, 28vw);
  height: auto;
    transition: all 0.1s;
}
.header-banner img:hover{
 opacity: 0.8;
transform: translateY(3px);
}

/* ====== ハンバーガー（デフォルトは非表示） ====== */
.nav-toggle {
  display: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 2.75em;
  height: 2.75em;
  padding: 0;
  position: relative;
  align-items: center;
  justify-content: center;
}

.nav-toggle_line {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 999px;
  transform: translateX(-50%);
  transition: top 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle_line--1 {
  top: calc(50% - 8px);
}

.nav-toggle_line--2 {
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.nav-toggle_line--3 {
  top: calc(50% + 8px);
}

/* 開いた時に × にする */
.nav-toggle.is-active .nav-toggle_line--1,
.nav-toggle[aria-expanded="true"] .nav-toggle_line--1 {
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.nav-toggle.is-active .nav-toggle_line--2,
.nav-toggle[aria-expanded="true"] .nav-toggle_line--2 {
  opacity: 0;
}

.nav-toggle.is-active .nav-toggle_line--3,
.nav-toggle[aria-expanded="true"] .nav-toggle_line--3 {
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

/* ====== メインビジュアル ====== */
.main-visual {
  position: relative;
}

.main-visual_image {
  width: 100%;
  height: auto;
  aspect-ratio: 1440/705;
  background-image: url(../images/main-visual.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
margin: 0;
  padding: 0;
}

@media (max-width:48em) {
  .main-visual_image {
    aspect-ratio: 375/490;
    background-image: url(../images/main-visual_sp.png);
  }
}

/* ====== Nav（PC：画像の下） ====== */
.nav {
    background: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.nav-inner {
    max-width: 1280px;
    margin: 0 auto;
}

.nav-list {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list li {
    display: flex;
    align-items: center;
}

/* --- メインリンク設定 ＆ 下線アニメーション --- */
.nav-list a {
    display: block;
	padding: 1.25em 1.5em;
	color: #333;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    position: relative; /* アニメーションの基準 */
    transition: opacity .25s ease;
}


.nav-list li a:hover{
    color: #C0A146;
}

.nav-list a.nav-gaku{
color:#b20014;	
}

.header-right {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  position: relative;
}

/* 共通 */
.header-banner {
  display: inline-block;
  text-decoration: none;
}

.header-banner img {
  display: block;
  width: min(13.75em, 28vw);
  height: auto;
  transition: all 0.1s;
}

/* 無料相談バナーのみホバー */
.header-banner--consult img:hover {
  opacity: 0.8;
  transform: translateY(3px);
}

/* 診療時間バナーは動かさない */
.header-banner--time img,
.header-banner--time img:hover {
  opacity: 1;
  transform: none;
}

/* PC版：ホバーで左から右に伸びる下線 */
@media (min-width: 961px) {
.nav-list a:not(.btn--primary)::after {
        content: "";
        position: absolute;
        left: 1.875em;
        right: 1.875em;
        bottom: 12px;
        height: 2px;
        background: #C0A146;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .3s ease;
    }

    .nav-list a:not(.btn--primary):hover::after {
        transform: scaleX(1);
    }

    /* --- 2列プルダウン設定 --- */
    .nav-item--hasSub {
        position: relative;
    }

.nav-sub {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    display: grid;
    grid-template-columns: 1fr; /* 2列 → 1列 */
    gap: 0;
    min-width: 280px; /* 必要に応じて調整 */
    background: #fff;
    padding: 15px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: all .3s ease;
    z-index: 1000;
    list-style: none;
    background-color: #faf8f1;
  }

  .nav-item--hasSub:hover .nav-sub {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }

  .nav-list .nav-sub li {
    display: block;
    width: 100%;
  }

  .nav-list .nav-sub a {
    display: block;
    width: 100%;
    padding: 15px;
    font-size: 0.85rem;
    font-weight: 500;
    border-bottom: 1px solid #ffffff;
    color: #333;
  }

    /* 子メニューの下線の位置と太さを微調整 */
    .nav-list .nav-sub a::after {
        left: 15px;   /* paddingに合わせて調整 */
        right: 15px;
        bottom: 8px;
        height: 1px;  /* 子メニューは少し細く */
    }

    .nav-list .nav-sub a:hover {
        background: #F5EFDE;
        color: #C0A146;
    }
  .header-right {
    /* 固定される無料相談バナー分のスペースを確保 */
    padding-right: calc(min(13.75em, 28vw) + 0.75em);
  }

  .header-banner-fixed {
    position: fixed;
    top: 12px;
    right: clamp(14px, 2vw, 28px);
    z-index: 1200;
    width: min(13.75em, 28vw);
  }

  .header-banner-fixed img {
    width: 100%;
  }
}
/* --- スマホ版アコーディオン設定 (960px以下) --- */
@media (max-width: 960px) {
    .nav-item--hasSub .nav-sub {
        display: none; /* JSで.is-subOpenをtoggleして制御 */
        list-style: none;
        padding: 0;
        background: rgba(0, 0, 0, 0.2);
    }

    .nav-item--hasSub.is-subOpen .nav-sub {
        display: block;
    }

    /* 矢印アイコン追加 */
    .sub-trigger::after {
        content: "▼";
        font-size: 0.6rem;
        margin-left: 8px;
        display: inline-block;
        transition: transform 0.3s;
    }

    .nav-item--hasSub.is-subOpen .sub-trigger::after {
        transform: rotate(180deg);
    }
}

@media (max-width: 960px) {

    /* ヘッダーレイアウト */
    .site-header .header-inner {
        display: block;
        position: relative;
        padding: 0;
        height: auto;
    }

    /* 左側ロゴエリア */
    .site-header .header-left {
        display: block;
        padding: 10px 0 0 10px;
        width: calc(100% - 70px);
    }

    .logo-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .logo-text_name {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .logo-text_line {
        max-width: 180px;
        margin: 4px 0;
    }

    .logo-text_tagline {
        position: static;
        writing-mode: horizontal-tb;
        background: rgba(255, 255, 255, 0.5);
		padding: 5px 10px;
        font-size: 0.6rem;
        color: #3e2c2e;
    }

    /* 右側エリア（予約バナー消去） */
    .header-banner {
        display: none !important;
    }

    .header-right {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
    }

    .site-header .header-inner .header-right .nav-toggle {
display: flex;
        position: fixed;
        top: 0;
        right: 0;
        width: 65px;
        height: 65px;
        background-color: #C0A146;
        z-index: 2001;
        margin: 0;
        justify-content: center;
        align-items: center;
        border: none;
    }

    /* FVテキスト */
    .fv-unit p {
        left: 15px;
        top: 75%;
        font-size: 0.9rem;
    }

    .fv-unit p::after {
        width: 240px;
        bottom: -5px;
        max-width: 70vw;
    }
}

@media (max-width:960px) {
 
   .nav-toggle {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    width: 65px;
    height: 65px;
    background-color: #C0A146;
    z-index: 3000;
    margin: 0;
    justify-content: center;
    align-items: center;
    border: none;
}

  /* --- 4. ハンバーガーを右上固定配置（absolute） --- */
  .site-header .header-inner .header-right .nav-toggle {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    width: 65px;
    height: 65px;
    background-color: #C0A146;
    margin: 0;
    justify-content: center;
    align-items: center;
    border: none;
  }

  .site-header .nav-toggle_line {
    background-color: #ffffff;
  }

  .header-banner img {
    display: none;
  }
  
}
/* ------------------------------------------------
* ドロワーメニュー (タブレット・スマホ共通 960px以下)
------------------------------------------------ */
@media (max-width: 960px) {
    #global-nav.nav {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        width: 80%;
        height: 100dvh;
		background: #F2EBE1;
        z-index: 1000;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        border: none;
        overflow-y: auto;
    }

    #global-nav.nav.is-open {
        transform: translateX(0);
    }

    .nav-list {
        flex-direction: column !important;
        padding: 80px 20px 40px;
        align-items: stretch;
        justify-content: flex-start;
    }

    .nav-list li {
        width: 100%;
        display: block; /* 区切り線対策 */
    }

    .nav-list li::after {
        display: none;
    }

    .nav-list a {
        padding: 1.25em 1em;
        border-bottom: 0.6px solid rgba(153, 154, 154, 0.3);
        width: 100%;
        font-size: 1.1rem;
        color: #333333;
        font-weight: 400;
    }

    /* --- スマホ版アコーディオン設定 --- */
    .nav-item--hasSub .nav-sub {
        display: none; /* JSのclassList.toggle('is-subOpen')で制御 */
        list-style: none;
        padding: 0;
		background: #F2EBE1;
    }

    .nav-item--hasSub.is-subOpen .nav-sub {
        display: block;
    }

    .nav-sub a {
        padding-left: 2.5em ;
        font-size: 0.95rem ;
        border-bottom: 0.6px solid rgba(153, 154, 154, 0.3) ;
    }

    /* スマホ用プルダウン矢印 */
    .sub-trigger::after {
        content: "▼";
        font-size: 0.6rem;
        margin-left: 8px;
        display: inline-block;
        transition: transform 0.3s;
    }

    .nav-item--hasSub.is-subOpen .sub-trigger::after {
        transform: rotate(180deg);
    }
}

/* ------------------------------------------------

*感染予防CSS

　------------------------------------------------ */
/* 全体コンテナ（NEWSの前に挿入） */
.notice-container {
	max-width: 1440px;
  margin: 40px auto 0px;
  padding: 0 20px;
}

/* 枠線部分 */
.notice-border {
  border: 1px solid #8A7433; /* 画像に近い落ち着いた茶色 */
  padding: 0px;
  text-align: center;
background: repeating-linear-gradient(
    -45deg,
    #ffffff,
    #ffffff 2px,
    #f9f7f2 2px,
    #f9f7f2 4px
  );
}

/* タイトル部分 */
.notice-title {
  font-size: 20px;
  font-weight: 620;
  margin-bottom: 25px;
  color: #5b4a2b;
	padding-top:10px;
	letter-spacing:0.12em;
}

/* 金色のマーカー線 */
.notice-marker {
	background: linear-gradient(transparent 60%, rgba(192, 161, 70, 0.5) 60%);
	padding: 0 10px;
}

/* 本文 */
.notice-text {
  font-size: 16px;
  line-height: 1.5;
  color: #5b4a2b;
  letter-spacing: 0.05em;
	text-align:center;
}

/* 「院内ではマスク」の強調部分 */
.highlight {
  color: #B20014;
  font-weight: 600;
}

/* レスポンシブ対応：PCでのみ改行 */
.pc-only {
  display: block;
}

@media (max-width: 768px) {
  .notice-container {
    margin: 30px auto;
  }
  .notice-border {
    padding: 10px 15px;
  }
  .notice-title {
    font-size: 20px;
  }
  .notice-text {
    font-size: 14px;
    line-height: 1.8;
    text-align: left; /* スマホでは左寄せの方が見やすい場合があります */
    display: inline-block; /* 中央揃えの中の左寄せ用 */
  }
  .pc-only {
    display: none;
  }
}
/* ------------------------------------------------

*お知らせCSS

　------------------------------------------------ */
.info-blocks {
  max-width: 1440px;
  padding: 2.5em 1.25em;
  /* 40px 20px */
  background-color: rgba(255, 247, 232, 1);
  margin: 2em auto 0;
  /* margin-top:80px */
  max-width: 90em;
  /* 1440px */
  text-align: center;
  position: relative;
  letter-spacing: 0.3em;
}

.center {
  margin-bottom: 2.5em;
}

/* 40px */

.info-title {
  font-size: 2.5em;
  /* 40px */
  font-weight: 400;
  color: #2F353A;
}

.sub-title {
  font-size: 1.5em;
  /* 24px */
  color: var(--accent);
  font-weight: 400;
  margin-top: 0.3125em;
  /* 5px */
  padding-bottom: 1.25em;
  /* 20px */
  border-bottom: 1px solid rgba(47, 53, 58, 0.7);
  width: 80%;
  /* 800px */
  margin: 0 auto;
}

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

.info-list li {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 1.25em;
  /* 20px */
  font-size: 1.25em;
  /* 20px */
  color: #2F353A;
  padding: 0.9375em 0 0.9375em 5em;
  /* 15px 0 15px 80px */
}

.info-list li a {
  text-decoration: none;
  color: #333;
  display: flex;
  gap: 0.625em;
  /* 10px */
  align-items: center;
}

.date {
  color: #333;
  margin-right: 3.75em;
  /* 60px */
  letter-spacing: 0.3em;
}

.text {
  max-width: 31.25em;
  /* 500px */
  text-align: left;
  letter-spacing: 0.3em;
}

.news__link {
  display: inline-block;
  position: relative;
  color: #fff;
  background-color: var(--accent);
  padding: 1em 3.5em 1em 3em;
  transition: all .3s;
  letter-spacing: 0.4em;
  margin-top: 1.25em;
  /* 20px */
  font-size: 1.25em;
  /* 20px */
	font-weight:600;
}

.news__link:after {
  content: "";
  width: 0.625em;
  /* 10px */
  height: 0.625em;
  /* 10px */
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 50%;
  right: 1.25em;
  /* 20px */
}

.news__link:hover {
  background-color: #816c20;
  color: #fff;
}

.news__link:active {
  background-color: #5B4A2B;
  color: #fff;
}

.button {
  text-align: right;
  margin-right: 2.5em;
  /* 40px */
}

@media (max-width:48em) {
  .info-blocks {
    padding: 2.5em 0.625em;
    /* 40px 10px */
    margin-top: 2.5em;
    /* 40px */
    letter-spacing: 0.1em;
  }

  .info-title {
    font-size: 1.875em;
  }

  /* 30px */

  .sub-title {
    font-size: 1.125em;
    /* 18px */
    padding-bottom: 0.9375em;
    /* 15px */
    width: 90%;
    max-width: 25em;
    /* 400px */
  }

  .info-list {
    margin-top: 1.25em;
  }

  /* 20px */

  .info-list li {
    display: block;
    text-align: left;
    font-size: 1em;
    /* 16px */
    padding: 0.625em 5%;
  }

  .info-list li a {
    display: block;
    gap: 0;
  }

  .date {
    display: block;
    font-size: 0.875em;
    /* 14px */
    margin-right: 0;
    margin-bottom: 0.3125em;
    /* 5px */
    letter-spacing: 0.1em;
  }

  .text {
    max-width: none;
    letter-spacing: 0.1em;
    font-size: 1em;
    /* 16px */
  }

  .button {
    text-align: center;
    margin-right: 0;
    margin-top: 2.5em;
    /* 40px */
  }

  .news__link {
    font-size: 1em;
    /* 16px */
    letter-spacing: 0.4em;
  }

  .news__link:after {
    right: 1em;
    width: 0.5em;
    height: 0.5em;
  }
}

/* ------------------------------------------------

*顎関節や噛み合わせの不調に「マウスピース矯正」という選択肢CSS

　------------------------------------------------ */
/* --- 全体レイアウト --- */
.mouthpiece-section {
  font-family: "Hiragino Mincho ProN", "MS Mincho", serif;
  color: #333;
  padding: 4em 0 4em 0;
  line-height: 1.6;
	max-width:1160px;
  margin: 0 auto;
  position: relative;
  background-image: url(../images/mouthpiece_bg.png);
  background-repeat: no-repeat;
}

/* --- ヘッダー・背景透かし文字 --- */
.mouthpiece-header {
  position: relative;
  text-align: center;
  padding: 3.75em 0;
  z-index: 5;
}

.mouthpiece-bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8em;
  /* 128px */
  color: #e9e2d3;
  opacity: 0.4;
  font-family: serif;
  z-index: 1;
  white-space: nowrap;
  letter-spacing: 0.1em;
  line-height: 1.1;
  pointer-events: none;
}

.mouthpiece-main-title {
  position: relative;
  z-index: 2;
  font-size: 3.5em;
  /* 56px */
  color: #5B4A2B;
  margin: 0;
  letter-spacing: 0.1em;
  font-weight: 500;
}

/* 文字グラデーション (斜め) */
.gradation_p {
  font-size: 1.2em;
  background: linear-gradient(45deg, #5A4B21 0%, #C0A146 50%, #5A4B21 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  font-weight: 600;
}

.small_p {
  font-size: 0.54em;
  /* 3rem相当のバランス調整 */
  color: #5B4A2B;
  -webkit-text-fill-color: initial;
}

.gold_p {
  color: #C0A146;
  font-weight: 600;
}

/* マーカー (下半分80%透明度) */
.marker_p {
  background: linear-gradient(transparent 65%, rgba(192, 161, 70, 0.8) 65%);
  display: inline-block;
  padding: 0 0.1em;
  letter-spacing: 0.16em;
	line-height:1.4;
}

/* --- コンテンツボックス共通 --- */
.mouthpiece-content-box {
  display: flex;
  align-items: stretch;
  /* これで中の白背景と画像の高さが自動で揃う */
  max-width: 100%;
  /* 1100px相当 */
  margin: 0 auto;
  position: relative;
  box-shadow: 0 0.625em 1.875em rgba(0, 0, 0, 0.05);
  background-repeat: no-repeat;
}

/* 上段：右側に女性の顔がくるように調整 */
.top-box {
  background-image: url("../images/mouthpiece01.png");
  background-position: center right;
  background-color: #ffffff;
  margin-bottom: 3em;
}

/* 下段：左側にマウスピースがくるように調整 */
.bottom-box {
  background-image: url("../images/mouthpiece02.png");
  background-position: center left;
  flex-direction: row-reverse;
  /* 白背景を右側に配置 */
  background-color: #ffffff;
  margin-bottom: 3em;
}

/* --- テキストエリア (白い背景部分) --- */
.text-side {
  flex: 0 0 55%;
  /* 横幅の55%を白背景が占める */
  background: rgba(255, 255, 255, 0.95);
  padding: 1.4em;
  margin: 3em 0 3em 5em;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.1);
}

.text-side h3 {
  font-size: 1.4em;
  /* 20px */
  color: #5B4A2B;
  border-bottom: 0.0625em solid rgba(51, 51, 51, 0.5);
  padding-bottom: 0.1em;
  margin-bottom: 0.8em;
  font-weight: 600;
  letter-spacing: 0.1em;
}

p {
  font-size: 0.9375em;
  /* 15px */
  margin-bottom: 1.2em;
  text-align: justify;
}

.highlight-red {
  color: #B20014;
  font-weight: 600;
}

/* --- 比較画像 (枠からはみ出す演出) --- */
.comparison-img {
  position: absolute;
  bottom: -3em;
  /* 枠の下にはみ出させる */
  right: 1em;
  /* 枠の右にはみ出させる */
  width: 20em;
  /* 320px相当 */
  z-index: 10;
}

.comparison-img img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0.5em 1em rgba(0, 0, 0, 0.15));
  /* 影をつけて浮遊感を強調 */
}

/* 下段のテキスト側の余白微調整（はみ出し画像用） */
.bottom-box .text-side {
  padding-bottom: 4em;
  margin: 3em 4em 3em 2em;
}
@media screen and (max-width: 768px) {
  .mouthpiece-section {
    background-image: url(../images/mouthpiece_bg_sp.png);
     background-size: 100%; /* スマホで背景画像を縮小 */
      background-position: top;
      background-repeat: no-repeat;
      padding-bottom: 3em;
  }

  /* 1. ヘッダー周り：文字サイズを調整して折り返しを防ぐ */
  .mouthpiece-header {
    padding: 0 0 1.5em 0;
  }

  .mouthpiece-main-title {
    font-size: 1.4rem; /* スマホで見やすいサイズに */
    line-height: 1.5;
	  font-weight:600;
  }

  .gradation_p {
    font-size: 1.1em;
  }
.small_p{
  font-size: 0.8em;
}
  /* 2. コンテンツボックス：Flexを解除し縦並びへ */
  .mouthpiece-content-box {
    display: flex;
    flex-direction: column; /* 画像とテキストを縦に */
    background-image: none !important; /* PC用の背景画像を消す */
    box-shadow: none;
    margin-bottom: 2em;
    background-color: transparent;
  }

  /* 3. 画像エリア：imgタグがない箇所の背景画像を擬似的に挿入 */
  /* 上段の女性画像 */
  .top-box::before {
    content: "";
    display: block;
    width: 100%;
    height: 200px; /* 画像の高さ */
    background-image: url("../images/mouthpiece01_sp.png");
    background-size: cover;
    background-position: center;

  }

  /* 下段のマウスピース画像 */
  .bottom-box::before {
    content: "";
    display: block;
    width: 100%;
    height: 200px;
    background-image: url("../images/mouthpiece02_sp.png");
    background-size: cover;
    background-position: center;
  }

  /* 4. テキストエリア（白い背景部分）の調整 */
  .text-side {
    flex: none;
    width: 100%;
    margin: 0 !important;
    padding: 2em;
  }

  .text-side h3 {
    font-size: 1.25rem;
    line-height: 1.4;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 15px;
    text-align: center;
  }

  .text-inner p {
    font-size: 0.93rem;
    line-height: 1.3;
    margin-bottom: 1.5em;
    letter-spacing: 0.13em;
  }

  /* 5. 比較画像（はみ出し演出）をモバイルではリスト下に配置 */
  .comparison-img {
    display: none;
  }

  .comparison-img img {
    filter: none;
  }
  .bottom-box .text-side{
    padding-bottom: 2em;
  }
}
/* ------------------------------------------------

*患者様のお悩みに合った治療を総合的な視点でご提案CSS

　------------------------------------------------ */
.mouthpiece-section2 {
  color: #333;
  max-width: 90em;
  /* 1440px */
  margin: 0 auto;
  margin-top: 40px;
  padding-bottom: 60px;
  text-align: center;
  position: relative;
  z-index: 1;
  background-image: url(../images/mouthpiece_bg2.png);
  background-repeat: no-repeat;
}

/* --- テキストコンテンツ & ガウスぼかし背景 --- */
.section2-text-content {
  position: relative;
  max-width: 62.5em;
  padding: 0 2em;
  margin: 0 auto 3em;
}

.text-inner {
  letter-spacing: 0.18em;
  line-height: 1.2em;
}

/* 背景のガウスぼかし部分 (#C0A146の45%不透明度) */
.section2-text-content::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  /* #C0A146 を rgba に変換 (192, 161, 70) */
  background: rgba(192, 161, 70, 0.5);
  filter: blur(70px);
  /* ガウスぼかし */
  border-radius: 30%;
  z-index: -1;
}

.mouthpiece-section2 .mouthpiece-main-title {
  letter-spacing: 0.17em;
	font-size:50px;
}

.photo-gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
  padding: 0 2em;
}

.photo-item {
  background: #fff;
  box-shadow: 0.5em 0.5em 1em rgba(0, 0, 0, 0.2);
  border: 1px solid #eee;
  flex-shrink: 0;
}

/* 左側の写真：下の余白を狭く調整 */
.rotate-left {
  width: 27em;
  /* 右より少し小さい */
  padding: 0.8em;
  transform: rotate(-3deg);
}

/* 右側の写真：左より少し大きく、ポラロイド風の余白 */
.rotate-right {
  width: 27em;
  /* 左より大きく */
  padding: 0.8em;
  transform: rotate(3deg);
}

.photo-item img {
  width: 100%;
  height: auto;
  display: block;
}
@media screen and (max-width: 768px) {
  .mouthpiece-section2 {
    max-width: 100%;
    padding: 1.5em 15px 5em;
    background-size: 100%; /* スマホで背景画像を縮小 */
      background-position: top;
      background-repeat: no-repeat;
    overflow: hidden; /* 写真のはみ出し対策 */
    margin-top: 30px;
  }

  /* 2. タイトル部分の調整 */
  .mouthpiece-section2 .mouthpiece-main-title {
    font-size: 1.2rem;
    line-height: 1.7;
    margin-bottom: 0.5em;
  }
	.mouthpiece-section2 .mouthpiece-main-title .gradation_p{
		font-size:1.6rem;
		font-weight:700;
	}
  /* 3. 本文エリア（中央のぼかし背景を含む） */
  .section2-text-content {
    padding: 0 5px;
    margin-bottom: 2em;
  }

  /* 背景のガウスぼかしをモバイル用に広げる */
  .section2-text-content::before {
    width: 80%;
    height: 100%;
    filter: blur(50px);
    opacity: 0.6;
  }

  /* 4. フォトギャラリー（ポラロイド風の重ね配置） */
  .photo-gallery {
    display: block; /* Flexを解除して重ねる */
    position: relative;
    height: 190px; /* 写真の高さ分を確保 */
    margin-top: 0;
  }

  .photo-item {
    position: absolute;
    width: 65%; /* 画面幅に対してのサイズ */
    padding: 8px 8px 25px; /* 下側を広くしてポラロイド風に */
  }

  /* 左の写真（下側・左寄り） */
  .rotate-left {
    top: 50px;
    left: 5%;
    z-index: 5;
    transform: rotate(-5deg);
    width: 45%;
    padding: 4px;
  }

  /* 右の写真（上側・右寄り・左に重ねる） */
  .rotate-right {
    top: 0;
    right: 5%;
    z-index: 6;
    transform: rotate(4deg);
    width: 50%; /* 少しだけ大きくして遠近感を出す */
    padding: 4px;
  }

  .photo-item img {
    box-shadow: none; /* 親のbox-shadowがあるため */
  }
}
/* ------------------------------------------------

*症例紹介CSS

　------------------------------------------------ */
.case-slider {

  background: url(../images/shourei_bg.png);
  position: relative;
  padding: 60px 0 100px 0;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: cover;
}


.case-inner {
  gap: 40px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

/* 見出し */
.case-header {
  text-align: center;
  padding: 0 20px 40px 20px;
  font-family: 'Noto Serif JP', serif;
  color: #ffffff;

}

.case-main {
  font-size: 4em;
  background: linear-gradient(to right,
      #9C7A1D 0%,
      /* 左側の濃い黄土色 */
      #D1A945 25%,
      /* 中間の明るいゴールド */
      #F4D677 45%,
      /* ハイライト（最も明るい部分） */
      #D1A945 65%,
      /* 右にかけて再度ゴールド */
      #A0730B 100%
      /* 右端の深いブロンズ */
    );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.15em;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 1));
}

.case-main .gold {
  font-size: 2.5rem;
  letter-spacing: 0.03em;
}


.case-main .highlight-line {
  display: inline-block;
  position: relative;
  font-size: 3.5rem;
  margin-top: 10px;
  background: linear-gradient(135deg, #9b7530, #cbb471, #977c4c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

/* カルーセルブロック */
.case-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.case-carousel::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -30px;
  right: -30px;
  bottom: -20px;
  /* background: rgba(255, 255, 255, 0.8);  */
  z-index: -1;
}

.case-carousel-track {
  display: flex;
  transition: transform 0.7s ease-out;
  width: 100%;
}

.case-carousel-slide {
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-width: 100%;
  box-sizing: border-box;
}

.case-slide {
  display: flex;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: 20px;
}

.case-image-area {
  width: 40%;
  position: relative;
  overflow: hidden;
  padding: 15px;
}

.case-image-area img {
  width: 100%;
  height: 100%;
  display: block;
}

.case-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px 15px;
  font-size: 14px;
}

.case-tag {
  font-size: 14px;
  margin-bottom: 4px;
  color: #fff;
}

.case-cta {
  font-size: 12px;
  opacity: 0.8;
  color: #fff;
}

.case-info {
  width: 100%;
  padding: 15px;
}

.case-bfafp {
  max-width: 873px;
  margin: 0 auto;
  padding: 12px;
}

p.case-heading {
  background: #5B4A2B;
  color: #fff;
  padding: 5px;
  margin: 5px 0;
}

.case-text {
  background: #FFF7E8;
  font-size: 15px;
  line-height: 1.7;
  color: #444;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 12px;
  padding: 5px;
}

.case-before-after {
  display: flex;
  justify-content: center;
  /* gap: 10px; */
  max-width: 873px;
  margin: 0 auto;
}

.arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #5B4A2B;
  padding: 0 5px;
  font-weight: bold;
}

.case-before-after p {
  color: #5B4A2B;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  /* color: #fff; */
  background-color: #E9D59B;
  padding: 4px 8px;
  display: inline-block;
  width: 80px;
  margin: 0 auto 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.beforediv,
.afterdiv {
  position: relative;
}

p.before,
p.after {
  position: absolute;
  top: 0;
}

.case-before-after img {
  max-width: 100%;
  height: 172px;
  margin: 0 auto;
}

/* ナビ */
.case-carousel-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 20px;
  box-sizing: border-box;
  pointer-events: none;
}

.case-carousel-nav button {
  background: rgba(176, 141, 87, .4);
  color: #fff;
  border: none;
  font-size: 29px;
  padding: 14px;
  border-radius: 41px;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.3s ease, transform 0.3s ease;
  line-height: 1;
}

.case-carousel-nav button:hover {
  background: rgba(212, 175, 55, .9);
  transform: scale(1.1);
}

.case-carousel-nav .dott {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.dott span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 6px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.dott span.active {
  background: #C0A146;
  transform: scale(1.2);
}

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

.casebutton {
  margin: 20px 0;
}

.casebtn {
  text-align: center;
color:#fff;
	font-weight:600;
}

.view-more {
  display: inline-block;
  position: relative;
  color: #fff;
  background-color: var(--accent);
  padding: 1em 3.5em 1em 3em;
  /* 16px 56px 16px 48px */
  transition: all .3s;
  letter-spacing: 0.2em;
  margin-top: 1.25em;
  /* 20px */
  font-size: 1.25em;
  /* 20px */
}

.view-more:after {
  content: "";
  width: 0.625em;
  /* 10px */
  height: 0.625em;
  /* 10px */
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 50%;
  right: 1.25em;
  /* 20px */
}

.view-more:hover {
  background-color: #816c20;
  color: #fff;
}

.view-more:active {
  background-color: #5B4A2B;
  color: #fff;
}

/* ----------------------------------------------------
スマホ用（〜767px）
---------------------------------------------------- */
@media (max-width: 768px) {
  /* セクション全体 */
  .case-slider {
    padding: 40px 0;
      background-position: top;
      background-repeat: no-repeat;
  }

  /* 見出し「症例紹介」のゴールド文字再現 */
  .case-main {
        font-size: 2em;
    font-weight:700;
    background: linear-gradient(to right, #9C7A1D, #F4D677, #A0730B);
    background-clip: text;
    -webkit-background-clip: text;
    border: none; /* マーカー風の下線を消して画像に寄せる */
    padding-bottom: 10px;
    margin-bottom: 20px;
filter: 
      /* 1. 文字の輪郭を白で少し強調（発色を良くする） */
      drop-shadow(0 0 1px rgba(255, 255, 255, 0.9))
      /* 2. 外側に広がる柔らかい白（高級感の演出） */
      drop-shadow(0 0 6px rgba(255, 255, 255, 1))
      /* 3. 最背面に濃い茶色の影（視認性の確保） */
      drop-shadow(2px 2px 4px rgba(80, 50, 0, 0.4));
  }
.case-header{
padding-bottom: 0;
}
  /* 白いカード部分 */
  .case-slide {
    display: block;
    margin: 0 15px 0px;
    padding: 10px 10px 0 10px; /* 余白は内側の要素で取る */
  }

  .case-info {
    padding: 0;
    margin-bottom: 40px;
  }

  /* BEFORE / AFTER 画像部分の配置 */
  .case-before-after {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 15px;
  }

  .beforediv, .afterdiv {
    width: 45%;
    position: relative;
  }

  .case-before-after img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }

  /* Before/Afterのタグ */
  .case-before-after p {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 10px;
    padding: 2px 6px;
    margin: 0;
    width: auto;
    letter-spacing: 0.1em;
    box-shadow: none;
  }

  .arrow-icon {
    font-size: 14px;
    color: #5B4A2B;
  }

  /* 見出し：茶色背景 */
  p.case-heading {
    padding: 5px;
    margin: 0;
    text-align: left;
    font-weight: 400;
    font-size: 0.8em;
  }

  /* 本文：クリーム色背景 */
  .case-text {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    box-shadow: none;
    text-align: justify;
  }
.case-text p{
  margin-bottom: 0;
}
  /* 「詳しくはこちら」ボタン */
  .view-more {
    width: 250px;
    font-size: 16px;
    padding: 12px 0;
  }
.case-carousel-nav{
top:36%
}

  /* スライダーのナビ矢印 */
  .case-carousel-nav button {
    background: rgba(200, 180, 140, 0.6);
    padding: 12px;
    font-size: 20px;
  }
}

/* ------------------------------------------------

*こんな症状で「お悩み」ですか？CSS

　------------------------------------------------ */
.worries-section {
  font-family: "Hiragino Mincho ProN", "MS Mincho", serif;
  color: #333;
  background-color: #fff;
  padding-bottom: 5em;
  margin: 0 auto;
}

/* --- ヘッダー（ベージュ背景部分） --- */
.worries-header {
  background-color: #f3eee2;
  /* 画像のベージュ背景 */
  padding: 6em 1em 2em 4em;
  text-align: center;
  position: relative;
}

.worries-header .mouthpiece-main-title {
  font-size: 3em;
  color: #5B4A2B;
  margin-bottom: 0.8em;
  letter-spacing: 0.1em;
}

.header-desc {
  max-width: 65em;
  margin: 0 auto;
}

.header-desc p {
  font-size: 1.0625em;
  /* 17px */
  line-height: 1.8;
  text-align: left;
  display: inline-block;
  color: #5B4A2B;
}

/* 切り欠き三角形の作成 */
.header-triangle {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #f3eee2;
  /* 背景色と同じ色 */
  margin-bottom: -20px;
  /* 下に突き出させる */
  z-index: 5;
}

/* --- グラデーション文字（お悩み） --- */
.gradation_p {
  background: linear-gradient(45deg, #5A4B21 0%, #C0A146 50%, #5A4B21 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

/* --- カードグリッドエリア --- */
.worries-container {
  max-width: 62.5em;
  /* 1000px */
  margin: 6em auto 0;
  padding: 0 1.25em;
}

.worries-grid {
  display: grid;
	grid-template-columns: repeat(4, 1fr);
  /* 2列 */
  gap: 2em;
  /* カード間の隙間 */
  margin-bottom: 4em;
}

.worries-card {
  background: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: transform 0.3s ease;
}

.worries-card:hover {
  transform: translateY(-5px);
}

.card-image img {
  width: 100%;
  height: auto;
  display: block;
}

.card-text {
	font-size: 1.2em;
  color: #C0A146;
  padding: 1.2em 0.5em;
  margin: 0;
  letter-spacing: 0.1em;
  text-align: center;
  font-weight: 500;
}

/* --- フッターボタン --- */
.worries-footer {
  text-align: center;
}

.gold-btn {
  display: inline-block;
  background-color: #bfa46f;
  color: #fff;
  text-decoration: none;
  padding: 1.2em 3.5em;
  font-size: 1.125em;
  border-radius: 2px;
  position: relative;
  transition: opacity 0.3s ease;
}

.gold-btn:hover {
  opacity: 0.8;
}

.gold-btn span {
  margin-left: 1.5em;
}

@media (max-width: 768px) {
  /* 全体の余白調整 */
  .worries-section {
    padding-bottom: 3em;
  }

  /* ヘッダー部分：パディングを小さくし、文字サイズを調整 */
  .worries-header {
    padding: 3em 1.25em 2em; /* 上の余白を詰め、左右を画像に合わせる */
  }

  .worries-header .mouthpiece-main-title {
    font-size: 1.5em; /* スマホで2行に収まりやすいサイズ */
    line-height: 1.4;
    margin-bottom: 0.5em;
  }

  .header-desc p {
    font-size: 0.875em; /* 14px相当 */
    text-align: left;
    line-height: 1.5;
  }

  /* カードグリッド：画像（image_28cd59.png）に合わせ2列を維持 */
  .worries-container {
    margin-top: 3em;
    padding: 0 1em;
  }

  .worries-grid {
    grid-template-columns: repeat(2, 1fr); /* スマホでも2列を維持 */
    gap: 10px; /* カード間の隙間を狭くする */
    margin-bottom: 2em;
  }

  /* カード内の文字サイズ調整 */
  .card-text {
    font-size: 1em; /* 16px相当。カードが小さいので文字も小さく */
    padding: 0.8em 0.2em;
    letter-spacing: 0;
	  font-weight:600;
  }

  /* 下部ボタンの調整 */
  .worries-section .casebtn .view-more {
	  max-width:300px;
    width: 100%;
    padding: 1em;
    font-size: 0.9em;
    letter-spacing: 0.1em;
  }
}

/* ------------------------------------------------

*築地のナカヤマデンタルオフィスは 患者さんの「理想」を叶えますCSS

　------------------------------------------------ */
/* --- セクション全体 --- */
.ideal-section {
  font-family: "Hiragino Mincho ProN", "MS Mincho", serif;
  color: #333;
  max-width: 90em;
  /* 1440px */
  margin: 0 auto;
  padding: 5em 0;
  background-image: radial-gradient(circle at center,
      #F6F1E3 30%,
      /* 中心の色 */
      #F6F1E3 80px,
      transparent 100%
      /* 外側に向けて透明に溶け込ませる */
    );
}

/* --- ヘッダー --- */
.ideal-header {
  text-align: center;
  margin-bottom: 5em;
}

.ideal-main-title {
  font-size: 2.25em;
  /* 36px */
  color: #5B4A2B;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.ideal-gradation {
  font-size: 1.8em;
  /* 周りより少し大きく */
  background: linear-gradient(45deg, #5A4B21 0%, #C0A146 50%, #5A4B21 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

/* --- ボックス共通レイアウト --- */
.ideal-box {
  display: flex;
  align-items: stretch;
  /* テキスト側と画像側の高さを揃える */
  max-width: 68.75em;
  /* 1100px */
  margin: 0 auto 4em;
  background-color: #fff;
  background-repeat: no-repeat;
  position: relative;
  box-shadow: 0 0.625em 1.875em rgba(0, 0, 0, 0.05);
}

/* 画像を右側に配置する場合（デフォルト） */
.ideal-box:not(.reverse) {
  background-position: center right;
background-size: contain;
}

/* 画像を左側に配置する場合 (.reverse) */
.ideal-box.reverse {
  background-position: center left;
  flex-direction: row-reverse;
	background-size: contain;
}

/* 背景画像（ダミーパス、実際の画像に置き換えてください） */
.box-01 {
  background-image: url(../images/ideal01.png);
}

.box-02 {
  background-image: url(../images/ideal02.png);
}

.box-03 {
  background-image: url(../images/ideal03.png);
}

.box-04 {
  background-image: url(../images/ideal04.png);
}

/* --- テキストエリア（白い箱） --- */
.ideal-text-side {
  flex: 0 0 55%;
  /* 横幅の55% */
  background: rgba(255, 255, 255, 0.95);
  padding: 3.5em 3em 2em 4em;
  margin: 2em;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.ideal-box.box-02.reverse .ideal-text-side {
  flex: 0 0 55%;
}

/* 大きな装飾数字 */
.ideal-number {
  position: absolute;
  top: -0.3em;
  left: 0.3em;
  /* Google Fontsの'Alex Brush'を適用 */
  font-family: 'Alex Brush', cursive;
  font-size: 5em;
  /* フォントを細くする分、少しサイズを大きくして存在感を出す */
  color: #B20014;
  z-index: 1;
  /* font-style: italic; は 'Alex Brush'自体が筆記体なので不要ですが、残していても問題ありません */
  font-weight: normal;
  /* Alex Brushは通常ウェイトのみ提供のため normal に */
  letter-spacing: 0.05em;
  pointer-events: none;
}

.ideal-text-side h3 {
  font-size: 2em;
  color: #5B4A2B;
  margin-bottom: 0.5em;
  font-weight: 600;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 10;
}

.ideal-gold-text {
  color: #C0A146;
  font-weight: 600;
}

.ideal-desc p {
  font-size: 1em;
  /* 14px */
  margin-bottom: 1em;
  text-align: justify;
  color: #5B4A2B;
  padding-bottom: 1em;
  border-bottom: 1px solid #ada9a2;
}

/* --- リスト装飾（四角いゴールドマーカー） --- */
.ideal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2em 0;
}

.ideal-list li {
  position: relative;
  padding-left: 1.2em;
  font-size: 0.9375em;
  /* 15px */
  color: #5B4A2B;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.ideal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 0.6em;
  height: 0.6em;
  background-color: #C0A146;
  /* ゴールドの四角 */
}

.ideal-list-gold {
  color: #C0A146;
}

/* 一部テキストをゴールドにする用 */
.ideal-list li .ideal-gold-text {
  color: #C0A146;
}

/* --- ボタン装飾 --- */
.ideal-btn {
  display: inline-block;
  background: linear-gradient(90deg, #C0A146 30%, #8A7433 100%);
  color: #fff;
  text-decoration: none;
  padding: 0.8em 2em;
  font-size: 1em;
  /* 14px */
  font-weight: 600;
  letter-spacing: 0.1em;
  align-self: flex-start;
  /* 左寄せ（Flexbox内） */
  transition: opacity 0.3s ease;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}

.ideal-btn:hover {
  opacity: 0.6;
	color:#fff;
}
.ideal-sp-img {
  display: none;
}

@media (max-width: 768px) {
  .ideal-section {
    padding: 3em 1em;
  background-image: radial-gradient(circle at center,
      #F6F1E3 90%,
      #F6F1E3 100px,
      transparent 100%
    );  }

  .ideal-main-title {
    font-size: 1.2em;
    line-height: 1.6;
	  font-weight:600;
  }
  .ideal-gradation {
    font-size: 1.6em;
  }
.ideal-header{
margin-bottom: 2.5em;
}
  /* PC版の背景画像を完全に消す */
  .ideal-box, 
  .ideal-box.reverse {
    flex-direction: column;
    background-image: none !important;
    box-shadow: none;
    margin-bottom: 4em;
  }

  /* 白い箱の調整 */
  .ideal-text-side,
  .ideal-box.box-02.reverse .ideal-text-side {
    width: 100%;
    margin: 0;
    padding: 2em 1.5em 2em;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* カードに影をつける */
    border-radius: 4px;
  }

  /* 見出しの下に画像を表示させる設定 */
  .ideal-sp-img {
    display: block;
    width: calc(100% + 3em); /* 親のpadding分を外に出す */
    margin: 0 -1.5em 1.5em; /* 左右マイナスマージンでカードいっぱいに広げる */
  }

  .ideal-sp-img img {
    width: 90%;
    margin: 0 auto;
    height: auto;
    display: block;
  }

  /* 見出しのスタイル調整 */
  .ideal-text-side h3 {
    font-size: 1.3em;
    text-align: left;
    margin-bottom: 0.8em;
    line-height: 1.4;
  }

  /* 赤い数字の配置 */
  .ideal-number {
    font-size: 4.5em;
    top: -0.6em;
    left: 0.1em;
  }

  /* 文章の調整 */
  .ideal-desc p {
    font-size: 0.95em;
    line-height: 1.5;
    border-bottom: none;
    margin-bottom: 1.5em;
  }

  /* リストとボタンの調整 */
  .ideal-list {
    border-top: 1px solid #E0DBCF;
    padding-top: 1.5em;
    margin-bottom: 2em;
  }
.ideal-list li{
  font-size: 0.9em;
}
  .ideal-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 1em;
    font-size: 0.9em;
    background: linear-gradient(90deg, #C0A146 0%, #8A7433 100%);
    box-shadow: 0 4px 10px rgba(138, 116, 51, 0.3);
  }
}
/* ------------------------------------------------

*当院の特徴CSS

　------------------------------------------------ */
.feature-section {
  font-family: "Hiragino Mincho ProN", "MS Mincho", serif;
  color: #333;
  max-width: 90em;
  /* 1440px */
  margin: 0 auto;
  padding: 5em 0 0 0;
  background-image: url("../images/feature_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}

/* --- ヘッダー --- */
.feature-header {
  text-align: center;
  margin-bottom: 4em;
}

.feature-main-title {
  font-size: 3em;
  /* 40px */
  color: #5B4A2B;
  display: inline-block;
  padding: 0 1em 0.2em;
  letter-spacing: 0.1em;
  font-weight: 500;
}

/* --- 各行のレイアウト --- */
.feature-row {
  position: relative;
  max-width: 90em;
  /* 1200px */
  margin: 0 auto;
  background-color: #F4EDD7;
  /* デフォルトのベージュ */
  overflow: hidden;
}

/* 2個目と4個目の背景色指定 (#C0A146 の 5% = rgba(192, 161, 70, 0.05)) */
.bg-gold-light {
  background-color: rgba(192, 161, 70, 0.05) !important;
}

/* 背景の透かし英単語 */
.feature-bg-text {
  position: absolute;
  top: 0.3em;
  left: 0.8em;
  font-size: 3.5em;
  font-family: serif;
  color: #5B4A2B;
  opacity: 0.08;
  /* 透かしなので非常に薄く設定 */
  z-index: 1;
  pointer-events: none;
  letter-spacing: 0.1em;
  font-weight: 700;
  line-height: 1em;
}

.feature-content {
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 2;
  height: 100%;
}

/* テキストエリア */
.feature-text {
  flex: 0 0 65%;
  /* テキストが重なるように広めに確保 */
  padding: 4em 7em 4em 5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 3;
}

.feature-text h3 {
  font-size: 2.0em;
  font-weight: 600;
  color: #5B4A2B;
  margin-bottom: 1.2em;
  border-bottom: 1px solid #C0A146;
  padding-bottom: 0.3em;
  display: inline-block;
  letter-spacing: 0.08em;
}

.feature-text p {
  font-size: 1em;
  margin-bottom: 1.5em;
  text-align: justify;
  color: #5B4A2B;
}

/* 画像エリア（背景画像として表示） */
.feature-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  /* テキストと少し重なる幅 */
  height: 100%;
  background-size: cover;
  background-position: right;
  z-index: 2;
  /* 画像の左側を背景色と馴染ませるグラデーションマスク */
  mask-image: linear-gradient(to left, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, black 70%, transparent 100%);
}
.feature01-img{
background-image: url(../images/feature01.png);
}

.feature02-img{
background-image: url(../images/feature02.png);
}

.feature03-img{
background-image: url(../images/feature03.png);
}

.feature04-img{
background-image: url(../images/feature04.png);
}

.feature05-img{
background-image: url(../images/feature05.png);
}
/* --- 装飾カラー --- */
.highlight-red {
  color: #B20014;
  font-weight: 600;
}

.highlight-gold {
  color: #977000;
  font-weight: 700;
  /* border-bottom: 1px solid #A88B4C; */
  background: linear-gradient(transparent 70%, rgba(200, 170, 0, 0.3) 70%);
  padding-bottom: 1px;
}
/* --- PC版ではスマホ画像を隠す --- */
.feature-sp-image {
  display: none;
}

/* --- レスポンシブ対応（スマホ時） --- */
@media (max-width: 768px) {
  .feature-section {
    padding: 3em 0 1em 0;
    background-position: top;
    background-size: 100%;
    background-repeat: no-repeat;
  }

.feature-header{
  margin-bottom: 0em;
}
  /* ヘッダーのサイズ調整 */
  .feature-main-title {
    font-size: 1.8em;
    margin-bottom: 1.2em;
	  font-weight:600;
  }


  /* PC用背景透かし文字を調整 */
  .feature-bg-text {
    font-size: 2em;
    top: 0.5em;
    left: 0.1em;
    font-weight: 700;
  }

  .feature-content {
    display: block; /* Flexを解除 */
  }

  /* テキストエリアをカード状にする */
  .feature-text {
    padding: 2em 1.25em; /* 左右余白を画像に合わせる */
    width: 100% !important;
    display: block;
  }


  /* 見出しのスタイル */
  .feature-text h3 {
    font-size: 1.3em;
    width: 100%;
    margin-bottom: 1em;
    border-bottom: 1px solid #C0A146;
    padding-bottom: 0.5em;
    line-height: 1.4;
    letter-spacing: 0.05em;
  }
	.feature-text .feature-h3-narrow{
		letter-spacing: 0em;
	}
  /* スマホ専用画像を表示させる */
  .feature-sp-image {
    display: block;
    width: 100%;
    margin-bottom: 1.5em;
  }

  .feature-sp-image img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* PC用画像を消す */
  .feature-image {
    display: none;
  }

  /* 説明文の調整 */
  .feature-text p {
    font-size: 0.9em;
    line-height: 1.5;
    margin-bottom: 1em;
  }
}
/* ------------------------------------------------

*院長挨拶CSS

　------------------------------------------------ */
.doctor-section {
  font-family: "Hiragino Mincho ProN", "MS Mincho", serif;
  color: #5B4A2B;
  padding: 10em 0 15em 0;
  /* 背景画像をセクション全体に配置 */
  background-image: url("../images/doctor_bg.png");
  background-repeat: no-repeat;
  background-position: center;
}

.doctor-container {
  max-width: 75em;
  /* 1200px */
  margin: 0 auto;
  padding: 3em 2em 0 2em;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* --- メインタイトル --- */
.doctor-main-header {
  text-align: center;
  margin-bottom: 3em;
}

.doctor-title {
  font-size: 3em;
  color: #5B4A2B;
  padding: 0 1em 0.2em;
  letter-spacing: 0.1em;
  font-weight: 500;
  background: linear-gradient(transparent 70%, rgba(192, 161, 70, 0.8) 70%);
  display: inline-block;
  padding: 0 0.1em;
}

/* --- 白いカードエリア --- */
.doctor-content-wrapper {
  /* background-color: rgba(255, 255, 255, 0.8); */
  padding: 1em 4em 5em 4em;

}

/* 上部プロフィールレイアウト */
.doctor-profile-top {
  display: flex;
  gap: 4em;
  margin-bottom: 4em;
}

.doctor-photo {
  flex: 0 0 35%;
}

.doctor-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* 名前・メッセージエリア */
.doctor-body {
  flex: 1;
}

.clinic-name {
  font-size: 1em;
  color: #C0A146;
  margin-bottom: 0.5em;
  letter-spacing: 0.1em;
}

.doctor-name-area {
  display: flex;
  align-items: baseline;
  gap: 1.5em;
  margin-bottom: 2em;
  border-bottom: 1px solid #C0A146;
  padding-bottom: 0.5em;
}

.doctor-name {
  font-size: 2em;
  font-weight: 500;
  margin: 0;
  color: #5B4A2B
}

.doctor-en-name {
  font-size: 1.25em;
  color: #999;
  font-family: serif;
}

.doctor-message p {
  font-size: 0.9375em;
  margin-bottom: 1.5em;
  text-align: justify;
}

/* --- 下部：略歴・資格の2カラムボックス --- */
.doctor-history-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
}

.history-box {
  background-color: #fff;
  border: 1px solid #F0F0F0;
  padding: 2.5em;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.history-box h4 {
  font-size: 1.1em;
  margin-bottom: 1.2em;
  color: #5B4A2B;
}

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

.history-list li {
  font-size: 0.8125em;
  /* 13px */
  line-height: 1.8;
  padding-left: 0.5em;
}
@media (max-width: 768px) {
  /* セクション全体の背景と余白調整 */
  .doctor-section {
    padding: 4em 1em 5em 1em; /* セクション外側の余白を詰め、上下を調整 */
    background-size: cover;
    background-position: top center;
  }
.doctor-content-wrapper{
  padding: 1em;
}
  /* 白い透過コンテナの調整 */
  .doctor-container {
    padding: 2em 1em 1em 1em; /* 左右の余白を縮小 */
    background-color: rgba(255, 255, 255, 0.85); /* スマホで見やすいよう不透明度を上げる */
    width: 100%;
  }

  /* メイン見出し（院長あいさつ） */
  .doctor-main-header {
    margin-bottom: 2em;
  }
  .doctor-title {
    font-size: 1.8em;
	  font-weight:600;
  }

  /* プロフィール部分を縦並びに */
  .doctor-profile-top {
    flex-direction: column;
    gap: 1.5em; /* 写真と名前の間の距離 */
    margin-bottom: 1em;
  }

  /* 医師の写真を中央・適切サイズに */
  .doctor-photo {
    width: 100%;
    flex: none;
  }
  .doctor-photo img {
    width: 100%;
    max-width: 100%; /* 横幅いっぱいに */
  }

  /* 名前・メッセージエリア */
  .doctor-body {
    width: 100%;
  }

  .clinic-name {
    font-size: 0.875em;
    margin-bottom: 0.2em;
  }

  .doctor-name-area {
    flex-wrap: wrap; /* 名前が長い場合の回り込み対応 */
    gap: 0.8em;
    margin-bottom: 1.5em;
    padding-bottom: 0.8em;
    border-bottom: 1px solid #C0A146;
  }

  .doctor-name {
    font-size: 1.6em;
  }

  .doctor-en-name {
    font-size: 1em;
  }

  /* メッセージ文章 */
  .doctor-message p {
    font-size: 0.9em;
    line-height: 1.5;
    margin-bottom: 1.5em;
    text-align: left; /* スマホでは左寄せが読みやすい */
  }

  .highlight-gold {
    font-weight: 700;
  }

  /* --- 略歴・資格を縦並びに --- */
  .doctor-history-grid {
    grid-template-columns: 1fr; /* 2列から1列へ */
    gap: 1.5em;
  }

  .history-box {
    padding: 1em;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }

  .history-box h4 {
    font-size: 1em;
    margin-bottom: 1em;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 0.5em;
  }

  .history-list li {
    font-size: 0.85em; /* 13.6px程度 */
    padding-left: 0;
  }
}
/* ------------------------------------------------

*お支払い方法CSS

　------------------------------------------------ */
.paymentsec {
  box-sizing: border-box;
  margin: 2em 0;
  padding: 2em 0 10em 0;
  background-image: url(../images/Payment_bg.png);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  margin-bottom: 80px;
}

.pay-ttlbloc {
  text-align: center;
  margin-bottom: 3em;
}

.payttl {
  font-size: 48px;
  color: #5B4A2B;
  letter-spacing: 0.1em;
  position: relative;
  text-align: center;
  line-height: 1.5em;
  display: inline;
  font-weight: 500;
}

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

.payttl-subtitle {
  font-size: 24px;
  color: #C0A146;
  font-weight: normal;
  text-align: center;
  letter-spacing: 0.1em;
  margin-bottom: 1em;
}

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

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

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

.paymark span {
  background: linear-gradient(transparent 60%, rgba(192, 161, 70, 0.3) 60%);
  padding-bottom: 5px;
  font-weight: 600;
  font-size: 24px;
  color:#333333;
}

.marker {
  margin-bottom: 16px;
  line-height: 1.6;
  position: relative;
  font-size: 24px;
  padding-left: 30px;
  letter-spacing: 0.3em;
}

.marker::before {
  content: "✓";
  font-weight: 800;
  position: absolute;
  left: 0;
  top: 2px;
  color: #D4AF37;
  font-size: 24px;
}

.payp {
  padding: 20px 0 0 100px;
  line-height: 1.8;
  font-size: 16px;
  color: #2F353A;
  letter-spacing: 0.2em;
}

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

.payimg img {
  max-width: 80%;
  height: auto;
  border-radius: 8px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {

  .paymentsec {
    margin-top: 1em;
    margin-bottom: 0px;
    padding: 60px 0 20px 0;
    background-size: cover;
    background-position: center top;
  }

  .pay-ttlbloc {
    margin-bottom: 24px;
  }

  .payttl-subtitle {
    font-size: 14px;
    letter-spacing: 0.12em;
  }

  .payttl {
    font-size: 1.4em;
    line-height: 1.2;
    letter-spacing: 0.06em;
    font-weight: 600;
  }
   .payttl .gradation_p{
    font-size: 1.5em;
   }

  .payttl .mini {
    font-size: 18px;
    letter-spacing: 0.18em;
  }

  /* 白いボックスを縦並びに */
  .payout {
    max-width: 100%;
    padding: 24px 16px 32px;
    box-sizing: border-box;
    display: block;
    margin-bottom: 40px;
    /* PCではflexにしていてもSPでは縦並びに */
  }

  .paytxtbox {
    padding: 0;
  }

  .payimg {
    padding: 16px 0 0;
    text-align: center;
  }

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

  /* チェック付きの2行 */
  .paymark {
    margin-bottom: 24px;
  }

  .marker {
    font-size: 18px;
    padding-left: 26px;
    letter-spacing: 0.15em;
    margin-bottom: 5px;
    line-height: 1.6;
  }

  .paymark span {
    font-weight: 700;
    font-size: 16px;
    padding-bottom: 3px;
  }

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

  /* 説明文部分 */
  .payp {
    padding: 16px 0 0;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 0.1em;
  }

  .payptxt2 {
    padding-top: 20px;
    text-align:left;
  }
}

/* ------------------------------------------------

*マウスピース矯正の費用CSS

　------------------------------------------------ */
.mouthpiece-cost {
  font-family: "Hiragino Mincho ProN", "MS Mincho", serif;
  padding: 0 0 6em;
  background-image: url("../images/mouthpiece-cost_bg.png");
  background-size: cover;
  background-position: center;
  color: #5B4A2B;
}

.mouthpiece-cost .mouthpiece-main-title {
  font-size: 2.8em;
  line-height: 1.5em;
  margin-bottom: 2rem;
}

.mouthpiece-cost .gradation_p {
  color: #A88B4C;
  font-size: 4rem;
}

.mouthpiece-cost .mini {
  font-size: 2.2rem;
}

.header-desc {
  font-size: 1em;
  line-height: 1.8;
  max-width: 60em;
  margin: 0 auto;
}

/* --- コンテンツエリア --- */
.cost-container {
  max-width: 75em;
  margin: 0 auto;
  padding: 0 2em;
}

/* メインカード */
.cost-main-card {
  background: #fff;
  padding: 2em 4em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  margin-bottom: 2em;
  border: 1px solid #B4B4B4;
}

/* ① 修正：タイトルを中央に配置するためのラッパー */
.card-title-wrapper {
  text-align: center;
  width: 100%;
  margin-bottom: 3em;
}

.card-title {
  font-size: 2em;
  background: linear-gradient(transparent 70%, rgba(192, 161, 70, 0.5) 70%);
  display: inline-block;
  font-weight: 600;
}

.card-title span {
  color: #B20014;
}

.cost-card-content {
  display: flex;
  gap: 3em;
  align-items: flex-start;
}

.cost-text-side {
  flex: 1;
}

.cost-image-side {
  flex: 0 0 45%;
}

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

.price-label {
  background-color: #7D6B4E;
  color: #fff;
  padding: 0.5em 1.5em;
  font-size: 1.1em;
  display: inline-block;
  margin-bottom: 1em;
  font-weight: 500;
}

.price-label-right {
  padding-right: 5em;
}

.total-price {
  font-size: 1.25em;
  margin-bottom: 0.2em;
  font-weight: 500;
}

.monthly-price {
  font-size: 1.5em;
  color: #B20014;
  font-weight: bold;
  margin-bottom: 2em;
}

.monthly-price span {
  font-size: 2em;
}

/* --- 下部2カラムエリア --- */
.cost-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  margin-bottom: 4em;
}

.sub-card {
  background: #fff;
  padding: 3em;
  display: flex;
  gap: 1.5em;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #B4B4B4;
  position: relative;
  /* 子要素の絶対配置用 */
  overflow: hidden;
}

.sub-card-text {
  flex: 1;
  position: relative;
  z-index: 2;
}

.sub-card-text h3 {
  font-size: 1.6em;
  margin-bottom: 1em;
  display: inline-block;
  font-weight: 600;
  background: linear-gradient(transparent 70%, rgba(192, 161, 70, 0.5) 70%);
}

.sub-card-text h3 span {
  color: #B20014;
}

.sub-card-text p {
  font-size: 0.875em;
  line-height: 1.8;
  text-align: justify;
  font-weight: 500;
}

/* ② 修正：画像エリアとぼかしエフェクト */
.sub-card-img {
  flex: 0 0 35%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sub-card-img img {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
}

/* 添付画像の光のようなぼかしを再現 */
.blur-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(192, 161, 70, 0.3) 0%, transparent 70%);
  filter: blur(50px);
  z-index: -1;
}
@media screen and (max-width: 767px) {
    /* --- セクション全体 --- */
    .mouthpiece-cost {
        padding: 5.125em 0.8em 4em; /* 余白を縮小 */
        background-image: url("../images/mouthpiece-cost_bg_sp.png");
        background-position: top ;
    background-size: 100%;
    background-repeat: no-repeat;
    margin-top: -1em;
    }

    /* --- ヘッダー（タイトル・説明文） --- */
    .mouthpiece-cost .mouthpiece-main-title {
        font-size: 1.4rem; /* 読みやすい大きさに */
        line-height: 1.4;
        margin-bottom: 1.5rem;
    }

    .mouthpiece-cost .gradation_p {
        font-size: 2rem; /* 4remから縮小 */
    }

    .mouthpiece-cost .mini {
        font-size: 1.2rem; /* 2.2remから縮小 */
    }

    .header-desc {
        text-align: left; /* SPでは左寄せが見やすい */
        font-size: 0.9rem;
        line-height: 1.6;
        padding: 0;
    }

    /* --- コンテンツエリア共通 --- */
    .cost-container {
        padding: 0; /* 親のpaddingがあるため不要 */
    }

    /* --- デンタルローンカード（メイン） --- */
    .cost-main-card {
        padding: 2em 1em; /* 内側の余白を縮小 */
        margin-top: 0;
    }

    .card-title-wrapper {
        margin-bottom: 2em; /* 3emから縮小 */
    }

    .card-title {
        font-size: 1.4rem; /* 2emから縮小 */
    }

    /* フレックスを解除して縦並び（要素を上から下へ）に変更 */
    .cost-card-content {
        display: block; /* フレックス解除 */
    }

    /* テキスト側 */
    .cost-text-side {
        width: 100%;
        margin-bottom: 2em; /* 画像との間に余白 */
    }

    /* 画像側：テキストの下に配置 */
    .cost-image-side {
        width: 70%; /* 画面幅に合わせて少し小さく */
        margin: 0 auto; /* 中央寄せ */
    }

    /* 料金ブロック */
    .price-label {
        font-size: 0.9rem; /* 1.1emから縮小 */
        padding: 0.4em 1em;
    }

    .price-label-right {
        padding-right: 1em; /* PC版の大きなpaddingを解除 */
    }

    .total-price {
        font-size: 1.1rem; /* 1.25emから縮小 */
    }

    .monthly-price {
        font-size: 1.2rem; /* 1.5emから縮小 */
        margin-bottom: 1.5em; /* ブロック間の余白 */
    }

    .monthly-price span {
        font-size: 2rem; /* 2emから少し縮小 */
    }

    /* --- 下部2枚のカード --- */
    /* グリッドを解除して1列（縦並び）に */
    .cost-bottom-grid {
        display: block; /* グリッド解除 */
        margin-top: 2em;
        margin-bottom: 3em;
    }

    /* 各サブカード：SPでは中央寄せで見やすく */
    .sub-card {
        display: block; /* フレックス解除 */
        padding: 2em 1em; /* 内側余白縮小 */
        text-align: center; /* 中央寄せ */
        margin-bottom: 1.5em; /* カード間の余白 */
    }

    /* 2つ目のカード（最後のカード）の下マージンを調整 */
    .cost-bottom-grid .sub-card:last-child {
        margin-bottom: 0;
    }

    /* テキスト側 */
    .sub-card-text {
        margin-bottom: 1em; /* 画像との間に余白 */
    }

    .sub-card-text h3 {
        font-size: 1.3rem; /* 1.6emから縮小 */
        margin-bottom: 0.8em;
    }

    .sub-card-text p {
        font-size: 0.85rem; /* 0.875emから縮小 */
        text-align: left; /* 説明文は左寄せ */
        line-height: 1.6;
    }

    /* 画像側：テキストの下に配置 */
    .sub-card-img {
        width: 50%; /* 画面幅に合わせて小さく */
        margin: 0 auto; /* 中央寄せ */
        display: block; /* レイアウトを確実にするため */
    }

    /* --- 「詳しくはこちら」ボタン --- */
    .casebtn .view-more {
        width: 100%; /* 横幅いっぱい */
        max-width: 280px; /* 大きくなりすぎないようにストッパー */
        font-size: 1.1rem; /* 少し大きくタップしやすく */
        padding: 1em 2em;
        letter-spacing: 0.2em; /* 文字間隔を調整 */
    }
}



/* ------------------------------------------------

*無料相談受付中CSS

　------------------------------------------------ */
.consultation {
  background-color: rgba(192, 161, 70, 0.17);
  /* 全体の淡いベージュ背景 */
  padding: 100px 0;
  font-family: "Hiragino Mincho ProN", "MS Mincho", serif;
  color: #5B4A2B;
}

.consult-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- 白いカード本体 --- */
.consult-card {
  max-width: 1440px;
  position: relative;
  padding: 80px 30px 50px;
  overflow: visible;
  /* タイトルをはみ出させるため */
}

/* --- タイトル装飾 --- */
.title-decor {
  position: absolute;
  top: -34px;
  left: 62px;
  width: 129px;
  height: 146px;
  background-color: rgba(213, 100, 0, 0.4);
  /* 背後のオレンジ・茶系ボックス */
  z-index: 1;
}

.ja-title {
  position: absolute;
  top: -15px;
  left: 20px;
  background-color: rgba(195, 164, 75, 0.4);
  /* ベージュのタイトル背景 */
  padding: 20px 113px 20px 90px;
  font-size: 3rem;
  letter-spacing: 0.1em;
  z-index: 2;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
  text-shadow: 2px 3px 3px rgba(255, 239, 194, 0.73);
  font-weight: 600;
}

/* --- レイアウト構造 --- */
.consult-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3rem;
  padding-left: 5rem;
}

.consult-text-side {
  flex: 0 0 47%;
  position: relative;
  z-index: 5;
}

.consult-text-side .casebtn {
  text-align: left;
}

.consult-text-side .casebtn .view-more {
  letter-spacing: 0.18em;
  padding: 1em 2.5em 1em 2.0em;
}

/* 英語タイトルと下線 */
.en-title {
  font-size: 34px;
  font-weight: 500;
  margin-bottom: 35px;
  display: block;
  position: relative;
  padding-bottom: 10px;
  letter-spacing: 0.2rem;
}

.en-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #5B4A2B;
}

/* --- リスト・テキスト詳細 --- */
.lead-text {
  font-size: 16px;
  margin-bottom: 25px;
}

.check-list {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

.check-list li {
  font-size: 18px;
  margin-bottom: 8px;
  padding-left: 1.2em;
  position: relative;
}

.check-list li::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* 強調の赤文字 */
.check-list li span {
  color: #B20014;
  font-weight: 600;
}

.description {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 40px;
}

/* --- 画像エリア（右側、背景風） --- */
.consult-image-side {
  position: absolute; /* 絶対配置を再適用 */
  right: 0;
  top: 0;
  width: 64%;
  height: 100%; /* 高さいっぱいに広げる */
  overflow: hidden; /* はみ出しをカット */
  z-index: 1; /* テキストより背面、装飾と同じ階層 */
}

.consult-image-side img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* エリア全体をカバー */
}

@media screen and (max-width: 767px) {
  .consult-container {
    padding: 0;
  }

  .consultation {
    padding: 60px 0 40px 0;
  }

  .consult-card {
    padding: 60px 20px 40px;
    background: transparent;
  }

  .title-decor {
    width: 60px;
    height: 80px;
    top: -20px;
    left: 30px;
  }

  .ja-title {
    font-size: 1.8rem;
    padding: 10px 30px;
    top: -10px;
    left: 20px;
    white-space: nowrap;
    width: auto;
    font-weight: 600;
  }

  .consult-inner {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-top: 1rem;
  }

  .consult-image-side {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 25px;
    order: 1;
    z-index: auto; /* z-indexをリセット */
  }

  .consult-image-side img {
    opacity: 1; /* スマホでは透明度を戻す */
  }

  .consult-text-side {
    width: 100%;
    order: 2;
  }

  .en-title {
    font-size: 24px;
    margin-bottom: 20px;
    letter-spacing: 0.1rem;
  }

  .lead-text {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 20px;
  }

  .check-list li {
    font-size: 1rem;
    margin-bottom: 5px;
  }

  .description {
    font-size: 0.95rem;
    margin-bottom: 30px;
    text-align: left;
  }

  .consult-text-side .casebtn {
    text-align: center;
  }

  .consult-text-side .casebtn .view-more {
    width: 100%;
    display: inline-block;
    padding: 1.2em 0.5em;
    font-size: 0.9rem;
    box-sizing: border-box;
  }
}
/* ------------------------------------------------

*診療一覧CSS

　------------------------------------------------ */
.medical-menu {
  margin-top: 100px;
  margin-bottom: 200px;
}

.medical-heading {
  text-align: center;
  line-height: 3.5em;
  margin-bottom: 70px;
}

.medical-subtitle {
  font-size: 24px;
  color: #C0A146;
  font-weight: normal;
  text-align: center;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  display: block;
}

.medical-title {
  font-size: 48px;
  font-weight: 500;
  color: #5B4A2B;
  margin-bottom: 10px;
  text-align: center;
  padding-left: 10px;
  letter-spacing: 0.1em;
  background: linear-gradient(transparent 70%, rgba(192, 161, 70, 0.8) 70%);
}

.clinic-menu-waper {
  max-width: 1200px;
  aspect-ratio: 1260 / 690;
  margin: 0 auto;
  position: relative;
}

.clinic-menu-waper::before {
  content: '';
  position: absolute;
  width: 670px;
  height: 730px;
  top: -21px;
  right: -38px;
  background-color: rgba(192, 161, 70, 0.2);
  mix-blend-mode: multiply;
  z-index: -1;
}

.clinic-menu-waper::after {
  content: '';
  position: absolute;
  width: 669px;
  height: 780px;
  top: -53px;
  bottom: 0;
  left: -38px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(..//images/shinryouitiran_ashirai.png);
  z-index: -1;
}


.clinic-menu-inner {
  height: 100%;
  z-index: 5;
  padding: 50px 0 0 550px;
  background-image: url(../images/shinryouitiran.png);
  background-size: auto 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  /* background-color: #fff; */
}

.clinic-menu_list {
  font-family: 'Noto Serif JP', serif;
  flex: 1 1 45%;
  min-width: 300px;
  height: auto;
  background-color: rgba(255, 255, 255, .9);
  padding: 20px 36px 30px 45px;
  align-content: center;
}


.clinic-menu_title {
  font-size: 38px;
  color: #5B4A2B;
  font-weight: 500;
  margin-bottom: 30px;
  font-family: 'Georgia', serif;
}

.clinic-menu_list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 40px;
  font-family: 'Noto Serif JP', serif;
}

.clinic-menu_list li {
  border-bottom: 1px solid #ccc;
  margin-bottom: 12px;
  padding-bottom: 8px;
}

.clinic-menu_list a {
  text-decoration: none;
  color: #5B4A2B;
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}

.clinic-menu_list a:hover {
  color: #B9A98B;
}

.clinic-menu_list a::after {
  content: '»';
  color: #999;
  font-size: 14px;
}

/* ----------------------------------------------------
スマホ用（〜767px）
---------------------------------------------------- */
@media screen and (max-width: 767px) {
  .medical-menu {
    margin-top: 60px;
    margin-bottom: 80px;
  }

  .medical-heading {
    margin-bottom: 20px;
    line-height: 2.5em;
  }

  .medical-subtitle {
    font-size: 14px;
    margin-bottom: 0;
  }

  .medical-title {
    font-size: 1.8rem;
    padding-left: 0;
	  font-weight:600;
  }

  /* 背景画像と重なりのベース */
  .clinic-menu-waper {
    width: 100%;
    aspect-ratio: auto;
    padding: 0 15px 40px 15px; /* 下部に余白を持たせる */
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    background-image: none; /* ここでは背景を指定せず、擬似要素で制御 */
  }

  /* 人物・メイン画像を配置（背景よりも前面、リストよりも背後） */
  .clinic-menu-waper::before {
    display: block; /* display: noneを解除 */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 320px; /* 画像の表示高さを指定 */
    background-image: url(../images/shinryouitiran.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    right: auto; /* PC設定をリセット */
  }

  /* あしらい（チェック柄やテクスチャ）を最背面に配置 */
  .clinic-menu-waper::after {
    display: block; /* display: noneを解除 */
    content: '';
    position: absolute;
    top: 300px; /* 画像と少し重なる位置から開始 */
    left: 0;
    width: 100%;
    height: calc(100% - 150px);
    background-image: url(../images/shinryouitiran_ashirai.png);
    background-size: auto 90%;
    background-position: top;
    background-repeat: no-repeat;
    z-index: 0;
    mix-blend-mode: normal; /* PC設定をリセット */
  }

  .clinic-menu-inner {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    position: relative;
    z-index: 2; /* 画像の上にリストを出す */
  }

  /* 白いメニューボックス */
  .clinic-menu_list {
    margin-top: 240px; /* 人物画像と重なるように調整（適宜調整してください） */
    padding: 30px 20px;
    background-color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    width: 92%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    min-width: auto;
  }

  .clinic-menu_title {
    font-size: 24px;
    margin-bottom: 25px;
    text-align: left;
  }

  .clinic-menu_list ul {
    columns: 1; /* SPは1列 */
  }

  .clinic-menu_list li {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  .clinic-menu_list a {
    font-size: 15px;
    color: #5B4A2B;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .clinic-menu_list a::after {
    font-size: 0.9em;
  }
}

/* ------------------------------------------------

*当院のマウスピース矯正治療の流れCSS

　------------------------------------------------ */
.mouthpiece-flow {
  padding: 100px 0;
  font-family: "Hiragino Mincho ProN", "MS Mincho", serif;
  color: #5B4A2B;
}

.flow-inner {
  max-width: 1000px;
  background-color: #FFFBEF;
  /* 背景の薄いベージュ */
  margin: 0 auto;
  padding: 50px 40px;
}

/* --- タイトル部分 --- */
.flow-header {
  position: relative;
  text-align: center;
  margin-bottom: 80px;
}

.flow-bg-text {
  position: absolute;
  top: -108px;
  left: 28%;
  transform: translateX(-110%);
  font-size: 120px;
  color: rgba(91, 74, 43, 0.05);
  /* 背後の薄い flow 文字 */
  z-index: 1;
  letter-spacing: 0.2rem;
}

.flow-title {
  position: relative;
  z-index: 2;
  font-size: 3rem;
  letter-spacing: 0.1em;
  font-weight: normal;
  display: inline-block;
}

.flow-title-gold {
  color: #C0A146;
  font-weight: 500;
}

/* --- フローリストのレイアウト --- */
.flow-list {
  position: relative;
}

.flow-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 60px;
  position: relative;
}

.flow-item:last-child {
  margin-bottom: 0;
}

/* 番号カラムと垂直線 */
.flow-num-col {
  flex: 0 0 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.flow-circle {
  width: 44px;
  height: 44px;
  border: 1px solid #5B4A2B;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background-color: #fff;
  z-index: 2;
}

/* 垂直線 */
.flow-item:not(:last-child) .flow-num-col::after {
  content: "";
  position: absolute;
  top: 44px;
  left: 50%;
  width: 1px;
  height: calc(100% + 139px);
  background-color: #5B4A2B;
  z-index: 1;
}

/* テキストカラム */
.flow-text-col {
  flex: 1;
  padding: 0 40px;
}

.flow-text-col h3 {
  font-size: 1.8em;
  color: #C0A146;
  /* タイトル色 */
  margin-bottom: 15px;
  font-weight: 500;
}

.flow-text-col p {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

/* 画像カラム（正方形） */
.flow-img-col {
  flex: 0 0 160px;
}

.flow-img-col img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  display: block;
}

/* --- レスポンシブ (スマホ) --- */
@media (max-width: 768px) {
  .mouthpiece-flow {
    padding: 60px 0;
  }

  .flow-header {
    margin-bottom: 40px;
    
  }

  /* 背後の大きな "flow" 文字の調整 */
  .flow-bg-text {
    font-size: 60px;
    top: -40px;
    left: 25%;
    transform: translateX(-50%);
    width: 100%;
    font-weight: 600;
  }

  .flow-title {
    font-size: 1.4rem;
    line-height: 1.4;
    padding: 0 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    
  }

.flow-title-gold{
  font-weight: 600;
}
  /* 外枠のベージュ背景の調整 */
  .flow-inner {
    padding: 40px 20px 40px 10px;
    margin: 0 15px;
  }

  /* 各ステップのレイアウト */
  .flow-item {
    display: block; /* 縦並びのブロックレイアウトへ変更 */
    margin-bottom: 50px;
    position: relative;
    text-align: left; /* 左寄せに戻す */
  }

  /* 番号とタイトルの横並びエリア */
  .flow-num-col {
    flex-direction: row; /* 横並び */
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
  }

  .flow-circle {
    width: 36px;
    height: 36px;
    font-size: 18px;
    margin-right: 15px; /* 番号とタイトルの間の余白 */
    flex-shrink: 0;
  }

  /* 垂直線の再調整（番号の直下から次の番号まで） */
  .flow-item:not(:last-child) .flow-num-col::after {
    display: block;
    top: 36px; /* 円の高さ分下げる */
    left: 18px; /* 円の半分（中央）に配置 */
    height: calc(100% + 500px); /* 次のアイテムまでの距離 */
    width: 0.6px;
    background-color: #5B4A2B;
  }

  /* テキストエリア */
  .flow-text-col {
    padding: 0 0 15px 51px; /* 番号の幅(36px)+余白(15px)分、左を空ける */
  }

  .flow-text-col h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    /* PC版ではh3はtext-colの中にあるが、SPでは番号の横に並べたい場合のために
       HTML構造を維持しつつ位置を調整（※下記補足参照） */
    position: absolute;
    top: 5px;
    left: 51px;
    width: calc(100% - 60px);
	  font-weight:550;
  }

  .flow-text-col p {
    font-size: 14px;
    margin-top: 30px; /* タイトルの高さ分、上に余白を作る */
  }

  /* 画像エリア */
  .flow-img-col {
    margin-left: 51px; /* テキストの開始位置に合わせる */
    width: calc(100% - 51px);
    max-width: 100%;
  }

  .flow-img-col img {
    width: 100%;
    height: auto;
  }
}
/* =========================
   FAQ
========================= */
.faq-sec {
  padding: 110px 20px 100px;
  background: #f7f6f1;
	margin-bottom:60px;
}

.faq-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.faq-ttl {
  text-align: center;
  position: relative;
  margin: 0 0 70px;
  font-size: 3em;
    color: #5B4A2B;
    padding: 0 1em 0.2em;
    letter-spacing: 0.1em;
    font-weight: 500;
}

.faq-list {
  margin: 0;
}

.faq-item + .faq-item {
  margin-top: 40px;
}
.faq-item{
  background-color: #fff;
  padding: 30px 30px;
}

.faq-q,
.faq-a {
  position: relative;
  margin: 0;
  padding-left: 72px;
}

.faq-q {
  padding-bottom: 18px;
  border-bottom: 1px solid #ccb36a;
  color: #b9962c;
  font-size: clamp(20px, 2.1vw, 34px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.faq-a {
  margin-top: 18px;
  color: #333333;
  font-size: clamp(16px, 1.05vw, 17px);
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.faq-q::before,
.faq-a::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-family: 'Times New Roman', serif;
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
}

.faq-q::before {
  content: "Q";
  background: #c8aa4f;
  color: #fff;
}

.faq-a::before {
  content: "A";
  background: #7a6d4b;
  color: #fff;
}
.faq-sec .casebtn{
margin-top:40px;
}

@media (max-width: 767px) {
  .faq-sec {
    padding: 70px 16px 70px;
	  margin-bottom:40px;
  }

  .faq-ttl {
    margin-bottom: 48px;
    font-size: 34px;
	  font-weight:600;
  }

  .faq-ttl::after {
    width: 150px;
    height: 8px;
    bottom: 4px;
  }

  .faq-item + .faq-item {
    margin-top: 42px;
  }

  .faq-q,
  .faq-a {
    padding-left: 56px;
  }

  .faq-q {
    padding-bottom: 14px;
    font-size: 18px;
    line-height: 1.5;
	  font-weight:600;
  }

  .faq-a {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.4;
  }

  .faq-q::before,
  .faq-a::before {
    width: 38px;
    height: 38px;
    font-size: 28px;
  }
  .faq-item{
  padding: 30px 20px;
}
}
/* ------------------------------------------------

*アクセスCSS

　------------------------------------------------ */
.access-map {
  width: 100%;
  padding: 30px 0;
  /* 前後のセクションとの間隔 */
}

/* 地図を包むラッパー */
.map-wrapper {
  max-width: 1200px;
  /* 地図の最大幅 */
  margin: 0 auto;
  /* 左右中央配置 */
  padding: 0 20px;
  /* スマホ時の左右の余白 */
  display: flex;
  justify-content: center;
  /* iframeを中央に寄せる */
}

/* 地図（iframe）のスタイル */
.map-wrapper iframe {
  width: 100%;
  /* 親要素の幅いっぱいに広げる */
  max-width: 1000px;
  /* 実際の表示サイズ（お好みで調整） */
  height: 450px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  /* 軽い影で浮かせる */
}

/* スマホ対応（高さの調整） */
@media (max-width: 768px) {
  .map-wrapper iframe {
    height: 300px;
    /* スマホでは少し高さを抑える */
  }
}

/* ------------------------------------------------

*フォトギャラリーCSS

　------------------------------------------------ */
.gallery {
  text-align: center;
  padding: 50px;
  margin-bottom: 80px;
}

.galleryttl {
  font-size: 50px;
  color: #5B4A2B;
  text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.15em;
  text-align: center;
}

/* スライドショー＋サムネイルを横並びに */
.gallery-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  max-width: 1000px;
  margin: 50px auto;
}

/* 左側のスライドショー */
.gallery-slideshow {
  position: relative;
  width: 600px;
  /* 任意のサイズ */
  height: 400px;
  /* 任意のサイズ */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.gallery-slideshow::before {
  content: "";
  position: absolute;
  top: min(-1vw, -13px);
  left: max(1vw, 13px);
  width: 100%;
  height: 100%;
  border: 1px solid rgba(176, 141, 87, 0.5);
  z-index: 2;
}

/* メインスライドの画像 */
.gallery-slideshow img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

/* 最初の画像だけ表示 */
.gallery-slideshow img.active {
  opacity: 1;
}

/* 右側のサムネイル一覧 */
/* .gallery-thumbnails {
  display: flex;
  flex-direction: column;
  gap: 15px;
} */
/* 右側のサムネイル一覧 */
.gallery-thumbnails {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 2列 */
  gap: 15px;
}


/* サムネイル画像 */
.gallery-thumbnails img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  cursor: pointer;
  border: 3px solid transparent;
  transition: transform 0.2s ease-in-out, border 0.3s ease-in-out;
}

/* 選択されたサムネイルの強調 */
.gallery-thumbnails img.active {
  transform: scale(1.1);
}

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

  .gallery-container {
    flex-direction: column;
    align-items: center;
    margin: 20px auto;
  }

  .gallery {
    text-align: center;
    padding: 20px 16px 40px;
    margin-bottom: 20px;
    margin-top: 40px;
  }

  .galleryttl {
    font-size: 28px;
    letter-spacing: 0.18em;
    font-weight: 500;
    text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.2);
    margin-bottom: 0;
  }

  .gallery-slideshow {
    width: min(92vw, 400px);
    height: auto !important;
    aspect-ratio: 1 / 1;
    margin: 24px auto 0;
    position: relative;
    overflow: visible;
  }

  /* ▼ 枠線の位置をリセット（上下左右きっちり出す） */
  .gallery-slideshow::before {
    content: "";
    position: absolute;
    top: -10px;
    /* ここを 0 に */
    left: 10px;
    /* ここも 0 に */
    right: -10px;
    bottom: 10px;
    box-sizing: border-box;
    z-index: 2;
  }

  .gallery-slideshow img {
    position: static;
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
  }

  .gallery-slideshow img.active {
    display: block;
  }

  .gallery-thumbnails {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    justify-content: center;
  }

  .gallery-thumbnails img {
    width: 100%;
    height: 80px;
    object-fit: cover;
  }
}

/* ------------------------------------------------

*コラムCSS

　------------------------------------------------ */
/* --- セクション背景と枠組み --- */
.blogsec {
  background-color: #FAF8F2;
  /* 全体の薄いベージュ */
  padding: 80px 0;
  font-family: "Hiragino Mincho ProN", serif;
}

.blog-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.blog-block {
  background-color: #fff;
  padding: 40px 60px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

/* ================= 診療カレンダー ================= */
.schedule-sec {
  background: #ffffff;
  padding: 80px 20px 70px;
}

.schedule-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.schedule-title {
  margin: 0 0 50px;
  font-size: 50px;
  color: rgb(91, 74, 43);
  text-shadow: rgba(0, 0, 0, 0.3) 2px 4px 3px;
  letter-spacing: 0.15em;
  text-align: center;
  font-weight: 400;
  line-height: 1.2;
}

.schedule-calendar-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

.schedule-calendar-item img {
  display: block;
  width: 100%;
  height: auto;
}

.schedule-note {
  margin-top: 28px;
}

.schedule-note p {
  margin-bottom:5px;
  font-size: 14px;
	line-height: 1.5;
  color: #5b4a2b;
}

.schedule-note p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .schedule-sec {
    padding: 56px 16px 50px;
  }

  .schedule-title {
    font-size: 28px;
    margin-bottom: 32px;
  }

  .schedule-calendar-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .schedule-note {
    margin-top: 20px;
  }

  .schedule-note p {
    font-size: 13px;
    line-height: 1.8;
  }
}
/* --- ヘッダー --- */
.blog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #5B4A2B;
  padding-bottom: 15px;
  margin-bottom: 40px;
}

.blog-title-group {
  display: flex;
  align-items: center;
  gap: 15px;
}

.blog-icon img {
  width: 50px;
  height: auto;
}

.blog-title {
  font-size: 32px;
  letter-spacing: 0.1em;
  color: #5B4A2B;
  margin: 0;
  font-weight: 600;
}

/* Read More ボタン */
.read-more {
  display: inline-block;
  background-color: #C0A146;
  /* ゴールド系の背景 */
  color: #fff;
  padding: 10px 35px;
  border-radius: 25px;
  text-decoration: none;
  font-size: 15px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s;
  letter-spacing: 0.18em;
}

.read-more:hover {
  opacity: 0.8;
}

/* --- リスト項目 --- */
.blog-list {
  list-style: none;
  padding: 0;
}

.blog-item {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 30px;
  padding-left: 30px;
  /* 垂直線のための余白 */
}

/* 左側の垂直線 */
.blog-line {
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 2px;
  background-color: #D6C6AF;
}

/* サムネイル */
.blog-thumb {
  flex: 0 0 200px;
  margin-right: 30px;
}

.blog-thumb img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

/* テキストエリア */
.blog-content {
  flex: 1;
}

.blog-date {
  font-size: 14px;
  color: #999;
  margin-bottom: 5px;
}

.blog-item-title {
  font-size: 19px;
  margin-bottom: 8px;
}

.blog-item-title a {
  text-decoration: none;
  color: #5B4A2B;
  font-weight: 500;
}

.blog-desc {
  font-size: 14px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 長いテキストを ... で省略 */
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {

  .blog-block {
    padding: 20px 10px;
  }
.blog-header{
  padding-bottom:0.5em
}
  .blog-title{
    font-size: 1.4em;
  }
.blog-item-title a{
  font-size: 0.9em;
}

  .blog-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-thumb {
    flex: 0 0 auto;
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }

  .blog-thumb img {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .read-more{
    padding: 0.4em 0.8em; 
    letter-spacing: 0.03em;
  }
}

/* ------------------------------------------------

*バナーCSS

　------------------------------------------------ */
/* --- セクション全体の設定 --- */
.banner-section {
  background-color: #FFF3D4;
  /* 画像の背景色に近い薄いイエロー */
  padding: 80px 0;
}

.banner-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- レイアウトの共通設定 --- */
.banner-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

.banner-row:last-child {
  margin-bottom: 0;
}

/* --- 各バナー項目の設定 --- */
.banner-item {
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  line-height: 0;
  /* 画像下の不要な隙間を排除 */
  overflow: hidden;
}

.banner-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* ホバー時の演出 */
.banner-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* --- 上段（3列）の幅調整 --- */
.banner-row-top .banner-item {
  flex: 0 1 calc(33.333% - 14px);
  /* 3列 */
}

/* --- 下段（4列）の幅調整 --- */
.banner-row-bottom .banner-item {
  flex: 0 1 calc(25% - 15px);
  /* 4列 */
}

/* --- レスポンシブ対応 --- */

/* タブレット時：2列ずつ並べる */
@media (max-width: 900px) {

  .banner-row-top .banner-item,
  .banner-row-bottom .banner-item {
    flex: 0 1 calc(50% - 10px);
  }
}

/* スマホ時：1列に並べる */
@media (max-width: 480px) {

  .banner-row-top .banner-item,
  .banner-row-bottom .banner-item {
    flex: 0 1 100%;
  }

  .banner-section {
    padding: 40px 0;
  }
  .banner-container{
    padding: 0 62px;
  }
}

/* ------------------------------------------------

*フッターCSS

　------------------------------------------------ */
.footer * {
  color: #fff;
}

.footer {
  position: relative;
  /* 疑似要素を適切に配置するために relative を設定 */
  padding: 40px 20px;
  background: url(../images/footerbg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* フッター内のテキストを前面に配置 */
.footerinner {
  position: relative;
  z-index: 2;
  /* コンテンツを最前面に */
  color: #363636;
  max-width: 90%;
}

/* フッター内のテキストの視認性を確保 */
.footer-content {
  position: relative;
  z-index: 3;
  /* テキストを最前面に */
  color: #363636;
  /* 適宜調整 */
}

/* フッター上部（ロゴ・住所・予約） */
.footer-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 20px;
  gap: 5vw;
}

.page-title {
  font-size: 0.8rem;
}

.footer-logo {
  flex: 1 1 50%;
  /* 50%を基準にしつつ、狭くなったら縮む設定 */
  min-width: 0;
  /* これが重要：flex子要素がコンテンツ幅以下に縮むのを許可する */
  text-align: center;
}

.footer-title {
  margin: 0 auto;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
}

.footer-title p {
  text-align: center;
  font-size: 1.2em;
  letter-spacing: 0.18em;
}

/* フッターの情報エリア */
.footer-info {
  text-align: left;
  font-size: 12px;
  color: #363636;
  margin-left: 0px;
  /* または 20px など、必要な値に調整 */
  margin-right: 40px;
  margin-top: 40px;
  flex: 0 1 330px;
  /* 最大400px、狭くなれば縮む */
  margin: 40px 0 0 0;
  /* 余計なmargin-rightをリセット */
  min-width: 250px;
  /* 住所が読めなくなるほど縮まないための最低ライン */
}

/* 各項目のアイコン */
.footer-info p {
  position: relative;
  padding-left: 25px;
  margin: 5px 0;
  line-height: 2.2em;
  font-size: 16px;
  letter-spacing: .2em;
}

/* 住所アイコン */
.footer-info p:nth-child(1)::before {
  content: "\f3c5";
  /* FontAwesomeのマップピンアイコン */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
}

/* アクセス方法アイコン */
.footer-info p:nth-child(2)::before {
  content: "\f3c5";
  /* 同じくマップピンアイコン */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
}

/* バスアイコン */
.footer-info p:nth-child(3)::before {
  content: "\f238";
  /* FontAwesomeの電車アイコン */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
}

/* 電話番号アイコン */
.footer-info p:nth-child(6)::before {
  content: "\f095";
  /* FontAwesomeの電話アイコン */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
}

.footer-info .access-train {
  margin-bottom: 1px;
  line-height: 1.2em;
}

.footer-info .ac-top {
  margin-top: 1em;
}

.footer-info .ac-bottom {
  margin-bottom: 1em;
}

/* 診療時間表 */
.footer-schedule {
  max-width: 600px;
  text-align: center;
  flex-grow: 1;
  padding: 0;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

.footer-p {
	font-size: 18px;
	color: #fff;
	margin-bottom: 10px;
	text-align:center;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  overflow: hidden;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);

}

.schedule-table th,
.schedule-table td {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .8);
  text-align: center;
  font-size: 14px;
}

/* 見出し背景をグラデーションで上品に */
.schedule-table th {
  background: linear-gradient(to top, #6E5B1D, #C0A146);
  color: #fff;
  font-weight: 500;
  width: 20%;
  white-space: nowrap
}

/* 偶数行に薄い背景色で見やすく */
.schedule-table tbody tr:nth-child(even) td {
  background: #F2EFE9;
}

.schedule-table td {
  background: #F2EFE9;
  color: #444;
  letter-spacing: .15em;
  font-weight: 600;

}

.schedule-table .sat {
  color: #8e6c2d;
  font-weight: bold;
}

.schedule-table .closed {
  color: #C0A146;
  font-weight: 500;
}

.footer-schedule .schedule-note {
  font-size: 12px;
  color: #fff;
  margin-top: 20px;
  text-align: left;
  letter-spacing: .3em;
}

.footer-reservation {
  margin-left: 40px;
  margin-top: 20px;
  transition: all 0.1s;
}

.footer-reservation img:hover{
 opacity: 0.8;
 transform: translateY(3px);
}

.schedule-table th:nth-child(1) {
  width: 30%;
}

.schedule-table th:nth-child(2),
.schedule-table th:nth-child(3),
.schedule-table th:nth-child(4),
.schedule-table th:nth-child(6),
.schedule-table td:nth-child(2),
.schedule-table td:nth-child(3),
.schedule-table td:nth-child(4),
.schedule-table td:nth-child(6) {
  width: 11%;
  /* 月〜金を同じ幅（11%ずつ）に固定 */
}

.schedule-table th:nth-child(7),
.schedule-table td:nth-child(7) {
  width: 13%;
}

.schedule-table th:nth-child(8),
.schedule-table td:nth-child(8) {
  width: 13%;
  padding: 0px;
}

.schedule-table th:nth-child(5),
.schedule-table td:nth-child(5){
 width: 13%;
  padding: 0px;
}

@media (max-width: 960px) {
  .schedule-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .schedule-table th,
  .schedule-table td {
    font-size: 12px;
    padding: 6px;
  }
}

/* スマホ対応：横スクロール可能に */
@media (max-width: 600px) {
  .schedule-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .schedule-table th,
  .schedule-table td {
    font-size: 12px;
    padding: 6px;
  }
}

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

@media (max-width: 768px) {
  .page-title {
    font-size: 0.7rem;
  }

  .footer {
    padding: 40px 20px;
  }

  .footer-logo img {
    margin: 0 auto;
    margin-bottom: 30px;
  }

  .footer-top {
    display: block;
  }

  .footer-info {
    margin-right: 0;
  }

  .footer-info p {
    letter-spacing: 0.15em;
  }

  .footer-schedule {
    margin: 20px 0;
    font-size: 16px;
    letter-spacing: 0.18em;
    font-weight: 100;
  }

  .schedule-table th,
  .schedule-table td {
    font-size: 12px;
    padding: 6px;
  }

  .footer-reservation {
    margin: 30px 0 0 0;
    text-align: center;
    width: 100%;
  }

  .footer-reservation img {
    margin-left: 0;
  }

  .web-reserve {
    display: inline-block;
    width: auto;

  }
}

.footer {
  width: 100%;
  margin: 0 auto;
}

.footerinner {
  max-width: 100%;
}

/* ナビゲーションメニュー */
.footer-nav {
  text-align: center;
  margin: 20px 0;
}

.footer-nav ul {
  list-style: none;
  padding: 0;
}

.footer-nav ul li {
  display: inline-block;
  margin: 0 30px;
}

.footer-nav ul li a {
  text-decoration: none;
  font-size: 16px;
}

/* 診療内容のリンク */
.footer-links {
  display: flex;
  justify-content: space-between;
  max-width: 1100px;
  margin: 20px auto;
}

.footer-section {
  width: 30%;
}

.footer-section h4 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 10px;
  border-bottom: 2px solid #fff;
  padding-bottom: 5px;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 8px;
}

.footer-section ul li a {
  text-decoration: none;
  font-size: 14px;
}

/* フッター下部（著作権） */
.footer-bottom {
  text-align: center;
  font-size: 14px;
  color: #555;
  border-top: 1px solid rgba(255, 255, 255, .4);
  padding-top: 30px;
}

.footer-bottom p {
  text-align: center;
}

:root {
  --side-bg: repeating-linear-gradient(45deg, #f4eee4, #f5f5f5 3px,
      /* 薄い色の幅を3px */
      #e9e9e9 3px, #e9e9e9 6px
      /* 濃い色の幅を3px */
    );
  --side-ink: #69492a;
  --side-border: #ddd;
}

.side-fixed {
  position: fixed;
  top: 25%;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.side-btn {
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-height: 180px;
  padding: 12px 6px;
  background: var(--side-bg);
  color: var(--side-ink);
  border: 1px solid var(--side-border);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  transition: all 0.5s ease;
}

/* hover */
.side-btn:hover {
  background: #938068;
  color: #fff;
  transform: translateX(-4px);
}

.bnnerdiv {
  width: 35%;
  margin: 15px auto;
}

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

@media (max-width: 768px) {
  .bnnerdiv {
    width: 100%;
    margin: 15px auto;
  }

  :root {
    --cta-bg: #a19175;
    --cta-ink: #ffffff;
    --cta-sub: #b5b5b5;
    --cta-accent: #d7c76e;
    --cta-sep: rgba(255, 255, 255, .14);
    --shadow: 0 -6px 16px rgba(0, 0, 0, .35);
  }

  .fixed-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--cta-bg);
    color: var(--cta-ink);
    border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: var(--shadow);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* 各ボタン */
  .fixed-cta .cta {
    position: relative;
    display: flex;
    gap: 6px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    min-height: 72px;
    /* タップ領域確保 */
    padding: 10px 6px;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    border-left: 1px solid #b7b1a7ad;
  }

  /* アイコン */
  .fixed-cta .ico {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
  }

  /* ラベル */
  .fixed-cta .ftlabel {
    font-size: 13px;
    line-height: 1;
    letter-spacing: .04em;
    text-align: center;
    white-space: nowrap;
  }

  .fixed-cta .ftlabel em {
    color: var(--cta-accent);
    font-style: normal;
    font-weight: 700;
  }

  /* ホバー/押下 */
  .fixed-cta .cta:active {
    background: rgba(255, 255, 255, .12);
  }

  .footer-nav ul li a {
    font-size: 16px;
    font-weight: 200;
    letter-spacing: 0.16em;
  }

  .footer-nav ul li {
    display: block;
    margin: 0;
    margin-bottom: 10px;
  }

  .footer-nav ul li a {
    text-align: left;
  }

  .footer-nav ul {
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, .4);
    padding-top: 20px;
  }

  .footer-bottom {
    font-weight: 100;
  }
}