@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto|Lato|Noto+Sans+JP|M+PLUS+1p);

/*

font-family: 'Cinzel', serif;
font-family: 'Lato', sans-serif;
font-family: 'Nunito Sans', sans-serif;
font-family: "Sawarabi Mincho";
font-family: "Mplus 1p";

	BASE
*******************************/

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

* {
	font-family: 'Lato',"M PLUS 1p", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,'Hiragino Kaku Gothic Pro',Osaka, "ＭＳ Ｐゴシック", "MS PGothic",sans-serif;;
	margin: 0;
	padding: 0;
}

body > #container {
	/*height: auto;*/
}
body * {line-height:1.22em;}

img {
	vertical-align:bottom;
	line-height:0;
}

p,th,td,dt,dd,li,h1,h2,h3,h4,h5,h6 { color:#000;}
dt,dd { color:#000;}
a,
a:link,
a:visited {
	color:#666;
	text-decoration:none;
}
a:hover {
	color:#666;
	text-decoration:none;
}

a img {
	outline:none;
	border:none;
}
#container div area {
	border:none;
	outline:none;
}

.clear { clear:both;}

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

.pagetop {
	width: 36px;
	height:36px;
	position: fixed;
	bottom:-50px;
	right:20px;
	background: rgba(255,255,255,.5);
	text-align: center;
	z-index: 999;
	cursor:pointer;
	transition: .3s;
	color: #000;
	font-size: 24px;
	box-sizing: border-box;
	padding-top: 6px;
	border-radius: 4px;
}
.pagetop.onn {
	bottom:20px;
}

/*//////////////////////////////////////////////////////////////////////////*/

/*
	BASE LAYOUT
******************/
body {
	background-size:cover;
}
#container {
	width:100%;
	margin:0;
	padding:0;
	background: #FFF;
}
#main {
	max-width:1200px;
	width: calc(100% - 60px);
	margin:0 auto;
	padding:30px 0;
}
#main p {
	color: #000;
	font-size:16px;
	line-height:2em;
	margin:0 0 1em;
	padding:0;
}
#sm-menu {
	display: none;
}

/*//////////////////////////////////////////////////////////////////////////*/

/*
	Header LAYOUT
******************/
#head {
	width:100%;
	margin:0;
	box-sizing:border-box;
	padding: 0;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	background: rgba(255,255,255,.8);
}
#header {
	width: calc(100% - 60px);
	box-sizing:border-box;
	margin:0 auto;
	padding: 10px 0;
	position:relative;
}
#header #logo {
	max-width:90px;
}

#menu {
	position: absolute;
	bottom:10px;
	right:0;
}
#menu ul {
	text-align: center;
	margin: 0 auto;
	padding: 0;
	letter-spacing: -0.4em;
}
#menu li {
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	box-sizing: border-box;
	border-right:1px solid #666;
}
#menu li:first-child {
	border-left:1px solid #666;
}
#menu li a,
#menu li a:link,
#menu li a:visited {
	font-size: 14px;
	font-weight: normal;
	display: block;
	text-align: center;
	line-height: 1em;
	color:#666;
	padding: 0.2em 3em;
	box-sizing: border-box;
	letter-spacing: 0.1em;
	position: relative;
	transition:.3s;
}
#menu li a span {
	font-size: 11px;
	line-height: 1em;
	letter-spacing: 0.1em;
	padding-top:0.5em;
	display: block;
}
#menu li.onn a,
#menu li a:hover {
	color:#f39800;
}

/*//////////////////////////////////////////////////////////////////////////*/

/*
	Contents LAYOUT
******************/
#contents {
	margin:0;
	padding:0;
	position:relative;
}

/*
	Footer LAYOUT
******************/

#foot {
	width:100%;
	background:#f39800;
}
#footer {
	width:100%;
}
#copyright {
	color:#FFF;
	font-size: 13px;
	text-align: center;
	letter-spacing:0.1em;
	line-height: 1em;
	padding:1.5em 0;
}
#copyright br {
	display: none;
}


@media screen and (max-width:1450px){

}

@media screen and (max-width:1300px){
	
}

@media screen and (max-width:880px){

}

@media screen and (max-width:768px){

/*
	Header LAYOUT
******************/
#header {
	width: calc(100% - 40px);
}
#header #logo {
	max-width:60px;
}
#menu li a,
#menu li a:link,
#menu li a:visited {
	font-size: 13px;
}

}


@media screen and (max-width:640px){

/*
Header LAYOUT
******************/
#header {
	width: calc(100% - 20px);
}
#header #logo {
	max-width:50px;
}
#menu li a,
#menu li a:link,
#menu li a:visited {
	padding:0.1em 1.2em;
	font-size: 13px;
}
	
}

@media screen and (max-width:480px){

#copyright {
	font-size: 12px;
	line-height: 1.3em;
	padding:1.2em 0;
}
#copyright br {
	display: inline;
}

}