/* All component styles are scoped to .ms-fv for safe transplantation. */
.ms-page{margin:0}
.ms-fv{--ms-teal:#03aaab;--ms-ink:#193239;color:var(--ms-ink);font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-weight:700;background:white}
.ms-fv *{box-sizing:border-box}
.ms-fv img{display:block;max-width:100%}
.ms-fv .ms-header{background:#fff}
.ms-fv .ms-header-inner{width:min(100% - 64px,1380px);height:98px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.ms-fv .ms-logo{width:435px;height:auto}
.ms-fv .ms-reserve{width:418px;min-height:66px;padding:8px 18px 8px 38px;display:flex;justify-content:center;align-items:center;gap:52px;border:0;border-bottom:5px solid #bd5805;border-radius:999px;background:linear-gradient(120deg,#ff8c12,#ff7810);color:#fff;font:inherit;font-size:30px;letter-spacing:.08em;opacity:1;cursor:default}
.ms-fv .ms-arrow{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:white;color:#f78212;font-size:38px;font-weight:500;line-height:1}
.ms-fv .ms-hero{background:#f0fafb url('../img/hero-background-pc.webp') center center/cover no-repeat}
.ms-fv .ms-hero-inner{position:relative;width:min(100%,1935px);min-height:714px;margin:auto;display:grid;grid-template-columns:53% 47%;grid-template-rows:auto 1fr;padding:76px 4.6% 65px 6.9%;column-gap:0}
.ms-fv .ms-copy{position:relative;z-index:1;padding-left:12%;align-self:start}
.ms-fv .ms-lead{display:table;position:relative;margin:0 0 40px 0;padding:0 24px 16px;font-size:clamp(24px,1.9vw,37px);line-height:1.35;white-space:nowrap;border-bottom:2px solid #49b0b1;border-radius:0 0 0 28px}
.ms-fv .ms-lead:after{content:"";position:absolute;bottom:-15px;left:47%;width:23px;height:23px;background:#f3fbfc;border-right:2px solid #49b0b1;border-bottom:2px solid #49b0b1;transform:rotate(45deg)}
.ms-fv .ms-lead span{color:#fc8311}
.ms-fv .ms-title{margin:0;line-height:1.22;letter-spacing:-.04em;font-size:clamp(50px,5.05vw,98px);font-weight:900}
.ms-fv .ms-title-top,.ms-fv .ms-title-brand{display:block;white-space:nowrap}
.ms-fv .ms-small{font-size:.68em}
.ms-fv .ms-title-brand{color:var(--ms-teal);margin-top:10px;font-size:.96em}
.ms-fv .ms-title-brand>span{color:#ffc638}
.ms-fv .ms-art{grid-column:2;grid-row:1/3;align-self:center;margin-left:-2%;margin-right:-7%}
.ms-fv .ms-art img{width:100%;height:auto}
.ms-fv .ms-features{position:relative;z-index:1;grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-self:end;list-style:none;padding:0;margin:30px -8% 0 0}
.ms-fv .ms-features li{aspect-ratio:1;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 8px;text-align:center}
.ms-fv .ms-features img{width:42%;height:42%;object-fit:contain;margin-bottom:12px}
.ms-fv .ms-features p{margin:0;font-size:clamp(15px,1.25vw,25px);line-height:1.35;letter-spacing:-.045em}
.ms-fv .ms-features small{display:block;font-size:.66em;margin-top:8px;letter-spacing:0}
@media(min-width:1600px){.ms-fv .ms-hero-inner{min-height:714px}.ms-fv .ms-features{margin-right:-12%}.ms-fv .ms-art{margin-left:0}}
@media(min-width:781px) and (max-width:1200px){.ms-fv .ms-header-inner{height:82px}.ms-fv .ms-logo{width:330px}.ms-fv .ms-reserve{width:310px;font-size:22px;min-height:56px;gap:24px}.ms-fv .ms-hero-inner{min-height:535px;padding-top:55px}.ms-fv .ms-copy{padding-left:5%}.ms-fv .ms-features{gap:10px;margin-right:-18%}.ms-fv .ms-features li{padding:12px 5px}.ms-fv .ms-lead{font-size:23px;padding-inline:12px}.ms-fv .ms-art{margin-right:-8%}}
@media(max-width:780px){
.ms-fv .ms-header-inner{width:calc(100% - 32px);height:72px;gap:12px}
.ms-fv .ms-logo{width:min(52%,250px)}
.ms-fv .ms-reserve{width:auto;min-height:38px;padding:6px 9px 6px 12px;font-size:12px;letter-spacing:0;gap:8px;border-bottom-width:3px;white-space:nowrap}
.ms-fv .ms-arrow{width:22px;height:22px;font-size:24px}
.ms-fv .ms-hero{background-size:auto 100%;background-position:43% center}
.ms-fv .ms-hero-inner{display:flex;flex-direction:column;min-height:0;padding:32px 20px 44px}
.ms-fv .ms-copy{padding:0;text-align:center}
.ms-fv .ms-lead{margin:0 auto 28px;padding:0 12px 12px;font-size:clamp(18px,5.1vw,30px)}
.ms-fv .ms-title{font-size:clamp(35px,10vw,67px);letter-spacing:-.055em;line-height:1.25}
.ms-fv .ms-title-brand{font-size:.96em;margin-top:4px}
.ms-fv .ms-art{width:min(100%,570px);margin:22px auto 12px;align-self:center}
.ms-fv .ms-features{width:min(100%,410px);grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:6px auto 0;align-self:center}
.ms-fv .ms-features li{padding:18px 8px}
.ms-fv .ms-features img{width:43%;height:43%;margin-bottom:10px}
.ms-fv .ms-features p{font-size:clamp(16px,4.4vw,22px);letter-spacing:-.03em}
}
@media(prefers-reduced-motion:no-preference){.ms-fv .ms-reserve:focus-visible{outline:3px solid var(--ms-teal);outline-offset:4px}}

/* Updated content wrapper: maximum 1200px. */
.ms-fv .ms-header-inner{width:min(100% - 40px,1200px);height:82px}
.ms-fv .ms-logo{width:300px;height:auto}
@media(min-width:781px){
.ms-fv .ms-hero-inner{width:min(100% - 40px,1200px);min-height:540px;padding:48px 0 46px;grid-template-columns:55% 45%}
.ms-fv .ms-copy{padding-left:0}
.ms-fv .ms-lead{font-size:25px;margin-bottom:34px;padding-inline:18px}
.ms-fv .ms-title{font-size:62px}
.ms-fv .ms-art{margin-left:-2%;margin-right:0}
.ms-fv .ms-features{gap:12px;margin:30px 0 0}
.ms-fv .ms-features li{padding:14px 6px}
.ms-fv .ms-features p{font-size:16px}
.ms-fv .ms-features img{margin-bottom:9px}
}
@media(min-width:781px) and (max-width:1000px){
.ms-fv .ms-title{font-size:clamp(44px,5.6vw,56px)}
.ms-fv .ms-lead{font-size:20px}
.ms-fv .ms-features{gap:8px}
.ms-fv .ms-features p{font-size:13px}
}
@media(max-width:780px){
.ms-fv .ms-header-inner{width:calc(100% - 32px);height:64px}
.ms-fv .ms-logo{width:230px;max-width:80%}
}

/* Dedicated responsive backgrounds; aspect ratio preserved. */
.ms-fv .ms-hero{background-image:url('../img/hero-background-pc.webp');background-size:cover;background-position:center center}
@media(max-width:780px){.ms-fv .ms-hero{background-image:url('../img/hero-background-sp.webp');background-size:cover;background-position:center center}}
/* Compact mobile FV with four badges in one row. */
@media(max-width:780px){
.ms-fv .ms-copy{width:100%;text-align:center}
.ms-fv .ms-lead{margin-left:auto;margin-right:auto;text-align:center}
.ms-fv .ms-title,.ms-fv .ms-title-top,.ms-fv .ms-title-brand{text-align:center}
.ms-fv .ms-features{width:100%;max-width:540px;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:6px}
.ms-fv .ms-features li{padding:9px 2px}
.ms-fv .ms-features img{width:38%;height:38%;margin-bottom:5px}
.ms-fv .ms-features p{font-size:clamp(9px,2.45vw,14px);line-height:1.35;letter-spacing:-.06em}
.ms-fv .ms-features small{font-size:.72em;margin-top:3px}
}
/* Subtle shared shadow for feature badges. */
.ms-fv .ms-features li{box-shadow:0 4px 14px rgba(25,50,57,.08)}
/* Align copy with the badge column and give the artwork more presence. */
.ms-fv .ms-title{font-weight:800}
.ms-fv .ms-features{z-index:3}
.ms-fv .ms-art{position:relative;z-index:0}
@media(min-width:781px){
.ms-fv .ms-copy{text-align:center;width:100%;min-width:0}
.ms-fv .ms-lead{margin-left:auto;margin-right:auto;text-align:center}
.ms-fv .ms-title,.ms-fv .ms-title-top,.ms-fv .ms-title-brand{text-align:center}
.ms-fv .ms-art{width:114%;margin-left:-14%;margin-right:0}
}
/* Remove excess vertical space at compact desktop widths. */
@media(min-width:781px) and (max-width:1000px){
.ms-fv .ms-hero-inner{min-height:0;grid-template-rows:auto auto;row-gap:0;padding-top:40px;padding-bottom:40px}
.ms-fv .ms-features{align-self:start;margin-top:24px}
}

@font-face{font-family:"Money Study Heading";src:url('../fonts/money-study-heading-800.woff') format('woff');font-style:normal;font-weight:800;font-display:swap}
.ms-fv .ms-title{font-family:"Money Study Heading","Noto Sans JP",sans-serif;font-weight:800;font-synthesis:none}

.ms-fv .ms-reservation-badge{position:absolute;right:0;top:44px;z-index:4;display:flex;align-items:center;justify-content:center;width:74px;height:74px;border-radius:50%;background:#fc8311;color:#fff;text-align:center;font-family:"Money Study Heading",sans-serif;font-weight:800;font-size:17px;line-height:1.35;transform:rotate(10deg)}
@media(min-width:781px) and (max-width:1000px){.ms-fv .ms-reservation-badge{top:43px;width:62px;height:62px;font-size:14px}}
@media(max-width:780px){.ms-fv .ms-reservation-badge{top:42px;right:-5px;width:54px;height:54px;font-size:13px}}
/* Reservation badge beside the first headline line. */
.ms-fv .ms-reservation-badge{top:100px;right:-38px;width:88px;height:88px;transform:none;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-weight:600;font-size:19px}
@media(min-width:781px) and (max-width:1000px){.ms-fv .ms-reservation-badge{top:88px;right:-31px;width:76px;height:76px;font-size:17px}}
@media(max-width:780px){.ms-fv .ms-reservation-badge{top:67px;right:-12px;width:62px;height:62px;font-size:14px}}
/* Reservation badge balance at desktop, phone and small tablet widths. */
@media(min-width:781px){.ms-fv .ms-reservation-badge{top:100px;right:-10px;width:98px;height:98px;font-size:21px}}
@media(min-width:781px) and (max-width:1000px){.ms-fv .ms-reservation-badge{top:88px;right:-8px;width:86px;height:86px;font-size:19px}}
@media(max-width:780px){
.ms-fv .ms-lead{font-size:clamp(16px,4.7vw,27px)}
.ms-fv .ms-reservation-badge{top:53px;right:0;width:62px;height:62px;font-size:14px}
}
@media(min-width:600px) and (max-width:780px){
.ms-fv .ms-reservation-badge{top:83px;right:calc(50% - 330px);width:86px;height:86px;font-size:19px}
}
/* Fine positioning of the reservation badge. */
@media(min-width:781px){.ms-fv .ms-reservation-badge{top:92px;right:0}}
@media(min-width:781px) and (max-width:1000px){.ms-fv .ms-reservation-badge{top:80px;right:2px}}
@media(min-width:600px) and (max-width:720px){.ms-fv .ms-reservation-badge{top:75px;right:calc(50% - 314px)}}
@media(min-width:721px) and (max-width:780px){.ms-fv .ms-reservation-badge{top:75px;right:calc(50% - 316px);width:94px;height:94px;font-size:20px}}
@media(min-width:781px) and (max-width:1000px){.ms-fv .ms-reservation-badge{top:70px;width:80px;height:80px;font-size:18px}}
@media(min-width:781px){.ms-fv .ms-reservation-badge{top:84px;right:12px}}
@media(min-width:781px) and (max-width:1000px){.ms-fv .ms-reservation-badge{top:62px;right:14px}}
/* Desktop and iPad Pro balance. */
@media(min-width:781px){.ms-fv .ms-reservation-badge{top:76px;right:24px}}
@media(min-width:781px) and (max-width:1000px){.ms-fv .ms-reservation-badge{top:54px;right:26px}}
@media(min-width:1001px) and (max-width:1100px){
.ms-fv .ms-title{font-size:58px}
.ms-fv .ms-reservation-badge{width:88px;height:88px;font-size:19px}
}
@media(min-width:1001px) and (max-width:1100px){.ms-fv .ms-reservation-badge{width:82px;height:82px;font-size:18px;right:16px}}
@media(min-width:1001px) and (max-width:1100px){.ms-fv .ms-features{transform:translateY(-16px)}}
/* Desktop FV vertical padding. */
@media(min-width:781px){.ms-fv .ms-hero-inner{padding-top:30px;padding-bottom:30px}}
/* Keep the longer introductory copy on one line across screen sizes. */
.ms-fv .ms-lead{font-size:22px}
@media(min-width:781px) and (max-width:1000px){.ms-fv .ms-lead{font-size:18px}}
@media(max-width:780px){.ms-fv .ms-lead{font-size:clamp(13px,3.9vw,25px)}}