/* mv start */
.mv-area .text{ padding: 166px 10px 0 0;}
.mv-area .text p{ letter-spacing: 11px;}
.mv-area .text h2{ margin-bottom: 10px;}
.mv-area #video-area{ height: 100vh; width: 100vw; bottom: 0; border-radius: 0;}
.mv-area #video-area img{ max-width: 80px;}
.mv-area.active .text p{ letter-spacing: 4px;}
.mv-area.active #video-bg[data-loading="true"] #video-area{ width: 100%; border-radius: 0; bottom: 0;}
/* mv end */

/* top loader start */
.mv-area #video-bg[data-loading="true"] #video-area{ height: calc(100% - 40% - 20px); width: calc(100% - 20px); bottom: 10px; border-radius: 25px;}
/* top loader end */

/* top text start */
.text-area{ padding: 70px 10px 150px; mix-blend-mode: difference;}
.text-area h2{ font-size: clamp(16px, 1vw, 18px);}
.text-area h2 span{ font-family: var(--font_Rock); font-size: clamp(28px, 2vw, 34px);}
.text-area .bg{ }
.text-area.active{ padding: 40px 10px;}
.text-area.active h2{ opacity: 0;}
/* top text end */

/* top works start */
.works01 .fp-overflow{ max-height: 550px;}
.works01 .title-wrap{ height: 60vh; max-height: 290px; padding: 20px 20px;}
.works01 .title-wrap .htitle p.en{ font-size: clamp(20px, 7vw, 26px);}
.works01 .title-wrap .bottom{ height: 30px; bottom: -30px;}
.works01 .title-wrap .bottom::after{ width: 54px; height: 34px; top: -2px; left: -41px; background-size: 100% 100%;}
.works01 ul{ padding-bottom: 70px; display: block; text-align: left; margin-top: auto;}
.works01 ul li{ padding: 4px 10px; font-size: 14px; margin: 2px 0; font-size: 12px;}

.works02 .text-wrap{ width: 100%; padding: 20px 0px 20px; max-height: 260px;}
.works02 .text-wrap h3{ font-size: clamp(18px, 3vw, 50px);}

.works-area{ padding: 20px 10px 0; margin-top: 0;}
.works-area .htitle .circle{ width: 180px;}
.works-area .swiper01{ position: relative; z-index: 0; border-radius: 20px;}
.works-area .swiper-wrapper{ transition-timing-function: linear;}
.works-area .swiper-slide{ border-radius: 20px; overflow: hidden;}
.works-area .swiper-pagination{ font-size: clamp(20px, 3vw, 30px); font-weight: bold; font-family: var(--font_Lato); letter-spacing: 1.3px; color: var(--color_black); text-align: center; position: relative; z-index: 2; margin-top: 20px;}
/* top works end */

/* news start */
.news-area{ margin: 20px auto 0;}
/* news end */

/* top blog start */
.blog-area{ margin-top: 40px; padding: 0 0 30px; box-sizing: border-box; width: calc(100% - 20px);}
.blog-area .htitle{ width: 100%; max-width: 100%; margin: 0 0 0; height: auto; position: relative; top: initial; left: initial; bottom: initial; z-index: 999; opacity: 1;}
.blog-area .htitle .topleft{ top: -24px; left: 0; background-image: url("/assets/images/item01.svg"); display: none;}
.blog-area .htitle .topright{ top: -24px; right: 0; background-image: url("/assets/images/item02.svg"); display: none;}
.blog-area .htitle .bottomleft{ bottom: -24px; left: 0; background-image: url("/assets/images/item04.svg");}
.blog-area .htitle .bottomright{ bottom: -24px; right: 0; background-image: url("/assets/images/item03.svg");}
.blog-area .htitle .more-btn-box{ display: none;}
.blog-area .htitle .pager-area{ margin-top: 20px 0 10px;}
.blog-area .htitle .pager-area .next,
.blog-area .htitle .pager-area .preview{ width: 40px;}
.blog-area .wrap{ max-width: 100%; padding: 0; margin: auto; z-index: 0;}
.blog-area .wrap .inner.swiper02{ max-width: 100%;}
.blog-area .wrap .inner.swiper02 .swiper-slide{}
.blog-area .wrap .inner.swiper02{ width: 100%; height: auto !important;}
.blog-area .wrap .blog-box{ width: 100%;}
.blog-area .wrap .blog-box .blog-img{ aspect-ratio: 16 / 9; filter: grayscale(85%);}
.blog-area .wrap .blog-box a:hover .blog-img{ filter: grayscale(85%);}
.blog-area > .more-btn-box{ display: block; margin: 0 0 0;}
/* top blog end */