@charset "UTF-8";

/* CSS Document */
body {
	margin: 0;
	padding: 0;
	border: 0;
	color: #000000;
	font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック', '游ゴシック体', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ ゴシック', 'MS Gothic', HiraKakuProN-W3, 'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar', 'Droid Sans Japanese', sans-serif;
	background-color: #f5f5f4;
	font-size: 14px;
	letter-spacing: 1px;
	width: 100%;
}

.container {
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
}

/* ==================================================
common
===================================================== */
.clear {
	display: block;
	clear: both;
	height: 0;
	margin: 0;
	padding: 0;
	font-size: 0px;
	line-height: 0px;
}

.fweight {
	font-weight: 500;
}

.center {
	text-align: center;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.a_tag {
	text-decoration: none;
}

.mb_120 {
	margin-bottom: 120px;
}

.mt_44 {
	margin-top: 44px;
}

.line_1 {
	width: 100%;
	height: 2px;
	background: url(../img/line1.png) no-repeat center;
}

.line_2 {
	width: 100%;
	height: 1px;
	background: url(../img/line2.png) no-repeat center;
}

.marginlr50 {
	width: calc(100% - 100px);
	margin: 0 50px;
}

.btn {
	width: 52px;
	height: 29px;
	background: url(../img/btn.png) no-repeat center;
	cursor: pointer;
}

.back_btn {
	width: 52px;
	height: 29px;
	background: url(../img/b_btn.png) no-repeat center;
	cursor: pointer;
}

.btn_list {
	width: 134px;
	height: 29px;
	background: url(../img/btn_list.png) no-repeat center;
	cursor: pointer;
}

.btn_b_list {
	width: 74px;
	height: 29px;
	background: url(../img/btn_b_list.png) no-repeat center;
	cursor: pointer;
}


/* ==================================================
side bar
===================================================== */
.sidebar {
	width: 250px;
}

.sidebar_box {
	width: 95px;
	height: 100%;
	margin: 0 50px;
}

.sidebar_menu {
	width: 100%;
}

.sidebar_menu img {
	margin-top: 75px;
	width: 95px;
}

.sidebar_img {
	width: 100%;
}

.sidebar_img img {
	margin-top: 55px;
	width: 95px;
}

.sidebar_back {
	width: 100%;
	height: 25px;
	margin-top: 50px;
}

/* ==================================================
header-top
===================================================== */
	.top_header{
		float: left;
		width: 100%;
	}
	.logo{
		width: calc(55% - 20px);
		height: auto;
		margin: 10px;
		aspect-ratio: 449 / 107;
		background: url(../img/logo.png?q=1) no-repeat center;
		background-size: contain;
	}
	.eigyo_text{
		width: 100%;
		width: calc(20% - 20px);
		margin: 25px 50px;
	}
	.undon{
		width: 100%;
		height: auto;
		line-height: normal;
		font-size: 1.2rem;
		padding-left: 0px;
		font-weight: normal;
		letter-spacing: 0;
	}
	.eigyou{
		width: 100%;
		height: auto;
		padding-left: 0px;
		font-size: 1.2rem;
    	letter-spacing: 0px;
	}

.mensaibou {
	width: 182px;
	height: 185px;
	background: url(../img/mensaibou.png) no-repeat center;
	background-position: 0px 62px;
}

/* ==================================================
header-menu
===================================================== */
.header-menu {
	width: calc(100% - 20px);
	height: 87px;
	padding: 0 10px;
}

#home, #menu, #info, #photo, #room,
#cook, #cafe, #access, #recruit, #shop {
	width: 147px;
	height: 100%;
	cursor: pointer;
}

.tit_jp {
	width: 100%;
	height: 42px;
	line-height: 66px;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}

.tit_en {
	width: 100%;
	height: 40px;
	line-height: 39px;
	font-size: 11px;
	text-align: center;
}

#home {
	width: 124px;
}

#shop {
	width: 122px;
}

/* ==================================================
footer
===================================================== */
#pagetop {
	position: fixed;
	right: 100px;
	bottom: 55px;
	border-radius: 6px;
	width: 80px;
	height: 60px;
	padding: 10px;
	line-height: 60px;
	background-color: #2a2a2a;
	opacity: 0.6;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
	cursor: pointer;
	z-index: 9999;
}

.footer {
	width: 100%;
}

.footer_wrapper {
	max-width: 1478px;
	width: 100%;
	height: 559px;
	margin: 0 auto;
}

.f_address {
	width: 666px;
	height: calc(100% - 163px);
	margin-top: 163px;
}

.f_add_logo {
	width: 86px;
	height: 66px;
	background: url(../img/f_address.png) no-repeat left;
}

.f_text {
	width: 340px;
	height: 222px;
	padding-top: 9px;
}

.f_text ul {
	width: 100%;
	height: 100%;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.f_text ul li {
	width: 100%;
	font-size: 15px;
}

.f_text ul .f_text_tit {
	font-size: 22px;
	font-weight: bold;
	line-height: 45px;
}

.f_text ul .f_text_add {
	padding-top: 5px;
	padding-bottom: 28px;
}

.f_logo {
	width: 327px;
	height: 100%;
	padding-top: 10px;
	background: url(../img/f_logo.png) no-repeat left;
}

.f_menu {
	width: 448px;
	height: 120px;
	margin-top: 183px;
}

#f_home, #f_menu, #f_info, #f_photo, #f_room,
#f_cook, #f_cafe, #f_access, #f_recruit, #f_shop {
	width: 46px;
	height: 100%;
	cursor: pointer;
}

#f_home {
	background: url(../img/footer_menu/home.png) no-repeat top left;
}

#f_menu {
	width: 39px;
	background: url(../img/footer_menu/menu.png) no-repeat top left;
}

#f_info {
	background: url(../img/footer_menu/info.png) no-repeat top center;
}

#f_photo {
	background: url(../img/footer_menu/photo.png) no-repeat top center;
}

#f_room {
	background: url(../img/footer_menu/room.png) no-repeat top center;
}

#f_cook {
	background: url(../img/footer_menu/cook.png) no-repeat top center;
}

#f_cafe {
	background: url(../img/footer_menu/cafe.png) no-repeat top center;
}

#f_access {
	background: url(../img/footer_menu/access.png) no-repeat top center;
}

#f_recruit {
	background: url(../img/footer_menu/recruit.png) no-repeat top center;
}

#f_shop {
	width: 36px;
	background: url(../img/footer_menu/shop.png) no-repeat top right;
}

.copyright {
	width: 100%;
	height: 120px;
	background: url(../img/copyright.png) no-repeat center;
}

/* ==================================================
condition pc 
===================================================== */
.sp_hide {
	display: block;
}

.pc_hide {
	display: none;
}

/* ==================================================
resposive
===================================================== */

@media (min-width: 1025px) and (max-width: 1478px) {
	/* ==================================================
	footer
	===================================================== */
	.footer_wrapper {
		width: 96%;
		margin: 0 auto;
	}
	.f_address {
		width: 440px;
		height: calc(100% - 163px);
		margin-top: 163px;
	}

	.f_logo {
		width: calc(100% - 440px - 448px);
		height: 100%;
		padding-top: 10px;
		background: url(../img/f_logo.png) no-repeat center;
	}

	.f_menu {
		width: 448px;
		height: 150px;
		margin-top: 183px;
	}
}
@media (min-width: 1024px) and (max-width: 1324px) {
	.container {
		width: 94%;
		min-width: initial;
		min-width: auto;
	}

	/* ==================================================
	top header
	===================================================== */
	.top_header {
		float: left;
		width: 100%;
		height: 11vw;
	}

	.logo {
		width: calc(40% - 20px);
		height: 11vw;
		aspect-ratio: 449 / 107;
		background: url(../img/logo.png) no-repeat center;
		background-size: contain;
	}

	.eigyo_text {
		width: calc(30% - 20px);
		margin-top: 1vw;
		margin-left: 4vw;
	}

	.undon {
		width: 100%;
		height: auto;
		line-height: 2vw;
		font-size: 1.5vw;
		padding-left: 0px;
		letter-spacing: 0;
	}

	.eigyou {
		width: 100%;
		height: auto;
		padding-left: 0px;
		line-height: 2.0vw;
		font-size: 1.5vw;
		letter-spacing: 0px;
		padding-top: initial;
	}

	.mensaibou {
		width: 182px;
		height: 11vw;
		aspect-ratio: 183 / 83;
		background: url(../img/mensaibou.png) no-repeat center;
		background-size: contain;
	}

	/* ==================================================
	header-menu
	===================================================== */
	.header-menu {
		width: calc(100% - 20px);
		height: 87px;
		padding: 0 10px;
	}

	#home, #menu, #info, #photo, #room,
	#cook, #cafe, #access, #recruit, #shop {
		width: 10.4vw;
		height: 100%;
		cursor: pointer;
	}

	.tit_jp {
		width: 100%;
		height: 42px;
		line-height: 66px;
		text-align: center;
		font-size: 1.4vw;
		font-weight: bold;
	}

	.tit_en {
		width: 100%;
		height: 40px;
		line-height: 39px;
		font-size: 1vw;
		text-align: center;
	}

	#home {
		width: 9vw;
	}

	#shop {
		width: 8.8vw;
	}

	/* ==================================================
	footer
	===================================================== */
	#pagetop {
		position: fixed;
		right: 100px;
		bottom: 55px;
		border-radius: 6px;
		width: 80px;
		height: 60px;
		padding: 10px;
		line-height: 60px;
		background-color: #2a2a2a;
		opacity: 0.6;
		font-size: 14px;
		text-align: center;
		color: #ffffff;
		cursor: pointer;
		z-index: 9999;
	}

	.footer {
		width: 100%;
	}

	.footer_wrapper {
		width: 96%;
		height: 559px;
		margin: 0 auto;
	}

	.f_address {
		width: 350px;
		height: calc(100% - 163px);
		margin-top: 163px;
	}

	.f_add_logo {
		width: 100%;
		height: 66px;
		background: url(../img/f_address.png) no-repeat center;
	}

	.f_text {
		width: 340px;
		height: 222px;
		padding-top: 9px;
	}

	.f_text ul {
		width: 100%;
		height: 100%;
		list-style: none;
		padding: 0px;
		margin: 0px;
	}

	.f_text ul li {
		width: 100%;
		font-size: 15px;
	}

	.f_text ul .f_text_tit {
		font-size: 22px;
		font-weight: bold;
		line-height: 45px;
	}

	.f_text ul .f_text_add {
		padding-top: 5px;
		padding-bottom: 28px;
	}

	.f_logo {
		width: 32%;
		height: 100%;
		padding-top: 10px;
		background: url(../img/f_logo.png) no-repeat center;
	}

	.f_menu {
		width: calc(100% - 350px - 32%);
		height: 150px;
		margin-top: 183px;
	}

	#f_home, #f_menu, #f_info, #f_photo, #f_room,
	#f_cook, #f_cafe, #f_access, #f_recruit, #f_shop {
		width: 46px;
		height: 100%;
		cursor: pointer;
	}

	#f_home {
		background: url(../img/footer_menu/home.png) no-repeat top center;
	}

	#f_menu {
		width: 39px;
		background: url(../img/footer_menu/menu.png) no-repeat top center;
	}

	#f_info {
		background: url(../img/footer_menu/info.png) no-repeat top center;
	}

	#f_photo {
		background: url(../img/footer_menu/photo.png) no-repeat top center;
	}

	#f_room {
		background: url(../img/footer_menu/room.png) no-repeat top center;
	}

	#f_cook {
		background: url(../img/footer_menu/cook.png) no-repeat top center;
	}

	#f_cafe {
		background: url(../img/footer_menu/cafe.png) no-repeat top center;
	}

	#f_access {
		background: url(../img/footer_menu/access.png) no-repeat top center;
	}

	#f_recruit {
		background: url(../img/footer_menu/recruit.png) no-repeat top center;
	}

	#f_shop {
		width: 36px;
		background: url(../img/footer_menu/shop.png) no-repeat top right;
	}

	.copyright {
		width: 100%;
		height: 120px;
		background: url(../img/copyright.png) no-repeat center;
	}
}

@media (max-width : 768px) {
	html, body {
		min-width: initial;
		min-width: auto;
		padding: 0;
		margin: 0 auto;
		letter-spacing: 0.5px;
	}

	.container {
		width: 94%;
		min-width: initial;
		min-width: auto;
	}

	.sp_container {
		width: 100%;
		min-width: initial;
		min-width: auto;
	}

	#pagetop {
		position: fixed;
		right: 10px;
		bottom: 55px;
		cursor: pointer;
		opacity: 0.8;
	}

	.sp_hide {
		display: none;
	}

	.pc_hide {
		display: block;
	}

	.btn_list {
		width: 95px;
		height: 40px;
		background: url(../img/sp/btn_list.png) no-repeat center;
		cursor: pointer;
	}
}

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

	/* ==================================================
	sp common
	===================================================== */
	.sp_mt3 {
		margin-top: 3px;
	}

	/* ==================================================
	side bar
	===================================================== */
	.sidebar {
		width: 100%;
		padding: 15px 0px;
		position: relative;
	}

	.sidebar_box {
		width: 100%;
		margin: 0px;
	}

	.sidebar_menu {
		float: left;
		width: calc(50% - 15px);
		margin-left: 15px;
	}

	.sidebar_menu img {
		width: 55%;
		height: auto;
		margin-top: 25px;
	}

	.sidebar_img {
		float: right;
		width: calc(50% - 15px);
		text-align: right;
		margin-right: 15px;
	}

	.sidebar_img img {
		width: 35%;
		margin-top: 15px;
	}

	.sidebar_back {
		width: 20%;
		position: absolute;
		bottom: -35px;
		right: 15px;
		height: 25px;
		margin-top: 0px;
	}

	/* ==================================================
	sp top header
	===================================================== */
	.top_header {
		float: left;
		width: 100%;
		height: 15vw;
	}

	.logo {
		width: calc(45% - 20px);
		height: auto;
		margin: 10px;
		aspect-ratio: 449 / 107;
		background: url(../img/logo.png) no-repeat center;
		background-size: contain;
	}

	.eigyo_text {
		width: 100%;
		width: calc(40% - 20px);
		margin: 0px 10px;
	}

	.undon {
		width: 100%;
		height: auto;
		line-height: normal;
		font-size: 2.5vw;
		padding-left: 0px;
		font-weight: normal;
		letter-spacing: 0;
	}

	.eigyou {
		width: 100%;
		height: auto;
		padding-left: 0px;
		line-height: 3.0vw;
		font-size: 2.5vw;
		letter-spacing: 0px;
		padding-top: initial;
	}

	.menu_btn {
		width: 15%;
		background: url(../img/sp/menu_btn.png) no-repeat center;
		background-color: #ffffff;
		aspect-ratio: 4 / 3;
		background-size: 38%;
		height: 15vw;
	}

	.sp_top_header {
		display: block;
		width: 100%;
	}

	.sp_logo {
		background: url(../img/sp/logo.png) no-repeat center;
		background-size: contain;
		width: calc(41% - 10px);
		height: 47px;
		margin-left: 10px;
	}

	.sp_eg_time {
		width: calc(42% - 30px);
		margin: 5px 15px;
	}

	.sp_time_text {
		float: right;
		line-height: 18px;
		font-size: 11px;
		font-weight: bold;
	}

	.sp_eg {
		width: 100%;
		height: 17px;
		background: url(../img/sp/eg.png) no-repeat center;
		background-size: contain;
	}

	.sp_time {
		width: 100%;
		height: 17px;
		background: url(../img/sp/eg_time.png) no-repeat center;
		background-size: contain;
	}

	.sp_menu_btn {
		width: 17%;
		background: url(../img/sp/menu_btn.png) no-repeat center;
		background-size: 21px 29px;
		background-color: #ffffff;
		height: 47px;
	}

	/* ==================================================
	sp header menu
	===================================================== */
	.sp_overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
		background-color: rgba(0, 0, 0, 0.35);
	}

	.sp_header_menu {
		display: none;
		position: fixed;
		z-index: 9999;
		right: 0;
		top: 0;
		background-color: #ffffff;
		width: 60%;
		height: auto;
		padding-bottom: 30px;
		opacity: 0.9;
	}

	.sp_menu_title {
		width: 100%;
		height: 15vw;
	}

	.sp_menu_top {
		width: 55%;
		height: 15vw;
		background: url(../img/sp/menu_top.png) no-repeat left;
		aspect-ratio: 183 / 52;
		background-size: contain;
		margin-left: 10%;
	}

	.sp_menu_cancel {
		width: 25%;
		background: url(../img/sp/menu_close_btn.png) no-repeat center;
		aspect-ratio: 11 / 16;
		background-size: contain;
		background-color: #000000;
		background-size: 21px 29px;
		height: 15vw;
	}

	.sp_menu {
		border: 0;
		width: calc(85% - 10px);
		height: 9vw;
		font-size: 3.4vw;
		line-height: 9vw;
		margin-bottom: auto;
		text-align: left;
		padding-left: 15%;
		color: #000000;
		font-weight: bold;
	}

	.sp_sub {
		margin-left: 25px;
	}

	.sp_menu_arrow {
		width: 30px;
		height: 30px;
		font-size: 26px;
		margin-right: 10px;
		color: #e0e0dd;
		vertical-align: sub;
		font-weight: normal;
	}

	/* ==================================================
	panel special menu
	===================================================== */
	.sp_special_menu_box {
		width: 100%;
		height: auto;
		margin-top: 30px;
	}

	.kirimugi_img {
		background: url(../img/sp/kirimugi.png) no-repeat;
	}

	.niumen_img {
		background: url(../img/sp/umen.png) no-repeat;
	}

	.shikaku_img {
		background: url(../img/sp/shikaku.png) no-repeat;
	}

	.kirimugi_img,
	.niumen_img,
	.shikaku_img {
		width: calc(50% - 26px);
		margin-left: 26px;
		aspect-ratio: 1 / 1;
		height: auto;
		background-size: contain;
		background-position-x: right;
	}

	.sp_special_menu_name {
		width: 50%;
		height: auto;
	}

	.sp_special_menu_name_jp {
		font-size: 5vw;
		text-align: left;
		font-weight: bold;
		padding: 10px 10px 5px 10px;
	}

	.sp_special_menu_name_en {
		font-size: 2.5vw;
		text-align: left;
		padding: 0px 10px
	}

	.sp_special_menu_btn {
		width: calc(50% - 20px);
		height: 26px;
		background-size: contain;
		background-position: left;
		margin: 10px 10px
	}

	/* ==================================================
	sp footer
	===================================================== */
	#pagetop {
		right: 0px;
		bottom: 55px;
		border-radius: 2px;
		width: 50px;
		height: 35px;
		padding: 5px;
		line-height: 40px;
		font-size: 9px;
	}

	.sp_footer_wrapper {
		display: block;
		width: 100%;
	}

	.f_logo {
		width: 100%;
		height: auto;
		aspect-ratio: 180 / 110;
		background-position: center;
		background-size: contain;
		padding-top: 0px;
		margin: 65px 0px;
	}

	.f_add_logo {
		width: 22%;
		height: auto;
		aspect-ratio: 1 / 0.8;
		background-size: contain;
	}

	.f_address {
		width: calc(100% - 26px);
		height: auto;
		margin: 0;
		padding: 13px;
	}

	.f_text {
		width: 78%;
		height: auto;
	}

	.f_text ul .f_text_tit {
		font-size: 3.6vw;
		line-height: 45px;
	}

	.f_text ul li {
		width: 100%;
		font-size: 3.1vw;
	}

	.copyright {
		width: 100%;
		height: auto;
		margin: 30px 0px;
		aspect-ratio: 131 / 4.5;
		background-size: contain;
	}
}