/* visual */
.main_visual{position:relative; width:100%; height: 100vh; background-size: cover; background-position:50%;color: #fff; }
.main_visual .swiper-slide{ position: relative; }
.main_visual .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: var(--black) no-repeat 50% / cover; }
.main_visual .slide1::before{ background-image: url('/images/main/vis1.jpg'); }
.main_visual .slide2::before{ background-image: url('/images/main/vis2.jpg'); }
.main_visual .slide3::before{ background-image: url('/images/main/vis3.jpg'); }
.main_visual .swiper-slide .inr{ display: flex; align-items: center; padding-bottom: 1.8%; box-sizing: border-box; }
.main_visual__small{ display: block; }
.main_visual__h2{margin-bottom: 30rem; font-size: var(--fs48); font-weight: 300; line-height: 1.125; }
.main_visual__p{ margin-top: 30rem; font-size: 18rem; font-weight: 500; }
.main_visual__a{ margin-left: 25rem; display: inline-flex; align-items: center; vertical-align: bottom; font-size: 16rem; font-weight: 700; }
.main_visual__a::before{ content: ''; margin-right: 30rem; display: inline-block; width: 60rem; height: 1px; background: currentColor; opacity: .8; }
.main_visual__a::after{ content: ''; position: relative; top: -1rem; margin-left: 10rem; display: inline-block; width: 9rem; height: 9rem; border: solid currentColor; border-width: 2px 2px 0 0; box-sizing: border-box; transform: rotate(45deg); }
.main_visual__control{ position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; height: auto; pointer-events: none; z-index: 90;}
.main_visual__text {display: flex; flex-direction: column; text-align: center;}
.main_visual__ctrl {display: flex; align-items: center; justify-content: center;}
.main_visual__btn{ position: relative; top: 1rem; flex-shrink: 0; width: 10rem; height: 16rem; pointer-events: auto; }
.main_visual__btn::after{ content: ''; position: absolute; inset: -20rem; }
.main_visual__btn.prev{ margin: 0 25rem 0 0; }
.main_visual__btn.next{ margin: 0 0 0 25rem; }

.main_visual__bar{ position: relative; max-width: 60rem; width: 100%; height: 1px; }
.main_visual__bar::before,
.main_visual__bar::after{ content: ''; position: absolute; inset: 0; background: currentColor; }
.main_visual__bar::before{ opacity: .2; }
.main_visual__bar::after{ width: 0; }
.main_visual__bar.play::after{ animation: progress_bar 5s linear both; }

.main_visual__control2 {position: absolute; inset: 0; }

.main_visual__bar2{ position: relative; max-width: 60rem; width: 100%; height: 1px; }
.main_visual__bar2::before,
.main_visual__bar2::after{ content: ''; position: absolute; inset: 0; background: currentColor; }
.main_visual__bar2::before{ opacity: .2; }
.main_visual__bar2::after{ width: 0; }
.main_visual__bar2.play::after{ animation: progress_bar 5s linear both; }

.main_visual__bar.isPlay::after{ animation: progress_bar 4s linear both; }
.main_visual__bar2.isPlay::after{ animation: progress_bar 4s linear both; }
@keyframes progress_bar {
	0%{ width: 0%; }
	100%{ width: 100%; }
}
.aside { position: fixed; top: 0; right: 0;width: 80rem; height: 100vw; background: #083b5e; z-index: 9;}
.aside .main_container {height: 100vh; display: flex; flex-direction: column;}


.main_visual__pager{ width: 30%; display: inline-flex; gap: 20rem; align-items: center; justify-content: center;}
.main_visual__pager2{ width: 80rem; height: 100%; display: inline-flex; flex-direction: column; gap: 20rem; align-items: center; justify-content: center; z-index: 9; position: absolute; inset: auto 0 auto auto;}
.main_visual__pager2 .swiper-pagination-bullet{ position: relative; display: flex; align-items: center; justify-content: center; width: 20rem; height: 20rem; background: 0; border: 1px solid #0000; border-radius: 50%; box-sizing: border-box; color: #fff; opacity: .6; pointer-events: auto; }
.main_visual__pager2 .swiper-pagination-bullet-active{ border-color: currentColor; color: #fff; opacity: 1; }
.main_visual__pager2 .swiper-pagination-bullet::before{ content: ''; display: inline-block; width: 6rem; height: 6rem; background: currentColor; border-radius: 50%; }
.main_visual__pager2 .swiper-pagination-bullet::after{ content: ''; position: absolute; inset: -5rem; }

@media (prefers-reduced-motion: no-preference){
	.main_visual .swiper-slide-active::before{ animation: slide_bg 3s both; }
	@keyframes slide_bg{
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	.main_visual__h2{ opacity: 0; }
	.main_visual__p{ opacity: 0; }
	.main_visual__a{ opacity: 0; }
	.main_visual__h2{ animation: visual_txt .6s .3s both; }
	.main_visual__p{ animation: visual_txt .6s .5s both; }
	.main_visual__a{ animation: visual_txt .6s .7s both; }
	@keyframes visual_txt{
		0%{ transform: translateX(40rem); opacity: 0; }
		100%{ transform: translateX(0); opacity: 1; }
	}


@media(min-width:768px){
	.main_visual{ aspect-ratio: 1920/920; }
}
@media(max-width:767px){
	.main_visual{ height: 100vh; }
	.main_visual__pager2 {width: 30rem;}
}

.banner_wrap {max-width: 1760rem; z-index: 1; position: relative; inset: 0; margin: 0 auto;}
.banner {position: absolute; left: 0; bottom: 60rem; display: flex; flex-direction: column; gap: 20rem; width: 26%;}
.banner > div {border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; padding: 25rem 30rem;  display: flex; gap: 40rem; align-items: center;}
.banner > div > .list_wrap {width: 50%;}
.banner > div > .list_wrap .swiper-wrapper {overflow: hidden;}
.banner > div > a {font-weight: 500; font-size: 24rem; display: flex; align-items: center; gap: 10rem;}
.banner > div .swiper-slide {}
.banner > div .swiper-slide::before { background: none;}
.banner > div .swiper-slide a {display: block; position: relative; z-index: 11;}
.banner > div .swiper-slide a span:nth-of-type(2) {font-size: 14rem; opacity: .7;}
.banner_arrow {display: flex; flex-direction: column; position: absolute; right: 30rem;}

.banner .swiper-container {height: 100% !important;}

.main_biz {margin-top: 60rem;}
.main_biz__text {display: flex; justify-content: space-between; align-items: center; padding-bottom: 50rem; border-bottom: 1px solid #ededed;}
.main_biz__text > h2 {width: 41%; color: var(--primary); font-size: 36rem; font-weight: 400; line-height: 1.2;}
.main_biz__text > p {width: 44%; font-size: 18rem; color: #444; line-height: 1.66;}
.main_biz__text h2 p {}
.main_biz__text h2 b {text-align: right; display: block;}
.main_biz__li {display: flex; justify-content: space-between; align-items: center; margin: 60rem 0;}
/* .main_biz__li > figure {background: url(/images/main/busi_bg2.png) no-repeat center/cover; aspect-ratio: 1000/300;} */
.main_biz__li figcaption ul {display: flex; gap: 20rem;}
.main_biz__li figcaption ul li {width: 200rem; height: 200rem; border: 2px solid #dedede; box-sizing: border-box; transition: .3s;}
.main_biz__li figcaption ul li:hover {border-color: var(--primary); box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.05);}
.main_biz__li figcaption ul li a {display: block; height: 100%; font-size: 18rem; font-weight: 600; color: #c3ccd5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30rem; position: relative; background: #fff;}
.main_biz__li figcaption ul li:hover a {color: var(--primary); }
.main_biz__li figcaption ul li a .biz_plus {position: absolute; right: 0; bottom: 0; width: 40rem; height: 40rem; background: #ededed; display: flex; align-items: center; justify-content: center; transition: .3s;}
.main_biz__li figcaption ul li:hover a .biz_plus {background: var(--primary);}
.main_biz__li figcaption ul li a figure img {filter: opacity(.2) drop-shadow(0 0 0 gray); transition: .3s;}
.main_biz__li figcaption ul li:hover a figure img {filter: none;}
}
@media(max-width:1580px){
	.aside {display: none;}
}
@media(max-width:1400px){
	.main_biz__li > figure{width: 40%;}
}
@media(max-width:1280px){
	.logo {left: 20rem;}
	.banner {width: 50%; gap: 10rem;}
	.banner > div {padding: 15rem 30rem;}
	.main_biz__li > figure{width: 0%;}
	.main_biz__text > h2 {width: 50%;}
}
@media(max-width:767px){
	.banner {width: 100%; bottom: 20rem;}
	.banner_wrap {width: 96%; margin: 0 auto;}
	.banner > div {padding: 10rem 30rem;}
	.main_visual__h2 {font-size: var(--fs39);}
	.main_visual__p {font-size: 16rem;}

	.main_biz__text {flex-direction: column; gap: 20rem;}
	.main_biz__text > h2 {width: 100%;}
	.main_biz__text > p {width: 100%;}
	.main_biz__li figcaption ul {flex-direction: column;}
	.main_biz__li {flex-direction: column; padding: 30rem 0;}
	.main_biz__li > figure {width: 100%; position: absolute;    overflow: hidden;display: flex;justify-content: center;}
	.main_biz__li > figure img {width: 200%; margin-top: 20%;}
}
@media(max-width:450px){
	.main_biz__text > h2 {font-size: 28rem;}
}

/* common */
main *{ letter-spacing: -.025em; }
.common_cat{ position: relative; font-size: 20rem; font-weight: 700; color: var(--secondary); }
.common_cat::before{ content: ''; position: absolute; left: -21rem; bottom: 7rem; display: inline-block; width: 40rem; height: 40rem; background: linear-gradient(120deg, var(--primary), #e7f2ff); border-radius: 50%; z-index: -1; }
.common_h2{ margin-top: .1em; font-size: var(--fs40); font-weight: 700; line-height: 1.25; }
.common_p{ margin-top: 47rem; font-size: 18rem; font-weight: 500; line-height: 1.55555556; color: #444; }
.common_a{ margin-top: clamp(50rem, calc( 81 / var(--inner) * 100vw ), 81rem); display: inline-flex; align-items: center; gap: 12rem; padding: 10rem 29rem 8rem 32rem; border: 1px solid #666; border-radius: 0 20rem 0 20rem; font-weight: 700; white-space: nowrap; }
.common_a .common_arrow{ height: 12rem; }
.common_arrow{ height: 14rem; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2px;}
.common_arrow.next{ transform: rotate(180deg); }
.common_btn{ display: flex; align-items: center; justify-content: center; width: 39rem; height: 39rem; border: 1px solid currentColor; border-radius: 50%; box-sizing: border-box; color: var(--primary); }




/* dialog modal */
body:has(#dialog[open]){ overflow: hidden; }
.dialogBtn.show{ display: contents; background: 0; font-size: inherit; }
#dialog{ position: fixed; inset: 0; margin: auto; display: block; width: min(600px, 92vw); padding: 0; background: #fff; border: 0; z-index: 151; }
#dialog:not([open]){ visibility: hidden; opacity: 0; }
#dialog::backdrop{ display: none; }
.dialogHead{ display: flex; align-items: center; justify-content: space-between; height: 3.4375em; padding: .9375em; background: #686e82; box-sizing: border-box; color: #fff; }
.dialogBtn.close{ position: relative; width: 1.1875em; height: 1.1875em; background: url('/images/module/btn_close.png') no-repeat 50% / contain; font-size: inherit; }
.dialogBtn.close::before{ content: ''; position: absolute; inset: -5px; }
.dialogBody,
.dialogIframe{ overflow: auto; display: block; width: 100%; height: min(590px, calc(85vh - 3.4375em)); padding: .9375em; background: #fff; box-sizing: border-box; border: 0; }
.dialogBackdrop{ position: fixed; inset: 0; background: #000; opacity: .8; z-index: -1; }
@media(prefers-reduced-motion:no-preference){
	#dialog{ transition: opacity .4s, visibility .4s; }
	.dialogBackdrop{ transition: .4s; }
}