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

:root {
  --main-color: #00a758;
  --sub-color: #282b3e;
  --blue: #0000c1;
  --pink: #ec6453;
  --gray: #ededed;
}


body{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: #000000;
	font-weight: 500;
	text-align: justify;
}

body *{box-sizing: border-box;}

a{color: #000000; text-decoration: underline;}
a:hover{opacity: 0.6;}

.sp{display: none;}


#floating{
	background: var(--gray);
	text-align: center;
	padding: 20px 0;
	position: fixed;
	width: 100%;
	bottom: -100%;
	z-index: 100;
	transition: 0.7s ease;
}
#floating a{margin: 0 5px;}
#floating img{max-width: 180px; width: 180px;}
#floating.active{
	bottom: 0;
}

@media screen and (min-width:600px) {
	/* PC用記述 */
	#floating img{max-width: 360px; width: 47%;}
}

@media screen and (max-width: 384px){
	/* SE系用の記述 */
	#floating img{max-width: 45%; }
}


header{
	position: relative;
	max-width: 910px;
	margin: 0 auto 5px;
	width: 100%;
	height: 50px;
}
header h1{
	position: absolute;
	top: 10px;
	left: 50px;
}

header p{
	position: absolute;
	top: 13px;
	right: 50px;
	line-height: 1.2;
	font-size: 85.7%;
	
}

.section_box{
	max-width: 800px;
	width: 100%;
	margin: 0 auto 40px;
}

.section_box_in{
	padding: 0 50px;
}

.flex_box{display: flex;}

.caption{
	font-size: 78.6%;
	padding-left:1em;
	text-indent:-1em;
	display: block;
}
.caption02{
	padding-left:3em;
	text-indent:-3em;
}

.big_txt{
	font-size: 128.6%; 
	font-weight: bold;
	padding: 0 20px 10px;
}

/* アコーディオン */
.nav_box{ display: none; }
.nav-open{
	position: relative;
	cursor: pointer;
}
.nav-open::before{/* 閉じている時 */
	content: "";
	display: block;
	position: absolute;
	width: 23px;
	height: 23px;
	background: url("../img/white_plus.png") no-repeat;
	background-size: cover;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	
}
.nav-open.active::before{/* 開いている時 */
	content: "";
	display: block;
	width: 23px;
	height: 23px;
	background: url("../img/white_minus.png") no-repeat;
	background-size: cover;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

/* 見出しデザイン */
.title{
	color: #FFFFFF;
	background: var(--main-color);
	font-size: 150%;
	padding: 10px 20px;
	
}
/* 見出しすぐ下画像 */
.contents_main_img{width: 100%; margin-bottom: 20px;}
.contents_main_img img{
	width: 100%;
	height: 210px;
	object-fit: cover;
}

/* 見出し付きのボックス */
.inner{margin-top: 30px;}
.inner h4{
	color: #FFFFFF;
	background: var(--sub-color);
	font-size: 128.6%;
	padding: 10px 15px;
}
.inner .inner_box{
	padding: 20px 15px 30px;
	border: 1px solid var(--sub-color);
}
.inner b{
	display: block;
	font-weight: bold;
	font-size: 107.1%;
	margin-bottom: 7px;
}

/* オファーボタン */
.offer{
	background: var(--gray);
	text-align: center;
	padding: 30px 0 40px;
	margin-bottom: 50px;
}

.offer p{
	height: 0;
	overflow: hidden;
	background: url("../img/btn_txt.png") center no-repeat;
	background-size: cover;
	width: 303px;
	padding-top: 55px;
	margin: 0 auto;
}

.offer .offer_btn{
	height: 0;
	overflow: hidden;
	background: url("../img/offer_btn.jpg") center no-repeat;
	background-size: cover;
	width: 350px;
	padding-top: 52px;
	margin: 10px auto;
	display: block;
}

.offer a{font-size: 114.3%; font-weight: bold;}

.campaign {
	text-align: center; 
	background: var(--gray);
	padding: 40px 0 30px;
}
.campaign img{
	max-width: 350px;
	width: 100%;
}

.js-scrollable.sp{display: block;}

@media screen and (min-width:670px) {
	/* PC用記述 */
	body{font-size: 16px;}

	.js-scrollable.sp{display: none;}
	
	.section_box{margin: 0 auto 70px;}

	.title{padding: 15px 50px;}
	.big_txt {padding: 0 50px 10px;}
	.offer{margin-bottom: 70px;}
	
	/* 見出しデザイン */
	.title_box{display: flex; margin-bottom: 25px;}
	
	.title_box .title{
		width: 50%;
		height: 210px;
		padding: 0 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 140%;
	}
	/* 見出しすぐ下画像 */
	.contents_main_img{
		width: 50%; 
		margin-bottom: 0;
		display: inline-block;
	}
	header{font-size: 14px;}

}

@media screen and (max-width: 600px){
	.pc{display: none;}
	.sp{display: inline-block;}
	.section_box_in{padding: 0 20px;}
	header h1{left: 20px;}
	header p{right: 10px;}
}

@media screen and (max-width: 375px){
	/* SE系用の記述 */
	.inner h4{font-size: 121.4%;}
	header p{font-size: 76.7%;}
}

@media screen and (max-width: 355px){
.offer p{
		width: 85%;
		padding-top: 15%;
	}

.offer .offer_btn{
	width: 95%;
	padding-top: 14%;
}
}


/**********************************************************************
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
	メインビジュアル
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
**********************************************************************/
#mv .mv_box{
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
}
#mv img{width: 100%;}


/**********************************************************************
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
	コンテンツ1
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
**********************************************************************/
#contents1{margin-top: 20px;}

#contents1 li{width: 100%; margin-bottom: 15px;}

#contents1 li p.small{
	letter-spacing: -1.1px; 
	font-size: 84%; 
	font-weight: normal;
	border: none;
}

#contents1 .icon{
	width: 54px;
	height: 54px;
	background:#00a758 ;
	position: relative;
}

#contents1 .icon img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
}
#contents1 .icon01 img{width: 34px; height: 34px;}
#contents1 .icon02 img{width: 34px; height: 34px;}
#contents1 .icon03 img{width: 38px; height: 27px;}

#contents1 .txt{
	margin-left: 10px;
	width: calc(100% - 54px - 10px);
}

#contents1 .txt sup{font-size: 78.6%;}

#contents1 .txt p{
	font-size: 107.1%;
	font-weight: bold;
	border-bottom: 1px solid var(--main-color);
	padding-bottom: 4px;
	margin-bottom: 2px;
}

#contents1 .txt h2{
	color: var(--main-color);
	font-size: 150%;
}

#contents1 span{
	display: block; 
	margin-bottom: 35px;
}

@media screen and (min-width:800px) {
	/* PC用記述 */
	#contents1 ul{display: flex;}
	#contents1 .section_box_in{padding: 0;}
	#contents1 li{width: calc(100% / 3);}
	#contents1 li:nth-child(2){margin: 0 20px;}
	#contents1 .txt h2{font-size: 95%;}
	#contents1 .txt p{font-size: 97%;}
	#contents1 li > p{font-size: 80%;}
	#contents1 li p.small{font-size: 73%;}
	
	#contents1 span{margin-top: -10px;}
}


/**********************************************************************
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
	コンテンツ2
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
**********************************************************************/
#contents2 .nav-open{
	width: 100%;
	background: #d9d9d9;
	color: var(--pink);
	padding: 10px 20px;
	font-weight: bold;
}

#contents2 b{
	display: block;
	font-weight: bold;
	font-size: 107.1%;
	margin-bottom: 5px;
	
}

#contents2 .nav_box{
	padding: 20px;
	line-height: 1.7;
}
#contents2 .nav_box div{margin-bottom: 30px;}
#contents2 .top_txt{margin-bottom: 15px;}
#contents2 .txt{padding-left: 15px;}

#contents2 li{margin-bottom: 10px;}

#contents2 .caption{font-size: 100%;}

#contents2 .txt_pink{
	color: var(--pink);
	font-weight: bold;
	font-size: 107.1%;
}

#contents2 .nav-open::before{/* 閉じている時 */
	background: url("../img/cont2_plus.png") no-repeat;
	background-size: cover;
}
#contents2 .nav-open.active::before{/* 開いている時 */
	background: url("../img/cont2_minus.png") no-repeat;
	background-size: cover;
}


@media screen and (min-width:670px) {
	/* PC用記述 */
	#contents2 .nav-open{padding: 15px 50px; font-size: 121.4%;}
}



/**********************************************************************
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
	コンテンツ3
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
**********************************************************************/
#contents3 .iframe_box{
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 20px auto;
}

#contents3 iframe{
	width: 100%;
	height: 100%;
}


/**********************************************************************
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
	コンテンツ4
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
**********************************************************************/
#contents4 .contents4_img01{
	display: block;
	margin: 20px auto;
	max-width: 430px;
	width: 100%;
}

#contents4 .contents4_img02{
	display: block;
	margin: 25px auto 40px;
	max-width: 320px;
	width: 100%;
}



/**********************************************************************
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
	コンテンツ5
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
**********************************************************************/

#contents5 .sub_txx{
	font-size: 128.6%;
	font-weight: bold;
	text-align: center;
	margin-top: 10px;
}
#contents5 .sub_txx::after{
	content: "";
	display: block;
	margin: 5px auto ;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #282b3e transparent transparent transparent;
}

#contents5 h4{
	color: #FFFFFF;
	font-size: 128.6%;
	font-weight: bold;
	background:var(--sub-color) ;
	padding: 8px 15px;
}

#contents5 .flex_box img{
	width: 100%;
	height: 145px;
	object-fit: cover;
}

#contents5 ul{margin: 10px auto 15px;}
#contents5 li{width: 50%;}
#contents5 li:first-child{
	margin-right: 20px;
}

#contents5 li h5{
	font-weight: bold;
	font-size: 128.6%;
	text-align: center;
	margin-bottom: 2px;
}


@media screen and (min-width:670px) {
	/* PC用記述 */
	#contents5 h4{padding: 10px 30px; font-size: 120%;}
	#contents5 .flex_box img{height: 200px;}

}


/**********************************************************************
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
	コンテンツ6
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
**********************************************************************/
#contents6 .bold_txt{font-weight: bold; font-size: 114.3%;}

#contents6 h4{
	font-weight: bold;
	font-size: 157.1%;
	color: var(--main-color);
	margin-top: 35px;
}

#contents6 li.flex_box{
	border: 1px solid var(--main-color);
	margin-top: 10px;
	font-size: 128.6%;
	font-weight: bold;
}
#contents6 li.flex_box span{
	background: var(--main-color);
	color: #FFFFFF;
	font-size: 150%;
	width: 40px;
	justify-content: center;
	align-items: center;
}
#contents6 li.flex_box p{padding: 10px;width:calc(100% - 40px) ;}

#contents6 .in_box{
	margin-top: 40px;
}

#contents6 .in_box h5{
	color: var(--main-color);
	font-weight: bold;
	font-size:  157%;
	padding: 5px 15px;
	border-bottom: 2px solid var(--main-color);
	margin-bottom: 5px
}

#contents6 .top_txt_box p{
	font-weight: bold;
	padding: 0 15px;
	font-size: 200%;
}

#contents6 .img_box{margin: 10px auto;}
#contents6 .img_box img{width: 100%;}

#contents6 .bold_txt02{font-weight: bold; margin-top: 30px;}

#contents6 .graph_box{
	text-align: center;
	max-width: 318px;
    width: 100%;
	margin: 20px auto 15px;
	position: relative; 
}
#contents6 .graph_box img{width: 100%;}

#contents6 .graph_box img.up_icon{
	width: 30px;
	position: absolute;
	top: 0;
	right: 0;
	opacity: 0.8;
}

#contents6 .graph_box .caption{text-align: left; margin-bottom: 10px;}
#contents6 .box1 .graph_box .caption{margin-bottom: 0;}

#contents6 .js-scrollable{margin: 15px 0;}

#contents6 .in_box .nav-open{
	background: var(--pink);
	color: #FFFFFF;
	font-size: 150%;
	/*font-weight: bold;*/
	padding: 10px 15px;
	margin-top: 20px;
}

#contents6 .in_box .nav-open span{display: block; font-size: 66.7%;}

#contents6 .in_box .nav_box{
	border: 1px solid var(--pink);
	padding: 15px;
}

#contents6 .in_box .nav_box .inner_box{font-size:93%; }
#contents6 .in_box .nav_box h6{font-weight: bold; font-size: 100%;}
#contents6 .in_box .inner01 h6{color: var(--blue);}
#contents6 .in_box .inner02 h6{color: var(--main-color);}

#contents6 .caption_box{
	border: 4px solid var(--pink);
	padding: 15px;
	margin-top: 20px;
}
#contents6 .caption_box p{
	display: inline-block;
	width: calc(100% - 60px);
	margin-left: 10px;
	vertical-align: top;
}
#contents6 .caption_box img{vertical-align: top;}
#contents6 .pink{color: var(--pink);}

#contents6 .in_box .nav_box.gray{border: 1px solid var(--sub-color);}
#contents6 .in_box .nav-open.gray{background:  var(--sub-color);}

#contents6 .top_txt{
	font-weight: bold;
    padding: 0 15px;
    font-size: 200%;
}

#contents6 .box3 .nav_box li{margin-bottom: 35px;}
#contents6 .box3 .nav_box li:last-child{margin-bottom: 0;}
#contents6 .box3 .nav_box h6{text-align: left; font-size: 121.4%; margin-bottom: 10px;}
#contents6 .box3 .nav_box h6 span{
	width: 30px;
	line-height: 30px;
	color: #FFFFFF;
	background: var(--sub-color);
	display: inline-block;
	text-align: center;
	margin-right: 10px;
}

#contents6 .box3 .nav_box p{text-align: justify; margin-bottom: 10px;}
#contents6 .box3 .nav_box p.caption{margin-top: 10px;}
#contents6 .box3 .nav_box {text-align: center;}
#contents6 .box3 .nav_box img{
	max-width: 257px;
	width: 100%;
}


@media screen and (min-width:600px) {
	/* PC用記述 */
	#contents6 .top_txt_box{display: flex;}
	#contents6 .top_txt_box p{font-size: 170%;}
	
	#contents6 .txt_box{
		width: 55%;
		display: flex;
		align-items: center;
		
	}
	#contents6 .img_box{width: 45%;}
	
	
	#contents6 .graph_box{max-width: 500px;}
	/*#contents6 .graph_box img.up_icon{display: none;}*/
	
	#contents6 .box2 .img_box{margin: 50px 0;}
	#contents6 .box3 .nav_box img{max-width: 400px;}


}


@media screen and (max-width:400px) {
	
	#contents6 li.flex_box{min-height: 95px;}
	#contents6 li.flex_box p{
		display: flex;
		align-items: center;
	}

}






/**********************************************************************
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
	コンテンツ7
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
**********************************************************************/
#contents7 .big_txt{padding: 15px 0 ;}

#contents7 .txt01{margin-bottom: 30px;}

#contents7 .graph_box{
	text-align: center;
	max-width: 347px;
    width: 100%;
	margin: 15px auto;
	position: relative; 
}
#contents7 .graph_box img{width: 100%;}

#contents7 .graph_box img.up_icon{
	width: 30px;
	position: absolute;
	top: 0;
	right: 0;
	opacity: 0.8;
}

#contents7 .pink{
	color: var(--pink);
	margin-bottom: 10px;
}

@media screen and (min-width:600px) {
	/* PC用記述 */
	#contents7 .graph_box{max-width: 694px;}
	#contents7 .graph_box img.up_icon{width: 50px;}
}


/**********************************************************************
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
	コンテンツ8
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
**********************************************************************/
#contents8 .bold_txt{
	font-weight: bold;
    font-size: 114.3%;
}

#contents8 .graph_box{
	margin: 20px auto;
}

#contents8 .nav-open{
	font-size: 128.6%;
	font-weight: bold;
	margin-top: 20px;
}
#contents8 .nav-open::before{/* 閉じている時 */
	background: url("../img/black_plus.png") no-repeat;
	background-size: cover;
	right: 0;
}
#contents8 .nav-open.active::before{/* 開いている時 */
	background: url("../img/black_minus.png") no-repeat;
	background-size: cover;
	right: 0;
}

#contents8 .nav-open span{
	display: inline-block;
	font-size: 20px;
	line-height: 30px;
	width: 30px;
	border-radius: 50%;
	color: #FFFFFF;
	background: var(--pink);
	text-align: center;
	margin-right: 10px;
}

#contents8 .inde_txt{
	padding-left: 1em;
	text-indent: -1em;
}

#contents8 .pink{color: var(--pink);}

#contents8 .nav_box{padding-top: 15px; line-height: 1.7;}
#contents8 .nav_box div{
	padding: 10px 15px;
	background: var(--gray);
	line-height: 1.6;
	margin: 10px auto;
}

#contents8 .js-scrollable{margin: 15px 0;}
#contents8 .caption_nonn{padding-left: 0; text-indent: 0; margin-top: 30px;}

#contents8 .graph_box img{width: 100%;}
#contents8 .graph_box{position: relative;}
#contents8 .graph_box .up_icon{
    width: 30px;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0.8;
}


/**********************************************************************
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
	コンテンツ9
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
**********************************************************************/
#contents9 .section_box_in{margin-top: 20px; position: relative;}
#contents9 .section_box_in .line{
	position: absolute;
	left: 32px;
	top: 0;
	width: 3px;
	height: 79%;
	background: #08a298;
}


#contents9 .flex_box{display: block;}
#contents9 .wrap_txt_box{margin-bottom: 30px; position: relative; z-index: 1;}
#contents9 .wrap_txt_box span{
	display: inline-block;
	font-weight: bold;
	font-size: 121.4%;
	border: 3px solid #08a298;
	padding: 0 10px;
	margin-bottom: 10px;
	background: #FFFFFF;
}

#contents9 .txt_box_in{padding-left: 30px;}

#contents9 .text h5{
	font-weight: bold;
	font-size: 178.6%;
}
#contents9 .text h5 i{font-style: normal; font-size: 72%;}

#contents9 .text p{margin: 5px 0;}

#contents9 .picture img{
	width: 100%;
	height: 140px;
	object-fit: cover;
}



@media screen and (min-width:600px) {
	/* PC用記述 */
	#contents9 .flex_box{display: flex;}
	
	#contents9 .wrap_txt_box{margin-bottom: 20px;}
	
	#contents9 .text{width: 60%; padding-right: 30px;}
	#contents9 .picture{width: 40%;}
	
	#contents9 .section_box_in .line{left: 60px; }
	#contents9 .picture img{height: 150px;}
}





/**********************************************************************
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
	コンテンツ10
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
**********************************************************************/
#contents10 .iframe_box{
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 20px auto;
}

#contents10 iframe{
	width: 100%;
	height: 100%;
}

#contents10 .flex_box{flex-wrap: wrap;}

#contents10 li{
	width:calc( 100% / 2 - 5px );
	border: 3px solid var(--main-color);
	margin-bottom: 10px;
}
#contents10 li:nth-child(2n){margin-left: 10px;}

#contents10 .icon_box{
	background: var(--main-color);
	text-align: center;
	padding: 5px;
}

#contents10 li div{
	font-weight: bold;
	padding: 10px;
}

#contents10 li div p{
	font-size: 142.9%;
	color: var(--main-color);
}

@media screen and (max-width: 375px){
	#contents10 li div p{font-size: 130%;}
}

@media screen and (min-width:670px) {
	/* PC用記述 */
	#contents10 li{text-align: center;}
}










/**********************************************************************
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
	コンテンツ11
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
**********************************************************************/
#contents11 .pd_txt{padding: 0 20px;}

#contents11 .title{
	background: #d9d9d9;
	color: #ec6453;
	margin: 20px 0;
}

#contents11 b{
	display: block;
	font-weight: bold;
	font-size: 107.1%;
	margin-bottom: 5px;
	
}

#contents11 .section_box_in div{margin-bottom: 30px;}
#contents11 .top_txt{margin-bottom: 15px;}
#contents11 .txt{padding-left: 15px;}

#contents11 li{margin-bottom: 10px;}

#contents11 .caption{font-size: 100%;}

#contents11 .txt_pink{
	color: var(--pink);
	font-weight: bold;
	font-size: 107.1%;
}

#contents11 .right_txt{text-align: right; margin-top: 30px;}

@media screen and (min-width:670px) {
	/* PC用記述 */
	#contents11 .pd_txt{padding: 0 50px;}
}




/**********************************************************************
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
	ラスト部分
＝ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー＝
**********************************************************************/
.offer_last{margin-bottom: 0;}
footer{
	padding: 25px 0;
	text-align: center;
	margin-bottom: 75px;
}

@media screen and (min-width:600px) {
	/* PC用記述 */
	footer{padding-bottom: 70px;}
}