/* ==============================
   ページ全体・メインビジュアルなど
============================== */
body, html {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.6;
  background-color: #fff;
  color: #333;
  box-sizing: border-box;
	overflow-x: hidden !important;
}

/* デスクトップ用（既存の設定をそのまま使用） */
.main-visual img {
  width: 100%;
  height: auto;
  display: block;
}

/* スマホサイズ時：デスクトップ用画像を非表示にしてスマホ用画像を背景に */
@media (max-width: 768px) {
  .main-visual img {
    display: none; /* 既存のimgを非表示 */
  }
  .main-visual {
    background-image: url("https://www.tanaka.or.jp/mouthpiece/wp-content/uploads/2025/10/tanaka-sp2.jpg"); /* スマホ用画像 */
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 590px;
    order: -1; /* フレックスの並び替え用 */
    display: block;
    margin-bottom: 70px;
	          margin-top: -30px;
  }

}

/* テキストやカードデザインなどは必要に応じて追記 */
/* 特徴ブロック全体 */
/* --- 特徴ブロック各項目 --- */
.feature_block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
    position: relative;
	background-image:url(http://slc-jp.com.testrs.jp/test-tanaka/wp-content/uploads/2025/10/feauture_back.png);
}

.image_container {
    position: relative;
    width: 90%;
    padding-top: 60%;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.image_container2 {
    position: relative;
    width: 50%;
    padding-top: 30%;
    overflow: hidden;
    border-radius: 10px;
    margin-left: 10%;
    z-index: 1;
}





.feature_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.feature_image1 {
    position: absolute;
    top: 0;
    left: 0;
    /* width: 100%; */
    height: 100%;
    object-fit: cover;
}




.feature_image2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}


.feature_image3 {
    position: absolute;
    top: 0;
    left: 0;
    /* width: 100%; */
    height: 100%;
    object-fit: cover;
object-position: 70% center;
}


.text_container {
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-top: -30%;
    position: relative;
    z-index: 2;
    width: 80%;
}

.pink_bg {
    background: linear-gradient(to right, #ffffff, #fdeff2);
}

.white_bg {
    background-color: #ffffff;
}

.feature_number {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5em;
    color: #e57373;
    font-style: italic;
    margin-bottom: 10px;
}

.h3-title {
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 10px;
     color:#B4904B;
     font-family: serif;
}

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

.feature_list li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 5px;
    color:#8C6E6E;
    font-family: serif;
}

/* --- 各ブロックの背景とレイアウト --- */
.feature_block1  {
    background: url('https://www.tanaka.or.jp/mouthpiece/wp-content/uploads/2025/10/33289789_s.jpg') no-repeat center center/cover;
     background-repeat: no-repeat;
       /* サイズの調整: 水彩画の幅をテキストエリアの幅に合わせて調整 */
    background-size: 55% auto; 
    
    /*位置の調整: 人の画像に近づくように（左方向へ）大きく移動させる */
    /* 横軸: 100% (右端) から 50% 程度移動させる */
    /* 縦軸: 100% (下端) から 10px 内側に配置 */
    background-position: calc(100% - 500px) calc(100% - 10px); 
}
.feature_block2  {
    background: url('https://www.tanaka.or.jp/mouthpiece/wp-content/uploads/2025/10/32754086_s.jpg') no-repeat center center/cover;
     background-repeat: no-repeat;
     background-size: 35% auto; 
       background-position: calc(100% - 10px) calc(100% - 10px); 
}
.feature_block3  {
        background: url('https://www.tanaka.or.jp/mouthpiece/wp-content/uploads/2025/10/33289789_01_s.jpg') no-repeat center center/cover;
     background-repeat: no-repeat;
       /* サイズの調整: 水彩画の幅をテキストエリアの幅に合わせて調整 */
    background-size: 55% auto; 
    
    /*位置の調整: 人の画像に近づくように（左方向へ）大きく移動させる */
    /* 横軸: 100% (右端) から 50% 程度移動させる */
    /* 縦軸: 100% (下端) から 10px 内側に配置 */
    background-position: calc(100% - 500px) calc(100% - 10px); 
}
.feature_block4  {
        background: url('https://www.tanaka.or.jp/mouthpiece/wp-content/uploads/2025/10/24668309_s.jpg') no-repeat center center/cover;
     background-repeat: no-repeat;
     background-size: 35% auto; 
       background-position: calc(100% - 10px) calc(100% - 10px); 
}

.feature_block5  {
        background: url('https://www.tanaka.or.jp/mouthpiece/wp-content/uploads/2025/10/33289789_01_s.jpg') no-repeat center center/cover;
     background-repeat: no-repeat;
       /* サイズの調整: 水彩画の幅をテキストエリアの幅に合わせて調整 */
    background-size: 55% auto; 
    
    /*位置の調整: 人の画像に近づくように（左方向へ）大きく移動させる */
    /* 横軸: 100% (右端) から 50% 程度移動させる */
    /* 縦軸: 100% (下端) から 10px 内側に配置 */
    background-position: calc(100% - 500px) calc(100% - 10px); 
}







/* --- PC・タブレット向けのレスポンシブ対応 --- */
@media (min-width: 768px) {
	.feature_section {
    max-width: 1500px;
    margin: 0 auto;
	padding:70px;
		background-image:url(http://slc-jp.com.testrs.jp/test-tanaka/wp-content/uploads/2025/10/feauture_back2.png);
		background-repeat:no-repeat;
		background-size:100%;
}
    .feature_block {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 40px;
        margin-bottom: 60px;
    }
 .sp-br {
        display: none;
    }   
    .image_container {
        width: 45%;
        padding-top: 45%;
        margin-top: 0;
        z-index: 2;
    }

         
    .image_container2{
        width: 45%;
        padding-top: 45%;
        margin-top: 0;
        z-index: 2;
    }

    .text_container {
        width: 45%;
        text-align: left;
        margin-top: 0;
        z-index: 1;
    }

    .feature_block1 {
        flex-direction: row;
    }

    .feature_block2 {
        flex-direction: row-reverse;
    }

    .feature_block3 {
        flex-direction: row;
    }

    .feature_block4 {
        flex-direction: row-reverse;
    }

   .feature_block5 {
        flex-direction: row;
    }

    /* ======================================================
   Features 02/04 の画像表示を横長（または自然な形）に修正
   ====================================================== */

/* 1. 画像コンテナのアスペクト比を調整して横長にする */
/* padding-topの値を減らすことで、高さを低くし横長に見せます */
.feature_block2 .image_container,
.feature_block4 .image_container {
    /* 現在は 90%幅 x 60%高さ (縦長) */
    /* ここを 90%幅 x 40%高さ (横長) などに調整 */
    padding-top: 30%; 
    /* 必要に応じて、画像がきれいに収まる値をデベロッパーツールで探してください (例: 35%, 45%) */
}

/* 2. 画像の表示方法を「拡大・トリミング」から「全体表示」に変更 */
/* object-fit: cover; を object-fit: contain; に上書きすることで、
   画像全体を枠内に収め、画質の粗さを解消します。 */
.feature_block2 .feature_image1,
.feature_block4 .feature_image3 {
    object-fit: contain; 
    /* contain にすると画像が中央に表示されるため、object-position の調整は不要になります */
}
}


@media (max-width: 768px) {
/* --- 画像コンテナ (image_container) --- */
.image_container {
    position: relative;
    /* 画像を大きく見せるために幅を少し広げます (例: 95%) */
    width: 95%; 
    padding-top: 60%;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

/* --- テキストコンテナ (text_container) --- */
.text_container {
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    
    /* 🚨 最重要修正: 画像との重なりを解消し、テキストを画像の下に配置します */
    margin-top: 0; 
    
    /* 💡 画像とテキストの間に隙間を設けます (例: 20px) */
    margin-top: 20px; 
    
    position: relative;
    z-index: 2;
    width: 80%;
}
	.feature_section {
    max-width: 1200px;
    margin-top:70px;
}

}

/* ======================================================
   Features05 専用のレイアウト調整
   (画像は左に固定し、右側のテキストカードを縦に2つ並べる)
   ====================================================== */

@media (min-width: 768px) {
    /* 特徴ブロック5の共通設定 */
    .feature_block5 {
        display: block; /* Flexを解除してカードを縦に積めるようにする */
        position: relative;
        min-height: 700px; /* 全体の高さを確保（画像やテキスト量に合わせて調整） */
        padding: 40px;
    }

    /* 左側の画像コンテナを固定配置 */
    .feature_block5 .image_container {
        position: absolute;
        top: 40px;
        left: 40px;
        width: 45%;      /* 画像の横幅（元々のデザインを維持） */
        padding-top: 50%; /* 画像の高さ（比率）を維持 */
        margin: 0;
        z-index: 1;
    }

    /* 右側のテキストカード（2つとも適用） */
    .feature_block5 .text_container {
        width: 48%;       /* 右側のカード幅（画像と重ならない程度に調整） */
        margin-left: auto; /* 右寄せにする */
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 25px; /* 上下のカードの隙間 */
        position: relative;
        z-index: 2;
        box-sizing: border-box;
    }

    /* 2枚目のカード特有の微調整（必要であれば） */
    .feature_block5 .text_container:last-child {
        margin-bottom: 0;
    }
}

/* --- スマホ版の調整 (Features05のみ) --- */
@media (max-width: 767px) {
    .feature_block5 {
        display: flex;
        flex-direction: column; /* スマホは上から順に並べる */
        align-items: center;
    }

    .feature_block5 .image_container {
        width: 95%;
        padding-top: 60%;
        margin-bottom: 20px;
    }

    .feature_block5 .text_container {
        width: 80%;
        margin-top: 0;    /* 画像との重なりを排除 */
        margin-bottom: 15px; /* カード同士の隙間 */
		margin:20px auto;
    }
}

/* --- 料金ブロック全体 --- */
/* --- 全体 --- */
/* --- 料金ブロック全体 --- */
.price_block {
  max-width: 1000px;
  margin: 100px auto;
  padding: 80px 40px;
  /* 🚨 背景追加：画像のような上品なベージュと微かな質感を演出 */
  background: linear-gradient(135deg, #fdfaf7 0%, #f9f4ef 100%);
  border-radius: 4px;
  font-family: "Shippori Mincho", "MS Mincho", serif;
  color: #5d5246; /* ぼやけないよう、少し濃いめの茶色に */
}

/* --- タイトル --- */
.h2-title {
  font-size: clamp(26px, 5vw, 38px);
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.2em; /* 明朝体らしく広めに */
  margin: 0 0 10px;
  color: #4a4a4a;
}
.h2-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: #b8868a;
  font-size: clamp(18px, 3vw, 24px);
  text-align: center;
  margin: 0 0 60px;
  letter-spacing: 0.1em;
}

/* --- 料金概要（上段：画像15枚目のイメージ） --- */
.price_summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 50px;
  background: #fff;
  border: 1px solid #eee6de;
  margin: 0 0 40px;
  box-shadow: 0 10px 30px rgba(93, 82, 70, 0.05);
}

.fee_type {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #5d5246;
  border-left: 1px solid #b8868a; /* 細い縦線アクセント */
  padding-left: 25px;
}

.price_amount {
  margin: 0;
  font-size: clamp(28px, 5vw, 42px);
  color: #b8868a;
  font-weight: 500;
}
.price_note {
  font-size: 14px;
  color: #8c8279;
  margin-top: 8px;
	font-family:serif,"Noto sans JP";
}

/* --- テーブル（カードタイプ：画像15枚目の比率を再現） --- */
.table_price {
  width: 100%;
  border-collapse: collapse; /* 隙間をなくして画像に近づける */
  margin-top: 20px;
	font-family:serif,"Noto sans JP";
}
.table_price tbody { display: block; }

.table_price tr {
  display: grid;
  grid-template-columns: 300px 1fr; /* ラベル幅を固定して安定させる */
  background: #fff;
  border-bottom: 1px solid #eee6de; /* 下線のみでスッキリと */
}
.table_price tr:first-child {
  border-top: 1px solid #eee6de;
}

/* 左ラベル：画像のような薄いベージュ背景 */
.table_price .table_label {
  background: #f9f7f4;
  color: #5d5246;
  text-align: center;
  padding: 30px 20px; /* 余白を調整してぼやけ感を解消 */
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #eee6de;
}

/* 右コンテンツ：テキストがパキッと見えるよう調整 */
.table_price .table_content {
  padding: 30px 40px;
  font-size: 17px;
  line-height: 1.8;
  color: #5d5246;
  display: flex;
  align-items: center;
  letter-spacing: 0.03em; /* わずかに広げて可読性アップ */
}

/* --- モバイル --- */
@media (max-width: 767px) {
  .price_block {
    padding: 60px 20px;
  }
  .price_summary {
    padding: 30px 20px;
    flex-direction: column;
    align-items: flex-start;
  }
  .table_price tr {
    grid-template-columns: 1fr;
  }
  .table_price .table_label {
    padding: 20px;
    border-right: none;
    border-bottom: 1px solid #eee6de;
  }
}


/* --- メリットブロック --- */
/* --- メリットブロック --- */
/* --- PC版（ベーススタイル: 768px以上の画面に適用） --- */
.merit_section {
    max-width: 1200px;
    margin: 60px auto;
    /* PC版は左右のpaddingを少なめに設定 */
    padding: 20px; 
    font-family: 'Noto Sans JP', sans-serif;
    color: #4a4a4a;
    position: relative;
    z-index: 1;
}

/* --- ヘッダーとタイトル (省略) --- */
.merit_header { text-align: center; margin-bottom: 50px; }
.h2-title { font-size: 2.5em; font-weight: 700; margin-bottom: 5px; }
.h2-subtitle { font-family: 'Cormorant Garamond', serif; font-style: italic; color: #b8868a; font-size: 1.2em; }

/* --- 各メリットアイテム (PC版のスタイル) --- */
/* --- 各メリットアイテム (PC版のスタイル) --- */
.merit_container {
    /* PC版は2カラムのGridレイアウト */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 40px; 
    /* 確認: アイテムの高さを揃えるために必須 */
    align-items: stretch;
}

/* 追加: merit_container の背景画像を擬似要素で設定 */
.merit_container::before {
    content: ''; /* 擬似要素にはcontentプロパティが必須 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* ここに表示したい背景画像のURLを設定 */
    background-image: url('https://www.tanaka.or.jp/mouthpiece/wp-content/uploads/2025/10/3387358_s.jpg'); /* 実際の画像パスに変更してください */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.9; /* 必要であれば透明度を調整 */
    z-index: -1; /* コンテンツの下に配置 */
}


.merit_item {
    display: flex;
    flex-direction: column; 
    /* 修正1: 親の高さ（stretchで揃えられた高さ）いっぱいに引き伸ばす */
    height: 100%; 
    /* 修正2: 項目内のコンテンツ全体を上下中央に配置 */
    justify-content:flex-start; 
    /* PC版は中央寄せ */
    align-items: stretch; 
}

.merit_image_box {
    flex-shrink: 0;
    width: 100%; 
    order: 1;
    position: relative;
    overflow: hidden;
    padding: 0;
    margin-bottom: 0px; 
}

.merit_image {
    /* 画像を70%幅で中央寄せにする */
    width: 70%; 
    height: auto;
    display: block;
    margin: 0 auto;
}

.merit_text_box {
    /* テキストボックスの幅を80%に制限し、中央寄せ */
    flex-grow: 1; 
    width: 80%;
    margin: 0 auto;
    padding: 10px 0 0 0; 
    order: 2; 
    /* H3の中央寄せのために親をセンターにする */
    text-align: center; 
    display: block;
}

.merit_h3_title {
    /* H3の改行を強制的に防ぐ */
    white-space: nowrap; 
    text-align: center; 
    font-size: 1.5em; 
    color: #B4904B;
    font-family: serif;
    margin-bottom: 10px;
}

.merit_text_box p {
    font-size: 1em;
    line-height: 1.6;
    /* 本文のテキスト自体は左寄せに戻す (カンプの見た目に合わせる) */
    text-align: left; 
    /* マージンをリセット/再定義 */
	 font-family: "Noto sans JP",sans-serif;
}



/* --- 画像背景（水彩画の再現） --- */
/* .merit_item1 .merit_image_box, .merit_item3 .merit_image_box { border: 1px solid #f9e7ea; padding: 5px; background: url('images/watercolor_pink.jpg') no-repeat center center/cover; }
.merit_item2 .merit_image_box, .merit_item4 .merit_image_box { border: 1px solid #f9e7ea; padding: 5px; background: url('images/watercolor_pale_pink.jpg') no-repeat center center/cover; } */

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

/* ----------------------------------------------------- */
/* --- モバイル向けレスポンシブ対応 (@media 内の修正) --- */
/* ----------------------------------------------------- */
@media (max-width: 767px) {
    .merit_section {
        /* モバイルで左右に余白を確保（ベース設定を活かす） */
        padding: 20px; 
    }

    .merit_container {
        /* モバイルは1カラムのGrid */
        grid-template-columns: 1fr;
        gap:10px 10px;
    }

    .merit_item {
        /* モバイルは左寄せ */
        align-items: flex-start; 
    }

    .merit_image_box {
        /* 順序と幅をモバイル用に調整 */
        order: 1; 
        width: 100%;
    }

    .merit_image {
        /* モバイル画像は枠いっぱいの100%に */
        width: 100%; 
        margin: 0;
    }

    .merit_text_box {
        /* テキストブロックは全幅で左寄せ */
        width: 100%;
        padding: 20px 0;
        order: 2; 
        text-align: left; 
        margin: 0; /* 中央寄せを解除 */
    }

    .merit_h3_title {
        /* モバイルでは改行を許容し、左寄せに */
        white-space: normal;
        text-align: left;
        font-size: 1.3em; /* モバイルサイズに戻す */
        color: #B4904B; 
        font-family: serif;
        margin-bottom: 0px
    }
    
    .merit_text_box p {
        /* マージンはデフォルトに戻すか、適切なマージンを設定 */
        margin: 0 0 1em 0; 
        text-align: left;
    }
}


/* --- 治療の流れブロック --- */
/* --- ベーススタイルとフォント --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,400&family=Noto+Sans+JP:wght@400;700&display=swap');

/* --- 修正1: flow_section：背景の器として画面幅いっぱいに広げる --- */
.flow_section {
    /* 以前の max-width や margin: auto は不要 */
    
    /* 背景を画面幅いっぱいにするための設定 */
    width: 100%; /* 親要素（通常body）の幅100%でOK。vwは横スクロールの原因になりやすいため、こちらに戻します。 */
    
    /* 左右に白い余白とスクロールバーが出ないようにするための最重要設定 */
    overflow-x: hidden; 

    /* 上下の余白とコンテンツのスタイルを維持 */
    margin-top: 60px; 
    margin-bottom: 60px;
    padding: 20px 0; /* 左右のpaddingは flow_container に移管 */

    font-family: 'Noto Sans JP', sans-serif;
    color: #4a4a4a;
    position: relative;
    z-index: 1; 
}

/* --- 修正2: flow_container：コンテンツの幅を中央で制御する --- */
.flow_container {
    max-width: 1200px; /* コンテンツの最大幅をここで制御 */
    margin: 0 auto; /* 中央寄せ */
    padding: 0 20px; /* 画面端との余白 */

    position: relative;
    z-index: 2; /* 背景より手前 */
}


/* --- ヘッダーとタイトル --- */
/* --- 修正3: flow_header：コンテンツの幅を中央で制御する --- */
.flow_header {
    max-width: 1200px; /* コンテンツの最大幅をここで制御 */
    margin: 0 auto 50px auto; /* 中央寄せと下の余白 */
    text-align: center;
    position: relative;
    z-index: 5;
}

.h2-title {
    font-size: 2.5em;
    margin-bottom: 5px;
    font-family:serif;
    color:#866F6F;
}

.h2-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color:#DEAEAE; 
    font-size: 1.2em;
}

/* --- 背景の装飾図形 (カンプの形状を再現) --- */


/*======================================================
  PC版スタイル (min-width: 768px)
======================================================*/
@media (min-width: 768px) {
    .treatment_step {
        display: flex;
        /* 左テキスト、右画像に固定 */
        flex-direction: row; 
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 150px; 
        position: relative;
        z-index: 2;
    }
	
    .flow_section {
        padding-top: 50px; 
        padding-bottom: 50px; 
    }

    /* --- 修正4: 擬似要素として背景画像を配置（画面幅いっぱい、縮小表示） --- */
    .flow_section::before {
        content: '';
        position: absolute;
        top: 0;
        
        /* 画面幅全体に広げる */
        left: -50vw; /* 画面の左端からさらに100vw左に配置 */
        width: 200vw; /* 画面の3倍の幅にする */
        
        height: 100%;
        
        background-image: url('https://www.tanaka.or.jp/mouthpiece/wp-content/uploads/2025/10/flow_back.png');
        
        /* 拡大されすぎないよう縮小して表示 */
        background-size: 75%; 
        background-repeat: no-repeat;
        background-position: center top; 
        
        opacity: 0.5;
        z-index: 1;
    }

    /* テキストを左側（order: 1）に固定 */
    .flow_text_content {
        order: 1;
        position: relative;
        width: 45%; 
        /* ステップ番号と矢印のための左側の大きな余白 */
        padding-left: 100px; 
        padding-right: 20px;
        /* 目安として画像の縦方向の中心に持ってくるための値 */
        padding-top: 150px; 
    }

    /* 画像を右側（order: 2）に固定 */
    .flow_image_wrapper {
        order: 2;
        width: 50%; 
        padding-left: 20px;
    }
    
    .treatment_image {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    /* --- ステップ番号と矢印の忠実再現 --- */
    .step_number {
        font-family: 'Times New Roman', serif;
        font-style: italic;
        font-size: 3em; 
        color: #DEAEAE; 
        line-height: 1;

        /* 絶対配置で、テキストブロックの左余白の垂直線上に配置 */
        position: absolute;
        top: -50px; 
        left: 0; 
        z-index: 3;
    }
    
    .flow_h3-title{
        /* step_numberの下に位置を調整 */
        margin-top: 0px; 
        font-size: 1.5em;
        font-weight: 700;
        margin-bottom: 15px;
        font-family: serif;
        color: #B4904B;
    }

    /* ステップ間のライン (::after) - 棒線部分 */
    .treatment_step:not(.treatment_step6)::after {
        content: '';
        position: absolute;
        top: 60px; 
        left: 30px; 
        width: 2px;
        height: 350px; 
        background-color: #D2C1FF; 
        z-index: 1;
    }

    /* 矢印の頭 (::before) - 三角形部分 */
    .treatment_step:not(.treatment_step6)::before {
        content: ''; 
        position: absolute;
        width: 0;
        height: 0;
        top: 410px; 
        left: 31px; 
        transform: translateX(-50%);

        z-index: 2;
        
        border-style: solid;
        border-width: 8px 6px 0 6px; 
        border-color: #D2C1FF transparent transparent transparent; 
    }

    /* 最後のステップではラインと矢印を非表示 */
    .treatment_step6::after, 
    .treatment_step6::before {
        content: none;
    }
}

/*======================================================
  モバイル版スタイル (max-width: 767px) の最終確定版
======================================================*/
@media (max-width: 767px) {
    /* flow_container は ベーススタイルで max-width が設定されているため、ここでは左右の余白設定のみ調整 */
    .flow_container {
        padding: 0 15px; 
    }
    
    /* 修正5: モバイル版での背景画像の調整 */
    .flow_section::before {
        /* PC版の設定をモバイルで上書き */
        left: -100vw; /* 画面の左端からさらに100vw左に配置 */
        width: 300vw; /* 画面の3倍の幅にする */
        background-size: 120%; /* モバイルでは少し大きめに調整 */
        background-position: center center; /* 中央に配置 */
    }

    /* --- treatment_step のレイアウト --- */
    .treatment_step {
        display: flex;
        flex-direction: column; 
        align-items: flex-start;
        margin-bottom: 60px;
        position: relative; 
        padding-left: 60px; 
    }

    /* --- コンテンツ（画像とテキスト）のスタイル --- */
    .flow_text_content, 
    .flow_image_wrapper {
        width: 100%;
        padding: 0;
    }
    
    .flow_text_content {
        text-align: left; 
        order: 2; 
        padding-top: 5px;
        display: block;
    }
    
    .flow_image_wrapper {
        order: 1; 
        margin-top: 50px; 
        margin-bottom: 0;
    }
    
    .treatment_image {
        max-width: 100%; 
        margin: 0; 
        display: block; 
    }
    
    /* --- ステップ番号と見出しの位置調整 --- */
    .step_number {
        font-family: 'Times New Roman', serif;
        font-size: 2em; 
        line-height: 1.2;
        color: #DEAEAE; 
        font-style: italic;

        position: absolute;
        top: 0;
        left: 0; 
        z-index: 3;
    }

    .flow_h3-title {
        position: static; 
        margin-left: 0; 
        
        margin-top: 15px; 
        margin-bottom: 5px;
        font-size: 1.2em; 
        font-weight: 700;
        font-family: serif;
        color: #B4904B;
        padding-top: 0; 
    }
    
    /* Pタグのテキストの位置調整 */
    .flow_text_content p {
        margin-top: 0; 
        line-height: 1.8;
        margin-left: 0; 
        width: 100%;
    }


    /* --- 矢印（棒線と先端）の配置 --- */
    .treatment_step:not(.treatment_step6)::after,
    .treatment_step:not(.treatment_step6)::before {
        content: '';
        position: absolute;
        top: 35px; /* step_number の下から開始 */
        left: 20px; 
        width: 1px;
        
        /* ラインの長さ調整 (次のステップの矢印の頂点直前で止まるように) */
        height: calc(100% + 60px - 35px - 6px); 
        
        background-color: #D2C1FF; 
        z-index: 1; 
    }
    
    /* 最後のステップではラインと矢印を非表示 */
    .treatment_step6::after, 
    .treatment_step6::before {
        content: none !important;
    }
}




















.consultation_section {
    max-width: 1200px;
    margin: 80px auto;
    font-family: 'Noto Sans JP', sans-serif;
    color: #4a4a4a;
    padding: 0 20px;
    text-align: center; /* 中央寄せの調整 */
}

/* --- ヘッダーとタイトル --- */
.consultation_header {
    margin-bottom: 40px;
}

.consultation_header .h2-title {
    font-size: 2.2em;
    font-weight: 700;
    margin-bottom: 5px;
}

.consultation_header .h2-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    /* カンプのピンク系サブタイトル色を適用 */
    color: #b8868a; 
    font-size: 1.4em;
    display: block;
}

/* --- 画像コンテナのスタイル --- */
.contact_image_container {
    max-width: 1000px; /* カンプのコンテンツ最大幅に合わせる */
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    /* 画像がコンテンツ全体であるため、影や装飾も画像に含まれると想定 */
}

.contact_link_wrapper {
    display: block;
    line-height: 0; /* 画像リンクの下の余白を削除 */
}

.full_contact_image {
    width: 100%;
    height: auto;
    display: block;
    /* 画像そのものにカンプの角丸と影を期待 */
}

/*======================================================
  PC版スタイル (min-width: 768px)
======================================================*/
@media (min-width: 768px) {
    .consultation_header {
        margin-bottom: 60px;
    }
}


/*======================================================
  モバイル版スタイル (max-width: 767px)
======================================================*/
@media (max-width: 767px) {
    .consultation_section {
        margin: 40px 0;
        padding: 0 10px;
    }
    
    .consultation_header {
        margin-bottom: 30px;
    }

    .consultation_header .h2-title {
        font-size: 1.8em;
    }
    
    .consultation_header .h2-subtitle {
        font-size: 1.1em;
    }

    /* モバイルでは余白を詰める */
    .contact_image_container {
        border-radius: 5px;
    }
}















/* 無料相談バナーブロック*/

/* 無料相談バナーセクションのCSS */
.main-bannar {
    /* 必要に応じて最大幅を設定（他のセクションと揃える） */
    max-width: 1200px;
    margin: 0 auto; /* 中央寄せ */
    padding: 0 20px; /* 画面端に余白を設ける（モバイルでは調整が必要） */
}

/* バナー画像を格納しているコンテナ */
.img-bannar {
    /* 画像以外の要素がない場合は特に設定不要ですが、
       親要素として幅いっぱい使う設定にしておくと安心です */
    width: 100%;
}

/* 🚨【最重要】画像が親要素の幅を超えないようにする設定 🚨 */
.img-bannar img {
    /* 画像の最大幅を親要素（.img-bannar）の100%に制限します */
    max-width: 100%; 
    /* 比率を維持したまま高さを自動調整 */
    height: auto; 
    /* インライン要素（画像）の下にできる余白を削除 */
    display: block; 
}

/* モバイル対応の調整（オプション） */
@media (max-width: 767px) {
    .main-bannar {
        /* モバイルではパディングを狭くする */
        padding: 0 10px;
    }
}


/*======================================================
 PC版スタイル (min-width: 768px)
======================================================*/
/*======================================================
 PC版スタイル (min-width: 768px)
======================================================*/
@media (min-width: 768px) {
    .case_section {
        padding: 80px 0;
        text-align: center;
    }
    
    .case_header {
        margin-bottom: 50px;
    }
    
    .h2-title {
        font-size: 2.5em;
        font-weight: 700;
        margin-bottom: 0;
    }

    .h2-sub-title {
        display: block;
        font-family: 'Times New Roman', serif;
        font-style: italic;
        color: #DEAEAE;
        font-size: 1.2em;
        margin-top: 5px;
    }
    
    .case_item {
        display: flex;
        flex-direction: column; /* PC版も縦積みです（画像と表） */
        align-items: center;
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
    }
    
    .case_images {
        display: flex; /* 画像2枚と矢印を横並びにするためにflexを使用 */
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-bottom: 40px;
    }
    
    .case_image_before,
    .case_image_after {
        position: relative;
        width: 350px;
    }

    .image_label {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        opacity: 0.8;
        padding: 10px 0;
    }
    
    .image_label p {
        font-family: serif;
        font-weight: bold;
        font-size: 1.2em;
        color: #866F6F;
        margin: 0;
        text-align: left;
        padding-left: 15px;
    }
    
    .case_image_before img,
    .case_image_after img {
        width: 100%;
        height: auto;
        border-radius: 5px;
        display: block;
    }

    .case_arrow img {
        width: 50px;
        height: auto;
    }
    
    .case_table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }
    
    .case_table th,
    .case_table td {
        padding: 15px;
        border: 1px solid #ddd;
        text-align: left;
        vertical-align: top;
        font-family: serif;
    }
    
    .case_table th {
        width: 200px;
        background-color: #4C4D82;
        color: white;
    }
    
    .case_table td {
        background-color: #fff;
        font-size: 0.9em;
        color: #866F6F;
			 font-family: 'Noto Sans JP', sans-serif ;
    }
    
    /* ボタンのスタイルは省略せず、そのまま維持します */
    .case_button {
        position: relative;
        background-color: #fff;
        border: 2px solid #DEAEAE;
        color: #866F6F;
        padding: 10px 30px;
        font-size: 1em;
        border-radius: 50px;
        margin-top: 40px;
        cursor: pointer;
        transition: all 0.3s ease;
        padding-right: 60px;
      	 font-family: 'Noto Sans JP', sans-serif ;
    }
    
    .case_button::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 20px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 0 5px 8px;
        border-color: transparent transparent transparent #DEAEAE;
        transform: translateY(-50%);
        transition: all 0.3s ease;
    }
    
    .case_button::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 10px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 0 5px 8px;
        border-color: transparent transparent transparent #DEAEAE;
        transform: translateY(-50%);
        transition: all 0.3s ease;
    }

    .case_button:hover {
        background-color: #DEAEAE;
        color: #fff;
    }
    
    .case_button:hover::before,
    .case_button:hover::after {
        border-color: transparent transparent transparent #fff;
    }
}

/*======================================================
 モバイル版スタイル (max-width: 767px)
======================================================*/
@media (max-width: 767px) {
    .case_section {
        padding: 40px 15px;
        text-align: center;
    }
    
    .case_header {
        margin-bottom: 30px;
    }
    
    .h2-title {
        font-size: 1.8em;
    }
    
    /* 🚨 修正: 閉じ括弧の位置を修正し、スタイルを整理 */
    .h2-sub-title {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic;
        color: #b8868a;
        font-size: 1.4em;
        display: block;
	   text-align:center;
    }
    /* 修正したため、ここに余計な閉じ括弧は不要 */
    
    /* 🚨 修正: case_item に flex-direction: column; を明示的に追加 */
    .case_item {
        display: flex;
        flex-direction: column; /* 画像ブロックと表を縦積み */
        align-items: center; /* 中央寄せ */
        width: 100%;
    }

    .case_images {
        display: flex;
        flex-direction: column; /* 画像2枚と矢印を縦積み */
        align-items: center;
        gap: 15px;
        margin-bottom: 30px;
    }
    
    .case_image_before,
    .case_image_after {
        position: relative;
        width: 100%;
        max-width: 250px;
    }
    
    .image_label {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        opacity: 0.8;
        padding: 5px 0;
    }
    
    .image_label p {
        font-family: serif;
        font-weight: bold;
        font-size: 1em;
        color: #866F6F;
        margin: 0;
        text-align: left;
        padding-left: 10px;
    }
    
    .case_image_before img,
    .case_image_after img {
        width: 100%;
        height: auto;
    }

    .case_arrow {
        transform: rotate(90deg); /* 矢印を縦向きにする */
    }

    .case_arrow img {
        width: 30px;
    }

    .case_table {
        width: 100%;
        border-collapse: collapse;
        table-layout: auto; /* モバイル向けにautoに戻す */
    }
    
    /* 🚨 修正: tr に display: block を追加して、表を縦積み形式にする */
    .case_table tr {
        display: block;
        margin-bottom: 15px; /* 各行の間にスペースを追加 */
        border: 1px solid #ddd;
        border-radius: 5px;
        overflow: hidden; /* ボーダーを丸くするのに必要 */
    }

    .case_table th,
    .case_table td {
        font-family: serif;
        display: block;
        width: 100%;
        text-align: left;
        padding: 10px 15px;
        box-sizing: border-box;
        border: none; /* 個別のセルからボーダーを削除 */
    }
    
    .case_table th {
        background-color: #4C4D82;
        color: white;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 見出しと内容の間に線 */
    }

    .case_table td {
        background-color: #fff;
        color: #866F6F;
        padding-top: 10px; 
    }
    
    /* ボタンのスタイルは省略せず、そのまま維持します */
    .case_button {
        position: relative;
        background-color: #fff;
        border: 2px solid #DEAEAE;
        color: #866F6F;
        padding: 8px 25px;
        font-size: 0.9em;
        border-radius: 50px;
        margin-top: 30px;
        cursor: pointer;
        transition: all 0.3s ease;
        padding-right: 50px;
    }
    
    .case_button::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 18px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 4px 0 4px 7px;
        border-color: transparent transparent transparent #DEAEAE;
        transform: translateY(-50%);
        transition: all 0.3s ease;
    }
    
    .case_button::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 10px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 4px 0 4px 7px;
        border-color: transparent transparent transparent #DEAEAE;
        transform: translateY(-50%);
        transition: all 0.3s ease;
    }

    .case_button:hover {
        background-color: #DEAEAE;
        color: #fff;
    }
    
    .case_button:hover::before,
    .case_button:hover::after {
        border-color: transparent transparent transparent #fff;
    }
}

/*======================================================
 院長紹介 セクション全体
======================================================*/
.director_section {
    padding: 100px 0;
    overflow: hidden;
}

.director_header {
    text-align: center;
    margin-bottom: 60px;
}

.h2-title {
    font-size: 2.5em;
    font-weight: 700;
    color: #4C4D82;
    margin-bottom: 0;
    font-family: serif;
}

.h2-sub-title {
    display: block;
    font-family: 'Times New Roman', serif;
    font-style: italic;
    color: #DEAEAE;
    font-size: 1.2em;
    margin-top: 5px;
}

/* メッセージと写真の並び */
.director_content {
    display: flex;
    align-items: flex-start;
    max-width: 1100px;
    margin: 0 auto 80px;
    padding: 0 20px;
    gap: 60px;
}

.director_text_wrap {
    flex: 1;
    z-index: 2;
}

.director_position {
    font-size: 1.1em;
    font-weight: bold;
    color: #866F6F;
    font-family: serif;
    margin-bottom: 5px;
}

.director_name {
    font-size: 2.4em;
    font-family: serif;
    margin-bottom: 15px;
    color: #333;
}

.director_info {
    font-size: 1em;
    font-family: serif;
    color: #666;
    margin-bottom: 25px;
}

.director_message p {
    font-size: 0.95em;
    line-height: 2;
    color: #444;
    margin-bottom: 1.5em;
}

/* 画像装飾（ Jyoji Tanaka の透かしと背景画像 ） */
.director_image_wrap {
    position: relative;
    width: 420px;
    flex-shrink: 0;
}

/* 背後の装飾画像（既存のものを維持） */
.director_image_wrap::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 20px;
    width: 100%;
    height: 100%;
    background-image: url(https://www.tanaka.or.jp/mouthpiece/wp-content/uploads/2025/10/new30841059_s.jpg);
    background-size: cover;
    opacity: 0.8;
}

.director_img {
    position: relative;
    z-index: 3;
    width: 100%;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.director_name_en {
    position: absolute;
    top: 50%;
    left: -40%;
    transform: rotate(-10deg) translateY(-50%);
    font-family: 'Times New Roman', serif;
    font-size: 5em;
    color: #DDE5FF;
    white-space: nowrap;
    z-index: 2;
    opacity: 0.5;
    pointer-events: none;
}

/*======================================================
 下部カードレイアウト（崩れを解消）
======================================================*/
.director_bottom_grid {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    gap: 30px;
    padding: 0 20px;
}

.profile_card {
    flex: 1;
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(76, 77, 130, 0.05);
    border: 1px solid #f2f2f7;
}

/* H3見出し：プライバシーポリシーのデザイン */
.profile_h3 {
    font-size: 1.3rem;
    color: #4C4D82;
    padding-left: 15px;
    border-left: 5px solid #DEAEAE;
    margin-bottom: 30px;
    font-family: serif;
    font-weight: bold;
}

/* テーブルスタイル */
.profile_table { width: 100%; border-collapse: collapse; }
.profile_table th {
    width: 90px;
    text-align: left;
    vertical-align: top;
    padding: 12px 0;
    color: #866F6F;
    font-size: 0.9em;
    font-family: serif;
}
.profile_table td { padding: 12px 0; font-size: 0.95em; line-height: 1.6; color: #333; }

/* リストスタイル */
.qualification_list { list-style: none; padding: 0; }
.qualification_list li {
    font-size: 0.95em;
    line-height: 1.8;
    margin-bottom: 12px;
    padding-left: 1.5em;
    position: relative;
}
.qualification_list li::before {
    content: "■";
    position: absolute;
    left: 0;
    color: #DEAEAE;
    font-size: 0.7em;
    top: 0.1em;
}

/*======================================================
 モバイル版 (既存の背景グラデーションを維持)
======================================================*/
@media (max-width: 767px) {
    .director_section {
        padding: 60px 20px;
        background-image: linear-gradient(to bottom, #FDFEFF 0%, #F6F9FF 25%, #FFF6FD 50%, #F6F9FF 75%, #FDFEFF 100%);
    }

    .director_content {
        flex-direction: column;
        margin-bottom: 40px;
        gap: 30px;
    }

    .director_image_wrap {
        width: 100%;
        order: -1;
    }

    .director_image_wrap::before {
        display: none; /* スマホでは複雑な装飾をカットして見やすく */
    }

    .director_name_en { display: none; }

    .director_name { font-size: 1.8em; }

    .director_bottom_grid {
        flex-direction: column;
        gap: 20px;
    }

    .profile_card { padding: 30px 20px; }
}
/*======================================================
 PC版スタイル (min-width: 768px)
======================================================*/
/*======================================================
 PC版スタイル (min-width: 768px)
======================================================*/
@media (min-width: 768px) {
    .initiative_section {
        padding: 100px 0;
        background-color: #fff;
        overflow: hidden;
    }

    .initiative_header {
        text-align: center;
        margin-bottom: 60px;
    }

    .h2-title {
        font-size: 2.5em;
        font-weight: 700;
        color: #4C4D82;
        margin-bottom: 0;
    }

    .h2-sub-title {
        display: block;
        font-family: 'Times New Roman', serif;
        font-style: italic;
        color: #DEAEAE;
        font-size: 1.2em;
        margin-top: 5px;
    }

/* 1. 親要素: 背景のプロパティを削除し、疑似要素の基準点を設定 */
.initiative_content {
    position: relative; /* 疑似要素の基準点 */
    z-index: 1; /* コンテンツが背景（z-index: 0）より前面に来るように設定 */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    
    /* 元々ここにあった background-image, background-repeat, background-size は削除！ */
}


/* 2. 疑似要素: 背景画像と薄さの設定 */
.initiative_content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    /* 親要素いっぱいに広げる */
    width: 100%;
    height: 100%;
    
    /* ★ 背景画像の設定 */
    background-image: url('https://www.tanaka.or.jp/mouthpiece/wp-content/uploads/2025/12/torikumi-1.png');
    background-repeat: no-repeat;
    background-position: center center; /* 画像を中央に配置 */
    
    /* 例: 80%に設定すると、親要素の80%のサイズで表示されます */
    background-size: 100% auto; /* 幅を80%にし、高さは縦横比を維持 */

    
    /* ★ 透明度の設定 (修正ポイント) */
    opacity: 0.2; /* お好みの薄さに合わせて 0.1〜0.3 程度で調整してください */
    
    /* 親要素のコンテンツの下に配置 */
    z-index: 0; 
}
    
    .initiative_item {
        display: flex;
        align-items: center;
        gap: 50px;
        margin-bottom: 80px;
        position: relative;
        /* この一行でHTMLの並び順に従って配置 */
        flex-direction: row;
    }

    .initiative_text_wrap {
        position: relative;
        flex: 1;
        font-size: 0.9em;
        line-height: 1.8;
    }
	
	    .initiative_text_wrap p {
   	 font-family: "Noto sans JP",sans-serif;
    }
	
	
	

    .initiative_image_wrap {
        position: relative;
        flex: 1;
        z-index: 1;
        max-width: 500px;
    }
    
    .img_torikumi1,
    .img_torikumi2 {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 5px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
    
    /* 写真の背景に水彩画画像を配置 */
    .photo_bg_frame {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 100%;
        height: 100%;
        background-image: url('https://www.tanaka.or.jp/mouthpiece/wp-content/uploads/2025/10/33289789_01_s.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        z-index: -1;
    }

    /* テキストの背景に図形を配置 */
    .text_bg_shape {
        position: absolute;
        width: 150%;
        height: 150%;
        opacity: 0.8;
        z-index: -1;
       background-color: rgba(255, 255, 255, 0.8); /* 透明度 0.8 の白色 */
    }
}

/*======================================================
 モバイル版スタイル (max-width: 767px)
======================================================*/
/*======================================================
 モバイル版スタイル (max-width: 767px)
======================================================*/
@media (max-width: 767px) {
    .initiative_section {
        padding: 60px 20px;
        background-image: linear-gradient(
            to bottom,  /* 方向: 上から下へ */
            #FDFEFF 0%, 
            #F6F9FF 25%, 
            #FFF6FD 50%, 
            #FDEFFF 75%, 
            #FDFEFF 100%
        );
    }

    .initiative_header {
        margin-bottom: 40px;
    }

    .h2-title {
        font-size: 2em;
    }

    .initiative_content {
        display: flex;
        flex-direction: column;
        gap: 50px; /* 項目間の余白を調整 */
    }

    .initiative_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px; /* 画像とテキストの間の余白を調整 */
        margin-bottom: 0;
        position: relative;
    }
    
    .initiative_text_wrap {
        width: 100%;
        text-align: left;
        position: relative;
        order: 2; /* テキストを2番目に配置 */
    }

    .initiative_image_wrap {
        width: 100%;
        position: relative;
        order: 1; /* 画像を1番目に配置 */
        z-index: 1;
    }

    .img_torikumi1,
    .img_torikumi2 {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 5px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    /* 背景画像をモバイル版で再現 */
    .photo_bg_frame {
        display: block;
        position: absolute;
        top: 20px;
        left: 20px;
        width: 100%;
        height: 100%;
        background-image: url('http://slc-jp.com.testrs.jp/test/wp-content/themes/cure_tcd082//33289789_01_s.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        z-index: -1;
    }

    /* 2つ目の背景フレームの位置を調整 */
    .initiative_item:nth-child(2) .photo_bg_frame {
        top: 20px;
        left: auto;
        right: 20px;
    }

    /* テキストの背景装飾はモバイルでは非表示に */
    .text_bg_shape {
        display: none;
    }
}

/* PC版：バイブアジャストメントの画像ずらし設定 */
@media (min-width: 768px) {
    /* 2枚並んでいるエリアの調整（文字との被りを防ぎ、下の余白を作る） */
    .initiative_item:nth-child(3) .initiative_image_wrap {
        display: flex;
        flex-direction: column;
        padding-bottom: 40px; /* 2枚目がはみ出す分の余白 */
    }

    /* 1枚目の画像：左寄せ（幅を80%にして隙間を作る） */
    .initiative_item:nth-child(3) .img_torikumi2:not(.img_vibe_2) {
        width: 80% !important;
        margin-left: 0;
        margin-right: auto;
        z-index: 1;
    }

    /* 2枚目の画像：右寄せ + 少し上に重ねる */
    .img_vibe_2 {
        width: 80% !important;
        margin-left: auto !important; /* 右にずらす */
        margin-right: 0 !important;
        margin-top: -60px !important; /* 上の画像に少し重ねる */
        position: relative;
        z-index: 2;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }
}








/* --- スマーティ矯正 2枚画像専用スタイル --- */
/* --- スマーティ矯正ブロック専用：斜め配置と縦並びの完全修正 --- */

/* 【デスクトップ版：斜めにずらして被りを解消】 */
@media (min-width: 768px) {
    #smarty-unique-block {
        position: relative;
        display: block;
        width: 100%;
        height: 550px; /* 被らないための十分な高さ */
        max-width: 550px; /* エリアの横幅 */
        margin: 0 auto;
    }

    /* 背景のピンク水彩画：最背面に固定 */
    #smarty-unique-block .photo_bg_frame {
        position: absolute;
        width: 80%;
        height: 100%;
        top: 0;
        left: -5%;
        z-index: 1; /* 最背面 */
        background-size: contain;
    }

    /* 1枚目：左上に配置（青い横長バナー） */
    #smarty-unique-block .img_main {
        position: absolute;
        top: 0;
        left: 0;
        width: 75%;
        z-index: 3; /* 重なった場合、こちらを上に */
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    /* 2枚目：右下に配置（赤い縦長の箱） */
    #smarty-unique-block .img_sub {
        position: absolute;
        bottom: 0;
        right: -50px;
		top:260px;
        width: 55%; /* 縦長なので幅を絞る */
        z-index: 2; /* バナーの下に潜り込ませる */
        border: 4px solid #fff;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
}

/* 【モバイル版：サイズを適正にして中央に縦並び】 */
@media (max-width: 767px) {
    #smarty-unique-block {
        display: flex;
        flex-direction: column; /* 確実に縦 */
        align-items: center;    /* 中央寄せ */
        gap: 20px;              /* 画像同士の余白 */
        height: auto;           /* PCの高さを解除 */
        padding: 20px 0;        /* 上下のゆとり */
    }

    /* モバイルでは背景を消す（画像を見やすくするため） */
    #smarty-unique-block .photo_bg_frame {
        display: none;
    }

    /* 写真：サイズを適正（80%）にして中央寄せ */
    #smarty-unique-block img {
        position: static;       /* 絶対配置を解除 */
        width: 80%;             /* 大きすぎないサイズ */
        max-width: 320px;       /* 横に広がりすぎない制限 */
        margin: 0 auto;
        border: none;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
}


/*======================================================
 PC版スタイル (min-width: 768px)
======================================================*/
@media (min-width: 768px) {
    .magazine_section {
        padding: 100px 0;
        position: relative;
        overflow: hidden;
	 min-height: 600px;
		 z-index: 10; /* コンテンツが常に最前面に来るように、高めの z-index を設定 */
    }
/* ★ 修正1: 背景画像専用のレイヤー (::before) を作成 */
.magazine_section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* ★ 修正2: 背景画像とサイズの設定 */
    background-image: url('https://www.tanaka.or.jp/mouthpiece/wp-content/uploads/2025/10/30348011_m.jpg');
    
    /* ブロック全体を覆う */
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center center;
    
    /* ★ 修正3: 透明度の設定（背景のみを薄くする） */
    /* 0.15 は非常に薄い状態です。お好みに合わせて 0.1〜0.3 の間で調整してください。*/
    opacity: 0.05; 
    
    /* コンテンツ (z-index: 10) の真後ろに配置 */
    z-index: 1; 
}
    .magazine_header {
        text-align: center;
        margin-bottom: 60px;
    }

    .h2-title {
        font-size: 2.5em;
        font-weight: 700;
        color: #4C4D82;
        margin-bottom: 0;
    }

    .h2-sub-title {
        display: block;
        font-family: 'Times New Roman', serif;
        font-style: italic;
        color: #DEAEAE;
        font-size: 1.2em;
        margin-top: 5px;
    }

    .magazine_content {
        max-width: 900px;
        margin: 0 auto;
        padding: 0 20px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "img1 img1"
            "img2 img2"
            "img3 img3";
        position: relative;
        z-index: 1; /* 画像を背景より手前に配置 */
    }

    .img_magazine1 {
        grid-area: img1;
        width: 65%;
        margin-left: 0;
        justify-self: start;
    }

    .img_magazine2 {
        grid-area: img2;
        width: 55%;
        margin-left: auto; /* 右に寄せる */
        margin-top: -150px;
        justify-self: end;
    }

    .img_magazine3 {
        grid-area: img3;
        width: 60%;
        margin-left: 0;
        margin-top: -100px;
        justify-self: start;
    }

    .magazine_content img {
        height: auto;
        display: block;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
    }
}


/* --- スマーティ矯正：写真配置の最終調整 --- */

@media (min-width: 768px) {
    /* 親要素の高さと幅を固定 */
    .double_image_v {
        position: relative;
        width: 100%;
        min-height: 550px; /* 画像2枚分が収まる高さ */
        display: block !important;
    }

    /* 1枚目：左上に配置（青いバナー） */
    .img_smarty_main {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 80% !important; /* スクリーンショットのサイズ感に調整 */
        z-index: 3;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    /* 2枚目：右下に配置（赤いミッキーの箱） */
    .img_smarty_sub {
        position: absolute !important;
        bottom: 0;
        right: 0;
        width: 65% !important; /* メインより一回り小さく */
        z-index: 2;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    /* 背景のピンク水彩画：全体をカバーするように広げる */
    .smarty_item .photo_bg_frame {
        position: absolute;
        width: 100%;
        height: 80%;
        top: 10%;
        left: 0;
        z-index: 1;
        background-size: contain;
    }
}

/* --- モバイル版：2枚を同じ大きさで中央に縦並び --- */
@media (max-width: 767px) {
    .double_image_v {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* 中央寄せ */
        gap: 20px;
        width: 100%;
    }

    .img_smarty_main, 
    .img_smarty_sub {
        /* 2つの大きさを揃える */
        width: 90% !important; 
        max-width: 350px; /* 大きくなりすぎないよう制限 */
        height: auto;
        position: static !important; /* PC版のabsoluteを解除 */
        margin: 0 auto !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
}

/*======================================================
 モバイル版スタイル (max-width: 767px)
======================================================*/
@media (max-width: 767px) {
    .magazine_section {
        padding: 60px 20px;
        position: relative; /* 疑似要素の基準点 */
        overflow: hidden;   /* ★ 必須: 画像がブロック外に漏れるのを防ぐ */
        z-index: 10;        /* セクション自体を前面に */
        
        /* セクション本体から top, left, width, height, background-image, opacity, z-index: -1 を全て削除！ */
    }
    .magazine_header {
        margin-bottom: 40px;
    }

    .h2-title {
        font-size: 2em;
    }

    .magazine_content {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .magazine_content img {
        width: 80%;
        max-width: 400px;
    }
}


/*======================================================
 PC版スタイル (min-width: 768px)
======================================================*/
@media (min-width: 768px) {
    .access_section {
        padding: 100px 0;
        background-color: #fff;
        position: relative;
        overflow: hidden;
    }

    /* 背景の半透明な装飾 */
    .access_section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://www.tanaka.or.jp/mouthpiece/wp-content/uploads/2025/10/32754086_s.jpg');
        background-size: cover;
        background-position: center;
        opacity: 0.3; /* 透明度を調整 */
        z-index: 0;
    }

    .access_header {
        text-align: center;
        margin-bottom: 60px;
        position: relative;
        z-index: 1;
    }
    
    .h2-title {
        font-size: 2.5em;
        font-weight: 700;
        color: #4C4D82;
        margin-bottom: 0;
    }

    .h2-sub-title {
        display: block;
        font-family: 'Times New Roman', serif;
        font-style: italic;
        color: #DEAEAE;
        font-size: 1.2em;
        margin-top: 5px;
    }

    .access_content {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        gap: 40px;
        position: relative;
        z-index: 1;
    }

    .access_map {
        width: 100%;
        height: 450px; /* マップの高さ */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        overflow: hidden;
    }
    
    .access_subheader {
        text-align: center;
        font-size: 1.5em;
        font-weight: bold;
        color: #555;
        margin-top: 20px;
        margin-bottom: 20px;
         font-family: serif;
    }

    .access_grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .access_item {
        background-color:white;
        padding: 30px;
        border-radius: 5px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        border: 1px solid #ddd;
        position: relative;
        text-align: center;
    }

    .access_item span {
        font-weight: bold;
        font-size: 1.1em;
        color: #4C4D82;
        display: block;
        margin-bottom: 15px;
        font-family: serif;
    }

    .access_item p {
        font-size: 0.9em;
        line-height: 1.6;
        color: #555;
		text-align:left;
		align-items:left;
    }
    
    .access_icon {
        width: 50px;
        height: auto;
        margin-top: 20px;
    }

    .access_item--full {
        grid-column: 1 / -1; /* グリッド全体を占有 */
        text-align: center;
    }
}

/*======================================================
 モバイル版スタイル (max-width: 767px)
======================================================*/
/*======================================================
 モバイル版スタイル (max-width: 767px)
======================================================*/
@media (max-width: 767px) {
    .access_section {
        padding: 60px 20px;
        background-color: #fff;
        position: relative; /* 背景の疑似要素のためにposition: relative;が必要 */
        overflow: hidden; /* 背景がはみ出さないように */
    }

    /* 背景の半透明な装飾をモバイル版でも表示 */
    .access_section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://www.tanaka.or.jp/mouthpiece/wp-content/uploads/2025/10/32754086_s.jpg'); /* デスクトップ版と同じ背景画像 */
        background-size: cover; /* 画面全体を覆う */
        background-position: center; /* 中央に配置 */
        opacity: 0.4; /* デスクトップ版より少し透明度を高くして、コンテンツを際立たせる */
        z-index: 0; /* コンテンツの背面に配置 */
        display: block; /* 非表示を解除 */
    }

    .access_header {
        margin-bottom: 40px;
        position: relative; /* コンテンツが背景より手前に来るように */
        z-index: 1;
    }
    
    .h2-title {
        font-size: 2em;
    }
    
    .access_content {
        display: flex;
        flex-direction: column;
        gap: 40px;
        position: relative; /* コンテンツが背景より手前に来るように */
        z-index: 1;
    }

    .access_map {
        width: 100%;
        height: 300px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        overflow: hidden;
    }

    .access_subheader {
        font-size: 1.2em;
        margin-top: 0;
        margin-bottom: 0;
        font-family: serif;
    }
    
    .access_grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .access_item {
        background-color:white;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        border: 1px solid #ddd;
        position: relative;
        text-align: center;
        margin-bottom: 0;
    }

    .access_item span {
        font-weight: bold;
        font-size: 1em;
        color: #4C4D82;
        display: block;
        margin-bottom: 10px;
        font-family: serif;
    }
    
    .access_item p {
        font-size: 0.8em;
        line-height: 1.6;
        color: #555;
    }
    
    .access_icon {
        width: 40px;
        height: auto;
        margin-top: 15px;
    }

    .access_item--full {
        padding: 20px;
    }
}

/*======================================================
 PC版スタイル (min-width: 768px)
======================================================*/
@media (min-width: 768px) {
    .free_reservation_section {
        padding: 100px 0;
        text-align: center;
        background-color: #fff;
    }
    .free_reservation_header {
        margin-bottom: 60px;
    }
    .h2-title {
        font-size: 2.5em;
        font-weight: 700;
        color: #4C4D82;
        margin-bottom: 0;
    }
    .h2-sub-title {
        display: block;
        font-family: 'Times New Roman', serif;
        font-style: italic;
        color: #DEAEAE;
        font-size: 1.2em;
        margin-top: 5px;
    }
    .reservation-banner-wrap {
        max-width: 800px;
        margin: 0 auto;
    }
    .reservation-banner-link {
        display: block;
        line-height: 0;
    }
    .reservation-banner-img {
        max-width: 100%;
        height: auto;
        display: block;
        border-radius: 5px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
}

/*======================================================
 モバイル版スタイル (max-width: 767px)
======================================================*/
@media (max-width: 767px) {
    .free_reservation_section {
        padding: 60px 20px;
        text-align: center;
    }
    .free_reservation_header {
        margin-bottom: 40px;
    }
    .h2-title {
        font-size: 2em;
    }
    .reservation-banner-wrap {
        width: 100%;
        margin: 0 auto;
    }
    .reservation-banner-link {
        display: block;
        line-height: 0;
    }
    .reservation-banner-img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 5px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
}



/* Google Fontsのインポート */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Noto+Sans+JP:wght@400;700&display=swap');

/*======================================================
 PC版スタイル (min-width: 768px)
======================================================*/
@media (min-width: 768px) {
    .faq_section {
        padding: 100px 0;
        background-color: #fff;
        text-align: center;
    }
    .faq_header {
        margin-bottom: 60px;
    }
    .h2-title {
      font-family:"Noto serif",serif;
        font-size: 2.5em;
        font-weight: 700;
        color: #866F6F;
        margin-bottom: 0;
    }
    .h2-sub-title {
        display: block;
        font-family: 'Times New Roman', serif;
        font-style: italic;
        color: #DEAEAE;
        font-size: 1.2em;
        margin-top: 5px;
    }
    .faq_container {
        max-width: 800px;
        margin: 0 auto;
        padding: 0 20px;
    }
    .faq_item {
        background-color: #f9f9f9;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        margin-bottom: 40px;
        position: relative;
        text-align: left;
    }
    .faq_item:not(:last-child)::after {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background-color: #DEAEAE;
        margin-top: 30px;
    }
    .faq_question_title {
        font-family: 'Great Vibes', cursive; /* 筆記体フォントをGreat Vibesに変更 */
        font-size: 2.5em;
        font-weight: 400; /* 太さを通常に戻す */
        color: #DEAEAE;
        display: block;
        font-family:'Times New Roman', serif;
    }
    .faq_answer_title {
        font-family: 'Great Vibes', cursive; /* 筆記体フォントをGreat Vibesに変更 */
        font-size: 2.5em;
        font-weight: 400; /* 太さを通常に戻す */
        color: #4C4D82;
        display: block;
        font-family:'Times New Roman', serif;
    }



    .faq_question_text {
    	 font-family: 'Noto Sans JP', sans-serif ;
        font-size: 1.1em;
		font-weight:normal;
        color: #866F6F;
        margin-top: 5px;
        margin-bottom: 20px;
    }
    .faq_answer_text {
      	 font-family: 'Noto Sans JP', sans-serif ;
        font-size: 1.1em;
        line-height: 1.6;
        color: #866F6F;
        margin-top: 5px;
    }
}

/*======================================================
 モバイル版スタイル (max-width: 767px)
======================================================*/
@media (max-width: 767px) {
    .faq_section {
        padding: 60px 20px;
        text-align: center;
    }
    .faq_header {
        margin-bottom: 40px;
    }
    .h2-title {
        font-size: 2em;
    }
    .faq_container {
        padding: 0;
    }
    .faq_item {
        background-color: #f9f9f9;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        margin-bottom: 30px;
        position: relative;
        text-align: left;
    }
    .faq_item:not(:last-child)::after {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background-color: #DEAEAE;
        margin-top: 20px;
    }
    .faq_question_title {
        font-family: 'Great Vibes', cursive; /* 筆記体フォントをGreat Vibesに変更 */
        font-size: 2em;
        font-weight: 400; /* 太さを通常に戻す */
        color: #DEAEAE;
        display: block;
         font-family:'Times New Roman', serif;
    }

    .faq_answer_title {
        font-family: 'Great Vibes', cursive; /* 筆記体フォントをGreat Vibesに変更 */
        font-size: 2em;
        font-weight: 400; /* 太さを通常に戻す */
        color: #4C4D82;
        display: block;
         font-family:'Times New Roman', serif;
    }




    .faq_question_text {
        font-family:serif;
        font-size: 0.9em;
        color: #866F6F;
        margin-top: 5px;
        margin-bottom: 15px;
				font-weight:normal;
    }
    .faq_answer_text {
        font-family:serif;
        font-size: 0.9em;
        line-height: 1.6;
        color: #555;
        margin-top: 5px;
    }
}

/*======================================================
 PC版スタイル (min-width: 768px)
======================================================*/
/*======================================================
 PC版スタイル (min-width: 768px)
======================================================*/
@media (min-width: 768px) {
    .info_section {
        padding: 100px 50px;
        background-color: #f8f8f8;
    }
    .info_logo_wrap {
        text-align: center;
        margin-bottom: 60px;
    }
    .info_logo {
        width: 300px;
        height: auto;
    }
    .information_container {
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-start; /* これで高さをコンテンツに合わせます */
        gap: 60px;
    }
    .info_calendar_wrap {
        flex: 0 0 45%;
        background-color: #fff;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
    }
    .info_details_wrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        padding: 20px; /* パディングを20pxに減らしました */
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }
    /* カレンダーヘッダー */
    .calendar_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
    }
    #year_month_label {
        font-size: 1.5rem;
        font-weight: bold;
        color: #4C4D82;
    }
    .nav_buttons button {
        background-color: transparent;
        border: none;
        cursor: pointer;
        font-size: 1.1em;
        color: #DEAEAE;
        padding: 0 5px;
    }
    /* カレンダー本体 */
    #calendar_body {
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #calendar_body table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }
    #calendar_body th {
        font-weight: normal;
        font-size: 0.9em;
        padding: 10px 0;
        color: #888;
    }
    #calendar_body td {
        font-size: 1rem;
        padding: 12px 0;
        text-align: center;
        border: none;
    }
    /* カレンダー凡例 */
    .calendar_legend {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 20px;
    }
    .legend_item {
        display: flex;
        align-items: center;
        font-size: 0.8em;
    }
    .legend_dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 5px;
    }
    .legend_dot.closed { background-color: #DEAEAE; }
    .legend_dot.am { background-color: #f6d1b2; }
    .legend_dot.pm { background-color: #b2d1f6; }
    .legend_dot.change { background-color: #b2f6d1; }
    
    /* 診療時間表とアクセス情報 */
    .info_title {
        font-size: 1.5em;
        font-weight: bold;
        color: #4C4D82;
        border-bottom: 2px solid #DEAEAE;
        padding-bottom: 5px;
        margin-bottom: 20px; /* マージンを調整 */
    }
    .schedule_table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
    }
    .schedule_table th {
        background: linear-gradient(to right, #c8a2ff, #e6ccff);
        color: #fff;
        font-weight: bold;
        padding: 10px 8px; /* パディングを調整 */
        border: none;
        border-bottom: 1px solid #eee;
        text-align: center;
    }
    .schedule_table td {
        padding: 10px 8px; /* パディングを調整 */
        text-align: center;
        border: none;
        border-bottom: 1px solid #eee;
        font-size: 0.9em;
    }
    .schedule_table tbody tr:last-child td {
        border-bottom: none;
    }
    .note {
        font-size: 0.8em;
        color: #555;
        margin-bottom: 25px; /* マージンを調整 */
        text-align: right;
    }
    .info_access_list {
        display: flex;
        flex-direction: column;
        gap: 15px; /* ギャップを調整 */
    }
    .info_access_item {
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 15px; /* パディングを調整 */
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }
    .info_access_item p {
        margin: 0;
    }
    .access_icon {
        width: 40px;
        height: auto;
        margin-right: 15px;
    }
}

/*======================================================
 モバイル版スタイル (max-width: 767px)
======================================================*/
/*======================================================
 PC版スタイル (min-width: 768px)
======================================================*/
@media (min-width: 768px) {
    .info_section {
        padding: 100px 50px;
        background-image: linear-gradient(
            to bottom,  /* 方向: 上から下へ */
            #FDFEFF 0%, 
            #F6F9FF 25%, 
            #FFF6FD 50%, 
            #FDEFFF 75%, 
            #E9E0FF 100%
        );
    }
    .info_logo_wrap {
        text-align: center;
        margin-bottom: 60px;
    }
    .info_logo {
        width: 300px;
        height: auto;
    }
    .information_container {
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 60px;
    }
    .info_calendar_wrap {
        flex: 0 0 45%;
        background-color: #fff;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
    }
    .info_details_wrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }
    /* カレンダーヘッダー */
    .calendar_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
    }
    #year_month_label {
        font-size: 1.5rem;
        font-weight: bold;
        color: #4C4D82;
        font-family: serif;
    }
    .nav_buttons button {
        background-color: transparent;
        border: none;
        cursor: pointer;
        font-size: 1.1em;
        color: #DEAEAE;
        padding: 0 5px;
    }
    /* カレンダー本体 */
    #calendar_body {
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #calendar_body table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }
    #calendar_body th {
        font-weight: normal;
        font-size: 0.9em;
        padding: 10px 0;
        color: #888;
		position: relative;
    }
    #calendar_body td {
        font-size: 1rem;
        padding: 12px 0;
        text-align: center;
        border: none;
    }
    /* カレンダー凡例 */
    .calendar_legend {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 20px;
    }
    .legend_item {
        display: flex;
        align-items: center;
        font-size: 0.8em;
    }
    .legend_dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 5px;
    }
    .legend_dot.closed { background-color: #DEAEAE; }
    .legend_dot.am { background-color: #f6d1b2; }
    .legend_dot.pm { background-color: #b2d1f6; }
    .legend_dot.change { background-color: #b2f6d1; }
    
    /* 診療時間表とアクセス情報 */
    .info_title {
        font-size: 1.5em;
        font-weight: bold;
        color: #4C4D82;
        border-bottom: 2px solid #DEAEAE;
        padding-bottom: 5px;
        margin-bottom: 20px;
        font-family: serif;
    }
    .schedule_table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
    }
    .schedule_table th {
        background: linear-gradient(to right, #c8a2ff, #e6ccff);
        color: #fff;
        font-weight: bold;
        padding: 10px 8px;
        border: none;
        border-bottom: 1px solid #eee;
        text-align: center;
        font-family: serif;
		font-family:serif,"Noto sans jp";
    }
    .schedule_table td {
        padding: 10px 8px;
        text-align: center;
        border: none;
        border-bottom: 1px solid #eee;
        font-size: 0.9em;
      font-family:serif,"Noto sans jp";
    }
    .schedule_table tbody tr:last-child td {
        border-bottom: none;
    }
    .note {
        font-size: 0.8em;
        color: #555;
        margin-bottom: 25px;
        text-align: right;
          font-family: 'Noto Sans JP', sans-serif ;
    }
    .info_access_list {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .info_access_item {
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }
    .info_access_item p {
        margin: 0;
      font-family: 'Noto Sans JP', sans-serif ;
    }
    .access_icon {
        width: 40px;
        height: auto;
        margin-right: 15px;
    }
	/* カレンダー本体 */
#calendar_body th {
    font-weight: normal;
    font-size: 0.9em;
    padding: 10px 0;
    color: #888;
}

/* ★ 追記: 日曜日の曜日に色を適用 (カレンダーの最初の列) ★ */
#calendar_body th:first-child {
    color: #DEAEAE; /* 凡例の休診日ドットの色を使用 */
}
	/* ★ 追記: 日曜日の日付けの色を休診日の色に ★ */
#calendar_body td.closed-day {
    color: #DEAEAE; /* 凡例の休診日ドットの色を使用 */
}
	/* ★ 追記: 日曜日の曜日に背景色と文字色を適用 ★ */
    #calendar_body th:first-child {
/*         color: #DEAEAE; /* 濃いピンクの文字色 */
    }
    /* ★ 追記: 日曜日の曜日の上に丸を配置する（擬似要素） ★ */
    #calendar_body th:first-child:before {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #DEAEAE; /* 休診日ドットの色 */
        position: absolute;
        top: 5px; /* 上からの位置を調整 */
        left: 50%;
        transform: translateX(-50%);
    }
    
    #calendar_body td {
        font-size: 1rem;
        padding: 12px 0;
        text-align: center;
        border: none;
        /* ★ 追記: 擬似要素の位置の基準 ★ */
        position: relative;
    }

    /* ★ 追記: 日曜・祝日の日付けセルに背景色と文字色を適用 ★ */
    #calendar_body td.closed-day,
    #calendar_body td.holiday { /* holidayは手動でクラスを追加する場合 */
        color: #DEAEAE;
/*         background-color: #FFF6FD; */
        font-weight: bold;
    }
    
    /* ★ 追記: 日曜・祝日の日付けの上に丸を配置する（擬似要素） ★ */
    #calendar_body td.closed-day:before,
    #calendar_body td.holiday:before {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #DEAEAE; /* 休診日ドットの色 */
        position: absolute;
        top: 3px; /* 日付けの上の位置を調整 */
        left: 50%;
        transform: translateX(-50%);
    }
}

/*======================================================
 モバイル版スタイル (max-width: 767px)
======================================================*/
@media (max-width: 767px) {
    .info_section {
        padding: 40px 10px;
              /* ★ グラデーションの追加 */
        background-image: linear-gradient(
            to bottom,  /* 方向: 上から下へ */
            #FDFEFF 0%, 
            #F6F9FF 25%, 
            #FFF6FD 50%, 
            #FDEFFF 75%, 
            #E9E0FF 100%
        );
    }
    .info_logo_wrap {
        text-align: center;
        margin-bottom: 30px;
    }
    .info_logo {
        width: 200px;
        height: auto;
    }
    .information_container {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .info_calendar_wrap,
    .info_details_wrap {
        width: auto;
        padding: 20px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        background-color: #fff;
        border-radius: 10px;
    }
    /* カレンダーの色とフォントを修正 */
    .calendar_header {
        margin-bottom: 15px;
    }
    #year_month_label {
        font-size: 1.2rem;
        color: #4C4D82;
        font-family: serif;
    }
    .nav_buttons button {
        font-size: 1em;
        color: #DEAEAE;
    }
    #calendar_body th {
        color: #888;
		position: relative;
    }
    #calendar_body td {
        font-size: 0.8rem;
        padding: 8px 0;
		text-align: center;
    }
    .calendar_legend {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px;
        margin-top: 15px;
    }
    .legend_item {
        display: flex; /* 追加 */
        align-items: center; /* 追加 */
        font-size: 0.7em;
    }
    /* 凡例のドットのスタイルを追記 */
    .legend_dot {
        display: inline-block;
        width: 8px; /* サイズを調整 */
        height: 8px; /* サイズを調整 */
        border-radius: 50%;
        margin-right: 5px;
    }
    .legend_dot.closed { background-color: #DEAEAE; }
    .legend_dot.am { background-color: #f6d1b2; }
    .legend_dot.pm { background-color: #b2d1f6; }
    .legend_dot.change { background-color: #b2f6d1; }

    /* 診療時間表とアクセス情報のスタイルを修正 */
    .info_title {
        font-size: 1.2em;
        font-weight: bold;
        color: #4C4D82;
        border-bottom: 2px solid #DEAEAE;
        padding-bottom: 5px;
        margin-bottom: 15px;
        font-family: serif;
    }
    .schedule_table th {
        background: linear-gradient(to right, #c8a2ff, #e6ccff);
        color: #fff;
		font-family:serif,"Noto sans jp";
    }
    .schedule_table th,
    .schedule_table td {
        padding: 8px 5px;
        font-size: 0.7em;
		font-family:serif,"Noto sans jp";
    }
    .note {
        font-size: 0.7em;
        margin-bottom: 20px;
        text-align: left;
		font-family:serif,"Noto sans jp";
    }
    .info_access_list {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .info_access_item {
        /* padding: 15px; */
        gap: 10px;
    }
    .access_icon {
        width: 30px;
        height: auto;
        margin-right: 10px;
    }
    .info_access_item p {
        font-size: 0.8em;
        font-family: serif;
    }
    .nav_buttons button {
    background-color: transparent; /* 背景色を透明にします */
    border: none; /* 枠線をなくします */
    cursor: pointer;
    font-size: 1.1em;
    color: #DEAEAE; /* 色を変更します */
    padding: 0 5px;
}
	/* モバイル版 (325行目付近) */
#calendar_body th {
    color: #888;
}

/* ★ 追記: 日曜日の曜日に色を適用 (カレンダーの最初の列) ★ */
#calendar_body th:first-child {
    color: #DEAEAE; /* 凡例の休診日ドットの色を使用 */
}
	/* ★ 追記: 日曜日の日付けの色を休診日の色に ★ */
#calendar_body td.closed-day {
    color: #DEAEAE; /* 凡例の休診日ドットの色を使用 */
}
	/* ★ 追記: 日曜日の曜日に背景色と文字色を適用 ★ */
    #calendar_body th:first-child {
        color: #DEAEAE;
    }
    /* ★ 追記: 日曜日の曜日の上に丸を配置する（擬似要素） ★ */
    #calendar_body th:first-child:before {
        content: '';
        display: block;
        width: 5px; /* モバイル版用に小さく */
        height: 5px;
        border-radius: 50%;
/*         background-color: #DEAEAE; */
        position: absolute;
        top: -5px; /* 上からの位置を調整 */
        left: 50%;
        transform: translateX(-50%);
    }
    
    #calendar_body td {
        font-size: 0.8rem;
        padding: 8px 0;
        text-align: center;
        /* ★ 追記: 擬似要素の位置の基準 ★ */
        position: relative;
    }
    
    /* ★ 追記: 日曜・祝日の日付けセルに背景色と文字色を適用 ★ */
    #calendar_body td.closed-day,
    #calendar_body td.holiday { /* holidayは手動でクラスを追加する場合 */
        color: #DEAEAE;
        background-color: #FFF6FD;
        font-weight: bold;
    }
    
    /* ★ 追記: 日曜・祝日の日付けの上に丸を配置する（擬似要素） ★ */
    #calendar_body td.closed-day:before,
    #calendar_body td.holiday:before {
        content: '';
        display: block;
        width: 5px; /* モバイル版用に小さく */
        height: 5px;
        border-radius: 50%;
        background-color: #DEAEAE; /* 休診日ドットの色 */
        position: absolute;
        top: 1px; /* 日付けの上の位置を調整 */
        left: 50%;
        transform: translateX(-50%);
    }
}
/*------------------- メニュー（共通） -------------------*/
.nav {
  position: -webkit-sticky; /* Safari対応 */
  position: sticky;         /* スクロール固定 */
  top: 0;                   /* 画面最上部で止まる */
  width: 100%;
  z-index: 10000;           /* 他の要素より上に表示 */
  background: #fff;         /* 固定時に下が透けないよう白背景 */
  border-bottom: 1px solid #eee;
}

/* ★ スクロールした時にJSで付与される固定用クラス */
.nav.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav-list {
  display: flex;
  /* ★ 項目を中央に寄せ、バランスよく配置 */
  justify-content: center; 
  flex-wrap: nowrap;        /* 1行に強制 */
  padding: 0;
  margin: 0 auto;
  width: 100%;
  /* ★ 1400pxだと広すぎて端に寄るので、1200pxに絞って左右に余白を作る */
  max-width: 1200px;        
  box-sizing: border-box;
  list-style: none;
  align-items: center;
}

/* 項目：1行に収めるためflex:1に変更 */
.nav-item { 
  position: relative; 
  text-align: center; 
flex: 0 0 auto;               /* ★均等な幅で1行に並べる */
}

.nav-item a {
  text-decoration: none;
  color: #866F6F;
  font-size: 13px;           /* ★15pxだと10項目は入りきらないため13pxに微調整 */
  font-weight: normal;
  display: block;
padding: 20px 12px;     /* ★左右の余白（12px）で項目間の距離を作る */
  white-space: nowrap;       /* ★文字を絶対に改行させない */
  transition: color 0.3s ease;
  line-height: 1.5;
  font-family: "Noto sans JP", serif;
  min-width: auto;           /* min-widthを解除して詰める */
}

/* ドロップダウン（PC用） */
/* 元の設定を維持 */
.has-dropdown .dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
  border-radius: 8px;
  list-style: none;
  padding: 10px 0;
  margin: 0;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity .4s ease, transform .4s ease;
  z-index: 10;
  line-height: 1.6;
}

/* ホバーでもドロップダウンが出るように追加（利便性のため） */
.has-dropdown:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.dropdown li { padding: 12px 0; }
.dropdown li a {
  text-decoration: none;
  color: #666;
  display: block;
  font-size: 14px;
  transition: background .3s ease, padding-left .3s ease;
  padding: 10px 0;
  white-space: normal; /* ドロップダウン内は改行を許可 */
}
.dropdown li a:hover { background: #f4f4f4; padding-left: 25px; }
.has-dropdown.open .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ハンバーガー（PCでは非表示） */
.menu-toggle { display: none; }

/* ---------- モバイル専用（一切変更なし） ---------- */
@media (max-width: 768px) {
  .nav { position: relative; justify-content: space-between; padding: 0px 15px; border: none; }

  /* ハンバーガーを右上に固定 */
  .menu-toggle {
    display: inline-flex;
    position: fixed;
    top: 12px; right: 12px;
    z-index: 1001;
    font-size: 30px;
    background: #F2A9A9;
    color:white;
    border: none;
    padding: 4px 12px;
    cursor: pointer;
    align-items: center; justify-content: center;
    border-radius: 8px;
    color:black;
  }

  /* メニューは全画面オーバーレイ（初期は非表示） */
  .nav-list {
    position: fixed;
    inset: 0;
    height: 100dvh;
    background: #fff;
    display: none;
    flex-direction: column;
    padding: 80px 15px 20px;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 1000;
    align-items: center;
    flex-wrap: wrap; /* モバイルではwrapに戻す */
  }
  .nav-list.active { display: flex !important; }

  .nav-item { text-align: center; width: 100%; flex: none; }

  .nav-item a.active {
    color: #333333;
    background-color: rgba(74,144,226,.1);
    border-radius: 50%;
    padding: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 30px;
    height: 30px;
    transition: background-color .3s ease;
    white-space: nowrap;
  }
  .nav-item a.active:hover { background-color: rgba(74,144,226,.2); }

  .has-dropdown.open + .nav-item { margin-top: 20px; }
  .nav-list { padding-top: 60px; }

  body.nav-open {
    position: fixed;
    left: 0; right: 0;
    width: 100%;
    top: var(--scroll-y, 0);
    overflow: hidden;
  }
}

/* ---------- タブレット（一切変更なし） ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-list { gap: 15px; max-width: 100%; flex-wrap: wrap; }
  .nav-item a { font-size: 14px; padding: 6px 8px; }
}

/* --- 改行コントロール（PC・スマホ切り替え） --- */

/* 1. PC・タブレットでは改行を非表示（1行にする） */
.sp-br {
  display: none;
}

/* 2. スマホ（幅767px以下）の時だけ改行を有効にする */
@media (max-width: 767px) {
  .sp-br {
    display: block !important;
  }
}

html {
  scroll-behavior: smooth;
}