html,
body { font-size: 6.25px; }
img { width: 100%; }
section { padding: max(140px, 14rem) 0; background: #fff; }
.btn {
font-size: 4rem;
font-weight: 500;
padding: 3rem 5.5rem;
border-radius: 8rem;
}
.inner { max-width: 1280px; }
.vh-header-wrap { position: fixed; top: 0; width: 100%; }
/* visual */
.visual_section { position: relative; height: var(--view-height); padding: 0; }
.visual_slide_bg { width: 100%; height: 100%; }
.visual_slide_bg .swiper-container { width: 100%; height: 100%; }
.visual_slide_bg .swiper-slide { overflow: hidden; }
.visual_slide_bg .swiper-slide img { width: 100%; height: 100%; object-position: center; object-fit: cover; }
.visual_logo {
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.visual_slide_text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
padding-top: 20rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.visual_slide_text .swiper-container {
position: relative;
width: 100%;
height: 100%;
max-width: 1280px;
max-height: 70%;
}
.visual_slide_text .swiper-slide { color: #fff; }
.visual_slide_text .swiper-pagination-container { max-width: 1280px; }
.visual_slide_text .swiper-pagination-container { color: #fff; }
.visual_slide_text .swiper-pagination-current,
.visual_slide_text .swiper-pagination-total { font-size: 3rem; font-weight: 700; }
.visual_slide_text .swiper-pagination-progressbar { width: 44rem; height: 2px; background: rgba(255,255,255,0.5); }
.visual_slide_text .swiper-pagination-progressbar-fill { padding: 0; background: #fff; }
.visual_slide_text .swiper-slide { opacity: 0 !important; }
.visual_slide_text .swiper-slide-active { opacity: 1 !important; }
.visual_slide_text .swiper-control { gap: 2em; }
.visual_slide_text .swiper-button-next,
.visual_slide_text .swiper-button-prev { width: 2.4rem; height: 2.4rem; }
.visual_slide_text .swiper-slide h1 { font-size: 9.6rem; font-weight: 900; margin-bottom: 3rem; color: #fff; }
.visual_slide_text .swiper-slide span { display: inline-block; font-size: 4.7rem; font-weight: 600; line-height: 1em; padding: 1.6rem 5.5rem; border-radius: 4rem; background: #edcf20; color: #2dacb7; }
.visual_slide_text .swiper-slide .s2 { background: var(--primary); color: #eed020; }
.visual_slide_text .swiper-slide p { font-size: 3.3rem; font-weight: 500; margin-top: 3rem; color: #323232; }
/* visual // */
/* section 01 */
.visual_logo { width: 37.5rem; }
.visual_logo img { width: 100%; }
.main_section_01 {
background: #fff;
position: relative; z-index: 100;
}
.main_section_01 .inner { display: flex; justify-content: flex-start; align-items: center; }
.main_section_01 .img { width: 53.5em; }
.main_section_01 .img img { width: 100%; }
.main_section_01 .text { flex-grow: 1; text-align: center; }
.main_section_01 .text p { font-size: 4.7rem; font-weight: 300; margin-bottom: 1rem; }
.main_section_01 .text h1 { font-size: 7.7rem; font-weight: 700; margin-bottom: 9.6rem; }
.main_section_01 .text pre { white-space: pre-line; font-size: 4rem; font-weight: 300; line-height: 1.51em; }
.main_section_01 .btn { margin-top: 8rem; }
/* section 01 end */
/* section 02 */
.main_section_02 { position: relative; z-index: 10; overflow: hidden; background: #fff; padding: 56px 0; }
.main_section_02 .typo_text { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; font-size: 13rem; font-weight: 900; color: var(--primary); }
.main_section_02 .typo_text span { padding: 0 1rem; }
.main_section_02 .typo_text:nth-child(1) { animation: marquee2 forwards infinite linear 60s; }
.main_section_02 .typo_text:nth-child(2) { animation: marquee forwards infinite linear 60s; }
.main_section_02 .typo_text span:nth-child(odd) { -webkit-text-stroke: 1px var(--primary); color: #fff; }
.main_section_02 .typo_text + .type_text { margin-top: 30px; }
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes marquee2 {
from { transform: translateX(-50%); }
to { transform: translateX(0%); }
}
/* section 02 end */
/* section 03 */
.main_section_03 { }
.main_section_03 .inner { display: flex; justify-content: center; align-items: center; }
.main_section_03 .img { width: 110rem; }
.main_section_03 .text { flex-grow: 1; text-align: center; }
.main_section_03 .text h1 { font-size: 7.7rem; font-weight: 700; margin-bottom: 7.5rem; }
.main_section_03 .text p { font-size: 4rem; font-weight: 300; line-height: 1.51em; }
.main_section_03 .btn { margin-top: 8rem; }
/* section 03 end */
/* section 04 */
.main_section_04 { padding: 0; }
/* section 04 end */
/* section 05 */
.main_section_05 { text-align: center; }
.main_section_05 .title { margin-bottom: 10rem; }
.main_section_05 .title p { font-size: 4.7rem; font-weight: 300; color: #000; }
.main_section_05 .title h1 { font-size: 7.7rem; }
.main_section_05 .text { padding: 2rem 5rem; height: 16rem; display: flex; justify-content: center; align-items: center; border: 1px solid #000; border-radius: 0 0 4rem 4rem; }
.main_section_05 .text p { font-size: 4.2rem; font-weight: 300; line-height: 1.3; }
.main_section_05 .text p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.main_section_05 ul { display: flex; justify-content: center; align-items: stretch; flex-wrap: nowrap; gap: 5rem; }
.main_section_05 li { width: calc((100% - 10rem)/3); }
.main_section_05 li a { display: block; border-radius: 4rem; overflow: hidden; }
.main_section_05 li img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: all 0.6s; -webkit-transition: all 0.6s; }
.main_section_05 li a:hover img { transform: scale(1.1); -webkit-transform: scale(1.1); }
.main_section_05 .img_thumb { overflow: hidden; aspect-ratio: 1.6875 / 1; }
.main_section_05 .btn { margin-top: 8rem; padding: 3rem 10rem; }
/* section 05 end */
@media(max-width: 1440px){
.visual_slide_text .swiper-slide h1 { font-size: 12rem; }
.visual_slide_text .swiper-slide p { }
}
@media(max-width: 1300px){
html, body { font-size: calc(100vw / 200); }
.inner,
.visual_slide_text .swiper-container,
.visual_slide_text .swiper-pagination-container { max-width: calc(100% - 60px); }
}
@media(max-width: 768px){
html, body { font-size: calc(150vw / 192); }
section { padding: 30rem 0; overflow: hidden; }
.swiper-button-prev,
.swiper-button-next,
.swiper-pagination-current,
.swiper-pagination-total { display: none; }
.btn { width: 100%; font-size: 5.7rem; }
/* visual */
.visual_logo { display: none; }
.visual_slide_text { justify-content: flex-start; padding: 10rem 0; background: rgba(0,0,0,0.15); }
.visual_slide_text .swiper-container { position: static; height: auto; margin: auto; }
.visual_slide_text .swiper-pagination-container { margin-top: 20rem; }
.visual_slide_text .swiper-pagination-progressbar { width: 100%; height: 2px; }
.visual_slide_text .swiper-slide span { font-size: 6rem; }
.visual_slide_text .swiper-slide p { font-size: 4.7rem; color: #fff; word-break: keep-all; }
/* section 01 */
.main_section_01 .inner { flex-direction: column; gap: 10rem; align-items: stretch; }
.main_section_01 .img { width: 100%; height: 60rem; border-radius: 5rem; overflow: hidden; }
.main_section_01 .img img { width: 100%; height: 100%; object-position: center; object-fit: cover; }
.main_section_01 .text p { font-size: 6.2rem; }
.main_section_01 .text h1 { font-size: 10.2rem; }
.main_section_01 .text pre { font-size: 5.7rem; }
.main_section_02 .typo_text { font-size: 20rem; }
/* section 02 */
.main_section_02 { padding: 0; }
/* section 03*/
.main_section_03 .inner { flex-direction: column; align-items: stretch; gap: 10rem; }
.main_section_03 .img { order: 2; width: 100%; }
.main_section_03 .text { text-align: left; }
.main_section_03 .text h1 { font-size: 10.2rem; }
.main_section_03 .text p { font-size: 5.7rem; }
/* seciton 05 */
.main_section_05 .title p { font-size: 7.2rem; }
.main_section_05 .title h1 { font-size: 10.2rem; }
.main_section_05 ul { overflow: auto; justify-content: flex-start; margin: 0 -10rem; padding: 0 10rem; }
.main_section_05 ul::-webkit-scrollbar { width: 0; height: 0; }
.main_section_05 li { flex-shrink: 0; width: calc((100% - 5rem) / 1.4); }
.main_section_05 .text { height: 20rem; }
.main_section_05 .text p { font-size: 4.7rem; }
}