@charset "UTF-8";

body{
	font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
	font-size: 1em;
	line-height: 1.6em;
	color: #222;
}

p{ text-align:left; margin-top:5px;
	}

a{ text-decoration: none; color:#1111cc
}

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

img{
	max-width: 100%;
	height: auto;
}

/* __ h TAG __ */





/* __ Header __ */

header{
	padding: 1em;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.logo{
	margin: 0.5em 0;
	align-items: center;
	justify-content: center;
	font-size: 26px;
}
.logo a{
	text-align: center;
}
.logo a:hover{

}
.gnav{
	display: flex;
}
.gnav a{
	display: block;
	font-size: 22px;
	
}

	.main-nav-btn {
	width: 49%;
	display: inline-block;
	background-color: #FFF;
	text-decoration: none;
	font-size: 0.8em;
	color: #333;
	border-bottom: solid 4px #CCC;
	border-radius: 3px;
	text-align: center;
	line-height: 80px;
}
 
	
	 
	.main-nav-home-btn {
	width: 100%;
	height: 40px;
	text-align: center;
	background-color: #666;
	font-size: 0.8em;
	color:#CCC
    }
	
		.sidebar-nav{
		line-height:80px;
}
	
	@media screen and (max-width : 959px) {
	
	.main-nav-home-btn {
		margin-bottom:10px;
		line-height:40px;

    }
	
	
	
}


/* __ Contents __ */

.bg{background-image:url(../img/bg_page.png)}

.container p:not(:last-child){
	margin-bottom: 1.5em;
	
}
.main, footer{
	padding: 20px;
}

.main{
}

.sidebar{
	margin:20px
}

.sidebar-nav{
	border: 1px solid #ddd;
	padding: 1em;
	background-color:#FFF
}

.sidebar-nav a{ color:#333
}

.sidebar-nav li{
	margin-bottom: 0.5em;
	padding-bottom: 0.5em;
	border-bottom: 1px solid #ddd;
	background-color:#FFF;
}



/*__ Tiles __*/

.tiles{
	margin-bottom: 1em;
}
.tiles li{
	border:#CCC 1px solid;
	margin-bottom: 1em;
	padding: 10px;
	border-radius: 4px;
	background-color: #fff;
	font-size:1em;
}

/* __ Footer __ */

footer{
	text-align: center;
	background-color: #f5f5f5;
	color: #555;
}


/* __ パンくず __ */
.pankuzu {
	width: 100%;
	background-color: #e6eae3;
	margin-bottom: 30px;
	
}

.pankuzu a{
	color:#2e8b57
}

.pankuzu ol{
	margin:0 auto;
	text-align:center;
}

.pankuzu li{
  display: inline-block;
  margin: 0.9em;
  color: #2e8b57;
  font-size:0.7em;
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
.pc { display: none !important; }
.sp { display: block !important; }


/* Media queries
-------------------------------------------------------*/

@media screen and (min-width : 960px) { /* デスクトップ用CSS */

	/* __ Header __ */

	header{
		margin:0 auto;
		padding:0;
		max-width:980px;
		flex-direction: row;
		line-height:80px;
		margin-top:20px;
	}
	p{ font-size:14px
	}
	.logo{
		margin: -10px auto 0 0;
	}
	.gnav a{
		padding: 10px 22px;
		display: block;
		font-size: 24px;
		border-radius: 4px;
	}
	
	.main-nav {
	display: flex;
	justify-content: center;
	background-color: #333333;
	border-bottom: #CCC 1px dashed;
	border-top: #333 3px solid;
    }
	.main-nav a {
	background-color: #FFF;
	display:block;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;

    }
	.main-nav a:hover {
	background-color: #ffffe0;

    }
	
	
	.main-nav-home-btn {
	display:block;
	width: 80px;
	max-width: 100%;
	height: 80px;
	text-align: center;
	background:url(../img/gb1.png);
	font-size: 0.8em;
	padding-top: 48px;
	color:#CCC
    }
	
		.main-nav-btn {
	width: 150px;
	max-width: 100%;
	height: 80px;
	text-align: center;
	font-size: 0.8em;
	padding-top: 30px;
	color:#333;
	border-right:#CCC 1px dashed;
	display:inline-block;
	line-height:20px;
	
    }
	

	
	 
	
	
	
	
	
	
	
	
	
	
	.sidebar{
	
	 margin:0px
}

.sidebar-nav{
	border: 1px solid #ddd;
	padding: 1em;
	background-color:#FFF;
}

.sidebar-nav li{ line-height:40px; font-size:13px;
	border-bottom: 1px solid #ddd;
	background-color:#FFF;
}
	
	/* __ Contents __ */

	.container{
	display: flex;
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	}
	.sidebar{
	width: 230px;
	}
	.main{
	flex: 1;
	order: 0;
	padding: 0 40px 0 0;
	}

	/*__ Tiles __*/

	.tiles{
		display: flex;
		flex-wrap: wrap;
	}
	.tiles li{
		margin: 5px;
		width: calc( 33.3% - 10px);
	}
	
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }


}