@charset "UTF-8";
/* ==========================================================================
   心療内科・精神科LP（/department/mental/）  dept-lp.css の後に読み込み
   Figma：精神科・心療内科_PC 5551:2825（1440）／ SP 5556:1541（375）
   皮膚科（ティール）の共通部品を、ブルー×ラベンダー×イエローの配色に置き換える
   ========================================================================== */

.dl--mental, body.is-dept-lp .dl-ctab {
	--teal: #5a78b4; --teal-d: #4c669c; --teal-l: #4a66a0; --coral: #f08a6e; --rose: #8c88b4;
	--blue: #1382cb; --pinkbar: #d3d0e6; --border: #dfe3f0; --green: #4c669c;
	--m-light: #f3f4fa; --m-head: #e9ecf7; --m-yellow: #fce080; --m-price: #e07a5f;
}
.dl--mental .dl-h2--serif .dl-h2__ttl, .dl--mental .dl-worry__catch, .dl--mental .dl-hero__lead, .dl--mental .dl-hero__catch { font-family: var(--f-mincho); }

/* ---------- FV ---------- */
.dl--mental .dl-hero { background: linear-gradient(90deg, #e8f6f3 0%, #f5f6fb 55%, #fff 100%); }
.dl--mental .dl-hero__photo { left: 589px; top: 62px; width: 848px; height: 603px; }
.dl--mental .dl-hero__fade--top { left: 556px; top: 53px; width: 900px; height: 159px; background: linear-gradient(180deg, #f5f6fb 0%, rgba(245,246,251,0) 100%); }
.dl--mental .dl-hero__fade--left { left: 540px; width: 260px; background: linear-gradient(90deg, #f5f6fb 0%, rgba(245,246,251,0) 100%); }
.dl--mental .dl-hero__fade--bl, .dl--mental .dl-hero__backing { display: none; }
.dl--mental .dl-hero__copy { left: 164px; top: 59px; gap: 23px; }
.dl--mental .dl-hero__lead { min-width: 0; font-size: 28px; font-weight: 700; line-height: 1.5; letter-spacing: 1.68px; color: #2e2a3a; }
.dl--mental .dl-hero__lead mark { position: relative; z-index: 0; background: none; color: inherit; }
.dl--mental .dl-hero__lead mark::before { content: ""; position: absolute; z-index: -1; left: -8px; right: -8px; bottom: 2px; height: 13px; background: var(--m-yellow); }
.dl--mental .dl-hero__catch { font-weight: 700; letter-spacing: 4.8px; line-height: 1.2; }
.dl--mental .dl-hero__catch .is-1 { font-size: 80px; line-height: 1.2; letter-spacing: 4.8px; color: #a8a2dd; }
.dl--mental .dl-hero__catch .is-2 { font-size: 96px; line-height: 1.15; letter-spacing: 4.8px; color: #e6c44d; }
.dl--mental .dl-hero__cta .dl-ctapair__cap { color: #4c669c; }
.dl--mental .dl-hero__points li { background: #fffbea; border-color: var(--teal); box-shadow: 0 6px 16px rgba(76,102,156,.18); text-align: center; }
.dl--mental .dl-hero__points b, .dl--mental .dl-hero__points li:nth-child(2) b { color: var(--teal); }
.dl--mental .dl-hero__points small, .dl--mental .dl-hero__points li:nth-child(2) small { color: var(--coral); }
.dl--mental .dl-hero__points b.is-m { font-size: 24px; }
.dl--mental .dl-hero__points small.is-l { font-size: 27px; }
.dl--mental .dl-hero__points li:nth-child(2) b { font-size: 27px; }
.dl--mental .dl-hero__points li:nth-child(2) small { font-size: 22px; }
.dl--mental .dl-hero__points b.is-s { font-size: 18px; }
.dl--mental .dl-hero__points li:nth-child(3) small { font-size: 22px; line-height: 1.2; }

/* ---------- お悩み ---------- */
.dl-worry {
	display: grid; grid-template-columns: 1fr 242px 1fr; align-items: center; gap: 0 20px;
	padding: 40px 36px; border-radius: 20px; background: linear-gradient(135deg, #f3f2fa 0%, #fff8e6 100%);
}
.dl-worry__col { display: flex; flex-direction: column; gap: 14px; }
.dl-worry__col li { display: flex; align-items: center; gap: 6px; }
.dl-worry__col.is-l li { justify-content: flex-end; }
.dl-worry__col.is-l li:not(.is-in) { padding-right: 34px; }
.dl-worry__col.is-r li:not(.is-in) { padding-left: 34px; }
.dl-worry__bubble {
	display: flex; align-items: center; gap: 12px; width: 264px; height: 80px; padding: 0 18px;
	background: #fff; border: 1px solid #d9d6ea; border-radius: 28px; font-size: 16px; font-weight: 700; line-height: 1.5; color: #3a3a4a;
}
.dl-worry__bubble i { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #f6dd8f; color: #8c6a1c; font-size: 14px; font-style: normal; font-weight: 700; }
.dl-worry__dots { width: 20px; height: 10px; flex-shrink: 0; }
.dl-worry__illust { width: 242px; height: 242px; border-radius: 50%; background: #fff; object-fit: cover; }
.dl-worry__msg { align-self: center; width: 640px; max-width: 100%; padding: 28px 32px 32px; background: #fff; border-radius: 16px; box-shadow: 0 6px 20px rgba(76,102,156,.12); display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.dl-worry__catch { font-size: 26px; font-weight: 700; line-height: 1.6; letter-spacing: .04em; color: var(--teal-d); }
.dl-worry__txt { font-size: 17px; line-height: 1.8; }
.dl-worry__msg .dl-btn-new { width: 440px; }
.dl-worry__msg .dl-btn-new__txt { font-size: 24px; }

/* ---------- 特長・3STEP ---------- */
.dl--mental .dl-feat__img { background: #f4f5fa; }
.dl--mental .dl-feat__img.is-full img { position: static; }
.dl--mental .dl-feat__img.is-full { display: flex; justify-content: center; }
.dl--mental .dl-feat__img.is-full img { width: auto; height: 120px; object-fit: contain; }
.dl--mental .dl-3step { background: none; }
.dl--mental .dl-3step__ttl b, .dl--mental .dl-3step__ttl span { color: var(--teal-d); }
.dl--mental .dl-3step__list li { background: var(--m-light); }

/* ---------- 症状 ---------- */
.dl--mental .dl-symp li { border-color: #d9d6ea; }
.dl--mental .dl-symp h3 { color: #8c88b4; }
.dl--mental .dl-symp img { height: 96px; object-fit: contain; }

/* ---------- プラン ---------- */
.dl--mental .dl-plan__photo { border-color: #d3d0e6; }
.dl--mental .dl-plan.is-set .dl-plan__photo { border-color: #f1d98e; }
.dl--mental .dl-plan__tag, .dl--mental .dl-plan.is-set .dl-plan__tag { background: rgba(76,102,156,.1); }
.dl--mental .dl-plan.is-set .dl-plan__ttl { border-color: var(--teal-d); }
.dl--mental .dl-plan.is-set .dl-plan__ttl::before { background: var(--teal-d); }
.dl-setable-wrap { overflow-x: auto; }
.dl-setable { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; border: 1px solid var(--border); font-size: 16px; line-height: 1.4; }
.dl-setable th, .dl-setable td { height: 46px; padding: 8px 10px; border: 1px solid var(--border); text-align: center; vertical-align: middle; }
.dl-setable thead th { background: var(--m-head); color: var(--teal-d); font-size: 15px; font-weight: 700; }
.dl-setable thead th:first-child { width: 200px; }
.dl-setable thead th:nth-child(2) { width: 250px; }
.dl-setable tbody th { font-weight: 700; text-align: left; padding-left: 16px; }
.dl-setable tbody th small { font-size: inherit; font-weight: 700; color: inherit; }
.dl-setable td:nth-child(2) { font-size: 13px; }
.dl-setable tbody tr:nth-child(even) { background: #fafafd; }
.dl-setable td:nth-child(n+3) { color: var(--m-price); font-weight: 700; font-size: 17px; }
.dl-note--set { line-height: 1.7; }

/* ---------- 料金 ---------- */
.dl--mental .dl-ptable, .dl--mental .dl-ptable th, .dl--mental .dl-ptable td { border-color: var(--m-head); }
.dl--mental .dl-ptable thead td, .dl--mental .dl-ptable tbody th { background: #f1f0f7; }
.dl--mental .dl-ptable thead th.is-set { background: #f1f0f7; color: #8c88b4; }
.dl--mental .dl-ptable:not(.dl-ptable--opt) tbody tr:nth-child(3) td { color: var(--m-price); font-weight: 700; }
.dl--mental .dl-ptable thead th.is-consult { background: var(--m-head); color: var(--teal-d); }
.dl--mental .dl-ptable strong.is-set, .dl--mental .dl-ptable strong.is-consult { color: var(--m-price); }
.dl--mental .dl-med__price b { color: var(--m-price); }
.dl--mental .dl-med__chips a:hover { background: var(--m-light); }
.dl--mental .dl-med__list li:hover { box-shadow: 0 2px 8px rgba(90,120,180,.18); }
.dl-med__legend { margin-top: -16px; font-size: 15px; line-height: 1.7; color: #555; }

/* ---------- ご利用方法・診療時間・医師・クリニック ---------- */
.dl--mental .dl-flow__shot { background: var(--m-light); }
.dl--mental .dl-flow__dots button { background: #d9deef !important; }
.dl--mental .dl-flow__dots button.is-on { background: var(--teal) !important; }
.dl--mental .dl-hours__card { border-color: var(--border); }
.dl--mental .dl-linenote { background: #fff6d9; color: var(--teal-d); }
.dl--mental .dl-doc__tags span { background: var(--m-head); color: var(--teal-d); }
.dl--mental .dl-doc__career { background: var(--m-light); }
.dl--mental .dl-marker::before { background: #efeef6; }
.dl--mental .dl-clinic__more:hover { background: var(--m-light); }

/* ---------- よくある質問 ---------- */
.dl-faq { display: flex; flex-direction: column; gap: 14px; }
.dl-faq__item { display: flex; flex-direction: column; gap: 12px; padding: 22px 28px; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.dl-faq__q, .dl-faq__a { display: flex; align-items: flex-start; gap: 14px; line-height: 1.7; }
.dl-faq__q { font-size: 18px; font-weight: 700; color: #222; }
.dl-faq__a { font-size: 16px; color: #333; }
.dl-faq__q span, .dl-faq__a span { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 16px; font-weight: 700; line-height: 1; }
.dl-faq__q span { background: #5a78b4; }
.dl-faq__a span { background: #e2b94f; }

/* ---------- 緊急時 ---------- */
.dl-emg { display: flex; flex-direction: column; gap: 12px; padding: 28px 32px; background: #fff6f1; border: 1px solid #f2c9b8; border-radius: 14px; font-size: 16px; line-height: 1.8; }
.dl-emg__ttl { font-size: 22px; font-weight: 700; line-height: 1.4; color: #c9705a; }
.dl-emg a { color: #c9705a; font-weight: 700; text-decoration: underline; }
.dl-emg-sec { padding-top: 0; }
.dl-emg-sec::before { display: none; }
#doctor { padding-bottom: 32px; }

/* ---------- 下部CTA ---------- */
body.is-dept-lp .dl-ctab { background: var(--m-light); }
body.is-dept-lp .dl-ctab__ttl, body.is-dept-lp .dl-ctab__lead { color: #c9705a; }

/* ==========================================================================
   タブレット
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1039px) {
	.dl-worry { grid-template-columns: 1fr; justify-items: center; gap: 16px; padding: 32px 20px; }
	.dl-worry__illust { order: -1; }
	.dl-worry__col li, .dl-worry__col.is-l li:not(.is-in), .dl-worry__col.is-r li:not(.is-in) { justify-content: center; padding: 0; }
	.dl-worry__dots { display: none; }
	.dl-worry__bubble { width: 420px; height: 64px; }
}

/* ==========================================================================
   SP（〜767px）  Figma 5556:1541
   ========================================================================== */
@media (max-width: 767px) {
	/* FV */
	.dl--mental .dl-hero__stage { height: calc(var(--u) * 591); }
	.dl--mental .dl-hero__photo { left: calc(var(--u) * 144); top: calc(var(--u) * -20); width: calc(var(--u) * 240); height: calc(var(--u) * 323); }
	.dl--mental .dl-hero__fade--top { left: 0; top: 0; width: 100%; height: calc(var(--u) * 80); background: linear-gradient(180deg, #f5f6fb 0%, rgba(245,246,251,0) 100%); }
	.dl--mental .dl-hero__fade--left { left: calc(var(--u) * 130); top: 0; width: calc(var(--u) * 90); height: calc(var(--u) * 310); background: linear-gradient(90deg, #f3f5fa 0%, rgba(245,246,251,0) 100%); }
	.dl--mental .dl-hero__fade--bottom { left: calc(var(--u) * 140); top: calc(var(--u) * 230); width: calc(var(--u) * 245); height: calc(var(--u) * 80); background: linear-gradient(180deg, rgba(245,246,251,0) 0%, #f5f6fb 100%); }
	.dl--mental .dl-hero__backing { display: block; position: absolute; left: 0; top: calc(var(--u) * 122); width: 100%; height: calc(var(--u) * 128); background: linear-gradient(90deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.55) 60%, rgba(255,255,255,0) 100%); filter: blur(calc(var(--u) * 6)); pointer-events: none; }
	.dl--mental .dl-hero__lead { left: calc(var(--u) * 25); top: calc(var(--u) * 45); font-size: calc(var(--u) * 20.5); line-height: 1.55; letter-spacing: calc(var(--u) * .6); }
	.dl--mental .dl-hero__lead .is-l { font-size: calc(var(--u) * 23.5); }
	.dl--mental .dl-hero__lead mark::before { left: calc(var(--u) * -4); right: calc(var(--u) * -4); bottom: calc(var(--u) * 2); height: calc(var(--u) * 9); }
	.dl--mental .dl-hero__catch { left: calc(var(--u) * 22); top: calc(var(--u) * 122); }
	.dl--mental .dl-hero__catch .is-1 { font-size: calc(var(--u) * 42); line-height: calc(var(--u) * 52); letter-spacing: calc(var(--u) * 1.5); color: #7e78b8; }
	.dl--mental .dl-hero__catch .is-2 { font-size: calc(var(--u) * 42); line-height: calc(var(--u) * 52); letter-spacing: calc(var(--u) * 1.5); color: #d9a51e; }
	.dl--mental .dl-hero__points { top: calc(var(--u) * 240); }
	.dl--mental .dl-hero__points b.is-m { font-size: calc(var(--u) * 17); }
	.dl--mental .dl-hero__points small.is-l { font-size: calc(var(--u) * 19); }
	.dl--mental .dl-hero__points li:nth-child(2) b { font-size: calc(var(--u) * 19); }
	.dl--mental .dl-hero__points li:nth-child(2) small { font-size: calc(var(--u) * 15.4); }
	.dl--mental .dl-hero__points b.is-s { font-size: calc(var(--u) * 13); }
	.dl--mental .dl-hero__points li:nth-child(3) small { font-size: calc(var(--u) * 15.4); }
	.dl--mental .dl-hero__cta { top: calc(var(--u) * 370); }

	/* お悩み */
	.dl--mental .dl-h2--serif .dl-h2__ttl { font-family: var(--f-noto, "Noto Sans JP", sans-serif); font-weight: 700; }
	.dl-worry { grid-template-columns: 1fr; justify-items: stretch; gap: 8px; padding: 16px 12px 20px; border-radius: 14px; }
	.dl-worry__illust { order: -1; justify-self: center; width: 110px; height: 110px; margin-bottom: 8px; }
	.dl-worry__col { gap: 8px; }
	.dl-worry__col li, .dl-worry__col.is-l li:not(.is-in), .dl-worry__col.is-r li:not(.is-in) { justify-content: flex-start; padding: 0; }
	.dl-worry__dots { display: none; }
	.dl-worry__col .pc-only { display: none; }
	.dl-worry__bubble { width: 100%; height: 34px; padding: 0 12px; gap: 8px; border-radius: 17px; font-size: 12.5px; line-height: 1.3; white-space: nowrap; }
	.dl-worry__bubble i { width: 18px; height: 18px; font-size: 10px; }
	.dl-worry__msg { padding: 20px 16px 22px; gap: 12px; }
	.dl-worry__catch { font-size: 17px; line-height: 1.5; letter-spacing: 0; }
	.dl-worry__txt { font-size: 15px; text-align: left; }
	.dl-worry__msg .dl-btn-new { width: 100%; max-width: 295px; }
	.dl-worry__msg .dl-btn-new__txt { font-size: 16px; }

	/* 特長 */
	.dl--mental .dl-feat__img.is-full img { width: auto; height: 88px; }

	/* プラン2の表：4列（お薬・1/3/6ヶ月） */
	.dl-setable { font-size: 13px; }
	.dl-setable th, .dl-setable td { height: auto; padding: 8px 4px; }
	.dl-setable thead th { font-size: 12px; }
	.dl-setable thead th:first-child { width: 31%; }
	.dl-setable tbody th { padding-left: 6px; font-size: 13px; line-height: 1.35; }
	.dl-setable tbody th small { display: block; font-size: 11px; }
	.dl-setable td:nth-child(n+3) { font-size: 13px; }
	.dl-note--set { font-size: 14px; }
	.dl-med__legend { margin-top: -20px; font-size: 14px; }

	/* FAQ・緊急時 */
	.dl-faq__item { padding: 16px; gap: 10px; }
	.dl-faq__q { font-size: 16px; gap: 10px; }
	.dl-faq__a { font-size: 15px; gap: 10px; }
	.dl-faq__q span, .dl-faq__a span { width: 26px; height: 26px; font-size: 14px; }
	.dl-emg { padding: 20px 16px; font-size: 15px; }
	.dl-emg__ttl { font-size: 18px; }
	body.is-dept-lp .dl-ctab { background: var(--m-light); }
	body.is-dept-lp .dl-ctab__ttl, body.is-dept-lp .dl-ctab__lead { color: #c9705a; }

	/* 2026.11 追加調整：H2 22px／プラン枠・お悩み枠を画面幅いっぱい寄りに／FVメイン文言を中央寄せ */
	.dl--mental .dl-h2__ttl { font-size: 22px; }
	.dl--mental .dl-plan { width: calc(100% + 16px); max-width: none; margin: 0 -8px; }
	.dl-worry { margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
	.dl-worry__bubble { font-size: 13.5px; }
	.dl--mental .dl-hero__catch { left: 0; right: 0; width: 100%; align-items: center; text-align: center; }
}