@charset "UTF-8";

main .content-bg,
.content-items .item-01 .en,
.content-items .item-01 .jp,
.content-items .view-more { animation-duration:800ms; opacity:0; animation-iteration-count:1; animation-timing-function:ease-in-out; animation-fill-mode:forwards;}
header * { color:#fff;}
header::before { content:none;}
header nav .menu>a strong::before { background-color:#fff;}
footer { position:absolute; left:0; bottom:0;}
footer * { color:#fff;}
footer .footer-items { justify-content:flex-end;}
footer::before { content:none;}
footer .copyright { display:none;}
.drawer-menu .menu p span::before { background-color:#fff;}
.drawer-menu .menu.active p span::before { background-color:#000;}
main { width:100%; height:100vh; position:relative;}
body.sp main { height:100dvh;}
main .content-bg { animation-delay:200ms; animation-name:fade_in; position:absolute; left:0; top:0; width:100%; height:100%;}
main .content-bg img { object-fit:cover; position:absolute; left:0; top:0; width:100%; height:100%;}
.content-items { z-index:1; width:calc(100% - 320px); height:calc(100vh - 220px - 145px); margin-top:220px; position:absolute; left:50%; top:0; transform:translateX(-50%); display:flex; flex-direction:column; justify-content:space-between;}
body.sp .content-items { height:calc(100dvh - 220px - 145px);}
.content-items * { color:#fff;}
.content-items .item-01 { width:100%;}
.content-items .item-01 .en { animation-name:fade_in_up; animation-delay:600ms; width:100%; line-height:1.1667; font-weight:500; font-size:60px;}
.content-items .item-01 .en * { font-weight:500;}
.content-items .item-01 .jp { animation-name:fade_in_up; animation-delay:1200ms; width:100%; margin-top:85px; line-height:1.1; font-weight:500; letter-spacing:.03em; font-size:28px;}
.content-items .item-01 .jp * { font-weight:500;}
.content-items .view-more { animation-name:fade_in; animation-delay:1800ms;}
.content-items .view-more a .arrow::before { border-color:#fff;}
.content-items .view-more a .arrow .spinner circle { stroke:#fff;}

@media (min-width:768.1px) {
body { min-height:550px;}
}

@media (min-width:768.1px) and (max-height:550px) { main .content-bg { height:550px;}
.content-items { height:334px !important; margin-top:130px !important;}
body.sp .content-items { height:334px !important; margin-top:130px !important;}
.content-items .item-01 .jp { margin-top:49px !important;}
body.sp .content-items .item-01 .jp { margin-top:49px !important;}
}

@media (min-width:768.1px) and (max-height:930px) {
.content-items { height:60.7527vh; margin-top:23.6559vh;}
body.sp .content-items { height:60.7527dvh; margin-top:23.6559dvh;}
.content-items .item-01 .jp { margin-top:9.2473vh;}
body.sp .content-items .item-01 .jp { margin-top:9.2473dvh;}
}

@media (max-width:1400px) {
.content-items { width:77.1429%;}
}

@media (max-width:768px) {
body { min-height:450px;}
footer { display:none;}
.content-items { margin-top:440px; height:calc(100vh - 440px - 80px);}
body.sp .content-items { height:calc(100dvh - 440px - 80px);}
.content-items { left:auto; right:0; transform:translateX(0); width:89.5833%;}
.content-items .item-01 .en { line-height:1.3438; font-size:8.3333vmin;}
.content-items .item-01 .jp { margin-top:1.4118em; font-size:4.4271vmin;}
}

@media (max-width:768px) and (max-height:450px) { main .content-bg { height:450px;}
.content-items { height:247px !important; margin-top:150px !important;}
}

@media (max-width:768px) and (max-height:1300px) {
.content-items { margin-top:calc(33.8462vh - (1300px - 100vh)*.003); height:calc(100vh - (33.8462vh - (1300px - 100vh)*.01) - 80px);}
body.sp .content-items { margin-top:calc(33.8462dvh - (1300px - 100vh)*.01); height:calc(100dvh - (33.8462dvh - (1300px - 100vh)*.003) - 80px);}
}

@media (max-width:768px) and (max-height:650px) {
.content-items { height:calc(54.9231vh - (650px - 100vh)*.005);}
body.sp .content-items { height:calc(54.9231dvh - (650px - 100dvh)*.005);}
}