@charset "utf-8";

/* ==========================================================================
   shop
   ========================================================================== */
@media (min-width: 960px){
#page_shop .contents_wrap .wrap{
	max-width: calc(1000px + 10vw + 10vw);
	padding: 0 10vw;
}
}

#shop{
	padding: 0 0 50px 0;
}
@media (min-width: 960px){
#shop{
	padding: 0 0 120px 0;
}
}

/* entry */
#shop .shop_list ul{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

#shop .shop_list ul li{
	width: 100%;
	border-radius: 8px;
	background-color: #fff;
	border: 1px solid #ccc;
	box-sizing: border-box;
	position: relative;
	padding: 28px 20px 26px 20px;
}
@media (min-width: 440px){
#shop .shop_list ul li{
	padding: 34px 50px 34px 50px;
	margin: 0 0 30px 0;
}
}

#shop .shop_list ul li:last-of-type{
	margin: 0;
}

#shop .shop_list ul li::before{
	content: '';
  position: absolute;
	top: 0;
	left: 24px;
	width: 20px;
	height: 4px;
	background-color: #92D574;
	z-index: 10;
}
@media (min-width: 440px){
#shop .shop_list ul li::before{
	left: 50px;
}
}

#shop .shop_list ul li h3.head{
	color: #333;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.6;
	letter-spacing: 0.02em;
}
@media (min-width: 440px){
#shop .shop_list ul li h3.head{
  font-size: 2.0rem;
	letter-spacing: 0.08em;
}
}


#shop .shop_list ul li .text_wrap{
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
@media (min-width: 440px){
#shop .shop_list ul li .text_wrap{
  flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
}
}

#shop .shop_list ul li .thumb{
	width: 100%;
	height: auto;
	aspect-ratio: 10 / 6.4;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (min-width: 440px){
#shop .shop_list ul li .thumb{
	width: 44%;
}
}

#shop .shop_list ul li .thumb img{
	width: 100%;
	height: auto;
	display: block;
}

#shop .shop_list ul li .text_block{
	width: 100%;
}
@media (min-width: 440px){
#shop .shop_list ul li .text_block{
	width: 48%;
}
}

#shop .shop_list ul li .text_block dl{
	width: 100%;
	font-size: 1.4rem;
	line-height: 1.5;
	display: flex;
	flex-direction: row;
	margin: 0 0 6px 0;
}
@media (min-width: 440px){
#shop .shop_list ul li .text_block dl{
	font-size: 1.5rem;
	margin: 0 0 10px 0;
}
}

#shop .shop_list ul li .text_block dl dt{
	width: 23%;
	font-weight: 600;
	letter-spacing: 0.08em;
}
@media (min-width: 440px){
#shop .shop_list ul li .text_block dl dt{
	width: 22%;
	font-weight: 500;
}
}

#shop .shop_list ul li .text_block dl dd{
	width: 77%;
}
@media (min-width: 440px){
#shop .shop_list ul li .text_block dl dd{
	width: 78%;
}
}

#shop .shop_list ul li .btn a{
	width: 100%;
}
@media (min-width: 960px){
#shop .shop_list ul li .btn a{
	width: 320px;
}
}



/* single
============================================================ */

/* shop_head
============================================================ */
#shop_head{
	width: 100vw;
  height: auto;
  background-image: url(../img/about/about-bg.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#shop_head .wrap{
	width: 100vw;
  height: auto;
  display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	box-sizing: border-box;
  padding: 110px 5.5vw 50px;
	margin: 0 auto;
}
@media (min-width: 960px){
#shop_head .wrap{
	max-width: calc(1100px + 10vw + 10vw);
	padding: 190px 10vw 90px;
}
}

#shop_head h1.page_title{
	color: #fff;
	font-size: 2.0rem;
	font-family: "Noto Serif JP", serif;
  font-weight: 600;
  line-height: 1;
	letter-spacing: 0.06em;
}
@media (min-width: 960px){
#shop_head h1.page_title{
	font-size: 3.0rem;
}
}


/* shop-reservation
============================================================ */
#shop-reservation{
	width: 100%;
}

#shop-reservation .shop-btn-reservation{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
@media (min-width: 960px){
#shop-reservation .shop-btn-reservation{
	width: 100%;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
}

#shop-reservation .shop-btn-reservation a{
	color: #fff;
	width: 100%;
	height: 58px;
	font-size: 1.6rem;
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.04em;
	text-align: center;
  display: flex;
	align-items: center;
	justify-content: center;
  position: relative;
	background-color: #7ED15A;
	border-radius: 8px;
	box-sizing: border-box;
	transition: all 0.2s ease;
	margin: 10px 0 0 0;
}
@media (min-width: 960px){
#shop-reservation .shop-btn-reservation a{
	width: 360px;
	height: 70px;
	font-size: 1.7rem;
	margin: 0 10px;
}
}

#shop-reservation .shop-btn-reservation a:first-of-type{
	margin: 0;
}
@media (min-width: 960px){
#shop-reservation .shop-btn-reservation a:first-of-type{
	margin: 0 10px;
}
}

#shop-reservation a.reservation-line{
	background-color: #55BF5C;
}

#shop-reservation a.reservation-hpb{
	background-color: #a1395b;
}

#shop-reservation .shop-btn-reservation a::after{
	content: "";
	width: 13px;
	height: 13px;
	background-image: url(../img/common/icon-arrow-rw.svg);
	background-size: 13px 13px;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	right: 20px;
	margin: -6.5px 0 0 0;
}
@media (min-width: 960px){
#shop-reservation .shop-btn-reservation a::after{
	width: 13px;
	height: 13px;
	background-size: 13px 13px;
  margin: -6.5px 0 0 0;
}
}

@media (min-width: 960px){
#shop-reservation .shop-btn-reservation a:hover{
	opacity: 0.7;
}
}


/* shop-photo
============================================================ */
#shop-photo{
	width: 100%;
}
@media (min-width: 960px){
#shop-photo{
}
}

#shop-photo .wrap{
	width: 100%;
	display: flex;
	align-items: center;
  justify-content: center;
}
@media (min-width: 960px){
#shop-photo .wrap{
	width: 67%;
}
}

/*slider__block*/
#shop-photo .slider{
	position: relative;
}

#shop-photo .slider-thumbnail{
	margin: 4px 0 0 0;
	display: block;
}

#shop-photo .slider-thumbnail .swiper-slide{
  transition: opacity .2s;
  cursor: pointer;
	box-sizing: border-box;
}

#shop-photo .slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
	background-color: rgba(255, 255, 255, 0.8);
	opacity: 0.5;
}

/* slide-button */
#shop-photo .button-wrap{
	display: none;
}


/* shop-overview
============================================================ */
#shop-overview{
	width: 100%;
}
@media (min-width: 960px){
#shop-overview{
}
}

#shop-overview .shop_data{
	display: flex;
	flex-direction: column;
	border-top: 1px solid #ddd;
}

#shop-overview dl{
	width: 100%;
	line-height: 2.0;
	display: flex;
	flex-direction: row;
	border-bottom: 1px solid #ddd;
}

#shop-overview dt{
	color: #fff;
	width: 24%;
	font-size: 1.4rem;
	font-weight: 400;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.6;
	letter-spacing: 0.06em;
	box-sizing: border-box;
	background-color: #008289;
	padding: 18px 0 18px 0;
}
@media (min-width: 440px){
#shop-overview dt{
	width: 25%;
	font-size: 1.5rem;
	letter-spacing: 0.08em;
	text-align: left;
	padding: 22px 0 22px 20px;
}
}

#shop-overview dd{
	width: 76%;
	font-size: 1.4rem;
	line-height: 1.6;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	padding: 18px 0 18px 15px;
}
@media (min-width: 440px){
#shop-overview dd{
	width: 75%;
	font-size: 1.5rem;
	letter-spacing: 0.02em;
	padding: 22px 0 22px 40px;
}
}

#shop-overview dd.tel{
	font-size: 1.6rem;
	font-weight: 600;
}
@media (min-width: 440px){
#shop-overview dd.tel{
	font-size: 1.8rem;
}
}

#shop-overview dd.sns{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

#shop-overview dd.sns a img{
	width: 30px;
	height: 30px;
	border-radius: 5px;
	overflow: hidden;
	display: block;
	margin: 0 10px 0 0;
	transition: all 0.2s ease;
}
@media (min-width: 440px){
#shop-overview dd.sns a img{
	width: 32px;
	height: 32px;
}
}

@media (min-width: 960px){
#shop-overview dd.sns a:hover img{
	opacity: 0.7;
}
}


/* shop-price
============================================================ */
#shop-price table{
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	border-top: 1px solid #ddd;
}

#shop-price table tr{
	line-height: 1;
	border-bottom: 1px solid #ddd;
}

#shop-price table tr td{
	font-size: 1.6rem;
	font-family: "Roboto", "Noto Sans JP", sans-serif;
	font-feature-settings: "palt" 1;
	text-align: center;
	padding: 20px 0;
}
@media (min-width: 440px){
#shop-price table tr td{
	font-size: 1.8rem;
	letter-spacing: 0.06em;
  padding: 22px 0;
}
}

#shop-price table tr td:first-of-type{
	color: #fff;
	width: 60%;
	font-size: 1.4rem;
	font-weight: 400;
	font-feature-settings: "palt" 1;
	text-align: center;
	vertical-align: middle;
	line-height: 1;
	padding: 20px 0;
	background-color: #008289;
}
@media (min-width: 440px){
#shop-price table tr td:first-of-type{
	width: 36%;
	font-size: 1.7rem;
	letter-spacing: 0.08em;
	padding: 22px 0;
}
}

#shop-price table tr td:nth-of-type(3),
#shop-price table tr td:nth-of-type(4),
#shop-price table tr td:nth-of-type(5),
#shop-price table tr td:nth-of-type(6){
	border-left: 1px solid #ddd;
}

#shop-price .note{
	font-size: 1.3rem;
}


/* map
============================================================ */
#map .map{
	width: 100%;
	height: auto;
	border: 1px solid #ddd;
	box-sizing: border-box;
}

#map .map iframe{
	width: 100%;
	height: 400px;
	display: block;
}
@media (min-width: 440px){
#map .map iframe{
	height: 400px;
}
}


/* shop-faq
============================================================ */
.faq_list .accordion:last-child{
  border-bottom: 1px solid #ddd;
}

.faq_list .accordion .accordion_header{
  font-size: 1.35rem;
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
  line-height: 1.6;
	padding: 17px 13% 17px 13%;
	position: relative;
	z-index: 1;
	cursor: pointer;
	transition-duration: 0.2s;
	display: flex;
	align-items: center;
  box-sizing: border-box;
  border-top: 1px solid #ddd;
}
@media (min-width: 440px){
.faq_list .accordion .accordion_header{
  font-size: 1.5rem;
  line-height: 1.4;
  padding: 22px 10% 22px 10%;
}
}
@media (min-width: 960px){
.faq_list .accordion .accordion_header{
	font-size: 1.6rem;
	font-weight: 500;
  padding: 26px 30px 26px 80px;
}
}

.faq_list .accordion .accordion_header:last-child{
  margin: 0;
}

.faq_list .accordion .accordion_header::before{
	content: "";
  width: 34px;
	height: 34px;
  background-image: url(../img/common/faq-q.svg);
  background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
  position: absolute;
	top: 50%;
  left: 2px;
  margin: -17px 0 0 0;
}
@media (min-width: 960px){
.faq_list .accordion .accordion_header::before{
	width: 40px;
	height: 40px;
  top: 50%;
  left: 9px;
  transform: scale(1);
}
}

.faq_list .accordion .accordion_header .i_box{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50%;
	right: 6px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	box-sizing: border-box;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transform-origin: center center;
	transition-duration: 0.2s;
}
@media (min-width: 960px){
.faq_list .accordion .accordion_header .i_box{
	width: 30px;
	height: 30px;
	margin-top: -15px;
  right: 0.6%;
}
}

.faq_list .accordion .accordion_header .i_box .i{
	display: block;
	width: 17px;
	height: 17px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transform-origin: center center;
	transition-duration: 0.2s;
	position: relative;
}
@media (min-width: 960px){
.faq_list .accordion .accordion_header .i_box .i{
	width: 21px;
	height: 21px;
}
}

.faq_list .accordion .accordion_header.open .i_box{
	-webkit-transform: rotate(-180deg);
	transform: rotate(-180deg);
  -webkit-transform: rotate(-0deg);
	transform: rotate(-0deg);
}

.faq_list .accordion .accordion_header .i_box .i:before,
.faq_list .accordion .accordion_header .i_box .i:after{
	display: flex;
	content: '';
	background-color: #008289;
	border-radius: 0;
	width: 17px;
	height: 2px;
	position: absolute;
  top: 8px;
  left: 0;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	transform-origin: center center;
}
@media (min-width: 960px){
.faq_list .accordion .accordion_header .i_box .i:before,
.faq_list .accordion .accordion_header .i_box .i:after{
  width: 21px;
  top: 10px;
	left: 0;
}
}

.faq_list .accordion .accordion_header .i_box .i:before{
	width: 2px;
	height: 17px;
	top: 0;
	left: 8px;
}
@media (min-width: 960px){
.faq_list .accordion .accordion_header .i_box .i:before{
	height: 21.5px;
	left: 9.5px;
}
}

.faq_list .accordion .accordion_header.open .i_box .i:before{
	content: none;
}

.faq_list .accordion .accordion_header.open .i_box .i:after{
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.faq_list .accordion .accordion_inner{
	display: none;
  font-size: 1.35rem;
	line-height: 1.8;
  padding: 8px 0 20px 16px;
	box-sizing: border-box;
}
@media (min-width: 440px){
.faq_list .accordion .accordion_inner{
  font-size: 1.5rem;
	padding: 0 0 20px 10%;
}
}
@media (min-width: 960px){
.faq_list .accordion .accordion_inner{
	padding: 0 50px 24px 80px;
}
}

.faq_list .accordion .accordion_inner p{
	margin-top: 20px;
}

.faq_list .accordion .accordion_inner p:nth-child(1){
	margin-top: 0;
}

.faq_list .accordion .accordion_inner a{
	text-decoration: underline;
}



/* message
============================================================ */
#shop-message{
	background-color: #FAFAFA;
	padding: 60px 0 50px 0;
}
@media (min-width: 960px){
#shop-message{
	padding: 100px 0 100px 0;
}
}

#shop-message .section_title_en{
	color: #008289;
	font-size: 2.8rem;
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	letter-spacing: 0.28em;
	line-height: 1;
	text-align: center;
	padding-left: 0.08em;
	text-transform: uppercase;
	padding: 0 0 0 0.28em;
}
@media (min-width: 960px){
#shop-message .section_title_en{
	font-size: 4.0rem;
}
}

#shop-message h2.section_title{
	color: #008289;
  font-size: 1.4rem;
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
  line-height: 1;
	letter-spacing: 0.06em;
	text-align: center;
	padding-left: 0.06em;
}
@media (min-width: 960px){
#shop-message h2.section_title{
  font-size: 1.6rem;
	font-weight: 500;
}
}

#shop-message .text_wrap{
	display: flex;
	flex-direction: column;
}
@media (min-width: 440px){
#shop-message .text_wrap{
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
}
}

#shop-message .text_wrap .text_block{
	width: 100%;
}
@media (min-width: 440px){
#shop-message .text_wrap .text_block{
	width: 64%;
}
}

#shop-message .text_wrap .text_block p{
	font-size: 1.4rem;
	text-align: justify;
	margin-top: 15px;
}
@media (min-width: 960px){
#shop-message .text_wrap .text_block p{
	font-size: 1.5rem;
	line-height: 1.9;
	margin-top: 20px;
}
}

#shop-message .text_wrap .text_block p:first-of-type{
	margin-top: 25px;
}
@media (min-width: 960px){
#shop-message .text_wrap .text_block p:first-of-type{
	margin-top: 30px;
}
}

#shop-message .text_wrap .text_block p.name{
	font-size: 1.55rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1;
}
@media (min-width: 960px){
#shop-message .text_wrap .text_block p.name{
	font-size: 1.65rem;
	font-weight: 500;
}
}

#shop-message .text_wrap .text_block p.name span{
	font-size: 1.55rem;
	margin-right: 20px;

}
@media (min-width: 960px){
#shop-message .text_wrap .text_block p.name span{
	font-size: 1.65rem;
}
}

#shop-message .text_wrap .img_block{
	width: 66%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto;
}
@media (min-width: 440px){
#shop-message .text_wrap .img_block{
	width: 28%;
	margin: 0;
}
}

#shop-message .text_wrap .img_block img{
	width: 100%;
	height: auto;
	display: block;
}


/* shop-voice
============================================================ */
#shop-voice{
	background-image: url(../img/common/bg-forest.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #FAFAFA;
	padding: 50px 0 50px 0;
	overflow-x: hidden;
}
@media (min-width: 440px){
#shop-voice{
	padding: 100px 0 100px 0;
}
}

#shop-voice .wrap{
	position: relative;
}

#shop-voice .section_title_en{
	color: #008289;
	font-size: 2.8rem;
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	letter-spacing: 0.28em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	padding: 0;
}
@media (min-width: 960px){
#shop-voice .section_title_en{
	font-size: 4.0rem;
}
}

#shop-voice h2.section_title{
	color: #008289;
  font-size: 1.4rem;
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
  line-height: 1;
	letter-spacing: 0.06em;
	text-align: center;
	padding: 0;
}
@media (min-width: 960px){
#shop-voice h2.section_title{
  font-size: 1.6rem;
	font-weight: 500;
}
}

#shop-voice .title_block{
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
}

#shop-voice .title_wrap{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}


/* entry */
#shop-voice .entry_list .swiper-container-wrap{
  position: relative;
}

#shop-voice .entry_list .swiper-container{
  width: 100%;
  overflow: visible;
}

#shop-voice .entry_list .swiper-slide{
	width: 100%;
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	background-color: #fff;
	box-sizing: border-box;
	padding: 40px 20px 26px 20px;
}
@media (min-width: 440px){
#shop-voice .entry_list .swiper-slide{
	padding: 50px 24px 26px 24px;
}
}

#shop-voice .entry_list .swiper-slide::before{
	content: '';
  position: absolute;
	top: 0;
	left: 24px;
	width: 20px;
	height: 4px;
	background-color: #92D574;
	z-index: 10;
}

#shop-voice .entry_list .swiper-slide .title{
	color: #008289;
	height: 54px;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0.02em;
}
@media (min-width: 440px){
#shop-voice .entry_list .swiper-slide .title{
	font-size: 1.65rem;
	font-weight: 500;
}
}

#shop-voice .entry_list .swiper-slide .text_block{
	width: 100%;
	height: 220px;
	box-sizing: border-box;
	padding: 0 6px 0 0;
	text-align: justify;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}
@media (min-width: 440px){
#shop-voice .entry_list .swiper-slide .text_block{
	height: 254px;
}
}

#shop-voice .entry_list .swiper-slide .text_block::-webkit-scrollbar{
  -webkit-appearance: none;
	width: 4px;
}

#shop-voice .entry_list .swiper-slide .text_block::-webkit-scrollbar-thumb{
  background-color: #bababa;
	border-radius: 2px;
}

#shop-voice .entry_list .swiper-slide .text_block::-webkit-scrollbar-track{
  background-color: #fff;
	border-radius: 0;
}

#shop-voice .entry_list .swiper-slide .text_block p{
	color: #444;
	font-size: 1.45rem;
	line-height: 1.64;
	letter-spacing: 0;
}

#shop-voice .entry_list .swiper-slide .text_block img{
	display: none;
}

#shop-voice .entry_list .border{
	width: 100%;
	height: 1px;
	background-color: #E1E1E1;
}


/* btn-back
============================================================ */
#btn-back .btn-back{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}