/*-------------------------------------------------
  ヘッダー header
-------------------------------------------------*/
#header
{
	position: fixed;
	top: 0;
	width: 100%;
	height: ;
	background: #fff url(images/) no-repeat;
	background: rgba(4,16,35,0.8);
	border-width: 0px 0px 0px 0px;
	border-style: solid;
	border-color: #E0E0E0;
	z-index: 999999;
	margin-top: 0;
}

	@media screen and (max-width:750px){ /*スマホサイズ*/

	#header
	{
		height: 75px;
		margin: 0;
		background: rgba(4,16,35,1);
	}

	}

#header a:link, #header a:visited
{
	color: #fff; /* ヘッダー内のリンク文字の色 */
	text-decoration: none;
}
#header a:hover, #header a:active
{
	color: #fff; /* ヘッダー内のリンク文字の色　ホバー時 */
}

.logoandmenu /*ロゴ+メニュー帯*/
{
	max-width: 100%;
	margin: auto;
}

.logoandmenu h1
{
	font-size: calc(10vw / 1180 *100);
	color: #bfbfbf;
	position: absolute;
	top: 0;
	left: 2.5%;
	font-weight: 300;
}
@media screen and (max-width: 750px){ /**/
	.logoandmenu h1
	{
		display: none;
		font-size: calc(15vw / 750 *100);
		left: 0%;
	}
}
@media screen and (min-width: 1180px){ /**/
	.logoandmenu h1
	{
		font-size: 11px;
	}
}

.logo /*ロゴエリア*/
{
	width: 30%;
	max-width: 354px;
	float: left;
	z-index: 9999;
	position: relative;
}

.logo img
{
	max-width: 100%;
}

	@media screen and (max-width:750px){ /*スマホサイズ*/

	.logo /*ロゴエリア*/
	{
		width: 50%;
		float: left;
	}

	.logo img
	{
		max-height: 75px;
	}
	}

@media screen and (min-width:751px){ /*PCサイズ*/
	.menu /*メニューエリア*/
	{
		width: 70%;
		float: right;
		margin-top: 25px;
	}

	.menu_smp /*メニューエリア　スマートフォン*/
	{
		display: none;
	}

	/*スマホ用メニューボタン*/
	 header {
		display: none;
	 }

}

	@media screen and (max-width:750px){ /*スマホサイズ*/
		.menu /*メニューエリア*/
		{
			display: none;
		}

		.menu_smp /*メニューエリア*/
		{
			display: inline;
			width: 70%;
			float: right;
		}

		/*スマホ用ハンバーガーメニュー*/
		 header {
			height: 75px;
			/*z-index: 1000;*/
			position: relative;
		 }
		 header nav {
			position: absolute;
			top: 75px;
		 }
		 main {
			position: absolute;
			top: 0px;
		 }
		 body {
			margin: 0;
		 }
		 header {
			background-color: ;
			color: white;
			width: 100%;
		 }
		 header .menu_button {
			border-left: solid 0px white;
			float: right;
			width: 15%;
			height: 100%;
			text-align: center;
			color: #0000007d;
		 }
		 header .menu_button span {
			font-size: 30px;
			line-height: 70px;
		 }
		 header nav {
			/* background-color: #333;*/
			background: rgba(0,0,0,0.9);
			color: white;
			width: 100%;
			z-index: 0;
		 }
		 header nav ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
		 }
		 header nav ul li:first-child {
			/*width: 50%;*/
			float: left;
			border-top: solid 0px white;
		 }
		 header nav ul li {
			height: 42px;
			line-height: 42px;
			vertical-align: middle;
			border-bottom: solid 1px #333;
			border-left: solid 1px #333;
			text-align: center;
			padding: 0;
			box-sizing: border-box;
			/*background: url(images/arrow2018.png) right no-repeat;*/
			background-size: 8%;
			background-position: 4%;
		 }
		 main {
			width: 100%;
		 }

	}

/*-------------------------------------------------
  メニューボタン
-------------------------------------------------*/

@media screen and (min-width:750px) and (max-width: 1180px){
	#menubutton
	{
		display: block;
		width: 14.285%;
		height: ;
		background: url(images/) no-repeat;
		height: ;
		line-height: ;
		vertical-align: middle;
		text-decoration: none;
		text-align: center;
		float: left;
		padding: 0.2% 0 0.2% 0;
		box-sizing: border-box;
		border-width: 0px 0px 0px 1px;
		border-style: solid;
		border-color: #E0E0E0;
		margin: 1.5% 0 0 0;
		font-size: 1.2vw;
		overflow: hidden;
		white-space: nowrap;
	}
}

@media screen and (min-width: 1180px){
	#menubutton
	{
		display: block;
		width: 14.285%;
		height: 5%;
		background: url(images/) no-repeat;
		height: ;
		line-height: ;
		vertical-align: middle;
		text-decoration: none;
		text-align: center;
		float: left;
		padding: 0.2% 0 0.2% 0;
		box-sizing: border-box;
		border-width: 0px 0px 0px 1px;
		border-style: solid;
		border-color: #E0E0E0;
		margin: 1.5% 0 0 0;
		font-size: 14px;
		overflow: hidden;
		white-space: nowrap;
	}
}

	@media screen and (max-width: 750px){ /*スマホサイズ*/
		#menubutton
		{
			display: block;
			width: 50%;
			height: 5%;
			background: url(images/) no-repeat;
			height: ;
			line-height: ;
			vertical-align: middle;
			text-decoration: none;
			text-align: center;
			float: left;
			padding: 2.5% 0 2.5% 0;
			box-sizing: border-box;
			border-width: 0px 1px 1px 0px;
			border-style: solid;
			border-color: #efefef;
			margin: 0 0 0 0;
			font-size: 14px;
			overflow: hidden;
			white-space: nowrap;
			color: #fff;
		}

		.menutextcolor
		{
			color: #fff;
		}
	}



/*-------------------------------------------------
  ヒーローイメージ
-------------------------------------------------*/

.bg_heroimg /*ヒーローイメージの背景*/
{
	width: 100%;
	background: ;
}

.heroimg /*ヒーローイメージの枠*/
{
	max-width: 1180px;
	margin: auto;
	padding: 0 0 0 0;
	overflow: hidden;
}

.heroimg img /*ヒーローイメージ*/
{
	width: 100%;
	padding: 11.3% 0 0 0; /*メニュー帯に隠れないためのpadding*/
	/* display: none; */
}

	@media screen and (max-width: 750px){ /*スマホサイズ*/

	.heroimg img /*ヒーローイメージ*/
	{
		width: 100%;
		padding: 75px 0 0 0; /*メニュー帯に隠れないためのpadding*/
		/* display: none; */
	}

	}

/*-------------------------------------------------
  キャッチコピーエリア
-------------------------------------------------*/

/*サブページキャッチコピーエリア背景ブラー*/
#bg_blur1
{
	width: 100%;
	/* max-width: 1180px; */
	margin: 0 auto 0 auto;
	position: relative;
	overflow: hidden;
}

.bg-blur {
	display: block;
	height: auto;
	left: 0%;
	max-height: none;
	min-height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -2;
}

	@media screen and (min-width:1180px){ /*PCサイズ*/

		#bg_blur1 /*キャッチエリアとヘッダーメニューを被らせない*/
		{
			margin: 0 auto 0 auto;
		}

	}

	@media screen and (max-width:750px){ /*スマホサイズ*/

		#bg_blur1 /*キャッチエリアとヘッダーメニューを被らせない*/
		{
			margin: 75px auto 0 auto;
		}

	}

.sub_catch /*サブページのキャッチ*/
{
	width:100%;
	margin: auto;
	background-color: #15496B;/* 消すとブラーが出ます */
	background: url(images/bg_subheader.jpg) center top;
	background-size: cover;
	color: #fff;
	padding-top: 10%;
}
@media screen and (min-width: 1180px){ /**/
	.sub_catch /*サブページのキャッチ*/
	{
		padding-top: 120px;
	}
}
@media screen and (max-width: 750px){ /**/
	.sub_catch /*サブページのキャッチ*/
	{
		padding-top: 0px;
	}
}

.sub_catch h1{

	max-width: 1180px;
	margin: auto;
	font-size: 20px;
	/* font-family: 'Kozuka Mincho Pro',serif; */
	margin-block-start: 0;
	margin-block-end: 0;
	padding: 40px;
	box-sizing: border-box;
	font-weight: 200;
}
@media screen and (max-width: 750px){ /**/
	.sub_catch h1{
		padding: 5%;
	}
}


.catcharea /*ヒーローイメージ下のキャッチなどの配置エリア*/
{
	width:100%;
	max-width: 1180px;
	display: table;
	height: ;
	margin: -2.5% auto 0 auto;
	position: relative;
	z-index: 8888;
}



.catcharea_l /*キャッチエリア分割左*/
{
	width: 25%;
	display: table-cell;
	height: ;
	padding: 5%;
	box-sizing: border-box;
	background: rgba(31,153,62,0.9);
	color: #fff;
	border-width: 0px 0px 0px 0px;
	border-style: solid;
	border-color: #1F993E;
}

.catcharea_r /*キャッチエリア分割右*/
{
	width: 75%;
	display: table-cell;
	height: ;
	padding: 3% 3% 4.5% 3%;
	box-sizing: border-box;
	background: rgba(31,153,62,0.7);
	color: #fff;
	border-width: 0px 0px 0px 0px;
	border-style: solid;
	border-color: #1F993E;
}

.catcharea h1
{
	font-size: 1em;
	padding: 0;
	font-weight: 200;
}

	@media screen and (min-width:1180px){ /*PCサイズ*/

		.catcharea h1
		{
			font-size: 1em;
			padding: 4% 0 0 0;
			font-weight: 200;
		}

	}

	@media screen and (max-width:750px){ /*スマホサイズ*/

		.catcharea h1
		{
			font-size: 1em;
			padding: 3% 0 0 0;
			font-weight: 200;
		}

	}

.catcharea h2
{
	padding: 0;
	/*さわらび明朝*/
	font-family: "Sawarabi Mincho";
	font-weight: normal;
}

	@media screen and (max-width: 750px){ /*スマホサイズ*/
	.catcharea h2
	{
		font-size: 4vw;
	}
	}

	.medal_img {
		position: absolute;
		width: calc(205 / 2000 * 100%);
		height: auto;
		bottom: 4%;
		left: 6%;
		z-index: 777;
	}

	.medal_img img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	@media screen and (max-width: 750px){ /*スマホサイズ*/
		.medal_img {
			width: calc(225 / 750 * 100%);
			top: 4%;
			bottom: initial;
			right: 5%;
			left: initial;
		}
	}

	.catchcopy{
		width: 100%;
		position: absolute;
		top: 46.5%;
		text-align: center;
		line-height: 190%;
		color: #fff;
		z-index: 7777;
		font-size: calc(24vw / 1180 *100);
		font-weight: 600;
		text-shadow: 0 0 15px #000;
	}
	@media screen and (max-width: 1180px){ /**/
		.catchcopy{
			font-size: calc(26vw / 1180 *100);
		}
	}
	@media screen and (max-width: 750px){ /**/
		.catchcopy{
			width: 100%;
			position: absolute;
			top: 46.5%;
			text-align: center;
			line-height: 190%;
			color: #fff;
			z-index: 7777;
			font-size: calc(30vw / 750 *100);
			font-weight: 600;
		}
	}

	.sns_hero{
		width: 40%;
		position: absolute;
		right: 2.5%;
		bottom: 10%;
		z-index: 7777;
		font-family: "Noto Sans Japanese";
		font-size: calc(18vw / 1180 *100);
		font-weight: 400;
		text-shadow: 0px 0px 6px #000;
	}
	.sns_hero a:link , .sns_hero a:visited{
		color: #fff;
	}

	@media screen and (min-width: 1180px){ /**/
		.sns_hero{
			width: 500px;
			font-size: 18px;
		}

		.sns_hero img{
			width: 30px;
		}
	}

	@media screen and (max-width: 750px){ /**/
		.sns_hero{
			width: 100%;
			font-size: calc(26vw / 750 *100);
			text-align: center;
		}

		.sns_hero img{
			width: 30px;
		}
	}

.homeh1_sm{
	display: none;
}

@media screen and (max-width: 750px){ /**/
	.homeh1_sm{
		display: block;
		background: url(images/dot.png);
		margin: 0;
		padding: 0;
	}

	.homeh1_sm h1{
		margin: 0;
		padding: 5% 2.5%;
		font-size: calc(24vw / 750 *100);
		text-align: center;
	}
}

.h1_sp_sub{
	display: none;
}
@media screen and (max-width: 750px){ /**/
	.h1_sp_sub{
		display: block;
		color: #fff;
		font-size: calc(24vw / 750 *100);
	}
}