/* ============================================
   心療内科ページ 専用CSS（.subject-lp--mental）
   --------------------------------------------
   subject.css（共通base）の「後」に header.php が自動読込。
   対象URL：/subjects/mental/（SEO版）および /subjects/lp/mental/（広告LP）
   ※ このファイルは assets/css/subjects/ 配下のため、画像参照は ../../img/... 基準
     （base の subject.css は assets/css/ 直下なので ../img/... 基準。1階層ぶん深い点に注意）
   ============================================ */

/* ============================================
   ★★★★★心療内科FV★★★★★★
   ============================================ */

   
/* --------------------------------------------
   セクション全体（背景画像）
   - flex/grid は使わない（.fv-sp / .fv-pc 内で完結）
   -------------------------------------------- */
.subject-lp--mental .fv {
  background-image: url("../../img/subjects/mental/fv_bg_sp.webp");
}

@media (min-width: 650px) {
  .subject-lp--mental .fv {
    background-image: url("../../img/subjects/mental/fv_bg_pc.webp");
  }
}
@media (min-width: 1280px) {
  .subject-lp--mental .fv {
    background-image: url("../../img/subjects/mental/fv_bg_pc_1280ov.webp");
  }
}


/* メインタイトル */
.subject-lp--mental .fv-title {
  font-size: 34px;
  font-feature-settings: normal;
  line-height: 1.4;
  text-indent: 0.1em;
}

@media (min-width: 480px) {
  .subject-lp--mental .fv-title {
    font-size: 40px;
    letter-spacing: 1.44px;
    font-feature-settings: normal;
    line-height: 1.4;
    text-indent: 0.1em;
  }
}


/* --------------------------------------------
   Block 2: メインビジュアル
   -------------------------------------------- */

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

@media (min-width: 480px) {
  .subject-lp--mental .fv-fg-woman {
  left: -45px;
  bottom: -120px;
  width: 77%;
  max-width: 450px;
  }
}

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

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


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

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


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

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


/* チェック項目（左下に絶対配置） */
.subject-lp--mental .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--mental .fv-checks {
    left: 5%;
    bottom: 12%;
    gap: 8px;
  }
}



/* --------------------------------------------
   Block 3: CTAボタン
   -------------------------------------------- */
.subject-lp--mental .fv-foot {
  display: flex;
  padding: 0 16px;
  margin: 0 auto;
  width: 100%;
}

.subject-lp--mental .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;
}
@media (min-width: 480px) and (max-width:649px){
	.subject-lp--mental .fv-pc-btn{
		max-width: 298px
	}
}
/* 女性画像（PC） */
.subject-lp--mental .fv-pc-fg-woman {
  left: -24px;
  bottom: -110px;
  width: 310px;
}



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



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



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


/* --------------------------------------------
   PC：メインタイトル
   -------------------------------------------- */
.subject-lp--mental .fv-pc-title {
  position: absolute;
  top: 128px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 36px;
  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;
}

@media (min-width: 651px) and (max-width: 767px){
	.subject-lp--mental .fv-pc-title {
	  font-size: 30px;
	}
}

/* --------------------------------------------
   PC：CTAボタン
   -------------------------------------------- */

.subject-lp--mental .fv-pc-cta {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 320px;
  z-index: 3;
}
.subject-lp--mental .fv-note{
  width: 100%;
  z-index: 3;
  font-size: clamp(8px,2.6vw,16px);
  text-align: center;
  padding-top: 10px;
}
.subject-lp--mental .fv-pc-note{
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	z-index: 3;
	padding: 0 16px;
	font-size: 10px;
	margin: 10px auto 0;
	text-align: center;
}