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


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

h1
{
	font-size: 18px;
}

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

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

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

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

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

	.header-title-pc
	{
		grid-column: 1;
		grid-row: 1;
	}
	.header-title-sm
	{
		display: none;
	}
	.logo
	{
		width: 1100px ;		/* 横幅 */
		height: auto ;		/* 高さ */
	}
	.header-menu
	{
		grid-column: 1;
		grid-row: 2;
	}
	/*** メニュー定義 ***/
	#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;
	}
	/*
	/******* コンテンツ部分の編集 ********/
	.wrapper
	{
		margin : 0 auto;
		width: 1100px;
	}
	.container
	{
		display: grid;
		grid-template-columns: 300px 800px;
		grid-template-rows: auto;
	}
	/*

	/**** コンテンツのサブ部 ***/

	.container-side
	{
		margin: 5px 10px 40px 20px;
		grid-column: 1;
		grid-row: 1;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto 10px auto 10px auto 10px auto 1fr;
	}
	.container-side1
	{
		padding: 10px 10px 0 5px;
		grid-column: 1;
		grid-row: 1;
		background: #edfeec;
		border-radius: 10px;       /* 角丸のサイズ指定 */	
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto 5px auto 1fr;
	}
	.container-side1-1
	{
		grid-column: 1;
		grid-row: 1;
		position: relative;
	}
	.container-side1-1 a
	{
		padding:5px 41px;
		margin:0;
		position: absolute;
		top:77%;
		left:6%;
		font-size: 18px;
		color: #00580b;
		background: #90f8a4;
	}
	.container-side1-1 a:hover
	{
		color: #f00;
		background: #f6a9b2;
	}
	.container-side1-3
	{
		grid-column: 1;
		grid-row: 3;
		position: relative;
	}
	.container-side1-3 a
	{
		padding:5px 13px;
		margin:0;
		position: absolute;
		top:78%;
		left:7%;
		font-size: 18px;
		font-weight; bold;
		color: #00580b;
		background: #90f8a4;
		display:inline-block
	}
	.container-side1-3 a:hover
	{
		color: #f00;
		background: #f6a9b2;
	}
	.container-side2
	{
		padding: 0 0 0 10px;
		grid-column: 1;
		grid-row: 3;
	/*	border-bottom: solid; */
		background: #edfeec;
		border-radius: 10px;       /* 角丸のサイズ指定 */	
	}
	.container-side3
	{
		padding:  0 0 10px 25px;
		vertical-align: center;
		grid-column: 1;
		grid-row: 5;
		background: #edfeec;
		border-radius: 10px;       /* 角丸のサイズ指定 */
	}
	.container-side4
	{
		padding: 0 0 0 10px;
		grid-column: 1;
		grid-row: 7;
	/*	border-bottom: solid; */
		background: #edfeec;
		border-radius: 10px;       /* 角丸のサイズ指定 */	
	}
	.container-side4 a
	{
		color: #2dca5c;
		font-weight: bold;
	}
	.container-side4 a:hover
	{
		color: #f00;
		font-weight: bold;
	}
	/******* footer 編集 *******/*
	.footer-wrapper
	{
		margin: 0 auto;
		width: 1100px;
		background: #90f8a4;
		font-size: 14px;

	}
	.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: 240px 400px 1fr;
		grid-template-rows: auto auto;

	}
	.footer-1-1
	{
		grid-column: 1;
		grid-row: span 2;
		padding: 20px 40px;
	}
	.footer-1-1 img
	{
		border-radius: 10px;       /* 角丸のサイズ指定 */	
	}
	.footer-1-2
	{
		grid-column: 2;
		grid-row: 1;
		padding: 20px 5px;
		text-align: left;
	}
	.footer-1-3-1
	{
		grid-column: 3;
		grid-row: 1;
		padding-top: 20px;
		font-size: 12px;
	}	
	.footer-1-3-1 iframe
	{
		width: 400px;
		height: 200px;
	}
	.footer-1-3-2
	{
		grid-column: 2 / 4;
		grid-row: 2;
		padding: 10px;
		text-align: right;
	}
	.footer-2
	{
		grid-column: 1;
		grid-row: 2;
		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: 1rem;
	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 ;		/* 高さ */
	}
	.header-menu
	{
		display: none;
	}

	.toggle 
	{
	    position: fixed; /* bodyに対しての絶対位置指定 */
	    right: 10px;
	    top: 5px;
	    display: block;
	    width: 45px;
	    height: 50px;
	    cursor: pointer;
	    z-index: 3;
	    background: #1db135;
	}
	.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: #24c335;
		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%);
	}
/**** コンテンツ ****/
	.wrapper
	{
		margin: 0 auto;
		background: #fff; 
	}
	.container
	{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}
	.container-side
	{
		margin: 0 20px 40px 20px;
		grid-column: 1;
		grid-row: 12;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto 10px auto 10px auto 1fr;
	}
	.container-side1
	{
		padding: 10px 10px 0 5px;
		grid-column: 1;
		grid-row: 1;
		background: #edfeec;
		border-radius: 10px;       /* 角丸のサイズ指定 */	
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto 5px auto 1fr;
	}
	.container-side1-1
	{
		grid-column: 1;
		grid-row: 1;
		position: relative;
	}
	.container-side1-1 a
	{
		padding:5px 41px;
		margin:0;
		position: absolute;
		top:75%;
		left:7%;
		transform: translate(-77%,-6%)
		font-size: 18px;
		color: #00580b;
		background: #90f8a4;
	}
	.container-side1-1 a:hover
	{
		color: #f00;
		background: #f6a9b2;
	}
	.container-side1-1 img
	{
		width: 100%;
	}
	.container-side1-3
	{
		grid-column: 1;
		grid-row: 3;
		position: relative;
	}
	.container-side1-3 a
	{
		padding:5px 13px;
		margin:0;
		position: absolute;
		top:78%;
		left:7%;
		font-size: 18px;
		font-weight; bold;
		color: #00580b;
		background: #90f8a4;
		display:inline-block
	}
	.container-side1-3 a:hover
	{
		color: #f00;
		background: #f6a9b2;
	}
	.container-side1-3 img
	{
		width: 100%;
	}
	.container-side2
	{
		padding: 0 10px 0 10px;
		grid-column: 1;
		grid-row: 3;
	/*	border-bottom: solid; */
		background: #edfeec;
		border-radius: 10px;       /* 角丸のサイズ指定 */	
	}
	.container-side3
	{
		padding:  0 0 10px 25px;
		vertical-align: center;
		grid-column: 1;
		grid-row: 5;
		background: #edfeec;
		border-radius: 10px;       /* 角丸のサイズ指定 */
	}
	.container-side4
	{
		padding: 15px 0;
		grid-column: 1;
		grid-row: 7;
	/*	border-bottom: solid; */
		background: #edfeec;
		border-radius: 10px;       /* 角丸のサイズ指定 */	
	}
	.container-side4 a
	{
		color: #2dca5c;
		font-weight: bold;
	}
	.container-side4 a:hover
	{
		color: #f00;
		font-weight: bold;
	}
	/*
	/******* footer 編集 *******/*
	.footer-wrapper
	{
		margin: 0 auto;
		width: 100%;
		height: auto;
		background: #90f8a4;
		font-size: 14px;

	}
	.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-1
	{
		display: none;
	}
	.footer-1-2
	{
		grid-column: 1;
		grid-row: 2;
		padding: 10px 20px;
		text-align: left;
	}
	.footer-1-2 h4
	{
		font-size: 14px;
	}
	.footer-1-3-1
	{
		grid-column: 1;
		grid-row: 3;
		padding: 10px 30px;
		font-size: 12px;
	}	
	.footer-1-3-1 iframe
	{
		width: 90%;
		height: auto;
	}
	.footer-1-3-2
	{
		grid-column: 1;
		grid-row: 4;
		padding: 10px;
	}
	.footer-2
	{
		grid-column: 1;
		grid-row: 2;
		padding-right: 10px;
		padding-bottom: 10px;
		text-align: right;
	}
}