@charset "utf-8";
:root{
	--u:min(1px, calc(100vw / 1100));}
@media only screen and (max-width:767px){
	:root{
		--u:min(1px, calc(100vw / 540));}
}

/* COMMON */
main#contents{
	width:100%;
	margin:0;
	padding:0;
	max-width:none;}

/* MAIN VISUAL */
#mainBanner{
	margin-top:0!important;
	padding:0;
	position:relative;
	overflow:hidden;
	width:100%;
	height:400px;}
#mainBanner::after{
	content:'';
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:60%;
	background:linear-gradient(0deg,rgba(255, 255, 255, 1) 9%, rgba(255, 255, 255, 0) 100%);}
#mainBanner img{
	position:absolute;
	left:0;
	width:100%;
	height:400px;
	object-fit:cover;
	object-position:80% 30%;}
#mainBanner .slogan{
	color:var(--primary-color);
	width:calc(100% - 40px);
	max-width:1100px;
	margin:auto;
	text-align:center;
	font-weight:bold;
	position:absolute;
	height:auto;
	bottom:10%;
	left:0;
	right:0;
	margin:auto;
	z-index:2;}
#mainBanner .slogan-txt1{
	margin:0;
	font-size:16px;
	font-family:"Oswald", sans-serif;}
#mainBanner .slogan-txt2{
	margin:0;
	font-size:35px;
	line-height:1.2;}
@media only screen and (min-width:768px){
	#mainBanner::after{
		filter:blur(20px);
		width:60%;
		height:60%;
		background:linear-gradient(45deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);}
	#mainBanner,
	#mainBanner img{
		height:500px;}
	#mainBanner .slogan{
		bottom:20%;
		text-align:left;}
	#mainBanner .slogan-txt1{
		font-size:20px;}
	#mainBanner .slogan-txt2{
		font-size:55px;}
}
@media only screen and (min-width:899px){
	#mainBanner{
		margin-top:80px!important;}
}
@media only screen and (min-width:1024px){
	#mainBanner,
	#mainBanner img{
		height:600px;}
	#mainBanner .slogan-txt1{
		font-size:24px;}
	#mainBanner .slogan-txt2{
		font-size:80px;}
}

/* SECTION */
section{
	margin:0!important;
	padding:60px 20px 80px;
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	position:relative;
	z-index:4;}
#sec1{
	position:relative;
	background-image:url(/dcms_media/image/rec_story_bg.webp);
	background-position:center;}
#sec1 .inner{
	position:relative;
	z-index:3;}
#sec2{
	background-image:url(/dcms_media/image/rec_fit_bg.webp);
	background-position:center;}
#sec2 h2,
#sec2 p,
#sec2 dt,
#sec2 dd{
	color:#FFF;}
#sec3{
	overflow:hidden;
	background-image:url(/dcms_media/image/rec_mumber_bg.webp);
	background-position:bottom;}
#sec4{
	background:var(--primary-color);}
#sec4 .section-title,
#sec4 .section-sub,
#sec4 .section-bottom p{
	color:var(--primary-inverse-color);}
#sec5{
	padding:40px 20px;
	background-position:top 20% center;
	background-image:url(/dcms_media/image/rec_entry_bg.webp);}
#sec7{
	padding:60px 0 80px;
	background-image:url(/dcms_media/image/rec_gallery_bg.webp);
	background-position:top;}
@media only screen and (min-width:768px){
	section{
		padding:90px 20px 110px;}
	#sec3{
		padding:90px 0 110px;}
	#sec4 .section-heading{
		display:flex;
		align-items:center;}
	#sec4 .section-top{
		margin:0 20px 0 0;}
	#sec4 .section-bottom{
		margin:0 0 0 20px;}
	#sec5{
		padding:60px 20px;}
	#sec7{
		padding:90px 0 110px;}
}
@media only screen and (min-width:1024px){
	section{
		padding:120px 20px 140px;}
	#sec1{
		padding:250px 20px;}
	#sec3{
		padding:120px 0 140px;}
	#sec4{
		padding:80px 20px;}
	#sec4 .section-top{
		margin:0 40px 0 0;}
	#sec4 .section-bottom{
		margin:0 0 0 40px;}
	#sec5{
		padding:80px 20px;}
	#sec7{
		padding:120px 0 140px;}
}

/* SECTION HEADING */
.section-heading{
	margin:0 0 30px;}
.section-title{
	margin:0;
	font-size:40px;
	text-align:center;
	letter-spacing:0;
	line-height:1;
	color:var(--primary-color);
	font-family:"Oswald", sans-serif;}
.section-sub{
	display:table;
	font-size:16px;
	margin:auto!important;
	color:var(--primary-color);
	font-weight:500;
	position:relative;}
.section-bottom{
	margin:20px 0 0;}
@media only screen and (min-width:768px){
	.section-title{
		text-align:left;}
	.section-sub{
		margin:0!important;}
	.section-heading{
		margin:0 0 40px;}
	.section-title{
		font-size:70px;}
	.section-sub{
		font-size:24px;}
}
@media only screen and (min-width:1024px){
	.section-heading{
		margin:0 0 50px;}
	.section-title{
		font-size:100px;}
	.section-sub{
		font-size:30px;}
}

/* STORY */
.story-title,
.story-sub{
	margin:0;
	font-size:30px;
	text-align:center;
	font-weight:bold;}
.story-title{
    text-align:center;
    margin:0 0 0.2em;
	font-size:40px;
	font-family:"Oswald", sans-serif;
	color:var(--primary-color);}
.story-sub{
	line-height:1.2;
	font-size:30px;}
.story-sub strong{
	color:var(--primary-color);}
.story-text{
	margin:2.5em auto 0;}
.story-img1,
.story-img2{
	display:none;
	position:absolute;
	margin:auto;
	height:50%;
	left:0;
	right:0;}
.story-img1{
	top:10%;
	width:100%;}
.story-img2{
	bottom:10%;
	width:90%;}
.story-img1 img{
	top:0;}
.story-img1 img,
.story-img2 img{
	position:absolute;
	border-radius:20px;}
.story-img1 img,
.story-img2 img:nth-child(1){
	height:50%;}
.story-img2 img:nth-child(2){
	height:40%;}
.story-img1 img:nth-child(1),
.story-img2 img:nth-child(1){
	left:0;
	box-shadow:10px 10px 15px 0px rgba(0, 0, 0, 0.2);}
.story-img1 img:nth-child(1){
	border-radius:0 20px 20px 0;}
.story-img1 img:nth-child(2){
	border-radius:20px 0 0 20px;}
.story-img2 img{
	bottom:0;
	border-radius:20px;}
.story-img1 img:nth-child(2),
.story-img2 img:nth-child(2){
	right:0;
	box-shadow:-10px 10px 15px 0px rgba(0, 0, 0, 0.2);}
@media only screen and (min-width:480px){
	.story-text{
		text-align:center;}
}
@media only screen and (min-width:768px){
	.story-title{
		font-size:50px;}
	.story-sub{
		font-size:40px;}
	.story-img1,
	.story-img2{
		display:block;}
}
@media only screen and (min-width:1024px){
	.story-title{
		font-size:60px;}
	.story-sub{
		font-size:50px;}
	.story-img2{
		width:80%;}
	.story-img1 img,
	.story-img2 img:nth-child(1){
		height:50%;}
	.story-img2 img:nth-child(2){
		height:40%;}
}
@media only screen and (min-width:1440px){
	.story-img1{
		top:12%;}
	.story-img2{
		bottom:12%;}
	.story-img1 img,
	.story-img2 img:nth-child(1){
		height:65%;}
	.story-img2 img:nth-child(2){
		height:55%;}
}

/* FIT */
.num-item{
	margin:0 0 40px;}
.num-item:last-child{
	margin:0;}
.num-title{
	font-size:1.5em;
	display:flex;
	align-items:center;
	line-height:1.5;
	margin:0 0 10px;}
.num-no{
	font-size:1.8em;
	position:relative;
	margin:0 15px 0 0;
	padding:0 15px 0 0;
	font-family:"Oswald", sans-serif;}
.num-no::after{
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	margin:auto;
	width:1px;
	height:calc(100% - 0.8em);
	background:var(--primary-inverse-color);}

/* MEMBER */
.member-slider{
	max-width:1100px;
	margin:auto;}
.member-inner{
	width:100%;}
.member-item{
	background:#e8efff;
	padding:30px 20px;
	border-radius:10px;}
.member-img{
	margin:0 0 40px;}
.member-img img{
	width:100%;
	border-radius:10px;}
.member-disc{
	margin:60px 0 0;}
.member-title{
	position:relative;
	font-size:20px;
	display:inline;
	background-color:var(--primary-inverse-color);
	color:var(--primary-color);
	line-height:1.8;
	padding:5px 20px;
	box-decoration-break:clone;
	-webkit-box-decoration-break:clone;}
.member-label{
	background:var(--primary-color);
	color:var(--primary-inverse-color);
	font-size:12px;
	padding:5px 10px;
	display:inline-block;
	position:absolute;
	left:0;
	top:-32px;
	font-family:"Oswald", sans-serif;}
.member-txt{
	font-weight:bold;
	margin:20px 0 0!important;}
.member-name{
	margin:20px 0 0;
	font-size:22px;
	font-weight:bold;
	line-height:1.4;}
.member-img a{
	display:block;}
.member-img a img{
	transition:opacity .3s;}
.member-img a:hover img{
	opacity:.8;}
.member-slider .member-dots{
	text-align:center;
	margin:0 0 25px;}
.member-slider .swiper-pagination-bullet{
	background-color:var(--primary-color)!important;
	border:1px solid var(--primary-color);
	height:15px!important;
	width:15px!important;
	margin:0 10px!important;
	transition:background-color 0.3s, border-color 0.3s;}
.member-slider .swiper-pagination-bullet-active{
	background-color:var(--light-border-color) !important;
	border-color:var(--light-border-color) !important;}
.member-slider .swiper-operation{
    max-width:1100px;
	margin:30px auto 0;}
.member-slider .swiper-button{
	display:flex;
	height:45px;
	gap:20px;
	position:relative;
	justify-content:center;}
.member-slider .swiper-button-prev,
.member-slider .swiper-button-next{
	position:relative;
	margin-top:0;
	height:45px;
	width:120px;
	border-radius:10px;
	gap:20px;
	border:1px solid var(--primary-color);
	background:var(--primary-inverse-color);
	left:0;
	right:0;
	bottom:0;
	top:0;
	transition:0.3s;}
.member-slider .swiper-button-prev::before,
.member-slider .swiper-button-next::before{
	content:'';
	width:10px;
	height:10px;
	border:0px;
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
	position:absolute;
	top:0;
	right:0;
	left:0;
	bottom:0;
	margin:auto;}
.member-slider .swiper-button-prev::before{
	border-bottom:solid 1px var(--primary-color);
	border-left:solid 1px var(--primary-color);}
.member-slider .swiper-button-next::before{
	border-top:solid 1px var(--primary-color);
	border-right:solid 1px var(--primary-color);}
.member-slider .swiper-button-prev:hover,
.member-slider .swiper-button-next:hover{
	background:var(--primary-color);}
.member-slider .swiper-button-prev:hover::before{
	border-bottom:solid 1px var(--primary-inverse-color);
	border-left:solid 1px var(--primary-inverse-color);}
.member-slider .swiper-button-next:hover::before{
	border-top:solid 1px var(--primary-inverse-color);
	border-right:solid 1px var(--primary-inverse-color);}
@media only screen and (min-width:768px){
	.member-slider{
		max-width:none;}
	.member-inner{
		width:100%;
		padding-left:max(20px, calc((100vw - 1150px) / 2));
		box-sizing:border-box;}
	.member-item{
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		padding:35px 30px;
		border-radius:20px;}
	.member-img,
	.member-disc{
		width:calc(50% - 20px);}
	.member-img{
		margin:0 10px 0 0;}
	.member-img img{
		border-radius:20px;}
	.member-disc{
		margin:35px 0 0 20px;}
	.member-title{
		font-size:25px;}
	.member-label{
		top:-35px;
		font-size:14px;
		left:-15px;}
	.member-slider .swiper-operation{
		display:flex;
		align-items:center;
		justify-content:flex-end;}
	.member-slider .member-dots{
		margin:0 30px 0 0;
		display:table;
		width:auto;}
	.member-slider .swiper-pagination-bullet{
	  height:20px!important;
	  width:20px!important;
	  margin:0 15px!important;}
}
@media only screen and (min-width:1024px){
	.member-item{
		padding:35px;
		border-radius:30px;}
	.member-title{
		font-size:30px;}
	.member-label{
		font-size:16px;}
	.member-txt{
		margin:30px 0 0!important;}
	.member-name{
		margin:30px 0 0;
		font-size:26px;}
	.member-slider .member-dots{
		margin:0 100px 0 0;
		display:table;
		width:auto;}
}

/* NUMBER */
.num-top{
	margin:0 0 20px;}
.num-grid figure{
	margin:0 0 20px;}
.num-grid figure:last-child{
	margin:0;}
@media only screen and (min-width:768px){
	.num-grid{
		display:flex;
		flex-wrap:wrap;
		justify-content:center;}
	.num-top,
	.num-bottom{
		width:calc(50% - 10px);}
	.num-top{
		margin:0 10px 0 0;}
	.num-bottom{
		margin:0 0 0 10px;}
	.num-grid figure{
		margin:0 0 35px;}
}

/* JOB */
.job-bottom{
	margin:30px 0 0;}
.job-title{
	margin:0;
	font-size:50px;
	text-align:center;
	line-height:1;
	color:var(--primary-color);
	font-family:"Oswald", sans-serif;}
.job-button a{
	display:table;
	background:#FFF;
	margin:20px auto 0;
	font-weight:bold;
	position:relative;
	padding:10px 3em 10px 2em;
	font-size:20px;
	box-shadow:4px 4px 8px 0 rgba(0, 0, 0, 0.3);}
.job-button a:hover{
	color:var(--primary-color);
	box-shadow:none;
	transform:translate(4px,4px);}
.job-button a::after,
.job-link a::after{
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	right:1.5em;
	margin:auto;
	background-size:contain;
	background-position:center;}
.job-button a::after{
	right:1.5em;
	width:20px;
	height:20px;
	background-image:url(/dcms_media/other/blue_arrow.svg);}
.job-link a{
	display:table;
	margin:auto;
	font-weight:bold;
	position:relative;
	padding:0 1.5em 0 0;
	font-size:20px;
	color:var(--sub-color);
	border-bottom:1px solid var(--sub-color);}
.job-link a::after{
	right:0;
	width:20px;
	height:20px;
	transition:0.3s;
	background-image:url(/dcms_media/other/red1_arrow.svg);}
.job-link a:hover{
	color:#cc1721;
	border-bottom:1px solid #cc1721;}
.job-link a:hover::after{
	background-image:url(/dcms_media/other/red2_arrow.svg);}
@media only screen and (min-width:768px){
	.job-bottom{
		margin:40px 0 0;}
	.job-box{
		width:70%;
		margin:0 0 0 auto;}
	.job-title{
		font-size:70px;}
	.job-button a{
		font-size:25px;}
	.job-button a::after{
		width:25px;
		height:25px;}
	.job-link a{
		margin:0 0 0 auto;}
}
@media only screen and (min-width:1024px){
	.job-bottom{
		margin:50px 0 0;}
	.job-title{
		font-size:100px;}
	.job-button a{
		font-size:30px;}
	.job-button a::after{
		width:30px;
		height:30px;}
}

/* TAB */
.tabs{
	display:flex;
	flex-wrap:wrap;
	gap:0 20px;}
.tabs > label{
	flex:1 1;
	order:-1;
	padding:15px 20px;
	border-radius:5px 5px 0 0;
	background-color:var(--light-border-color);
	color:#000;
	text-align:center;
	cursor:pointer;}
.tabs > label:hover{
	opacity:.8;}
.tabs input{
	display:none;}
.tabs > .tab-item{
	display:none;
	width:100%;
	padding:20px;
	background-color:#fff;
	box-shadow:8px 8px 15px 0px rgba(0, 0, 0, 0.05);}
.tabs label:has(:checked){
	background-color:var(--primary-color);
	color:#FFF;}
.tabs label:has(:checked) + .tab-item{
	display:block;}
.fit-tab{
	display:flex;
	flex-wrap:wrap;
	gap:0 20px;}
.fit-tab > label{
	flex:1 1;
	order:-1;
	min-width:70px;
	padding:15px;
	border-top:1px solid var(--primary-inverse-color);
	border-left:1px solid var(--primary-inverse-color);
	border-right:1px solid var(--primary-inverse-color);
	border-radius:10px 10px 0 0;
	background-color:transparent;
	color:#fff;
	font-weight:bold;
	font-size:1.2em;
	text-align:center;
	cursor:pointer;}
.fit-tab > label:hover{
	opacity:.8;}
.fit-tab input{
	display:none;}
.fit-tab > .fit-item{
	display:none;
	width:100%;
	padding:20px;
	background-color:transparent;
	border-radius:0 0 10px 10px;
	border:1px solid var(--primary-inverse-color);}
.fit-tab label:has(:checked){
	color:var(--primary-color);
	opacity:1;
	background-color:var(--primary-inverse-color);}
.fit-tab label:has(:checked) + .fit-item{
	display:block;}
@media only screen and (min-width:768px){
	.tabs > .tab-item,
	.fit-tab > .fit-item{
		padding:30px;}
}
@media only screen and (min-width:1024px){
	.tabs > .tab-item,
	.fit-tab > .fit-item{
		padding:40px;}
}

/* CHECK LIST */
.check-list li{
	position:relative;
	padding:10px 0 10px 30px;}
.check-list li::after{
	content:'';
	position:absolute;
	top:1em;
	left:0;
	margin:auto;
	width:20px;
	height:20px;
	background-image:url(/dcms_media/other/check.svg);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;}
@media only screen and (min-width:768px){
	.check-list li{
		padding:10px 0 10px 40px;}
	.check-list li::after{
		top:0.8em;
		width:25px;
		height:25px;}
}

/* GALLERY */
.gall-slider .swiper-slide{
	justify-content:space-between;
	flex-direction:column;
	display:flex;}
.gall-slider figure{
	margin:0 0 30px;}
.gall-slider figure:last-child{
	margin:0;}
.gall-slider .swiper-wrapper{
	transition-timing-function:linear !important;}

/* FIT + */
.stats{
	width:100%;
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-template-rows:calc(var(--u) * 269) calc(var(--u) * 188) calc(var(--u) * 188);
	gap:calc(var(--u) * 36);}
.card{
	position:relative;
	background:#fff;
	border-radius:calc(var(--u) * 20);
	overflow:hidden;}
.card.tall{
	grid-column:2;
	grid-row:2 / 4;
	height:calc(var(--u) * 413);
	align-self:start;}
.label{
	position:absolute;
	left:calc(var(--u) * 32);
	top:calc(var(--u) * 28);
	background:var(--sub-color);
	color:#fff;
	font-weight:700;
	font-size:calc(var(--u) * 22);
	line-height:1;
	padding:calc(var(--u) * 11) calc(var(--u) * 31) calc(var(--u) * 11) calc(var(--u) * 31);}
.small .label{
	left:calc(var(--u) * 41);
	font-size:calc(var(--u) * 20);
	padding:calc(var(--u) * 9) calc(var(--u) * 30);}
.num{
	position:absolute;
	display:flex;
	align-items:baseline;
	font-weight:900;
	line-height:1;
	letter-spacing:-0.02em;
	white-space:nowrap;}
.num .v{
	font-size:calc(var(--u) * 150);
	color:var(--primary-color);}
.num .u{
	font-size:calc(var(--u) * 52);
	margin-left:calc(var(--u) * 8);
	letter-spacing:0;
	color:var(--primary-color);}
.c1 .num{
	left:calc(var(--u) * 40);
	bottom:calc(var(--u) * 32);}
.c2 .num{
	left:50%;
	transform:translateX(-50%);
	bottom:calc(var(--u) * 62);}
.c2 .num .v{
	font-size:calc(var(--u) * 140);}
.c3 .num{
	left:calc(var(--u) * 40);
	bottom:calc(var(--u) * 24);}
.c3 .num .v{
	font-size:calc(var(--u) * 100);}
.c3 .num .u{
	font-size:calc(var(--u) * 44);
	color:var(--primary-color);}
.c4 .num{
	left:calc(var(--u) * 76);
	bottom:calc(var(--u) * 24);}
.c4 .num .v{
	font-size:calc(var(--u) * 100);}
.c4 .num .u{
	font-size:calc(var(--u) * 44);
	color:var(--primary-color);}
.c5 .num{
	right:calc(var(--u) * 36);
	bottom:calc(var(--u) * 28);}
.c5 .num .v{
	font-size:calc(var(--u) * 140);}
.pict{
	display:inline;
	position:absolute;}
.c1 .pict{
	right:calc(var(--u) * 76);
	top:calc(var(--u) * 74);
	width:calc(var(--u) * 116);
	height:calc(var(--u) * 154);
	border-radius:calc(var(--u) * 6);}
.c2 .pict{
	top:calc(var(--u) * 86);
	width:calc(var(--u) * 60);
	height:calc(var(--u) * 130);
	border-radius:calc(var(--u) * 30);}
.c2 .pict.l{
	left:calc(var(--u) * 78);}
.c2 .pict.r{
	right:calc(var(--u) * 78);}
.c3 .pict{
	right:calc(var(--u) * 66);
	top:calc(var(--u) * 30);
	width:calc(var(--u) * 108);
	height:calc(var(--u) * 124);
	border-radius:calc(var(--u) * 16);}
.c4 .pict{
	right:calc(var(--u) * 76);
	top:calc(var(--u) * 50);
	width:calc(var(--u) * 120);
	height:calc(var(--u) * 112);
	border-radius:calc(var(--u) * 16);}
.c5 .pict{
	left:calc(var(--u) * 76);
	top:calc(var(--u) * 98);
	width:calc(var(--u) * 200);
	height:calc(var(--u) * 170);
	border-radius:calc(var(--u) * 20);}
.c5 .label{
	left:calc(var(--u) * 45);
	top:calc(var(--u) * 30);
	font-size:calc(var(--u) * 26);
	padding:calc(var(--u) * 11) calc(var(--u) * 22);}
@media (max-width:767px){
	.stats{
		grid-template-columns:1fr;
		grid-template-rows:none;
		grid-auto-rows:auto;}
	.c1,
	.c2{
		height:calc(var(--u) * 269);}
	.small{
		height:calc(var(--u) * 188);}
	.card.tall{
		grid-column:1;
		grid-row:auto;
		height:calc(var(--u) * 413);}
	.c1{
		order:1;}
	.c2{
		order:2;}
	.c3{
		order:3;}
	.c4{
		order:4;}
	.c5{
		order:5;}
}