@charset "utf-8";

/*----------------------------------------------------------------------
共通
----------------------------------------------------------------------*/
.subttl{
	font-family: 'Noto Sans JP',"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	font-size: clamp(1.8rem, 1.523rem + 1.23vw, 3rem);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .05em;
}

.txt{
	margin-top: 1em;
	line-height: 2;
}


/*----------------------------------------------------------------------
mv
----------------------------------------------------------------------*/

.mv{
	position: relative;
}

.slick-slide img{
	width: 100%;
}

.slick-arrow{
	cursor: pointer;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	content: '';
	width: 50px;
	height: 50px;
	font-size: 0;
	border: none;
	z-index: 1;
	transition: .3s all;
}
.slick-arrow:focus-visible{
	outline: none;
}
.slick-arrow:hover{
	opacity: .6;
}

.slick-next{
	right: 35px;
	background: url("../images/right-arrows.svg") no-repeat center / contain;
}
.slick-prev{
	left: 35px;
	background: url("../images/left-arrows.svg") no-repeat center / contain;
}


/*----------------------------------------------------------------------
about・facebook
----------------------------------------------------------------------*/

.about{
	position: relative;
	padding: 120px 0;
}

.about::before{
	position: absolute;
	content: '';
	background: url("../images/bg-deco.svg") no-repeat center / contain;
	width: 358px;
	height: 247px;
	right: 0;
	bottom: 0;
	z-index: -1;
}

.aboutWrap{
	display: flex;
	justify-content: space-between;
	padding-bottom: 80px;
}

.ab-box{
	display: flex;
	align-items: center;
}

.ab-txt{
	font-size: clamp(1.6rem, 1.52rem + 0.4vw, 2rem);
	line-height: 2.2;
	padding-right: 15px;
}

.ab-img{
	position: relative;
	bottom: -70px;
	width: 220px;
}

.fb_block{
	width: 500px;
	max-width: 100%;
}

.insta-ban{
	background: #fff;
	  line-height: 0;
}

.insta-ban a{
	transition: .3s all;
}
.insta-ban a:hover{
	opacity: .5;
}

/*----------------------------------------------------------------------
award
----------------------------------------------------------------------*/

.award{
	padding: 0 0 40px;
}
.award .ttl{
	margin-bottom: 40px;
}

.award-list{
	display: flex;
	flex-wrap: wrap;
	margin-left: -50px
}

.award-list li{
	width: calc(100% / 2 - 50px);
	margin-left: 50px;
	margin-bottom: 50px;
	background: #BCE8B4;
	border: 1px solid #ccc;
	padding: 30px;
	display: flex;
	flex-direction: column;
}

.award-list li:last-child{
	background: #2B6230;
	color: #fff;
}

.award-ttl{
	font-size: clamp(1.8rem, 1.56rem + 1.2vw, 3rem);
	letter-spacing: .2rem;
	margin-bottom: 10px;
}

.award-txt{
	text-align: left;
	margin-bottom: 20px;
	line-height: 1.8;
}

.award-img{
	margin: auto;
}

.award-img a{
	transition: .3s all;
}

.award-img a:hover{
	opacity: .7;
}


/*----------------------------------------------------------------------
example
----------------------------------------------------------------------*/

.example{
	padding: 0 0 120px;
}

.ex-list{
	display: flex;
	flex-wrap: wrap;
	margin-top: 30px;
	margin-left: -40px;
}

.ex-list li{
	width: calc(100% / 3 - 40px);
	margin-left: 40px;
}



/*----------------------------------------------------------------------
price
----------------------------------------------------------------------*/

.price{
	padding: 0 0 120px;
}

.price-list{
	display: flex;
	flex-wrap: wrap;
	margin: 40px 0 60px -50px;
}

.price-list li{
	width: calc(100% / 3 - 50px);
	margin-left: 50px;
	text-align: left;
}

.price-name{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	margin-bottom: .25em;
}

.price-name::before{
	position: absolute;
	content: '';
	top: 0;
	bottom: 0;
	margin: auto;
	height: 2px;
	width: 100%;
	border-bottom: 2px dotted #231815;
	z-index: -1;
}

.price-name span{
	background: #fff;
}

.price-name span:first-of-type{
	padding-right: 10px;	
}

.price-name span:last-of-type{
	font-size: clamp(2rem, 1.92rem + 0.4vw, 2.4rem);
	padding-left: 10px;
}

.price-txt{
	text-align: justify;
	line-height: 1.8;
}


.handbook{
	display: flex;
	align-items: center;
	padding: 0 10%;
}

.hb-txtbox{
	padding: 0 50px 0 0;
}

.hb-ttl{
	font-family: 'Noto Sans JP',"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	background: #BCE8B4;
	padding: 20px;
}

.hb-txt{
	margin-top: 1em;
	text-align: left;
}

/*----------------------------------------------------------------------
shop
----------------------------------------------------------------------*/

.shop .ttl{
	margin-bottom: 30px;
}

.shop-ttl{
	font-family: 'Noto Sans JP',"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	font-size: clamp(1.8rem, 1.68rem + 0.6vw, 2.4rem);
	font-weight: 500;
	margin: 0 auto .25em;
}

.shop-img{
	margin-bottom: 40px;
}

.shop dt{
	background: #BCE8B4;
	padding: 5px 10px;
	text-align: left;
}

.shop dd{
	padding: 10px 10px 0;
	text-align: left;
	margin-bottom: 1em;
}

.gmap{
	margin: 10px auto 40px;
	width: 100%;
}

.greet-txt{
	text-align: justify;
	line-height: 2.2;
}

/*----------------------------------------------------------------------
history
----------------------------------------------------------------------*/

.history{
	padding: 120px 0 60px;
}

.his-list{
	margin-top: 30px;
	text-align: left;
}

.his-list li{
	margin-bottom: 10px;
}

@media screen and (max-width: 1220px) {
.aboutWrap {
    align-items: center;
	flex-direction: column;
}
.ab-box {
	justify-content: center;
    flex-wrap: wrap;
}	
.ab-txt {
    padding-right: 0;
}
.ab-img {
    bottom: 0;
    left: 0;
    right: 0;
    margin: 15px auto 0;
}

.fb_block{
	margin-top: 30px;
}
}

@media screen and (min-width: 769px) {
}
 @media screen and (max-width: 768px) {

	 
/*----------------------------------------------------------------------
mv
----------------------------------------------------------------------*/	 
.slick-prev {
	left: 15px;
}
.slick-next {
  right: 15px;
}
.slick-arrow {
  width: 30px;
  height: 30px;
}
	 
/*----------------------------------------------------------------------
about・facebook
----------------------------------------------------------------------*/

.about {
    padding: 40px 0 80px;
}
.about::before {
  width: 200px;
  height: 137px;
}	 
.aboutWrap {
  padding-bottom: 40px;
}
.ab-img {
  width: 180px;
}	 

.fb_block iframe,
.fb_block span{
	width: 100%!important;
}

.fb-page{
		display:block !important;
		width:100%;
		max-width:500px;
		margin-left:auto;
		margin-right:auto;
}

/*----------------------------------------------------------------------
award
----------------------------------------------------------------------*/
	 
.award {
  padding: 0 0 30px;
}
	 
.award .ttl {
  margin-bottom: 30px;
}
.award-list li {
	width: calc(100% / 1 - 50px);
	padding: 15px;
	margin-bottom: 30px;
}	
/*----------------------------------------------------------------------
example
----------------------------------------------------------------------*/
.example {
  padding: 0 0 40px;
}
	 
.ex-list {
	margin-top: 20px;
}
	 
.ex-list li {
  width: calc(100% / 1 - 40px);
  margin-bottom: 20px;
}
/*----------------------------------------------------------------------
price
----------------------------------------------------------------------*/
.price {
  padding: 0 0 60px;
}
.price-list {
	margin: 20px 0 30px -50px;
}
.price-list li {
  width: calc(100% / 1 - 50px);
  margin-bottom: 20px;
}	 
.handbook {
  padding: 0;
  flex-direction: column;
}	
.hb-txtbox {
  padding: 0 0 15px;
}
.hb-ttl {
  padding: 15px;
  font-size: 1.6rem;
}
/*----------------------------------------------------------------------
shop
----------------------------------------------------------------------*/
.shop .ttl {
  margin-bottom: 20px;
}
.shop-img {
  margin-bottom: 20px;
}
.gmap {
  margin: 10px auto 20px;
  height: 300px;
}
.greet-txt {
  line-height: 2;
}
/*----------------------------------------------------------------------
history
----------------------------------------------------------------------*/
.history {
  padding: 60px 0 20px;
}	 
.his-list {
	margin-top: 20px;
}
.his-list li {
  text-indent: -1em;
  padding-left: 1em;
}
	 
footer {
	margin: 60px 0 0;
}
	 
}
 @media screen and (max-width: 480px) {
	 
.award-img{
	width: 80%;
}
	 
}