@charset "utf-8";

/*メイン画像エリア*/
#main_area{position:relative;width:100%;max-height: 350px;height: 17vw; background: #eeefea;}
#main_area img{
	position: absolute;
	bottom:0;
	right:3%;
	max-width:46%;
	min-width: 36%;
}
#main_area p{
	white-space: nowrap;
	position: absolute;
	top:50%;
	left:15%;
	transform: translateY(-50%);
	font-size:min(2.0vw,36px);
	font-size:max(2.0vw,23px);
	letter-spacing: 0.5vw;
	font-weight: 500;
	color:#000;
}
#main_area p span{
	display: block;
	font-size:min(0.9vw,17px);
	font-size:max(0.9vw,14px);
	letter-spacing: 0.1vw;
	font-weight: bold;
	color:#0075c1;
}
/*ページ内リンクボタン*/
.menu li{border-radius: 10px;}
.menu li:nth-child(odd){background-color:#f0f7fb; }
.menu li:nth-child(even){background-color:#f4f2ef;}
.menu li a{display:flex;align-items: center;color:#000;padding:15px;}
.menu li a::before{display:block; content:""; width:68px; height: 69px; margin-right:20px;background-size:contain;}
.menu li:nth-child(1) a::before{background-image:url("../images/home/guide1.webp");}
.menu li:nth-child(2) a::before{background-image:url("../images/home/guide3.webp");}
.menu li:nth-child(3) a::before{background-image:url("../images/home/guide4.webp");}
.menu li:nth-child(4) a::before{background-image:url("../images/home/guide2.webp");}
.menu li:nth-child(5) a::before{background-image:url("../images/home/guide5.webp");}
.menu li:nth-child(6) a::before{background-image:url("../images/home/guide7.webp");}

/*画像と重なるパターン*/
.imgboxL{position: relative;}
.imgboxL > p,.imgboxL div{
	position: absolute;top:50%;left:30%;transform: translateY(-50%);
	background:#FFFFFF;padding:20px;border-radius: 15px;
	box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.4);
}
/*右画像＋タイトル・コンテンツ*/
.imgboxR img{order: 2;}
.imgboxR div{order: 1; width:calc(100% - 480px);}
.dl dt{background:#0075c1;padding:15px 0;text-align: center;color:#FFFFFF;width:330px;border-radius: 30px;}
.dl dd{padding:15px 0;}
.pd30{padding:30px;}

/*左画像＋タイトル・コンテンツ*/
.imgboxL2 div{width:calc(100% - 480px);}
.ti_sas{background:#0075c1;padding:15px 0;text-align: center;color:#FFFFFF;border-radius: 30px;}
ul.list li{display:inline-block;margin-right:20px;}
ul.list li::before{content: "";display: inline-block;width:10px; height: 10px; vertical-align: middle; background:#0075c1;border-radius: 10px; margin-right:10px;}
ul.list li:not(:last-child){margin-bottom: 10px;}
/* レスポンシブ
------------------------------------------------------------*/

/* 1280px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1280px){
	body {min-width: 1230px!important;}
	#main_area{height: 230px;}
}


/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
	body {min-width: 718px!important;}
	#main_area{max-height: 160px;height: 26vw;}
	/*画像と重なるパターン*/
	.imgboxL{position:inherit;}
	.imgboxL img{margin:auto;max-width:100%;}
	.imgboxL > p,.imgboxL div{
		position: static;width:90%;
		padding:20px 10px;border-radius: 10px;
		transform: translateY(-30%);
		margin:auto;
		box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.4);
	}
	.imgboxL.mb80{margin-bottom: 0 !important;}
	/*右画像＋タイトル・コンテンツ*/
	.imgboxR img{order: 1;margin: 0 auto 30px;}
	.imgboxR div{order: 2; width:100%;}
	.dl dt{width:100%;border-radius: 15px;}
	.dl dd{padding:15px 0;}
	.pd30{padding:15px 10px;}
	/*左画像＋タイトル・コンテンツ*/
	.imgboxL2 div{width:100%;}
	.imgboxL2 img{margin: 0 auto 30px;max-width:100%;}
	.ti_sas{background:#0075c1;padding:15px 0;text-align: center;color:#FFFFFF;border-radius: 30px;}
}
/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
    body {min-width: inherit!important;width: 100%;}
	#main_area{max-height: 250px;height:50vw;background-color:#FFF; }
	#main_area img{
		position: absolute;
		top:0;
		left:50%;
		transform: translateX(-50%);
		max-width: 430px;
		width:100%;
	}
	#main_area p{
		top:inherit;
		bottom:5%;
		left:50%;
		transform: translateX(-50%);
		min-width:60%;
		text-align: center;
		background:#FFFFFF;
		padding:15px 25px;
		border-radius: 10px;
		box-shadow: 0px 0px 15px -5px #777777;
		z-index:99;
	}
	/*ページ内リンク*/
	.menu li a{padding:10px;}
	.menu li a::before{width:50px; height: 50px; margin-right:15px;}
	/*画像と重なるパターン*/
	.imgboxL > p,.imgboxL div{
		width:95%;
		transform: translateY(-10%);
	}
	/*右画像＋タイトル・コンテンツ*/
	.dl dt{padding:10px 0;}

	/*左画像＋タイトル・コンテンツ*/
	.ti_sas{padding:10px;border-radius: 15px;font-size:16px;}
}