@charset "Shift_JIS";

/* ====================================================== */
/* Last Update : 2026.08.28                               */
/* For : MetLife Money Type Diagnosis Content              */
/* ====================================================== */

/* ------------------------------------------------------*/
/* CSS Variables (Design Tokens from Figma)              */
/* ------------------------------------------------------*/
:root {
/* --- Color: Primary --- */
--color-primary: #013652;
--color-primary-secondary: #8ff5b1;
/* --- Color: Background --- */
--color-bg-default: #f5f2ed;
--color-bg-sub: #cbf1ff;
--color-bg-white: #ffffff;
/* --- Color: Foreground / Text --- */
--color-text-default: #333333;
--color-text-sub: #6b7280;
--color-text-white: #ffffff;
--color-text-link: #0061a0;
/* --- Color: Token / Blue --- */
--color-blue-100: #effbff;
--color-blue-200: #cbf1ff;
--color-blue-500: #61c2e5;
--color-blue-700: #3185a9;
--color-blue-950: #013652;
/* --- Color: Token / Green --- */
--color-green-400: #8ff5b1;
--color-green-500: #64d1ce;
--color-green-700: #3ea9a6;
/* --- Color: Token / Warm Gray --- */
--color-warm-gray-100: #fbfaf8;
--color-warm-gray-300: #eae7e1;
--color-warm-gray-400: #dddbd5;
/* --- Color: Token / Accent --- */
--color-accent-orange: #f9b243;
--color-accent-red-200: #ffccd5;
--color-accent-red-500: #ec657b;
--color-accent-yellow: #e7dc5f;
--color-accent-yellow-dark: #4a4612;
/* --- Color: Other --- */
--color-black: #2d2d2d;
--color-gray: #383838;
/* --- Typography: Font Family --- */
--font-jp: "Inter", "Noto Sans JP", "Noto Sans CJK JP", "‚l‚r ‚oƒSƒVƒbƒN", "Hiragino Kaku Gothic Pro", "ƒqƒ‰ƒMƒmŠpƒS Pro W3", osaka, sans-serif;
--font-en: "Inter", sans-serif;
/* --- Typography: Font Size --- */
--font-size-h1: 4.0rem;
--font-size-h3: 2.4rem;
--font-size-h4: 2.0rem;
--font-size-body: 1.6rem;
--font-size-sub: 1.4rem;
--font-size-notes: 1.3rem;
/* --- Typography: Font Weight --- */
--font-weight-regular: 400;
--font-weight-bold: 700;
/* --- Typography: Line Height --- */
--line-height-base: 1.5;
/* --- Typography: Letter Spacing --- */
--letter-spacing-base: 0.1em;
--letter-spacing-char: 0.2em;
/* --- Spacing (Gap) --- */
--gap-xxs: 4px;
--gap-xs: 8px;
--gap-s: 12px;
--gap-m: 16px;
--gap-l: 24px;
/* --- Border Radius --- */
--radius-card: 8px;
--radius-button-m: 8px;
--radius-button-s: 4px;
/* --- Border --- */
--border-btn: 2px;
/* --- Layout --- */
--layout-body-width: 320px;
--layout-button-m-width: 288px;
}

/* ------------------------------------------------------*/
/* Base Reset                                            */
/* ------------------------------------------------------*/
* {
box-sizing: border-box;
}

html {
font-size: 62.5%;
}

/* SMP 391px-390px: Figma SMP base scale 75% fixed (1rem=12px) */
@media (max-width: 390px) { html { font-size: 75%; } }

/* SMP <=320px: Figma 320px base scale 62.5% fixed (1rem=10px) */
@media (max-width: 320px) { html { font-size: 62.5%; } }

/* PC (391px-767px): base scale 62.5% fixed (1rem=10px) - Figma PC base */
@media (min-width: 391px) and (max-width: 767px) { html { font-size: 62.5%; } }

body {
background-color: var(--color-warm-gray-100);
color: var(--color-text-default);
line-height: var(--line-height-base);
font-family: var(--font-jp);
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
}

a {
color: var(--color-text-link);
text-decoration: none;
}

a:link,
a:visited {
color: var(--color-text-link);
}

a:hover {
text-decoration: underline;
}

a:focus {
outline: 2px solid var(--color-blue-500);
outline-offset: 2px;
}

a:active {
color: var(--color-blue-700);
}

.mtHero img,
.mtRecommend img,
.mtNotes img,
.mtQuestion img,
.mtResult img,
.mtStickyBtn img,
.mtStickyResult img {
max-width: 100%;
height: auto;
vertical-align: middle;
}

/* ============================================================ */
/* Contents Wrapper                                             */
/* ============================================================ */

/* fixed CTA bar bottom padding (result pages only) */
.contents:has(.mtResult) {
padding-bottom: 96px;
}

/* ============================================================ */
/* Hero Section                                                 */
/* ============================================================ */

.mtHero {
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
position: relative;
border-radius: 0;
padding: var(--gap-m) var(--gap-m) var(--gap-l);
}

/* hero background gradient SVG */
.mtHero::before {
position: absolute;
top: -40rem;
left: 50%;
z-index: 0;
width: 73.6rem;
height: 145.4rem;
background-image: url(/products/moneytype/images/img_bg_hero.svg);
background-size: 100% 100%;
content: '';
transform: translateX(-50%);
pointer-events: none;
}

/* <=390px: Figma SMP design base (390px width = 39rem) */
@media (max-width: 390px) {
.mtHero::before {
top: -17rem;
width: 39rem;
height: 77.1rem;
}
}

/* hero inner container */
.mtHero .mtHeroInner {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
gap: var(--gap-m);
width: 100%;
max-width: 39rem;
}

/* title area */
.mtHero .mtHeroTitleArea {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}

/* label: diagnosis result type count */
.mtHero .mtHeroLabel {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
margin: 0;
gap: var(--gap-xs);
color: var(--color-primary);
text-align: center;
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
font-family: var(--font-jp);
font-size: var(--font-size-sub);
font-weight: var(--font-weight-bold);
}

.mtHero .mtHeroLabelMark {
display: inline-block;
width: 11px;
height: 11px;
padding-bottom: 4px;
background-size: contain;
background-repeat: no-repeat;
background-position: center top;
}

.mtHero .mtHeroLabel .mtHeroLabelMark:first-child {
background-image: url(/products/moneytype/images/img_hero_spark_l.svg);
}

.mtHero .mtHeroLabel .mtHeroLabelMark:last-child {
background-image: url(/products/moneytype/images/img_hero_spark_r.svg);
}

/* h1 title */
.mtHero .mtHeroTtl {
margin: 0;
color: var(--color-primary);
text-align: center;
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
font-family: var(--font-jp);
font-size: 3.2rem;
font-weight: var(--font-weight-bold);
}

/* ---------------------------------------- */
/* Illust Area                               */
/* ---------------------------------------- */

.mtHero .mtHeroIllust {
position: relative;
flex-shrink: 0;
width: 26.2rem;
height: 18.2rem;
}

/* character circles common */
.mtHero .mtHeroCircle {
position: absolute;
width: 76px;
height: 76px;
}

/* icon image centered in circle */
.mtHero .mtCircleIcon {
position: absolute;
top: 50%;
left: 50%;
width: 45px;
height: auto;
transform: translate(-50%, -55%);
}

/* right circle */
.mtHero .mtHeroCircleR {
bottom: 80px;
right: 0;
background-image: url(/products/moneytype/images/img_hero_circle_01.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

/* center circle (highest position) */
.mtHero .mtHeroCircleC {
bottom: 104px;
left: 50%;
transform: translateX(-50%);
background-image: url(/products/moneytype/images/img_hero_circle_02.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

/* left circle */
.mtHero .mtHeroCircleL {
bottom: 80px;
left: 0;
background-image: url(/products/moneytype/images/img_hero_circle_01.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

/* main illust (center bottom) */
.mtHero .mtHeroMainIllust {
position: absolute;
bottom: 12px;
left: 50%;
width: 159px;
height: 127px;
transform: translateX(calc(-50% - 4.5px));
}

.mtHero .mtHeroMainIllust img {
width: 159px;
height: 127px;
}

/* ---------------------------------------- */
/* Description Text                          */
/* ---------------------------------------- */

.mtHero .mtHeroDesc {
margin: 0;
color: var(--color-primary);
text-align: center;
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
font-family: var(--font-jp);
font-size: var(--font-size-sub);
font-weight: var(--font-weight-bold);
}

/* ---------------------------------------- */
/* Badge Area                                */
/* ---------------------------------------- */

.mtHero .mtHeroBadges {
display: flex;
justify-content: center;
gap: var(--gap-xs);
width: 100%;
max-width: 39rem;
}

/* badge pill card */
.mtHero .mtHeroBadge {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
flex: 1 0 0;
min-width: 1px;
height: 70px;
gap: var(--gap-xxs);
padding-bottom: 2px;
border-radius: 99px;
background-color: var(--color-bg-white);
}

/* badge label text */
.mtHero .mtHeroBadgeLabel {
margin: 0;
color: var(--color-primary);
text-align: center;
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
white-space: nowrap;
font-family: var(--font-jp);
font-size: var(--font-size-notes);
font-weight: var(--font-weight-bold);
}

/* "10 questions only" row wrapper */
.mtHero .mtHeroBadgeNumRow {
display: flex;
align-items: baseline;
}

/* number text with green underline via border-bottom */
.mtHero .mtHeroBadgeNumText {
display: flex;
align-items: baseline;
border-bottom: 3px solid var(--color-primary-secondary);
color: var(--color-primary);
line-height: 1;
letter-spacing: var(--letter-spacing-base);
white-space: nowrap;
font-weight: var(--font-weight-bold);
}

/* number */
.mtHero .mtCount {
line-height: 1;
font-family: var(--font-jp);
font-size: 2.8rem;
font-weight: var(--font-weight-bold);
}

/* unit text */
.mtHero .mtUnit {
line-height: 1;
font-family: var(--font-jp);
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
}

/* ============================================================ */
/* CTA Button (shared component)                                */
/* ============================================================ */

.mtBtn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 39rem;
height: 56px;
gap: var(--gap-m);
border-radius: var(--radius-button-m);
background-color: var(--color-primary);
color: var(--color-text-white);
text-align: center;
text-decoration: none;
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
white-space: nowrap;
font-family: var(--font-jp);
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
cursor: pointer;
}

.mtBtn:link,
.mtBtn:visited {
color: var(--color-text-white);
text-decoration: none;
}

.mtBtn:hover {
color: var(--color-text-white);
text-decoration: none;
opacity: 0.85;
}

.mtBtn:focus {
outline: 2px solid var(--color-blue-500);
outline-offset: 2px;
color: var(--color-text-white);
}

.mtBtn:active {
color: var(--color-text-white);
opacity: 0.75;
}

.mtBtn::after {
content: '';
display: block;
width: 20px;
height: 20px;
background-image: url(/products/moneytype/images/img_btn_arrow.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}

/* ============================================================ */
/* Recommend Section                                            */
/* ============================================================ */

.mtRecommend {
padding: var(--gap-l) var(--gap-m);
background-color: var(--color-bg-white);
}

.mtRecommend .mtRecommendInner {
display: flex;
flex-direction: column;
gap: var(--gap-m);
}

/* section title */
.mtRecommend .mtRecommendTtl {
margin: 0;
color: var(--color-primary);
text-align: center;
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
font-family: var(--font-jp);
font-size: var(--font-size-h4);
font-weight: var(--font-weight-bold);
}

/* card list */
.mtRecommend .mtRecommendList {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
margin: 0;
gap: var(--gap-xs);
}

/* each card */
.mtRecommend .mtRecommendItem {
display: flex;
align-items: center;
gap: var(--gap-s);
padding: var(--gap-s);
border-radius: var(--radius-card);
background-color: var(--color-blue-100);
}

/* icon area */
.mtRecommend .mtRecommendIcon {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
width: 104px;
height: 74px;
border-radius: var(--radius-button-s);
background-color: var(--color-blue-200);
}

.mtRecommend .mtRecommendIcon img {
width: 56px;
height: 56px;
object-fit: contain;
}

/* card text */
.mtRecommend .mtRecommendTxt {
margin: 0;
color: var(--color-primary);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
font-family: var(--font-jp);
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
}

/* ============================================================ */
/* Notes Section                                                */
/* ============================================================ */

.mtNotes {
padding: 0 var(--gap-m) var(--gap-l);
background-color: var(--color-bg-white);
}

.mtNotes .mtNotesInner {
display: flex;
flex-direction: column;
gap: var(--gap-m);
}

/* notes card */
.mtNotes .mtNotesCard {
display: flex;
flex-direction: column;
gap: var(--gap-xs);
padding: var(--gap-m);
border-radius: var(--radius-card);
background-color: var(--color-warm-gray-100);
}

/* "notes/precautions" title row */
.mtNotes .mtNotesTitle {
display: flex;
align-items: center;
margin: 0;
gap: var(--gap-xs);
color: var(--color-text-default);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
font-family: var(--font-jp);
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
}

.mtNotes .mtNotesTitle span {
font-weight: var(--font-weight-bold);
}

/* notes list */
.mtNotes .mtNotesList {
display: flex;
flex-direction: column;
list-style: disc !important;
padding-left: 1.6em !important;
margin: 0;
gap: var(--gap-xs);
}

.mtNotes .mtNotesList li {
color: var(--color-text-default);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
font-family: var(--font-jp);
font-size: var(--font-size-notes);
font-weight: var(--font-weight-regular);
}

/* management number */
.mtNotes .mtHpNumber {
margin: 0;
color: var(--color-text-sub);
text-align: right;
line-height: var(--line-height-base);
font-family: var(--font-jp);
font-size: var(--font-size-notes);
font-weight: var(--font-weight-regular);
}

/* ============================================================ */
/* Sticky CTA Bar                                               */
/* ============================================================ */

.mtStickyBtn {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
padding: var(--gap-l) var(--gap-m);
border-top: 1px solid var(--color-warm-gray-400);
background-color: var(--color-bg-white);
box-shadow: 0 -4px 16px 0 rgba(1, 54, 82, 0.12);
transition: transform 0.2s ease;
}

.mtStickyBtn.isHidden,
.mtStickyResult.isHidden {
transform: translateY(100%);
}

/* ============================================================ */
/* PC / Tablet (768px and above) - Top Page                     */
/* ============================================================ */

@media (min-width: 768px) {

.mtHero,
.mtRecommend,
.mtNotes {
max-width: 73.6rem;
margin-left: auto;
margin-right: auto;
}

}

/* ============================================================ */
/* Question Page: Sticky Bottom Footer                          */
/* ============================================================ */

/* flex container on body to keep footer at page bottom */
body:has(.mtQuestion) {
min-height: 100vh !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
}

body:has(.mtQuestion) .contentsWrap {
flex: 1 !important;
background-color: #fbfaf8 !important;
}

body:has(.mtQuestion) #contents,
body:has(.mtQuestion) #contentsFrame,
body:has(.mtQuestion) #mainFrame {
min-height: unset !important;
height: auto !important;
background-color: #fbfaf8 !important;
}

body:has(.mtQuestion) .mtQHpNum {
padding-bottom: 24px;
}

body:has(.mtResult) .mtQHpNum {
padding-bottom: 100px;
}

body:has(.mtStickyBtn) .mtQHpNum {
padding-bottom: 120px;
}


/* ============================================================ */
/* Question Page                                                */
/* ============================================================ */

/* ---------------------------------------- */
/* Header (gradient area)                   */
/* ---------------------------------------- */

.mtQHeader {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
width: 100%;
min-height: 182px;
padding: var(--gap-s) var(--gap-xs);
background-color: var(--color-warm-gray-100);
}

/* question header background SVG */
/* base (<=429px): Figma SMP base (node-id=9281-7668) 390px fixed */
.mtQHeader::before {
position: absolute;
top: calc(50% - 29.4rem);
left: 50%;
z-index: 0;
width: 39rem;
height: 77.1rem;
background-image: url(/products/moneytype/images/img_bg_hero.svg);
background-size: 100% 100%;
content: '';
transform: translateX(-50%);
pointer-events: none;
}

/* >=391px: switch to larger size same as TOP page */
@media (min-width: 391px) {
.mtQHeader::before {
top: -40rem;
width: 73.6rem;
height: 145.4rem;
}
}

.mtQInner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
gap: var(--gap-xs);
width: 100%;
}

.mtQNumBlock {
display: flex;
align-items: baseline;
gap: var(--gap-xxs);
color: var(--color-primary);
font-family: var(--font-en);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
white-space: nowrap;
}

.mtQNumN {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
}

.mtQNumSlash {
font-size: var(--font-size-sub);
}

.mtQText {
margin: 0;
color: var(--color-primary);
text-align: center;
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
font-family: var(--font-jp);
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
}

.mtQIllust {
display: flex;
align-items: center;
justify-content: center;
}

.mtQuestion .mtQIllust img {
display: block;
height: 60px;
width: auto;
}

/* ---------------------------------------- */
/* Body (white options area)                */
/* ---------------------------------------- */

.mtQBody {
padding: var(--gap-m);
width: 100%;
background-color: var(--color-bg-white);
}

.mtQOptions {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
margin: 0;
gap: var(--gap-xs);
}

.mtQOption {
display: block;
}

.mtQOptionLabel {
display: flex;
align-items: center;
gap: var(--gap-s);
width: 100%;
min-height: 72px;
padding: var(--gap-s) var(--gap-m);
border-radius: var(--radius-card);
border: 1px solid var(--color-blue-500);
background-color: var(--color-bg-white);
cursor: pointer;
transition: border-color 0.15s;
}

.mtQOptionInput {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}

.mtQOptionIndicator {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid var(--color-blue-500);
background-color: var(--color-bg-white);
transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.mtQCheckIndicator {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 3px;
border: 1.5px solid var(--color-blue-500);
background-color: var(--color-bg-white);
transition: border-color 0.15s, background-color 0.15s;
}

.mtQOptionText {
flex: 1 0 0;
min-width: 1px;
color: var(--color-black);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
font-family: var(--font-jp);
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
}

/* selected state */
.mtQOptionLabel.isSelected {
border-color: var(--color-primary);
}

.mtQuestion .mtQOptionLabel.isSelected .mtQOptionIndicator {
border-color: var(--color-primary);
background-color: var(--color-primary);
box-shadow: inset 0 0 0 3px var(--color-bg-white);
}

.mtQuestion .mtQOptionLabel.isSelected .mtQCheckIndicator {
border-color: var(--color-primary);
background-color: var(--color-primary);
}

.mtQuestion .mtQOptionLabel.isSelected .mtQCheckIndicator::after {
content: '';
display: block;
width: 9px;
height: 5px;
border-left: 2px solid var(--color-text-white);
border-bottom: 2px solid var(--color-text-white);
transform: rotate(-45deg) translateY(-1px);
}

.mtQuestion .mtQOptionLabel.isSelected .mtQOptionText {
font-weight: var(--font-weight-bold);
}

/* ---------------------------------------- */
/* Navigation                               */
/* ---------------------------------------- */

.mtQNav {
display: flex;
align-items: flex-end;
gap: var(--gap-xs);
margin-top: var(--gap-l);
}

.mtQBtnPrev,
.mtQBtnNext {
display: flex;
align-items: center;
justify-content: center;
flex: 1 0 0;
min-width: 1px;
height: 56px;
border-radius: var(--radius-button-m);
font-family: var(--font-jp);
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
cursor: pointer;
white-space: nowrap;
gap: var(--gap-xs);
}

.mtQBtnPrev {
border: 2px solid var(--color-primary);
background-color: var(--color-bg-white);
color: var(--color-primary);
}

.mtQBtnNext {
border: none;
background-color: var(--color-primary);
color: var(--color-text-white);
}

.mtQBtnNext:disabled,
.mtQBtnNext.isDisabled {
opacity: 0.4;
cursor: not-allowed;
}

.mtQBtnPrev::before {
content: '';
display: block;
width: 20px;
height: 20px;
background-image: url(/products/moneytype/images/img_btn_arrow_l.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}

.mtQBtnNext::after {
content: '';
display: block;
width: 20px;
height: 20px;
background-image: url(/products/moneytype/images/img_btn_arrow.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}

/* Q10: wrapper with completion label above */
.mtQBtnNextWrap {
display: flex;
flex-direction: column;
align-items: center;
flex: 1 0 0;
min-width: 1px;
}

.mtQBtnNextLabel {
position: relative;
z-index: 2;
width: fit-content;
margin: 0 0 -5px;
padding: 0 8px 2px;
background-color: var(--color-blue-100);
border-radius: 99px;
color: var(--color-primary);
font-family: var(--font-jp);
font-size: var(--font-size-notes);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
white-space: nowrap;
text-align: center;
}

.mtQBtnNextLabel::after {
content: '';
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5.5px solid transparent;
border-right: 5.5px solid transparent;
border-top: 4px solid var(--color-blue-100);
}

.mtQuestion .mtQBtnNextWrap .mtQBtnNext {
width: 100%;
flex: none;
}

/* ---------------------------------------- */
/* Management number                        */
/* ---------------------------------------- */

.mtQHpNum {
margin: 0;
margin-left: calc((100% - 100vw) / 2);
width: 100vw;
box-sizing: border-box;
padding: 16px 16px 24px;
background-color: var(--color-bg-white);
color: var(--color-text-sub);
text-align: right;
line-height: var(--line-height-base);
font-family: var(--font-en);
font-size: var(--font-size-sub);
font-weight: var(--font-weight-regular);
letter-spacing: var(--letter-spacing-base);
white-space: nowrap;
}

/* ============================================================ */
/* Question Page: PC / Tablet (768px and above)                 */
/* ============================================================ */

@media (min-width: 768px) {

.mtQHeader,
.mtQBody {
max-width: 73.6rem;
margin-left: auto;
margin-right: auto;
}

.mtQHeader::before {
top: -51rem;
width: 73.6rem;
height: 145.4rem;
}

body:has(.mtQuestion) .mtQHpNum {
max-width: 73.6rem;
margin-left: auto;
margin-right: auto;
width: auto;
}

}


/* ============================================================ */
/* Result Page: Template Override                               */
/* ============================================================ */

/* Remove width constraints imposed by MetLife template CSS */
body:has(.mtResult) .contentsWrap,
body:has(.mtResult) #contents,
body:has(.mtResult) #contentsFrame,
body:has(.mtResult) #mainFrame,
body:has(.mtResult) div.mtResult {
width: 100% !important;
max-width: none !important;
box-sizing: border-box !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
background-color: var(--color-warm-gray-100) !important;
}

/* Content link section: full-bleed */
body:has(.mtResult) .mtRContent {
width: 100% !important;
max-width: none !important;
box-sizing: border-box !important;
}

body:has(.mtResult) .mtRBody {
width: 100% !important;
box-sizing: border-box !important;
align-items: stretch !important;
}

body:has(.mtResult) .mtRCTACard {
width: 100% !important;
box-sizing: border-box !important;
}

body:has(.mtResult) .mtRShare {
width: 100% !important;
box-sizing: border-box !important;
background-color: #ffffff !important;
}

/* Result page button: remove max-width to fill card width */
.mtResult .mtBtn,
.mtResult .mtBtnOutline {
max-width: none;
}

/* ============================================================ */
/* Result Page                                                  */
/* ============================================================ */

/* ---------------------------------------- */
/* Header (gradient area)                   */
/* ---------------------------------------- */

.mtRHeader {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
width: 100% !important;
max-width: none !important;
padding: 14.4px 14.4px 0;
/* Gradient: 736px fixed, centered. Matches page bg (warm-gray) to minimize side margins */
background: linear-gradient(196.44deg, var(--color-blue-100) 6.64%, #a8e7ff 92.61%) center / 73.6rem 100% no-repeat, var(--color-warm-gray-100) !important;
}

/* result header: decorative ray SVG (736x1015) over blue gradient - 736px fixed, centered */
.mtRHeader::before {
position: absolute;
top: 2rem;
left: 50%;
z-index: 0;
width: 73.6rem;
height: 101.5rem;
background-image: url(/products/moneytype/images/img_bg_result.svg);
background-size: 100% 100%;
content: '';
transform: translateX(-50%);
pointer-events: none;
}

/* <=390px: full-width gradient + SMP-specific SVG (390px fixed) */
@media (max-width: 390px) {
.mtRHeader {
background: linear-gradient(206.60deg, var(--color-blue-100) 6.64%, #a8e7ff 92.61%) !important;
}
.mtRHeader::before {
top: 72px;
left: 50%;
width: 390px;
height: 537px;
background-image: url(/products/moneytype/images/img_bg_result_sp.svg);
background-size: 100% 100%;
transform: translateX(-50%);
}
}

/* <=320px: Figma 320px design base - adjust font, SVG, spacing */
@media (max-width: 320px) {
:root {
--font-size-h3: 2.0rem;
--font-size-h4: 1.8rem;
}
.mtRHeader {
padding: 12px 12px 0;
}
.mtRHeader::before {
width: 320px;
height: 441px;
}
.mtRInner {
gap: 16px;
}
.mtResult .mtRIllust img {
width: 254px;
}
.mtRBody {
gap: 24px;
padding: 24px 16px;
}
.mtRSection {
gap: 12px;
}
.mtRBehavior {
gap: 12px;
padding: 16px;
}
.mtRBehaviorList {
gap: 8px;
}
.mtRBehaviorText {
padding: 12px 16px;
}
.mtRCTACard {
gap: 16px;
padding: 16px 12px;
}
}

.mtRInner {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
gap: 19.2px;
width: 100%;
}

.mtRTypeName {
margin: 0;
color: var(--color-primary);
text-align: center;
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
font-family: var(--font-jp);
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
}

.mtRIllust {
display: flex;
align-items: center;
justify-content: center;
}

.mtResult .mtRIllust img {
display: block;
width: 304.8px;
height: auto;
}

.mtRCatch {
margin: 0;
color: var(--color-primary);
text-align: center;
line-height: var(--line-height-base);
letter-spacing: 1px;
font-family: var(--font-jp);
font-size: var(--font-size-sub);
font-weight: var(--font-weight-bold);
}

/* 2-axis badges */

.mtRBadgeWrap {
display: flex;
gap: var(--gap-xs);
width: 100%;
max-width: 296px;
}

.mtRBadge {
flex: 1 0 0;
min-width: 1px;
border: 1px solid var(--color-primary);
border-radius: var(--radius-card);
overflow: hidden;
}

.mtRBadgeHead {
background-color: var(--color-primary);
padding: 4px 8px;
color: var(--color-primary-secondary);
font-family: var(--font-jp);
font-size: var(--font-size-sub);
font-weight: var(--font-weight-bold);
text-align: center;
line-height: var(--line-height-base);
}

.mtRBadgeBody {
background-color: var(--color-bg-white);
padding: 12px 8px;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gap-xs);
}

.mtRBadgeBody img {
width: 94px;
height: auto;
object-fit: contain;
}

.mtRBadgeLabel {
margin: 0;
color: var(--color-primary);
font-family: var(--font-jp);
font-size: var(--font-size-notes);
font-weight: var(--font-weight-bold);
text-align: center;
line-height: var(--line-height-base);
}

/* ---------------------------------------- */
/* Body (white area)                        */
/* ---------------------------------------- */

.mtRBody {
display: flex;
flex-direction: column;
gap: 28.8px;
padding: 28.8px 19.2px;
background-color: var(--color-bg-white);
}

/* ---------------------------------------- */
/* Section: Features / Advice               */
/* ---------------------------------------- */

.mtRSection {
display: flex;
flex-direction: column;
gap: 14.4px;
}

.mtRSectionTitle {
margin: 0;
padding-bottom: var(--gap-xs);
border-bottom: 1px solid var(--color-primary);
color: var(--color-primary);
font-family: var(--font-jp);
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
}

.mtRSectionText {
margin: 0;
color: var(--color-text-default);
font-family: var(--font-jp);
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
}

/* ---------------------------------------- */
/* Behavior Card                            */
/* ---------------------------------------- */

.mtRBehavior {
display: flex;
flex-direction: column;
gap: 14.4px;
padding: 19.2px;
border-radius: var(--radius-card);
background-color: var(--color-blue-100);
}

.mtRBehaviorTitle {
margin: 0;
color: var(--color-primary);
font-family: var(--font-jp);
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
}

.mtRBehaviorList {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
margin: 0;
gap: 9.6px;
}

.mtRBehaviorItem {
display: flex;
border-radius: var(--radius-button-s);
overflow: hidden;
}

.mtRBehaviorCat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 55px;
padding: 8px 4px;
background-color: var(--color-blue-200);
gap: 4px;
}

.mtRBehaviorCat img {
display: block;
width: 28px;
height: 28px;
}

.mtRBehaviorCatName {
color: var(--color-primary);
font-family: var(--font-jp);
font-size: var(--font-size-notes);
font-weight: var(--font-weight-bold);
text-align: center;
line-height: var(--line-height-base);
}

.mtRBehaviorText {
flex: 1 0 0;
min-width: 1px;
display: flex;
align-items: center;
margin: 0;
padding: 14.4px 19.2px;
background-color: var(--color-bg-white);
color: var(--color-primary);
font-family: var(--font-jp);
font-size: var(--font-size-sub);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
}

/* ---------------------------------------- */
/* CTA Cards                                */
/* ---------------------------------------- */

.mtRCTACards {
display: flex;
flex-direction: column;
gap: var(--gap-m);
}

.mtRCTACard {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 19.2px;
padding: 19.2px 14.4px;
border-radius: var(--radius-card);
background-color: var(--color-bg-default);
}

.mtRCTACardTitle {
margin: 0;
color: var(--color-primary);
font-family: var(--font-jp);
font-size: var(--font-size-h4);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
}

.mtRCTAIllust {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}

.mtResult .mtRCTAIllust img {
display: block;
width: 127.8px;
height: auto;
}

.mtRCTAIllustLarge {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}

.mtResult .mtRCTAIllustLarge img {
display: block;
width: 174px;
height: auto;
}

.mtRCTAText {
margin: 0;
color: var(--color-text-default);
font-family: var(--font-jp);
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
}


/* outline button (white background, primary border) */
.mtBtnOutline {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 39rem;
height: 56px;
gap: var(--gap-m);
border: 2px solid var(--color-primary);
border-radius: var(--radius-button-m);
background-color: var(--color-bg-white);
color: var(--color-primary);
text-align: center;
text-decoration: none;
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
white-space: nowrap;
font-family: var(--font-jp);
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
cursor: pointer;
}

.mtBtnOutline:link,
.mtBtnOutline:visited {
color: var(--color-primary);
text-decoration: none;
}

.mtBtnOutline:hover {
color: var(--color-primary);
text-decoration: none;
opacity: 0.85;
}

.mtBtnOutline:focus {
outline: 2px solid var(--color-blue-500);
outline-offset: 2px;
}

.mtBtnOutline::after {
content: '';
display: block;
width: 20px;
height: 20px;
background-image: url(/products/moneytype/images/result/img_icon_arrow_right.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}

/* ---------------------------------------- */
/* Product Section                          */
/* ---------------------------------------- */

.mtRProductSection {
display: flex;
flex-direction: column;
gap: var(--gap-s);
}

.mtRProductSectionTitle {
margin: 0;
color: var(--color-primary);
font-family: var(--font-jp);
font-size: 1.8rem;
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
}

.mtRProductCard {
display: flex;
flex-direction: column;
gap: var(--gap-s);
padding: var(--gap-m) var(--gap-s);
border-radius: var(--radius-card);
background-color: var(--color-bg-default);
}

.mtRProductType {
margin: 0;
color: var(--color-primary);
font-family: var(--font-jp);
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
}

.mtRProductDivider {
display: flex;
align-items: center;
gap: var(--gap-xs);
}

.mtRProductDivider::before,
.mtRProductDivider::after {
content: '';
flex: 1;
height: 1px;
background-color: #dddbd5;
}

.mtRProductDividerLabel {
flex-shrink: 0;
color: var(--color-primary);
font-family: var(--font-jp);
font-size: 1.4rem;
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
white-space: nowrap;
}

.mtResult .mtRProductSectionCentered .mtRProductName {
text-align: center;
}

.mtRProductName {
margin: 0;
color: var(--color-primary);
font-family: var(--font-jp);
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
}

.mtRProductDesc {
margin: 0;
color: var(--color-text-default);
font-family: var(--font-jp);
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
}

.mtRProductBtns {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gap-s);
}

.mtRProductNote {
margin: 0;
color: var(--color-text-sub);
font-family: var(--font-jp);
font-size: 1.3rem;
font-weight: var(--font-weight-regular);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
}

.mtResult .mtRProductNote a {
color: var(--color-primary);
}


/* ---------------------------------------- */
/* Content Link Section                     */
/* ---------------------------------------- */

/* Wrapper for displaying multiple Q10 answers consecutively */
.mtRContents {
display: flex;
flex-direction: column;
gap: var(--gap-l);
padding: var(--gap-l) var(--gap-m);
background-color: var(--color-bg-default);
border-radius: var(--radius-card);
}

/* Remove individual card styles inside wrapper */
.mtRContents .mtRContent {
background-color: transparent;
margin-top: 0;
padding: 0;
}
.mtRContents .mtRContentInner {
padding: 0;
}

/* >=768px: center at 73.6rem same as mtRBody, apply #f5f2ed per design */
@media (min-width: 768px) {
.mtRContents {
background-color: var(--color-bg-default);
border-radius: 0;
max-width: 73.6rem;
margin-left: auto;
margin-right: auto;
width: 100%;
}
body:has(.mtResult) .mtRContents .mtRContent {
padding-left: 0 !important;
padding-right: 0 !important;
}
}

/* Full-bleed background. Padding aligns content width with mtRBody */
.mtRContent {
background-color: var(--color-bg-default);
margin-top: var(--gap-l);
padding: var(--gap-l) calc(var(--gap-m) + var(--gap-s));
}

/* >=736px: center content at 736px width same as mtRBody */
@media (min-width: 736px) {
body:has(.mtResult) .mtRContent {
padding-left: calc((100% - 736px) / 2 + 28px) !important;
padding-right: calc((100% - 736px) / 2 + 28px) !important;
}
}

/* padding consolidated to outer element */
.mtRContentInner {
display: flex;
flex-direction: column;
gap: var(--gap-m);
}

.mtRContentTitle {
margin: 0;
color: var(--color-primary);
font-family: var(--font-jp);
font-size: 1.8rem;
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
}

.mtRContentList {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
margin: 0;
gap: var(--gap-xs);
}

.mtRContentItem {
display: flex;
}

.mtRContentLink {
color: var(--color-text-link);
font-family: var(--font-jp);
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
text-decoration: underline;
}

/* ---------------------------------------- */
/* Share Section                            */
/* ---------------------------------------- */

.mtRShare {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--gap-s);
padding: var(--gap-l) var(--gap-m);
}

.mtRShareTitle {
margin: 0;
color: var(--color-primary);
font-family: var(--font-jp);
font-size: 2.0rem;
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
}

.mtRShareBubble {
position: relative;
width: 100%;
margin-bottom: 10px;
}

.mtRShareBubble::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid var(--color-blue-100);
}

.mtRSharePreview {
width: 100%;
padding: var(--gap-m);
border-radius: var(--radius-card);
background-color: var(--color-blue-100);
color: var(--color-text-default);
font-family: var(--font-jp);
font-size: var(--font-size-sub);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
}

.mtRShareBtns {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
width: 100%;
}

.mtRShareBtn {
flex: 0 0 48px;
}

.mtRShareBtn img {
display: block;
width: 48px;
height: 48px;
max-width: none;
object-fit: contain;
}


/* ---------------------------------------- */
/* Sticky CTA Bar (result page)             */
/* ---------------------------------------- */

.mtStickyResult {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
padding: var(--gap-m) var(--gap-s);
border-top: 1px solid var(--color-warm-gray-400);
background-color: var(--color-bg-white);
box-shadow: 0 -4px 16px 0 rgba(1, 54, 82, 0.12);
transition: transform 0.2s ease;
}

.mtStickyResultInner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}

.mtStickyResultText {
display: flex;
flex-direction: column;
gap: 2px;
}

.mtStickyResultSub {
margin: 0;
color: var(--color-primary);
font-family: var(--font-jp);
font-size: 1.3rem;
font-weight: var(--font-weight-regular);
line-height: var(--line-height-base);
}

.mtStickyResultMain {
margin: 0;
color: var(--color-primary);
font-family: var(--font-jp);
font-size: var(--font-size-sub);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
}

.mtStickyResultBtn {
display: flex;
align-items: center;
gap: var(--gap-xs);
padding: 0 var(--gap-s);
height: 44px;
border-radius: var(--radius-button-s);
background-color: var(--color-primary);
color: var(--color-text-white);
text-decoration: none;
font-family: var(--font-jp);
font-size: var(--font-size-sub);
font-weight: var(--font-weight-bold);
white-space: nowrap;
}

.mtStickyResultBtn:link,
.mtStickyResultBtn:visited {
color: var(--color-text-white);
text-decoration: none;
}

.mtStickyResultBtn:hover {
color: var(--color-text-white);
text-decoration: none;
opacity: 0.85;
}

.mtStickyResultBtn::after {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url(/products/moneytype/images/img_btn_arrow.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}

/* ============================================================ */
/* Result Page: >=391px - spacing per Figma design values */
/* ============================================================ */

@media (min-width: 391px) {

.mtRHeader {
padding: 44.8px 16.8px 0;
}

.mtRInner {
gap: 22.4px;
}

.mtResult .mtRIllust img {
width: 354px;
}

.mtRTypeName {
font-size: var(--font-size-h3);
}

.mtRCatch {
font-size: var(--font-size-sub);
}

.mtRBody {
gap: 33.6px;
padding: 33.6px 22.4px;
}

.mtRSection {
gap: 16.8px;
}

.mtRSectionTitle {
font-size: var(--font-size-h3);
}

.mtRSectionText {
font-size: var(--font-size-body);
}

.mtRBehavior {
gap: 16.8px;
padding: 22.4px;
}

.mtRBehaviorList {
gap: 11.2px;
}

.mtRBehaviorCatName {
font-size: 1.3rem;
}

.mtRBehaviorText {
padding: 16.8px 22.4px;
font-size: var(--font-size-sub);
}

.mtRCTACard {
gap: 22.4px;
padding: 22.4px;
}

.mtRCTACardTitle {
font-size: var(--font-size-h4);
text-align: center;
}

.mtRCTAText {
font-size: var(--font-size-body);
}

.mtResult .mtRCTAIllust img {
width: 149px;
}

}

/* ============================================================ */
/* Result Page: PC / Tablet (768px and above)                   */
/* ============================================================ */

@media (min-width: 768px) {

.mtRInner,
.mtRBody,
.mtRShare,
.mtStickyResultInner {
max-width: 73.6rem;
margin-left: auto;
margin-right: auto;
}

}

/* Header search box placeholder color (matches MetLife standard gray) */
#header04 .search04TriggerSearchBox::placeholder {
color: rgba(0, 0, 0, 0.38);
}

/* Footer outer: white background, section width capped at 980px */
footer.footer {
background-color: #ffffff;
}
.footer .footer__section2 {
max-width: 980px;
margin-left: auto;
margin-right: auto;
}

/* TOP and result pages: warm-gray fill outside content area */
body:has(.mtHero),
body:has(.mtResult) {
background-color: var(--color-warm-gray-100);
}

/* Management number (TOP): full-width white strip, text right-aligned to 980px column */
body:has(.mtHero) .mtQHpNum {
background-color: #ffffff;
padding-right: max(16px, calc((100vw - 980px) / 2 + 16px));
}

/* Management number (result): full-width white strip, text right-aligned to 980px column */
body:has(.mtResult) .mtQHpNum {
padding-right: max(16px, calc((100vw - 980px) / 2 + 16px));
}