@charset "UTF-8";

/* ============================================
   診療科目LP ベーススタイル
   - .subject-lp 配下のみにスコープ
   - リセットは最小限（テーマと二重適用にならないよう配慮）
   - inner-box / inner-box-narrow を共通コンテナとして提供
   - 見出し・セクションのデフォルトスタイルを定義
   - モバイルファースト：SP基準で書き、@media (min-width: 768px) でPC上書き
   ============================================ */


/* ============================================
   1. ルート変数
   ============================================ */
:root {
  /* 色 */
  --c-text:      #193255;   /* 本文・見出しの主色（ネイビー） */
  --c-primary:   #06b4d7;   /* メイン（スカイブルー） */
  --c-accent:    #00accf;   /* アクセント（ターコイズ） */
  --c-cta:       #ef6f74;   /* CTA・強調（ピンク） */
  --c-line:      #06C755;   /* LINE緑 */
  --c-border:    #e5e5e5;   /* 罫線 */
  --c-bg-light:  #f5fafd;   /* 薄い背景 */
  --c-white:     #fff;

  /* レイアウト */
  --content-w:        960px;   /* inner-box の最大幅 */
  --content-w-narrow: 700px;   /* inner-box-narrow の最大幅 */
}


/* ============================================
   2. リセット（.subject-lp 配下のみ）
   ============================================ */
body {
  margin: 0;
}

body:not(.home){
	padding-top: 80px;
}

@media (min-width: 768px) {
	body:not(.home){
		padding-top: 120px;
	}
}
@media (min-width: 1116px) {
	body:not(.home){
		padding-top: 100px;
	}
}

.subject-lp,
.subject-lp *,
.subject-lp *::before,
.subject-lp *::after {
  box-sizing: border-box;
}

.subject-lp {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-text);
  font-feature-settings: "palt" 1;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	width: 100%;
	overflow: hidden;
}

.subject-lp h1,
.subject-lp h2,
.subject-lp h3,
.subject-lp h4,
.subject-lp h5,
.subject-lp h6,
.subject-lp p,
.subject-lp ul,
.subject-lp ol,
.subject-lp dl,
.subject-lp dt,
.subject-lp dd,
.subject-lp figure,
.subject-lp blockquote {
  margin: 0;
  padding: 0;
}

.subject-lp ul,
.subject-lp ol {
  list-style: none;
}

.subject-lp img,
.subject-lp svg {
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: bottom;
}

.subject-lp a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
}
.subject-lp a:hover {
  opacity: 0.8;
}

.subject-lp button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.subject-lp table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* ============================================
   3. 要素デフォルト（section / h2 / h3）
   ============================================ */

/* セクションの上下余白
   隣接するセクション間の合計余白で PC 60px / SP 50px になるよう、片側を半分にする */
.subject-lp section {
  padding: 25px 0;            /* SP基準 */
}
@media (min-width: 768px) {
  .subject-lp section {
    padding: 30px 0;          /* PC */
  }
}

/* h2：セクションタイトルの標準 */
.subject-lp h2 {
  font-size: 30px;
  font-weight: 900;
  text-align: center;
  line-height: 1.4;
  color: var(--c-text);
  margin-bottom: 30px;        /* SP基準 */
}
@media (min-width: 768px) {
  .subject-lp h2 {
    margin-bottom: 24px;      /* PC */
  }
}

/* h3：セクション内小見出しの標準 */
.subject-lp h3 {
  font-size: 18px;            /* SP基準 */
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-text);
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .subject-lp h3 {
    font-size: 20px;          /* PC */
  }
}


/* ============================================
   4. 共通コンテナ（inner-box / inner-box-narrow）
   - inner-box（960px）：PCで中央寄せ、タブレットはpadding必要
   - inner-box-narrow（700px）：タブレット以上ではpadding不要（max-widthで自然に余白ができるため）
   ============================================ */
.subject-lp .inner-box,
.subject-lp .inner-box-narrow {
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 24px);   /* SP */
}

@media (min-width: 768px) {
  /* inner-box（960px）：タブレットでは padding を維持（画面幅と中身がほぼ同じになるため） */
  .subject-lp .inner-box {
    max-width: var(--content-w);
  }
  /* inner-box-narrow（700px）：タブレットでは padding 不要（max-widthで余白ができる） */
  .subject-lp .inner-box-narrow {
    padding: 0;
    max-width: var(--content-w-narrow);
  }
}

@media (min-width: 1280px) {
  /* PC：inner-box も padding 不要（max-widthで自動中央寄せ） */
  .subject-lp .inner-box {
    padding: 0;
  }
}


/* ============================================
   5. ユーティリティクラス
   ============================================ */

/* SP/PC 出し分け */
.subject-lp .sp-only { display: inline; }
.subject-lp .pc-only { display: none; }

@media (min-width: 768px) {
  .subject-lp .sp-only { display: none; }
  .subject-lp .pc-only { display: inline; }
}

/* 画像反転 */
.subject-lp .is-flip-x { transform: scaleX(-1); }



/* ============================================
   FV（ファーストビュー）
   - SP（〜767px）：.fv-sp（3ブロック構成）
   - PC（768px〜）：.fv-pc（絶対配置、960pxコンテナ）
   - CSS で display: none / block 切替
   ============================================ */


/* --------------------------------------------
   セクション全体（背景画像）
   - flex/grid は使わない（.fv-sp / .fv-pc 内で完結）
   -------------------------------------------- */
.subject-lp .fv {
  position: relative;
  background-color: #edfaff;
  background-image: url("../img/subjects/fv_bg_sp.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center -16px;
  width: 100%;
  padding: 0;
}

@media (min-width: 650px) {
  .subject-lp .fv {
    background-color: #edfaff;
    background-image: url("../img/subjects/fv_bg_pc.webp");
    background-position: center center;
    background-size: cover;
    /* transform: translateX(50%); */
    /* width: 100%; */
    /* margin: 0 auto; */
  }
}
@media (min-width: 1280px) {
  .subject-lp .fv {
    background-image: url("../img/subjects/fv_bg_pc_1280ov.webp");
    background-position: center center;
    background-size: contain;
  }
}



/* --------------------------------------------
   SP/PC 表示切替
   - SP（〜767px）：.fv-sp は flex 縦並びで表示、.fv-pc は非表示
   - PC（768px〜）：.fv-sp は非表示、.fv-pc は表示
   -------------------------------------------- */
.subject-lp .fv-sp {
  display: flex;
  flex-direction: column;
}

.subject-lp .fv-pc {
  display: none;
}

@media (min-width: 650px) {
  .subject-lp .fv-sp {
    display: none;
  }

  .subject-lp .fv-pc {
    display: block;
  }
}



/* --------------------------------------------
   Block 1: 上部テキスト
   -------------------------------------------- */
.subject-lp .fv-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 16px 16px;
}

@media (min-width: 480px) {
  .subject-lp .fv-head {
    padding: 20px 16px 16px;
  }
}


/* 症状サークル */
.subject-lp .fv-symptoms {
  display: flex;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

@media (min-width: 480px) {
  .subject-lp .fv-symptoms {
    gap: 12px;
    margin-bottom: 20px;
  }
}

.subject-lp .fv-symptom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: linear-gradient(180deg, #06b4d7 0%, #1ea3fd 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

@media (min-width: 480px) {
  .subject-lp .fv-symptom {
    width: 85px;
    height: 85px;
  }
}

.subject-lp .fv-symptom-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 2px;
}

@media (min-width: 480px) {
  .subject-lp .fv-symptom-icon {
    width: 42px;
    height: 42px;
  }
}

.subject-lp .fv-symptom-label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
}

@media (min-width: 480px) {
  .subject-lp .fv-symptom-label {
    font-size: 18px;
    letter-spacing: 0.72px;
  }
}


/* メインタイトル */
.subject-lp .fv-title {
  font-size: 32px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 1.28px;
  color: var(--c-text);
  text-align: center;
  margin: 0 0 8px;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .subject-lp .fv-title {
    font-size: 36px;
    letter-spacing: 1.44px;
  }
}

.subject-lp .fv-title-accent {
  color: var(--c-cta);
}


/* サブタイトル */
.subject-lp .fv-subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.88px;
  color: var(--c-primary);
  margin: 0;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .subject-lp .fv-subtitle {
    font-size: 24px;
    letter-spacing: 0.96px;
  }
}

.subject-lp .fv-subtitle-icon {
  width: 22px;
  height: 22px;
}

@media (min-width: 480px) {
  .subject-lp .fv-subtitle-icon {
    width: 24px;
    height: 24px;
  }
}


/* --------------------------------------------
   Block 2: メインビジュアル
   -------------------------------------------- */
.subject-lp .fv-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 480 / 440;
}

@media (min-width: 480px) {
  .subject-lp .fv-visual {
    aspect-ratio: 480 / 450;
    margin-bottom: -3%;
  }
}


/* 装飾画像（共通） */
.subject-lp .fv-fg {
  position: absolute;
  pointer-events: none;
  display: block;
  height: auto;
}


/* 女性画像 */
.subject-lp .fv-fg-woman {
  left: -1%;
  bottom: -18%;
  width: 74%;
  max-width: 340px;
}

@media (min-width: 480px) {
  .subject-lp .fv-fg-woman {
  left: -1%;
  bottom: -14%;
  width: 72%;
  max-width: 450px;
  }
}


/* スマホ画像 */
.subject-lp .fv-fg-smp {
  right: 4%;
  top: 5%;
  width: 38%;
  max-width: 180px;
}

@media (min-width: 480px) {
  .subject-lp .fv-fg-smp {
  right: 4%;
  top: 1%;
  width: 38%;
  max-width: 240px;
  }
}


/* 自転車画像 */
.subject-lp .fv-fg-bike {
  right: 14%;
  bottom: 7%;
  width: 26%;
  max-width: 130px;
}

@media (min-width: 480px) {
  .subject-lp .fv-fg-bike {
  right: 16%;
  bottom: 11%;
  width: 26%;
  max-width: 130px;
  }
}


/* 会員数バッジ */
.subject-lp .fv-fg-member {
  right: 2%;
  bottom: 21%;
  width: 18%;
  max-width: 100px;
}

@media (min-width: 480px) {
  .subject-lp .fv-fg-member {
  right: 2%;
  bottom: 25%;
  width: 18%;
  max-width: 100px;
  }
}


/* チェック項目（左下に絶対配置） */
.subject-lp .fv-checks {
  position: absolute;
  left: 4%;
  bottom: 8%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 3;
}

@media (min-width: 480px) and (max-width:649px){
  .subject-lp .fv-checks {
    left: 5%;
    bottom: 12%;
    gap: 8px;
  }
}

.subject-lp .fv-check {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #b9e1ef;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--c-accent);
  width: fit-content;
}

.subject-lp .fv-check-icon {
  width: 18px;
  height: 16px;
  flex-shrink: 0;
}


/* --------------------------------------------
   Block 3: CTAボタン
   -------------------------------------------- */
.subject-lp .fv-foot {
  display: flex;
  justify-content: center;
  padding: 0px 16px 24px;
}

.subject-lp .fv-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 440px;
  height: 80px;
  background: linear-gradient(to right, #1fa1fe, #13c5f3);
  border-radius: 48.5px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
  text-decoration: none;
  padding: 0 30px;
  position: relative;
  transition: opacity 0.3s;
}

.subject-lp .fv-btn:hover {
  opacity: 0.9;
}

.subject-lp .fv-btn-sub {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff8c7;
  text-align: center;
  position: relative;
  padding: 0 18px;
}

.subject-lp .fv-btn-sub::before,
.subject-lp .fv-btn-sub::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.5px;
  height: 14px;
  background: #fff8c7;
}

.subject-lp .fv-btn-sub::before {
  left: 4px;
  transform: translateY(-50%) rotate(-20deg);
}

.subject-lp .fv-btn-sub::after {
  right: 4px;
  transform: translateY(-50%) rotate(20deg);
}

.subject-lp .fv-btn-main {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
  margin-top: 2px;
}


/* ============================================
   PC（768px〜）：.fv-pc 内のスタイル
   - 装飾画像は 960pxコンテナ内に配置（左右はみ出してOK）
   - テキスト要素は position: absolute で中央配置
   ============================================ */

.subject-lp .fv-pc {
  position: relative;
  max-width: 960px;
  height: 388px;
  overflow: hidden;
  margin: 0 auto;
}



/* --------------------------------------------
   装飾画像コンテナ（max-width 960px、中央配置）
   -------------------------------------------- */
.subject-lp .fv-pc-fg-container {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 960px;
  min-width: 868px;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}


/* PC装飾画像（共通） */
.subject-lp .fv-pc-fg {
  position: absolute;
  pointer-events: none;
  display: block;
  height: auto;
}


/* 女性画像（PC） */
.subject-lp .fv-pc-fg-woman {
  left: -10px;
  bottom: -134px;
  width: 340px;
}



/* スマホ画像（PC） */
.subject-lp .fv-pc-fg-smp {
  right: 19px;
  bottom: 20px;
  width: 180px;
}



/* 自転車画像（PC） */
.subject-lp .fv-pc-fg-bike {
  right: 186px;
  bottom: 18px;
  width: 100px;
}



/* 会員数バッジ（PC） */
.subject-lp .fv-pc-fg-member {
  right: 12px;
  bottom: 30px;
  width: 82px;
}



/* --------------------------------------------
   PC：症状サークル
   - 上部中央
   -------------------------------------------- */
.subject-lp .fv-pc-symptoms {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 3;
}

.subject-lp .fv-pc-symptom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(180deg, #06b4d7 0%, #1ea3fd 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.subject-lp .fv-pc-symptom-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 2px;
}

.subject-lp .fv-pc-symptom-label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.72px;
  color: #fff;
}


/* --------------------------------------------
   PC：メインタイトル
   -------------------------------------------- */
.subject-lp .fv-pc-title {
  position: absolute;
  top: 128px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 40px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 1.6px;
  color: var(--c-text);
  text-align: center;
  margin: 0;
  white-space: nowrap;
  z-index: 3;
}

.subject-lp .fv-pc-title-accent {
  color: var(--c-cta);
}

/* --------------------------------------------
   PC：サブタイトル
   -------------------------------------------- */
.subject-lp .fv-pc-subtitle {
  position: absolute;
  top: 186px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.96px;
  color: var(--c-primary);
  margin: 0;
  white-space: nowrap;
  z-index: 3;
}

.subject-lp .fv-pc-subtitle-icon {
  width: 24px;
  height: 24px;
}


/* --------------------------------------------
   PC：チェック項目（横並び、中央）
   -------------------------------------------- */
.subject-lp .fv-pc-checks {
  position: absolute;
  top: 238px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 3;
}

.subject-lp .fv-pc-check {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #b9e1ef;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.14px;
  color: var(--c-accent);
  white-space: nowrap;
}

.subject-lp .fv-pc-check-icon {
  width: 14px;
  height: 12px;
  flex-shrink: 0;
}


/* --------------------------------------------
   PC：CTAボタン
   -------------------------------------------- */
.subject-lp .fv-pc-cta {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 320px;
  z-index: 3;
}

.subject-lp .fv-pc-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
  background: linear-gradient(to right, #1fa1fe, #13c5f3);
  border-radius: 41.5px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
  text-decoration: none;
  padding: 0 30px;
  position: relative;
  transition: opacity 0.3s;
}

.subject-lp .fv-pc-btn:hover {
  opacity: 0.9;
}

.subject-lp .fv-pc-btn-sub {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff8c7;
  text-align: center;
  position: relative;
  padding: 0 18px;
}

.subject-lp .fv-pc-btn-sub::before,
.subject-lp .fv-pc-btn-sub::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.5px;
  height: 12px;
  background: #fff8c7;
}

.subject-lp .fv-pc-btn-sub::before {
  left: 4px;
  transform: translateY(-50%) rotate(-20deg);
}

.subject-lp .fv-pc-btn-sub::after {
  right: 4px;
  transform: translateY(-50%) rotate(20deg);
}

.subject-lp .fv-pc-btn-main {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
  margin-top: 2px;
}

	
	
/* ============================================
   SYMPTOMS（受賞バナー + 対応可能な内科の症状）
   - inner-box-narrow（700px）
   - 受賞バナー → セクションタイトル → リード文 → 症状タグ群 → 注釈
   ============================================ */

.subject-lp .symptoms {
  background: #fff;
}


/* --------------------------------------------
   受賞バナー
   -------------------------------------------- */
.subject-lp .symptoms-award {
  text-align: center;
  margin-bottom: 24px;           /* SP基準 */
}

@media (min-width: 768px) {
  .subject-lp .symptoms-award {
    margin-bottom: 32px;          /* PC */
  }
}

.subject-lp .symptoms-award-img {
  max-width: 520px;
  width: 100%;
  height: auto;
  display: inline-block;
}


/* --------------------------------------------
   セクションタイトル
   h2 のデフォルトスタイル（30px / bold / センター / ネイビー）を継承
   アクセント部分だけ色を変える
   -------------------------------------------- */
.subject-lp .symptoms-title-accent {
  color: var(--c-accent);
}


/* --------------------------------------------
   リード文
   SP：18px / PC：14px
   SPでは左揃え、PCでは中央寄せ
   -------------------------------------------- */
.subject-lp .symptoms-lead {
  text-align: left;              /* SP基準 */
  font-size: 18px;                /* SP基準 */
  line-height: 1.8;
  letter-spacing: -0.36px;
  margin-bottom: 24px;            /* SP基準 */
}

/* SPでは改行を解除（自然な折返しに） */
.subject-lp .symptoms-lead br {
  display: none;                  /* SP基準 */
}

@media (min-width: 768px) {
  .subject-lp .symptoms-lead {
    text-align: center;            /* PC */
    font-size: 14px;
    letter-spacing: -0.14px;
    margin-bottom: 32px;
  }
  .subject-lp .symptoms-lead br {
    display: inline;                /* PCではBR有効 */
  }
}


/* --------------------------------------------
   症状タグ群
   SP：18px、高さ 44px、padding 4px 16px
   PC：14px、padding 6px 12px
   -------------------------------------------- */
.subject-lp .symptoms-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;                 /* SP基準：縦10px、横8px */
  justify-content: center;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .subject-lp .symptoms-tags {
    gap: 8px;                     /* PC */
  }
}

.subject-lp .symptoms-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;                       /* SP基準 */
  background: #1ea3fd;
  color: #fff;
  font-size: 18px;                /* SP基準 */
  font-weight: 700;
  padding: 4px 16px;              /* SP基準 */
  height: 44px;                   /* SP基準 */
  border-radius: 6px;
  cursor: pointer;
}

@media (min-width: 768px) {
  .subject-lp .symptoms-tag {
    font-size: 14px;               /* PC */
    padding: 6px 12px;
    height: auto;
    gap: 6px;
  }
}

.subject-lp .symptoms-tag-arrow {
  font-size: 10px;
}


/* --------------------------------------------
   注釈
   SP：16px、左揃え
   PC：12px、中央寄せ
   -------------------------------------------- */
.subject-lp .symptoms-note {
  font-size: 16px;                /* SP基準 */
  line-height: 1.6;
  letter-spacing: -0.16px;
  text-align: left;               /* SP基準 */
  color: var(--c-text);
}

@media (min-width: 768px) {
  .subject-lp .symptoms-note {
    font-size: 12px;               /* PC */
    text-align: center;
  }
}


/* ============================================
   PRESCRIPTION（処方できる内科のお薬例 + LINEサポート）
   - inner-box-narrow（700px）
   - セクションタイトル → お薬羅列 → LINEサポート
   ============================================ */

.subject-lp .prescription {
  background: #fff;
}


/* --------------------------------------------
   セクションタイトル
   -------------------------------------------- */
.subject-lp .prescription-title-accent {
  color: var(--c-accent);
}


/* --------------------------------------------
   お薬羅列
   SP：16px / PC：14px
   -------------------------------------------- */
.subject-lp .prescription-list {
  font-size: 16px;                /* SP基準 */
  line-height: 1.6;
  letter-spacing: -0.16px;
  color: var(--c-text);
  margin-bottom: 40px;
  text-align: center;
}

@media (min-width: 768px) {
  .subject-lp .prescription-list {
    font-size: 14px;               /* PC */
    letter-spacing: -0.14px;
  }
}


/* --------------------------------------------
   LINEサポート
   - info-icon がボックス左上にはみ出る配置
   - ボックス内：スタッフイラスト + テキストを横並び
   SP：ボックス幅 100%、高さ 127px
   PC：ボックス幅 500px、高さ 100px
   -------------------------------------------- */
.subject-lp .line-support {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}

.subject-lp .line-support-info {
  position: absolute;
  top: -16px;                     /* SP基準 */
  left: -16px;
  width: 65px;                    /* SP基準 */
  height: 65px;
  z-index: 2;
}

@media (min-width: 768px) {
  .subject-lp .line-support-info {
    width: 55px;                   /* PC */
    height: 55px;
    top: -14px;
    left: -14px;
  }
}

.subject-lp .line-support-box {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 4px solid #afbcca;
  border-radius: 13px;
  padding: 12px 20px;             /* SP基準 */
  min-height: 127px;              /* SP基準 */
}

@media (min-width: 768px) {
  .subject-lp .line-support-box {
    padding: 12px 24px;            /* PC */
    min-height: 100px;
  }
}

.subject-lp .line-support-staff {
  width: 107px;                   /* SP基準 */
  height: 103px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .subject-lp .line-support-staff {
    width: 78px;                   /* PC */
    height: 75px;
  }
}

.subject-lp .line-support-text {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #8b95a2;
  margin: 0;
}


/* ============================================
   STORIES（こんな方にご利用いただいています）
   - inner-box（960px）
   - SP：1カラム縦積み（カード幅100%）
   - PC：3カラム横並び（315px正方形カード × 3）
   ============================================ */

.subject-lp .stories {
  background: #fff;
  padding-bottom: 50px;           /* SP基準 */
}

@media (min-width: 768px) {
  .subject-lp .stories {
    padding-bottom: 60px;          /* PC */
  }
}


/* --------------------------------------------
   カード一覧
   SP：1カラム縦積み、gap 16px
   PC：3カラム横並び、gap 8px
   -------------------------------------------- */
.subject-lp .stories-list {
  display: flex;
  flex-direction: column;          /* SP基準 */
  gap: 16px;
}

@media (min-width: 768px) {
  .subject-lp .stories-list {
    flex-direction: row;            /* PC */
    gap: 8px;
  }
}


/* --------------------------------------------
   カード（stories-item）
   SP：幅100%、padding 32px 22px、gap 24px
   PC：flex: 1、padding 30px 16px、gap 20px
   -------------------------------------------- */
.subject-lp .stories-item {
  background: #fff;
  border: 2px dashed #939daa;
  border-radius: 20px;
  padding: 32px 22px;              /* SP基準 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;                       /* SP基準 */
}

@media (min-width: 768px) {
  .subject-lp .stories-item {
    flex: 1;
    padding: 30px 16px;             /* PC */
    gap: 20px;
  }
}


/* --------------------------------------------
   カードタイトル
   SP：24px、1行（BRはpc-onlyで非表示）
   PC：20px、2行（BRで改行）
   -------------------------------------------- */
.subject-lp .stories-item-title {
  font-size: 22px;                 /* SP基準 */
  font-weight: 900;
  color: var(--c-accent);
  line-height: 1.4;
  text-align: center;
  margin: 0;
}

@media (min-width: 768px) {
  .subject-lp .stories-item-title {
    font-size: 20px;                /* PC */
  }
}


/* --------------------------------------------
   イラスト
   SP：高さ100px / PC：高さ80px
   -------------------------------------------- */
.subject-lp .stories-item-img {
  height: 100px;                    /* SP基準 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.subject-lp .stories-item-img img {
  height: 100%;
  width: auto;
}

@media (min-width: 768px) {
  .subject-lp .stories-item-img {
    height: 80px;                    /* PC */
  }
}


/* --------------------------------------------
   本文
   SP：18px、letter-spacing -0.18px
   PC：14px、letter-spacing -0.14px
   -------------------------------------------- */
.subject-lp .stories-item-text {
  font-size: 18px;                  /* SP基準 */
  line-height: 1.5;
  letter-spacing: -0.18px;
  color: var(--c-text);
  margin: 0;
}

@media (min-width: 768px) {
  .subject-lp .stories-item-text {
    font-size: 14px;                 /* PC */
    letter-spacing: -0.14px;
  }
}


/* ============================================
   POINT（選ばれる理由）
   - inner-box（960px）
   - 背景：ピンク #fdf1f0（bg-color-pink）
   - SP：1カラム縦積み
   - PC：2×2 グリッド（474×315/347px、gap 12px）
   ============================================ */

/* --------------------------------------------
   背景色帯（セクション全幅）
   -------------------------------------------- */
.subject-lp .bg-color-pink {
  background: #fdf1f0;
  padding-top: 50px;                /* SP基準 */
  padding-bottom: 50px;
}

@media (min-width: 768px) {
  .subject-lp .bg-color-pink {
    padding-top: 60px;               /* PC */
    padding-bottom: 60px;
  }
}


/* --------------------------------------------
   セクションタイトル
   - 「内科オンライン診療」がピンク、「ならSOKUYAKU」がネイビー
   - SPでは2行（BRで改行）、PCでは1行
   -------------------------------------------- */
.subject-lp .point-title {
  margin-bottom: 30px;
}

.subject-lp .point-title-accent {
  color: var(--c-cta);
}


/* --------------------------------------------
   カード一覧
   SP：1カラム縦積み、gap 16px
   PC：2×2 グリッド、gap 12px
   -------------------------------------------- */
.subject-lp .point-list {
  display: flex;
  flex-direction: column;            /* SP基準 */
  gap: 16px;
}

@media (min-width: 768px) {
  .subject-lp .point-list {
    flex-direction: row;              /* PC */
    flex-wrap: wrap;
    gap: 12px;
  }
}


/* --------------------------------------------
   カード（point-item）
   SP：100%幅、padding 26px 26px
   PC：474px幅（960 - 12gap = 948 ÷ 2 = 474px）、padding 20px 30px
   -------------------------------------------- */
.subject-lp .point-item {
  background: #fff;
  border: 4px solid var(--c-pink-border, #e8989b);
  border-radius: 20px;
  padding: 26px 26px;                /* SP基準 */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 768px) {
  .subject-lp .point-item {
    width: calc((100% - 12px) / 2);   /* PC */
    padding: 20px 30px;
    gap: 20px;
  }
}


/* --------------------------------------------
   カードヘッダー（ラベル + タイトル）
   -------------------------------------------- */
.subject-lp .point-item-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;                          /* SP基準 */
}

@media (min-width: 768px) {
  .subject-lp .point-item-head {
    gap: 10px;                         /* PC */
  }
}


/* --------------------------------------------
   POINT ラベル
   - 117×36px、ピンク背景、角丸18px
   - 「POINT」白文字 16px + 数字 24px
   - Roboto Bold
   -------------------------------------------- */
.subject-lp .point-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 117px;
  height: 36px;
  background: var(--c-cta);
  border-radius: 18px;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  line-height: 1;
}

.subject-lp .point-label-text {
  font-size: 16px;
}

.subject-lp .point-label-num {
  font-size: 24px;
}


/* --------------------------------------------
   カードタイトル（h3）
   - h3 のデフォルト（18px / bold）を上書き
   - SP：24px / PC：20px
   - center、Bold、ネイビー
   -------------------------------------------- */
.subject-lp .point-item-title {
  font-size: 24px;                   /* SP基準 */
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--c-text);
  margin: 0;
}

@media (min-width: 768px) {
  .subject-lp .point-item-title {
    font-size: 20px;                  /* PC */
  }
}

/* POINT3 の「20,000」だけ Roboto */
.subject-lp .point-num {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 28px;                   /* SP基準 */
}

@media (min-width: 768px) {
  .subject-lp .point-num {
    font-size: 24px;                  /* PC */
  }
}


/* --------------------------------------------
   カードボディ（イラスト + 本文 + 注釈）
   -------------------------------------------- */
.subject-lp .point-item-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* イラスト
   SP：高さ 100px / PC：高さ 80px
   画像によって元サイズが違うので、高さ統一で見た目を揃える */
.subject-lp .point-item-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.subject-lp .point-item-img img {
  height: 100px;                     /* SP基準 */
  width: auto;
  max-width: 100%;
}

@media (min-width: 768px) {
  .subject-lp .point-item-img img {
    height: 80px;                     /* PC */
  }
}


/* --------------------------------------------
   本文
   SP：18px、letter-spacing -0.36px
   PC：16px、letter-spacing -0.32px
   -------------------------------------------- */
.subject-lp .point-item-text {
  font-size: 18px;                   /* SP基準 */
  line-height: 1.5;
  letter-spacing: -0.36px;
  color: var(--c-text);
  margin: 0;
}

@media (min-width: 768px) {
  .subject-lp .point-item-text {
    font-size: 16px;                  /* PC */
    letter-spacing: -0.32px;
  }
}


/* --------------------------------------------
   注釈（POINT4のみ）
   SP：14px / PC：12px
   -------------------------------------------- */
.subject-lp .point-item-note {
  font-size: 14px;                   /* SP基準 */
  line-height: 1.5;
  color: var(--c-text);
  margin: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .subject-lp .point-item-note {
    font-size: 12px;                  /* PC */
  }
}


/* ============================================
   PRICE（ご利用料金について）
   - inner-box-narrow（700px）
   - 背景：薄い青 #edf7fc（bg-color-blue-01）
   ============================================ */

/* --------------------------------------------
   背景色帯（セクション全幅）
   -------------------------------------------- */
.subject-lp .bg-color-blue-01 {
  background: #edf7fc;
  padding-top: 50px;                  /* SP基準 */
  padding-bottom: 50px;
}

@media (min-width: 768px) {
  .subject-lp .bg-color-blue-01 {
    padding-top: 50px;                 /* PC */
    padding-bottom: 50px;
  }
}


/* --------------------------------------------
   セクションタイトル（h2 のデフォルトを継承）
   -------------------------------------------- */
.subject-lp .price-title {
  margin-bottom: 14px;                /* SP基準 */
}

@media (min-width: 768px) {
  .subject-lp .price-title {
    margin-bottom: 13px;               /* PC */
  }
}


/* --------------------------------------------
   サブタイトル（バッジ）
   - ネイビー背景、角丸6.4px、白文字
   - SP：247×32px、20px / PC：223×32px、18px
   -------------------------------------------- */
.subject-lp .price-subtitle {
  display: block;
  width: fit-content;
  margin: 0 auto 20px;                /* SP基準 */
  padding: 4px 32px;
  background: var(--c-text);
  border-radius: 6.4px;
  color: #fff;
  font-size: 20px;                    /* SP基準 */
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

@media (min-width: 768px) {
  .subject-lp .price-subtitle {
    font-size: 18px;                   /* PC */
    margin: 0 auto 20px;
  }
}


/* --------------------------------------------
   強調テキスト
   - 「普段病院で診察を受ける際と同じ割合」がピンク + Bold
   - 残りがネイビー + Bold
   - SP：22px / PC：18px
   -------------------------------------------- */
.subject-lp .price-lead {
  text-align: center;
  font-size: 22px;                    /* SP基準 */
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 30px;                /* SP基準 */
}

@media (min-width: 768px) {
  .subject-lp .price-lead {
    font-size: 18px;                   /* PC */
    margin-bottom: 20px;
  }
}

.subject-lp .price-lead-accent {
  color: var(--c-cta);
}


/* --------------------------------------------
   料金例ボックス
   - 白背景、ネイビー枠 2.5px
   -------------------------------------------- */
.subject-lp .price-example {
  background: #fff;
  border: 2.5px solid var(--c-text);
  padding: 25px 20px;                 /* SP基準 */
  margin: 0 auto 20px;
}

@media (min-width: 768px) {
  .subject-lp .price-example {
    padding: 30px 20px 40px;            /* PC */
  }
}

.subject-lp .price-example-title {
  text-align: center;
  color: #939daa;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 20px;
}

/* 中身（料金テーブル）は340pxに制限して中央寄せ */
.subject-lp .price-example-list {
  max-width: 340px;
  margin: 0 auto;
}

.subject-lp .price-example-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-text);
}

.subject-lp .price-example-label {
  font-size: 22px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.4;
}

.subject-lp .price-example-value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
}

.subject-lp .price-example-num {
  font-family: 'Roboto', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1;
}

.subject-lp .price-example-unit {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.4;
}


/* --------------------------------------------
   注釈
   SP：14px / PC：12px
   -------------------------------------------- */
.subject-lp .price-notes {
  font-size: 14px;                    /* SP基準 */
  line-height: 1.4;
  color: var(--c-text);
  margin: 0 0 24px;                   /* SP基準 */
  padding: 0;
}

@media (min-width: 768px) {
  .subject-lp .price-notes {
    font-size: 12px;                   /* PC */
    margin: 0 0 34px;
  }
}

.subject-lp .price-notes li {
  margin-bottom: 4px;
}


/* --------------------------------------------
   支払い方法
   - チェックボックスをSVG画像で表示
   -------------------------------------------- */

/* チェックマーク画像 */
.subject-lp .price-payment-check {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 6px;
}

/* テキスト本体 */
.subject-lp .price-payment-text {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.16px;
  color: var(--c-text);
  margin-bottom: 12px;                /* SP基準 */
  text-align: center;
}

@media (min-width: 768px) {
  .subject-lp .price-payment-text {
    margin-bottom: 14px;               /* PC */
  }
}

.subject-lp .price-payment-accent {
  color: var(--c-primary);
}

.subject-lp .price-payment-note {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.12px;
  color: var(--c-text);
  margin-bottom: 30px;
  text-align: center;
}

.subject-lp .price-payment-logos {
  background: #fff;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 396px;
}

.subject-lp .price-payment-logos img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* ============================================
   NATIONWIDE（全国どこからでも受診可能）
   - inner-box-narrow（700px）
   - 背景：薄い水色 #d0eff5（bg-color-blue-02）
   - 上部「年間診療件数10万件以上」→ メイン見出し → イラスト → 補足文
   ============================================ */

/* --------------------------------------------
   背景色帯（セクション全幅）
   -------------------------------------------- */
.subject-lp .bg-color-blue-02 {
  background: #d0eff5;
  padding-top: 50px;                  /* SP基準 */
  padding-bottom: 50px;
}

@media (min-width: 768px) {
  .subject-lp .bg-color-blue-02 {
    padding-top: 50px;                 /* PC */
    padding-bottom: 60px;
  }
}


/* --------------------------------------------
   上部：年間診療件数 10 万件以上（カッコ付き）
   - 「＼」「／」をCSS疑似要素で描画
   - 数字「10」だけ Roboto Bold で大きく表示
   -------------------------------------------- */
.subject-lp .nationwide-stat {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-bottom: 4px;
  position: relative;
  font-weight: 700;
  color: var(--c-text);
}

/* 左右の ＼ ／ をCSS疑似要素で描画 */
.subject-lp .nationwide-stat::before,
.subject-lp .nationwide-stat::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 28px;
  background: var(--c-text);
  flex-shrink: 0;
  margin: 0 8px;
}
.subject-lp .nationwide-stat::before {
  transform: rotate(-20deg);
}
.subject-lp .nationwide-stat::after {
  transform: rotate(20deg);
}

.subject-lp .nationwide-stat-label {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.subject-lp .nationwide-stat-num {
  font-family: 'Roboto', sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-text);
}


/* --------------------------------------------
   メイン見出し
   - 「全国どこからでも受診可能」
   - 「どこから」がピンク、残りがネイビー
   - h2 のデフォルト（30px Black center）を継承
   -------------------------------------------- */
.subject-lp .nationwide-title {
  margin-bottom: 18px;
}
@media (min-width: 768px) {
  .subject-lp .nationwide-title {
    font-size: 30px;
	   margin-bottom: 0;        /* PC */
  }
}

.subject-lp .nationwide-title-accent {
  color: var(--c-cta);
}


/* --------------------------------------------
   装飾イラスト
   - PC: 横長イラスト（1280×480を最大幅で表示）
   - SP: 縦長イラスト（480×500、画面幅いっぱい）
   -------------------------------------------- */
.subject-lp .nationwide-illust {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.subject-lp .nationwide-illust img {
  width: 100%;
  height: auto;
  display: block;
}


/* --------------------------------------------
   補足文
   - 「全国各地から多くの患者様がSOKUYAKUを利用しています」
   - 「全国各地から」がピンク
   - SP: 24px、2行（「患者様が」のあとで改行）
   - PC: 18px、1行
   -------------------------------------------- */
.subject-lp .nationwide-note {
  text-align: center;
  font-size: 24px;                    /* SP基準 */
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-text);
  margin-top: 16px;
}

@media (min-width: 768px) {
  .subject-lp .nationwide-note {
    font-size: 22px;
	margin-top: 20px;                  /* PC */
  }
}

.subject-lp .nationwide-note-accent {
  color: var(--c-cta);
}


/* ============================================
   DELIVERY（お薬の受け取り方法）
   - inner-box（960px）
   - 上から：サブタイトル → h2 → カード4枚
   - SP：縦積み（カード幅100%、左に画像・右にテキスト）
   - PC：横並び（カード4枚、上に画像・下にテキスト）
   ============================================ */

.subject-lp .delivery {
  background: #fff;
  padding: 50px 0;
}


/* --------------------------------------------
   サブタイトル（バッジ）
   - ネイビー背景、白文字
   - 下部中央に CSS の疑似要素で三角形（吹き出しのしっぽ）
   - SP：20px / PC：18px
   -------------------------------------------- */
.subject-lp .delivery-subtitle {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 auto 10px;             /* SP基準 */
  padding: 4px 32px;
  background: var(--c-accent);
  border-radius: 24px;
  color: #fff;
  font-size: 20px;                  /* SP基準 */
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

@media (min-width: 768px) {
  .subject-lp .delivery-subtitle {
    font-size: 18px;                 /* PC */
    margin: 0 auto 14px;
  }
}

/* 下部中央に下向き三角形（吹き出しのしっぽ）をCSSで描画 */
.subject-lp .delivery-subtitle::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid var(--c-accent);
}


/* --------------------------------------------
   セクションタイトル
   - h2 のデフォルト（30px / Black / center / ネイビー）を継承
   -------------------------------------------- */
.subject-lp .delivery-title {
  margin-bottom: 30px;
}

@media (min-width: 768px) {
  .subject-lp .delivery-title {
    margin-bottom: 40px;
  }
}


/* --------------------------------------------
   カード一覧
   SP：縦積み、gap 12px
   PC：4カラム横並び、gap 8px
   -------------------------------------------- */
.subject-lp .delivery-list {
  display: flex;
  flex-direction: column;            /* SP基準 */
  gap: 12px;
}

@media (min-width: 768px) {
  .subject-lp .delivery-list {
    flex-direction: row;              /* PC */
    gap: 8px;
  }
}


/* --------------------------------------------
   カード（delivery-item）
   SP：横並び（画像左、テキスト右）、高さ116px、幅100%
   PC：縦並び（画像上、テキスト下）、高さ223〜224px、幅234px
   -------------------------------------------- */
.subject-lp .delivery-item {
  display: flex;
  flex-direction: row;               /* SP基準：画像左・テキスト右 */
  align-items: stretch;
  background: #fff;
  border: 2px solid var(--c-text);
  border-radius: 12px;
  overflow: hidden;
  min-height: 116px;                  /* SP基準 */
}

@media (min-width: 768px) {
  .subject-lp .delivery-item {
    flex-direction: column;           /* PC：画像上・テキスト下 */
    flex: 1;                          /* 4枚均等 */
    min-height: 224px;
  }
}


/* --------------------------------------------
   画像エリア
   SP：幅150px・高さ112px、左側に配置、角丸左のみ
   PC：幅100%・高さ112px、上に配置、角丸上のみ
   -------------------------------------------- */
.subject-lp .delivery-item-img {
  background: #eef9fe;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40%;                       /* SP基準 */
  height: auto;
}

@media (min-width: 768px) {
  .subject-lp .delivery-item-img {
    width: 100%;                       /* PC */
    height: 112px;
  }
}

.subject-lp .delivery-item-img img {
  max-width: 100%;
  max-height: 80%;                    /* 画像が枠内に収まるよう */
  height: auto;
  width: auto;
  display: block;
}


/* --------------------------------------------
   テキストエリア
   - タイトル + 注釈（あれば）
   - SP：右側に縦並び、左寄せ
   - PC：下側に縦並び、中央寄せ
   -------------------------------------------- */
.subject-lp .delivery-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;                 /* SP基準 */
  gap: 6px;
}

@media (min-width: 768px) {
  .subject-lp .delivery-item-body {
    padding: 16px 12px;                /* PC */
  }
}


/* --------------------------------------------
   カードタイトル（h3）
   SP：20px Bold（PC値より大きい）
   PC：18px Bold
   - 「バイク便」「翌日配送」「PUDO」「お近くの薬局」は青
   -------------------------------------------- */
.subject-lp .delivery-item-title {
  font-size: 20px;                    /* SP基準 */
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--c-text);
  margin: 0;
}

@media (min-width: 768px) {
  .subject-lp .delivery-item-title {
    font-size: 18px;                   /* PC */
  }
}

.subject-lp .delivery-item-title-accent {
  color: var(--c-primary);
  font-weight: 900;                   /* Black */
}


/* --------------------------------------------
   注釈
   SP・PC共通：14px Medium、ネイビー
   -------------------------------------------- */
.subject-lp .delivery-item-note {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-text);
  margin: 0;
  text-align: center;
}

/* ============================================
   FLOW（診察までの手順）
   - inner-box（960px）
   - 背景：薄い青 #edf7fc（bg-color-blue-01、PRICEと同じ）
   - タイトル → 注意ボックス → 3ステップ見出し → STEPカード3枚 → CTAボタン
   ============================================ */

.subject-lp .flow {
  /* bg-color-blue-01 で背景色は適用済み */
}


/* --------------------------------------------
   セクションタイトル「診察までの手順」
   h2 のデフォルト（30px / Black / center / ネイビー）を継承
   -------------------------------------------- */
.subject-lp .flow-title {
  margin-bottom: 40px;                /* SP基準 */
}

@media (min-width: 768px) {
  .subject-lp .flow-title {
    margin-bottom: 30px;               /* PC */
  }
}


/* --------------------------------------------
   attention（スマホと保険証あれば〜の注意ボックス）
   - スカイブルー背景 #06b4d7、白文字
   - 左：イラスト、右：テキスト
   - PC：440px幅、SP：画面幅いっぱい（最大442px程度）
   -------------------------------------------- */
.subject-lp .flow-attention {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 442px;
  margin: 0 auto;
  padding: 16px;
  background: var(--c-primary);        /* #06b4d7 */
  border-radius: 4.48px;
  margin-bottom: 30px;                 /* SP基準 */
}

@media (min-width: 768px) {
  .subject-lp .flow-attention {
    max-width: 440px;
    margin-bottom: 50px;                /* PC */
  gap: 16px;
  }
}

.subject-lp .flow-attention-img {
  flex-shrink: 0;
  width: 30%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.subject-lp .flow-attention-img img {
  max-width: 100%;
  height: auto;
}

.subject-lp .flow-attention-text {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.3;
  color: #fff;
  margin: 0;
  letter-spacing: 1px;
}

.subject-lp .flow-attention-text-strong {
  font-weight: 900;
}
@media (min-width: 768px) {
	.subject-lp .flow-attention-img {
	  width: 130px;
	}
	.subject-lp .flow-attention-text {
	  font-size: 20px;
	  letter-spacing: 0;
	}
	
}

/* --------------------------------------------
   3ステップ見出し「簡単 3 ステップ」
   - 「簡単」「ステップ」はネイビー（PC 24px / SP 25.6px）
   - 「3」はスカイブルー、Roboto Bold（30.72px）
   - 横並び、中央寄せ
   -------------------------------------------- */
.subject-lp .flow-step-headline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-bottom: 24px;
  color: var(--c-text);
}

.subject-lp .flow-step-headline-jp {
  font-size: 24px;                    /* SP基準 */
  font-weight: 700;
  letter-spacing: 1.28px;
  line-height: 1;
}

@media (min-width: 768px) {
  .subject-lp .flow-step-headline-jp {
    font-size: 24px;                     /* PC */
    letter-spacing: 1.2px;
  }
}

.subject-lp .flow-step-headline-num {
  font-family: 'Roboto', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: 1.536px;
  line-height: 1;
}


/* --------------------------------------------
   STEPカード一覧
   SP：1カラム縦積み、gap 16px
   PC：3カラム横並び、gap 9px
   -------------------------------------------- */
.subject-lp .flow-step-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;                  /* SP基準 */
}

@media (min-width: 768px) {
  .subject-lp .flow-step-list {
    flex-direction: row;
    gap: 9px;
    margin-bottom: 30px;                 /* PC */
  }
}


/* --------------------------------------------
   STEPカード（flow-step-item）
   - ネイビー枠 2px、角丸 12px、白背景
   - 上部：STEP ラベル（薄水色背景）
   - 下部：タイトル + 説明 + 画像
   SP：幅100%
   PC：flex: 1（3等分）
   -------------------------------------------- */
.subject-lp .flow-step-item {
  background: #fff;
  border: 2px solid var(--c-text);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .subject-lp .flow-step-item {
    flex: 1;
  }
}


/* --------------------------------------------
   STEPラベル
   - 薄水色 #dff5ff 背景、高さ 50px
   - 「STEP 1/2/3」 Roboto Bold 20px、ネイビー、中央寄せ
   -------------------------------------------- */
.subject-lp .flow-step-label {
  background: #dff5ff;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: 2px;
}

.subject-lp .flow-step-label-en {
  font-size: 21px;
}

.subject-lp .flow-step-label-num {
  font-size: 20px;
}


/* --------------------------------------------
   STEPカード本体（タイトル + 説明 + 画像）
   -------------------------------------------- */
.subject-lp .flow-step-body {
  padding: 30px 24px;                   /* SP基準 */
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;                              /* 親flexの空き高さを埋める */
}

@media (min-width: 768px) {
  .subject-lp .flow-step-body {
    padding: 20px 20px;                  /* PC */
  }
}

/* --------------------------------------------
   STEPタイトル（h3）
   SP：24px Bold / PC：20px Bold
   -------------------------------------------- */
.subject-lp .flow-step-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.2px;
  color: var(--c-text);
  text-align: center;
  margin: 0 0 20px;                    /* ← 下に16pxの間隔 */
}

@media (min-width: 768px) {
  .subject-lp .flow-step-title {
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 20px;                /* ← PCでは22px */
  }
}

/* --------------------------------------------
   STEP説明文
   SP：18px / PC：16px
   text-align: justify（両端揃え）
   -------------------------------------------- */
.subject-lp .flow-step-text {
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0.36px;
  color: var(--c-text);
  text-align: justify;
  margin: 0 0 16px;                    /* ← 下に16pxの間隔 */
  width: 100%;
}

@media (min-width: 768px) {
  .subject-lp .flow-step-text {
    font-size: 16px;
    letter-spacing: 0.32px;
    margin-bottom: 22px;                /* ← PCでは22px */
  }
}


/* --------------------------------------------
   STEP画像エリア
   - 薄水色 #dff5ff 背景、角丸 9.6px
   - 中に写真を配置（高さ 160px）
   -------------------------------------------- */
.subject-lp .flow-step-img {
  width: 100%;
  height: 160px;
  background: #dff5ff;
  border-radius: 9.6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: auto;            /* テキストが短い場合、画像をカード下部に押し下げる */
  flex-shrink: 0;              /* 高さ160pxが縮まないように */
}
.subject-lp .flow-step-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------
   CTAボタンの配置エリア
   -------------------------------------------- */
.subject-lp .flow-cta {
  display: flex;
  justify-content: center;
}


/* ============================================
   共通CTAボタン（.cta-btn）
   - FV、flow、case などで使い回す共通ボタン
   - SP：幅 440px、高さ 84px、メイン 24.5px
   - PC：幅 340px、高さ 60px、メイン 20px
   - スカイブルーのグラデーション
   ============================================ */
.subject-lp .cta-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  max-width: 440px;                    /* SP基準 */
  min-height: 84px;
  padding: 14px 30px 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1FA1FE 0%, #13C5F3 100%);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
  color: #fff;
  text-decoration: none;
}

@media (min-width: 768px) {
  .subject-lp .cta-btn {
    max-width: 340px;                   /* PC */
    min-height: 60px;
    padding: 10px 56px 12px;
  }
}

/* CTA サブテキスト「＼ 最短当日受け取りも可能 ／」 */
.subject-lp .cta-btn-sub {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
  font-size: 17px;                     /* SP基準 */
  font-weight: 700;
  color: #fff8c7;                      /* 薄いクリーム色 */
  line-height: 1.3;
}

@media (min-width: 768px) {
  .subject-lp .cta-btn-sub {
    font-size: 14px;                    /* PC */
  }
}

/* 左右の斜め線 ＼ ／ をCSSで描画 */
.subject-lp .cta-btn-sub::before,
.subject-lp .cta-btn-sub::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.5px;
  height: 18px;                        /* SP基準 */
  background: #fff8c7;
}

@media (min-width: 768px) {
  .subject-lp .cta-btn-sub::before,
  .subject-lp .cta-btn-sub::after {
    height: 16px;                       /* PC */
  }
}

.subject-lp .cta-btn-sub::before {
  left: 0;
  transform: translateY(-50%) rotate(-20deg);
}
.subject-lp .cta-btn-sub::after {
  right: 0;
  transform: translateY(-50%) rotate(20deg);
}

/* CTA メインテキスト */
.subject-lp .cta-btn-main {
  font-size: 24.5px;                   /* SP基準 */
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.3;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
}

@media (min-width: 768px) {
  .subject-lp .cta-btn-main {
    font-size: 20px;                    /* PC */
  }
}

/* CTA 右の矢印「›」をCSSで描画 */
.subject-lp .cta-btn::after {
  content: "›";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;                     /* SP基準 */
  font-weight: 400;
  line-height: 1;
}

@media (min-width: 768px) {
  .subject-lp .cta-btn::after {
    font-size: 24px;                    /* PC */
  }
}

/* ============================================
   CASE（症例紹介）
   - inner-box（960px）
   - 背景：グレー #dce3ea（bg-color-gray-01）
   - サブタイトル → タイトル → ペルソナボックス → タイムテーブル比較画像
   ============================================ */

/* --------------------------------------------
   背景色帯（セクション全幅）
   -------------------------------------------- */
.subject-lp .bg-color-gray-01 {
  background: #dce3ea;
  padding-top: 50px;                  /* SP基準 */
  padding-bottom: 50px;
}

@media (min-width: 768px) {
  .subject-lp .bg-color-gray-01 {
    padding-top: 50px;                 /* PC */
    padding-bottom: 50px;
  }
}


/* --------------------------------------------
   サブタイトル「忙しくて時間がなくても」
   - ピンク背景 #ef6f74、白文字
   - 角丸 26px（大きめ）
   - 下に三角形のしっぽ（同色）
   -------------------------------------------- */
.subject-lp .case-subtitle {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 auto 20px;
  padding: 4px 32px;
  background: #ef6f74;
  border-radius: 26px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* 下部中央に下向き三角形（吹き出しのしっぽ） */
.subject-lp .case-subtitle::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid #ef6f74;
}


/* --------------------------------------------
   メインタイトル
   - 上段：「SOKUYAKUロゴ画像」+ 「なら」（横並び）
   - 下段：「通院や待ち時間を短縮！」（30px ExtraBold）
   -------------------------------------------- */
.subject-lp .case-title {
  text-align: center;
  margin-bottom: 32px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--c-text);
}

.subject-lp .case-title-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 8px;
}
@media (min-width: 768px) {
  .subject-lp .case-title-row {
    margin-bottom: 0;                   /* PC：横並びなので下マージン不要 */
    margin-right: -2px;                  /* PC：「短縮！」との間隔 */
    vertical-align: middle;
  }
}


/* SOKUYAKUロゴ装飾画像 */
.subject-lp .case-title-logo {
  height: 24px;                       /* SP基準 */
  width: auto;
}

@media (min-width: 768px) {
  .subject-lp .case-title-logo {
    height: 36px;                      /* PC */
  }
}

.subject-lp .case-title-row-text {
  font-size: 20px;                    /* SP基準 */
  font-weight: 700;
}

@media (min-width: 768px) {
  .subject-lp .case-title-row-text {
    font-size: 24px;                   /* PC */
  }
}

.subject-lp .case-title-main {
  display: block;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .subject-lp .case-title-main {
    display: inline;                    /* PC：横並び（前の要素と同じ行に） */
    vertical-align: middle;
  }
}

/* --------------------------------------------
   ペルソナボックス（凸形状）
   - 白背景、#376C95 ボーダー2px、角丸12px
   - 「例えば…」ラベルが上部中央に絶対配置（凸形状の出っ張り）
   - position: relative で上部タブを絶対配置
   -------------------------------------------- */
.subject-lp .case-persona {
  position: relative;
  background: #fff;
  border: 2px solid #376C95;
  border-radius: 12px;
  padding: 20px 24px 20px;            /* SP基準：上部padding大きめ（タブ分） */
  margin: 80px auto 40px;              /* 上にも余白（タブが上にはみ出るため） */
  max-width: 440px;
}

@media (min-width: 768px) {
  .subject-lp .case-persona {
    padding: 30px 26px 30px;            /* PC */
    margin: 80px auto 30px;
  }
}


/* 「例えば…」ラベル：上部のタブ部分（凸形状の出っ張り）
   - 白背景、#376C95 ボーダー、上部だけ角丸
   - 親 .case-persona の上端中央に絶対配置
   - 下辺は親のボーダーと重ねて消す */
.subject-lp .case-persona-label {
  position: absolute;
  left: 50%;
  top: 0px;                            /* 親の上端と重なる位置 */
  transform: translate(-50%, -100%);     /* 自分の高さの60%分上にずらす（タブが上にはみ出る） */
  background: #fff;
  border: 2px solid #376C95;
  border-bottom: none;                   /* 下辺は親ボーダーと重なるので消す */
  border-radius: 12px 12px 0 0;
  padding: 8px 50px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-text);
  margin: 0;
  white-space: nowrap;
}


/* --------------------------------------------
   ペルソナボックス内：写真 + 属性リスト
   - 左に写真、右に属性3つ
   -------------------------------------------- */
.subject-lp .case-persona-box {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}


/* ペルソナ写真（画像自体に角丸＋背景が焼き込み済み） */
.subject-lp .case-persona-img {
  flex-shrink: 0;
  width: 30%;
  height: auto;
}

.subject-lp .case-persona-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (min-width: 768px) {
	.subject-lp .case-persona-box {
	  gap: 10px;
	  margin-bottom: 20px;
	}
	
	.subject-lp .case-persona-img {
	  flex-shrink: 0;
	  width: 115px;
	  height: 115px;
	}

	.subject-lp .case-persona-img img {
	  width: 100%;
	  height: 100%;
	  object-fit: contain;
	  display: block;
	}
}

/* --------------------------------------------
   属性リスト（年齢・職業／住まい／診療科目）
   -------------------------------------------- */
.subject-lp .case-persona-attrs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.subject-lp .case-persona-attr {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 属性ラベル（ネイビーの角丸バッジ） */
.subject-lp .case-persona-attr-label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 23px;
  background: var(--c-text);
  border-radius: 15px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.subject-lp .case-persona-attr-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.2;
  margin: 0;
}


/* ペルソナ説明文 */
.subject-lp .case-persona-text {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.15px;
  color: var(--c-text);
  margin: 0;
}
@media (min-width: 768px) {
	.subject-lp .case-persona-attrs {
	  gap: 10px;

	}

	.subject-lp .case-persona-attr {
	  gap: 12px;
	}

	/* 属性ラベル（ネイビーの角丸バッジ） */
	.subject-lp .case-persona-attr-label {
	  width: 91px;
	}

	.subject-lp .case-persona-attr-value {
	  font-size: 16px;
	  font-weight: 700;
	  color: var(--c-text);
	  line-height: 1.2;
	  margin: 0;
	}


/* ペルソナ説明文 */
.subject-lp .case-persona-text {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.15px;
  color: var(--c-text);
  margin: 0;
}
	
}
/* --------------------------------------------
   タイムテーブル比較画像
   - 1枚画像（PC/SP切替）
   - 中央寄せ、画面幅に応じてレスポンシブ
   -------------------------------------------- */
.subject-lp .case-timetable {
  width: 100%;
  margin: 0 auto;
}

.subject-lp .case-timetable img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   DIFFERENCE（オンライン診療と対面診療の違い）
   - inner-box（960px）
   - HTMLテーブル + CSSで罫線・色を作る
   - 中央列（オンライン診療）をターコイズ枠で強調
   ============================================ */

.subject-lp .difference {
  background: #fff;
  padding: 50px 0;
}


/* --------------------------------------------
   セクションタイトル
   - h2 のデフォルト（30px / Black / center / ネイビー）を継承
   -------------------------------------------- */
.subject-lp .difference-title {
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .subject-lp .difference-title {
    margin-bottom: 40px;
  }
}


/* --------------------------------------------
   テーブル全体
   - position: relative を設定して、ターコイズ枠を疑似要素で描画
   - 全体に薄いグレー枠
   -------------------------------------------- */
.subject-lp .difference-table-wrap {
  position: relative;
  margin-bottom: 40px;
}

.subject-lp .difference-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border: 2px solid #D4DFEA;              /* テーブル全体の枠 */
}


/* --------------------------------------------
   列幅指定
   - 項目列：固定幅（SP 38px / PC 164px）
   - オンライン列・対面列：50%ずつ（残りを等分）
   -------------------------------------------- */
.subject-lp .difference-table th:nth-child(1),
.subject-lp .difference-table td:nth-child(1) {
  width: 38px;                            /* SP基準 */
  writing-mode: vertical-rl;
  letter-spacing: 0.1em;
}

.subject-lp .difference-table th:nth-child(2),
.subject-lp .difference-table td:nth-child(2),
.subject-lp .difference-table th:nth-child(3),
.subject-lp .difference-table td:nth-child(3) {
  width: 50%;
}

@media (min-width: 768px) {
  .subject-lp .difference-table th:nth-child(1),
  .subject-lp .difference-table td:nth-child(1) {
    width: 164px;
	 writing-mode: horizontal-tb; /* PC */
  }
}


/* --------------------------------------------
   ヘッダー行
   - 空白セル / オンライン（ターコイズ背景） / 対面（白背景）
   -------------------------------------------- */
.subject-lp .difference-th-empty {
  background: transparent;
  border: none;
}

.subject-lp .difference-th-online {
  background: #00ACCF;                    /* ターコイズ */
  color: #fff;
  padding: 12px 8px;
  text-align: center;
  vertical-align: middle;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.subject-lp .difference-th-f2f {
  background: #D4DFEA;
  color: var(--c-text);
  padding: 12px 8px;
  text-align: center;
  vertical-align: middle;
}

/* ヘッダーのメインタイトル */
.subject-lp .difference-th-main {
  display: block;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 1px;
}

/* ヘッダーのサブタイトル「（ SOKUYAKU ）」「（ 従来の通院 ）」 */
.subject-lp .difference-th-sub {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.6px;
  margin-top: 4px;
}


/* --------------------------------------------
   ボディ行共通
   -------------------------------------------- */
.subject-lp .difference-table td,
.subject-lp .difference-table tbody th {
  padding: 12px 8px;
  text-align: center;
  vertical-align: middle;
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.8px;
}

@media (min-width: 768px) {
  .subject-lp .difference-table td,
  .subject-lp .difference-table tbody th {
    padding: 20px 16px;
  }
}


/* --------------------------------------------
   行の上下ボーダー
   - 1行目（診察場所）の上にもボーダー追加
   - 各行の下：破線（最後の「診断書」を除く）
   -------------------------------------------- */

/* すべての行の下に破線（デフォルト） */
.subject-lp .difference-table tbody tr td,
.subject-lp .difference-table tbody tr th {
  border-bottom: 1px dashed #c8d3df;
  /* writing-mode: vertical-rl; */
}

/* 1行目の上にもボーダー追加（診察場所の行の上） */
.subject-lp .difference-table tbody tr:first-child td,
.subject-lp .difference-table tbody tr:first-child th {
  border-top: 1px solid #D4DFEA;
}

/* 最後の行（診断書）の下ボーダーは消す（テーブル全体borderと重ねる） */
.subject-lp .difference-table tbody tr:last-child td,
.subject-lp .difference-table tbody tr:last-child th {
  border-bottom: none;
}


/* --------------------------------------------
   項目ラベル（左列：診察場所、診療対応時間など）
   -------------------------------------------- */
.subject-lp .difference-row-label {
  font-size: 14px;                        /* SP基準 */
  font-weight: 400;
  letter-spacing: 0.7px;
  background: #fff;
}

@media (min-width: 768px) {
  .subject-lp .difference-row-label {
    font-size: 16px;
    letter-spacing: 0.8px;
  }
}


/* オンライン診療セル（中央列） */
.subject-lp .difference-cell-online {
  font-weight: 700;
  background: #fff;
}


/* 対面診療セル（右列） */
.subject-lp .difference-cell-f2f {
  font-weight: 500;
  background: #fff;
}


/* セル内の注釈（※土日祝日は休診が多い） */
.subject-lp .difference-cell-note {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  letter-spacing: 0.6px;
}


/* --------------------------------------------
   ターコイズの枠（中央列を囲む）
   - position: absolute でテーブル中央列にぴったり重ねる
   - calc() で項目列を引いた残りの半分を指定（列幅と同期）
   - pointer-events: none でクリックを邪魔しない
   -------------------------------------------- */
.subject-lp .difference-table-wrap::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 38px;                             /* SP基準：項目列の幅分右にずらす */
  width: calc((100% - 38px) / 2);          /* SP基準：項目列を引いた残りの半分 */
  height: 100.5%;
  border: 4px solid var(--c-accent);   /* ターコイズ #00accf */
  border-radius: 8px;
  pointer-events: none;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .subject-lp .difference-table-wrap::after {
    left: 164px;                           /* PC */
    width: calc((100% - 164px) / 2);
    border-width: 4px;
  }
}


/* --------------------------------------------
   CTAボタンエリア
   -------------------------------------------- */
.subject-lp .difference-cta {
  display: flex;
  justify-content: center;
}

/* ============================================
   CHOICE（どのクリニックを選べば良いの？）
   - inner-box（960px）
   - ヘッダー（タイトル + 装飾画像） → ピンク背景のコンテンツボックス
   - ヘッダーのイラストがピンクボックスに重なる構造（z-indexで前後制御）
   - フォントサイズは clamp() で可変
   ============================================ */

.subject-lp .choice {
  background: #fff;
  padding: 0 0 50px;
}


/* --------------------------------------------
   ヘッダー（タイトル + 装飾画像）
   - Flexboxで横並び、中央寄せ
   - z-index: 1（ピンクボックスより下にして、重なる部分が隠れる）
   - margin-bottom マイナスで、ピンクボックスと重なる量を指定
   -------------------------------------------- */
.subject-lp .choice-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: -20px;               /* SP基準：ピンクボックスと重なる量 */
}

@media (min-width: 768px) {
  .subject-lp .choice-head {
    gap: 20px;
    margin-bottom: -20px;              /* PC */
  }
}


/* セクションタイトル
   - clamp(最小, 可変, 最大)：画面幅に応じて自動調整 */
.subject-lp .choice-title {
  font-size: clamp(22px, 6vw, 30.611px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-text);
  text-align: center;
  margin: 0;
}


/* タイトル右の装飾画像（イラスト）
   - flex-shrink: 0 で縮まないように
   - 高さも clamp() で可変 */
.subject-lp .choice-title-img {
  flex-shrink: 0;
  width: auto;
  height: clamp(120px, 35vw, 180px);   /* SP基準：画面幅35% / 最小120 / 最大180 */
}

@media (min-width: 768px) {
  .subject-lp .choice-title-img {
    height: clamp(140px, 18vw, 200px); /* PC：画面幅18% / 最小140 / 最大200 */
  }
}


/* --------------------------------------------
   コンテンツボックス（ピンク背景）
   - 背景：#ffeae9
   - 角丸 16px
   - z-index: 2（イラストの上に被さる）
   - position: relative で z-index 有効化
   -------------------------------------------- */
.subject-lp .choice-content {
  position: relative;
  z-index: 2;
  background: #ffeae9;
  border-radius: 16px;
  padding: 30px 20px 30px;            /* SP基準：上部padding大きめ（イラスト分） */
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

@media (min-width: 768px) {
  .subject-lp .choice-content {
    padding: 30px 40px 30px;            /* PC */
    gap: 24px;
  }
}


/* コンテンツボックス内のテキスト
   - clamp() で画面幅に応じて可変 */
.subject-lp .choice-text {
  text-align: center;
  font-size: clamp(18px, 4.8vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-text);
  margin: 0;
}

/* 「クリニックの口コミ」のアクセント色（ピンク） */
.subject-lp .choice-text-accent {
  color: var(--c-cta);
}


/* --------------------------------------------
   口コミイラスト
   -------------------------------------------- */
.subject-lp .choice-img {
  display: flex;
  justify-content: center;
  width: 100%;
}

.subject-lp .choice-img img {
  max-width: 340px;
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 768px) {
  .subject-lp .choice-img img {
    max-width: 380px;
  }
}

/* ============================================
   REVIEW（クリニックへの口コミ）
   - inner-box（960px）
   - 背景：薄い青 #dde8f4（bg-color-blue-03、新規）
   - サブタイトル → タイトル → 口コミカード（横スクロール5枚） → ドット装飾
   ============================================ */

/* --------------------------------------------
   背景色帯（セクション全幅）
   -------------------------------------------- */
.subject-lp .bg-color-blue-03 {
  background: #dde8f4;
  padding-top: 50px;                  /* SP基準 */
  padding-bottom: 50px;
}

@media (min-width: 768px) {
  .subject-lp .bg-color-blue-03 {
    padding-top: 50px;                 /* PC */
    padding-bottom: 60px;
  }
}


/* --------------------------------------------
   セクションヘッダー（サブタイトル + メインタイトル）
   - 中央寄せ
   -------------------------------------------- */
.subject-lp .review-head {
  text-align: center;
  margin-bottom: 30px;
}

@media (min-width: 768px) {
  .subject-lp .review-head {
    margin-bottom: 30px;
  }
}

/* サブタイトル「内科を受診した方の」
   - SP: 24px / PC: 16px、Regular、ネイビー */
.subject-lp .review-subtitle {
  font-size: 24px;                    /* SP基準 */
  font-weight: 400;
  line-height: 1;
  color: var(--c-text);
  margin: 0 0 8px;
}

@media (min-width: 768px) {
  .subject-lp .review-subtitle {
    font-size: 16px;                   /* PC */
  }
}

/* メインタイトル「クリニックへの口コミ」
   - h2 のデフォルト（30px / center / ネイビー）を継承 */
.subject-lp .review-title {
  margin: 0;
  font-weight: 900;
}


/* --------------------------------------------
   口コミカード一覧（横スクロール）
   - overflow-x: auto で横スクロール
   - SP: gap 18px、padding で左右に余白
   - PC: gap 10px
   -------------------------------------------- */
.subject-lp .review-list {
  display: flex;
  gap: 18px;                          /* SP基準 */
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 20px 20px;                /* スクロールバー分の余白 */
  margin: 0 -20px;                    /* SP: inner-box の padding を打ち消す */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

@media (min-width: 768px) {
  .subject-lp .review-list {
    gap: 10px;                         /* PC */
    margin: 0;
    padding: 0 0 20px;
  }
}

/* スクロールバーの装飾（WebKit） */
.subject-lp .review-list::-webkit-scrollbar {
  height: 8px;
}
.subject-lp .review-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}
.subject-lp .review-list::-webkit-scrollbar-thumb {
  background: #93C5E3;
  border-radius: 4px;
}
.subject-lp .review-list::-webkit-scrollbar-thumb:hover {
  background: #7BB3D6;                 /* ホバー時はやや濃く */
}

/* Firefox 用 */
.subject-lp .review-list {
  scrollbar-color: #93C5E3 rgba(255, 255, 255, 0.5);
}


/* --------------------------------------------
   口コミカード（review-item）
   - 白背景、角丸 19.179px
   - SP: 326×403px / PC: 304×351px
   - 上から：星評価 → 本文 → 投稿者
   -------------------------------------------- */
.subject-lp .review-item {
  flex-shrink: 0;                     /* スクロール内で縮まない */
  background: #fff;
  border-radius: 19.179px;
  display: flex;
  flex-direction: column;
  width: 326px;                        /* SP基準 */
  min-height: 403px;
  padding: 30px 28px 26px;             /* SP基準 */
}

@media (min-width: 768px) {
  .subject-lp .review-item {
    width: 304px;                       /* PC */
    min-height: 351px;
    padding: 30px 18px 26px;
  }
}


/* --------------------------------------------
   星評価バー
   - 上段：星5つ（横並び）
   - 下段：評価値「5.0」（オレンジ、Roboto Regular）
   -------------------------------------------- */
.subject-lp .review-stars {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  margin-bottom: 22px;                /* SP基準 */
  gap: 6px;
}

@media (min-width: 768px) {
  .subject-lp .review-stars {
    margin-bottom: 16px;               /* PC */
  }
}

/* 評価値「5.0」 */
.subject-lp .review-stars-rank {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;                    /* SP基準 */
  font-weight: 400;
  color: #df8600;
  line-height: 1.8;
  margin-bottom: 2px;
}

@media (min-width: 768px) {
  .subject-lp .review-stars-rank {
    font-size: 18px;                   /* PC */
  }
}

/* 星アイコンの並び */
.subject-lp .review-stars-icons {
  display: inline-flex;
  align-items: center;
  gap: 3px;                           /* 星と星の間隔 */
}

.subject-lp .review-stars-icons img {
  width: 19px;                        /* SP基準 */
  height: auto;
  display: block;
}

@media (min-width: 768px) {
  .subject-lp .review-stars-icons img {
    width: 16px;                       /* PC */
  }
}


/* --------------------------------------------
   本文
   - SP: 16px / PC: 14px、line-height 1.8、ネイビー
   - flex: 1 で残りスペースを埋める（プロフィールを下に押し下げる）
   -------------------------------------------- */
.subject-lp .review-text {
  font-size: 16px;                    /* SP基準 */
  line-height: 1.8;
  color: var(--c-text);
  margin: 0;
  flex: 1;                            /* プロフィールを下に押し下げる */
}

@media (min-width: 768px) {
  .subject-lp .review-text {
    font-size: 14px;                   /* PC */
  }
}


/* --------------------------------------------
   投稿者プロフィール
   - 右寄せ、SP 16px / PC 14px、Regular、ネイビー
   -------------------------------------------- */
.subject-lp .review-profile {
  font-size: 16px;                    /* SP基準 */
  line-height: 1.8;
  color: var(--c-text);
  text-align: right;
  margin: 16px 0 0;
}

@media (min-width: 768px) {
  .subject-lp .review-profile {
    font-size: 14px;                   /* PC */
  }
}


/* --------------------------------------------
   ドット装飾（CSSで描画）
   - 横一列に並ぶ小さい点
   - background-image の radial-gradient で点を生成
   -------------------------------------------- */
.subject-lp .review-dots {
  width: 130px;
  height: 15px;
  margin: 30px auto 0;
  background-image: radial-gradient(circle, var(--c-text) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  background-repeat: repeat-x;
  background-position: left center;
  opacity: 0.6;
}




/* ============================================
   OTHER-SPECIALTIES（その他の診療科）
   - inner-box-narrow（700px）
   - SP：3列固定、中身に合わせて高さ自動
   - PC：固定120pxサイズ
   ============================================ */

.subject-lp .other-specialties {
  background: #fff;
  padding: 50px 0;
}


/* セクションタイトル */
.subject-lp .other-specialties-title {
  letter-spacing: 2.1px;
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .subject-lp .other-specialties-title {
    margin-bottom: 40px;
  }
}


/* 診療科目カード一覧 */
.subject-lp .other-specialties-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  /* text-align: right; */
}

@media (min-width: 768px) {
  .subject-lp .other-specialties-list {
    margin-bottom: 32px;
  }
}

/* li の幅指定（SP: 3列 / PC: 固定120px） */
/* li に正方形を当てる */
.subject-lp .other-specialties-list > li {
  width: calc((100% - 12px) / 3);
  aspect-ratio: 1 / 1;                 /* SP基準：li を正方形に */
}

@media (min-width: 768px) {
  .subject-lp .other-specialties-list > li {
    width: 120px;
    height: 120px;
    aspect-ratio: auto;
  }
}

/* a は親 li いっぱい */
.subject-lp .other-specialties-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* gap: 5px; */
  width: 100%;
  height: 100%;                        /* 親 li の高さに従う */
  padding: 6% 0;
  background: #e7f4f9;
  border: 3px solid var(--c-text);
  border-radius: 10px;
  text-decoration: none;
  box-sizing: border-box;
  transition: opacity 0.3s;
}

@media (min-width: 768px) {
  .subject-lp .other-specialties-item {
    width: 120px;
    height: 120px;
    padding: 12px 16px 8px;
  }
}


/* イラスト */
.subject-lp .other-specialties-item-img {
  width: auto;
  height: 70%;
  max-width: 80%;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  padding-bottom: 8%;
}

@media (min-width: 768px) {
  .subject-lp .other-specialties-item-img {
    height: 60px;
    max-width: 100%;
  }
}


/* 科目名 */
.subject-lp .other-specialties-item-name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-text);
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .subject-lp .other-specialties-item-name {
    font-size: 18px;
  }
}


/* 補足テキスト「など、30科目以上に対応」 */
.subject-lp .other-specialties-note {
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 1.5389px;
  color: var(--c-text);
  margin: 0;
  text-align: right;
}
@media (min-width: 768px) {
.subject-lp .other-specialties-note {
    font-size: 22px;
	text-align: center;
  }
}


@media screen and (min-width:481px) and ( max-width:767px) {
	.subject-lp .other-specialties-item {
	  padding: 6% 0;
	}
	.subject-lp .other-specialties-item-name {
	  font-size: 24px;
	}
	.subject-lp .other-specialties-item-img {
		padding-bottom: 4%;
	}
	
}
@media (max-width: 400px) {
  .subject-lp .other-specialties-item-name {
    font-size: 16px;
  }
}


/* ============================================
   FAQ（よくある質問）
   - inner-box-narrow（700px）
   - 背景：薄い青 #edf7fc（bg-color-blue-01）
   - <div> + <button> でアコーディオン実装
   - grid-template-rows: 0fr → 1fr で開閉アニメーション
   - JS は .is-open クラスの toggle だけ
   ============================================ */


/* セクションタイトル */
.subject-lp .faq-title {
  letter-spacing: 2.4px;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .subject-lp .faq-title {
    margin-bottom: 40px;
  }
}


/* FAQ リスト */
.subject-lp .faq-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (min-width: 768px) {
	.subject-lp .faq-list {
	  gap: 10px;
}
}

/* 質問バー（button）SP基準 */
.subject-lp .faq-question {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1.808px solid #d9e9f2;
  border-radius: 50px;
  padding: 10px 24px 10px 8px;
  cursor: pointer;
  transition: background 0.3s;
  min-height: 49px;

  /* button のデフォルトリセット */
  width: 100%;
  font-family: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}

.subject-lp .faq-question:hover {
  background: #f5fafd;
}

@media (min-width: 768px) {
  .subject-lp .faq-question {
    align-items: center;
    padding: 4px 20px 4px 10px;
  }
}


/* 質問テキスト */
.subject-lp .faq-question-text {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #082d59;
  padding: 0 24px 0 6px;
}

@media (min-width: 768px) {
  .subject-lp .faq-question-text {
    line-height: 1.4;
    padding-top: 0;
  }
}


/* Q / A マーク（円形） */
.subject-lp .faq-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.subject-lp .faq-mark-q {
  background: #D9E9F2;
  color: #00accf;
}

.subject-lp .faq-mark-a {
  background: #00accf;
  color: #fff;
}


/* --------------------------------------------
   矢印（CSSで描画）
   - margin-top ではなく transform: translateY() で位置調整
   - transform だけが変化するので、レイアウトに影響なし
   -------------------------------------------- */
.subject-lp .faq-arrow {
  flex-shrink: 0;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-right: 2.5px solid #00accf;
  border-bottom: 2.5px solid #00accf;
  transform: translateY(-2px) rotate(45deg);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.subject-lp .faq-item.is-open .faq-arrow {
  transform: translateY(2px) rotate(-135deg);
}


/* --------------------------------------------
   回答エリア（grid-template-rows 方式）
   - .faq-answer: grid で行高さをアニメーション（0fr → 1fr）
   - .faq-answer-inner: 実際の中身、overflow: hidden で隠す
   - 中身の自然な高さに自動フィット
   -------------------------------------------- */
.subject-lp .faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.subject-lp .faq-answer-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 12px 0 10px;              /* SP基準：上下paddingは0で初期化 */
  overflow: hidden;
  transition: padding 0.3s ease;
}

@media (min-width: 768px) {
  .subject-lp .faq-answer-inner {
    padding: 0 20px 0 10px;              /* PC */
  }
}


/* 開いた状態 */
.subject-lp .faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

.subject-lp .faq-item.is-open .faq-answer-inner {
  padding-top: 12px;
  padding-bottom: 4px;
}


/* 回答テキスト */
.subject-lp .faq-answer-text {
  flex: 1;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.16px;
  color: #082d59;
}

.subject-lp .faq-answer-text p {
  margin: 0 0 4px;
}

.subject-lp .faq-answer-text p:last-child {
  margin-bottom: 0;
}


/* 回答内のリンク */
.subject-lp .faq-link {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ============================================
   CTA-APP（アプリダウンロードCTA）
   - 背景：cta-app-bg.webp + 薄水色 #b9e5fb のオーバーレイ
   - PC：角丸30pxのカード（700×240px）が中央配置
   - SP：フル幅セクション（角丸なし）
   - 内容：吹き出し型サブタイトル → メインタイトル → ストアボタン2つ
   ============================================ */

.subject-lp .cta-app {
  background: #fff;
  padding: 40px clamp(16px, 4vw, 24px);                          /* SP基準：フル幅なのでセクションpaddingなし */
}

@media (min-width: 768px) {
  .subject-lp .cta-app {
    padding: 50px 20px;                 /* PC：背景画像の周りに余白 */
  }
}


/* --------------------------------------------
   コンテンツボックス
   - SP：フル幅、角丸なし
   - PC：700×240px、角丸30px
   - 背景：cta-app-bg.webp + #b9e5fb のオーバーレイ
   -------------------------------------------- */
.subject-lp .cta-app-box {
  position: relative;
  width: 100%;
  background-image: url("../img/subjects/cta_app_bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 40px 20px 32px;             /* SP基準 */
  border-radius: 20px;
}

@media (min-width: 768px) {
  .subject-lp .cta-app-box {
    max-width: 700px;
    margin: 0 auto;
    border-radius: 30px;
    padding: 30px 100px;
  }
}


/* --------------------------------------------
   サブタイトル（吹き出し形状）
   - 白い角丸の本体 + 下に三角の尻尾（::after で再現）
   - 中央寄せ
   -------------------------------------------- */
.subject-lp .cta-app-sub {
  position: relative;
  background: #fff;
  border-radius: 50px;                 /* pill形状 */
  max-width: 336px;
  margin: 0 auto 20px;
  padding: 14px 20px;
}

/* 吹き出しの三角（尻尾） */
.subject-lp .cta-app-sub::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 12px solid #fff;
}

@media (min-width: 768px) {
  .subject-lp .cta-app-sub {
    max-width: 310px;
    margin-bottom: 20px;
    padding: 12px 20px;
  }
}


/* サブタイトル内テキスト */
.subject-lp .cta-app-sub-text {
  text-align: center;
  font-size: 20px;                    /* SP基準 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.8px;
  color: var(--c-primary);            /* #06b4d7 */
  margin: 0;
}

@media (min-width: 768px) {
  .subject-lp .cta-app-sub-text {
    font-size: 18px;                   /* PC */
    letter-spacing: 0.64px;
  }
}


/* --------------------------------------------
   メインタイトル「無料でダウンロードする」
   -------------------------------------------- */
.subject-lp .cta-app-title {
  text-align: center;
  font-size: 30px;                    /* SP基準 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--c-text);                /* #193255 */
  margin: 0 0 20px;
}

@media (min-width: 768px) {
  .subject-lp .cta-app-title {
    font-size: 32px;                   /* PC */
    letter-spacing: 1.12px;
    margin-bottom: 20px;
  }
}


/* --------------------------------------------
   アプリストアボタン
   - iOS と Android を横並び中央寄せ
   - SP：少し大きめ
   - PC：少し小さめ
   -------------------------------------------- */
.subject-lp .cta-app-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
                              /* SP基準 */
  width: 100%;
  gap: 8px;
}

@media (min-width: 768px) {
  .subject-lp .cta-app-buttons {
    gap: 12px;
  }
}


/* ボタン共通 */
.subject-lp .cta-app-btn {
  display: inline-block;
  transition: opacity 0.3s;
}

.subject-lp .cta-app-btn:hover {
  opacity: 0.8;
}

.subject-lp .cta-app-btn img {
  display: block;
  /* height: auto; */                /* SP基準 */
  /* width: 80px; */
}

@media (min-width: 768px) {
  .subject-lp .cta-app-btn img {
    /* height: 80px; */                      /* PC */
  }
}

/* ============================================
   CTA-LINE（LINE相談CTA）
   - inner-box-narrow（700px）
   - 背景：薄水色 #dff5ff（bg-color-blue-04）
   - SP：吹き出しと女性が縦並び、三角は下向き
   - PC：吹き出しと女性が横並び、三角は右向き
   ============================================ */


/* --------------------------------------------
   背景色クラス（新規）
   -------------------------------------------- */
.subject-lp .bg-color-blue-04 {
  background: #dff5ff;
}


/* --------------------------------------------
   セクション全体
   -------------------------------------------- */
.subject-lp .cta-line {
  padding-top: 40px;
  padding-bottom: 40px;
}

@media (min-width: 768px) {
  .subject-lp .cta-line {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}


/* --------------------------------------------
   ラッパー（吹き出し + 女性画像）
   - SP：縦並び（女性が下）
   - PC：横並び（女性が右）
   -------------------------------------------- */
.subject-lp .cta-line-wrap {
  display: flex;
  flex-direction: column;              /* SP：縦並び */
  align-items: center;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .subject-lp .cta-line-wrap {
    flex-direction: row;                /* PC：横並び */
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 30px;
  }
}


/* --------------------------------------------
   吹き出し本体
   - 白背景、角丸
   - SP：下に三角の尻尾（::after で下向き）
   - PC：右に三角の尻尾（::after で右向き）
   -------------------------------------------- */
.subject-lp .cta-line-box {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 30px 10px 26px;             /* SP基準 */
  width: 90%;
  margin-bottom: 24px;                 /* SP：下に三角分の余白 */
}

@media (min-width: 768px) {
  .subject-lp .cta-line-box {
    flex: 1;                            /* PC：横並びで残りスペース */
    max-width: 450px;
    padding: 26px 30px 22px;
    margin-bottom: 0;                   /* PC：横並びなので下余白不要 */
    margin-right: 18px;                 /* PC：右に三角分の余白 */
  }
}


/* SP：下向き三角の尻尾 */
.subject-lp .cta-line-box::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 14px solid #fff;
}

/* PC：右向き三角の尻尾（SPの下向き三角を上書き） */
@media (min-width: 768px) {
  .subject-lp .cta-line-box::after {
    bottom: auto;
    left: auto;
    top: 50%;
    right: -16px;
    transform: translateY(-50%);
    border-left: 18px solid #fff;       /* 右向き：左に塗りつぶし */
    border-right: 0;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
  }
}


/* --------------------------------------------
   スカイブルーラベル（吹き出し）
   - #06B4D7 背景、白いボーダー5px
   - 角丸ピル形状
   - 下に三角の尻尾（::after）
   -------------------------------------------- */
.subject-lp .cta-line-label {
  position: relative;
  display: block;
  background: var(--c-primary);        /* #06B4D7 */
  border: 5px solid #fff;
  border-radius: 50px;
  padding: 6px 18px;
  margin: -45px auto 16px;             /* 上に飛び出す形に */
  width: fit-content;
  max-width: calc(100% - 20px);
}

@media (min-width: 768px) {
  .subject-lp .cta-line-label {
    margin-top: -45px;
    margin-bottom: 14px;
  }
}


/* ラベル下の三角の尻尾（スカイブルー） */
.subject-lp .cta-line-label::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid var(--c-primary);
}


/* ラベル内テキスト */
.subject-lp .cta-line-label-text {
  display: block;
  font-size: 16px;                    /* SP基準 */
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .subject-lp .cta-line-label-text {
    font-size: 17px;
  }
}


/* --------------------------------------------
   メインテキスト「ご質問・ご不明点は / お気軽にお問い合わせください」
   -------------------------------------------- */
.subject-lp .cta-line-text {
  text-align: center;
  font-size: 21px;                    /* SP基準 */
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--c-text);
  margin: 0;
}

@media (min-width: 768px) {
  .subject-lp .cta-line-text {
    font-size: 22px;
    letter-spacing: 1.4px;
  }
}


/* --------------------------------------------
   LINEキャラクター画像（女性）
   - SP：吹き出しの下、中央寄せ
   - PC：吹き出しの右、横並び
   -------------------------------------------- */
.subject-lp .cta-line-img {
  width: 160px;                       /* SP基準 */
  height: auto;
  display: block;
}

@media (min-width: 768px) {
  .subject-lp .cta-line-img {
    width: 150px;                      /* PC */
    flex-shrink: 0;
  }
}


/* --------------------------------------------
   LINE相談ボタン
   - 緑（#06c755）背景、内側影
   - 角丸ピル形状
   - 右に三角アイコン
   -------------------------------------------- */
.subject-lp .cta-line-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: #06c755;
  border-radius: 41px;
  box-shadow: inset -4.9px -4.9px 0 #009b3f;
  padding: 12px 60px;
  max-width: 398px;
  margin: 0 auto;
  transition: opacity 0.3s;
}

.subject-lp .cta-line-btn:hover {
  opacity: 0.9;
}

@media (min-width: 768px) {
  .subject-lp .cta-line-btn {
    box-shadow: inset -3px -3px 0 #009b3f;
    padding: 10px 50px;
    max-width: 340px;
  }
}


/* ボタンメインテキスト */
.subject-lp .cta-line-btn-main {
  display: block;
  text-align: center;
  color: #fff;
  line-height: 1.3;
}

.subject-lp .cta-line-btn-line {
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-size: 25.738px;
  font-weight: 900;
  letter-spacing: 0.77px;
}

.subject-lp .cta-line-btn-de {
  font-size: 19.61px;
  font-weight: 800;
}

.subject-lp .cta-line-btn-soudan {
  font-size: 24.513px;
  font-weight: 900;
  letter-spacing: 2.45px;
}

@media (min-width: 768px) {
  .subject-lp .cta-line-btn-line {
    font-size: 20px;
    letter-spacing: 0.6px;
  }

  .subject-lp .cta-line-btn-de {
    font-size: 16px;
  }

  .subject-lp .cta-line-btn-soudan {
    font-size: 20px;
    letter-spacing: 2px;
  }
}


/* ボタンサブテキスト */
.subject-lp .cta-line-btn-sub {
  display: block;
  text-align: center;
  color: #fff;
  font-size: 15.93px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 2px;
}

@media (min-width: 768px) {
  .subject-lp .cta-line-btn-sub {
    font-size: 14px;
  }
}


/* ボタン右側の三角アイコン */
.subject-lp .cta-line-btn-arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #fff;
}

@media (min-width: 768px) {
  .subject-lp .cta-line-btn-arrow {
    right: 20px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #fff;
  }
}

/* ============================================
   FLOATING-BANNER（追従バナー）
   - 画面下に position: fixed で固定
   - 初期状態は非表示、.is-visible クラスで表示
   - PC：白い半透明背景（backdrop-filter）+ 閉じるボタン
   - SP：透明背景、閉じるボタンなし
   ============================================ */

.subject-lp .floating-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 8px 12px;
  pointer-events: none;                /* 初期は非表示なのでクリック無効 */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 表示状態 */
.subject-lp .floating-banner.is-visible {
  opacity: 1;
  pointer-events: auto;
  width: 100%;
  transform: translateY(0px);
  background-color: rgba(255,255,255,0.8);
}

@media (min-width: 768px) {
  .subject-lp .floating-banner {
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
.subject-lp .floating-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
  max-width: 600px;
  border-radius: 14px;
  margin: 0 0 5px 10px;
}
	
	
}




/* 閉じた状態（PCのみ閉じるボタン使用） */
.subject-lp .floating-banner.is-closed {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}


/* --------------------------------------------
   閉じるボタン（PCのみ）
   - 右上に絶対配置
   - CSSで × を描画
   -------------------------------------------- */
.subject-lp .floating-banner-close {
  display: none;                       /* SP：非表示 */
}

@media (min-width: 768px) {
  .subject-lp .floating-banner-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -10px;
    right: -5px;
    width: 30px;
    height: 30px;
    padding: 0;
    background: #fff;
    border: 2px solid #082D59;
    border-radius: 50%;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: opacity 0.3s;
  }

  .subject-lp .floating-banner-close:hover {
    opacity: 0.8;
  }
}


/* × アイコン（2本の斜線をCSSで描画） */
.subject-lp .floating-banner-close-icon {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}

.subject-lp .floating-banner-close-icon::before,
.subject-lp .floating-banner-close-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--c-text);
}

.subject-lp .floating-banner-close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.subject-lp .floating-banner-close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}


/* --------------------------------------------
   バナー内側（2つのボタンを横並び）
   -------------------------------------------- */
.subject-lp .floating-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .subject-lp .floating-banner-inner {
    gap: 14px;
    max-width: 650px;
  }
}


/* --------------------------------------------
   予約ボタン（メインCTA）
   - 青グラデーション、角丸
   - 上：サブテキスト（黄色）+ 装飾 ＼／
   - 下：メインテキスト（白）
   -------------------------------------------- */
.subject-lp .floating-banner-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: linear-gradient(to right, #1fa1fe, #13c5f3);
  border-radius: 10px;
  box-shadow: 0 0 8.8px rgba(255, 255, 255, 0.25);
  padding: 8px 16px;
  width: 70%;
  max-width: calc(100% - 130px);       /* SP：LINEボタン分の余白 */
  height: 70px;                       /* SP基準 */
  transition: opacity 0.3s;
}

.subject-lp .floating-banner-cta:hover {
  opacity: 0.9;
}

@media (min-width: 768px) {
  .subject-lp .floating-banner-cta {
    width: 320px;
    height: 72px;
    padding: 10px 16px;
  }
}


/* 予約ボタン サブテキスト「最短当日受け取りも可能」+ ＼／装飾 */
.subject-lp .floating-banner-cta-sub {
  position: relative;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff8c7;                      /* 薄黄色 */
  text-align: center;
  padding: 0 18px;                     /* ＼／の分余白 */
}

/* ＼／装飾（CSSで描画） */
.subject-lp .floating-banner-cta-sub::before,
.subject-lp .floating-banner-cta-sub::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.5px;
  height: 14px;
  background: #fff8c7;
}

.subject-lp .floating-banner-cta-sub::before {
  left: 4px;
  transform: translateY(-50%) rotate(-20deg);
}

.subject-lp .floating-banner-cta-sub::after {
  right: 4px;
  transform: translateY(-50%) rotate(20deg);
}


/* 予約ボタン メインテキスト「今すぐ診療予約をする」 */
.subject-lp .floating-banner-cta-main {
  display: block;
  font-size: 18px;                    /* SP基準 */
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  text-shadow: 0.892px 0.892px 0.892px rgba(0, 0, 0, 0.25);
  margin-top: 2px;
}

@media (min-width: 768px) {
  .subject-lp .floating-banner-cta-main {
    font-size: 20px;
  }
}


/* --------------------------------------------
   LINE相談ボタン
   - 緑、角丸
   - LINE（Roboto）+ 相談（Noto Sans JP）を2行
   -------------------------------------------- */
.subject-lp .floating-banner-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: #06c755;
  border-radius: 10px;
  width: 30%;
  height: 70px;                       /* SP基準 */
  flex-shrink: 0;
  transition: opacity 0.3s;
  text-shadow: 0.892px 0.892px 0.892px rgba(0, 0, 0, 0.25);
}

.subject-lp .floating-banner-line:hover {
  opacity: 0.9;
}

@media (min-width: 768px) {
  .subject-lp .floating-banner-line {
    width: 150px;
    height: 72px;
  }
}


.subject-lp .floating-banner-line-en {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  letter-spacing: 0.4px;
}

.subject-lp .floating-banner-line-jp {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}


/* --------------------------------------------
   FLOATING-BANNER の下にコンテンツが隠れないように
   ページ末尾に padding を追加
   -------------------------------------------- */
@media (max-width: 767px) {
  .subject-lp {
    padding-bottom: 90px;              /* SPバナーの高さ分 */
  }
}

@media (min-width: 768px) {
  .subject-lp {
    padding-bottom: 110px;             /* PCバナーの高さ分 */
    overflow: hidden;
  }
}


/* ============================================
   SYMPTOM POPUPS（症状ポップアップ × 14個）
   - モーダル形式
   - オーバーレイ：rgba(59, 193, 223, 0.50)
   - ポップアップ本体：白背景、角丸12.83px
   - SYMPTOMS セクションの各タグから開く
   ============================================ */


/* --------------------------------------------
   オーバーレイ（背景）
   - 全画面固定
   - 初期は非表示
   - .is-open で表示
   -------------------------------------------- */
.subject-lp .symptom-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(59, 193, 223, 0.50);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;

  /* 非表示状態 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 開いた状態 */
.subject-lp .symptom-popup-overlay.is-open {
  opacity: 1;
  visibility: visible;
}


/* --------------------------------------------
   ポップアップ本体
   - 白背景、ボーダー、角丸
   - 中身：タイトル、タグ、お薬リスト、もどるボタン
   -------------------------------------------- */
.subject-lp .symptom-popup {
  position: relative;
  background: #fff;
  border: 1px solid #bac0c8;
  border-radius: 12.83px;
  width: 100%;
  max-width: 378px;
  padding: 25px 24px;
  display: flex;
  flex-direction: column;
  gap: 25px;

  /* 開閉アニメーション用 */
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.subject-lp .symptom-popup-overlay.is-open .symptom-popup {
  transform: scale(1);
}


/* --------------------------------------------
   ポップアップタイトル
   - 症状名（30px Bold ネイビー）
   -------------------------------------------- */
.subject-lp .symptom-popup-ttl {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-text);
  margin: 0;
}


/* --------------------------------------------
   症状タグリスト
   - 薄ピンク背景 #ffcfcf
   - 角丸 4px
   - 24px Medium ネイビー
   - flex-wrap で自動折り返し
   -------------------------------------------- */
.subject-lp .symptom-popup-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.subject-lp .symptom-popup-tag {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 6px 8px;
  background: #ffcfcf;
  border-radius: 4px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.2px;
  color: var(--c-text);
  white-space: nowrap;
}


/* --------------------------------------------
   「処方できるお薬」セクション
   - タイトル（medicine-icon + テキスト）
   - 破線
   - 本文（20px Regular）
   -------------------------------------------- */
.subject-lp .symptom-popup-rx {
  display: flex;
  flex-direction: column;
}


/* お薬タイトル */
.subject-lp .symptom-popup-rx-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.4;
}


/* お薬アイコン */
.subject-lp .symptom-popup-pill {
  width: 30px;
  height: auto;
  flex-shrink: 0;
}


/* 破線（CSS で再現） */
.subject-lp .symptom-popup-divider {
  width: 100%;
  height: 0;
  margin: 12px 0 18px;
  border: 0;
  border-top: 1px dashed #c8d3df;
}


/* お薬本文 */
.subject-lp .symptom-popup-drugs {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-text);
  margin: 0;
}


/* --------------------------------------------
   もどるボタン
   - 青いボーダー、角丸25px
   - 中央寄せ
   -------------------------------------------- */
.subject-lp .symptom-popup-back-wrap {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}


.subject-lp .symptom-popup-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 50px;
  background: #fff;
  border: 2px solid #1ea3fd;
  border-radius: 25px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 2;
  color: #1ea3fd;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  appearance: none;
  -webkit-appearance: none;
}

.subject-lp .symptom-popup-back:hover {
  background: #1ea3fd;
  color: #fff;
}


/* --------------------------------------------
   ポップアップ表示中はページのスクロールを止める
   -------------------------------------------- */
body.symptom-popup-open {
  overflow: hidden;
}

/*helpfeel非表示*/
#helpfeel-element{
	opacity: 0;
	pointer-events: none;
}

/* --------------------------------------------
   コラムセクション修正
   -------------------------------------------- */
.subject-column{
	margin: 50px auto 20px;
}
.subject-column h2{
	margin-bottom: 40px;
}
.subject-column .p-home__column__list__cate{
	padding: 1px 10px;
}
.subject-column .p-home__column__list__item figure{
	margin-bottom: 16px;
}


/* ============================================
   パンくずリスト（ヘッダー下 / MV上）
   - SP（〜767px）：16px / 高さ32px / 左に14px寄せ
   - PC（768px〜）：12px / 高さ32px / inner-box（960px）内に配置
   - セパレーターは border で作るシェブロン（>）
   ============================================ */
.subject-lp .subject-breadcrumb {
  background-color: #fff;
  padding: 0;
}

.subject-lp .subject-breadcrumb .inner-box {
  padding: 0;                              /* SP：フチからの余白は項目側で管理 */
}

.subject-lp .subject-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 28px;
  padding: 6px 14px;                       /* SP：上下8px + 左右14px */
  margin: 0;
  list-style: none;
  font-size: 14px;                         /* SP基準 */
  line-height: 1;
  color: #4b4b4b;
  letter-spacing: 0.02em;                  /* 0.32px / 16px ≒ 0.02em */
  font-weight: 400;
}

.subject-lp .subject-breadcrumb-item {
  display: inline-flex;
  align-items: center;
}

/* セパレーター（> 形状）：項目の前に挿入。最初の項目には付けない */
.subject-lp .subject-breadcrumb-item + .subject-breadcrumb-item::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 12px;                          /* SP：左右マージン */
  border-top: 1px solid #4b4b4b;
  border-right: 1px solid #4b4b4b;
  transform: rotate(45deg);
  flex-shrink: 0;
}

.subject-lp .subject-breadcrumb-link,
.subject-lp .subject-breadcrumb-text,
.subject-lp .subject-breadcrumb-current {
  color: #4b4b4b;
  text-decoration: none;
}

.subject-lp .subject-breadcrumb-link:hover {
  opacity: 0.7;
}

/* PC（768px〜） */
@media (min-width: 768px) {
  .subject-lp .subject-breadcrumb .inner-box {
    padding: 0 clamp(16px, 4vw, 24px);     /* タブレット〜PC：通常コンテナと同じ余白 */
  }

  .subject-lp .subject-breadcrumb-list {
    padding: 8px 0;                        /* inner-box で左右余白を確保するので項目側は0 */
    font-size: 12px;                       /* PC */
    letter-spacing: 0.02em;                /* 0.24px / 12px = 0.02em */
  }

  .subject-lp .subject-breadcrumb-item + .subject-breadcrumb-item::before {
    margin: 0 10px;                        /* PC：少し詰める */
  }
}

@media (min-width: 1280px) {
  /* PC（1280px〜）：inner-box の左右余白を 0 にして 960px センター揃え */
  .subject-lp .subject-breadcrumb .inner-box {
    padding: 0;
  }
}




/* ============================================
   科目別CSSは assets/css/subjects/{slug}.css に分離
   （例：心療内科 = assets/css/subjects/mental.css）
   header.php が subject.css の後に自動読込します。
   ============================================ */


/* ============================================
   広告LP（/subjects/lp/{slug}/）専用
   - ロゴのみのシンプルヘッダー
   - 最小フッター
   header.php / footer.php が LP 判定時に出力するマークアップ用
   ============================================ */

/* ロゴのみヘッダー：通常ヘッダーの2段組み用 margin を打ち消す */
.l-header--lp .l-header__wrap {
	margin-bottom: 0;
	justify-content: center;
}

@media (min-width: 768px) {
	.l-header--lp .l-header__wrap {
		justify-content: flex-start;
	}
}

/* ロゴ（リンクなしの素のロゴ） */
.l-header--lp .l-header__logo {
	display: flex;
	align-items: center;
	column-gap: 16px;
}

.l-header--lp .l-header__logo img {
	width: 152px;
}

@media (min-width: 768px) {
	.l-header--lp .l-header__logo img {
		width: 169px;
	}
}

/* 最小フッター */
.l-footer--lp {
	background: #f4f8fb;
	padding: 24px 16px;
}

.l-footer--lp__inner {
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 12px;
	text-align: center;
}

.l-footer--lp__logo img {
	width: 140px;
	height: auto;
}

.l-footer--lp__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 24px;
	row-gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.l-footer--lp__nav a {
	font-size: 13px;
	color: #082d59;
	text-decoration: none;
}

.l-footer--lp__nav a:hover {
	text-decoration: underline;
}

.l-footer--lp__copy {
	font-size: 11px;
	color: #6b7c8f;
	margin: 0;
}