:root {
--bgSide: #62aacd;
--bgCenter: #f9f7fe;
--line: rgba(15, 23, 42, .10);
--radius: 0px;
--shadow: none;
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
background: var(--bgSide);
font-family: system-ui, -apple-system, "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
overflow: hidden;
}
#s10 {
padding-bottom: 30px;
} .lpShell {
height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
margin: 0;
padding: 0;
} .lpSide {
height: 100%;
}
.lpSide__inner {
position: sticky;
top: 0;
height: 100vh;
background: var(--bgSide);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
} .lpSideNav {
display: flex;
flex-direction: column;
gap: 8px;
}
.lpSideNav__link {
display: block;
text-decoration: none;
color: #fff;
font-weight: 800;
text-align: center;
padding: 10px 0;
background: transparent;
opacity: .6;
transition: opacity .2s ease;
}
.lpSideNav__link:hover {
opacity: .8;
}
.lpSideNav__link.is-active {
opacity: 1;
} .sideCta,
.sideCta_g {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 280px;
padding: 18px 22px;
border: .125rem solid #161616;
border-radius: 100vmax;
box-shadow: .1875rem .1875rem 0 0 #161616;
background: #06C755;
color: #fff;
font-weight: 900;
letter-spacing: .05em;
line-height: 1.4;
text-decoration: none;
text-align: center;
transition:
opacity .2s ease-out,
transform .05s ease-out,
box-shadow .05s ease-out;
}
.sideCta:hover,
.sideCta_g:hover {
background: #06C755;
color: #fff;
opacity: .85;
}
.sideCta:active,
.sideCta_g:active {
transform: translate(.1875rem, .1875rem);
box-shadow: 0 0 0 0 #161616;
}
.sideCta .lineCtaIcon,
.sideCta_g .lineCtaIcon {
display: block !important;
width: 20px !important;
height: 20px !important;
max-width: 20px !important;
min-width: 20px !important;
object-fit: contain !important;
flex: 0 0 20px !important;
margin: 0 !important;
padding: 0 !important;
} .lpMain {
height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
scroll-behavior: smooth;
background: var(--bgCenter);
scrollbar-width: none;
-ms-overflow-style: none;
}
.lpMain::-webkit-scrollbar {
display: none;
} .imgSection {
padding: 0;
}
.fv {
position: relative;
}
.stack {
position: relative;
width: 100%;
border-radius: 0;
background: transparent;
border: none;
box-shadow: none;
}
.stack img {
display: block;
width: 100%;
height: auto;
} #s01 .stack {
aspect-ratio: 9 / 16;
overflow: hidden;
}
#s01 .stack > img {
width: 100%;
height: 100%;
object-fit: cover;
}
#s01 .fvCta {
position: absolute;
left: 50%;
top: 66%;
transform: translate(-50%, -50%);
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
pointer-events: auto;
}
#s01 .fvCta__note {
margin: 0;
color: #161616;
font-weight: 700;
font-size: 12px;
letter-spacing: .06em;
line-height: 1.4;
}
#s01 .fvCta__btns {
display: flex;
flex-direction: column;
gap: 12px;
} .section--cta {
position: relative;
}
.section--cta .sectionCta {
position: absolute;
left: 50%;
bottom: 6%;
transform: translateX(-50%);
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
pointer-events: auto;
padding: 0;
}
.sectionCta__note {
margin: 0;
font-size: 14px;
font-weight: 700;
letter-spacing: .06em;
color: #161616;
line-height: 1.4;
} .middle-section {
display: block;
margin: 0 auto 50px;
}
.middle-section .sectionCta {
display: block;
pointer-events: auto;
padding: 0;
text-align: center;
} .sidePitch {
color: #fff;
}
.sidePitch__cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.sidePitch__micro {
margin: 0;
font-size: 11px;
font-weight: 700;
opacity: .9;
}
.lpSide--left .fvCta__note {
color: #fff;
font-weight: 900;
margin: 0;
} .lpLastCta__micro {
margin: 0;
font-size: 11px;
text-align: center;
} .siteFooter {
background: #004a77;
color: rgba(255, 255, 255, .9);
display: flex;
align-items: center;
justify-content: center;
padding: 40px 16px;
}
.siteFooter small {
font-size: 13px;
letter-spacing: .08em;
line-height: 1.6;
text-align: center;
opacity: .9;
}  @media (max-width: 1100px) {
.lpShell {
grid-template-columns: 1fr 1fr;
}
.lpShell > .lpSide:first-child {
display: none;
}
.lpMain {
grid-column: 1;
}
.lpShell > .lpSide:last-child {
display: block;
grid-column: 2;
}
} @media (max-width: 1024px) {
body {
overflow: auto;
background: var(--bgCenter);
}
.lpShell {
grid-template-columns: 1fr;
}
.lpSide {
display: none !important;
}
.lpMain {
height: auto;
overflow: visible;
padding: 0;
grid-column: 1 / -1;
}
.siteFooter {
padding: 32px 16px;
}
.siteFooter small {
font-size: 12.5px;
}
}
@media (max-width: 600px) {
.siteFooter {
padding: 28px 16px;
}
.siteFooter small {
font-size: 12px;
letter-spacing: .06em;
}
.fvCta__note {
font-size: 13px;
font-weight: 700;
margin: 0;
}
} .stack .sectionCta {
position: absolute;
left: 50%;
top: var(--ctaTop, 80%);
transform: translate(-50%, -50%);
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
pointer-events: auto;
}
#s07 {
--ctaTop: 90%;
}
#s13 {
--ctaTop: 80%;
}
.fvCta__note {
font-size: 13px;
font-weight: 700;
margin: 0;
}