html, body {
  font-family: "A P-OTF Maru Antique+ ProN", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* --- FV（ファーストビュー）全体の枠組み --- */
.fv-wrapper {
  position: relative; /* 子要素の絶対配置の基準となる */
  width: 100%;
  max-width: 800px; /* PC版のコンテンツ幅に合わせて数値を調整してください */
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px; /* 必要に応じて背景の角を丸くする */
}

/* --- 背景画像 --- */
.fv-bg {
  width: 100%;
  height: auto;
  display: block;
}

/* --- テキスト画像を配置するコンテナ --- */
.fv-text-layer {
  position: absolute;
  top: 5%; /* 以前のコード通り12%の位置に戻しました */
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* 左右中央揃え */
  z-index: 2;
}

/* --- WebのデフォルトCSSによる画像の歪みを防ぐ --- */
.fv-text-layer img {
  max-width: none !important;
  display: block;
}

/* --- 上段テキスト（知っておこう！） --- */
.text-top {
  height: 55px; /* サイズを35pxに戻しました */
  margin-bottom: 5px; /* 下の行との余白 */
}

/* --- 下段テキストを横並びにする --- */
.fv-main-text-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap !important; /* 重要：文字を強制的に横並びにし、絶対に改行させない */
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center;
  gap: 5px; /* 文字画像の間のすき間 */
}

/* ピンクの大きい文字（妊娠中、感染症） */
.text-large {
  height: 70px; /* サイズを60pxに戻しました */
}

/* グレーの少し小さい文字（に気をつけたい） */
.text-medium {
  height: 55px; /* サイズを45pxに戻しました */
  margin-top: 20px;
}
/* --- FV（ファーストビュー）全体の枠組み --- */

/* FV内のテキストの他のCSSは以前のまま保持します */


/* =========================================
   イントロダクション部分（ファーストビューの下）
========================================= */
.intro-section {
  width: 100%;
  max-width: 839px; 
  margin: -160px auto 0 auto; /* FVに重ねるため、パラメータをそのまま保持します */
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
}

/* 青いグリッドの背景フレーム */
.intro-frame {
  width: 90%; /* Giới hạn chiều rộng để bằng với ảnh Top */
  max-width: 640px; /* Giảm từ 800px xuống 640px */
  
  background-image: url("../image/pc/pc1_fv_introduction/pc_introduction_frame.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  
  padding: 25px 20px; /* Thu nhỏ padding cho cân đối */
  box-sizing: border-box;

  font-family: 'A P-OTF Maru Antique+ ProN', "Hiragino Maru Gothic ProN", sans-serif;
  color: #424242; 
  
  display: flex;
  flex-direction: column;
  align-items: center; 
}

/* --- リード文 --- */
.intro-lead-text {
  width: 100%;
  font-size: 18px; /* Giảm từ 24px xuống 18px */
  line-height: 32px; /* Giảm từ 40px xuống 32px */
  font-weight: normal; 
  margin-top: 0;
  margin-bottom: 25px; /* Giảm từ 40px xuống 25px */
  letter-spacing: 0;
}

/* --- 医師プロフィールのカラム分割フレーム --- */
.intro-doctor-profile {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 20px; /* Giảm khoảng cách giữa ảnh và chữ (từ 30px xuống 20px) */
}

/* 医師の画像 */
.doctor-icon {
  margin: 0;
  flex-shrink: 0;
  width: 160px; /* Giảm kích thước ảnh bác sĩ từ 250px xuống 160px */
}

.doctor-icon img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 50%;
}

/* 医師のテキスト情報カラム */
.doctor-info {
  flex-grow: 1;
}

/* 名前と役職 */
.doctor-name {
  width: 100%;
  font-size: 15px; /* Giảm từ 20px xuống 15px */
  line-height: 24px; /* Giảm line-height cho gọn lại */
  font-weight: bold; /* Thêm chút in đậm để tên bác sĩ rõ ràng hơn khi thu nhỏ */
  margin-top: 0;
  margin-bottom: 10px; /* Giảm khoảng cách */
  letter-spacing: 0;
}

/* 医師の略歴 */
.doctor-bio {
  width: 100%;
  font-size: 13px; /* Giảm từ 16.5px xuống 13px */
  line-height: 22px; /* Giảm line-height */
  font-weight: normal; 
  margin: 0;
  letter-spacing: 0;
  text-align: justify; 
}
/* =========================================
   目次部分（INDEX SECTION）
========================================= */

/* Index部分全体を囲むフレーム */
.index-section-wrapper {
  width: 100%;
  max-width: 600px; /* 上の青いフレームと幅を同期させる */
  margin: 50px auto 0 auto; /* 上のブロックからちょうど50px離す */
}

/* タイトル画像（pc_index.png） */
.index-title-image {
  display: block;
  max-width: 70%;
  height: auto;
  margin: 0 auto 30px auto; /* 下のリストから30px離す */
}

/* =========================================
   リンクのリスト（LIST ITEMS）
========================================= */

/* 外側を囲むulタグ */
.index-link-list {
  list-style-type: none; /* ulのデフォルトの黒丸を削除 */
  padding: 0;
  margin: 0;
  border-top: 1px solid #e5e5e5; /* 一番上の細いグレーの線 */
}

/* 各li行 */
.index-link-list li {
  border-bottom: 1px solid #e5e5e5; /* 行を区切る細いグレーの線 */
}

/* aタグ（クリック可能なエリア） */
.index-link-list a {
  display: flex; /* Flexboxを使用してアイコンとテキストを横並びにする */
  align-items: center; /* 縦軸でアイコンとテキストを中央揃えにする */
  padding: 25px 20px; /* クリックしやすいように広めの余白（padding）を作成 */
  text-decoration: none; /* リンクの下線を削除 */
  color: #424242; /* ダークグレーの文字色 */
  transition: background-color 0.2s ease; /* ホバー時のスムーズな色変化のトランジション */
}

/* マウスホバー時のエフェクト */
.index-link-list a:hover {
  background-color: #f9f9f9; /* マウスを乗せたときに背景色を少し明るくする */
}

/* ハートアイコン */
.heart-icon {
  width: 45px; /* アイコンのサイズ（必要に応じて増減可能） */
  height: auto;
  flex-shrink: 0; /* テキストが長すぎるときにアイコンが歪むのを防ぐ */
  margin-right: 30px; /* アイコンからテキストまでの間隔 */
}

/* リスト内のテキスト */
.index-text {
  font-size: 26px; /* フォントサイズ */
  line-height: 1.6; /* （改行された場合の）2行のテキスト間の間隔 */
  font-weight: bold; /* デザインに合わせるため文字を太字にする */
  font-family: "A P-OTF Maru Antique+ ProN", "Meiryo", sans-serif; /* 読みやすい標準フォント */
}
.section-check01 {
  max-width: 768px;
  margin: 80px auto;
  position: relative;
  background-color: #ffffff; 
  text-align: center;
  padding-bottom: 20px;
}

.bg-yellow-curve {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%; /* Bao phủ 100% chiều cao nội dung + dài thêm 100px */
  object-fit: fill; /* Ép ảnh giãn xuống dưới */
  z-index: 0; 
}

.check-content {
  position: relative;
  z-index: 1; 
}

.check-icon {
  position: relative;
  top: -25px; /* もっと近づけたい場合は、話し合った通り margin-top: -30px に変更できます */
  margin-bottom: 5px;
}

/* PC向けのcheck 01アイコン画像のサイズを大きくする */
.check-icon img {
  width: 200px; 
  height: auto;
  display: inline-block;
}
.check-heading {
  margin-bottom: 5px;
  padding: 0 15px; 
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* オレンジ色のテキスト - PCサイズ */
.check-heading .text-orange {
  color: #FFA011; 
  font-size: 36px !important; 
  font-weight: bold;
  border-bottom: 4px dotted #FFA011; 
  padding-bottom: 5px; 
  
  /* ここを修正：10pxを0または負の値（-10px）に変更して上に寄せる */
  margin: -10px 0 5px 0; 
  
  line-height: 1.4;
}
/* 黒色のテキスト - PCサイズ */
.check-heading .text-dark {
  color: #424242;
  font-size: 40px !important; 
  font-weight: bold;
  border-bottom: 4px dotted #424242; /* PC向けの太いドットの枠線 */
  padding-bottom: 5px;
  margin: 0 0 10px 0; 
  letter-spacing: 2px; 
}

/* 小さい注釈テキスト - PCサイズ */
.check-heading .text-note {
  color: #424242;
  font-size: 20px !important; 
  line-height: 1.6;
  margin: 0;
  text-align: center; 
}
/* --- 1. 吹き出し（Hukidashi） --- */
.info-bubble {
  text-align: center;
  position: relative;
  z-index: 10; /* 【重要】オレンジの枠より確実に上に表示させるため、数値を大きくします */
  top: 20px;
  margin-bottom: -40px; /* オレンジの枠に少し被せるためのマイナスマージン */
}

.info-bubble img {
  width: 320px; 
  height: auto;
  display: inline-block;
  position: relative;
}

/* --- 2. オレンジの枠 --- */
.info-orange-frame {
  position: relative;
  z-index: 2; 
  /* 90%に増加：オレンジ色のフレームが10%広くなります */
  width: 90%; 
  margin: 0 auto; 
}

.bg-orange-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; 
}

.info-frame-content {
  position: relative;
  z-index: 1; 
  /* 再調整：両側のpaddingを少し広げました（25pxから30pxへ） 
     順序：上(45px) - 右(30px) - 下(30px) - 左(30px) */
  padding: 45px 30px 30px 30px; 
}

/* 内側の白いボックス */
.info-white-box {
  background-color: #ffffff;
  text-align: center;
  /* バランスを取るため、白いボックスのpaddingを少し増やしました */
  padding: 18px 15px; 
  margin-bottom: 25px; 
}

/* 白いボックス内のオレンジ色のテキスト */
.info-white-box .orange-text {
  font-family: "A P-OTF Maru Antique+ ProN", "Hiragino Maru Gothic ProN", "Yu Rounded", sans-serif;
  color: #FF9702; 
  font-weight: bold;
  margin: 0;
  line-height: 1.5;
}

/* 白いボックス内のテキスト */
.info-white-box .text-small {
  font-size: 30px; /* フォントサイズを少し大きくしました */
  font-family: "A P-OTF Maru Antique+ ProN", "Hiragino Maru Gothic ProN", "Yu Rounded", sans-serif;
}

.info-white-box .text-large {
  font-size: 30px; /* フォントサイズを少し大きくしました */
  font-family: "A P-OTF Maru Antique+ ProN", "Hiragino Maru Gothic ProN", "Yu Rounded", sans-serif;
}

/* 下の白いテキスト部分 */
.info-white-text p {
  color: #ffffff;
  font-size: 23px; /* 読みやすくするためフォントサイズを16pxに戻しました */
  line-height: 1.8; 
  margin: 0;
  text-align: left; 
}

/* --- 3. 下向き矢印 --- */
.info-arrow {
  position: absolute;
  bottom: -50px; 
  left: 50%; 
  transform: translateX(-50%); 
  z-index: 3; 
}

.info-arrow img {
  height: 100px; 
  width: auto;
  display: block;
}
/* 上に挿入される黄色いバナー */
.survey-banner {
  text-align: center;
  margin-top: 70px;
  margin-bottom: -30px; /* 必要に応じて白いカードを少し上に重ねる */
  position: relative;
  z-index: 2;
}

.survey-banner img {
  width: 500px; /* 黄色いバナーの幅を調整 */
  height: auto;
}

/* --- 角丸の白いカード --- */
.survey-white-card {
  background-color: #ffffff;
  width: 95%; /* 上のオレンジ色のボックスと同じ幅 */
  max-width: 640px;
  margin: 0 auto;
  border-radius: 30px; /* 4つの角を丸くする */
  padding: 50px 40px 60px 40px; /* 内側の余白（padding） */
  position: relative;
  z-index: 1;
  /* 白いカードを黄色い背景に目立たせるための軽いドロップシャドウを追加 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
}

/* --- 質問（Q）部分 --- */
.survey-question {
  display: flex; 
  align-items: flex-start; /* 下揃えではなく、縦方向の中央揃えにする */
  justify-content: center;
  gap: 30px; /* Qとテキストの間隔を減らして近づける */
  margin-bottom: 30px;
}

.survey-question .q-mark {
  color: #FFDE11; 
  font-size: 140px; /* Qの文字をさらに大きくする */
  font-weight:500;
  line-height: 1; /* 調整しやすくするため行高をリセット */
  font-family: "A P-OTF Maru Antique+ ProN", Arial, sans-serif; 
  /* 負のマージンを使用して、テキストブロックとバランスを取るためにQの文字を少し上に引っ張る */
  margin-top: -15px; 
}

.survey-question .q-text {
  /* メイン調整：テキストを左揃えにする */
  text-align: left; 
  
  color: #424242;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  line-height: 1.8; 
  font-family: "A P-OTF Maru Antique+ ProN", "Hiragino Maru Gothic ProN", sans-serif;
}

/* --- 各行のドットの下線 --- */
.survey-question .q-text .dotted-line {
  border-bottom: 4px dotted #424242; 
  padding-bottom: 2px;
  /* border-bottomがテキスト行全体に伸びるように、spanがブロックとして表示されることを確認する */
  display: inline-block; 
}
/* --- CMVの質問（長いテキスト）用の個別CSS --- */
.survey-question .q-text-blue {
  text-align: left; 
  color: #424242;
  font-size: 24px; /* ご要望のフォントサイズ */
  font-weight: 600;
  margin: 0;
  /* 30pxのテキストブロックをすっきり見せるため、line-heightを1.6に少し下げました */
  line-height: 1.6; 
  font-family: "A P-OTF Maru Antique+ ProN", "Hiragino Maru Gothic ProN", sans-serif;
}

/* --- CMV部分のドットの下線 --- */
.survey-question .q-text-blue .dotted-line {
  border-bottom: 4px dotted #424242; 
  padding-bottom: 2px;
  display: inline-block; 
}

/* --- Qマークを30pxのテキストとずれないように微調整 --- */
.survey-question .text-blue-q {
  /* Q.jpgの色とフォントを保持 */
  color: #47B2E3 !important;
  font-size: 140px;
  line-height: 0.7; /* 2行のテキストとバランスを取るため、Qマークを少し上に押し上げる */
  margin-top: 5px; 
  flex-shrink: 0;
}
/* --- グラフ部分 --- */
.survey-graph {
  text-align: center;
  margin-bottom: 40px;
}

.survey-graph img {
  width: 600px; /* 円グラフのサイズを調整 */
  height: auto;
}

/* 説明テキスト */
.survey-desc {
  color: #424242;
  font-size: 22px;
  line-height: 1.8;
  margin: 0 0 30px 0;
  font-weight: 500;
  font-family: "A P-OTF Maru Antique+ ProN", "Hiragino Maru Gothic ProN", sans-serif;
  text-align: left;
}

/* 横の区切り線 */
.survey-divider {
  border: none;
  border-top: 4px solid #D9D9D9; /* 薄いグレーの線 */
  margin: 40px 0;
}

/* --- コメント部分（Comment Box） --- */
.survey-comments {
  padding-left: 0; 
  margin-top: 50px; 
}

.comment-box {
  background-color: #FFDE11; 
  border-radius: 20px;
  position: relative;
  padding: 25px; 
  margin-bottom: 60px; 
}

/* 上に突き出たアバター画像 */
.comment-avatar {
  position: absolute;
  top: -30px; 
  left: 20px; 
  width: 180px; 
  height: auto;
  border-radius: 50%; 
}

/* 名前と白いラベルを囲む部分 */
.comment-header {
  display: flex;
  flex-direction: column; 
  align-items: flex-start; 
  gap: 8px; 
  
  /* 更新：画像から10px離すため、margin-left を165pxにする */
  margin-left: 200px; 
  margin-bottom: 20px; 
}

.comment-name {
  font-size: 25px; 
  font-weight: normal;
  color: #424242;
  font-family: "A P-OTF Maru Antique+ ProN", "Hiragino Maru Gothic ProN", sans-serif;
  line-height: 2;
}

/* 白いラベル（初産／妊娠後期） */
.comment-badge {
  background-color: #ffffff;
  color: #424242;
  font-size: 22px;
  padding: 8px 15px;
  border-radius: 20px; 
  font-weight: 500;
  display: inline-block;
}

/* コメントのテキスト部分 */
.comment-text {
  font-size: 22px;
  line-height: 1.6;
  color: #424242;
  margin: 0;
  font-weight: normal;
  font-family: "A P-OTF Maru Antique+ ProN", "Hiragino Maru Gothic ProN", sans-serif;
  text-align: left;
  left: 50px;
}
.comment-box:last-child {
  margin-bottom: 0; 
}
/* --- 関連記事 --- */
.related-articles-section {
  width: 80%; /* 上のブロックと幅を同期させる */
  max-width: 640px;
  margin: 60px auto 0;
  position: relative;
  z-index: 2;
}

/* --- タイトル --- */
.article-heading {
  text-align: center;
  margin-bottom: 40px;
  font-family: "A P-OTF Maru Antique+ ProN", "Hiragino Maru Gothic ProN", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.article-heading h3 {
  margin: 0;
  line-height: 1.6;
}

.article-heading .title-top {
  display: inline-block; /* 重要：枠線を文字の長さにぴったり合わせる */
  font-size: 32px;
  color: #424242;
  font-weight: 600;
  border-bottom: 4px dotted #424242; /* ここに濃いグレーのドットの下線があります */
  padding-bottom: 3px;
}

/* 下線付きのオレンジ色のテキスト */
.article-heading .text-orange {
  color: #FFA011;
  font-size: 32px;
}

/* 下の行の黒いテキスト */
.article-heading .title-bottom {
  display: inline-block;
  font-size: 32px;
  color: #424242;
  font-weight: 600;
  border-bottom: 4px dotted #424242; /* 濃いグレーの枠線 */
  padding-bottom: 3px;
  margin-top: 5px;
}

/* --- 外側のラッパー（上のフレームと揃えるために非常に重要） --- */
.related-articles-section {
  width: 90%; 
  /* 上のアンケートボックスのpaddingを補うため、max-widthを720pxに増やしました */
  max-width: 720px; 
  margin: 60px auto 0;
  position: relative;
  z-index: 2;
}

/* --- 記事リスト --- */
.article-list {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 記事カード間の間隔 */
  width: 100%; /* リストを外側のフレーム全体に広げる */
}

/* 白いカードの共通スタイル */
.article-card {
  background-color: #ffffff;
  border: 1px solid #E0E0E0; /* 薄いグレーの枠線 */
  border-radius: 8px; /* 非常に軽い角丸 */
  text-decoration: none; /* リンクのデフォルトの下線を削除 */
  display: block;
  position: relative;
  transition: opacity 0.3s ease; 
  
  width: 100%;
  box-sizing: border-box;

  /* --- ここから新規追加 --- */
  height: auto; /* テキストをすべて表示するために、フレームが自動的に下に伸びるようにする */
  min-height: 200px; /* フレームをより均一に見せるための最小高さの規定 */
  word-break: break-word; /* （特に長い単語や日本語の）文字が右端を突き抜けず、強制的に改行されるようにする */
  overflow-wrap: break-word;
}

.article-card:hover {
  opacity: 0.8; 
}

/* --- カード1（メイン記事） --- */
.card-main {
  padding: 15px;
  box-sizing: border-box; /* paddingによってカードが膨らまないようにする */
}

/* 外に突き出るNEWのリボン（設定値はそのまま保持） */
.badge-new {
  position: absolute;
  top: -40px; 
  left: -40px; 
  width: 230px;
  height: auto;
  z-index: 3;
}

.card-img-wrap {
  width: 100%; /* コンテナが十分な幅を持つようにする */
}

.card-img-wrap img {
  width: 90%; /* 画像を小さくするにはこの値を調整します（例：85%、80%） */
  height: auto;
  display: block; /* margin: 0 auto; を機能させるために必須 */
  margin: 10px auto; /* 水平方向の中央揃え */
}

.card-main .card-text {
  font-family: "A P-OTF Maru Antique+ ProN", "Hiragino Maru Gothic ProN", sans-serif;
  color: #424242;
  font-size: 22px;
  line-height: 1.6;
  margin: 15px 0 0 0;
  width: 95%; 
  margin: 15px auto 0 auto;
  text-align: left;
}

/* --- カード2 & 3（サブ記事 Coming Soon） --- */
.card-sub {
  display: flex; /* 横並びのレイアウト */
  align-items: center; /* 縦方向の中央揃え */
  padding: 15px;
  gap: 20px; /* グレーのボックス、テキスト、矢印の間隔 */
  box-sizing: border-box; /* paddingによってカードが膨らまないようにする */
}

/* グレーのComing Soonボックス */
.coming-soon-box {
  background-color: #666666; 
  color: #ffffff;
  font-size: 15px;
  font-weight: normal;
  width: 180px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0; /* テキストが長すぎるときにグレーのボックスが歪んだり縮んだりするのを防ぐ */
  font-family: "A P-OTF Maru Antique+ ProN",Arial, sans-serif; 
}

.card-sub .card-text {
  font-family: "A P-OTF Maru Antique+ ProN", "Hiragino Maru Gothic ProN", sans-serif;
  color: #424242;
  font-size: 22px;
  line-height: 1.6;
  margin: 0;
  flex-grow: 1; /* 残りのスペースをテキストが自由に占めることができるようにする */
  text-align: left;
}

/* 方向を示す矢印 */
.card-arrow {
  width: 14px;
  height: auto;
  flex-shrink: 0; /* 矢印が歪まないようにする */
}
/* --- たまひよ記事ブロック --- */
.tamahiyo-articles-section {
  width: 100%;
  max-width: 768px; 
  margin: 80px auto 0;
  position: relative;
  z-index: 2;
}

/* --- タイトル --- */
.tamahiyo-heading {
  position: relative;
  text-align: center;
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px; 
}

/* タイトルの下に広がる吹き出しの背景画像 */
.tamahiyo-heading .heading-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 600px; /* 吹き出しの背景画像の幅を調整する */
  height: auto;
  z-index: 0;
}

/* タイトルのテキスト */
.tamahiyo-heading .heading-text {
  position: relative;
  z-index: 1;
  font-size: 30px; /* ご要望通りのサイズ43 */
  font-weight: 600;
  color: #424242;
  font-family: "A P-OTF Maru Antique+ ProN", "Hiragino Maru Gothic ProN", sans-serif;
  margin: 0;
  letter-spacing: 2px;
}

/* --- 記事リスト --- */
.tamahiyo-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-left: 0;
  width: 100%;   
}

/* --- 3. グレーの枠線を削除し、白いフレームの左端を平らにする --- */
.tamahiyo-card {
  background-color: #ffffff;
  
  /* 枠線の修正：右、上、下の枠線のみを残し、左の枠線を削除 */
  border: 1px solid #E0E0E0;
  border-left: none !important; 
  
  /* 角丸の修正：右側の2つの角のみ丸くする（10px）。左側の2つの角は0にする */
  border-radius: 0 10px 10px 0 !important; 
  
  display: flex; 
  align-items: center; 
  padding: 15px 25px 15px 15px; 
  text-decoration: none;
  box-sizing: border-box;
  gap: 25px;
  width: 95%; /* ご要望通り、右側の黄色いマージンを保持する */
}

.tamahiyo-card:hover {
  opacity: 0.8;
}

/* --- 画像のラッパー（内側の画像フレーム） --- */
.card-thumb {
  width: 220px; 
  aspect-ratio: 486 / 324; 
  height: auto; 
  flex-shrink: 0; 
  
  /* ここを修正： 
     左上(0) | 右上(5px) | 右下(5px) | 左下(0)
     白いカードのグレーの枠線にぴったりと平らに密着させるため、左角は直角(0)にしました */
  border-radius: 0 5px 5px 0; 
  
  overflow: hidden;
  background-color: #ffffff; 
}

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

/* 画像3の個別処理（文字が切れないようにする） */
.card-thumb.thumb-contain img {
  object-fit: contain; 
}

/* 記事のテキスト（中央） */
.tamahiyo-card .card-title {
  font-family: "A P-OTF Maru Antique+ ProN", "Hiragino Maru Gothic ProN", sans-serif;
  color: #424242;
  font-size: 22px;
  line-height: 1.8;
  margin: 0;
  text-align: left;
  flex-grow: 1; /* 中央の空きスペースをテキストがすべて占めることができるようにする */
}

/* 矢印（右側） */
.tamahiyo-card .card-arrow {
  width: 16px;
  height: auto;
  flex-shrink: 0;
}
/* --- セクション CHECK 02（ブルーテーマ） --- */
.section-check02 {
  max-width: 768px;
  margin: 0 auto;
  position: relative;
  background-image: url("../image/pc/pc3_check02/pc_bg_check02.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 110%;
  text-align: center;
  padding-bottom: 150px;
  margin-top: 0; 
}

/* 青い曲線の画像 */
.bg-blue-curve {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1; /* 青い画像がセクションの黄色い背景の上にくるようにする */
}

/* テキストコンテンツが青い画像の上にもくるようにする */
.section-check02 .check-content {
  position: relative;
  z-index: 2;
}

/* メインの青い文字色 */
.text-blue {
  color: #77C7E8 !important;
  font-size: 32px !important;
  font-weight: bold;
  border-bottom: 4px dotted #77C7E8;
  padding-bottom: 5px;
  margin: -10px 0 5px 0;
  line-height: 1.4;
  font-family: "A P-OTF Maru Antique+ ProN", sans-serif;
}

.text-blue .text-large {
  font-size: 40px;
}

/* 青いコンテンツフレーム */
.info-blue-frame {
  position: relative;
  width: 90%;
  margin: 40px auto 0;
  background-color: #E6F4FA; /* フレームの薄い青の背景 */
  border-radius: 40px;
  padding: 50px 30px 40px 30px;
  box-sizing: border-box;
}

/* 病名のタイトル（風疹など） */
.disease-title {
  margin-top: -50px;
  margin-bottom: 30px;
}
.disease-title img {
  width: 250px;
  height: auto;
}

/* 角丸の濃い青のボックス */
.info-blue-box {
  background-color: #31A4D3;
  border-radius: 50px;
  padding: 20px 15px;
  margin-bottom: 30px;
}

.info-blue-box .white-text {
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
  margin: 0;
}

/* 説明テキスト */
.desc-text p {
  color: #ffffff; /* デザインに基づく、薄い青のフレーム上の白いテキスト */
  background-color: #47B2E3; /* もしデザインがこの部分に青い背景と白いテキストを要求している場合 */
  padding: 20px;
  border-radius: 20px;
  font-size: 18px;
  line-height: 1.8;
  text-align: left;
  margin-bottom: 30px;
}

/* 予防ポイントブロック */
.prevention-box {
  background-color: #ffffff;
  border-radius: 25px;
  padding: 35px 20px 20px 20px;
  position: relative;
  margin-top: 50px;
}

.prevention-header {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #8CD3F5;
  color: #ffffff;
  font-size: 22px;
  font-weight: bold;
  padding: 10px 40px;
  border-radius: 30px;
  white-space: nowrap;
}

.prevention-content p {
  color: #424242;
  font-size: 18px;
  line-height: 1.7;
  text-align: left;
  margin: 0;
}
/* --- セクション2のタイトル：「が」の文字を黒にする --- */
.text-blue-row {
  font-family: "A P-OTF Maru Antique+ ProN", sans-serif;
  font-size: 32px;
  color: #424242; /* 「が」の文字の標準的な黒色 */
  font-weight: bold;
  margin: -10px 0 5px 0;
}

.text-blue {
  color: #47B2E3; 
  border-bottom: 4px dotted #47B2E3;
  padding-bottom: 5px;
}

/* --- 1. 青いフレーム（最下層 - z-index: 5） --- */
/* --- 1. 青いフレーム（最下部に配置） --- */
.disease-blue-card {
  position: relative;
  z-index: 1; /* 最も低い */
  background-color: #7ABFDE;
  width: 90% !important;
  max-width: 700px !important;
  margin: 40px auto 0;
  padding: 50px 40px 150px 40px; /* アンケートブロックが重なるように、下に150pxの空白を作成する */
  box-sizing: border-box;
}

/* メイン情報の濃い青のボックス */
.info-dark-blue-box {
  background-color: #31A4D3;
  border-radius: 50px;
  padding: 20px 15px;
  margin-bottom: 25px;
  text-align: center;
}

.info-dark-blue-box .white-text {
  color: #ffffff;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

/* 白い説明テキスト */
.disease-desc p {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.8;
  text-align: left;
  margin-bottom: 30px;
}

/* 白い予防ポイントブロック */
.prevention-white-box {
  background-color: #E4F3F9;
  border-radius: 20px;
  padding: 40px 25px 25px;
  position: relative;
  margin-top: 50px;
}

/* 画像ラベル：中央揃えにし、上に突き出させる */
.prevention-label-img {
  position: absolute;
  top: 20px; 
  left: 50%;
  transform: translateX(-50%);
  width: 200px; 
  height: auto;
  z-index: 10;
}

/* --- テキストコンテンツ --- */
.prevention-text {
  color: #424242;
  font-size: 17px;
  line-height: 1.7;
  text-align: left;
  margin-top: 40px; 
}
/* --- セクション2のQマーク用の青色 --- */
.text-blue-q {
  color: #47B2E3 !important;
  font-size: 140px;
  font-weight: 500;
  line-height: 0.8; /* Qマークがテキストブロックを下に押し下げないように、line-heightを小さくする */
  margin-top: -5px;
  flex-shrink: 0;
}

/* --- 薄い青のコメントボックス --- */
.comment-box.box-light-blue {
  background-color: #E6F4FA; /* diseaseフレームと同調する薄い青色 */
  border-radius: 20px;
  position: relative;
  padding: 25px;
  margin-bottom: 20px;
}
/* --- 1. ピンクのリボン（最優先） --- */
.section-check02 .survey-banner {
    position: relative;
    /* アンケートブロック内で最も高いインデックスを設定する */
    z-index: 50; 
    margin-top: 10px;
    /* 下の白いフレームをピンクのリボンの下に潜り込ませる */
    margin-bottom: -40px; 
    
    text-align: center;
}

/* --- 2. アンケートの白いフレーム（バナーの下の層） --- */
.section-check02 .survey-white-card {
    position: relative;
    /* バナーの下になるように、インデックスをバナー（50）より低く設定する */
    z-index: 40; 
    
    background-color: #ffffff;
    width: 90% !important;
    max-width: 700px !important;
    margin: 0 auto;
    border-radius: 30px;
    padding: 60px 40px 40px;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* --- 3. 外側のラッパー（wrapperを使用している場合） --- */
.survey-wrapper {
    position: relative;
    /* このブロック全体が青いフレーム（通常はz-index: 5）の上にあることを確認する */
    z-index: 10; 
    margin-top: -110px;
}
.disease-title-blue {
  margin-top: -50px;
  margin-bottom: 30px;
}
.disease-title-blue img {
  width: 500px;
  height: auto;
}
/* --- 画面全体の白い背景 --- */
.other-diseases-section {
  background-color: #ffffff;
  width: 100%;
  margin: 50px 0 50px 0;
  position: relative;
  overflow: hidden;
   z-index: 3;
}

/* --- 中央揃えのコンテナ --- */
.container-other {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  text-align: center;
}

/* --- 青いフレーム付きのタイトル --- */
.other-header {
  position: relative;
  margin: 30px 0 40px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hoka-frame {
  width: 100%;
  max-width: 600px;
}

.hoka-title {
  position: absolute;
  color: #47B2E3;
  font-size: 32px;
  font-weight: bold;
  line-height: 1.4;
  margin: 0;
}

.hoka-title .dot-underline {
  color: #424242;
  border-bottom: 6px dotted #424242;
  padding-bottom: 5px;
}

/* --- テキストコンテンツ --- */
.other-content {
  text-align: left;
  max-width: 650px;
  margin: 0 auto;
}

.other-content p {
  color: #424242;
  font-size: 22px;
  line-height: 1.8;
  margin-bottom: 30px;
}

.other-content p span {
  color: #47B2E3; /* 病名を青色でハイライトする */
  font-weight: 600;
}

/* --- 赤ちゃんを囲むブロック --- */
.baby-container {
  position: absolute;
  right: 80px;
  /* 赤ちゃんを希望の「宙に浮いた」位置に配置するために、この数値を保持または調整する */
  bottom: -120px; 
  
  /* 上に重なることを保証：z-indexは周囲の要素よりも大きくなければならない */
  z-index: 999; 
  
  /* （必要に応じて）画像がマウス操作を妨げるのを防ぐ */
  pointer-events: none; 
}

.baby-img {
  width: 150px;
  height: auto;
  /* 画像に変な余白がないことを確認する */
  display: block; 
}

/* --- 重要：親タグには position: relative が必要です --- */
.other-diseases-section {
  position: relative; 
  /* overflow: hidden があると、赤ちゃんの画像のはみ出た部分が切り取られてしまいます */
  overflow: visible !important; 
  padding: 30px 0 30px;
}
/* --- 背景を含む外側のラッパー --- */
.closing-content-wrapper { 
  position: relative; 
  width: 100%; 
  max-width: 768px; 
  
  /* --- SỬA DÒNG NÀY --- */
  /* Thay margin: 0 auto; thành số âm ở trên cùng. Ví dụ: -50px */
  margin: -80px auto 0; 
  
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  overflow: hidden; 
  background-image: url("../image/pc/pc4_closing/pc_bg_closing.png");
  background-repeat: no-repeat;
  background-position: top center; 
  background-size: 100% auto; 
  z-index: 15; 
}

/* --- 内側のテキストコンテンツを含むブロック --- */
.closing-inner-content {
   position: relative; 
   z-index: 10; 
   width: 100%; 
   max-width: 700px; /* 修正：テキストが黄色い背景の外にはみ出さないように、幅を制限する必要があります */
   margin: 0 auto; /* 新規追加：このテキストブロックを背景フレームの中央に配置する */
   padding: 80px 20px 0; /* 画面を縮小したときにテキストが枠線に張り付かないように、両側に20pxのpaddingを残す */
   text-align: center; 
}
.survey-footer-note { 
  background-color: #ffffff; 
  padding: 40px 0; 
  z-index: 2; 
  position: relative; }

.closing-heart img {
  width: 90px;
  margin-top: -80px;
}

.closing-title {
  font-size: 36px;
  font-weight: bold;
  color: #424242;
  line-height: 1.4;
  margin-bottom: 15px;
}

.closing-divider img {
  width: 100%;
  max-width: 700px;
  margin-bottom: 30px;
}

.closing-main-text {
  text-align: left;
  margin-bottom: 30px;
  padding: 5px 30px 5px 30px;
}

.closing-main-text p {
  font-size: 20px;
  line-height: 1.8;
  color: #424242;
  margin-bottom: 20px;
}

.closing-reference {
  font-size: 14px;
  color: #424242;
  margin-bottom: 40px;
}

/* --- 家族の画像 --- */
.closing-family-img img {
  width: 100%;
  max-width: 550px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* --- アンケートの注釈（下の白い背景） --- */
.survey-footer-note 
{ 
  background-color: #ffffff; 
  padding: 30px 0;
   z-index: 2;
    position: relative; }

.footer-note-inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: left;
}

.footer-note-inner p {
  font-size: 14px;
  color: #666666;
  line-height: 1.6;
  margin-bottom: 5px;
}
/* --- サブタイトルの微調整 --- */
.articles-custom-header {
  text-align: center;
  margin-bottom: 40px;
}

.header-blue {
  color: #47B2E3;
  font-size: 32px;
  font-weight: bold;
  border-bottom: 4px dotted #47B2E3;
  display: inline-block;
}

.header-black {
  color: #424242;
  font-size: 32px;
  font-weight: bold;
  border-bottom: 4px dotted #424242;
  display: table;
  margin: 10px auto 0; 
}
.floating_button {
    position: fixed; /* Nổi cố định trên màn hình */
    bottom: 20px;    /* Cách đáy 20px */
    right: calc(50vw - 250px);
    z-index: 999;
}

/* Định dạng hình dáng của nút (Đoạn code của bạn) */
.floating_button a {
    font-size: 12px;
    line-height: 24px;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    text-indent: 24px; /* Đẩy chữ sang phải để nhường chỗ cho Icon */
    
    /* CHÚ Ý: Đảm bảo đường dẫn ảnh này tồn tại, nếu không sẽ không thấy icon */
    background: #fff url("../3277_testup/outl_icon.png") no-repeat;
    background-size: 20px 20px; /* Kích thước icon */
    background-position: 10px 50%; /* Vị trí icon (cách mép trái 10px, căn giữa chiều dọc) */
    
    border: solid 1px #d2a76f; /* Viền màu vàng đồng */
    color: #d2a76f; /* Chữ màu vàng đồng */
    padding: 8px 20px 8px 10px; /* Căn chỉnh lề trong của nút */
    border-radius: 30px; /* Tạo hình bo tròn (hình viên thuốc) */
    font-family: "Roboto", "Noto Sans JP", sans-serif;
    text-decoration: none; /* Xóa gạch chân mặc định của thẻ a */
}

/* Thêm hiệu ứng khi di chuột vào nút (Tùy chọn) */
.floating_button a:hover {
    background-color: #f9f9f9;
    opacity: 0.8;
}
.content-pc {
  overflow: hidden; /* Cắt bỏ mọi thành phần tràn viền, bảo vệ layout sidebar */
}
html {
  scroll-behavior: smooth;
}

/* Nếu trang web có header cố định ở trên cùng, phần margin này giúp tiêu đề khi cuộn tới không bị header che mất */
#link1, #link2, #link3, #link4, #link5 {
  scroll-margin-top: 80px; /* Hãy điều chỉnh con số này cho bằng với chiều cao của header thực tế */
}
/* =========================================
   PHÓNG TO NÚT FLOATING CHO BẢN ĐIỆN THOẠI (SP)
========================================= */
@media screen and (max-device-width: 896px) {
    .floating_button {
        bottom: 40px; /* Nâng nút lên cao hơn một chút để không bị dính đáy điện thoại */
        right: 30px;  /* Cố định nút ở góc phải màn hình */
    }

    .floating_button a {
        font-size: 28px; /* Phóng to chữ (12px -> 28px) */
        line-height: 48px;
        text-indent: 55px; /* Đẩy chữ sang phải nhiều hơn để nhường chỗ cho icon to */
        
        background-size: 45px 45px; /* Phóng to icon (20px -> 45px) */
        background-position: 20px 50%; /* Chỉnh lại vị trí icon */
        
        border: solid 3px #d2a76f; /* Làm viền dày lên (1px -> 3px) */
        padding: 15px 40px 15px 20px; /* Làm nút dày và to ra */
        border-radius: 80px; /* Tăng bo góc để giữ nguyên hình viên thuốc */
        
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* (Tùy chọn) Thêm bóng đổ để nút nổi bật, dễ nhìn thấy để bấm */
    }
}