/*******************************************************/
/*                                                     */
/* 全体スキンの編集(共通）　　　　　　　　　　                */
/*                                                     */
/*******************************************************/

html
{
	scroll-behavior: smooth;
}
/* ボディ */
body
{
	margin: 0 ;			/* スペース */
	padding: 0 ;			/* 余白 */
	line-height: 1.5em;
	font-family: "メイリオ", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
/*	background:  url(../images/bkskin.jpg);				/* 背景色(確認用) */
	color: #fff;
}

h1
{
	font-size: 14px;
}



/*******************************************************/
/*                                                     */
/* ヘッダ部分の編集                                    */
/*                                                     */
/*******************************************************/

.header
{
	width: 100%;
	height: auto;
/*	border-bottom: 5px solid #23c3a4 ;			/* 枠線 */
	text-align: center ;				/* テキスト、画像の真ん中寄せ */
	padding: 10px 0 30px 0;				/* 上下の余白 */
/*	margin-bottom: 3px ;				/* 他のブロックとのスペース */
/*	background:  #23c3a4;				/* 背景色(確認用) */
}
.header-wrapper
{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto ;
/*	background:  #f00;				/* 背景色(確認用) */
}

/*******************************************************/
/*                                                     */
/* コンテンツの編集                                    */
/*                                                     */
/*******************************************************/

/*******************************************************/
/*                                                     */
/* フッダ部分の編集                                    */
/*                                                     */
/*******************************************************/
	/* フッター */
footer
{
	padding: 0;
	border-top: 3px solid #000 ;			/* 枠線 */
	text-align: center ;				/* テキスト、画像の真ん中寄せ */
	margin-bottom: 15px ;				/* 他のブロックとのスペース */
}

/*******************************************************/
/*                                                     */
/* パソコンフォーマット                                */
/*                                                     */
/*******************************************************/
@media screen and (min-width: 768px)
{ 
	/******* title 編集 *******/

	.header-title-pc
	{
		grid-column: 1;
		grid-row: 1;
		margin-left: auto;
		margin-right: auto;
	}
	.header-title-sm
	{
		display: none;
	}
	.logo
	{
		width: 1000px ;		/* 横幅 */
		height: 250px ;		/* 高さ */
	}
	/*** メニュー定義 ***/

	.toggle 
	{
	    position: fixed; /* bodyに対しての絶対位置指定 */
	    right: 30px;
	    top: 5px;
	    display: block;
	    width: 65px;
	    height: 70px;
	    cursor: pointer;
	    z-index: 3;
	    background: #1b4990;
	}
	.toggle span 
	{
		display: block;
		position: absolute; /* .toggleに対して */
	 	width: 80%;
		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: 5px;
	}
	.toggle span:nth-child(2) 
	{
		top: 15px;
	}
	.toggle span:nth-child(3) 
	{
		top: 25px;
	}
	.toggle span:nth-child(4) 
	{
	 	border: none;
		top: 32px;
		left: 5px;
		font-size: 18px;
		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;
		right: 30px;
		width: 40%;
		transform: translateY(-100%);
		z-index: 2;
		padding-top: 5px;
		text-align: center;
		color: #fff;
		font-weight: bold;
		background: #50a3ff;
		transition: all 0.8s;  
	}
	.global_nav .nav_li 
	{
		width: 100%;
		padding: 10px;
		list-style-type: none;
		font-size: 18px;
	}
	.global_nav .nav_li a
	{
		display: block;
		color: #fff;
	}
	.global_nav .nav_li a:hover
	{
		display: block;
		color: #fcfa00;
		font-size: 22px;
	}

	/* .global_navに.activeが追加 */
	.global_nav.active 
	{
		transform: translateY(0%);
	}




	/******* コンテンツ部分の編集 ********/
	.wrapper
	{
		margin : 0 auto;
		width: 1000px;
		background: #fff;
	}
	.container
	{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto auto auto auto auto 1fr;
		padding: 20px 0 60px 0;
	}
	/*
	/******* footer 編集 *******/*
	.footer-wrapper
	{
		margin: 0 auto;
		width: 1000px;
		background: #fff;
		font-size: 14px;
		color: #000;
		text-align: right;
	}
	.footer
	{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto 1fr;
		text-align: right;
		paddding:　20px 0;

	}
	.footer-1
	{
		grid-column: 1;
		grid-row: 1;

	}
	.footer-1 img
	{
		border-radius: 10px;       /* 角丸のサイズ指定 */	
		width: 100px;
		height: 100px;
	}
	.footer-2
	{
		grid-column: 2;
		grid-row: 1;
		padding-right: 10px;
		padding-bottom: 10px;
		text-align: right;
	}
}

.pagetop {
	color: #fff;
	background-color: rgba(0,0,0,0.3);
	text-decoration: none;
	display: none;
	position: fixed;
	bottom: 1rem;
	right: 30px;;
	font-size: 1.5rem;
	width: 3.3rem;
	height: 3.3rem;
	line-height: 3.3rem;
	border-radius: 3.3rem;
	text-align: center;
	cursor: pointer;
}

.pagetop:hover {
	color: #fff !important;
	background-color: #ed702b;
	text-decoration: none;
}


/********************************/
/*　スマホ画面サイズ            */
/********************************/
@media screen and ( max-width:768px )
{
	.header-title-pc
	{
		display: none;
	}
	.header-title-sm
	{
		grid-column: 1;
		grid-row: 1;
	}
	.logo
	{
		width: 100% ;		/* 横幅 */
		height: auto ;		/* 高さ */
	}
	/*** メニュー定義 ***/

	.toggle 
	{
	    position: fixed; /* bodyに対しての絶対位置指定 */
	    right: 10px;
	    top: 5px;
	    display: block;
	    width: 45px;
	    height: 50px;
	    cursor: pointer;
	    z-index: 3;
	    background: #1b4990;
	}
	.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: 18px;
		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;
		right: 30px;
		width: 100%;
		transform: translateY(-100%);
		z-index: 2;
		padding-top: 5px;
		text-align: center;
		color: #fff;
		font-weight: bold;
		background: #50a3ff;
		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 .nav_li a:hover
	{
		display: block;
		color: #fcfa00;
		font-size: 22px;
	}

	/* .global_navに.activeが追加 */
	.global_nav.active 
	{
		transform: translateY(0%);
	}

/**** コンテンツ ****/
	.wrapper
	{
		margin: 0 auto;
		background: #fff; 
	}
	.container
	{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}
	/*
	/******* footer 編集 *******/
	.footer-wrapper
	{
		margin: 0 auto;
		width: 100%;
		height: auto;
		font-size: 14px;
		color: #000;
	}
	.footer
	{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 1fr;
		text-align: left;

	}
	.footer-1
	{
		grid-column: 1;
		grid-row: 1;
		display: grid;
		grid-template-columns: 1;
		grid-template-rows: auto auto auto auto auto 1fr;
	}
	.footer-1 img
	{
		border-radius: 10px;       /* 角丸のサイズ指定 */	
		width: 40%;
		height: auto;
	}
	.footer-2
	{
		grid-column: 1;
		grid-row: 2;
		padding-right: 10px;
		padding-bottom: 10px;
		text-align: right;
	}
}