/* ------------------------------------------------
* 共通設定
------------------------------------------------ */
* {
    font-family: 'Noto Serif JP', serif;
    box-sizing: border-box;
}

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

.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;
}
.line_p{
border-bottom: 1.5px solid #C0A146;
}
.small_p{
    font-size:1em;
}
/* スマホ表示の切り替え (768px以下) */
@media (max-width: 768px) {
    .sp_only {
        display: block;
    }

    .pc_only {
        display: none;
    }
 .small_p{
        font-size: 0.85em;
    }
}

/* ------------------------------------------------
* ヘッダー (PC版)
------------------------------------------------ */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
}

.header-inner {
    margin: 0 auto;
    padding: 0.75em clamp(14px, 4vw, 28px);
    /* emをpx換算で調整 */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1em;
}

.header-left {
    position: relative;
}

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

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

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

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

.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(220px, 28vw);
    /* 13.75em = 220px */
    height: auto;
    transition: all 0.1s;
}

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

/* ハンバーガーボタン (PC非表示) */
/* ====== ハンバーガー（デフォルトは非表示） ====== */
.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);
}

/* ------------------------------------------------
*【噛み合わせ、顎関節症治療】
------------------------------------------------ */
/* ------------------------------------------------
* メインビジュアル (PC版)
------------------------------------------------ */
.fv-unit {
    width: 100%;
    aspect-ratio: 1440 / 563;
    background-image: url(../images/under_fv.png);
    background-size: cover;
    background-position: center center;
    position: relative;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
}

.fv-unit p {
    position: absolute;
    top: 80%;
    left: clamp(14px, 4vw, 28px);
    margin: 0;
    color: #5B4A2B;
    font-size: 2.4vw;
    font-weight: 500;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.fv-unit p::after {
    content: '';
    width: 650px;
    max-width: 80vw;
    height: 1px;
    display: block;
    background-color: #C0A146;
    position: absolute;
    bottom: -10px;
    left: 0;
}

/* ------------------------------------------------
* ナビゲーション (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:#F2EBE1;
    }

    .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

　------------------------------------------------ */
.medical-relation {
    padding: 60px 0;
    background-color: #fff;
    color: #333;
}

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

/* セクション見出し（茶色の背景） */
.section-title {
    background-color: #5B4A2B;
    /* 画像の茶色に合わせる */
    color: #fff;
    text-align: center;
    padding: 25px;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    margin-bottom: 40px;
    line-height: 1.4;
}

/* 上部コンテンツ（テキスト＋画像）の横並び */
.content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 60px;
}

.text-area {
    flex: 1;
}

.text-area p {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 2em;
    text-align: justify;
}

.text-area .guide-text {
    margin-bottom: 0;
}

/* 右側メイン画像 */
.image-main {
    width: 37%;
    /* 画像の占有率 */
}

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

/* 下部バナーグリッド */
.banner-grid {
    max-width: 900px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
	margin-top:40px;
}

.banner-item {
    transition: opacity 0.3s ease;
    text-decoration: none;
}

.banner-item:hover {
    opacity: 0.7;
}

.banner-item img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* 768px以下のレスポンシブ対応（必要に応じて） */
@media (max-width: 768px) {
    .section-title {
        text-align: center;
		padding: 10px 5px;
        font-size: 1.2rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        margin-bottom: 30px;
        line-height: 1.6;
    }

    .container {
        padding: 0 10px;
    }

    .content-wrapper {
        flex-direction: column-reverse;
        gap: 30px;
        margin-bottom: 30px;
    }

    .text-area p {
        font-size: 0.95em;
        line-height: 1.5em;
        letter-spacing: 0.07em;
    }

    .image-main {
        width: 100%;
    }

    .banner-grid {
        max-width: 250px;
        grid-template-columns: 1fr;
    }
    .medical-relation{
        padding: 20px 0 0 0;
    }
}

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

*客観的なデータを取って進めていく、「ゴールが明確な噛み合わせ治療、顎関節治療」ですCSS

　------------------------------------------------ */
/* --- デスクトップ版：既存の設定を維持 --- */
.medical-data-section {
    padding: 60px 0 100px;
    background-color: #fff;
    color: #333;
    font-family: "Hiragino Mincho ProN", "MS Mincho", serif;
}

.data-block {
    margin-bottom: 80px;
}

.data-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
}

.data-text {
    flex: 1;
}

.data-text h3 {
    font-size: 1.5rem;
    color: #C0A146;
    margin-bottom: 1.5rem;
    font-weight: 500;
    line-height: 1.5em;
    border-bottom: 1px solid #C0A146;
    letter-spacing: 0.08em;
}

.data-text p {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.price-note {
    font-weight: 500;
    color: #B20014;
}
.red-p{
   font-weight: 500;
    color: #B20014;
}

.data-image {
    flex: 0 0 36%;
}

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

/* --- モバイル版（768px以下）：ここが重要 --- */
@media (max-width: 768px) {
    .medical-data-section {
        padding-bottom: 30px;
    }

    .data-flex-container,
    .data-flex-container.reverse {
        display: flex;
        flex-direction: column;
        /* 縦並びに強制 */
        gap: 10px
    }

    .data-block {
        margin-bottom: 40px;
    }

    /* data-textの「箱」としての機能を解除し、中身のh3やpを直接並び替え可能にする */
    .data-text {
        display: contents;
    }

    /* 1. 見出しを一番上に */
    .data-text h3 {
        order: 1;
        width: 100%;
        font-size: 1.1rem;
        padding-bottom: 0.6em;
        margin-bottom: 1.5rem;
		font-weight:600;
    }

    /* 2. 画像を二番目に（reverseクラスがあっても2番目に来る） */
    .data-image {
        order: 2;
        width: 100%;
        margin-bottom: 1.5rem;
    }

    /* 3. 説明文を三番目に */
    .data-text p,
    .price-note {
        order: 3;
        width: 100%;
        font-size: 0.95em;
        line-height: 1.5;
        margin-bottom: 1rem;
        letter-spacing: 0.07em;
    }
}

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

*症例写真CSS

　------------------------------------------------ */
.medical-cases {
    padding: 80px 0;
    background-color: rgba(192, 161, 70, 0.1);
    font-family: "Hiragino Mincho ProN", "MS Mincho", serif;
    color: #333;
}

/* 症例カード全体 */
.case-card {
    max-width: 1000px;
    margin: 0 auto 80px;
    background: #fff;
    border: 1px solid #B4B4B4;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    padding: 50px;
}

.case-name {
    font-size: 1.4rem;
    color: #C0A146;
    margin-bottom: 40px;
    font-weight: 600;
    line-height: 2em;
    border-bottom: 1px solid #C0A146;
}

/* ビフォーアフター */
.case-comparison {
    display: flex;
    gap: 20px;
    margin-bottom: 60px;
}

.comp-box {
    flex: 1;
    position: relative;
}

.comp-label {
    display: block;
    background: #947F59;
    color: #fff;
    padding: 4px 15px;
    font-size: 1rem;
    letter-spacing: 0.18em;
    text-align: center;
}

.comp-box img {
    width: 100%;
    height: auto;
}

/* 治療詳細エリア */
.detail-title {
    margin-bottom: 40px;
    font-size: 1.2rem;
    color: #C0A146;
    font-weight: 500;
    line-height: 1em;
}

.detail-title span {
    display: inline-block;
    padding: 0 15px;
    border-left: 4px solid #C0A146;
}

.detail-item {
    display: flex;
    /* PCは横並び */
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px dotted #ccc;
}

.detail-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.detail-img {
    flex: 0 0 35%;
    /* 画像の横幅 */
}

.detail-img img {
    width: 100%;
    height: auto;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.1);
}

.detail-text {
    flex: 1;
}

.detail-text p {
    font-size: 1rem;
    line-height: 1.8;
    margin: 0;
    text-align: justify;
}



.case-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #5B4A2B;
    /* ゴールド系 */
    flex: 0 0 auto;
}

.case-arrow::before {
    content: "▶";
    /* PC版は右向き */
}

/* --- スマホ用（〜767px） --- */
@media screen and (max-width: 767px) {
    .medical-cases {
    padding: 60px 0;
}

    .case-card {
        padding: 30px 15px;
        margin-bottom: 50px;
    }

    .case-name {
        font-size: 1.1rem;
        margin-bottom: 25px;
    }

    .case-comparison {
        flex-direction: column;
        /* ビフォーアフターも縦並び */
        gap: 15px;
        margin-bottom: 30px;
    }

    .detail-item {
        flex-direction: column;
        /* 詳細項目も縦並び */
        gap: 15px;
    }

    .detail-img {
        width: 100%;
        flex: none;
    }

    .detail-text p {
        font-size: 0.95rem;
        line-height: 1.5;
        letter-spacing: 0.06em;
    }

    .case-arrow {
        padding: 5px 0;
        line-height: 1;
    }

    .case-arrow::before {
        content: "▼";
        /* スマホ版は縦並びなので下向きに変更 */
    }

    .detail-title {
        font-size: 1.1em;
        margin-bottom: 20px;
    }
}


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

*フッター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;
    padding-bottom: 23px;
    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;
}


@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;
    }
}

/* ------------------------------------------------
*【虫歯治療】
------------------------------------------------ */
.comp-box .comp-p{
    margin-top: 20px;
}
/* ------------------------------------------------
*【歯周病治療】
------------------------------------------------ */
.page-periodontal-disease .section-title{
    letter-spacing: 0.07em;
}
.page-periodontal-disease .bg_yellow{
background-color: rgba(192, 161, 70, 0.1);
}
/* ------------------------------------------------
*【予防歯科】
------------------------------------------------ */
.page-preventive .image-main.small_image{
    width: 28%;
}

.page-preventive .image-main.small_image img{
    margin-bottom: 1rem;
}

.page-preventive .bg_yellow{
background-color: rgba(192, 161, 70, 0.1);
}

@media (max-width: 768px) {
    .page-preventive .image-main.small_image {
        width: 80%;
        margin: 0 auto;
    }
}
/* ------------------------------------------------
*【知覚過敏治療】
------------------------------------------------ */
.page-hypersensitivity .container ul{
 list-style: none;
 margin-bottom: 1rem;
 font-weight: 500;
 letter-spacing: 0.18em;
}
.page-hypersensitivity .text-area p{
    margin-bottom: 1rem;
}
.page-hypersensitivity .bg_yellow{
background-color: rgba(192, 161, 70, 0.1);
}

@media (max-width: 768px) {
    .bg_yellow{
        padding: 20px 0 10px 0;
    }
   .bg-padding{
    padding: 60px 0 0 0;
   }
}
/* ------------------------------------------------
*【審美歯科治療】
------------------------------------------------ */
.page-aesthetic .bg_yellow{
background-color: rgba(192, 161, 70, 0.1);
}
.page-aesthetic .bg_white{
 background-color: rgba(255, 255, 255, 0.8);
padding: 4rem 6rem 2rem 6rem;
}
.page-aesthetic .bg_yellow2{
    background-color: rgba(192, 161, 70, 0.1);
    padding: 4rem 6rem 2rem 6rem;
}

@media (max-width: 768px) {
    .page-aesthetic .bg_white {
 padding: 2rem 1rem 0rem 1rem;
    }

.page-aesthetic .bg_yellow2{
    padding: 2rem 1rem 0rem 1rem;
}
}

/* ------------------------------------------------
*【入れ歯治療】
------------------------------------------------ */
.page-dentures .bg_yellow2{
    background-color: rgba(192, 161, 70, 0.1);
    padding: 4rem 6rem 2rem 6rem;
    margin-bottom: 1rem;
}

.page-dentures .data-image.small_image{
    width: 28%;
}

.page-dentures .data-image.small_image img{
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .page-dentures .data-image.small_image {
        width: 80%;
        margin: 0 auto;
    }
    .page-dentures .bg_yellow2{
    padding: 2rem 1rem 0rem 1rem;
}
.page-dentures .data-text h3{
    margin-bottom: 0.5rem;
}
}

/* ------------------------------------------------
*【インプラント治療】
------------------------------------------------ */
.page-implant .comp-img img{
    width: 50%;
}
@media (max-width: 768px) {
    .page-implant .comp-img img{
        width: 100%;
        margin: 0 auto;
    }
}

/* ------------------------------------------------
*【根管治療】
------------------------------------------------ */
.page-root-canal-treatment .comp-img img{
    width: 70%;
}

.page-root-canal-treatment .container ul{
 list-style: none;
 margin-bottom: 1rem;
 font-weight: 500;
 letter-spacing: 0.1em;
}

@media (max-width: 768px) {
    .page-root-canal-treatment .comp-img img{
        width: 100%;
        margin: 0 auto;
    }
        .page-root-canal-treatment .image-main.small_image {
        width: 70%;
        margin: 0 auto;
    }
}

/* ------------------------------------------------
*【多くの問題のある患者さん】
------------------------------------------------ */
.page-occlusal-reconstruction .bg_yellow{
background-color: rgba(192, 161, 70, 0.1);
}

@media (max-width: 768px) {
    .page-occlusal-reconstruction .bg_yellow{
        padding: 20px 0 10px 0;
    }
   .page-occlusal-reconstruction .bg-padding{
    padding: 60px 0 0 0;
   }
}

/* ------------------------------------------------
*【歯ぎしり治療】
------------------------------------------------ */
.page-teeth-grinding .bg_yellow{
background-color: rgba(192, 161, 70, 0.1);
padding-top: 90px;
}
.page-teeth-grinding .medical-data-section{
    padding-bottom: 30px;
}

@media (max-width: 768px) {
    .page-teeth-grinding .bg_yellow{
        padding: 60px 0 10px 0;
    }
   .page-teeth-grinding .medical-data-section{
    padding: 20px 0 0 0;
   }
}

/* ------------------------------------------------
*【銀歯の下の虫歯】
------------------------------------------------ */
.page-cavities-under-the-silver-filling .bg_yellow{
background-color: rgba(192, 161, 70, 0.1);
padding-top: 90px;
}

@media (max-width: 768px) {
    .page-cavities-under-the-silver-filling .bg_yellow{
        padding: 60px 0 10px 0;
    }
    .page-cavities-under-the-silver-filling .case-comparison{
        gap:40px;
    }

}
/* ------------------------------------------------
*【歯列矯正、歯ならび治療】
------------------------------------------------ */
.page-orthodontics .image-main.small_image{
    width: 20%;
}

.page-orthodontics .image-main.small_image img{
    margin-bottom: 1rem;
}

.page-orthodontics .bg_yellow{
background-color: rgba(192, 161, 70, 0.1);
}
.page-orthodontics ul{
background-color: #FFF;
padding: 1rem;
list-style: none;
letter-spacing: 0.1em;
font-weight: 500;
}

.page-orthodontics ul li{
padding-bottom: 0.4em;
}

.page-orthodontics ul li::before{
 content: "⚫︎"; /* 記号(黒丸)を挿入 */
 color: #C0A146; /* 好きな色にする */
 font-size: 0.6em; /* 点の大きさ */
 margin-right: 1em; /* 点とテキストの距離 */
}

.page-orthodontics .data-block{
padding: 3rem 4rem 2rem 4rem;
background-color: rgba(192, 161, 70, 0.1);
margin-bottom: 3rem;
}
.page-orthodontics .bg-padding{
    padding-bottom: 30px;
}

.casebtn {
  text-align: left;
  color: #fff;
}

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

.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;
}

@media (max-width: 768px) {
    .page-orthodontics .image-main.small_image {
        width: 80%;
        margin: 0 auto;
    }
    .page-orthodontics .data-block{
padding: 2rem 1rem 2rem 1rem;
margin: 0 0.5rem;
margin-bottom: 3rem;
    }
.page-orthodontics ul{
order: 3;}

     .view-more {
        width: 100%;
    font-size: 0.9rem;
    padding: 1rem;
    letter-spacing: 0.1em;
  }
}

/* ------------------------------------------------
*【マスピース矯正】
------------------------------------------------ */
/* ＝＝＝＝従来の顎関節症治療＝＝＝ */
.page-mouthpiece-orthodontics .intro-text {
    margin-bottom: 50px;
    font-size: 15px;
}

/* 白いカード部分 */
.page-mouthpiece-orthodontics .shadow-box {
    background-color:rgba(192, 161, 70, 0.1);
    padding: 30px 40px;
    margin-bottom: 40px;

}


/* フレックスレイアウト（テキストと画像） */
.page-mouthpiece-orthodontics .data-flex-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.page-mouthpiece-orthodontics .data-text {
    flex: 1;
    font-size: 15px;
    text-align: justify;
}

/* 右側画像サイズ固定 */
.page-mouthpiece-orthodontics .side-img {
    width: 40%;
    max-width: 380px;
}

.page-mouthpiece-orthodontics .side-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* 中央の大きなイラスト（mo03.png） */
.page-mouthpiece-orthodontics .teeth-image-full {
    text-align: center;
    margin: 40px 0;
}

.page-mouthpiece-orthodontics .teeth-image-full img {
    width: 100%;
    max-width: 700px; /* 画像のサイズに合わせて調整 */
    height: auto;
    margin: 0 auto;
}


/* リストスタイル */
.page-mouthpiece-orthodontics .custom-list {
    list-style: none;
    padding-left: 10px;
    margin-bottom: 20px;
}

.page-mouthpiece-orthodontics .custom-list li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 5px;
    font-weight: 500;
}

.page-mouthpiece-orthodontics .custom-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: #333;
}

/* レスポンシブ */
@media (max-width: 768px) {
 .page-mouthpiece-orthodontics {
        padding: 0 0 50px 0;
    }
    .page-mouthpiece-orthodontics .shadow-box {
        padding: 30px 20px;
    }
    .page-mouthpiece-orthodontics .data-flex-container {
        flex-direction: column;
        gap:0;
    }
    .page-mouthpiece-orthodontics .side-img {
        width: 100%;
        max-width: none;
        order: -1; /* スマホでは画像を上に */
        margin-bottom: 20px;
    }
    .page-mouthpiece-orthodontics .data-text h3{
letter-spacing: 0.04em;
        }
}

/* ＝＝＝＝当院のマウスピース矯正のメリット＝＝＝ */
/* --- メリットセクション外枠：背景画像の設定 --- */
.page-mouthpiece-orthodontics .medical-relation.gold-bg {
    background-image: url(../images/bg-gold-merit-full.png); /* 金色の背景画像 */
    background-size: cover;
    background-repeat: no-repeat;
    padding: 60px 0;
    position: relative;
}

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

/* 白い大きなカード（既存のshadow-boxとは別定義） */
.page-mouthpiece-orthodontics .relation-content-wrapper {
    background-color: #fff;
    padding: 70px 50px 60px 50px;
    border: 1px solid #C0A146;
}

/* 各メリットブロックの区切り */
.page-mouthpiece-orthodontics .relation-block {
    position: relative;
    margin-bottom: 100px;
}

.page-mouthpiece-orthodontics .relation-block:last-child {
    margin-bottom: 0;
}

/* ナンバリング (01, 02...) */
.page-mouthpiece-orthodontics .relation-block::before {
    content: attr(data-number);
    position: absolute;
    top: -10px;
    left: -110px;
    font-family: 'Alex Brush', cursive;
    font-style: italic;
    font-size: 70px;
    color: #B20014; /* 赤色 */
    line-height: 1;
    z-index: 1;
    letter-spacing: 0.05em;
}

/* レイアウト */
.page-mouthpiece-orthodontics .relation-flex {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.page-mouthpiece-orthodontics .relation-text {
    flex: 1;
}

/* 小見出し：金色の下線 */
.page-mouthpiece-orthodontics .relation-sub-title {
    color: #c0a146; /* ゴールド */
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #c0a146;
    display: inline-block;
    width: 100%;
}

.page-mouthpiece-orthodontics .relation-text p {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    text-align: justify;
    margin: 0;
}

/* 画像サイズ */
.page-mouthpiece-orthodontics .relation-image {
    width: 36%;
    min-width: 220px;
    
}

.page-mouthpiece-orthodontics .relation-image img {
    width: 100%;
    height: auto;
    display: block;
}
.page-mouthpiece-orthodontics .last{
    margin-bottom:20px;
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {
	.page-mouthpiece-orthodontics .container {
    padding: 0 10px;
}
	
    .page-mouthpiece-orthodontics.medical-relation {
        padding: 50px 0;
    }

    .page-mouthpiece-orthodontics .relation-content-wrapper {
        padding: 50px 20px 70px;
    }

    .page-mouthpiece-orthodontics .relation-block {
        margin-left: 20px;
    }

    .page-mouthpiece-orthodontics .relation-block::before {
        font-size: 50px;
        left: -55px;
        top: -30px;
    }
.page-mouthpiece-orthodontics .relation-text p{
    line-height: 1.6em;
}
    .page-mouthpiece-orthodontics .relation-flex {
        flex-direction: column;
        gap: 20px;
    }

    .page-mouthpiece-orthodontics .relation-image {
        width: 100%;
        min-width: 0;
    }

    .page-mouthpiece-orthodontics .relation-sub-title {
        font-size: 18px;
    }
    .page-mouthpiece-orthodontics .relation-image{
        order: 2;
    }
    .page-mouthpiece-orthodontics .relation-text p{
        order:3;
    }
}
/* ＝＝＝＝マウスピース矯正のよくある質問＝＝＝ */
.page-mouthpiece-orthodontics.medical-faq-area {
    padding: 80px 0;
    background-color: #fff; /* 背景は白 */
}

.page-mouthpiece-orthodontics .faq-content-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 40px 30px 40px;
    background-color: rgba(192, 161, 70, 0.1);
}

/* 各質問の親要素 */
.page-mouthpiece-orthodontics .faq-item {
    margin-bottom: 80px;
}

/* 質問の見出し（Qアイコンと金色の下線） */
.page-mouthpiece-orthodontics .faq-question {
    font-size: 24px;
    color: #c0a146; /* ゴールド */
    position: relative;
    padding-left: 45px; /* Qのスペース */
    padding-bottom: 5px;
    border-bottom: 1px solid #c0a146;
    margin-bottom: 25px;
    font-weight: 500;
    letter-spacing: 0.18em;
}

/* Qアイコンの作成 */
.page-mouthpiece-orthodontics .faq-question::before {
    content: "Q";
    position: absolute;
    left: 0;
    top: 1px;
    font-family: 'Times New Roman', serif;
    font-size: 28px;
    color: #c0a146;
    font-weight: 400;
}

/* 回答エリア */
.page-mouthpiece-orthodontics .faq-answer {
    padding-left: 45px; /* 質問の文字位置に合わせる */
}

.page-mouthpiece-orthodontics .faq-answer p {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 1.5em;
    color: #333;
    letter-spacing: 0.1em;
}

/* 治療期間のグレーボックス */
.page-mouthpiece-orthodontics .faq-period-box {
    background-color: #fff; /* 薄いグレーベージュ */
    padding: 20px 40px;
    margin-bottom: 25px;
    display: inline-block;
    min-width: 320px;
}

.page-mouthpiece-orthodontics .faq-period-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    letter-spacing: 0.08em;
}

.page-mouthpiece-orthodontics .faq-period-box li {
    font-size: 16px;
    line-height: 2;
    font-weight: 600;
    color: #333;
}

/* 料金ボタンエリア */
.page-mouthpiece-orthodontics .faq-btn-area {
    text-align: center;
    margin-top: 40px;
}
.page-mouthpiece-orthodontics .casebtn{
    text-align: center;
}

.page-mouthpiece-orthodontics  .view-more{
    padding: 1em 2.5em 1em 2em;
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {
    .page-mouthpiece-orthodontics .faq-content-wrapper{
        padding:2rem;
    }
    .page-mouthpiece-orthodontics .faq-question {
        font-size: 18px;
        padding-left: 35px;
    }

    .page-mouthpiece-orthodontics .faq-question::before {
        font-size: 26px;
    }

    .page-mouthpiece-orthodontics .faq-answer {
        padding-left: 0; /* スマホではインデントを解除して読みやすく */
    }

    .page-mouthpiece-orthodontics .faq-period-box {
        display: block;
        min-width: 0;
        padding: 15px 10px;
    }
    .page-mouthpiece-orthodontics .faq-answer p{
        line-height: 1.5rem;
    }
    .page-mouthpiece-orthodontics  .view-more{
        font-size:1.0rem;
        letter-spacing:0.2rem;
    }
    .page-mouthpiece-orthodontics .faq-period-box li{
        font-size: 0.8rem;
        letter-spacing: 0.12rem;
    }
}
/* ------------------------------------------------

*顎関節や噛み合わせの不調に「マウスピース矯正」という選択肢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;
  /* 1440px */
  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;
}


.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: -5em;
  /* 枠の下にはみ出させる */
  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: 2em;
  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

　------------------------------------------------ */
.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

　------------------------------------------------ */
.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;
  }
}
/* ＝＝＝＝矯正中にホワイトニング＝＝＝ */
.page-whitening .bg_yellow{
background-color: rgba(192, 161, 70, 0.1);
}
.page-whitening .casebtn{
    text-align: center;
}
.page-whitening .lead{
    padding-bottom: 0;
}
.page-whitening .lead .content-wrapper{
    margin-bottom: 0;
}
.page-whitening .bg_yellow2{
	background-color: rgba(192, 161, 70, 0.1);
}

@media (max-width: 768px) {
	.page-whitening .bg_yellow2{
padding: 60px 0 1px 0;
margin: 0 0 30px 0;
}

	.page-whitening .bg_yellow {
padding:60px 0
}
	.page-whitening .view-more {
width: 76%;
font-size: 1rem;
}
}