@charset "utf-8";
/* CSS Document */

/*ファーストビュー=================*/
.fv{
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
}

.fv h2{
	font-size: clamp(28px,calc(64 / 1920 * 100vw),64px);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 10;
}

.sns_icon{
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	height: 90px;
	width: 20px;
	position: absolute;
	top: 82.45877061469265%;
	right: 20px;
	z-index: 999;
}

.sns_icon li{
	transition: all 0.5s;
}
.sns_icon li:hover{
	opacity: 0.5;
}
@media screen and (min-width:960px){
.sns_icon{
	top: 76.2962962962963%;
	right: 80px;
	height: 130px;
	width: 30px;
}
}


/*main====================================*/
main{
	margin-top: 100vh;
	position: relative;
	z-index: 1;
	background: linear-gradient(
	  to bottom,
		#D6EAF8 0%,     /* 朝：淡い水色 */
		#AED6F1 15%,    /* 午前：やわらかい青 */
		#85C1E9 30%,    /* 昼：青空だが控えめ */
		#F5CBA7 50%,    /* 夕方：オレンジ系だが彩度低め */
		#D98880 65%,    /* 日没：夕焼け風のくすんだ赤紫 */
		#5D6D7E 80%,    /* 夕暮れ：グレイッシュな紺 */
		#1C1C1C 100%    /* 夜：ほぼ黒に近い */
	  );
	
}
main section{
	padding: 26.667vw 0;
	width: 100%;
	position: relative;
}
main section::after{
	content: "";
	background: url("../img/のいず.png");
	width: 100%;
	height: 100%;
	opacity: 0.05;
	position: absolute;
	z-index: 9999;
	top: 0;
	left: 0;
}
@media screen and (min-width:960px){
	
	main section{
		padding: 13.0208334vw 0;
		
}
}
/*0700==================*/
.am_seven{
	position: relative;
	z-index: 1;
}
.am_seven_imgbox{
	width: 89.33333333333333%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	z-index: 1;

}
.am_seven_img1{
	width: 54.32835820895522%;
	height: 100%;
	aspect-ratio: 182/469;
}
.am_seven_img2{
	width: 36.71641791044776%;
	height: 100%;
	aspect-ratio: 123/469;
}

@media screen and (min-width:960px){

	.am_seven_imgbox{
	width: 49.32291666666667%;
}
.am_seven_img1{
	width: 42.23864836325238%;
	aspect-ratio: 400/758;
}
.am_seven_img2{
	width: 31.67898627243928%;
	aspect-ratio: 300/758;
}


}
/*0800==================*/
.am_eight{
	/*background: #CFE7F6;*/
	position: relative;
	z-index: 1;
}
.am_eight_imgbox{
	width: 89.33333333333333%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	z-index: 1;
}
.am_eight_img1{
	width: 43.88059701492537%;
	height: 100%;
	aspect-ratio: 147/453;
}
.am_eight_img2{
	width: 43.88059701492537%;
	height: 100%;
	aspect-ratio: 147/453;
}

@media screen and (min-width:960px){
		.am_eight_imgbox{
	width: 84.375%;
}
.am_eight_img1{
	width: 35.37037037037037%;
	aspect-ratio: 573/732;
}
.am_eight_img2{
	width: 35.37037037037037%;
	aspect-ratio: 573/732;
}

}
/*1000==================*/
.am_ten{
	/*background: #B9E4FF;*/
	position: relative;
	z-index: 1;
}
.am_ten_imgbox{
	width: 100%;
	display: flex;
	flex-flow: column-reverse;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	z-index: 1;
}

.am_ten_imgbox_left{
	display: flex;
	justify-content: space-between;
	width: 62.13333333333333%;
}
.am_ten_img1{
	width: 45.06437768240343%;
	height: 100%;
	aspect-ratio: 108/200;
}
.am_ten_img2{
	width: 46.3519313304721%;
	height: 100%;
	aspect-ratio: 105/200;
	margin-top: 133px;
}
.am_ten_img3{
	width: 64.26666666666667%;
	margin-left: auto;
	height: 100%;
	aspect-ratio: 241/158;
	margin-top: 107px;
}

@media screen and (min-width:960px){
.am_ten_imgbox{
	width: 100%;
	display: flex;
	flex-flow:row;
}

.am_ten_imgbox_left{
	display: flex;
	justify-content: space-between;
	width: 39.16666666666667%;
	margin-top: 80px;
}
.am_ten_img1{
	width: 45.06437768240343%;
	height: 100%;
	aspect-ratio: 336/620;
}
.am_ten_img2{
	width: 46.3519313304721%;
	height: 100%;
	aspect-ratio: 336/620;
	
}
.am_ten_img3{
	width: 38.95833333333333%;
	margin-left: auto;
	height: 100%;
	aspect-ratio: 748/489;
}

}
/*1700=====================*/
.pm_seventeen{
	/*background: #FFEADE;*/
	position: relative;
	z-index: 1;
}

.pm_seventeen_imgbox{
	width: 100%;
	display: flex;
	flex-flow: column-reverse;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	z-index: 1;
}
.pm_seventeen_img1{
	width: 48.8%;
	height: 100%;
	aspect-ratio: 183/288;
	margin-top: 48px;
	
}
.pm_seventeen_img2{
	width: 85.33333333333333%;
	height: 100%;
	aspect-ratio: 320/169;
	
	margin-left: auto;
}

@media screen and (min-width:960px){
.pm_seventeen_imgbox{
	width: 100%;
	flex-flow: row;
}
.pm_seventeen_img1{
	width: 27.65625%;
	aspect-ratio: 531/834;
	margin: 0;
}
.pm_seventeen_img2{
	width: 67.13541666666667%;
	aspect-ratio: 1289/639;
	margin: 0;
}

}
/*1800=========================*/
.pm_eighteen{
	/*background: #3F5E72;*/
	position: relative;
	z-index: 1;
}

.pm_eighteen_imgbox{
	width: 86.13333333333333%;
	margin-left: auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	z-index: 1;
}
.pm_eighteen_img1{
	width: 21.98142414860681%;
	height: 100%;
	aspect-ratio: 71/469;
}
.pm_eighteen_img2{
	width: 29.72136222910217%;
	height: 100%;
	aspect-ratio: 96/469;
}
.pm_eighteen_img3{
	width:36.53250773993808%;
	height: 100%;
	aspect-ratio: 118/469;
}


@media screen and (min-width:960px){
	.pm_eighteen_imgbox{
	width: 70.83333333333333%;
}
.pm_eighteen_img1{
	width: 22.05882352941176%;
	aspect-ratio: 300/758;
}
.pm_eighteen_img2{
	width: 29.41176470588235%;
	aspect-ratio: 400/758;
}
.pm_eighteen_img3{
	width: 36.76470588235294%;
	aspect-ratio: 500/758;
}

}
/*1900=======================*/
.pm_nineteen{
	/*background: #17304F;*/
	position: relative;
	z-index: 1;
}
.pm_nineteen_imgbox{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	z-index: 1;
}

.pm_nineteen_imgbox_left{
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	width: 42.66666666666667%;
}
.pm_nineteen_img1{
	width: 100%;
	height: 100%;
	aspect-ratio: 160/98;
}
.pm_nineteen_img2{
	width: 100%;
	height: 100%;
	aspect-ratio: 160/80;
	margin-top: 97px;
}
.pm_nineteen_img3{
	width: 47.46666666666667%;
	margin-left: auto;
	height: 100%;
	aspect-ratio: 178/275;
	
}


@media screen and (min-width:960px){
	.pm_nineteen_imgbox{
	width: 85.57291666666667%;
		margin: 0 auto;
}

.pm_nineteen_imgbox_left{
	width: 28.02083333333333%;
}
.pm_nineteen_img1{
	width: 100%;
	aspect-ratio: 538/329;
}
.pm_nineteen_img2{
	width: 100%;
	aspect-ratio: 538/220;
	margin-top: 120px;
}
.pm_nineteen_img3{
	width: 30.20833333333333%;
	aspect-ratio: 178/275;
	
}

}
/*2200===================*/
.pm_twenty-two{
	position: relative;
	z-index: 1;
}
.pm_twenty-two_img{
	width: 100%;
	height: auto;
	aspect-ratio: 375/284;
	position: relative;
	z-index: 1;
}

@media screen and (min-width:960px){
	.pm_twenty-two_img{
	width: 63.28125%;
	height: auto;
	aspect-ratio: 1215/702;
	margin: 0 auto;
}

}

/*共通==============================*/
.text_box{
	width: 84.53333333333333%;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
	background: rgba(0,0,0,0.5);
	padding: 30px 0; 
}

.text_box h2{
	font-size: 20px;
	font-family: "Noto Serif JP", serif;	
}

.read{
	display: flex;
	flex-flow: column;
	font-size: clamp(16px, calc(32 / 1920 * 100vw),32px);
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
	color: #fff;
	margin-top: 20px;
	text-align: center;
}

.read span:nth-child(2){
	margin-top: 10px;
}

@media screen and (min-width:960px){
	.read{
		flex-flow: row;
		justify-content: center;
	}
	.read span:nth-child(2){
	margin-top: 0;
}

	.read span{
		display: inline;
	}
	
	.text_box{
		width: 45.9583%;
		padding: 50px 0;
	}
	
	/*.am_seven_text{
		width: 45.9583%;
		top: 60%;
	}*/
	.text_box h2{
		font-size: 40px;
	}
}