@charset "UTF-8";

body{
	font-family: 'Noto Sans JP', sans-serif;
	font-size:1.0rem;
	line-height:1.75em;
	color:#000;
	
	background-color:#f0f0f0;
}

a{
	color:#f00;
	text-decoration: none;
}

a:hover{
	color:#f44;
	text-decoration: underline;
}

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

#header{
	width:100%;
	
	background-color:#000;
}

#header div.wrap{
	width:100%;
	margin:0 auto;
	max-width: 1080px;
	
	position: relative;
}

#header h1{
	position: fixed;
	top:0;
	left:0;
	
	width:120px;
	box-sizing: border-box;
	padding:2.5px;
	padding-right:5px;
	border-bottom-right-radius: 10px;
	
	background-color:#fff;
	color:#000;
}

#header h1 a{
	display:block;
}

#header h1 img{
	width:100%;
	vertical-align: bottom;
}

@media only screen and (min-width: 720px){
	
	#header h1{
		width:180px;
	}
	
}

#footer{
	width:100%;
	
	background-color:#fff;
}

#footer div.wrap{
	width:100%;
	margin:0 auto;
	max-width: 1080px;
	
	position: relative;
	
	box-sizing: border-box;
	padding:20px;
	
	padding-bottom:80px;
}

#footer p.logo{
	width:80%;
	margin:0 auto 20px;
	max-width:240px;
}

#footer p.logo a{
	display:block;
}

#footer p.logo a:hover{
	opacity: 0.8;
}

#footer p.logo img{
	width:100%;
	vertical-align: bottom;
}

#footer p.contact{
	width:80%;
	margin:0 auto 20px;
	max-width:320px;
}

#footer p.contact a{
	display:block;
}

#footer p.contact a:hover{
	opacity: 0.8;
}

#footer p.contact img{
	width:100%;
	vertical-align: bottom;
}

#footer p.caption{
	font-size:0.8rem;
	line-height:1.75em;
}

#footer address{
	font-size:0.6rem;
	line-height:1.75em;
	
	text-align: center;
	
	box-sizing: border-box;
	padding:10px 0;
}

@media only screen and (min-width: 720px){
	
	#footer p.caption{
		width:100%;
		margin:0 auto;
		max-width: 720px;
	}
	
}

/*//////////DROP-MENU_Style//////////*/

.drop-menu{
	position: fixed;
	top:25px;
	right:120px;
	
	/*width:90px;*/
}

.drop-menu label{
	display:block;
	cursor: pointer;
	
	width:70px;
	height:70px;
	
	/*background-color:#000;*/
	color:#fff;
	
	transform: rotate(45deg);
	
	position: absolute;
	top:-60px;
	left:-60px;
	
	box-sizing: border-box;
	border:solid 1px #fff;
	
	font-size:1.0rem;
	line-height:50px;
	
	padding:0 10px;
}

.drop-menu input{
	display: none;
}

.drop-menu span.close{
	display:block;
	
	width:70px;
	height:70px;
	
	font-size:0.6rem;
	line-height:1.5em;
	
	text-align: center;
	
	transform: rotate(-45deg);
	background-color:#00795a;
	
	position: absolute;
	top:-60px;
	left:-60px;
}

.drop-menu span.close:after{
	content:"Close";
	color:#fff;
	
	display:block;
	
	width:35px;
	height:35px;
	
	transform: rotate(45deg);
	
	position: absolute;
	top:30px;
	left: 5px;
	
	/*background-color:#44f;*/
	
	box-sizing: border-box;
	padding-top:17.5px;
	
	background-image: url("../images/icon-arrow-trigger-close.png");
	background-repeat: no-repeat;
	background-size: 15px;
	background-position:top 2.5px center;
}

.drop-menu span.open{
	display:block;
	
	width:70px;
	height:70px;
	
	font-size:0.6rem;
	line-height:1.5em;
	
	text-align: center;
	
	transform: rotate(-45deg);
	background-color:#00795a;
	
	position: absolute;
	top:-60px;
	left:-60px;
}

.drop-menu span.open:after{
	content:"Open";
	color:#fff;
	
	display:block;
	
	width:35px;
	height:35px;
	
	transform: rotate(45deg);
	
	position: absolute;
	top:30px;
	left: 5px;
	
	/*background-color:#44f;*/
	
	box-sizing: border-box;
	padding-top:5px;
	
	background-image: url("../images/icon-arrow-trigger-open.png");
	background-repeat: no-repeat;
	background-size: 15px;
	background-position:bottom 0 center;
}

.drop-menu ul{
	position: relative;
}

.drop-menu ul li{
	width:60px;
	height:60px;
	
	background-color:transparent;
	color:#000;
	
	transform: rotate(45deg);
	
	box-sizing: border-box;
	border:solid 1px #fff;
	padding:2.5px;
}

.drop-menu ul li a{
	display:block;
	background-color:#009678;
	color:#fff;
	
	width:52px;
	height:52px;
	
	transition:0.25s;
}

.drop-menu ul li a:hover{
	background-color:#00795a;
}

.drop-menu ul li span.note{
	display:block;
	
	font-size:0.6rem;
	line-height:1.25em;
	
	text-align: center;
	
	width:55px;
	height:55px;
	
	transform: rotate(-45deg);
	
	position: absolute;
	top:3.5px;
	left:3.5px;
	
	/*background-color:#f44;*/
	/*background-image: url("../images/icon-play.png");*/
	background-repeat: no-repeat;
	background-size: 15px;
	background-position:top 2.5px center;
	
	box-sizing: border-box;
	padding-top:20px;
}

.drop-menu ul li.first{
	position: absolute;
	top:0;
	left:-100px;
}

.drop-menu ul li.first span.note{
	background-image: url("../images/icon-play.png");
}

.drop-menu ul li.second{
	position: absolute;
	top:0;
	left:-10px;
}

.drop-menu ul li.second span.note{
	background-image: url("../images/icon-cast.png");
}

.drop-menu ul li.third{
	position: absolute;
	top:45px;
	left:-55px;
}

.drop-menu ul li.third span.note{
	background-image: url("../images/icon-diary.png");
}

.drop-menu ul li.fourth{
	position: absolute;
	top:45px;
	left:35px;
}

.drop-menu ul li.fourth span.note{
	background-image: url("../images/icon-calendar.png");
}

.drop-menu ul li.fifth{
	position: absolute;
	top:90px;
	left:-10px;
}

.drop-menu ul li.fifth span.note{
	background-image: url("../images/icon-price.png");
}

/*//////////DROP-MENU_Control//////////*/

.drop-menu input ~ span.open{
	opacity: 0;
}

.drop-menu input:checked ~ span.open{
	opacity: 1;
}

.drop-menu input ~ span.close{
	opacity: 1;
}

.drop-menu input:checked ~ span.close{
	opacity: 0;
}

.drop-menu input ~ div.menu-content{
	transition: 0.5s;
	
	position: absolute;
	top:0;
	left:0;
	
	opacity: 1;
}

.drop-menu input:checked ~ div.menu-content{
	position: absolute;
	top:-200px;
	left:0;
	
	opacity: 0;
}

/*//////////SLIDE-MENU_Style//////////*/

.slide-menu{
	position: fixed;
	top:0;
	right:0;
	
	/*width:100%;
	height:100%;*/
}

.slide-menu label{
	display:block;
	cursor: pointer;
	
	width:140px;
	height:140px;
	
	/*background-color:#c89600;*/
	color:#fff;
	
	transform: rotate(45deg);
	
	position: absolute;
	top:-70px;
	right:-80px;
	
	box-sizing: border-box;
	border:solid 1px #fff;
	
	font-size:1.0rem;
	line-height:50px;
	
	padding:0 10px;
}

.slide-menu input{
	display: none;
}

.slide-menu span.icon-menu{
	display:block;
	
	width:140px;
	height:140px;
	
	font-size:0.6rem;
	line-height:1.5em;
	
	text-align: center;
	
	transform: rotate(-45deg);
	/*background-color:#c89600;*/
	
	background:linear-gradient(top, #8c6400 0%, #c89600 25%, #eecb60 50%, #c89600 75%, #8c6400 100%);
	background: -webkit-linear-gradient(top, #8c6400 0%, #c89600 25%, #eecb60 50%, #c89600 75%, #8c6400 100%);
	background: -moz-linear-gradient(top, #8c6400 0%, #c89600 25%, #eecb60 50%, #c89600 75%, #8c6400 100%);
	background: -o-linear-gradient(top, #8c6400 0%, #c89600 25%, #eecb60 50%, #c89600 75%, #8c6400 100%);
	background: -ms-linear-gradient(top, #8c6400 0%, #c89600 25%, #eecb60 50%, #c89600 75%, #8c6400 100%);
	
	position: absolute;
	top:-70px;
	right:-80px;
}

.slide-menu span.icon-menu:after{
	content:"Menu";
	color:#fff;
	
	display:block;
	
	width:35px;
	height:45px;
	
	transform: rotate(45deg);
	
	position: absolute;
	top:40px;
	left: 12.5px;
	
	/*background-color:#44f;*/
	
	box-sizing: border-box;
	padding-top:30px;
	
	background-image: url("../images/icon-toggle.png");
	background-repeat: no-repeat;
	background-size: 20px;
	background-position:top 10px left 2.5px;
}

.slide-menu span.filter{
	background-color: rgba(0,0,0,0.80);
	
	width:100%;
	height:100%;
	
	position: fixed;
	top:0;
	left:0;
}

.slide-menu ul{
	position: fixed;
	top:0;
	left:0;
	
	width:240px;
	
	background-color:#fff;
	color:#000;
	
	height:100%;
	
	box-sizing: border-box;
	padding-top:50px;
}

.slide-menu ul li a{
	display:block;
	color:#c89600;
	
	font-size:0.8rem;
	line-height:1.75em;
	
	box-sizing: border-box;
	padding:10px;
	
	transition: 0.25s;
}

.slide-menu ul li a:hover{
	background-color:#c89600;
	color:#fff;
	
	text-decoration: none;
}

@media only screen and (min-width: 720px){
	.slide-menu ul{
		padding-top:90px;
	}
}

/*//////////SLIDE-MENU_Control//////////*/

.slide-menu input ~ span.icon-menu:after{
	content:"Menu";
	background-image: url("../images/icon-toggle.png");
}

.slide-menu input:checked ~ span.icon-menu:after{
	content:"Close";
	background-image: url("../images/icon-toggle-close.png");
}

.slide-menu input ~ span.filter{
	transition: 0.5s;	
	opacity: 0;
	
	left:-100%;
}

.slide-menu input:checked ~ span.filter{
	opacity: 1;
	
	left:0;
}

.slide-menu input ~ ul{
	transition: 0.5s;	
	left:-240px;
}

.slide-menu input:checked ~ ul{
	left:0;
}

/*//////////BOTTOM-MENU_Style//////////*/

.bottom-menu{
	position: fixed;
	bottom:0;
	right:0;
	
	width:100%;
}

.bottom-menu ul{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	
	width:100%;
}

.bottom-menu ul li{
	width:20%;
	
	font-size:0.6rem;
	line-height:20px;
	text-align: center;
}

.bottom-menu ul li a{
	display:block;
	
	box-sizing: border-box;
	padding:40px 0 10px;
	
	background-color: rgba(255,255,255,0.80);
	
	color:#c89600;
	
	background-repeat: no-repeat;
	background-size: 25px;
	background-position:top 10px center;
	
	transition: 0.25s;
}

.bottom-menu ul li a:hover{
	background-color: rgba(255,255,255,1.00);
	text-decoration: none;
}

.bottom-menu ul li.first a{
	background-image: url("../images/icon-line.png");
}

.bottom-menu ul li.second a{
	background-image: url("../images/icon-hotel.png");
}

.bottom-menu ul li.third a{
	background-image: url("../images/icon-rule.png");
}

.bottom-menu ul li.fourth a{
	background-image: url("../images/icon-reserve.png");
}

.bottom-menu ul li.fifth a{
	background-image: url("../images/icon-recruit.png");
}

@media only screen and (min-width: 720px){
	
	.bottom-menu{
		position: fixed;
		right:0;
		top:0;
		
		width:80px;
		height:100%;
		
		display:flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: center;
	}
	
	.bottom-menu ul{
		display:block;
	}
	
	.bottom-menu ul li{
		width:100%;
		height:60px;
		
		margin:5px 0;
	}
	
	.bottom-menu ul li a{
		border-bottom-left-radius: 5px;
		border-top-left-radius: 5px;
		
		width:100%;
		height:100%;
		
		background-size: 25px;
		background-position:top 10px center;
		
		background-color: rgba(255,255,255,1.00);
	}
	
	.bottom-menu ul li a:hover{
		background-color: rgba(255,255,255,0.80);
	}
	
}

/*//////////BTN_FIX//////////*/

.btn_fix_phone{
	position: fixed;
	bottom:120px;
	right:0;
	
	width:70px;
	height:70px;
	
	box-sizing: border-box;
	text-align: center;
	padding-left:10px;
	
	background:linear-gradient(top, #8c6400 0%, #ffbe00 25%, #ffdc82 50%, #c89600 75%, #8c6400 100%);
	background: -webkit-linear-gradient(top, #8c6400 0%, #ffbe00 25%, #ffdc82 50%, #c89600 75%, #8c6400 100%);
	background: -moz-linear-gradient(top, #8c6400 0%, #ffbe00 25%, #ffdc82 50%, #c89600 75%, #8c6400 100%);
	background: -o-linear-gradient(top, #8c6400 0%, #ffbe00 25%, #ffdc82 50%, #c89600 75%, #8c6400 100%);
	background: -ms-linear-gradient(top, #8c6400 0%, #ffbe00 25%, #ffdc82 50%, #c89600 75%, #8c6400 100%);
	
	border-bottom-left-radius: 50px;
	border-top-left-radius: 50px;
	
	font-size:0.6rem;
	line-height:20px;
	
	display:flex;
	align-items: center;
	justify-content: center;
}

.btn_fix_phone a{
	display:block;
	color:#fff;
}

.btn_fix_phone a:hover{
	opacity: 0.6;
	text-decoration: none;
}

.btn_fix_phone img{
	display:block;
	width:20px;
	margin:0 auto 2.5px;
}

.btn_fix_twitter{
	position: fixed;
	bottom:120px;
	left:0;
	width:70px;
	height:70px;
	box-sizing: border-box;
	text-align: center;
	padding-right:10px;
	background-color: black;
	border-bottom-right-radius: 50px;
	border-top-right-radius: 50px;
	font-size:0.6rem;
	line-height:20px;
	display:flex;
	align-items: center;
	justify-content: center;
}

.btn_fix_twitter a{
	display:block;
	color:#fff;
}

.btn_fix_twitter a:hover{
	opacity: 0.6;
	text-decoration: none;
}

.btn_fix_twitter img{
	display:block;
	width:20px;
	margin:0 auto 2.5px;
}

@media only screen and (min-width: 720px){
	
	.btn_fix_twitter{
		bottom:160px;
		
		border-bottom-right-radius: 5px;
		border-top-right-radius: 5px;
		
		padding-left:0;
		padding-right:0;
	}
	
	.btn_fix_phone{
		bottom: 320px;
		left:0;
		border-bottom-right-radius: 5px;
		border-top-right-radius: 5px;
		border-bottom-left-radius: 0;
		border-top-left-radius: 0;
		padding-left:0;
		padding-right:0;
	}
	
}

/*//////////Z-INDEX//////////*/

#header h1{
	z-index: 40;
}

.drop-menu{
	z-index: 10;
}

.drop-menu label{
	z-index: 40;
}

.drop-menu span.icon-menu{
	z-index: 30;
}

.drop-menu ul{
	z-index: 20;
}

.slide-menu{
	z-index: 10;
}

.slide-menu label{
	z-index: 40;
}

.slide-menu span.icon-menu{
	z-index: 30;
}

.slide-menu span.filter{
	z-index: 20;
}

.slide-menu ul{
	z-index: 30;
}

.bottom-menu{
	/*z-index: -10;*/
}