@charset "utf-8";

/*===============================================
 拠点ページ shop.css
===============================================*/
/*=======================================================
 - ～767.9px	：スマートフォン画面(ヘッダーメニューはハンバーガーのみ)
 - 768px ～		：タブレット・PC環境に切り替え(ヘッダーメニューはハンバーガーのみ)
 - 960px ～		：ヘッダーメニューが2種類に(ハンバーガー + オープン状態)
 - ～1099.9px	：コンテンツ幅最大値(ニュース記事など)
 - ～1399.9px	：サイトデザイン最大幅
●基本割合
・2等分：width:48%
・3等分：width:30.6%;
・4等分：width:22%;
・2分割：width:30%＆66% or 38%＆58%
=======================================================*/
@media screen and (max-width: 767.9px) {
}

@media print, screen and (min-width: 768px) {
}
@media print, screen and (min-width: 960px) {
}
@media print, screen and (min-width: 1100px) {
}
@media print, screen and (min-width: 1400px) {
}



/*===============================================
 ベース上書き
===============================================*/
.page_kyoten .content_wrap {
	padding: 0;
	width: 100%;
}

@media print, screen and (min-width: 768px) {
	.page_kyoten .content_wrap {
		padding: 0;
	}
}

@media print, screen and (min-width: 960px) {
	.page_kyoten .content_wrap {
		padding: 0;
	}
}

.index_section {
	margin: 0 0 65px;
}



/*===============================================
 トップ
===============================================*/
.index_section.top {
	padding: 1em 0 0;
}

@media print, screen and (min-width: 768px) {
	.index_section.top {
		padding: 3em 0 0;
	}
}

/* 背景 */
.top_back {
	background: no-repeat #000;
	background-size: cover;
	top: 0;
	left: 0;
	padding: 60em 0 0;
	position: absolute;
	width: 100%;
	z-index: -1;
}

@media print, screen and (min-width: 768px) {
	.top_back {
		padding: 420px 0 0;
	}
}

/* 大要素の配置 */
.index_section.top .index_section_inner {
	position: relative;
}

.shop_left_wrap {
	width: 100%;
}

.shop_right_wrap {
	margin: 0 0 5em;
	width: 100%;
}

@media print, screen and (min-width: 768px) {
	.index_section.top .index_section_inner {
		margin: 0 0 0 5%;
		width: 95%;
	}

	.shop_left_wrap {
		left: 0;
		position: absolute;
		top: 6.5em;
		width: 42%;
		z-index: 3;
	}

	.shop_right_wrap {
		margin: 0 0 0 36%;
		position: relative;
		width: 62%;
		z-index: 2;
	}
}

@media print, screen and (min-width: 1400px) {
	.index_section.top .index_section_inner {
		margin: 0 auto;
	}
}


/*
 背景の拠点名
===============================================*/
/*
.shop_title_back {
	color: #fff;
	font-size: 7em;
	font-weight: bold;
	opacity: .15;
	top: 0;
	z-index: 1;
}

@media print, screen and (min-width: 960px) {
	.shop_title_back {
		font-size: 10em;
		top: 1.25em;
	}
}
*/


/*
 拠点名
===============================================*/
.shop_title {
	margin: 0 auto 3em;
	padding: 1em 0 0;
	width: 90%;
	max-width: 1400px;
}

.shop_title.blog,
.shop_title.staff {
	padding: 0;
}

@media print, screen and (min-width: 768px) {
	.shop_title:not(.blog):not(.staff) {
		left: 0;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}
}

.shop_title .shoptitle {
	color: #fff;
	font-size: max(2em, min(4vw, 2.2em));	/* 古いSafari用 */
	font-size: clamp(2em, 4vw, 2.2em);
	font-weight: bold;
	letter-spacing: .06em;
	line-height: 1;
}

.shop_title.blog .shoptitle,
.shop_title.staff .shoptitle {
	color: initial;
}


/*
 ナビリンク
===============================================*/
.shop_navi {
	border: 1px solid #fff;
	margin: 0 auto 2em;
	width: 90%;
}

@media print, screen and (min-width: 768px) {
	.shop_navi {
		margin: 0 0 2em auto;
		width: 90%;
	}
}

@media print, screen and (min-width: 960px) {
	.shop_navi {
		margin: -1em 0 2.4em auto;
		width: 80%;
	}
}

.shop_navi li {
	width: calc(100% / 3);
}

.shop_navi li:nth-child(odd) {
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	width: calc(100% / 3);
}

.shop_navi a {
	color: #fff;
	display: block;
	padding: .7em .1em .3em;
	text-align: center;
}

@media screen and (max-width: 767.9px) {
	.shop_navi a {
		font-size: max(.8em, min(2vw, 1em));	/* 古いSafari用 */
		font-size: clamp(.8em, 2vw, 1em);
	}
}

@media print, screen and (min-width: 768px) {
	.shop_navi a {
		padding: .7em .1em .6em;
	}
}

@media print, screen and (min-width: 960px) {
	.shop_navi a {
		padding: 1em 1em .6em;
	}
}

.shop_navi a.hover {
	background: #fff;
}

.shop_navi a.hover > * {
	color: #000 !important;
}

.shop_navi a .english {
	display: block;
	font-size: max(1.3rem, min(2vw, 1.5rem));	/* 古いSafari用 */
	font-size: clamp(1.3rem, 2vw, 1.5rem);
	font-weight: bold;
	margin: 0 0 .15em;
	transition: var(--ani_transition);
}

@media print, screen and (min-width: 768px) and (max-width: 959.9px) {
	.shop_navi a .english {
		margin: 0;
	}
}

@media print, screen and (min-width: 960px) {
	.shop_navi a .english {
		font-size: initial;
		margin: 0;
	}
}

.shop_navi a .japanese {
	color: #fff;
	font-size: max(.8rem, min(2vw, 1.2rem));	/* 古いSafari用 */
	font-size: clamp(.8rem, 2vw, 1.2rem);
	transition: var(--ani_transition);
}


/*
 トップスライド部分
===============================================*/
.shop_slide_wrap {
	width: 100%;
}

/* .slides → config_slick.cssへ */


/*
 休店日案内
===============================================*/
.shop_holiday {
	align-items: center;
	color: #fff;
	margin: 0 auto 2.5em;
	position: relative;
	text-align: center;
	width: 90%;
}

@media print, screen and (min-width: 768px) {
	.shop_holiday {
		margin: 0 0 3em;
		width: 100%;
	}
}

.shop_holiday_text {
	align-items: center;
	width: 100%;
}

.shop_holiday span {
	display: block;
	position: relative;
}

.shop_holiday .today {
	align-items: center;
	margin: 0 1.1em 0 0;
	padding: 0 .9em 0 0;
	position: relative;
}

@media print, screen and (min-width: 768px) {
	.shop_holiday .today {
		margin: 0 .6em 0 0;
		padding: 0 .6em 0 0;
	}
}

.shop_holiday .today:after {
	background: #fff;
	content: '';
	display: block;
	height: 2.5em;
	position: absolute;
	top: -.6em;
	right: 0;
	width: 1px;
}

@media print, screen and (min-width: 960px) {
	.shop_holiday .today:after {
		height: 3.2em;
		top: -.7em;
	}
}

.shop_holiday .today .month,
.shop_holiday .today .day {
	font-size: 1.2em;
	font-weight: bold;
}


@media print, screen and (min-width: 960px) {
	.shop_holiday .today .month,
	.shop_holiday .today .day {
		font-size: 1.6em;
	}
}

.shop_holiday .today .month {
	margin: 0 .55em 0 0;
	top: -.3em;
}

@media print, screen and (min-width: 768px) {
	.shop_holiday .today .month {
		margin: 0 .7em 0 0;
	}
}

.shop_holiday .today .month:before {
	background: #fff;
	content: '';
	display: block;
	height: 1.5em;
	position: absolute;
	top: .09em;
	right: -.3em;
	transform: rotate(25deg);
	width: 1px;
}

.shop_holiday .today .day {
	margin: 0 .2em 0 0;
	top: .3em;
}

@media print, screen and (min-width: 768px) {
	.shop_holiday .today .month:before {
		right: -.35em;
	}
}

.shop_holiday .today .week {
	font-size: .6em;
	font-weight: 300;
	letter-spacing: .02em;
	top: .8em;
}

@media print, screen and (min-width: 960px) {
	.shop_holiday .today .week {
		font-size: .7em;
		top: 1.1em;
	}
}

.shop_holiday .info {
	align-items: center;
	font-size: initial;
}

@media print, screen and (min-width: 960px) {
	.shop_holiday .info {
		font-size: 1.1em;
	}
}

.shop_holiday .insert {
	font-size: 1.1em;
	font-weight: bold;
	margin: -.3em .2em 0;
}

@media print, screen and (min-width: 768px) {
	.shop_holiday .insert {
		margin: -.1em .1em 0;
	}
}

@media print, screen and (min-width: 960px) {
	.shop_holiday .insert {
		font-size: 1.2em;
	}
}


/*
 認定バナー
===============================================*/
.shopbanner_wrap {
	margin: 0 auto 1.8em;
	width: 90%;
}

@media print, screen and (min-width: 768px) {
	.shopbanner_wrap {
		width: 100%;
	}
}

.shopbanner_wrap a {
	display: block;
	width: 30%;
	max-width: 150px;
}

.shopbanner_wrap a:not(:last-child) {
	margin: 0 .4em 0 0;
}


/*
 店舗情報
===============================================*/
.shop_info_wrap {
	--angle: to top right;
	color: #fff;
	padding: 1.5em 1.8em .7em;
	width: 90%;
}

@media print, screen and (min-width: 768px) {
	.shop_info_wrap {
		padding: 1.3em 1.8em .8em;
		width: 100%;
	}
}

.shop_info_contents {
	font-size: 1.4rem;
}

@media print, screen and (min-width: 960px) {
	.shop_info_contents {
		font-size: initial;
	}
}

.shop_info_contents .title {
	font-weight: bold;
	width: 5em;
}

.shop_info_contents .content {
	margin: 0 0 .8em;
	width: calc(100% - 5em);
}

@media print, screen and (min-width: 768px) {
	.shop_info_contents .content {
		margin: 0 0 .75em;
	}
}

.shop_info_contents .content .zip {
	display: block;
}

.shop_info_contents .content:not(.btn_wrap) .tel {
	color: #fff;
	padding: 0 0 0 1em;
	position: relative;
}

@media print, screen and (min-width: 768px) {
	.shop_info_contents .content:not(.btn_wrap) .tel {
		border-bottom: none;
		pointer-events: none;
	}
}

.shop_info_contents .content:not(.btn_wrap) .tel:before {
	background: url(../../images/common/icon_tel.svg) no-repeat;
	background-size: contain;
	content: '';
	display: block;
	filter: var(--filter-white);
	height: 1em;
	left: 0;
	position: absolute;
	top: .3em;
	width: 1em;
}

.iphone .shop_info_contents .content:not(.btn_wrap) .tel:before,
.ipad .shop_info_contents .content:not(.btn_wrap) .tel:before {
	height: .8em;
	top: .2em;
	width: .8em;
}

/* お問合せボタン */
.shop_info_contents.btn .title {
	font-weight: bold;
	margin: .5em 0 .7em;
}

.shop_info_contents .btn_wrap {
	width: 100%;
}

.shop_info_contents .btn_wrap a {
	background: #000;
	border: 1px solid #000;
	color: #fff;
	display: block;
	padding: .8em 0 .7em;
	position: relative;
	text-align: center;
	width: 49%;
}

@media print, screen and (min-width: 768px) {
	.shop_info_contents .btn_wrap a {
		padding: .8em 0 .6em;
	}

	.shop_info_contents .btn_wrap a.tel {
		pointer-events: none;
	}
}

.shop_info_contents .btn_wrap a:before {
	background: var(--back-arrow) no-repeat;
	background-size: contain;
	content: '';
	display: block;
	filter: var(--filter-white);
	height: .8em;
	position: absolute;
	right: .7em;
	top: .7em;
	transition: var(--ani_arrow_transition);
	width: .8em;
}

.shop_info_contents .btn_wrap a.hover:before {
	right: .5em;
	top: .5em;
}

.shop_info_contents .btn_wrap .english {
	display: block;
	font-weight: bold;
	letter-spacing: .06em;
	margin: 0;
}

@media print, screen and (min-width: 768px) {
	.shop_info_contents .btn_wrap .english {
		font-size: 1.1em;
	}
}

.shop_info_contents .btn_wrap .japanese{
	font-size: .8em;
}


/*
 コメント
===============================================*/
.shop_comment {
	font-size: max(1.4rem, min(3vw, 1.5rem)); /* 古いSafari用 */
	font-size: clamp(1.4rem, 3vw, 1.5rem);
	margin: 0;
	padding: 3.8em 1.6em 0;
	position: relative;
	width: 100%;
}

.shop_comment .comment {
	position: relative;
	z-index: 1;
}

@media print, screen and (min-width: 768px) {
	.shop_comment {
		margin: 4.5em 50px 10em 46%;
		padding: 0;
		width: 49%;
	}
}

@media print, screen and (min-width: 1100px) {
	.shop_comment {
		margin: 4.5em 50px 5em 46%;
	}
}

@media print, screen and (min-width: 1360px) {
	.shop_comment {
		margin: 4.5em 50px 0 46%;
	}
}

@media print, screen and (min-width: 1500px) {
	.shop_comment {
		margin: 6.5em 4% 5em;
		width: 95%;
	}
}



/*===============================================
 営業日カレンダー
===============================================*/
.index_section.calendar {
	background: #f2f2f2;
	margin: 0 0 60px;
	padding: 3.5em 0 4em;
}

.index_section.calendar .index_section_inner {
	width: 90%;
}

@media print, screen and (min-width: 960px) {
	.index_section.calendar .index_section_inner {
		width: calc(100% - 130px);
	}
}


/*
 カレンダー →calendar.cssへ
===============================================*/
.business_pieces.shop_calendar {
	background: #ebebeb;
	padding: 20px 5%;
}

@media print, screen and (min-width: 768px) {
	.business_pieces.shop_calendar {
		padding: 40px 5%;
	}
}



/*===============================================
 GoogleMap・スタッフ
===============================================*/
.index_section.map {
	margin: 0 auto 60px;
}

.index_section.map .index_section_inner {
	width: 90%;
}

@media print, screen and (min-width: 960px) {
	.index_section.map .index_section_inner {
		width: calc(100% - 130px);
	}
}

.index_section.map .index_title-h3_small {
	width: 100%;
}

.index_section.map .map,
.index_section.map .staff {
	position: relative;
	width: 100%;
}

@media screen and (max-width: 767.9px) {
	.index_section.map .map {
		margin: 0 0 2em;
	}
}

@media print, screen and (min-width: 768px) {
	.index_section.map .map,
	.index_section.map .staff {
		width: 47%;
	}
}


/*
  GoogleMap
===============================================*/
#gmap {
	height: 300px;
	margin: 0 0 30px;
}

@media print, screen and (min-width: 768px) {
	#gmap {
		height: 420px;
	}
}

@media print, screen and (min-width: 960px) {
	#gmap {
		height: 490px;
	}
}

.index_section.map .btn {
	margin: 0 0 1em;
}

.index_section.map .squarebtn {
	position: absolute;
	right: 0;
	top: 0;
	width: 10.5em;
}

@media print, screen and (min-width: 960px) {
	.index_section.map .squarebtn {
		width: 12em;
	}
}

.index_section.map .squarebtn span {
	font-size: max(.9em, min(1.6vw, 1em)); /* 古いSafari用 */
	font-size: clamp(.9em, 1.6vw, 1em);
	font-weight: bold;
}


/*
  スタッフ
===============================================*/
.staffwrap .img {
	margin: 0 auto 1.5em;
	width: 70%;
}

@media print, screen and (min-width: 768px) {
	.staffwrap .img {
		margin: 0 auto 2em;
		width: 65%;
	}
}

.staffwrap .text .name {
	display: block;
	font-size: max(1.5rem, min(3vw, 1.6rem));	/* 古いSafari用 */
	font-size: clamp(1.5rem, 3vw, 1.6rem);
	font-weight: bold;
	margin: 0 auto 1em;
	text-align: center;
}

.staffwrap .text .comment {
	font-size: max(1.4rem, min(3vw, 1.5rem)); /* 古いSafari用 */
	font-size: clamp(1.4rem, 3vw, 1.5rem);
}



/*===============================================
 TOPICS→news.cssへ
===============================================*/
@media print, screen and (min-width: 1400px) {
	.index_section.topics {
		margin: 0 0 95px !important;
		padding: calc(3.1em - 20px) 0 0 !important;
	}
}



/*===============================================
 店舗ブログ→blog.cssへ
===============================================*/
.index_section.shop_blog .index_section_inner {
	margin: 0 auto;
	max-width: initial;
}

@media print, screen and (min-width: 1400px) {
	.blogwrap + .pagenavi {
		margin: calc(1.8em - 35px) 0 1em !important;
	}
}