@charset "utf-8";

@import url('layout.css');
@import url('common.css');

body, html{min-width:360px;}

.dMbody{padding-top:100dvh;box-sizing:border-box;}
section{position:relative;background:#fff}

.setA{position:fixed;top:0;left:0;width:100%;height:100dvh;}
.banner{position:relative;width:100%;height:100dvh;}
.banner .sliderJs{height:100%;overflow:hidden;}
.banner .item{position:relative;width:100%;height:100%;padding:0 var(--default-pd);box-sizing:border-box;}
.banner .img{position:absolute;top:0;left:0;right:0;bottom:0;transform:scale(1.1);transition:transform 1s ease;}
.banner .img{background-repeat:no-repeat;background-position:50% 50%;;background-size:cover}
.banner .box{opacity:0;position:relative;z-index:1;max-width:max(var(--default-size), var(--default-size-vw));top:max(380px, calc(380 * var(--vw)));margin:0 auto;color:#fff;transition:all .8s ease-in-out;}
.banner .txtg p:nth-child(1){line-height:max(72px, calc(72 * var(--vw)));;font-weight:700;font-size:max(48px, calc(48 * var(--vw)));}
.banner .txtg p:nth-child(2){margin-top:max(30px, calc(30 * var(--vw)));font-weight:500;font-size:max(18px, calc(18 * var(--vw)));}
.banner .txtg{display:inline-block;text-align:left}
.banner .controller{display:flex;align-items:center;gap:max(16px,calc(16 * var(--vw)));position:absolute;z-index:2;left:0;right:0;bottom:max(120px,calc(120 * var(--vw)));width:max(408px, calc(408 * var(--vw)));margin:0 auto;color:#fff;}
.banner .ctrl_line{position:relative;flex:1;height:max(2px,calc(2 * var(--vw)));;background:rgba(255,255,255,.15);}
.banner .ctrl_line .fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:#fff;transform:scaleX(0);transform-origin:left center;transition:transform .4s ease}
.banner .ctrl_fraction{display:flex;align-items:center;gap:max(8px,calc(8 * var(--vw)));font-weight:300;}
.banner .ctrl_fraction span{opacity:.6;}
.banner .ctrl_fraction .current{opacity:1;font-weight:700;}
.banner .btn_autoplay{width:max(16px,calc(16 * var(--vw)));;height:max(16px,calc(16 * var(--vw)));line-height:1;margin-left:max(6px,calc(6 * var(--vw)));}
.banner .swiper-slide-active .img{transform:scale(1);}
.banner .swiper-slide-active .box{opacity:1 ! important;top:max(350px, calc(350 * var(--vw))) !important;}

.setA:before{animation:scrollMotion 1.5s linear infinite alternate;content:"";z-index:2;position:absolute;left:0;right:0;bottom:0;margin:0 auto;width:max(26px, calc(26 * var(--vw)));height:max(43px, calc(43 * var(--vw)));background:url(../images/ic_scroll.png) no-repeat 0 0/contain;}
@keyframes scrollMotion{0% {bottom:max(40px, calc(40 * var(--vw)));}50% {bottom:max(60px, calc(60 * var(--vw)));}100% {bottom:max(40px, calc(40 * var(--vw)));}}

.setB{padding-top:max(160px, calc(160 * var(--vw)))}
.setC{padding-top:max(200px, calc(200 * var(--vw)))}
.setD{padding-top:max(230px, calc(230 * var(--vw)));padding-bottom:max(200px, calc(200 * var(--vw)));}

.tit_txtg{margin-bottom:max(100px, calc(100 * var(--vw)));text-align:center}
.tit_txtg h2{font-family:'cormorant';font-weight:500;font-size:max(24px, calc(24 * var(--vw)));color:var(--primary-color-20)}
.tit_txtg p:nth-of-type(1){margin-top:max(40px, calc(40 * var(--vw)));font-weight:700;font-size:max(48px, calc(48 * var(--vw)));color:var(--primary-color-20)}
.tit_txtg p:nth-of-type(2){margin-top:max(20px, calc(20 * var(--vw)));line-height:max(30px, calc(30 * var(--vw)))}

.setB .boxg{display:grid;gap:max(80px, calc(80 * var(--vw)));grid-template-columns:repeat(auto-fill,minmax(max(360px, calc(360 * var(--vw))),1fr));justify-content:center;padding-left:var(--default-pd);padding-right:var(--default-pd);padding-bottom:max(115px, calc(115 * var(--vw)));background:url(../images/main/bg_core.png) no-repeat 50% bottom/contain}
.setB .boxg div{color:var(--primary-color-20)}
.setB .boxg div:nth-child(odd){margin-top:max(150px, calc(150 * var(--vw)))}
.setB .boxg h3{font-size:500}
.setB .boxg p:nth-of-type(1){margin-top:max(12px, calc(12 * var(--vw)));font-weight:700;font-family:'cormorant';font-size:max(40px, calc(40 * var(--vw)));}
.setB .boxg p:nth-of-type(2){margin-top:max(28px, calc(28 * var(--vw)));height:max(468px, calc(468 * var(--vw)))}
.setB .boxg .img01{background:url(../images/main/img_core01.png) no-repeat 50% 50%/cover}
.setB .boxg .img02{background:url(../images/main/img_core02.png) no-repeat 50% 50%/cover}
.setB .boxg .img03{background:url(../images/main/img_core03.png) no-repeat 50% 50%/cover}
.setB .boxg .img04{background:url(../images/main/img_core04.png) no-repeat 50% 50%/cover}

.setC .box,.setD .box{max-width:max(var(--default-size), var(--default-size-vw));margin:0 auto;padding:0 var(--default-pd);}

.setC .notice dl div{display:flex;padding-bottom:max(50px, calc(50 * var(--vw)));margin-bottom:max(40px, calc(40 * var(--vw)));border-bottom:1px solid #ccc}
.setC .notice dt{flex:1 0 max(220px, calc(220 * var(--vw)));font-size:max(17px, calc(17 * var(--vw)));color:var(--secondary-color-10);font-weight:700}
.setC .notice dd:nth-of-type(1){width:100%}
.setC .notice .part{display:block;margin-bottom:max(16px, calc(16 * var(--vw)));font-size:max(17px, calc(17 * var(--vw)));}
.setC .notice a{padding-bottom:max(2px, calc(2 * var(--vw)));color:var(--primary-color-20);font-size:max(24px, calc(24 * var(--vw)));font-weight:500;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-wrap:break-word;}
.setC .notice a:hover{text-decoration:underline;text-underline-position:under;}
.setC .notice dd:last-child{flex:1 0 max(120px, calc(120 * var(--vw)));margin-top:max(34px, calc(34 * var(--vw)));text-align:right;font-size:max(24px, calc(24 * var(--vw)));font-weight:500;color:#c7c7c7}
.setC .notice .ic{display:inline-block;width:max(50px, calc(50 * var(--vw)));height:max(20px, calc(20 * var(--vw)));line-height:max(20px, calc(20 * var(--vw)));margin-top:max(8px, calc(8 * var(--vw)));text-align:center;font-size:max(12px, calc(12 * var(--vw)));color:#fff;border-radius:max(20px, calc(20 * var(--vw)));background:var(--secondary-color-20)}
.setC .btn_more{margin-top:max(40px, calc(40 * var(--vw)));text-align:center;font-size:max(18px, calc(18 * var(--vw)));color:var(--primary-color-30)}
.setC .btn_more a{display:inline-block;}
.setC .btn_more i{position:relative;display:block;width:max(77px, calc(77 * var(--vw)));height:max(77px, calc(77 * var(--vw)));margin:0 auto max(20px, calc(20 * var(--vw)));}
.setC .btn_more i:before,.setC .btn_more i:after{content:"";position:absolute;top:0;bottom:0;right:0;left:0;margin:auto;width:max(77px, calc(77 * var(--vw)));height:max(2px, calc(2 * var(--vw)));background:#444}
.setC .btn_more i:after{transform:rotate(90deg);}

.setD .box{display:flex;align-items:center;justify-content:center;height:max(640px, calc(640 * var(--vw)));background:url(../images/main/bg_promise.png) no-repeat 50% 50%/cover}
.setD .box h2,.setD .box p{color:#fff}
.setD .box .btn_view{margin-top:max(120px, calc(120 * var(--vw)));text-align:center;color:#fff;font-weight:700}
.setD .box .btn_view a{display:inline-flex;gap:80px;align-items:center;padding-bottom:max(20px, calc(20 * var(--vw)));border-bottom:max(2px, calc(2 * var(--vw))) solid #fff}
.setD .box .btn_view a:after{content:"";width:max(8px, calc(8 * var(--vw)));height:max(7px, calc(7 * var(--vw)));background:url(../images/main/ic_arr.svg) no-repeat 50% 50%/contain}

/* motion */
.tit_txtg, .boxg div, .notice, .setD .box{opacity:0;transform:translateY(120px);transition:1s all;}
.setD .box{width:40%;transition:2s all;}
.is-visible{opacity:1 ! important;transform:translateY(0) ! important;}
.setD .box.is-visible{width:max(1400px, calc(1400 * var(--vw)));}

/* for mobile */
@media (max-width: 1400px) {
	section h2{font-size:24px}
	
	.banner .box{text-align:left}
	.banner .txtg p:nth-child(1){font-size:38px}
	.banner .txtg p:nth-child(2){margin-top:24px;line-height:30px;font-size:18px}
	.banner .txtg p br{display:block}
	.banner .controller{bottom:70px;justify-content:center;}
	.banner .swiper-pagination-bullet-active:after{width:22px;height:22px}
	.banner .swiper-pagination-bullet:before{width:4px;height:4px;}
		
	.setA:before{width:16px;height:26px;}
	@keyframes scrollMotion{0% {bottom:10px;}50% {bottom:30px;}100% {bottom:10px;}}
	
	.setB .boxg{gap:30px;}
	.setB .boxg p:nth-of-type(1){font-size:30px}
	.setB .boxg p:nth-of-type(2){height:400px}
	
	/* motion */
	.tit_txtg, .boxg div, .notice, .setD .box{opacity:0;transform:translateY(100px);transition:1s all ! important;}
	.setD .box{width:100% ! important;}
	.is-visible{opacity:1 ! important;transform:translateY(0) ! important;}
	
}

@media (max-width: 920px) {
	section h2{font-size:18px}
	
	.banner .txtg p:nth-child(1){line-height:38px;font-size:28px}
	.banner .txtg p:nth-child(2){margin-top:16px;line-height:28px;font-size:15px}
	.banner .box{top:18dvh}
	.banner .swiper-slide-active .box{top:22dvh ! important}
	
	.setB{padding-top:80px}
	.setB .tit_txtg{padding:0 16px 0}
	.tit_txtg{margin-bottom:40px;padding:0;text-align:left}
	.tit_txtg h2{font-size:16px}
	.tit_txtg p:nth-of-type(1){margin-top:20px;font-size:28px}
	.tit_txtg p:nth-of-type(2){line-height:19px}
	.setB .boxg{gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));padding-bottom:0;background-position:50% 50%}
	.setB .boxg div:nth-child(odd){margin-top:30px}
	.setB .boxg p:nth-of-type(1){display:none}
	.setB .boxg p:nth-of-type(2){height:208px}
	
	.setC{padding-top:80px}
	.setC .notice dl div{display:block;padding-bottom:28px;margin-bottom:28px}
	.setC .notice dt{font-size:14px}
	.setC .notice dt br{display:none}
	.setC .notice .ic{width:48px;height:19px;margin-left:8px;line-height:19px;font-size:11px;}
	.setC .notice .part{margin:8px 0 6px;font-size:15px;}
	.setC .notice a{font-size:16px}
	.setC .notice dd:last-child{margin-top:16px;text-align:left;font-size:15px;}
	.setC .btn_more{font-size:14px}
	.setC .btn_more i{width:36px;height:36px}
	.setC .btn_more i:before, .setC .btn_more i:after{width:36px}
	
	.setD{padding:80px 0}
	.setD .box{height:480px;justify-content:flex-start;background:url(../images/main/mo/bg_promise.png) no-repeat 50% 50% / cover;}
	.setD .box .btn_view{margin-top:100px;text-align:left}

}

@media (max-width: 540px) {
	.banner .controller{width:300px}
}