/*******************************************************/
/*                                                     */
/* 全体スキンの編集　　　　　　　　　　                */
/*                                                     */
/*******************************************************/


/* ボディ */
body
{
	margin: 0 ;			/* スペース */
	padding: 0 ;			/* 余白 */
	line-height: 1.3em;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/*******************************************************/
/*                                                     */
/* ヘッダ部分(メニュー含む)の編集                      */
/*                                                     */
/*******************************************************/
/*******************************************************/
/*                                                     */
/* ヘッダ部分の編集                                    */
/*                                                     */
/*******************************************************/

.header
{
	border-bottom: 10px solid #009 ;			/* 枠線 */
	text-align: center ;				/* テキスト、画像の真ん中寄せ */
	padding: 5px 0 ;				/* 上下の余白 */
	margin-bottom: 3px ;				/* 他のブロックとのスペース */
	background: #1b66ff ;				/* 背景色(確認用) */
}

/* ロゴ画像を囲む[h1] */
@media screen and (min-width: 768px)
{ 
	/*** サイト共通 ***/
	.logo-wrapper
	{
		margin: 0 auto 0 auto;			/* スペース */
		padding: 0 ;		/* 余白 */
		line-height: 1 ;	/* 行の高さ */
	}
	.logo-wrapper-sp
	{
		display: none;
	}
}
/* ロゴ画像を囲む[h1] */
@media screen and (max-width: 768px)
{ 
	/*** サイト共通 ***/
	.logo-wrapper
	{
		display: none;
	}
	.logo-wrapper-sp
	{
		margin: 0 auto 0 auto;			/* スペース */
		padding: 0 ;		/* 余白 */
		line-height: 1 ;	/* 行の高さ */
	}
}

/*******************************************************/
/*                                                     */
/* フッダ部分の編集                                    */
/*                                                     */
/*******************************************************/
	/* フッター */
footer
{
	padding: 5px 0;;
	border-top: 10px solid #009 ;			/* 枠線 */
	text-align: center ;				/* テキスト、画像の真ん中寄せ */
	margin-bottom: 3px ;				/* 他のブロックとのスペース */
	background: #1b66ff ;				/* 背景色(確認用) */
}

	/* フッター */
footer
{
	padding-top: 10px;
	border-bottom: 10px solid #888 ;			/* 枠線 */
	text-align: center ;				/* テキスト、画像の真ん中寄せ */
	margin-bottom: 3px ;				/* 他のブロックとのスペース */
	background: #1b66ff ;				/* 背景色(確認用) */
}







/********************************/
/*　パソコン画面サイズ          */
/********************************/
@media screen and (min-width: 768px)
{ 
/*** サイト共通 ***/
	p
	{
		font-size: 14px;
	}
	h1
	{
		position: relative;
		font-size: 22px;
	}
	h2
	{
		position: relative;
		font-size: 18px;
	}
	h3
	{
		position: relative;
		padding: 0.25em 0;
		font-size: 16px;
	}
	ul
	{
		font-size : 14px;
		line-height: 1.6em;
		list-style-type: square;
	}
	a
	{
		color: #1b66ff;
		font-weight: normal;
		outline: none;
	}
	a:hover
	{
	  	color: #f35;
	}
	.contents
	{
		padding-left: 10px;
	}

/*** コンテンツ共通 ***/
	.wrapper-header
	{
		width: 960px ;
		margin: 0 auto 0 auto ;	/* 左右に[auto]を指定することで、真ん中に寄る */
	}
	.container-header
	{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto ;
	}
	.box-header1
	{
		grid-column: 1;
		grid-row: 1;
		font-size: 14px;
		font-weight: normal;
		text-align: right;
		color: #fff;
	}
	.box-header2
	{
		grid-column: 1;
		grid-row: 2;
		width: 960px ;		/* 横幅 */
		height: auto ;		/* 高さ */
	}
/* ロゴ画像 */
	.logo
	{
		width: 960px ;		/* 横幅 */
		height: auto ;		/* 高さ */
	}
/*** メニュー定義 ***/
	#main-menu
	{
		margin: 5px 0 0 0;
	}
	#main-menu li
	{
		display: inline-block;　/*横並びにします*/
	}
	#main-menu li:after
	{
	    	content: " | ";　/*記号( ＞ )を追加します*/
	}
	#main-menu li:last-child:after{
	    	content: "";　/*リスト要素の末尾は記号を消します*/
	}
	#main-menu a 
	{
		color: #fff;
		font-weight: bold;
	}
	#main-menu a:hover 
	{
	  	color: #f35;
	}
	/*  タブレット、スマホメニュー非表示  */
	.global_nav{
		display: none;
	}
	.toggle{
		display: none;
	}

	.title-header img
	{
		width: 960px;
		height: auto ;		/* 高さ */
	}
	/* コンテンツの編集　　*/
	.wrapper
	{
		width: 960px ;
		margin: 0 auto 50px auto ;	/* 左右に[auto]を指定することで、真ん中に寄る */
	}
	.container
	{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: auto;
	}
/************************/
/*
/* フッダ詳細
/*
/************************/
	/* フッター */
	.wrapper-footer
	{
		clear: both;
		width: 960px ;
		margin: 0 auto 0 auto ;	/* 左右に[auto]を指定することで、真ん中に寄る */
		color: #FFF;
		background: #19a8ff ;				/* 背景色(確認用) */
	}
	.container-footer
	{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		background: #19a8ff ;				/* 背景色(確認用) */
	}

	.box-footer1
	{
		grid-column: 1;
		grid-row: 1;
		display: grid;
		grid-template-columns: 500px 350px 1fr;
		grid-template-rows: auto auto auto ;
		padding: 20px 20px 0 20px;
	}
	.box-footer1-1-pc
	{
		grid-colmn: 1;
		grid-row: 1;
		padding: 0 15px 10px 0;
	}
	.box-footer1-1-sp
	{
		display: none;
	}
	.box-footer1-2
	{
		grid-colmn: 2;
		grid-row: 1;
		padding: 0 15px 10px 0;
		display: grid;
		text-align: center;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto ;
	}
	.box-footer1-2-1-pc
	{
		grid-colmn: 1;
		grid-row: 1;
		padding: 10px 15px 2px 15px;
		background: #fff ;				/* 背景色(確認用) */
	}
	.box-footer1-2-1-sp
	{
		display: none;
	}
	.box-footer1-2-2
	{
		grid-colmn: 1;
		grid-row: 2;
		padding: 10px 15px 25px 0;
	}
	.box-footer1-2-3
	{
		grid-colmn: 3;
		grid-row: 2;
		padding: 10px 15px 10px 0;
	}
	.box-footer1-3
	{
		grid-colmn: 3;
		grid-row: 1;
		text-align: right;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto ;
	}
	.box-footer1-3-1
	{
		grid-colmn: 1;
		grid-row: 1;
		padding: 0 15px 10px 0;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto ;
	}
	.box-footer1-3-1-1
	{
		grid-colmn: 1;
		grid-row: 1;
		padding: 0 15px 5px 0;
	}
	.box-footer1-3-1-2
	{
		grid-colmn: 1;
		grid-row: 2;
		padding: 0 15px 10px 0;
	}
	.box-footer2
	{
		grid-column: 1;
		grid-row: 2;
		text-align: right;
		padding: 0 10px;
	}


	#page_top
	{
		width: 100px;
		height: 60px;
		position: fixed;
		right: 0;
		bottom: 0;
		background: #1f3f98;
		opacity: 0.6;
		border-radius: 15px;
	}
	#page_top a
	{
		position: relative;
		display: block;
		width: 100px;
		height: 60px;
		text-decoration: none;
	}
	#page_top a::before
	{
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		content: '↑';
		font-size: 25px;
		color: #fff;
		position: absolute;
		width: 25px;
		height: 25px;
		top: -25px;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		text-align: center;
	}
	#page_top a::after
	{
		content: 'PAGE TOP';
		font-size: 13px;
		color: #fff;
		position: absolute;
		top: 30px;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		text-align: center;
	}

}
/********************************/
/*　スマホ画面サイズ            */
/********************************/
@media screen and ( max-width:768px )
{
/*** サイト共通 ***/
	p
	{
		font-size: 11px;
	}
	h1
	{
		position: relative;
		font-size: 16px;
	}
	h2
	{
		position: relative;
		font-size: 14px;
	}
	h3
	{
		position: relative;
		padding: 0.25em 0;
		font-size: 14px;
	}
	ul
	{
		font-size : 11px;
		line-height: 1.6em;
		list-style-type: square;
	}
	a
	{
		color: #1b66ff;
		font-weight: normal;
		outline: none;
	}
	a:hover
	{
	  	color: #f35;
	}
	.contents
	{
		padding-left: 10px;
	}

/*** コンテンツ共通 ***/
	.wrapper-header
	{
		width: auto ;
		margin: 0 auto 0 auto ;	/* 左右に[auto]を指定することで、真ん中に寄る */
	}
	.container-header
	{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto ;
	}
	.box-header1
	{
		display: none;
	}
	.box-header2
	{
		grid-column: 1;
		grid-row: 2;
	}
/* ロゴ画像 */
	.logo-sp
	{
		width: 100% ;		/* 横幅 */
		height: auto ;		/* 高さ */
	}
.global_nav{
	display: inline;
	}

	.toggle 
	{
	    position: fixed; /* bodyに対しての絶対位置指定 */
	    right: 10px;
	    top: 100px;
	    display: block;
	    width: 45px;
	    height: 50px;
	    cursor: pointer;
	    z-index: 3;
	    background: #1b66ff;
	}
	.toggle span 
	{
		display: block;
		position: absolute; /* .toggleに対して */
	 	width: 70%;
		border-bottom: solid 3px #fff;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
		padding-top: 5px;
		right: 7px;
	}
		.toggle span:nth-child(1) 
	{
		top: 3px;
	}
	.toggle span:nth-child(2) 
	{
		top: 13px;
	}
	.toggle span:nth-child(3) 
	{
		top: 23px;
	}
	.toggle span:nth-child(4) 
	{
	 	border: none;
		top: 28px;
		left: 5px;
		font-size: 10px;
		font-weight: bold;
		color: #fff;
	}

	/* 最初のspanをマイナス45度に */
	.toggle.active span:nth-child(1) 
	{
		top: 15px;
		left: 4px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	/* 2番目と3番目のspanを45度に */
	.toggle.active span:nth-child(2),
	.toggle.active span:nth-child(3) 
	{
		top: 15px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	/* .global_nav */
	.global_nav 
	{
		 position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		transform: translateY(-100%);
		z-index: 2;
		padding-top: 5px;
		text-align: center;
		color: #fff;
		background: #4b66ff;
		transition: all 0.8s;  
	}
	.global_nav .nav_li 
	{
	    width: 100%;
	    padding: 10px;
	    list-style-type: none;
	}
	.global_nav .nav_li a
	{
	    display: block;
	    color: #fff;
	}
	/* .global_navに.activeが追加 */
	.global_nav.active 
	{
		transform: translateY(0%);
	}

	.title-header
	{
		position: relative;
	}
	.title-header p
	{
		position: absolute;
		font-weight: bold; 			/*太字に*/
		font-family :Quicksand, sans-serif;	/*Google Font*/
	}
/*	#main-title1
	{
		color: #fff;
		font-size: 14px;
		top: 6px;
		left: 40px;
		text-shadow: -1px 2px #000, 2px 1px #000, 1px 2px #000, 2px -1px #000;
	}
	#main-title2
	{
		color: #fff;
		font-size: 10px;
		top: 6px;
		left: 40px;
		text-shadow: -1px 2px #000, 2px 1px #000, 1px 2px #000, 2px -1px #000;
	}
	#main-title3
	{
		color: #fff;
		font-size: 10px;
		top: 6px;
		left: 40px;
		text-shadow: -1px 2px #000, 2px 1px #000, 1px 2px #000, 2px -1px #000;
	}
*/
	#main-title
	{
		color: #fff;
		font-size: 15px;
		top: 1px;
		left: 40px;
		text-shadow: -1px 2px #000, 2px 1px #000, 1px 2px #000, 2px -1px #000;
	}
	#sub-title
	{
		font-size: 10px;			/*サイズ2倍*/
		top: 48px;
		left: 300px;
		color: #ffff; 
		text-shadow: -1px 2px #000, 2px 1px #000, 1px 2px #000, 2px -1px #000;

		border-bottom: 2px solid;
		border-image: linear-gradient(to right, #1b66ff 0% 50%, transparent 100%);
		border-image-slice: 1;
	}
	#catch-title
	{
		font-size: 10px;			/*サイズ2倍*/
		top: -10px;
		left: 40px;
		color: #ffff; 
		text-shadow: -1px 2px #000, 2px 1px #000, 1px 2px #000, 2px -1px #000;

	}
	.title-header img
	{
		width: auto;
		height: auto ;		/* 高さ */
	}	/* ロゴ画像 */

	/* コンテンツの編集　　*/
	.wrapper
	{
		width: auto ;
		margin: 0 auto 0 auto ;	/* 左右に[auto]を指定することで、真ん中に寄る */
	}
	.container
	{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}


/************************/
/*
/* フッダ詳細
/*
/************************/
	/* フッター */
	.wrapper-footer
	{
		clear: both;
		width: auto ;
		margin: 0 auto 0 auto ;	/* 左右に[auto]を指定することで、真ん中に寄る */
		background-color:  #19a8ff;
		color: #FFF;
	}
	.container-footer
	{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	.box-footer1
	{
		grid-column: 1;
		grid-row: 1;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto auto ;
		padding: 10px 10px 5px 10px;
	}
	.box-footer1-1-pc
	{
		display: none;
	}
	.box-footer1-1-sp
	{
		grid-colmn: 1;
		grid-row: 1;
		padding: 10px 15px 10px 10px;
		text-align: left;
	}
	.box-footer1-2
	{
		grid-colmn: 1;
		grid-row: 2;
		text-align: center;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		padding: 0 10px;
	}
	.box-footer1-2-1-pc
	{
		display: none;
	}
	.box-footer1-2-1-sp
	{
		grid-colmn: 1;
		grid-row: 1;
		padding: 0 5px;
		background: #fff ;
				/* 背景色(確認用) */
	}
	.box-footer1-2-2
	{
		grid-colmn: 1;
		grid-row: 2;
		padding: 10px 15px 10px 0;
	}
	.box-footer1-3
	{
		grid-colmn: 1;
		grid-row: 3;
		text-align: left;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto ;
		padding-left: 15px;
	}
	.box-footer1-3-1
	{
		grid-colmn: 1;
		grid-row: 1;
		padding: 0 15px 10px 0;
	}
	.box-footer1-3-1 img
	{
		width: 25px;
		height; 25px;
	}
	.box-footer1-3-2
	{
		grid-colmn: 1;
		grid-row: 2;
		padding: 10px 15px 0 0;
	}
	.box-footer1-3-2 img
	{
		width: 25px;
		height; 25px;
	}
	.box-footer2
	{
		grid-column: 1;
		grid-row: 2;
		text-align: right;
		padding: 0 10px 5px 10px;
	}
	#page_top
	{
		display: none;
	}
}