/*  common.css ---*/


/* common
-------------------------------------------------------------------------------------------------------*/
body { 
	color:#333;
	font-size:1rem;
	font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Avenir,'Helvetica Neue',Helvetica,Arial,"游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	line-height:180%;
	overflow-x:hidden;
}


/* header
-------------------------------------------------------------------------------------------------------*/
header {
	width:100%;
	z-index:1000;
	color:#FFFFFF;
	overflow:hidden;
	top:5%;
	background: #21261C;
}

/* nav
-------------------------------------------------------------------------------------------------------*/
nav li {
	float: left;
	border-right:1px solid #FFF;
	padding: 20px 36.5px 20px;
	text-align: center;
	font-weight: bold;
}
nav li:first-child {
	border-left: 1px solid #FFF;
}
nav {
	border-top:5px solid #FFF;
	margin: 50px 0 0;
}

nav a:hover {
	opacity: 0.8;
}

/* sp_navi
-------------------------------------------------------------------------------------------------------*/
/*ハンバーガーボタン*/
 
nav.globalMenuSp {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    text-align: left;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;
	padding:15.7% 0 0;
	color:#180102;
}

nav.globalMenuSp ul {
    background:#b3af74;
    margin: 0 auto;
    padding: 0;
    width: 100%;
	border-top:2px solid #FFF;
	font-size:1rem;
}

nav.globalMenuSp ul li {
    font-size: 1.1em;
    list-style-type: none;
	text-align:center;
	float:left;
    border-bottom: 2px solid #FFF;
	width:50%;
	margin:0;
}

nav.globalMenuSp ul li.end {
	border-left:2px solid #FFF;
	color:#FFF;
}

nav.globalMenuSp ul li:last-child a {
	color:#FFF;
}

nav.globalMenuSp ul li a {
    display: block;
    color:#180102;
    padding: 1em 0;
	text-decoration:none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    transform: translateY(0%);
}

.navToggle {
    display: block;
    position: fixed;/* bodyに対しての絶対位置指定 */
    right: 2%;
    top: 0.2%;
    width: 11%;
	cursor: pointer;
    z-index: 3000;
    text-align: center;
}

.navToggle span {
    display: block;
    position: absolute;/* .navToggleに対して */
    width: 30px;
    border-bottom: solid 3px #180102;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 6px;
}

.navToggle span:nth-child(1) {
    top: 9px;
}

.navToggle span:nth-child(2) {
    top: 18px;
}

.navToggle span:nth-child(3) {
    top: 27px;
}

.navToggle span:nth-child(4) {
    border: none;
	color:#180102;
    font-size: 11px;
    top: 29px;
}

/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}






/* main 
-------------------------------------------------------------------------------------------------------*/
#main {
	position:relative;
}

#main .slider li {
	height:100vh;
	width:100%;
	position:relative;
	overflow:hidden;
}

#main img {
	position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100.1%;
    height: auto;
}

#main a:hover { color:inherit; }

#scroll_cnt {
	margin-top:-80px;
	padding-top:80px;
}


/* content
-------------------------------------------------------------------------------------------------------*/
.container {
	width:100%;
}

.cnt {
	width:1200px;
	margin:0 auto;
	overflow:hidden;
}


/* footer
-------------------------------------------------------------------------------------------------------*/
footer {
	background: #21261C;
	color: #FFF;
	padding: 100px 0 30px;
	text-align: center;
}