@charset "utf-8";
/* CSS Document */

@font-face { /* IE用 */
    font-family: 'Sawarabi Gothic';
    src: url('../img/SawarabiGothic-Regular.woff'),
		url('../img/Soft Elegance.ttf');
}
body,.font_sans-serif{font-family: 'Sawarabi Gothic', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;}

.comf,.comf_b,#pager,#page6 .box_title1::before,#page6 .box_item::before{
	font-family: 'Soft Elegance', 'Sawarabi Gothic', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;
}

/***　全ページ　***/

html{font-size: 14px;}
body{-webkit-text-size-adjust: 100%;}

.linkStyle{
	transition: 0.5s;
	color: #991111;
	padding: 0 5px;
	background: linear-gradient(transparent 50%, #f2f2f2 50%)
}
.linkStyle:hover{opacity: 0.8}

.more span::before,.more span::after,#page_top::before,#top_info figure::before,#page10 a::before,#pager li.prev a::before,#pager li.next a::before,#page2 .date_wrap::before,#page6 .box_title1::before,#page6 .box_item::before,#page3 .sub_cate_title::before,#page5 .sub_cate_title::before,#page5 .sub_cate_list li::before,#page4 .cate_txt1::before,#page4 .cate_txt1::after{
	content: "";
	position: absolute;
	display: block;
	pointer-events: none
}

#page_top{cursor: pointer}
#page_top::before{
	width: 15px;
	height: 15px;
	right: 0;
	left: 0;
	margin: auto;
	top: 30px;
	border-left: solid 1px #fff;
	border-top: solid 1px #fff;
	transform: rotate(45deg);
	border-top-left-radius: 2px
}

.hover_trans:hover{transform: translateY(-5px)}

#loadingBg{z-index: 102}
#loading .logo{width: 100px}
#loading .logo:first-child img{
	transform-origin: top;
	animation: shake 0.7s ease infinite;
}
@keyframes shake{
	0%	{transform: rotate(0)}
	18%	{transform: rotate(-10deg)}
	40%	{transform: rotate(5deg)}
	60%	{transform: rotate(-5deg)}
	80%	{transform: rotate(0)}
}

.shadow_h{box-shadow: 0 0 10px rgba(0,0,0,0.1)}

/***　ヘッダー　***/

header .main_logo{
	top: 0;
	left: 0;
	z-index: 1;
	background-color: rgba(31,31,31,0.3);
}
header .main_logo .logo{
	width: 250px;
	height: 250px;
}
#header .header_wrap{z-index: 10}
#wrap.top_page #header{height: 80px}
header .header_wrap{height: 80px;top: 0;left: 0;}
#wrap.under_page #header{height: auto}
.head_sns{width: 220px;box-sizing: border-box}
.head_sns a,.footer_sns a{width: 25px}
#header #logo a:hover img{
	transform-origin: top;
	animation: logoshake 0.7s ease;
}
@keyframes logoshake{
	0%	{transform: rotate(0)}
	20%	{transform: rotate(-10deg)}
	40%	{transform: rotate(5deg)}
	60%	{transform: rotate(-5deg)}
	80%	{transform: rotate(0)}
}

#logo span{width: 60px}
#nav_pc li:not(.head_sns){line-height: 80px;width: 110px}
#nav_pc a{box-sizing: border-box}
#nav_pc li:not(.head_sns) a:hover,#logo a:hover{background-color: rgba(255,255,255,0.05)}
#logo span::before,#nav_pc a::before,#page10 a::after{letter-spacing: 4px;}
#logo a:hover span::before,#nav_pc a:hover::before,#page10 a:hover::after{letter-spacing: 1px}

#logo span::before{content: "HOME"}
#nav_pc .news::before,#page10 .news::after{content: "NEWS"}
#nav_pc .about::before,#page10 .about::after{content: "ABOUT"}
#nav_pc .course::before,#page10 .course::after{content: "COURSE"}
#nav_pc .menu::before,#page10 .menu::after{content: "MENU"}
#nav_pc .faq::before,#page10 .faq::after{content: "FAQ"}
#page10 .info::after{content: "INFORMATION"}
#page10 .contact::after{content: "CONTACT"}
#page10 .privacy::after{content: "PRIVACY POLICY"}
#page10 .sitemap::after{content: "SITEMAP"}
#page10 .index::after{content: "HOME"}

#logo a:hover span::before{content: "ホーム"}
#nav_pc .news:hover::before,#page10 .news:hover::after{content: "お知らせ"}
#nav_pc .about:hover::before,#page10 .about:hover::after{content: "当店について"}
#nav_pc .course:hover::before,#page10 .course:hover::after{content: "コース"}
#nav_pc .menu:hover::before,#page10 .menu:hover::after{content: "メニュー"}
#nav_pc .faq:hover::before,#page10 .faq:hover::after{content: "よくある質問"}
#page10 .info:hover::after{content: "店舗情報"}
#page10 .contact:hover::after{content: "お問い合わせ"}
#page10 .privacy:hover::after{content: "プライバシーポリシー"}
#page10 .sitemap:hover::after{content: "サイトマップ"}
#page10 .index:hover::after{content: "トップ"}

header .menu_stick{
	padding-top: 13px;
	height: 40px;
	top: 20px;
	right: 20px;
	z-index: 101;
	box-sizing: border-box
}
header .menu_stick span{margin-left: auto}
header .menu_stick.stick_trans span{
	transform: rotate(225deg);
	margin: 0 auto;
	width: 70%!important;
	border-color: #fff
}
header .menu_stick.stick_trans{
	top: 30px;
	right: 30px;
}
header .menu_stick.stick_trans span:first-child{
	opacity: 0;
}
header .menu_stick.stick_trans span:last-child{
	-webkit-transform: rotate(-225deg);
	-ms-transform: rotate(-225deg);
	transform: rotate(-225deg);
	margin-top: -1px
}
#sp_nav{
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
}
#sp_nav nav{
	box-sizing: border-box;
	top: 20px;
	right: 20px;
	bottom: 20px;
	left: 20px;
	overflow-y: scroll;
}

/***　フッター　***/

footer{background-image: url("../img/footer_bg.jpg");background-position: 50% 80%}
#footer{background-color: rgba(31,31,31,0.8)}
#footer ul.letter_4 a{padding-left: 3px}

/***　index　***/

mask path{
	stroke-width: 5px;
}
path{
	fill: none;
	stroke: #fff;
}

.more a span{
	border-color: transparent
}
.more a:hover span{
	background-color: rgba(94,66,59,0.1)
}
.more span::before,.more span::after{
	background-color: #5e423b;
	width: 40px;
	height: 1px;
	top: 0;
	bottom: 0;
	margin: auto;
	transition: 0.5s
}
.more span::before{left: -20px}
.more span::after{right: -20px}

.fix_img{background-image: url("../img/bg2.jpg");z-index: -1}
#wrap.under_page .main{transform: translateY(-40px);opacity: 0}
#wrap.under_page .main.main_scroll{
	transform: translateY(-50px);
	opacity: 1
}
#intro{background-image: url("../img/bg1.jpg")}
#intro #line_animation2{top: 0;right: 10%}

#contents #line_animation3,#contents #line_animation1{top: 40px;right: -10px}
#contents #line_animation4{top: 60px;left: 0}
#contents h2,#top_news h2{
	width: 120px;
	height: 120px;
	line-height: 120px;
}

#top_news .cate_box:last-child{margin-bottom: 0}

#map{height: 400px}
.gmnoprint,.gm-control-active{display: none}

/***　page_title / pager / cate_list / cate_title　***/

#page_title{background-image: url("../img/title_bg.jpg")}
#page_title div{background-color: rgba(31,31,31,0.8)}

#pager li a{
	display: block;
	width: 50px;
	height: 50px;
	line-height: 50px;
	border: solid 1px #1f1f1f;
	color: #1f1f1f;
	transition: 0.5s;
	position: relative
}
#pager li.prev a,#pager li.next a{border-color: transparent}
#pager li.prev a::before,#pager li.next a::before{
	width: 8px;
	height: 8px;
	border-top: solid 1px #1f1f1f;
	border-right: solid 1px #1f1f1f;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transition: 0.5s;
	border-top-right-radius: 2px
}
#pager li.prev a::before{transform: rotate(-135deg);left: 5px}
#pager li.next a::before{transform: rotate(45deg);right: 5px}
#pager li.prev a:hover::before,#pager li.next a:hover::before{border-color: #fff}
#pager li a:hover{
	background-color: #1f1f1f;
	color: #fff;
}
#pager li{margin: 0 5px}

/***　page2　***/

#page2 .date_wrap::before{
	width: 100%;
	height: 1px;
	background-color: #5e423b;
	top: 15px;
	left: 0
}

/***　page3　***/

#page3 .sub_cate_title::before{
	width: 9px;
	height: 9px;
	background-color: #ccc;
	left: -5px;
	bottom: -5px;
}

/***　page4　***/

#page4 .cate_txt1::before,#page4 .cate_txt1::after{
	width: 40px;
	height: 30px;
}
#page4 .cate_txt1::before{
	border-left: solid 2px #1f1f1f;
	border-top: solid 2px #1f1f1f;
	top: 0;
	left: 0;
}
#page4 .cate_txt1::after{
	border-right: solid 2px #1f1f1f;
	border-bottom: solid 2px #1f1f1f;
	bottom: 0;
	right: 0;
}

/***　page5　***/

#page5 .sub_cate_list li::before{
	width: 0;
	height: 0;
	border-left: solid 8px transparent;
	border-top: solid 8px #5e423b;
	border-right: solid 8px transparent;
	right: 0;
	left: 0;
	bottom: 2px;
	margin: auto
}
#page5 .sub_cate_title::before{
	width: 50px;
	height: 2px;
	bottom: -2px;
	left: 0;
	background-color: #aaa
}
#page5 .sub_cate:last-child{margin-bottom: 0}

/***　page6　***/

#page6 .box_title1::before,#page6 .box_item::before{
	font-size: 24px;
	content: "Q.";
	top: 14px;
	left: 15px;
}
#page6 .box_item::before{top: 12px;content: "A.";color: #991111}

/***　page7　***/

#page7 #map{height: 100%}

/***　page8　***/

#page8 #form_bt input{
	cursor: pointer;
	-webkit-appearance: none;
	padding-left: 25px;
}
#page8 #form_bt input:hover{
	transform: translateY(-5px)
}
#page8 input[type="text"]{border-bottom: solid 1px transparent;}
#page8 input[type="text"]:focus{
	background-color: transparent;
	border-bottom: solid 1px #5e423b;
	outline: none;
}
#page8 textarea{border: solid 1px transparent;}
#page8 textarea:focus{
	background-color: transparent;
	border: solid 1px #5e423b;
	outline: none
}

/***　page10　***/

#page10 a::after{position: relative}
#page10 a::before{
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform-origin: right top;
	transform: scale(0,1);
	background-color: #991111;
	transition: transform 0.5s
}
#page10 a:hover::before{
	transform-origin: left top;
	transform: scale(1,1)
}

/***　IE対処　***/

@media all and (-ms-high-contrast:none) {
}

.float_right{
	float: right
}
.float_left{
	float: left
}
.float_clear{
	float: none
}
.clearfix::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}

/*ここからタブレット用（780px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 768px){
	
.head_sns{width: 170px}
#intro #line_animation2{top: 0;right: 0}
#contents #line_animation3,#contents #line_animation1{top: -100px;right: -30px}
#contents #line_animation4{top: -100px;left: 0}
	
#wrap.top_page #header,header .header_wrap{height: 60px}
header .menu_stick{
	top: 10px;
}
.more a span,.more a:hover span{
	background-color: #5e423b;
	color: #fff
}
.more a:hover span{padding: 20px 50px;}
.more span::before,.more span::after{display: none}
.hover_trans:hover{transform: translateY(0)}
#pager li:not(.prev):not(.next){display: none;}
#pager li.prev a::before,#pager li.next a::before{border-color: #fff}
#pager li a{background-color: #1f1f1f;}
	
#page2 .date_wrap::before{display: none}
#page7 #map{height: 400px}
#page10 a::before{display: none}

.float_right_tb{
	float: right
}
.float_left_tb{
	float: left
}
.float_clear_tb{
	float: none
}
.clearfix_tb::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
}

/*ここからスマホ用（750px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 667px){
	
#intro #line_animation2{top: -40px;right: -40px;transform: scale(0.8)}
#contents #line_animation3,#contents #line_animation1{top: -90px;right: -20px;transform: scale(0.8)}
#contents #line_animation4{top: -70px;left: -10px;transform: scale(0.8)}
	
#loading .logo{width: 80px}
header .main_logo .logo{
	width: 200px;
	height: 200px;
}
	
#top_info figure::before{
	width: 100px;
	height: 1px;
	background-color: #fff;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto
}

#page6 .box_title1::before,#page6 .box_item::before{left: 0;}
#page7 .grid_4{color: #aaa}
	
.float_right_sp{
	float: right
}
.float_left_sp{
	float: left
}
.float_clear_sp{
	float: none
}
.clearfix_sp::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
}