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

/* 
------------------------------
リセットCSS
------------------------------
*/	
html{
	font-size: 62.5%;/* ルートのフォントサイズ10px */
} 
body{
	font-size:14px;
	font-size:1.4em;/* 14px*/
	line-height:1.5;
}	
body{
	width:100%;
	margin:0;
	padding:0;
	letter-spacing:0.05em;
	color:#5C4C2D;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body{
	/*スマホで勝手に文字が大きくなる対策*/
	-webkit-text-size-adjust: 100%; 
} 
body img{border:0;}

/* ウィンドウサイズに合わせて画像サイズを自動で伸縮させる */
img,iframe{
	max-width:100%;
	height:auto;
}
/* ウィンドウサイズに合わせて画像サイズを自動で伸縮させる */
 

ul,ol{
	list-style:none;
	margin:0;
	padding:0;
}

p{
	margin:0;
	padding:0;
}
p.indent{
	padding-left:1em;
	text-indent:-1em;
}

/*リンク画像透明*/
a:hover img{
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter: "alpha(opacity=70 )";
	background:#FFF;
}
/*リンク画像透明*/

/*リンク下線有り*/
a{text-decoration:underline;}
/*リンク下線有り*/

/*リンク色*/
a:link{color:#0033cc;/*デフォルト*/}
/*リンク色*/

/*リンクhover時下線*/
a:hover{text-decoration:none !important;} 
/*リンクhover時下線*/

/* リンク画像の右側に＞ */
.arrow {
	position: relative;
	text-decoration: none;
}
.arrow::after {
	content: '';
	display: block;
	width: 6px; /* 矢印の大きさの指定 */
	height: 6px; /* 矢印の大きさの指定 */
	border-top: 2px solid #0000ff; /* 矢印の太さの指定 */
	border-left: 2px solid #0000ff; /* 矢印の太さの指定 */
  transform: rotate(135deg); /* 矢印の角度の指定 */
	position: absolute; /* 矢印の位置の指定 */
}
/* リンク画像の右側に＞ */


/* ---ClearFix--- */ 
.clearfix:after{
	content: ".";
	display: block;
	 height: 0px;
	 clear: both;
	 visibility: hidden; 
} 
.clearfix{
	display: inline-block;
} 
/* Hides from IE Mac \*/ 
* html .clearfix{
	height: 1px; 
} 
.clearfix{
    display: block;
} 
/* ---ClearFix--- */

/*float解除*/
.clear{
	clear:both;
	font-size: 1.0rem;
	line-height: 0;
}   
/*float解除*/

.bold{font-weight:bold;}
.red{color:#F00;}
.blue{color:#00F;}
.green{color:#0C0;}
.yellow{color:#FF0;}

.underline{text-decoration: underline;}

/*width*/
.width-98{
	width: 98% !important;
	margin: auto;
}
.width-96{
	width: 96% !important;
	margin: auto;
}
.width-95{
	width: 95% !important;
	margin: auto;
}
.width-94{
	width: 94% !important;
	margin: auto;
}
.width-92{
	width: 92% !important;
	margin: auto;
}
.width-90{
	width: 90% !important;
	margin: auto;
}
.width-88{
	width: 88% !important;
	margin: auto;
}
.width-85{
	width: 85% !important;
	margin: auto;
}
.width-80{
	width: 80% !important;
	margin: auto;
}
/*width*/

/*下margin*/
.margin-bottom1{
	margin-bottom:1% !important;
}
.margin-bottom2{
	margin-bottom:2% !important;
}
.margin-bottom3{
	margin-bottom:3% !important;
}
.margin-bottom4{
	margin-bottom:4% !important;
}
.margin-bottom5{
	margin-bottom:5% !important;
}
.margin-bottom10{
	margin-bottom:10% !important;
}
/*下margin*/

/*line-height*/
.line-height11{
	line-height:1.1 !important;
}
.line-height12{
	line-height:1.2 !important;
}
.line-height13{
	line-height:1.3 !important;
}
.line-height14{
	line-height:1.4 !important;
}
.line-height15{
	line-height:1.5 !important;
}
/*line-height*/
/* 
------------------------------
リセットCSS
------------------------------
*/


/* ▼hヘッダー▼ */
#header-area{
  display: flex;
  align-items: center;
  justify-content: space-between;
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 0;
}
p#top-logo{
  width: 28%;
  min-width: 120px;
  margin: 0;
	padding: 0;
}
ul#sns{
  display: flex;
  width: 23.8%;
  min-width: 150px;
	margin: 0 1% 0 0;
	padding: 0;
}
ul#sns li{
  min-width: 25px;
  margin: 0 1% 0 0;
  box-sizing: content-box;
}
/* ▲ヘッダー▲ */

/* ▼ナビ▼ */
nav ul{
  display: flex;
  flex-wrap: wrap;
	width: 100%;
	margin: 0 auto 2% auto;
	padding: 0;
}
nav ul li{
	width: calc(33.3333% - 1px);
	margin: 0 1px 1px 0;
	padding: 0;
  line-height: 0;
  box-sizing: content-box;
}
/* ▲ナビ▲ */

/* ▼パンくず▼ */
#pankuzu{
	width:100%;
	margin:0 auto 0 auto;
	padding:0 0 2% 0;
	font-size: 1.0rem;
	letter-spacing: 0;
}
#pankuzu ol{
	margin:0 2% 0 1%;
	padding:0;
	list-style:none;
}
#pankuzu li{
	display:inline;
	margin:0;
	padding:0;
}
/* ▲パンくず▲ */

/* ▼メイン▼ */
h1{
  margin: 0;
  padding: 0;
}
/* ▼index▼ */
#back1{
  background: url("../img/back1.jpg") no-repeat;
  background-size: cover;
}
#back2{
  background: url("../img/back2.jpg") no-repeat;
  background-size: cover;
}
#back3{
  background: url("../img/back3.jpg") no-repeat;
  background-size: cover;
}
#back4{
  background: url("../img/back4.jpg") no-repeat;
  background-size: cover;
}
#back5{
  background: url("../img/back5.jpg") no-repeat;
  background-size: cover;
}
#back6{
  background: url("../img/back6.jpg") no-repeat;
  background-size: cover;
}
.contents-box{
  width: 98%;
  margin:0 auto 1% auto;
  padding: 5% 0 10% 0;
  box-sizing: border-box;
}
.contents-box h2{
  margin: 0 0 3% 0;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1.4em;
  text-align: center;
}
.contents-box p{
	width: 96%;
	margin: 0 auto 5% auto;
	padding: 0;
	font-size: 1.2rem;
	line-height: 1.8em;
  text-align: center;
}
p.next-detail{
	width: 33%;
  min-width: 200px;
	margin: 0 auto 0 auto;
	padding: 0;
}
/* ▲index▲ */

.white-box{
  width: 98%;
  margin:0 auto 1% auto;
  padding: 5% 0 5% 0;
}
.white-box h2{
  margin: 0 0 5% 0;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1.4em;
  text-align: center;
}
.white-box p{
	width: 96%;
	margin: 0 auto 0 auto;
	padding: 0;
	font-size: 1.2rem;
	line-height: 1.8em;
  text-align: center;
}
.gray-box{
  background-color: #F7F7F7;
  width: 98%;
  margin:0 auto 1% auto;
  padding: 5% 0 5% 0;
}
.gray-box h2{
  margin: 0 0 5% 0;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1.4em;
  text-align: center;
}
.gray-box p{
	width: 96%;
	margin: 0 auto 0 auto;
	padding: 0;
	font-size: 1.2rem;
	line-height: 1.8em;
  text-align: center;
}
.gray-box ul{
	width: 90%;
	margin: 0 auto 0 auto;
	padding: 0;
	font-size: 1.2rem;
	line-height: 1.5em;
  text-align: left;
}
.gray-box ul li{
	margin: 0 0 2% 0;
	padding: 0;
  padding-left:1em;
	text-indent:-1em;
}
p.go-purchase{
	width: 33%;
  min-width: 200px;
	margin: 0 auto 0 auto;
	padding: 0;
}



#shop{
  width: 95%;
  margin: 0 auto 0 auto;
}
#shop .left-box{
	width: 100%;
  margin: 0 auto 0 auto;
}
#shop .right-box{
	width: 100%;
  margin: 0 0 4% 0;
  font-size: 1.2rem;
}
#shop .right-box p#address{
  margin: 0 0 2% 0;
}
#shop .right-box p.center{
  text-align: center;
}

#map{
	position: relative;
	width: 94%;
	padding-top: 56.25%;
	margin: 0 auto 5% auto;
	overflow:auto;
	border:1px solid #ccc;
}
#map iframe{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border:none;
    display:block;
}

/* ▲メイン▲ */

/* ▼フッター▼ */
footer{
  background-color: #C9BC9F;
  margin: 0;
  padding: 2% 0 1% 0;
}
p#footer-logo{
  width: 28%;
  min-width: 150px;
  margin: 0 auto 3% auto;
  padding: 0;text-align: center;
}
footer ul{
  display: flex;
  flex-wrap: wrap;
  width: 70%;
  margin: 0 auto 5% auto;
  padding: 0;
}
footer ul li{
	width: 50%;
	margin: 0 0 2% 0;
	padding: 0;
  font-size: 1.2rem;
  text-align: center;
}
footer ul li a:link{
	color: #5C4C2D;
}
footer ul li a:hover{
	color: #8E8067;
}
footer ul li a:visited{
	color: #5C4C2D;
}
p#copyright{
	width: 100%;
	margin:0;
	padding:0;
	text-align:center;
	font-size:1.0rem;
}
/* ▲フッター▲ */





/* 
------------------------------
------------------------------
▼320px～350px用の記述▼
------------------------------
------------------------------
*/
 @media screen and (min-width: 320px) and (max-width: 350px){

/* ▼h2下の説明▼ */
.contents-box p{
	font-size: 1.1rem;
}
.white-box p{
	font-size: 1.1rem;
}
.gray-box p{
	font-size: 1.1rem;
}
.gray-box ul{
	font-size: 1.1rem;
}
/* ▲h2下の説明▲ */

}
/* 
------------------------------
------------------------------
▲320px～350px用の記述▲
------------------------------
------------------------------
*/





/* 
------------------------------
------------------------------
▼560px以上用（タブレット／PC用）の記述▼
------------------------------
------------------------------
*/
 @media screen and (min-width : 560px ){

/* 
------------------------------
リセットCSS
------------------------------
*/
html{
	font-size: 62.5%;/* ルートのフォントサイズ10px */
} 
body{
	font-size:1.6em;/* 16px*/
	line-height:1.5;
}
	
body{
	width:900px;
  margin:0 auto 0 auto;
	letter-spacing:0.1em;
}

/*リンク下線無し*/
a{text-decoration:none;}
/*リンク下線無し*/

/*リンクhover時下線*/
a:hover{text-decoration:underline !important;} 
/*リンクhover時下線*/
/* 
------------------------------
リセットCSS
------------------------------
*/


/* ▼パンくず▼ */
#pankuzu{
	font-size: 1.3rem;
}
/* ▲パンくず▲ */

/* ▼メイン▼ */
/* ▼index▼ */
.contents-box h2{
  font-size: 2.8rem;
}
.contents-box p{
	font-size: 2.0rem;
}
/* ▲index▲ */
.white-box h2{
  font-size: 2.8rem;
}
.white-box p{
	font-size: 1.8rem;
}
.gray-box h2{
  font-size: 2.8rem;
}
.gray-box p{
	font-size: 1.8rem;
}
.gray-box ul{
  width: 85%;
	font-size: 1.8rem;
}
.gray-box ul li{
	margin: 0 0 0.5% 0;
}

#shop{
  width: 95%;
  margin: 0 auto 0 auto;
}
#shop .left-box{
	width: 80%;
  margin: 0 auto 0 auto;
}
#shop .right-box{
	width: 80%;
  margin: 0 auto 4% auto;
  font-size: 1.6rem;
}
/* ▲メイン▲ */
   
/* ▼フッター▼ */
footer ul li{
  font-size: 1.6rem;
}
p#copyright{
	font-size:1.3rem;
}
/* ▲フッター▲ */

}
/* 
------------------------------
------------------------------
▲768px以上用（タブレット／PC用）の記述▲
------------------------------
------------------------------
*/