@charset "utf-8";
/* CSS Document */
/*=====================================================================================
***************************************************************************************

　　アンカーリンク部分
		
***************************************************************************************
=====================================================================================*/
.ank_box{
	display: flex;
	max-width: 1200px;
	width: 90%;
	margin: 0 auto 100px;
}

.ank_box h3{font-size: 25px;}

.left_box{
	display: flex;
	align-items: center;
	border-right: 3px solid #FFFFFF;
	margin-right: 70px;
	width: 130px;
}

.right_box{
	width: calc(100% - 200px);
	padding-left: 0;
	display: grid;
	grid-auto-flow: column;
	grid-template-columns:1fr 1fr;
	grid-template-rows: repeat(4, auto);
	gap:0 6%;	
}

.right_box .box{width: 100%;}
.openModalBtn{
	text-decoration: none;
	cursor: pointer;
	display:flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	text-align: justify;
	border-bottom: 3px solid #FFFFFF;
	padding: 20px 40px 20px 10px;
	background: url("../../img/arrow_w.svg") right center no-repeat;
	background-size: 20px;
	transition: 0.3s;
	margin-bottom: 40px;
}

.openModalBtn .left_name{line-height: 1;}
.openModalBtn .left_name p{
	font-size: 38px; 
	font-weight: bold; 
	margin-bottom: 5px;
}
.openModalBtn .name p{font-size: 14px; font-weight: normal;}

.openModalBtn:hover{
	opacity: 1;
	color: #00ffea;
	border-bottom: 3px solid #00ffea;
	background: url("../../img/arrow_b.svg") right center no-repeat;
	background-size: 20px;
	transition: 0.3s;
}


@media screen and (max-width: 1300px){
	.ank_box h3{font-size: 2vw;}
	.left_box{width: 15%; margin-right: 3%;}
	.right_box{width: 100%;}
	
	.openModalBtn .left_name p{font-size: 3vw;}
	.openModalBtn .name p{font-size: 1.5vw;}

}

@media screen and (max-width: 1000px){
	.ank_box{display: block;}
	.ank_box h3{font-size: 25px;}
	.left_box{
		width: 100%; 
		border-right: none;
		display: block;
		margin: 0 auto;
	}
	.openModalBtn{margin-bottom: 20px;}
}

@media screen and (max-width: 720px){
	.ank_box{margin: 0 auto 50px;}
	.right_box{grid-auto-flow: row; grid-template-columns:auto;}
	.right_box .box{width: 100%; }
	.openModalBtn{height: 50px; padding: 20px 30px 20px 10px;}
	.openModalBtn .left_name p{font-size: 22px;}
	.openModalBtn .left_name span{font-size: 12px;}
	.openModalBtn .name p{font-size: 14px;}
	
}


/*=====================================================================================
***************************************************************************************

　　各種コンテンツ
		
***************************************************************************************
=====================================================================================*/
.in_box{
	max-width: 1200px;
	width: 90%;
	margin: -100px auto 80px;
	text-align: justify;
    padding-top: 100px; /* 調整したい高さ（固定ヘッダーの高さ） */
}

.in_box h4{
	border: 1px solid #FFFFFF;
	padding: 20px 50px;
	line-height: 1;
	font-size: 45px;
	display: flex;
	justify-content: space-between;
	 align-items:baseline;
	margin-bottom: 30px;
}

.in_box span{font-size: 18px; font-weight: normal;}

.in_box > div{
	font-size: 14px;
	padding: 0 50px;
	line-height: 2;
}

.in_box .flex_box{
	display: flex;
	align-items:center;
}
.in_box .flex_box div{width: 50%;}
.in_box .flex_box .txt_box{padding-right: 50px;}
.in_box .flex_box img{width: 100%;}
.in_box .flex_box .video{aspect-ratio: 16 / 9;}
.in_box .flex_box .video video{width: 100%; height: 100%;}

@media screen and (max-width: 900px){
	.in_box .flex_box{display: block;}
	.in_box .flex_box div{width: 100%;}
	.in_box .flex_box .txt_box{padding-right: 0;}
	.in_box .flex_box .img_box{
		max-width: 550px;
		width: 100%;
		margin: 20px auto 0;
	}
}

@media screen and (max-width: 700px){
	.in_box{margin: -100px auto 60px;}
	.in_box h4{
		display: block;
		font-size: 30px;
		padding: 15px 20px 5px;
		margin-bottom: 15px;
	}
	.in_box p{margin-bottom: 10px;}
	.in_box span{font-size: 14px;}
	.in_box div{padding: 0 10px;}
}