@charset "UTF-8";

body {
	margin: 0px;
	font-family: 'Open Sans', sans-serif;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    /*font-family: 'Sawarabi Gothic', sans-serif;*/
}

img{
	margin: 0;
	border: 0;
}

.container {
	width: 100%;
	margin: 0 auto;
	background-color: #fff;
	border-bottom-width: 0px;
	padding: 0px;
}



/*ヘッダー　ロゴ
-----------------------------------------*/

h1 a{
	text-decoration: none;
}
.primary_header{
	height: 50px;
	margin: 0 auto 20px 70px; 
}


/*ヘッダー　ナビ
-----------------------------------------*/
#menu{
	width: 100%;
	height: 50px;
	background: black;
	opacity: 0.7;
	
}
.secondary_header ul {
	flex-direction: row;
	justify-content: center;
	margin: 0 20px 0 0;
}
.secondary_header ul li {
	display: block;
	list-style: none;
	font-size: 15px;
	color: #FFFFFF;
	letter-spacing: 3px;
	padding-top: 15px;
}
.secondary_header ul li a{
	text-decoration: none;
	color: #fff;
	position: relative;
}
.secondary_header ul li a::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: -5%;
	width : 110%;
	height: 2px;
	background: skyblue;
	transition: all .7s;
	transform: scale(0,1);
	transform-origin: center top;
}
.secondary_header ul li a:hover::after{
	transform: scale(1,1);
}

/*メイン
-----------------------------------------*/

.main_conte{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

/*フッター
-----------------------------------------*/
.footer {
	clear: both;
	width: 100%;
	background-color: cadetblue;
}

.foot_link{
	display: block;
	padding-top: 20px;
	padding-left: 120px;
}

.foot_link li {
	list-style: none;
	padding-top: 11px; 
}

.foot_link li a{
	color: #FFF;
	font-size: 13px;
	text-decoration: none;
	display: block;
	transition: all 0.7s linear;
}

.foot_link li a:hover{
	color: #ccc;
}

#sitemap{
	display: flex;
	flex-wrap: wrap;
}


.copyright p{
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #FFFFFF;
	letter-spacing: 2px;
}



/*スマホ用
-----------------------------------------*/
@media (max-width: 500px) {

.primary_header{
	margin: 0 auto 20px 50px; 
}
#menu{
	width: 100%;
	height: 170px;
}
.container .secondary_header ul {
	margin: 0px;
	padding: 0px;
	text-align: center;
	background: black;
}
.secondary_header {
}

.copyright {
	padding-top: 25px;
	padding-bottom: 0px;
	margin-bottom: 0px;
}
}


/*タブレット用
-----------------------------------------*/
@media (min-width: 501px) and (max-width: 949px) {
.primary_header{
	margin: 0 auto 20px 50px; 
}
#menu{
	width: 100%;
}
	
.secondary_header ul {
	display: flex;
	justify-content: space-around;
}

}

/*PC用
-----------------------------------------*/
@media (min-width: 950px) {
	
#head_nav{
	width: 100%;
	margin: 0 auto;
	position: absolute;
	z-index: 10;
}
	
.secondary_header {
	width: 100%;	
}
.secondary_header ul {
	display: flex;
	justify-content: space-around;
}

}