/* visual */
.main_visual{ display: grid; grid-template-columns: [left] minmax(4vw, auto) [inner_start] clamp(1px, 44.79166667%, 860rem) [center] clamp(1px, 44.79166667%, 860rem) [inner_end] minmax(4vw, auto) [right]; }
.main_scroll{ grid-column: left / inner_start; position: relative; }
.main_scroll__inr{ position: absolute; inset: 0 0 11.4% 4rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 20rem; }
.main_scroll__bar{ position: relative; width: 2px; height: 150rem; background: #000; clip-path: inset(0 -100vw); }
.main_scroll__bar::before,
.main_scroll__bar::after{ content: ''; position: absolute; inset: 56.666667% 0 0; }
.main_scroll__bar::before{ background: #ddd; }
.main_scroll__bar::after{ display: block; width: 6rem; height: 6rem; border-radius: 50%; background: #000; transform: translate(-2rem,-50%); }
.main_scroll__txt{ writing-mode: vertical-rl; font-size: 14rem; font-weight: 500; letter-spacing: .03ch; color: #bbb; transform: rotate(180deg); }
.main_visual__swiper{ grid-column: inner_start / inner_end; position: relative; border-radius: 60rem; color: #fff; }
.main_visual .swiper-slide{ position: relative; }
.main_visual .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: #222 no-repeat 50% / cover; }
.main_visual .slide1::before{ background-image: url('/images/main/visual1.jpg'); background-position-x: 75%; }
.main_visual .slide2::before{ background-image: url('/images/main/visual2.jpg'); background-position-x: 67%; }
.main_visual .slide3::before{ background-image: url('/images/main/visual3.jpg'); background-position-x: 70%; }
.main_visual .inr{ display: flex; align-items: center; max-width: 1520rem; padding-top: 0.3%; box-sizing: border-box; }
.main_visual__h2{ font-size: clamp(24rem, calc( 45 / var(--inner) * 100vw ), 45rem); font-weight: 400; line-height: 1.61; }
.main_visual__h2 strong{ font-size: 1.33333333em; }
.main_visual__pager{ position: absolute; inset: auto 0 0; margin: auto auto 4.75% auto; display: flex; justify-content: center; gap: 10rem; width: auto; font-size: 14rem; font-weight: 500;  z-index: 1; }
.main_visual__pager .swiper-pagination-bullet{ all: unset; position: relative; display: flex; align-items: center; justify-content: center; width: 40rem; height: 40rem; cursor: pointer; }
.main_visual__pager .swiper-pagination-bullet:not([class*="active"]){ opacity: .6; }
/* .main_visual__pager .swiper-pagination-bullet-active{  } */
.main_visual__svg{ position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 1px; transform: rotate(-90deg); z-index: 1; }
@media (prefers-reduced-motion: no-preference){
	.main_scroll__bar::before,
	.main_scroll__bar::after{ animation: main_scroll_down 3s linear infinite; }
	@keyframes main_scroll_down {
		0%{ top: -30%; }
		100%{ top: 130%; }
	}
	.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 .swiper-slide-active .main_visual__h2{ animation: visual_txt .6s .3s both; }
	@keyframes visual_txt{
		0%{ transform: translateY(40rem); opacity: 0; }
		100%{ transform: translateY(0); opacity: 1; }
	}
	@media(min-width:768px){
		@keyframes visual_txt{
			0%{ transform: translateX(40rem); opacity: 0; }
			100%{ transform: translateX(0); opacity: 1; }
		}
	}
	.swiper-pagination-bullet-active .main_visual__svg *{ animation: svgAni linear var(--slide_time) both; }
	@keyframes svgAni{
		0%{ stroke-dasharray: var(--total_length); stroke-dashoffset: var(--total_length); }
		100%{ stroke-dasharray: var(--total_length); stroke-dashoffset: 0; }
	}
}
@media(min-width:768px){
	.main_visual__swiper{ aspect-ratio: 1720/700; }
	.main_visual__pager{ inset: 5.9% 0 0 auto; margin: auto 4.75% auto auto; flex-direction: column; }
	.main_visual__pager .swiper-pagination-bullet{ all: unset; position: relative; display: flex; align-items: center; justify-content: center; width: 40rem; height: 40rem; cursor: pointer; }
}
@media(max-width:767px){
	.main_visual__swiper{ height: calc( 100vh - var(--header_height)); }
}

/* common */
.common_h2{ font-size: var(--fs50); font-weight: 400; }
.common_h2::after{ content: ''; position: relative; top: .05em; margin-left: 0.22em; display: inline-block; width: .2em; height: .2em; background: var(--primary); border-radius: 50%; }
.common_a{ display: inline-block; padding: 0.41666667em 1.0625em; background: #fff; border: 2px solid var(--primary); border-radius: 3em; box-sizing: border-box; font-size: 18rem; font-weight: 600; color: var(--primary); }
@media(prefers-reduced-motion:no-preference){
	.common_a{ transition: .4s; }
}
@media(hover:hover){
	.common_a:not(:hover){ border-color: #ccc; color: #aaa; }
}

/* bg */
[class^="main_bg"]{ position: relative; }
[class^="main_bg"]::before{ content: ''; position: absolute; background: no-repeat 50% / contain; transform: translateY(-50%); }
.main_bg1::before{ top: 134rem; right: 0; aspect-ratio: 566/801; width: clamp(250rem, calc( 566 / var(--inner) * 100vw ), 566rem); background-image: url('/images/main/bg1.png'); }
.main_bg2::before{ top: 194rem; left: 0; aspect-ratio: 655/925; width: clamp(289rem, calc( 655 / var(--inner) * 100vw ), 655rem); background-image: url('/images/main/bg2.png'); }

/* business */
.main_biz{ padding-top: clamp(90rem, calc( 140 / var(--inner) * 100vw ), 140rem); }
.main_biz .inr{ display: grid; }
.main_biz__ul{ margin-top: 32rem; border-bottom: 1px solid #ddd; font-size: 18rem; }
.main_biz__li:not(:first-child) .main_biz__con{ display: none; }
.main_biz__h3{ position: relative; display: flex; align-items: center; justify-content: space-between; padding: .67em 0; border-top: 2px solid #0000; font-size: var(--fs30); font-weight: 700; cursor: pointer; }
.main_biz__h3::before{ content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--secondary); }
.main_biz__h3::after{ content: ''; display: inline-block; width: 0.83333333em; height: 0.83333333em; background: var(--secondary); clip-path: polygon( 0 44%, 44% 44%, 44% 0, 56% 0, 56% 44%, 100% 44%, 100% 56%, 56% 56%, 56% 100%, 44% 100%, 44% 56%, 0 56%); }
.main_biz__h3:not(.active)::before{ height: 1px; background: #ddd; }
.main_biz__h3:not(.active)::after{ background: #ccc; }
.main_biz__con{ margin-top: -6rem; padding-bottom: 30rem; }
.main_biz__p{ font-weight: 500; line-height: 1.55555556; color: var(--gray); }
.main_biz .common_a{ margin-top: 23rem; }
.main_biz__img{ justify-self: center; margin-top: 60rem; aspect-ratio: 1/1; width: 70%; background: no-repeat 50% / cover; border-radius: 50%; }
.main_biz__img[data-img="i1"]{ background-image: url('/images/main/biz1.jpg'); }
.main_biz__img[data-img="i2"]{ background-image: url('/images/main/biz2.jpg'); }
.main_biz__img[data-img="i3"]{ background-image: url('/images/main/biz3.jpg'); }
@media(prefers-reduced-motion:no-preference){
	.main_biz__h3::before,
	.main_biz__h3::after,
	.main_biz__img{ transition: .4s; }
}
@media(min-width:768px){
	.main_biz .inr{ grid-template: 'h2 img' 'ul img' / 1fr 1fr; }
	.main_biz .common_h2{ grid-area: h2; margin-top: -0.3em; }
	.main_biz__ul{ grid-area: ul; }
	.main_biz__img{ grid-area: img; align-self: center; justify-self: flex-end; margin: 0; width: 82.85714286%; }
}

/* about */
.main_about{ position: relative; padding: clamp(90rem, calc( 140 / var(--inner) * 100vw ), 140rem) 0 80rem; }
.main_about::before{ content: ''; position: absolute; inset: auto 0 0; height: var(--bg_height); padding: 100rem 0 80rem; background: linear-gradient(90deg, var(--primary), #ff544f); z-index: -1; }
.main_about .inr{ display: grid; grid-template: 'h2' 'img' 'con'; }
.main_about__img{ grid-area: img; justify-self: center; aspect-ratio: 600/599; margin: 60rem 0 40rem; width: 70%; background: url('/images/main/about1.jpg') no-repeat 50% / cover; border-radius: 50% 50% 0 0; }
.main_about .common_h2{ grid-area: h2; }
.main_about__con{ grid-area: con; position: relative; font-size: 18rem; color: #fff; }
.main_about__con p ~ p{ margin-top: 19rem; }
.main_about .common_a{ margin-top: 56rem; }
@media(hover:hover){
	.main_about .common_a:not(:hover){ background: #0000; border-color: currentColor; color: inherit; }
}
@media(min-width:768px){
	.main_about::before{ padding-top: clamp(35rem, calc( 75 / var(--inner) * 100vw ), 75rem); }
	.main_about .inr{ grid-template: 'img h2' 'img con' 1fr / 50% 48.67857143%; align-items: center; justify-content: space-between; }
	.main_about__img{ justify-self: unset; margin: 0; width: 85.71428571%; }
	.main_about .common_h2{ margin: 1.32em 0 2.18em; }
}

/* notice */
.main_notice{ padding-top: clamp(90rem, calc( 125 / var(--inner) * 100vw ), 125rem) }
.main_notice .common_a{ margin-top: 44rem; }
.main_notice__scroll{ overflow: auto hidden; }
.main_notice__ul{ margin-top: 34rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10rem, calc( 40 / var(--inner) * 100vw ), 40rem); }
.main_notice__a{ position: relative; display: block; background: #fff; border: 1px solid #ddd; padding: 34rem 28rem 32rem; border-radius: 30rem; box-sizing: border-box; }
.main_notice__a::before{ content: ''; position: absolute; right: 39rem; bottom: 29rem; display: inline-block; width: 25rem; height: 25rem; background: #fff; clip-path: polygon( 0 44%, 44% 44%, 44% 0, 56% 0, 56% 44%, 100% 44%, 100% 56%, 56% 56%, 56% 100%, 44% 100%, 44% 56%, 0 56%); }
.main_notice__category{ font-size: 14rem; font-weight: 700; }
.main_notice__title{ margin-top: 8rem; min-height: 3em; font-size: 20rem; font-weight: 600; color: #222; -webkit-line-clamp: 2; }
.main_notice__content{ margin-top: 20rem; min-height: 4.5em; color: #999; -webkit-line-clamp: 3; }
.main_notice__date{ margin-top: 51rem; display: inline-block; font-size: 13rem; color: #bbb; }
@media(hover:hover){
	.main_notice__a:hover{ background: var(--secondary); border-color: var(--secondary); }
	.main_notice__a:hover *{ color: #fff; }
}
@media(min-width:768px){
	.main_notice .common_a{ position: absolute; top: -96rem; right: 0; }
	.main_notice__ul{ grid-template-columns: repeat(2, 1fr); }
}
@media(min-width:1280px){
	.main_notice__ul{ grid-template-columns: repeat(4, 1fr); }
}
@media(max-width:767px){
	.main_notice__ul{ min-width: 1300rem; }
}

/* links */
.main_links .inr{ margin-top: clamp(90rem, calc( 140 / var(--inner) * 100vw ), 140rem); display: grid; gap: 20rem clamp(10rem, calc( 40 / var(--inner) * 100vw ), 40rem); }
.main_links__a{ display: grid; grid-template: 't a' 'c a'; align-items: center; justify-content: space-between; padding: 68rem clamp(10rem, calc( 49 / var(--inner) * 100vw ), 49rem) 74rem; background: var(--black) no-repeat 50% / cover; color: #fff; border-radius: 30rem; }
.main_links__a.a1{ background-image: url('/images/main/etc1.jpg'); }
.main_links__a.a2{ background-image: url('/images/main/etc2.jpg'); }
.main_links__title{ grid-area: t; margin-bottom: 0.475em; font-size: var(--fs40); }
.main_links__content{ grid-area: c; }
.main_links__arrow{ grid-area: a; position: relative; top: 4rem; right: 1px; display: flex; align-items: center; justify-content: center; width: clamp(80rem, calc( 100 / var(--inner) * 100vw ), 100rem); height: clamp(80rem, calc( 100 / var(--inner) * 100vw ), 100rem); border: 2px solid currentColor; border-radius: 50%; box-sizing: border-box; }
.main_links__arrow::before{ content: ''; display: block; width: 18rem; height: 18rem; border: solid currentColor; border-width: 3rem 3rem 0 0; box-sizing: border-box; transform: translateX(-17%) rotate(45deg); }
@media(min-width:768px){
	.main_links .inr{ grid-template-columns: repeat(2, 1fr); }
}

/* intro */
.main_intro{ padding: clamp(90rem, calc( 125 / var(--inner) * 100vw ), 125rem) 0 clamp(90rem, calc( 140 / var(--inner) * 100vw ), 140rem); text-align: center; }
.main_intro__h2{ font-size: var(--fs50); font-weight: 400; }
.main_intro .common_a{ margin-top: 44rem; }

/* partner */
.main_partner{ padding: 31rem 0 24rem; border-top: 1px solid #ddd; }
.main_partner__swiper{margin: auto;  max-width:900rem; width:100%;}
.main_partner__a{ display: block; width: 100%; aspect-ratio: 15/6; }
.main_partner__img{ width: 100%; height: 100%; object-fit: contain; }