@charset "utf-8";


@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Noto+Sans+JP:wght@300;400;700&family=Noto+Serif+JP:wght@300;400;500;700&family=Zen+Maru+Gothic:wght@400;500;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bilbo+Swash+Caps&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&display=swap');


/* CSS Document */


html {
    box-sizing: border-box;
}

*, 
*:before, 
*:after {
    box-sizing: inherit;
}



/*　　WEBフォント
------------------------------------------------------------------------------------------------------------*/



.m-gothic {font-family: 'Kosugi Maru', sans-serif;}
.gothic {font-family: 'Noto Sans JP', sans-serif;}
.mincho {font-family: 'Noto Serif JP', serif;}


.zen-maru {font-family: 'Zen Maru Gothic', sans-serif;}

.handdrow {font-family: 'Bilbo Swash Caps', cursive;}

.pen {font-family: 'Caveat', cursive;}





/*　　いろいろ見た目
------------------------------------------------------------------------------------------------------------*/

html, body{
	margin:0;
	padding:0;
	border:0;
	font-size: 16px;
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.5em;
	letter-spacing: 0.02em;
	color: #333;
	background-image: url("../img/background.jpg");
}


@media screen and (max-width: 960px)
and (max-width: 480px){
html, body{
	font-size: 14px;
}
}


.highlight a:hover *{
	 filter: alpha(opacity=50);
	 -moz-opacity:0.5;
	 opacity:0.5;
	 -webkit-transition: all .3s;
	 transition: all .3s;
	 }
	 

img {
	border: none;
}





a:link {color: #333;}
a:visited {color: #333;}
a:hover {color: #CCCCCC;}
a:active {color: #333333;}





.cb{
	/* floatを解除 */
	clear: both;
	margin: 0;
	padding: 0;
}





.img-auto img{
	max-width: 100%;
}





hr.gradation {
	margin: 50px auto 60px;
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}







/*　　コンテンツ幅
------------------------------------------------------------------------------------------------------------*/





.w1100 {
	max-width: 1100px;
	margin: 10px auto;
	padding: 0px 10px 10px 10px; 
	text-align: center;
}



.w1200 {
	max-width: 1100px;
	margin: 10px auto;
	padding: 0px 10px 10px 10px; 
	text-align: center;
}


.bg-gray {
	width: 100%;
	padding: 50px 0px;
	margin: 50px auto 100px;
	background: rgba(255,255,255,0.50);
}




@media screen and (max-width: 960px)
and (max-width: 480px){
	.w1100, .w1200 {
	width: 100%;
}
}









/*　　フォント
------------------------------------------------------------------------------------------------------------*/


.tx10 {font-size: 10px;}
.tx11 {font-size: 11px;}
.tx12 {font-size: 12px;}
.tx13 {font-size: 13px;}
.tx14 {font-size: 14px;}
.tx15 {font-size: 15px;}
.tx16 {font-size: 16px;}
.tx17 {font-size: 17px;}
.tx18 {font-size: 18px;}
.tx20 {font-size: 20px;}
.tx22 {font-size: 22px;}
.tx24 {font-size: 24px;}
.tx26 {font-size: 26px;}
.tx28 {font-size: 28px;}
.tx30 {font-size: 30px;}
.tx32 {font-size: 32px;}
.tx34 {font-size: 34px;}
.tx36 {font-size: 36px;}
.tx38 {font-size: 38px;}
.tx40 {font-size: 40px;}

.red {color: #C30;}
.blue {color: #336699;}
.green {color: #696;}
.orange {color: #F90;}
.pink {color:#FF6699;}
.brown {color: #624628;}
.gray {color: #999;}
.white {color: #FFF;}




.tx_ll {font-size: 150% !important;}
.tx_l {font-size: 120% !important;}
.tx_s {font-size: 80%;}
.tx_ss {font-size: 60%;}



.tx_big40 {
	font-size: 40px;
} 

.txtbox {
	width: 99%;
	text-align: justify;
}



.explan-box {
	width: 99%;
	margin: 50px auto 100px;
	text-align: center;
}




@media screen and (max-width: 768px) {
.tx_big40 {
	font-size: 40px;
} 
	
	
	
.explan-box {
	width: 95%;
	text-align: justify;
}
	
	}




/*　　PCのみ表示、スマホのみ表示の切り替え
------------------------------------------------------------------------------------------------------------*/

.pc { display:inline!important; }
.sp { display:none!important; }

@media screen and (max-width: 768px) {
.pc { display:none!important; }
.sp { display:inline!important; }
	}







/*　　ライン装飾
------------------------------------------------------------------------------------------------------------*/



.line_green{
	background:linear-gradient(transparent 60%, #A7FDA7 60%);
}

.line_blue{
	background:linear-gradient(transparent 60%, #C5EBFD 60%);
}

.line_yellow{
	background:linear-gradient(transparent 60%, #FFFF74 60%);
}


.line_pink{
	background:linear-gradient(transparent 60%, #FFD8E9 60%);
}











/*　　h
------------------------------------------------------------------------------------------------------------*/


h1 {
	width:100%;
	margin: 0;
	font-size: 13px;
	font-weight: normal;
	color: #333333;
	text-align: center;
}



h2 {
  position: relative;
  padding: 1.5rem;
  text-align: center;
	margin: 80px auto 150px;
	font-size: 34px;
	font-weight: lighter;
}

h2 span{
	font-size: 16px;
	font-weight: lighter;
	display: block;
	margin-top: 70px;
}

h2:before {
  position: absolute;
  bottom: -50px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  border-radius: 5px;
  background: #333333;
}





h3 {
  position: relative;
  padding: 1.5rem;
  text-align: center;
	font-family: 'Bilbo Swash Caps', cursive;
	font-weight: normal;
	margin: 80px auto 80px;
	font-size: 60px;
	color: rgba(55,43,27,0.8);
}

h3 span{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: lighter;
	display: block;
	margin-top: 70px;
}


h3 img{
	max-width: 100%;
}


/* 最初入れてた仕切り棒　使う場合はh3の下マージン150px

h3:before {
  position: absolute;
  bottom: -50px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  border-radius: 5px;
  background: #333333;
}

*/


/*  h4 は こだわり用  */

h4 {
	width: 90%;
	margin: 0 auto;
	position: relative;
	padding: 0 2rem .5rem;
	text-align: left;
	font-weight: normal;
	font-size: 20px;
	border-bottom: 1px dotted rgba(50,43,39,0.3);
	font-family: 'Noto Serif JP', serif;
}

h4 span {
  font-family: 'Bilbo Swash Caps', cursive;
  font-size: 500%;
  line-height: .8em;;
  position: absolute;
  bottom: -1.6rem;
  left: -15px;
	color: rgba(50,43,39,0.15);
}

.first {
	left: 5px;
}

.kodawari-tx {
	text-align: justify;
	width: 95%;
	margin: 10px auto 0px;
	padding: 0px 10px 0px 40px;
	font-size: 14px;
}





@media screen and (max-width: 768px) {
	
h2 { font-size: 26px; }
	
h3 { font-size: 50px; }

	
h4 {
	width: 98%;
	font-size: 18px;
}
	
.kodawari-tx {
	margin: 10px auto 50px;
	padding: 0px 10px 0px 25px;
}

}






	


/*　　ヘッダボタン
-------------------------------------------------------------------------------------------------------*/




.btn-head {
	width: 200px;
	text-decoration: none;
  display: inline-block;
  border: 1px solid #8C6900;
  position: relative;
  background: #8C6900;
  color: #FFFFFF !important;
  padding: 0.5rem 5rem 0.5rem 0rem;
	margin-right: 20px;
	
	 -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}


.no-hover a:hover {
	background-color: #EBE5D4 !important;
	color: #8C6900 !important;
}



.btn-head:before, .btn-head:after {
  content: "";
  position: absolute;
  display: block;
  transition: all 0.3s;
  right: 1.5rem;
  top: 50%;
	color: #8C6900 !important;
}

.btn-head:before {
  width: 2rem;
  height: 2px;
  background: #FFF;
  transform: translateY(-50%);
}

.btn-head:after {
  opacity: 0;
  width: 0;
  height: 0;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}


.btn-head:hover:before {
  width: 1.5rem;
	color: #8C6900 !important;
  background: #8C6900;
}

.btn-head:hover:after {
  width: 8px;
  height: 8px;
	color: #8C6900 !important;
	opacity: 1;
}












/*　　途中で出てくるヘッダナビゲーション
-------------------------------------------------------------------------------------------------------*/



header-nav {display: none;}

.clone-nav {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99998;
  width: 100%;
  transition: .3s;
  transform: translateY(-100%);
	background: rgba(173,163,150,0.8);
}

.is-show {
  transform: translateY(0);
}


.fixed-header {
	width: 1100px;
	margin: 0 auto;
	height: 75px;
}


@media screen and (max-width: 768px) {
	
	
.fixed-header {
	width: 100%;
	margin: 0 auto;
	height: 50px;
}
	
	.clone-nav img {
		height: 3rem;
		margin-top: 7px;
		margin-right: 1px;
	}

}









	
	






/*　　レスポンシブボックス（PC均等配置）
------------------------------------------------------------------------------------------------------------*/





/*---　　5列　　　---*/


.col_5{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_5 > div{
	width: 20%;
	padding: 10px;
}
.col_5 > div img{
	max-width: 100%;
}
.col_5 > div > div{
	position: relative;
	overflow: hidden
}
@media screen and (max-width: 960px) {
	.col_5 > div{
		width: 25%;
	}
}
@media screen and (max-width: 480px) {
	.col_5 > div{
		width: 33%;
	}
}








/*---　　4列　　　---*/


.col_4{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_4 > div{
	width: 25%;
	padding: 10px;
}


.col_4 > div img{
	max-width: 100%;
}

@media screen and (max-width: 960px) {
	.col_4 > div{
		width: 33.33333%;
	}
}
@media screen and (max-width: 480px) {
	.col_4 > div{
		width: 50%;
		padding: 5px;
	}
}








/*---　　3列　　　---*/

.col_3{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_3 > div{
	width: 33.3333%;
	padding: 10px;
}

.col_3 > div img{
	max-width: 100%;
}

@media screen and (max-width: 960px) {
	.col_3 > div{
		width: 50%;
	}
}
@media screen and (max-width: 480px) {
	.col_3 > div{
		width: 100%;
	}
}







/*---　　2列　　　---*/

.col_2{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	align-items: center;
}
.col_2 > div{
	width: 50%;
	padding: 10px;
}

.col_2 > div img{
	max-width: 100%;
}

@media screen and (max-width: 960px) {
	.col_2 > div{
		width: 50%;
	}
}
@media screen and (max-width: 480px) {
	.col_2 > div{
		width: 100%;
	}
}







/*---　　装飾　　　---*/

.decoration > div{
	border-right: dotted 1px #7C746B;
}

.decoration > div:last-child {
	border-right: none;
}

@media screen and (max-width: 960px) {
	.decoration > div{
		border: dotted 1px #BCB3A8;
	}
	
	.decoration > div:last-child {
		border-right: dotted 1px #BCB3A8;
	}
}




	



/*　　メインタイトル（イラスト付き）
-------------------------------------------------------------------------------------------------------*/


.ttl-illust img{
	max-width: 100%;
	margin: 50px auto;
}

@media screen and (max-width: 768px) {
.ttl-illust img{
	width: 90%;
}
}





	



/*　　囲み枠
-------------------------------------------------------------------------------------------------------*/


.kakomi {
	margin: 2em auto;
	padding: 1.2em 2em; /*内側の余白*/
	background: none; /*元のボックス背景色*/
	border:1px solid #948672 ; /*線の太さ・種類・色*/
	position: relative; /*配置（基準）*/
	display:inline-block;
	z-index: 0;
	
	font-size: 20px;
}

.kakomi::after {
	background-color: #BBB2A2; /*ずらしたボックスの背景色*/
	opacity: .5;
	border: none;
	content: '';
	position: absolute; /*配置（ここを動かす）*/
	top: 6px; /*上から7pxずらす*/
	left: 6px; /*左から7pxずらす*/
	width: 100%;
	height: 100%;
	mix-blend-mode: multiply; /* 乗算 */
	z-index: -1;
}




@media screen and (max-width: 768px) {
.kakomi {
	font-size: 14px;
}
}










	



/*　　商品紹介ページへのボタン
-------------------------------------------------------------------------------------------------------*/



.product_btn {
	position: relative;
	text-align: center;
  }

.product_btn a:hover{
	opacity: .6;
  }

.product_btn img {
  width: 40%;
	outline: 50px solid rgba(255,255,255,0.50);
	outline-offset: -50px;
  }

 .product_btn span {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
	 
	 font-family: 'Bilbo Swash Caps', cursive;
	 font-size: 60px;
  margin: 0;
  border: solid #4A341B 2px;
  padding: 30px 50px 25px 45px;
  color: #4A341B;
  text-decoration: none;
	 
box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
	 
text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
 
}

@media screen and (max-width: 768px) {
	
 .product_btn span {
	 font-size: 34px;
  padding: 20px 40px 15px 35px;
  text-decoration: none;
}
	
.product_btn img {
  width: 95%;
	outline: 20px solid rgba(255,255,255,0.50);
	outline-offset: -20px;
  }
}








/*　　ABOUT ページへのボタン
-------------------------------------------------------------------------------------------------------*/



.about_btn {
	position: relative;
	text-align: center;
  }

.about_btn a:hover{
	opacity: .6;
  }

.about_btn img {
  width: 40%;
	outline: 50px solid rgba(255,255,255,0.50);
	outline-offset: -50px;
  }

.about_btn span {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
	 
	 font-family: 'Bilbo Swash Caps', cursive;
	 font-size: 60px;
  margin: 0;
  border: solid #4A341B 2px;
  padding: 30px 50px 25px 45px;
  color: #4A341B;
  text-decoration: none;
	 
box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
	 
text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
 
}


.about_btn span p{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	letter-spacing: 0.05em;
	margin: 10px auto 0px;
}




@media screen and (max-width: 768px) {
	
 .about_btn span {
	 font-size: 34px;
  padding: 20px 40px 15px 35px;
  text-decoration: none;
}
	
	
.about_btn span p{
	font-size: 12px;
	letter-spacing: 0.05em;
}
	
.about_btn img {
  width: 95%;
	outline: 20px solid rgba(255,255,255,0.50);
	outline-offset: -20px;
  }
}










/*　　GoogleMapレスポンシブ
------------------------------------------------------------------------------------------------------------*/



.GoogleMap{
    position: relative;
    width: 100%;
    height: 0;
	padding-top: 30%;
	/*
    padding-top: 56.25%;　/*比率をお好みで*/
}

.GoogleMap iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	filter: sepia(10%) grayscale(50%);
}

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

.GoogleMap{
    width: 95%;
	margin: 0 auto;
	padding-top: 65%;
	/*
    padding-top: 56.25%;　/*比率をお好みで*/
}
	
}









/*　　SNSボタン
------------------------------------------------------------------------------------------------------------*/


/* ボタン全体 */
.sns {
	font-family:'Verdana',sans-serif;	
	border-radius: 4px;
	display: inline-block;
	width: 90%;
	font-size: 24px;
	transition: .4s;	
	text-decoration: none;
	
	padding: 9px 20px 5px 0px;
}


.sns:hover{
	color: #fff !important;
	text-decoration: none;
}


.sns.sns-btn{
	border: solid 1px #8C6900;
	color: #8C6900;
}


.sns.sns-btn:hover{
	border: solid 1px #8C6900;
	background: rgba(140,105,0,0.60);
}


/* ボタン内テキスト調整 */
.sns span{
	font-size: 16px;	
	position: relative;
	left: 10px;
	bottom: 3px;	
}

/* ulタグの内側余白を０にする */
ul.sns_place{
	list-style: none;
    margin:  0;
    padding: 0;
}

/* ボタン全体の位置 */
.sns_place{
	display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

/* ボタン同士の余白 */
.sns_place li{
flex: 0 0 40%;
text-align: center !important;
}



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

.sns {
	padding: 2px 20px 0px 0px;
}

/* ボタン同士の余白 */
.sns_place li{
flex: 0 0 48%;
}
	
}











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


.footer {
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.1em;
	padding: 20px 0;
}

.footer_info {
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.1em;
	margin-bottom: 40px;
}


	




/*　　目立つ予約ボタン
------------------------------------------------------------------------------------------------------------*/


.reserve-max {
	width: 100%;
	background-color: #362B1F;
	opacity: .8;
	padding: 30px 10px;
	text-align: center;
} 



a.bt-reserve {
  display: block;
  position: relative;
	
  width: 500px;
	margin: 0 auto;
	
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
	line-height: 50px;
	letter-spacing: 0.2em;
	
  border: 2px solid #FFFFFF;
	
  padding-left: 40px;
	
  color: #FFFFFF;
	
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}


a.bt-reserve i{  
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  font-size: 24px;
  text-align: center;
  background:#FFFFFF;
  color: #362B1F;
}

a.bt-reserve:hover{
  opacity: 0.7;
	background-color: #FFFFFF;
  color: #362B1F;
}



@media all and (max-width: 767px) {


a.bt-reserve {
  width: 95%;
}
}




/*　　目立つ衣装ギャラリーボタン
------------------------------------------------------------------------------------------------------------*/


.gallery-max {
	width: 100%;
	background-color: #3E0D0D;
	opacity: .8;
	padding: 30px 10px;
	text-align: center;
} 



a.bt-gallery {
  display: block;
  position: relative;
	
  width: 500px;
	margin: 0 auto;
	
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
	line-height: 50px;
	letter-spacing: 0.2em;
	
  border: 2px solid #FFFFFF;
	
  padding-left: 40px;
	
  color: #FFFFFF;
	
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}


a.bt-gallery i{  
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  font-size: 24px;
  text-align: center;
  background:#FFFFFF;
  color: #3E0D0D;
}

a.bt-gallery:hover{
  opacity: 0.7;
	background-color: #FFFFFF;
  color: #3E0D0D;
}



@media all and (max-width: 767px) {


a.bt-gallery {
  width: 95%;
}
}