@charset "UTF-8";
/* CSS Document */

/*********************************************************

					　　　　初期設定

**********************************************************/

html{
	font-size: 62.5%; /*1rem=10px*/
	box-sizing: border-box;
	scroll-behavior: smooth;
}

body{
	line-height: 1.5;
	margin: 0 auto;
	width: 100%;
	font-family: 'M PLUS Rounded 1c', sans-serif;
}

.pc{display: block;}

.sp{display: none;}

.eng{
	font-family: 'Oswald', sans-serif;
}

.inner{
	position: relative;
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}

a{
	text-decoration: none;
}

.readtext{
	font-size: min(2vw,25px);
	letter-spacing: 0.05em;
	line-height: 2.2;
}

.main{
	position: relative;
	background: #fbfbfb;
}


/*********************************************************

					ここからheader

**********************************************************/

.header{
	position: absolute;
	top: 0;
	right: 0;
	width: 40%;
	max-width: 750px;
	text-align: center;
	/* background: #ccc; */
	z-index: 11;
}

.menu{
	font-family:'Times New Roman', Times, serif;
	width: 100%;
	color: #fff;
	display: flex;
	justify-content: center;
	font-size: min(1.15vw,22px);
	line-height: 1;
	padding: 1em 0;
}

.menu-text{
	overflow: hidden;
	padding: 0.25em 1em 0.15em 1em;
	border-left: 1px solid #fff;
}

.menu-text a{
	position: relative;
	color: rgba(255,255,255,0);
	font-weight: 200;
	letter-spacing: 0.1em;
	
	/* background: rgba(255,255,255,0); */
}

.menu-text a::before{
	position: absolute;
	top: 50%;
	left: 50%;
	color: #fff;
	transform: translate(-50%,-50%);
	transition: ease 0.3s;
}
.menu-text a::after{
	position: absolute;
	top: 50%;
	left: 50%;
	color: #fff;
	transform: translate(-50%,200%);
	transition: ease 0.4s;
}
.menu-text .a1::before,.menu-text .a1::after{content: "POINT";}
.menu-text .a2::before,.menu-text .a2::after{content: "LINEUP";}
.menu-text .a3::before,.menu-text .a3::after{content: "SPEC";}
.menu-text .a4::before,.menu-text .a4::after{content: "POSTAGE";}



.menu-text a:hover::before{
	transform: translate(-50%,-200%);
}

.menu-text a:hover::after{
	transform: translate(-50%,-50%);
}

.menu .menu-text:first-of-type{
	border-left: none;
}


/*********************************************************

					ここからsec01

**********************************************************/

.sec01{
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	max-height: 100vh;
	z-index: 1;
}

h1{
	display: none;
}

.slider{
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
}

.base-card{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.base-card.b1{background: url(../img/sec01-img01.webp)no-repeat center / cover; animation: 20s base1 ease-in-out infinite;}
.base-card.b2{background: url(../img/sec01-img02.webp)no-repeat center / cover; animation: 20s base3 ease-in-out infinite;}
.base-card.b3{background: url(../img/sec01-img03.webp)no-repeat center / cover; animation: 20s base5 ease-in-out infinite;}
.base-card.b4{background: url(../img/sec01-img04.webp)no-repeat center / cover; animation: 20s base7 ease-in-out infinite;}

.sub-card.b1-2{background: #adc8ca; animation: 20s base2 ease-in-out infinite;}
.sub-card.b2-2{background: #dad8b7; animation: 20s base4 ease-in-out infinite;}
.sub-card.b3-2{background: #f0bcaa; animation: 20s base6 ease-in-out infinite;}
.sub-card.b4-2{background: #cccfe5; animation: 20s base8 ease-in-out infinite;}

.base-text{
	position: absolute;
	left: 60%;
	top: 50%;
	font-size: 3vw;
	line-height: 1;
	color: #fff;
	transform: translateY(-50%);
}

.sub-card{
	position: absolute;
	width: 40%;
	max-width: 750px;
	height: 100%;
	top: 0;
	right: 0;
	background: rgba(255,255,255,0.5);
}


/* アニメーション設定 */

@keyframes base1{
	0% { transform:translate(-100%,0)}
	7.5% { transform: translate(0,0);}
	74% { transform: translate(0,0);}
	75% { transform:translate(-100%,0)}
	100% { transform:translate(-100%,0)}
}

@keyframes base2{
	0% { transform:translate(0,100%)}
	7.5% { transform: translate(0,100%); }
	12.5% { transform: translate(0,0); }
}
@keyframes base3{
	0% { transform: translate(0,-100%); }
	25.0% { transform: translate(0,-100%); }
	32.5% { transform: translate(0,0); }
	74% { transform: translate(0,0);}
	75% { transform:translate(0,-100%)}
}
@keyframes base4{
	0% { transform: translate(100%,0); }
	32.5% { transform: translate(100%,0); }
	37.5% { transform: translate(0,0); }
}
@keyframes base5{
	0% { transform: translate(100%,0); }
	50.0% { transform: translate(100%,0); }
	57.5% { transform: translate(0,0); }
	87.5% { transform: translate(0,0); }
	88.5% { transform: translate(100,0); }
}
@keyframes base6{
	0% { transform: translate(0,-100%); }
	57.5% { transform: translate(0,-100%); }
	62.5% { transform: translate(0,0); }
}
@keyframes base7{
	0% { transform: translate(0,0);z-index: -1;}
	15% { transform: translate(0,0); }
	16% { transform: translate(0,-100%); }
	75.0% { transform: translate(0,-100%);z-index: 1;}
	82.5% { transform: translate(0,0);}
	98% { transform: translate(0,0);}
	99% { transform: translate(0,0);}
}
@keyframes base8{
	0% { transform: translate(0,0); z-index: -1;}
	15% { transform: translate(0,0); }
	16% { transform: translate(-100vw,0);}
	82.5% { transform: translate(-100vw,0); z-index: 1;}
	87.5% { transform: translate(0,0); }
	98% { transform: translate(0,0);}
	99% { transform: translate(0,0);  }
}

.sec01-wrap{
	position: absolute;
	width: 40%;
	max-width: 750px;
	height: 100%;
	top: 0;
	right: 0;
	z-index: 10;
}

.sec01-wrap .logo{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 66%;
}
.sec01-wrap .logo img{
	width: 100%;
	height: auto;
}

.sec01-wrap-box{
	position: absolute;
	right: 0;
	bottom: 0;
	text-align: center;
	width: 100%;
	padding: 20px 0;
	box-sizing: border-box;
}

.sec01-wrap-box img{
	width: 33%;
	display: block;
	margin: 0 auto;
}

.link-btn01,.link-btn02{
	position: relative;
	font-size: min(1.5vw,26px);
	font-weight: 500;
	line-height: 1;
	display: inline-block;
	padding: 0.5em 1.6em 0.4em 1.8em;
	border: 2px solid #fff;
	border-radius: 0.5em;
	margin-bottom: 1em;
	color: #fff;
	z-index: 1;
	overflow: hidden;
}
.link-btn01::before,.link-btn02::before{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: -1;
	background: #fff;
	width: 120%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	transform: translate(-50%,-50%) scale(0);
	transition: ease-in-out 0.3s;
}
.link-btn01:hover::before,.link-btn02:hover::before{
	transform: translate(-50%,-50%) scale(1);
}
.link-btn01:hover,.link-btn02:hover{
	color: #333;
}

.link-btn02{
	color: #333;
	border: 2px solid #333;
	margin-top: 3em;
}
.link-btn02::before{
	background: #333;
}
.link-btn02:hover{
	color: #fff;
}

.link-btn02.sp{
	display: none;
}

.scroll{
	position: absolute;
	left: 40px;
	bottom: 0;
	z-index: 10;
}

.scroll span{
	position: relative;
	width: 2px;
	height: 10vh;
	max-height: 100px;
	display: block;
	background: rgba(255,255,255,0.3);
}

.scroll span::before{
	content: "scroll";
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	font-size: 14px;
	transform-origin: left top;
	transform: rotate(90deg);
}

.scroll span::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	transform: scale(1,0);
	transform-origin: left top;
	animation: scroll 2s linear infinite;
}

/* アニメーション設定 */
@keyframes scroll{
	0%  { transform-origin: left top; transform: scale(1,0);}
	35% { transform-origin: left top; transform: scale(1,1);}
	50% { transform: scale(1,1);}
	65% { transform-origin: left bottom; transform: scale(1,1);}
	100% { transform-origin: left bottom; transform: scale(1,0);}
}



/*********************************************************

			         ここからsec02

**********************************************************/

.sec02{
	position: relative;
	width: 100%;
	padding: 180px 0 0;
	text-align: center;
}

.title{
	display: block;
	margin: 0 auto 120px;
	font-family: 'Times New Roman', Times, serif;
	font-size: min(5vw,50px);
	letter-spacing: 0.05em;
	color: #674828;
}

.title img{
	width: 100%;
	height: auto;
}

.sec02-wrap{
	width: 90%;
	max-width: 1500px;
	margin: 0 auto 90px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.sec02-wrap-img{
	width: 15%;
	margin-bottom: 2%;
}






/*********************************************************

			         ここからsec03

**********************************************************/

.sec03{
	position: relative;
	width: 100%;
	padding: 180px 0;
	text-align: center;
	overflow: hidden;
	z-index: 1;
}

.subtitle{
	font-family: 'Oswald', sans-serif;
	font-size: min(7vw,70px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	color: #674828;
	width: 9em;
	max-width: 630px;
	padding-bottom: 0.15em;
	border-bottom: 1px solid #674828;
	display: inline-block;
}

.subtext{
	font-size: min(3vw,30px);
	line-height: 1;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	color: #674828;
	padding-top: 0.3em;
}

.sec03-wrap{
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	background: #ccc;
	margin: 120px auto 0;
}

.sec03 .readtext{
	line-height: 1.7;
	margin-top: 1.2em;
}

.sec03-img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.splide__pagination{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding-bottom: 15px;
}

.splide__pagination__page{
	width: 15px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	margin: 0 3px;
	border: 1px solid #B1B1AE;
}
.splide__pagination__page.is-active{
	background: #B1B1AE;
}

.circle01{
	position: absolute;
	top: 3%;
	right: 85%;
	width: 40vw;
	max-width: 768px;
	aspect-ratio: 1/1;
	display: inline-block;
	/* border: 1px solid #674828; */
	background: #674828;
	border-radius: 50%;
	z-index: -1;
	transform-origin: center;
	transform: scale(0);
	/* transition: ease-in-out 0.3s 0.2s; */
}

.circle02{
	position: absolute;
	top: 37%;
	left: 90%;
	width: 31vw;
	max-width: 600px;
	aspect-ratio: 1/1;
	display: inline-block;
	/* border: 1px solid #674828; */
	background: #674828;
	border-radius: 50%;
	z-index: -1;
	transform-origin: center;
	transform: scale(0);
	/* transition: ease-in-out 0.3s 0.2s; */
}

.circle03{
	position: absolute;
	top: 72%;
	right: 97%;
	width: 25vw;
	max-width: 480px;
	aspect-ratio: 1/1;
	display: inline-block;
	/* border: 1px solid #674828; */
	background: #674828;
	border-radius: 50%;
	z-index: -1;
	transform-origin: center;
	transform: scale(0);
	/* transition: ease-in-out 0.3s 0.2s; */
}

.circle01::before,
.circle02::before,
.circle03::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #fbfbfb;
	border: 2px solid #674828;
	box-sizing: border-box;
	transform-origin: center;
	transform: scale(0);
	z-index: 1;
}

.circle01.active,
.circle02.active,
.circle03.active{
	transform: scale(1);
	transition: ease 0.5s 0.1s;
	/* animation: 0.4s circle ease-in-out forwards; */
	/* animation-fill-mode:forwards; */
}

.circle01.active::before,
.circle02.active::before,
.circle03.active::before{
	transform: scale(1);
	transition: ease 0.5s 0.4s;
}
/* アニメーション設定 */

@keyframes circle{
	0%  { transform: scale(0)}
	80% { transform: scale(1.1); }
	85% { transform: scale(0.9); }
	90% { transform: scale(1.03); }
	95% { transform: scale(0.97); }
	100%{ transform: scale(1); }
}

/*********************************************************

			         ここからsec04

**********************************************************/

.sec04{
	width: 100%;
	padding: 180px 0;
	background: #E6E7E9;
	text-align: center;
}

.sec04 .readtext{
	margin-top: 120px;
}

.sec04-wrap{
	width: 100%;
	margin-top: 120px;
	display: flex;
	justify-content: space-between;
}

.sec04-wrap-box{
	width: 31%;
	background: #DADAD9;
	padding: 6% 3%;
	box-sizing: border-box;
}

.sec04-wrap-box-img01{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.sec04-wrap-box-img01 img{
	width: 48%;
	margin-bottom: 5%;
}

.sec04-wrap-box-img02{
	width: 50%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 auto;
}
.sec04-wrap-box-img02 img{
	width: 96%;
	margin-bottom: 10%;
}

.sec04-wrap-box-img03{
	width: 50%;
	aspect-ratio: 1/2.6;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}
.sec04-wrap-box-img03 img{
	width: 96%;
}

.sec04-text01{
	position: relative;
	font-size: min(3.4vw,34px);
	line-height: 1;
	width: 5em;
	display: inline-block;
	margin-top: 1em;
	z-index: 1;
}

.sec04-text01::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.2em;
	width: 100%;
	height: 80%;
	background: #F3F18A;
	z-index: -1;
}

.sec04-text02{
	font-size: min(2vw,20px);
	line-height: 1.5;
	margin-top: 1.7em;
}

.sec04-text03{
	font-size: min(3.4vw,34px);
	line-height: 1;
	margin-top: 1.3em;
}
.sec04-text03 span{
	font-size: 60%;
}

.sec04-space01{
	font-size: min(2vw,20px);
	display: block;
	height: 3em;
	margin-top: 1.7em;
}
.sec04-space02{
	font-size: min(2vw,20px);
	display: block;
	height: 1.5em;
}

.sec04-wrap02{
	position: relative;
	width: 100%;
	margin-top: 120px;
	background: #fff;
	padding: 60px 0;
	display: flex;
	justify-content: space-between;
	z-index: 1;
}
.sec04-wrap02::after{
	content: "";
	position: absolute;
	top: 0;
	left: -6%;
	width: 112%;
	height: 100%;
	background: #fff;
	z-index: -1;
}

.sec04-wrap02 #view{
	width: 57.6%;
	height: auto;
}

.sec04-wrap02-box{
	width: 38.4%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.sec04-wrap02-box .select{
	width: 30%;
	margin-bottom: 4%;
}

.sec04-text04{
	width: 100%;
	font-size: min(2vw,20px);
	line-height: 1.3;
	border: 1px solid #555;
	padding: 0.4em 0 0.1em;
}





/*********************************************************

			         ここからsec05

**********************************************************/

.sec05{
	width: 100%;
	padding: 180px 0 0;
	text-align: center;
}

.sec05 .title{
	/* width: 55%; */
	margin: 120px 0;
}

.sec05-table{
	width: 100%;
}

.sec05-table tr{
	border-bottom: 1px solid #674828;
	font-size: 22px;
}

.sec05-table tr th{
	padding: 0.8em 0;
	text-align: center;
	width: 5em;
}

.sec05-table tr td{
	text-align: left;
}

.sec05-text01{
	font-size: 22px;
	padding: 0.9em 0 0.9em 0.9em;
	text-align: left;
}

.sec05-text02{
	font-size: 16px;
	width: 100%;
	padding: 0.9em 0 0;
	text-align: justify;
}


/*********************************************************

			         ここからsec06

**********************************************************/

.sec06{
	width: 100%;
	padding: 180px 0;
	text-align: center;
}

.sec06-table01{
	width: 100%;
	margin-top: 120px;
}

.sec06-table02{
	width: 83.33%;
	margin: 60px auto 0;
}

.sec06-table01.pc,.sec06-table02.pc{
	display: table;
}

.sec06-table01 tr th,
.sec06-table01 tr td,
.sec06-table02 tr th,
.sec06-table02 tr td,
.sec06-table03 tr th,
.sec06-table03 tr td{
	border: 1px solid #674828;
	font-size: 22px;
	width: 16.66%;
}

.sec06-table01 tr th,
.sec06-table02 tr th{
	padding: 0.1em 0;
}

.sec06-table01 tr td,
.sec06-table02 tr td{
	padding: 0.9em 0;
}

.sec06-text{
	font-size: 16px;
	margin-top: 1em;
	text-align: justify;
}

.sec06-wrap{
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
	/* background: #ccc; */
}
.sec06-wrap img{
	width: 100%;
	height: auto;
}
.sec06-wrap .sec06-text{
	text-align: center;
}

.sec06-flex{
	width: 70%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.sec06-text02{
	position: relative;
	font-size: min(2vw,25px);
    letter-spacing: 0.05em;
	margin: 3em 0 1em;
	display: inline-block;
}
.sec06-text02::before,
.sec06-text02::after{
	content: "";
	position: absolute;
	top: 50%;
	width: 3em;
	height: 2px;
	background: #555;
}

.sec06-text02::before{
	right: 110%;
}

.sec06-text02::after{
	left: 110%;
}

.sec06-text03{
	position: relative;
	font-size: min(2vw,25px);
    letter-spacing: 0.05em;
	display: inline-block;
	margin-bottom: 1em;
	width: 100%;
	z-index: 1;
}

.sec06-text03::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
	width: 100%;
	height: 0.7em;
	background: #F3F18A;

}




/*********************************************************

			         ここからsec07

**********************************************************/

.sec07{
	width: 100%;
	padding: 0 0 60px 0;
	text-align: center;
}

.sec07-wrap{
	position: relative;
	width: 100%;
	max-width: 1920px;
	aspect-ratio: 2.2/1;
	background: url(../img/sec07-base01.webp)no-repeat center / cover;
	overflow: hidden;
	margin: 0 auto;
}

.sec07-wrap img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}

#i1,#i3,#i2,#i4{
	opacity: 0;
	transition: ease-in-out 0.7s 0.3s;
	filter: blur(10px);
}

.active #i1{animation: 20s shadow1 ease-in-out infinite;}
.active #i2{animation: 20s shadow2 ease-in-out infinite;}
.active #i3{animation: 20s shadow3 ease-in-out infinite;}
.active #i4{animation: 20s shadow4 ease-in-out infinite;}


/* アニメーション設定 */

@keyframes shadow1{
	0%   { opacity: 0; filter: blur(50px); }
	7%   { opacity: 0.4; filter: blur(0);  }
	33%  { opacity: 0.4; filter: blur(0);  }
	40%  { opacity: 0; filter: blur(50px); }
}
@keyframes shadow2{
	20%  { opacity: 0; filter: blur(50px); }
	27%  { opacity: 0.5; filter: blur(0);  }
	53%  { opacity: 0.5; filter: blur(0);  }
	60%  { opacity: 0; filter: blur(50px); }
}
@keyframes shadow3{
	40%  { opacity: 0; filter: blur(50px); }
	47%  { opacity: 0.5; filter: blur(0);  }
	73%  { opacity: 0.5; filter: blur(0);  }
	80%  { opacity: 0; filter: blur(50px); }
}
@keyframes shadow4{
	60%  { opacity: 0; filter: blur(50px); }
	67%  { opacity: 0.5; filter: blur(0);  }
	93%  { opacity: 0.5; filter: blur(0);  }
	100% { opacity: 0; filter: blur(50px); }
}

/*********************************************************

			         ここからfooter

**********************************************************/

.footer{
	width: 100%;
	padding: 20px 0;
	background: #B1B1AE;
	text-align: center;
}

.footer p{
	font-size: 12px;
	color: #fff;
	margin-bottom: 1em;
}

.footer img{
	width: 200px;
}




/*********************************************************

			ここからメディアクエリ(タブレット）

**********************************************************/

@media screen and (max-width: 1000px){
	
}
	
/*********************************************************

			   ここからメディアクエリ(SP）

**********************************************************/

@media screen and (max-width: 768px){
	.pc{display: none;}
	.sp{display: block;}

	.main{overflow: hidden;}

	.readtext{font-size: min(4vw,14px);}

	.title{
		margin: 0 auto 40px;
		font-size: min(6vw,21px);
		letter-spacing: 0;
	}

	.subtitle{
		font-size: min(10vw,35px);
		width: 7em;
	}

	.subtext{
		font-size: min(4vw,14px);
	}

	.header{
		width: 100%;
		position: relative;
	}
	
	.menu-text{
		border-left: 1px solid #555;
		width: 5em;
		padding: 0.2em 1em 0.25em 1em;
	}

	.menu{
		font-size: 13px;
		color: #555;
	}
	.menu-text a::before{
		color: #555;
	}
	.menu-text a::after{
		color: #555;
	}

	.sec01{
		aspect-ratio: 1/1;
	}

	.sub-card{
		width: 100%;
	}

	.sec01-wrap{
		width: 100%;
	}

	.sec01-wrap-box{
		padding: 10px 0;
	}

	.sec01-wrap h1{
		transform: translate(-50%,0);
	}

	/* .sec01 .slider li{ position: relative;} */
	.sec01 .slider li .sp-title{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 50%;
		height: auto;
	}

	.link-btn02.sp{
		display: inline-block;
		margin: 1em 0 0 50%;
		white-space: nowrap;
		text-align: center;
		transform: translateX(-50%);
	}

	.sec02,.sec05,.sec06{ padding: 90px 0 0;}
	.sec03,.sec04{ padding: 90px 0;}

	.sec02-wrap{
		margin: 0 auto 20px;
	}

	.sec02-wrap-img{
		width: 31.5%;
		margin-bottom: 3%;
	}

	.sec02 .readtext{
		width: 90%;
		margin: 0 auto;
		text-align: justify;
		letter-spacing: 0;
	}

	.sec03-wrap{ margin-top: 40px;}

	.sec03 .readtext{
		text-align: justify;
		margin-top: 0.7em;
	}

	.splide__pagination{
		padding-bottom: 5px;
	}

	.splide__pagination__page{
		width: 5px;
	}

	.sec04 .readtext{
		text-align: justify;
		margin-top: 40px;
	}

	.sec04-wrap{
		margin-top: 40px;
		flex-wrap: wrap;
	}

	.sec04-wrap02{
		margin-top: 40px;
		display: block;
		padding: 5vw 0;
	}

	.sec04-wrap02::after{
		content: none;
	}

	.sec04-wrap-box{
		width: 100%;
		margin: 0 auto 20px;
		padding: 6%;
		display: flex;
		justify-content: space-between;
	}

	.sec04-wrap-box-img01,.sec04-wrap-box-img02{
		width: 44%;
		margin: 0;
	}
	.sec04-wrap-sp{
		width: 49%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.sec04-wrap-box-img02 img{
		width: 48%;
		margin: 0 26% 5%;
	}

	.sec04-wrap-box-img03{
		width: 44%;
		margin: 0;
		aspect-ratio: unset;
	}

	.sec04-wrap-box-img03 img{
		width: 48%;
	}

	.sec04-text01{
		font-size:min(6.8vw,24px); 
		white-space: nowrap;
		margin-top: 0;
	}

	.sec04-text03{
		font-size:min(6.8vw,24px); 
		white-space: nowrap;
		margin-top: 1em;
	}

	.sec04-text02{ 
		font-size: min(4.5vw,16px); 
		white-space: nowrap;
		margin-top: 1em;
	}

	.sec04-wrap02 #view{
		width: 90%;
	}

	.sec04-wrap02-box{
		width: 90%;
		margin: 20px auto 0;
	}

	.sec04-wrap02-box .select{width: 15%;}

	.sec04-text04{
		font-size: 14px;
		padding: 0.4em 0;
	}

	.link-btn01, .link-btn02{
		font-size: min(6.8vw,24px);
		padding: 0.5em 1.6em 0.5em 1.8em;
	}
	.link-btn02{margin: 2em auto 0;}

	.sec05 .title{
		/* margin-top: 40px; */
		margin: 40px 0;
	}

	.sec05-table tr{
		font-size: 16px;
	}

	.space{ margin-left: 1.5em;}

	.sec05-table tr td{
		padding: 0.8em 0;
	}

	.sec05-text01{
		font-size: 16px;
		line-height: 1;
	}

	.sec05-text02{
		font-size: 14px;
	}

	.sec06-table01{
		margin-top: 40px;
	}

	.sec06-table01.pc,.sec06-table02.pc{
		display: none;
	}

	.sec06-table03{
		width: 100%;
		margin-top: 20px;
	}

	.sec06-table01 tr{
		width: 100%;
	}

	.sec06 table tr th,
	.sec06 table tr td{
		font-size: 16px;
		width: 30vw;
	}

	.sec06 table tr td{
		padding: 0.9em 0;
	}

	.sec06-text{
		text-align: justify;
		font-size: min(4vw,14px);
	}

	.sec06-text02{
		font-size: min(4.5vw,16px);
		/* margin: 2em 0 1em; */
	}

	.sec06-text03{
		font-size: min(4.5vw,16px);
	}

	.sec06-text02::before, .sec06-text02::after{
		width: 2em;
		height: 1px;
	}

	.sec06-text02::before{ right: 105%;}
	.sec06-text02::after{ left: 105%;}

	.sec06-flex{
		width: 100%;
	}

	.sec07{
		padding: 90px 0 40px;
	}

	.footer p{
		text-align: left;
		margin-left: 2em;
	}

	.footer img{
		width: 40%;
	}

	/* アニメーション設定sp slider */

	.base-card.b1{ z-index: 4; background: url(../img/sec01-img01.webp)no-repeat 5% center / cover;}
	.base-card.b2{ z-index: 3; background: url(../img/sec01-img02.webp)no-repeat 5% center / cover;}
	.base-card.b3{ z-index: 2; background: url(../img/sec01-img03.webp)no-repeat 5% center / cover;}
	.base-card.b4{ z-index: 1; background: url(../img/sec01-img04.webp)no-repeat 5% center / cover;}

	.sub-card.b1-2{ z-index: 5;}
	.sub-card.b2-2{ z-index: 5;}
	.sub-card.b3-2{ z-index: 5;}
	.sub-card.b4-2{ z-index: 5;}
	@keyframes base1{
		0% {opacity: 1;}
		19% { opacity: 1;}
		20% { opacity: 0;}
		94% { opacity: 0;}
		95% { opacity: 1;}
		100% { opacity: 1;}
	}

	@keyframes base2{
		0% { transform:translate(0,100%);}
		15% { transform: translate(0,100%);}
		18% { transform: translate(0,0);}
		22% { transform: translate(0,0);}
		25% { transform: translate(0,-100%);}
		100% { transform: translate(0,-100%);}
	}
	@keyframes base3{
		0% {opacity: 1;}
		44% { opacity: 1;}
		45% { opacity: 0;}
		98% { opacity: 0;}
		99% { opacity: 1;}
		100% { opacity: 1;}
	}
	@keyframes base4{
		0% { transform: translate(100%,0); }
		40% { transform: translate(100%,0); }
		43% { transform: translate(0,0); }
		47% { transform: translate(0,0); }
		50.0% { transform: translate(-100%,0); }
		100% { transform: translate(-100%,0); }
	}
	@keyframes base5{
		0% {opacity: 1;}
		69% { opacity: 1;}
		70% { opacity: 0;}
		98% { opacity: 0;}
		99% { opacity: 1;}
		100% { opacity: 1;}
	}
	@keyframes base6{
		0% { transform: translate(0,-100%); }
		65% { transform: translate(0,-100%); }
		68% { transform: translate(0,0); }
		72% { transform: translate(0,0); }
		75% { transform: translate(0,100%); }
		100% { transform: translate(0,100%); }
	}
	@keyframes base7{
		0% {z-index: 1;}
		100%  { z-index: 1;}
	}
	@keyframes base8{
		0% { transform: translate(-100%,0); }
		90% { transform: translate(-100%,0); }
		93% { transform: translate(0,0); }
		97% { transform: translate(0,0); }
		100% { transform: translate(100%,0); }
	}

}