/* CSS Document */

:root{
--mainpic-slide-padB:50px;
--mainpic-slide-W:610px;
--mainpic-slide-H:1880px;
--mainpic-slide-loop:30s;
--mainpic-slide-div:10;
}
:root{
--mainpic-slide-start:-3.25;
}
:root{
--mainpic-slide-wait0:var(--mainpic-slide-start);
--mainpic-slide-wait1:calc(var(--mainpic-slide-start) + 0.3 * var(--mainpic-slide-div) / 8);
--mainpic-slide-wait2:calc(var(--mainpic-slide-start) + 1.5 * var(--mainpic-slide-div) / 8);
--mainpic-slide-wait3:calc(var(--mainpic-slide-start) + 2.2 * var(--mainpic-slide-div) / 8);
--mainpic-slide-half:calc(var(--mainpic-slide-div) / 2);
}
.mainpic .slider,
.mainpic .slider dl{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}
.mainpic .slider{
	padding: var(--size-header-H) 50px var(--mainpic-slide-padB);
	overflow: hidden;
}
.mainpic .slider dl,
.mainpic .slider dl > *,
.mainpic .slider dl > * img{
	width:100%;
	height:100%;
}
.mainpic .slider dl{
	max-width: var(--mainpic-slide-W);
	margin-right: auto;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.mainpic .slider dl > *{
	position: absolute;
	animation: mainpic_slider var(--mainpic-slide-loop) 0s linear infinite;
	/* animation-play-state: paused; *//* テスト用一時停止 */
	opacity: 0;
	display: flex;
}
.mainpic .slider dl > *:nth-of-type(1){animation-delay: calc(var(--mainpic-slide-loop) * var(--mainpic-slide-wait0) / var(--mainpic-slide-div));}
.mainpic .slider dl > *:nth-of-type(2){animation-delay: calc(var(--mainpic-slide-loop) * var(--mainpic-slide-wait1) / var(--mainpic-slide-div));}
.mainpic .slider dl > *:nth-of-type(3){animation-delay: calc(var(--mainpic-slide-loop) * var(--mainpic-slide-wait2) / var(--mainpic-slide-div));}
.mainpic .slider dl > *:nth-of-type(4){animation-delay: calc(var(--mainpic-slide-loop) * var(--mainpic-slide-wait3) / var(--mainpic-slide-div));}
.mainpic .slider dl > *:nth-of-type(5){animation-delay: calc(var(--mainpic-slide-loop) * (var(--mainpic-slide-half) + var(--mainpic-slide-wait0)) / var(--mainpic-slide-div));}
.mainpic .slider dl > *:nth-of-type(6){animation-delay: calc(var(--mainpic-slide-loop) * (var(--mainpic-slide-half) + var(--mainpic-slide-wait1)) / var(--mainpic-slide-div));}
.mainpic .slider dl > *:nth-of-type(7){animation-delay: calc(var(--mainpic-slide-loop) * (var(--mainpic-slide-half) + var(--mainpic-slide-wait2)) / var(--mainpic-slide-div));}
.mainpic .slider dl > *:nth-of-type(8){animation-delay: calc(var(--mainpic-slide-loop) * (var(--mainpic-slide-half) + var(--mainpic-slide-wait3)) / var(--mainpic-slide-div));}
.mainpic .slider dl > * img{max-height: 100%;}
@media screen and (min-width: 1000px){
	.mainpic .slider dl > *:nth-of-type(4n+1){
		margin-right: calc(-1% * 304 / 6.1);
		max-width: calc(1% * 242 / 6.1);
		height: 347px;
		max-height: calc(1% * 347 / 7.7);
	}
	.mainpic .slider dl > *:nth-of-type(4n+2){
		left:0;
		max-width: calc(1% * 304 / 6.1);
		height: 436px;
		max-height: calc(1% * 436 / 7.7);
	}
	.mainpic .slider dl > *:nth-of-type(4n+3){
		right:0;
		max-width: calc(1% * 210 / 6.1);
		height: 300px;
		max-height: calc(1% * 300 / 7.7);
	}
	.mainpic .slider dl > *:nth-of-type(4n+4){
		margin-left: -25%;
		max-width: calc(1% * 242 / 6.1);
		height: 347px;
		max-height: calc(1% * 347 / 7.7);
	}
	@keyframes mainpic_slider{
	0%{opacity: 0; top:100%;}
	2%,38%{opacity:1;}
	40%{opacity: 0; top:calc(var(--size-header-H) * -1);}
	}
}
@media screen and (max-width: 999px){
	:root{
		--mainpic-slide-div:8;
		--mainpic-slide-wait0:1.15;
		--mainpic-slide-wait1:0;
		--mainpic-slide-wait2:3.1;
		--mainpic-slide-wait3:2.15;
	}
	.mainpic .slider{
		padding: 0 var(--size-side-pad);
		margin-top: -35px;
    height: 360px;
	}
	.mainpic .slider dl{max-width: 100%;}
	.mainpic .slider dl > *:nth-of-type(4n+1){
		width:155px;
		height:222px;
		top:0;
	}
	.mainpic .slider dl > *:nth-of-type(4n+2){
		width:195px;
		height:279px;
		bottom: 0;
	}
	.mainpic .slider dl > *:nth-of-type(4n+3){
		width:135px;
		height:192px;
		top:0;
	}
	.mainpic .slider dl > *:nth-of-type(4n+4){
		width:155px;
		height:222px;
		top:0;
		bottom:0;
		margin: auto 0;
	}
	@keyframes mainpic_slider{
	0%{opacity: 0; left:100%;}
	1.5%,24.5%{opacity:1;}
	26%{opacity: 0; left:calc(var(--size-side-pad) * -1);}
	}
}

.top01{
	padding: 230px 0 120px;
	gap: 160px;
	display: grid;
}
.top01 .flex{
	min-height: 300px;
	display: flex;
}
.top01 .flex > *{flex-grow: 1;}
.top01 .flex > *:not(.w){background-color: var(--color-main1-L);}
.top01 .flex > .t{
	gap: 2em;
	display: flex;
	flex-direction: column;
}
.top01 .flex > .p{
	display: grid;
	justify-items: center;
	align-items: start;
}
.top01 .flex > .p img{
	width: auto;
	height: 346px;
	margin-top: -116px;
}
@media screen and (min-width: 1000px){
	.top01 .flex:nth-child(2n){flex-direction: row-reverse;}
	.top01 .flex > .b,
	.top01 .flex > .w{min-width: 20px;}
	.top01 .flex > .t,
	.top01 .flex > .p{width:100%;max-width: 500px;}
	.top01 .flex > .t{
		box-shadow: -10px 0 0 0 var(--color-main1-L),
		10px 0 0 0 var(--color-main1-L);
	}
	.top01 .flex > .t h3{margin-top: -0.5em;}
}
@media screen and (max-width: 999px){
	.top01{
		padding-bottom: 70px;
		gap: 230px;
	}
	.top01 .flex{
		background-color: var(--color-main1-L);
		flex-direction: column;
		align-items: center;
	}
	.top01 .flex > .b,
	.top01 .flex > .w{display: none;}
	.top01 .flex > .p{order:1;}
	.top01 .flex > .p img{
		height: 276px;
		margin-top: -230px;
	}
	.top01 .flex > .t{
		order:2;
		padding: 35px var(--size-side-pad) 40px;
	}
	.top01 .flex .btn_ov_grad{margin: auto;}
}

.top02{
	position: relative;
	padding: 120px 0;
	min-height: 1020px;
}
.top02 > .bg,
.top02 > .grad_naname{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.top02 > .bg{
	z-index: -2;
	opacity: 0.15;
}
.top02 > .grad_naname{
	z-index: -1;
	mix-blend-mode: color;
}
:root{
--top02-sframe-mgnT:100px;
--top02-sframe-padT:30px;
--top02-sframe-width:min(306px,max(245px,calc(1vw * 245 / 3.75)));
--top02-sframe-gap:min(41px,max(32px,calc(1vw * 32 / 3.75)));
}
.top02 .s_frame{
	margin-top: calc(var(--top02-sframe-mgnT) - var(--top02-sframe-padT));
	padding-top: var(--top02-sframe-padT);
	overflow: hidden;
	scroll-behavior: smooth;
}
.top02 .s_frame > *{
	width: calc(var(--top02-sframe-width) * 6 + var(--top02-sframe-gap) * 5);
	min-width: calc(var(--top02-sframe-width) * 6 + var(--top02-sframe-gap) * 5);
	/* transition: margin 0.3s; */
	gap:var(--top02-sframe-gap);
	display: flex;
}
/*
.top02 .s_frame[now="2"] > *{margin-left: calc((var(--top02-sframe-width) + var(--top02-sframe-gap)) * -1);}
.top02 .s_frame[now="3"] > *{margin-left: calc((var(--top02-sframe-width) + var(--top02-sframe-gap)) * -2);}
.top02 .s_frame[now="4"] > *{margin-left: calc((var(--top02-sframe-width) + var(--top02-sframe-gap)) * -3);}
.top02 .s_frame[now="5"] > *{margin-left: calc((var(--top02-sframe-width) + var(--top02-sframe-gap)) * -4);}
.top02 .s_frame[now="6"] > *{margin-left: calc((var(--top02-sframe-width) + var(--top02-sframe-gap)) * -5);}
*/
.top02 .s_frame dd,
.top02 .s_frame a{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.top02 .s_frame dd:nth-of-type(2n+1){padding-bottom: min(50px,max(40px,calc(1vw * 40 / 3.75)));}
.top02 .s_frame dd:nth-of-type(2n+2){padding-top: min(50px,max(40px,calc(1vw * 40 / 3.75)));}
.top02 .s_frame a{
	flex-grow: 1;
	width:var(--top02-sframe-width);
	min-width:var(--top02-sframe-width);
	background-color: #FFF;
	color:var(--color-text);
	padding: 0 0 min(43px,max(30px,calc(1vw * 30 / 3.75)));
}
.top02 .s_frame .num{
	font-size: min(55px,max(44px,calc(1vw * 44 / 3.75)));
	font-weight: 900;
	line-height: 1em;
	height:1em;
	margin-top: calc(var(--top02-sframe-padT) * -1);
	color:var(--color-main2);
}
.top02 .s_frame .icon{
	margin: 30px 0;
	height: min(130px,max(105px,calc(1vw * 105 / 3.75)));
}
.top02 .s_frame .icon > *{
	width: auto;
	height: 100%;
}
.top02 .s_frame h3{
	text-align: center;
	font-size: min(22px,max(18px,calc(1vw * 18 / 3.75)));
}
.top02 .s_frame h3 + *{
	margin-top: 0.25em;
	color: var(--color-main1);
}
.top02 .s_frame .text{
	font-size: var(--font-14-11);
	margin-top: 1em;
	max-width: 16em;
	text-align: justify;
}
.top02 .s_frame a:hover{background-color: var(--color-main2);}
.top02 .s_frame a:hover *{color:#FFF;}
.top02 .s_frame a:hover svg *[class*="grad"]{fill:#FFF;}
.top02 .s_arrow{
	margin-top: min(40px,max(30px,calc(1vw * 30 / 3.75)));
	gap: min(25px,max(20px,calc(1vw * 20 / 3.75)));
	display: flex;
	justify-content: flex-end;
}
.top02 .s_arrow > *{
	width: min(70px,max(50px,calc(1vw * 50 / 3.75)));
	height: min(70px,max(50px,calc(1vw * 50 / 3.75)));
	background-color: #FFF;
	border-radius: 100%;
	cursor: pointer;
	transition: background-color 0.3s;
	display: grid;
	align-items: center;
	justify-items: center;
}
.top02 .s_arrow svg{width:1em;}
.top02 .s_arrow .L svg{transform: scaleX(-1);}
.top02 .s_arrow svg .textcol{fill:var(--color-main2);}
.top02 .s_arrow svg .textcol_stroke{stroke:var(--color-main2);}
.top02 .s_arrow > *:hover{background-color: var(--color-main2);}
.top02 .s_arrow > *:hover svg .textcol{fill:#FFF;}
.top02 .s_arrow > *:hover svg .textcol_stroke{stroke:#FFF;}
.top02 .s_bar{
	background-color: #cccccc;
	height: 5px;
	margin-top: min(40px,max(25px,calc(1vw * 25 / 3.75)));
	display: flex;
}
.top02 .s_bar > *{
	width:0;
	background-color: var(--color-main2);
	/* transition: width 0.3s; */
}
@media screen and (min-width: 1000px){
	.top02 .con_subt h3 br{display: none;}
}
@media screen and (max-width: 999px){
	.top02{padding: 60px 0; min-height: 0;}
	.top02 .con_subt h3{line-height: 1.25em;}
}

.top03{padding: 100px var(--size-side-pad);}
.top03 .flex{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.top03 dl{
	margin-top: 50px;
	gap: 4.1%;
	display: flex;
	/*
	display: grid;
	grid-template-columns:repeat(3 ,1fr);
	*/
}
.top03 dl dd,
.top03 dl .p + *{
	gap: 1em;
	display: flex;
	flex-direction: column;
}
.top03 dl dd{width: 306px;}
.top03 dl .p{
	width: 100%;
	height: 210px;
	display: flex;
}
.top03 dl .p.noimg{background-color: var(--color-main1-L);}
.top03 dl .p img{width:100%;height:100%;}
.top03 dl .dc{
	gap: 1em;
	display: flex;
	align-items: center;
}
.top03 dl .dc .d{font-size: 11px; line-height: 1em;}
.top03 dl .dc .c{
	gap: 0.5em 1em;
	display: flex;
	flex-wrap: wrap;
}
.top03 dl .dc .c span{
	font-size: 10px;
	line-height: 1em;
	padding: 0.3em 1em;
	min-width: 6em;
	background-color: var(--color-text);
	color:#FFF;
	display: grid;
	align-items: center;
	justify-items: center;
}
.top03 dl .dc .c span[class*="new"]{background-color: var(--color-main1);}
.top03 dl .dc .c span[class*="rec"]{background-color: var(--color-main2);}
.top03 dl .t1 a{
	font-size: 20px;
	font-weight: 900;
	line-height: 1.25em;
	/*
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	*/
}
.top03 dl .t2{
	line-height: 2em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media screen and (min-width: 1000px){
	.top03 dl .more{display: none;}
}
@media screen and (max-width: 999px){
	.top03{padding: 60px var(--size-side-pad) 75px;}
	.top03 > .Wbase{
		position: relative;
		padding-bottom: 110px;
	}
	.top03 > .Wbase .btn_ov_grad{
		position: absolute;
    bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	.top03 dl{flex-direction: column;}
	.top03 dl dd{
		width: 100%;
		flex-direction: row;
	}
	.top03 dl dd + dd{
		margin-top: 20px;
		padding-top: 20px;
		border-top:solid 1px #b3b3b3;
	}
	.top03 dl .p{
		width: 168px;
		min-width: 168px;
		height: 116px;
	}
	.top03 dl .p + *{flex-grow: 1; gap:0.5em;}
	.top03 dl .t1 a{font-size: 16px;}
	.top03 dl .t2{display: none;}
	.top03 dl .more{margin-top: auto;}
	.top03 dl .more a{
		font-size: 13px;
		gap: 1em;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.top03 dl .more a svg{width: auto;height:1em;}
	.top03 dl .more a svg .textcol{fill:var(--color-main1);}
	.top03 dl .more a svg .textcol_stroke{stroke:var(--color-main1);}
}

.top04 .flex{
	display: flex;
	justify-content: space-between;
}
.top04 .flex .set{
	flex-grow: 1;
	width:50%;
}
.top04 .flex .set > img{
	width:100%;
	max-height: 450px;
}
.top04 .flex .set > .pad{padding: 80px 0 100px;}
.top04 .flex .set > .pad .prewrap{
	margin-top: 2em;
	line-height: 2em;
}
.top04 .flex .set > .pad .btnbox{
	margin-top: 3em;
	display: flex;
	justify-content: center;
}
@media screen and (min-width: 1000px){
	.top04 .flex .set:nth-child(1) > .pad{padding-left: var(--size-side-pad); padding-right: 40px;}
	.top04 .flex .set:nth-child(1) > .pad > .Wbase{margin-right: 0;}
	.top04 .flex .set:nth-child(2) > .pad{padding-right: var(--size-side-pad); padding-left: 40px;}
	.top04 .flex .set:nth-child(2) > .pad > .Wbase{margin-left: 0;}
}
@media screen and (max-width: 999px){
	.top04 .flex{flex-direction: column;}
	.top04 .flex .set{width:100%;}
	.top04 .flex .set > .pad{padding: 40px var(--size-side-pad) 75px;}
}