@charset "UTF-8";

/*
======================
共通設定
======================
*/
body, div, section, article, header, footer, h1, h2, h3, h4, h5, h6, p, address, ul, ol, li, aside, span, a, img {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


/*フロート解除用のハック*/
/*clearfix*/
.clearfix:after{  
visibility:hidden;
height:0;
display: block;
font-size: 0;  
content: " ";  
clear: both;  

} 
* html .clearfix             { zoom: 1; } 
*:first-child+html .clearfix { zoom: 1; } 

html{
	font-size:62.5%;
}

/*メニューアイコン*/


div#menu{
	position:fixed;
	top:0;
	left:0;
	z-index:3;
	margin-top:5px;
}

div#menu:hover{
	cursor:pointer;
}



.menu-trigger,
.menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
	z-index:1;
}
.menu-trigger {
	position: relative;
	width: 30px;
	height: 24px;
	margin:40px 0 0 20px;
}
.menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	background-color:#636363;
	border-radius: 4px;
}


.menu-trigger span:nth-of-type(1) {
	top: 0;
}
.menu-trigger span:nth-of-type(2) {
	top: 10px;
}
.menu-trigger span:nth-of-type(3) {
	bottom: 0;
}

/*メニューアイコンがクリックされたら*/

.menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(10px) rotate(-45deg);
	-moz-transform: translateY(10px) rotate(-45deg);
	-o-transform: translateY(10px) rotate(-45deg);
	-ms-transform: translateY(10px) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-10px) rotate(45deg);
	-moz-transform: translateY(-10px) rotate(45deg);
	-o-transform: translateY(-10px) rotate(45deg);
	-ms-transform: translateY(-10px) rotate(45deg);
	transform: translateY(-10px) rotate(45deg);
}


ul.nav,
ul.nav li a{
	display:inline-block;
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-o-transition: all .4s;
	-ms-transition: all .4s;
	transition: all .4s;
	position:relative;
	padding-left:14px;
	line-height:28px;
	font-family: 'Open Sans', sans-serif;
	font-size:1.3rem;
	letter-spacing:0.15em;
}

/*ナビゲーションのリストの前の円*/

ul.nav li a::after {
	display: block;
	content: '';
	position: absolute;
	top:10px;
	left: -1em;
	width: 5px;
	height: 5px;
	background-color: #e8e8e8;
	border: 1px solid #000;
	border-radius: 100%;
	margin-left:12px;
}


ul.nav{
	width:160px;
	height:160px;
	background:#D3D3D3;
	opacity: 0.8;
	font-size:1.2rem;
	font-weight:bold;
	margin-top:20px;
	padding:70px 30px 30px 40px;
	position:absolute;
	top:0;
	left:-300px;
}

ul.nav li a{
	color:#000;
	text-decoration:none;
}


/*メニューアイコンをクリックしたら*/
.nav.active{
	position:absolute;
	top:0px;
	left:0px;
}

/*リストにマウスオーバーしたら*/
.nav li a:hover{
	color:#D87A32;
}

/*コンテンツエリア全体の設定*/


#contents{
	text-align:center;
}

h2,h3,a.button{
	font-family: 'Oswald', sans-serif;
}

h2{
	font-size:3rem;
}

h3{
	font-size:2.4rem;
	padding-bottom:15px;
}

h2.underPage{
	font-size:2.4rem;
	padding-bottom:15px;
	font-family: 'Oswald', sans-serif;
}

.textB{
	font-family: 'Quattrocento', serif;
	font-size:1.8rem;
}

.textS{
	font-family: 'Quattrocento', serif;	
	font-size:1.2rem;
	padding-bottom:40px;
}


/*GALLERY ボタン*/
.button {
	position:relative;
	display:inline-block;
	padding:.5em 4em;
	border:1.8px solid #000;
	color:#000;
	text-align:center;
	text-decoration:none;
	outline:none;
	overflow:hidden;
	font-size:1.2rem;
}
.button::after {
	position:absolute;
	top:50%;
	left:50%;
	z-index:-1;
	display:block;
	content:'';
	width:15em;
	height:15em;
	border-radius:100%;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	transition:all .6s;
}
.button:hover::after {
	box-shadow:inset 0 0 0 10em rgba(299,160,30,.8);
}


/*タイトルのサイド装飾*/
.titleDeco::before,
.titleDeco::after{
	content:"";
	display:inline-block;
	width:130px;
	height:1px;
	background-color:#e5a61e;
	margin:0 30px;
	vertical-align:middle;
}


/*フッターの設定*/

footer{
	width:100%;
	min-height:100px;
	margin:0 auto;
	background-color:#000;
	text-align:center;
	position:relative;
}
	

/*トップへ戻るボタンの設定*/

footer a.gotoTop{
	width:45px;
	height:60px;
	background-color:#D3D3D3;
	line-height:70px;
	position:fixed;
	bottom:60px;
	right:0;
	z-index:1;
}

footer a.gotoTop:hover{
	background-color:#000;
}

footer p.copy{
	line-height:100px;
	color:#fff;
}


/*フッター固定の設定*/

div#wrapper{
    margin: 0 auto;
	position: relative;
    min-height: 100%;
	
    height: auto !important;
    height: 100%;
}

html,body{
    height: 100%;
}

section#contents{
	padding-bottom:100px;
}

footer{
	position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
}

/*==============================*/

@media screen and (max-width:599px){
	
.menu-trigger{
	margin:24px 0 0 20px;	
}
	
/*メニューリスト*/

ul.nav,
ul.nav li a{
	font-size:1.5rem;
}

ul.nav{
	width:200px;
	height:200px;
	top:-10px;
	left:-300px;
}

ul.nav,
ul.nav li a{
	padding-left:28px;
	line-height:36px;
}

/*ナビゲーションのリストの前の円*/

ul.nav li a::after {
	top:15px;
	margin-left:24px;
}

/*メニューアイコンをクリックしたら*/
.nav.active{
	position:absolute;
	top:-10px;
	left:0px;
}

/*トップへ戻るボタンの設定*/

footer a.gotoTop{
	width:40px;
	height:55px;
	background-color:#D3D3D3;
	line-height:70px;
	position:fixed;
	bottom:60px;
	right:0;
	z-index:1;
}

/*コンテンツエリア全体の設定*/

h2{
	font-size:2.4rem;
}

h3{
	font-size:1.8rem;
	padding-bottom:15px;
}

h2.underPage{
	font-size:2rem;
	padding-bottom:15px;
}

.textB{
	font-size:1.2rem;
}

.textS{
	font-size:1rem;
	padding-bottom:40px;
}

/*タイトルのサイド装飾*/
.titleDeco::before,
.titleDeco::after{
	width:75px;
	height:1px;
}


/*フッターの設定*/

footer{
	width:100%;
	min-height:70px;
	margin:0 auto;
	background-color:#000;
	text-align:center;
	position:relative;
}

footer p.copy{
	line-height:70px;
	color:#fff;
}

section#contents{
	padding-bottom:0px;
}

/*フッター固定の設定*/

div#wrapper{
    margin: 0 auto;
	position: relative;
    min-height: 100%;
	
    height: auto !important;
    height: 100%;
}

html,body{
    height: 100%;
}

section#contents{
	padding-bottom:100px;
}

footer{
	position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
}	

}

@media screen and (max-width:320px){
	
h3{
	font-size:1.7rem;
	padding-bottom:15px;
}
	
h2.underPage{
	font-size:1.7rem;
	padding-bottom:15px;
}

/*GALLERY ボタン*/
.button {
	position:relative;
	display:inline-block;
	padding:.5em 2.7em;
	border:1.8px solid #000;
	color:#000;
	text-align:center;
	text-decoration:none;
	outline:none;
	overflow:hidden;
	font-size:1.2rem;
}

	
}