@charset "utf-8";
/*
001: Header Block
002: Navigation Btn Block
003: Navigation Menu Block
004: Header SP Block
005: Header PC Block
006: Footer Block
007: Bottom Menu Block
*/

/*---------------------------------------
	001: Header Block
---------------------------------------*/
#header {
	position					: fixed;
	top							: 0;
	display						: block;
	background					: #FFF;
	width						: 100%;
	height						: 60px;
	margin						: 0;
	padding						: 0;
	-moz-transition				: all 0.6s;
	-o-transition				: all 0.6s;
	-webkit-transition			: all 0.6s;
	transition					: all 0.6s;
	box-shadow					: 0px 3px 3px rgba(30,30,30, 0.1);
	z-index						: 10;
}
#logo {
	display						: block;
	font-size					: 18px;
	font-size					: 1.8rem;
	margin						: 0;
	padding						: 8px 0 0 10px;
	text-align					: left;
	z-index						: 1
}
#logo img {
	margin						: 0;
	padding						: 0;
	vertical-align				: middle;
	text-align					: center;
}
#logo a {
	color						: #dcc592;
}


/*---------------------------------------
	004: Header SP Block
---------------------------------------*/
ul#header_sp_content {
	position					: absolute;
	right						: 70px;
	top							: 10px;
	font-size					: 13px;
	font-size					: 1.3rem;
    font-weight					: 300;
	text-align					: right;
}
ul#header_sp_content li#hfc,
ul#header_sp_content li#hfc a {
	color						: #727288;
}
ul#header_sp_content li .s_hf {
	font-size					: 8px;
	font-size					: 0.8rem;
    font-weight					: 500;
}


/*---------------------------------------
	005: Header PC Block
---------------------------------------*/
#header_pc_content {
	display						: none;
}


/*---------------------------------------
	006: Footer Block
---------------------------------------*/
#footer {
	position					: relative;
	padding-top					: 30px;
	padding-bottom				: 15px;
    background					: #f4f5f7;
	z-index						: 1;
}
.footer_box {
	padding-left				: 0;
	padding-right				: 0;
}
.footer_box:nth-child(n+3) {
	display						: none;
}
#footer_logo {
	text-align					: center;
	margin-top					: 10px;
	margin-bottom				: 10px;
	padding-bottom				: 0;
}
#footer_logo img {
	width						: 100%;
	max-width					: 140px;
	height						: auto;
}
h4.footer_title {
	font-size					: 16px;
	font-size					: 1.6rem;
	font-weight					: 300;
	text-align					: center;
	letter-spacing				: 1px;
	color						: #525263;
	line-height					: 60px;
	height						: 60px;
	margin-top					: 0;
	margin-bottom				: 0;
	padding-left				: 15px;
	padding-right				: 15px;
}
ul.footer_list {
	margin-bottom				: 30px;
	padding-left				: 0;
	padding-right				: 0;
}
ul.footer_list li {
	font-size					: 14px;
	font-size					: 1.4rem;
	font-weight					: 300;
	text-align					: center;
	letter-spacing				: 1px;
	color						: #666;
	line-height					: 30px;
	height						: 30px;
	padding					     : 5px 15px;
}
ul.footer_list li a {
	display						: block;
	color						: #666;
}
ul.footer_list li a:hover {
	text-decoration				: underline;
}
#copyright {
	font-size					: 13px;
	font-size					: 1.3rem;
	font-weight					: 300;
	text-align					: center;
	color						: #666;
	margin-top					: 15px;
	margin-bottom				: 85px;
}


/*---------------------------------------
	007: Bottom Menu Block
---------------------------------------*/
#bottom_menu {
	position					: fixed;
	bottom						: 0;
	left						: 0;
	right						: 0;
	background					: rgba(255,255,255,0.95);
	height						: 60px;
	padding-left				: 10px;
	padding-right				: 10px;
	z-index						: 2;
}
#menu_navigation {
	display						: flex;
	width						: 100%;
	list-style					: none;
	padding						: 0;
}
#menu_navigation li {
	width						: 20%;
	text-align					: center;
	border-right				: 1px solid #dedede;
}
#menu_navigation li:first-child {
	border-left				   	: 1px solid #dedede;
}
#menu_navigation img {
	width						: 24px;
	height						: 24px;
	margin-top					: 8px;
	margin-bottom				: 5px;
}
#menu_navigation li a {
	display						: block;
	font-size					: 11px;
	font-size					: 1.1rem;
	color						: #525263;
	height						: 60px;
	-moz-transition				: all 0.6s;
	-o-transition				: all 0.6s;
	-webkit-transition			: all 0.6s;
	transition					: all 0.6s;
}
#menu_navigation li a:hover {
	background					: rgba(222,222,222,0.9);
	text-decoration				: none;
}




@media only screen and (min-width: 768px) {
/*---------------------------------------
	007: Bottom Menu Block
---------------------------------------*/
#bottom_menu {
	display						: none;
}
}




@media only screen and (max-width: 1199px) {
/*---------------------------------------
	004: Navigation Block
---------------------------------------*/
#logo img {
	width						: 160px;
	height						: auto;
}


#btn_block {
	position					: fixed;
	top							: 0;
	right						: 0;
	background-image			: -webkit-linear-gradient(left, #525263, #727288);
	background-image			: -o-linear-gradient(left, #525263, #727288);
	background-image			: linear-gradient(right, #525263, #727288);
	width						: 60px;
	height						: 60px;
	z-index						: 10;
}
#btn_block.active {
	background					: transparent;
}
#btn_menu{
    position					: absolute;
    right						: 15px;
    top							: 20px;
    width						: 28px;			/*30px*/
    height						: 18px;
    z-index						: 10;
}
#btn_menu span {
	background					: #FFF;
    display						: block;
    height						: 1px;
    position					: absolute;
    transition					: transform .3s;
    width						: 100%;
}
#btn_menu span:nth-of-type(2) {
    top							: 8px;
    width						: 60%;
}
#btn_menu span:nth-of-type(3){
    bottom						: 0;
    width						: 100%;
}
#btn_menu span.active:nth-of-type(1){
    top							: 8px;
    transform					: rotate(45deg);
	background					: #fff !important;
}
#btn_menu span.active:nth-of-type(2){
    transform					: scaleX(0);
}
#btn_menu span.active:nth-of-type(3){
	background					: #fff !important;
    bottom						: 8px;
    transform					: rotate(135deg);
}
/*gnav*/
#category {
    display						: none;
    position					: fixed;
	top							: 0;
	right						: 0;
	bottom						: 0;
	left						: 0;
    width						: 100%;
    height						: 100%;
    background					: rgba(32,32,49,0.95);
	overflow-y					: scroll;
    z-index						: 10;
}
#category_block {
	overflow					: hidden;
}
ul#category_navi {
	display						: -ms-flexbox;
	display						: flex;
	-ms-flex-wrap				: wrap;
	flex-wrap					: wrap;
    width						: 100%;
	padding						: 60px 20px;
}
ul#category_navi li#menu_logo {
    width						: 100% !important;
	text-align					: center;
	margin-bottom				: 60px;
}
ul#category_navi li#menu_logo img {
	width						: 160px;
	height						: auto;
	filter						: brightness(0) invert(1);
}
ul#category_navi li.navigation {
	position					: relative;
    width						: 45%;
}
ul#category_navi li.navigation:before {
    content						: '';
    width						: 6px;
    height						: 6px;
    border						: 0;
    border-top					: solid 1px #AAA;
    border-right				: solid 1px #AAA;
    -ms-transform				: rotate(45deg);
    -webkit-transform			: rotate(45deg);
    transform					: rotate(45deg);
    position					: absolute;
    top							: 50%;
    right						: 20px;
    margin-top					: -4px
}
ul#category_navi li.navigation:nth-child(2n+2) {
	margin-right				: 10%;
}
ul#category_navi li:last-child {
	margin-bottom				: 0;
}
ul#category_navi li.navigation a {
	display						: block;
	font-size					: 12px;
    font-size					: 1.2em;
	border-bottom				: 1px solid #AAA;
    font-weight					: 300;
    text-decoration				: none;
	letter-spacing				: 1px;
    color						: #fff;
	height						: 60px;
	line-height					: 60px;
	padding-left				: 10px;
    transition					: .2s;
}
ul#category_navi li a:hover{
    color						: #AAA;
}
ul#navi_link {
	display						: -ms-flexbox;
	display						: flex;
	-ms-flex-wrap				: wrap;
	flex-wrap					: wrap;
    width						: 100%;
	margin						: 0 0 30px 0;
	padding						: 0 20px;
}
ul#navi_link li {
	text-align					: center;
    width						: 30%;
	margin-right				: 5%;
}
ul#navi_link li:last-child {
	margin-right				: 0;
}
ul#navi_link li a,
ul#navi_link li a:hover {
    color						: #FFF;	
}
#menu_contact,
#menu_reservation,
#menu_card {
	position					: relative;
	display						: block;
	color						: #FFF;
	padding-top					: 28px;
	padding-bottom				: 8px;
}
#menu_contact {
	background					: #85b4ab;
}
#menu_contact:before {
	display						: block;
	position					: absolute;
	top							: 10px;
	right						: 0;
	left						: 0;
	background					: url("../images/svg/navi/contact.svg") no-repeat center top / 15px 15px;
	width						: 15px;
	height						: 15px;
	margin						: 0 auto;
	content						: "";
}
#menu_contact:hover {
	background					: #93c6bc;
}
#menu_reservation {
	background					: #a77791;
}
#menu_reservation:before {
	display						: block;
	position					: absolute;
	top							: 10px;
	right						: 0;
	left						: 0;
	background					: url("../images/svg/navi/reservation.svg") no-repeat center top / 15px 15px;
	width						: 15px;
	height						: 15px;
	margin						: 0 auto;
	content						: "";
}
#menu_reservation:hover {
	background					: #bd87a4;
}
#menu_card {
	background					: #b1a08e;
}
#menu_card:before {
	display						: block;
	position					: absolute;
	top							: 10px;
	right						: 0;
	left						: 0;
	background					: url("../images/svg/navi/card.svg") no-repeat center top / 15px 15px;
	width						: 15px;
	height						: 15px;
	margin						: 0 auto;
	content						: "";
}
#menu_card:hover {
	background					: #bdab99;
}
#info_box {
	margin-bottom				: 60px;	
}
#info_box p {
	font-size					: 15px;
    font-size					: 1.5em;
	font-weight					: 300;
	color						: #FFF;
	text-align					: center;
}
#info_box p a {
	color						: #FFF;
}
.fixed {
	position					: fixed;
	width						: 100%;
	height						: 100%;
	z-index						: 1
}
}





@media only screen and (min-width: 1200px) {
/*---------------------------------------
	001: Header Block
---------------------------------------*/
#header {
	height						: auto;
	background					: transparent;
	margin						: 40px 0 0 0;
	box-shadow					: none;
}
#header.is_work {
	height						: 60px;
	background					: #FFF;
	margin						: 0;
	box-shadow					: 0px 3px 3px rgba(30,30,30, 0.1);
}
#header,
#header.is_work {
	display						: block;
	width						: 100%;
	padding						: 0;
	-moz-transition				: all 0.6s;
	-o-transition				: all 0.6s;
	-webkit-transition			: all 0.6s;
	transition					: all 0.6s;
	z-index						: 10;
}
#header #logo {
	display						: block;
	font-size					: 18px;
	font-size					: 1.8rem;
	margin						: 0;
	padding						: 17px 0 0 10px;
	text-align					: left;
	-moz-transition				: all 0.6s;
	-o-transition				: all 0.6s;
	-webkit-transition			: all 0.6s;
	transition					: all 0.6s;
}
#header #logo img {
	vertical-align				: middle;
	text-align					: left;
	max-width					: 100%;
	width						: 170px;
	height						: auto;
	margin						: 0;
	padding						: 0;
}
#header #logo a {
	color						: #FFF;
}
#header.is_work #logo {
	display						: block;
	font-size					: 18px;
	font-size					: 1.8rem;
	margin						: 0;
	padding						: 8px 0 0 10px;
	text-align					: left;
	-moz-transition				: all 0.6s;
	-o-transition				: all 0.6s;
	-webkit-transition			: all 0.6s;
	transition					: all 0.6s;
	z-index						: 10;
}


/*---------------------------------------
	002: Navigation Btn Block
---------------------------------------*/
#btn_menu,
#menu_logo,
#navi_link,
#info_box {
	display						: none;
}

    
/*---------------------------------------
	003: Navigation Menu Block
---------------------------------------*/
#category {
	display						: block !important;
}
#category_navi {
	border-top					: none;
	margin-top					: 10px;
	padding-left				: 0px;
	transition					: all 0.3s;
	float						: right;
}
.is_work #category_navi {
	border-top					: none;
	margin-top					: 0px;
	padding-left				: 0px;
	transition					: all 0.3s;
}
ul#category_navi {
	display						: flex;
	justify-content				: flex-end;
	align-items					: center;
	list-style					: none;
}
ul#category_navi li a {
	color						: #525263;
	padding						: 10px 8px 0 8px;
}
#header.is_work ul#category_navi li a {
	color						: #525263;
	padding						: 22px 8px 0 8px;
}
ul#category_navi li a,
#header.is_work ul#category_navi li a {
	display						: block;
	font-family					: "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size					: 13px;
	font-size					: 1.3rem;
	font-weight					: 400;
	letter-spacing				: 1px;
	line-height					: normal;
	border-bottom				: 0 none;
	overflow					: hidden;
	text-overflow				: ellipsis;
	white-space					: nowrap;
/*
	text-transform						: uppercase;
*/
	margin-top					: 0;
	margin-bottom				: 0;
}
ul#category_navi li a:hover,
ul#category_navi li a.active,
#header.is_work ul#category_navi li a.active {
	color						: #727288 !important;
	text-decoration				: none;
}
ul#category_navi li a:after {
	content						: '';
	width						: 0;
	transition					: all .3s ease;
	border-bottom				: 1px solid #727288;
	display						: block
}
ul#category_navi li a:hover:after {
	width						: 100%;
	border-bottom				: 1px solid #727288
}


/*---------------------------------------
	004: Header SP Block
---------------------------------------*/
ul#header_sp_content {
	display						: none;
}


/*---------------------------------------
	005: Header PC Block
---------------------------------------*/
#header_pc_content {
	display						: block;
	width						: 100%;
}
.is_work #header_pc_content {
	display						: none;
}
ul#header_pc_content {
	display						: flex;
	justify-content				: flex-end;
	align-items					: center;
	list-style					: none;
}
.pc_header_tel {
	font-family					: Times New Roman, Times, serif;
	font-size					: 20px;
	font-size					: 2rem;
	font-weight					: 400;
	letter-spacing				: 1px;
	color						: #525263;
	text-align					: right;
	margin-right				: 15px;
	-webkit-font-smoothing		: antialiased;
	-moz-osx-font-smoothing		: grayscale;
}
.pc_header_tel a {
	position					: relative;
	display						: inline-block;
	transition					: .3s;
	color						: #525263
}
.pc_header_tel a:after {
	position					: absolute;
	bottom						: 13px;
	left						: 0;
	content						: '';
	width						: 0;
	height						: 1px;
	background					: #525263;
	transition					: .3s
}
.pc_header_tel a:hover:after {
	width						: 100%
}
/*Contact BTN*/
.pc_header_contact {
	display						: block;
	width						: 100px;
}
.hc_btn {
	position					: relative;
	font-size					: 10px;
	font-size					: 1rem;
	display						: inline-block;
	width						: 100%;
	text-align					: center;
	text-decoration				: none;
	height						: 26px;
	line-height					: 26px;
	outline						: 0;
	z-index						: 2;
	border						: 1px solid #525263;
	color						: #525263
}
.hc_btn:after,
.hc_btn:before {
	display						: block;
	position					: absolute;
	z-index						: -1;
	content						: ''
}
.hc_btn,
.hc_btn:after,
.hc_btn:before {
	-webkit-box-sizing			: border-box;
	-moz-box-sizing				: border-box;
	box-sizing					: border-box;
	-webkit-transition			: all .3s;
	transition					: all .3s
}
.hc_btn:hover {
	background					: #525263;
	border						: 1px solid #525263;
	color						: #FFF
}
.hc_btn:after, .hc_btn:before {
	top							: 0;
	width						: 50%;
	height						: 100%
}
.hc_btn:before {
	right						: 0
}
.hc_btn:after {
	left						: 0
}
.hc_btn:hover:after,
.hc_btn:hover:before {
	width						: 0;
	background					: #FFF
}


/*---------------------------------------
	006: Footer Block
---------------------------------------*/
#footer {
	position					: relative;
	padding-top					: 30px;
	padding-bottom				: 30px;
    background					: #f4f5f7;
}
.footer_box:nth-child(n+3) {
	display						: block;
}
#footer_logo {
	display						: block;
	text-align					: left;
	margin-top					: 0px;
	margin-bottom				: 10px;
}
#footer_logo img {
	width						: 100%;
	max-width					: 140px;
	height						: auto;
}
.footer_block {
	display						: block;
	margin-bottom				: 0;
	margin-top					: 0;
}
.footer_block:nth-child(n+3) {
	display						: block;
}
h4.footer_title {
	font-size					: 14px;
	font-size					: 1.4rem;
	font-weight					: 300;
	text-align					: left;
	color						: #525263;
	line-height					: 24px;
	height						: 24px;
	margin-top					: 5px;
	margin-bottom				: 0;
}
ul.footer_list {
	margin-bottom				: 20px;
	padding-left				: 0;
	padding-right				: 0;
}
ul.footer_list li {
	font-size					: 13px;
	font-size					: 1.3rem;
	font-weight					: 300;
	text-align					: left;
	color						: #666;
	line-height					: 30px;
	height						: 30px;
	padding-left				: 15px;
	padding-right				: 15px;
}
ul.footer_list > li > a:before {
	content						: " - ";
	font-size					: 10px;
	font-size					: 1.0rem;
	font-weight					: 400;
	color						: #666;
}
#copyright {
	font-size					: 13px;
	font-size					: 1.3rem;
	font-weight					: 300;
	text-align					: center;
	color						: #666;
	margin-top					: 15px !important;
	margin-bottom				: 0px !important;
}
}