@charset "utf-8";
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("./webfonts/fa-solid-900.eot");
  src: url("./webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("./webfonts/fa-solid-900.woff2") format("woff2"), url("./webfonts/fa-solid-900.woff") format("woff"), url("./webfonts/fa-solid-900.ttf") format("truetype"), url("./webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

/*-----------------------------

　リセットCSS + サイト共通設定

------------------------------*/

/* 全ての要素に対する余白初期値設定 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, main, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
	margin:0;
	padding:0;
	border: 0;
}

/* 全頁共通スタイル
-------------------------------------------------------------------------------------------------------------------------------------------------*/

#wrap{
	width:940px;
	margin:0 auto;
}

/* モバイル */
@media screen and (max-width:640px){
	#wrap{
		width:100vw;
	}
}

/* デフォルト文字設定 -----------------------------------*/
body{
	color:#594a4e;
	font-family:"Yu Mincho","ヒイラギノ明朝 ProN",sans-serif;

}

/* リストマーカーを非表示 ------------------------------*/
ul,ol{
	list-style-type:none;
}

/* ヘッダー:ロゴ画像の中央ぞろえ -----------------------*/
#header{
	text-align:center;
	margin-bottom:40px;
}

/* モバイル */
@media screen and (max-width:640px){
	#header img{
		width:70%;
	}
}

/* フッター -------------------------------------------*/
#footer{
	clear:both;
	height:70px;
	text-align:center;
	font-size:0.85em;
	padding-top:20px;
}

/* グローバルナビゲーション cssスプライト--------------*/
#gnav a{
	display:block;
	width:235px;
	height:50px;
	background:url(img/g_menu.jpg)no-repeat;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	color:#594a4e;
}

/* Gナビ モバイル時非表示-------------*/
@media screen and (max-width:460px) {
   #gnav{
     display:none;
   }
 }
 
/* Gナビ デフォ -----------------------*/
#gnav .gnav1 a{background-position:0 0;}
#gnav .gnav2 a{background-position:-235px 0;}
#gnav .gnav3 a{background-position:-470px 0px;}
#gnav .gnav4 a{background-position:-705px 0px;}

/* Gナビ マウスオーバー ---------------*/
#gnav .gnav1 a:hover{background-position:0 -50px;}
#gnav .gnav2 a:hover{background-position:-235px -50px;}
#gnav .gnav3 a:hover{background-position:-470px -50px;}
#gnav .gnav4 a:hover{background-position:-705px -50px;}

/* Gナビ 現在地 -----------------------*/
.tpp #gnav .gnav1 a{background-position:0 -100px;}
.item #gnav .gnav2 a{background-position:-235px -100px;}
.access #gnav .gnav3 a{background-position:-470px -100px;}
.contact #gnav .gnav4 a{background-position:-705px -100px;}

/* グローバルナビゲーション cssスプライト ここまで----------*/


/* Gナビ cssスプライト読込不可の設定 -----------------------*/
#gnav{
	background-color:#deff8b;
}

#gnav ul{
	overflow:hidden;
}

#gnav li{
	float:left;
	width:235px;
}

#gnav a{
	display:block;
	text-align:center;
	text-decoration:none;
	color:#8cba51;
}

#gnav a:hover{
	color:#594a4e;
}

/* ハンバーガーメニュー -------------------------------------------*/
*, *:before, *:after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
ol, ul {
	list-style: none;

}
a {
	text-decoration: none;
	color: inherit;
}
.cp_cont {
	height: 65vh;
	z-index:130;
}
.cp_offcm01 {
	position: fixed;
	z-index:130;
	top: 20px;
	right: 20px;
	display: inline-block;
}
/* menu */
.cp_offcm01 .cp_menu {
	position: fixed;
	z-index:130;
	top: 0;
	right: -100vw;
	width: 250px;
	height: 100%;
	cursor: pointer;
	-webkit-transition: 0.53s transform;
	        transition: 0.53s transform;
	-webkit-transition-timing-function: cubic-bezier(.38,.52,.23,.99);
	        transition-timing-function: cubic-bezier(.38,.52,.23,.99);
	background-color: #607D8B;
	opacity: 0.8;
}
.cp_offcm01 .cp_menu ul {
	margin: 0;
	padding: 0;
}
.cp_offcm01 .cp_menu li {
	list-style: none;
}
.cp_offcm01 .cp_menu li a {
	display: block;
	padding: 20px;
	text-decoration: none;
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
}

.cp_offcm01 #cp_toggle01 {
	position: absolute;
	display: none;
	opacity: 0;
}
.cp_offcm01 #cp_toggle01:checked ~ .cp_menu {
	-webkit-transform: translateX(-100vw);
	        transform: translateX(-100vw);
}
/* menu toggle */
.cp_offcm01 #cp_toggle01 ~ label {
	display: block;
	padding: 0.5em;
	cursor: pointer;
	-webkit-transition: 0.5s transform;
	        transition: 0.5s transform;
	-webkit-transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	        transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	text-align: center;
	color: #333333;
}
.cp_offcm01 #cp_toggle01:checked ~ label {
	-webkit-transform: translateX(-250px);
	        transform: translateX(-250px);
}
.cp_offcm01 #cp_toggle01 ~ label::before {
	font-family: 'Font Awesome 5 Free';
	content: '\f0c9';
	font-size: 2em
}
.cp_offcm01 #cp_toggle01:checked ~ label::before {
	content: '\f00d';
}
/* contents */
.cp_contents {
	color: #333333;
	text-align: center;
}

/* ハンバーガーメニュー PC時非表示 ---*/
@media screen and (min-width:461px) {
	.cp_cont{
		display:none;
	}
}

/* トップへ戻るボタン ------------------------------------*/
#pagetop {
	position: fixed;
	bottom: 50px;
	right: 30px;
}
/* モバイル時 非表示-----------------*/
@media screen and (max-width:460px) {
	#pagetop{
		display:none;
	}
 }
/* 全頁共通スタイル ここまで
-------------------------------------------------------------------------------------------------------------------------------------------------*/


/* 各ページスタイル Topページ
-------------------------------------------------------------------------------------------------------------------------------------------------*/

/* 見出し2共通スタイル---------------------------------------*/
.top_h2{
	text-align:center;
	font-size:2em;
	font-weight:400;/* 文字の太さ */
	letter-spacing :0.5em;/* 文字間隔 */
	margin:70px 0 50px;
}

/* モバイル */
@media screen and (max-width:640px){
	.top_h2{
		text-align:center;
		font-size:1.5em;
		font-weight:400;/* 文字の太さ */
		letter-spacing :0.5em;/* 文字間隔 */
		margin:70px 0 50px;
	}

}

/* スライド------------------------------------------------*/


/*スライド コピペ ここから------- */

.slideShow {
	margin: 50px auto 30px auto;
	width: 800px;
	text-align: left;
	position: relative;
}

.slideShow ul {
	width: 100%;
}

.slideShow ul li {
	top: 0;
	left: 0;
	width: 100%;
	display: none;
	position: absolute;
}

.slideShow ul li img {
	width: 100%;
}

@media only screen and (max-width: 800px) {
	#wrapper {
		width: 90%;
	}

	.slideShow {
		width: 100%;
	}
}

/* PagiNation
--------------------------- */
.pagiNation {
	bottom: 20px;
	left: 0;
	width: 100%;
	height: 15px;
	text-align: center;
	position: absolute;
	z-index: 110;
}

.pagiNation a {
	margin: 0 10px;
	width: 15px; /* ●の幅のサイズ */
	height: 15px; /* ●の高さのサイズ */
	display: inline-block;
	overflow: hidden;
	background: #deff8b; /* ●のカラー指定 */
	border:none; /* #594a4e 1px solid; */ /* ●の線の種類、色の指定 */
	border-radius: 50%;/* 要素の角の丸みを指定して●を作る。数値が低いほど■ぽくなる */
	transition: all 0.2s ease-in-out;
}

.pagiNation a:hover {
	opacity: 0.6;
}

.pagiNation a.pnActive {
	background: #8cba51; /* ●の現在地の色指定 */
}

.pagiNation a.pnActive:hover {
	opacity: 1;
}

/* SideNavi
------------------------- */
.slideShow .btnPrev,
.slideShow .btnNext {
	margin-top: -25px;
	top: 50%;
	width: 50px;
	height: 50px;
	position: absolute;
	z-index: 105;
	transition: all 0.2s ease-in-out;
}

.slideShow .btnPrev {
	left: 15px;
	background: transparent url(img/btnPrev.png) no-repeat center center;/* サイドボタン(Prev)を表示させる */
}

.slideShow .btnNext {
	right: 15px;
	background: transparent url(img/btnNext.png) no-repeat center center;/* サイドボタン(Next)を表示させる */
}

.slideShow .btnPrev:hover,
.slideShow .btnNext:hover {
	opacity: 0.6;
}


/* ごあいさつ ------------------------------------------------*/

#aisatu p{
	line-height:4em;/* 行間 */
	text-align:center;
}

/* モバイル */
@media screen and (max-width:640px){
	#aisatu p{
		line-height:2;/* 行間 */
		text-align:center;
		padding:0 5%;
		font-size:0.8em;
	}
}

/* Access ---------------------------------------------------*/

/* 外観写真 --------------*/
.gaikan{
	margin-top:20px;
	margin-left:40px;
	margin-bottom:50px;
	float:left;
}

/* モバイル */
@media screen and (max-width:640px){
	.gaikan{
		margin-top:20px;
		margin-bottom:30px;
		width:80%;
		float:left;
	}
}

/* 店舗ロゴ -------------*/
.g_rogo{
	margin-top:20px;
	margin-right:40px;
	margin-bottom:40px;
	width:450px;
	height:225px;
	float:right;
}

/* モバイル */
@media screen and (max-width:640px){
	.g_rogo{
		margin-top:10px;
		margin-right:30px;
		margin-bottom:40px;
		width:80%;
		height:80%;
		float:right;
	}

}

/* 店舗情報 --------------*/
.date{
	float:right;
	width:450px;
	line-height:3em;
}

dt{
	clear:left;
	float:left;
}

/* モバイル */
@media screen and (max-width:640px){
	.date{
		font-size:0.9em;
		width:350px;
		line-height:2em;
		margin-bottom:30px;
	}

}
/* グーグルマップ -------------*/
.gmap{
	width:800px;
	height:600px;
	margin:0 auto;
	clear:both;
}
.gmap iframe{
	width:100%;
	height:100%;
	
}

/* モバイル */
@media screen and (max-width:640px){
	.gmap{
		width:80vw;
		height:300px;
	}

}

/* 各ページスタイル Itemページ
-------------------------------------------------------------------------------------------------------------------------------------------------*/

/* カテゴリMemu --------------------------------------------*/
#category{
	margin:40px 0 60px;
}

#category ul{
	overflow:hidden;
}

#category li{
	float:left;
	width:235px;
	position: relative;
	display: inline-block;
	margin: 47px 0;
	text-shadow: 0 0 2px white;
}

#category li:before {
	content: "";
	position: absolute;
	background: #ffc707;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	z-index: -1;
}

#category a{
	display:block;
	text-align:center;
	font-size:1.3em;
	font-weight:600;
	color:#594a4e;
	text-decoration: none;/* text-decoration 下線・上線・取り消し線・点滅を指定するプロパティ。noneで線無しにする。------*/
}

#category a:hover{
	color:#8cba51;
}

/* カテゴリメニュー モバイル時非表示-------------*/
@media screen and (max-width:460px) {
	#category{
		display:none;
	}
 }

/* 見出し2共通スタイル --------------------------------------*/

#contents h2{
	width:940px;
	position: relative;
	padding: 0 .5em .5em 1.7em;
	border-bottom: 1px solid #594a4e;
	margin-bottom:50px;
	clear:left;
	float:left;
	}
	
#contents h2:after {
	position: absolute;
	top: .4em;
	left: .4em;
	z-index: 2;
	content: '';
	width: 12px;
	height: 12px;
	background-color: #594a4e;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* 庄野君に教えてもらったやつ 子要素にfloatすると親要素の高さがなくなる状態を解除--*/
/* htmlの各カテゴリの<section>にclass="clearfix"とクラス名を付ける。 */
.clearfix:after{
	content:"";
	display: block;
	clear: both;
}

/* 見出し3共通スタイル--------------------------------------*/
#contents h3{
	padding: .25em 0 .25em .75em;
	border-left: 6px solid #594a4e;
	width:500px;
	float:right;
}

/* モバイル */
@media screen and (max-width:640px){ /*640px以下のみh3を画像の上に表示できるか？*/
	#contents h3{
	padding: .25em 0 .25em .75em;
	border-left: 6px solid #594a4e;
	width:95vw;
	float:right;
	}
}
/* 商品画像 -----------------------------------------------*/
.gazou{
	clear:left;
	float:left;
	margin-bottom:60px;
}

/* モバイル */
@media screen and (max-width:640px){
	.gazou{
	clear:left;
	float:left;
	margin-bottom:20px;
	width:100vw;
	}
}
/* 商品説明 -----------------------------------------------*/
.shouhin{
	width:500px;
	float:right;
}

/* モバイル */
@media screen and (max-width:640px){
.shouhin{
	width:95vw;
	font-size:90%;
	float:left;
	margin-left:10px;
	margin-bottom:40px;
		}
}
/* 各ページスタイル Contactページ
-------------------------------------------------------------------------------------------------------------------------------------------------*/
/* 見出し2 と <p>------------------------------------------------*/
#h2_form{
	text-align:center;
	margin:50px 0 50px;
	letter-spacing:0.5em;
}

#p_form{
	margin-left:200px;
}
	
/* モバイル */
@media screen and (max-width:640px){
	#p_form{
	font-size:90%;
	width:90vw;
	margin-left:20px;
	}
	
	#h2_form{
		text-align:center;
		font-size:1.5em;
		font-weight:400;/* 文字の太さ */
	}
}

/* フォーム 全体 ------------------------------------------*/
#form{
	width:460px;
	margin:50px auto 50px;
}

/* フォーム テキスト -------------*/
.msr_text_04 {
	padding-bottom: 20px;
	width: 460px;
}

.msr_text_04 label {
	display: block;
	font-size: 1em;
	padding-bottom: 5px;
}

.msr_text_04 input[type=text] {
	border: 3px solid #594a4e;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	color: #000000;
	font-size: 13px;
	padding: 10px;
	height: 40px;
	width: 460px;
}

/* フォーカスしたら色変更-------------*/
.ef input[type='text']:focus {
	border: 5px solid #8cba51;
	outline: none;
}
/* フォーム ラジオボタン -------------*/
.msr_radio_04 {
	padding-bottom: 20px;
}

.msr_radio_04 p {
	font-size: 1em;
	padding-bottom: 5px;
}

.msr_radio_04 input[type=radio] {
	display: none;
	margin: 0;
}

.msr_radio_04 input[type=radio] + label {
	cursor: pointer;
	display: inline-block;
	font-size: 1em;
	line-height: 1.5px;
	margin-right: 12px;
	padding: 0 0 0 30px;
	position: relative;
}

.msr_radio_04 input[type=radio] + label::before {
	border: 3px solid #594a4e;
	border-radius: 50%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	content: "";
	display: block;
	margin-top: -9px;
	position: absolute;
	left: 0;
	top: -3px;
	height: 24px;
	width: 24px;
}

.msr_radio_04 input[type=radio]:checked + label::after {
	background: #594a4e;
	border-radius: 50%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	content: "";
	display: block;
	margin-top: -4px;
	position: absolute;
	left: 6px;
	top: -2px;
	height: 12px;
	width: 12px;
}


/* フォーム テキストエリア -------------*/
.msr_textarea_04 {
	padding-bottom: 10px;
	width: 460px;
}
.msr_textarea_04 label {
	display: block;
	font-size: 1em;
	padding-bottom: 5px;
}

.msr_textarea_04 textarea {
	border: 3px solid #594a4e;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	color: #000000;
	font-size: 1em;
	padding: 10px;
	height: 210px;
	width: 460px;
}

/*フォーカスしたら色を変える*/
.textarea:focus {
	border: 5px solid #8cba51;
	outline: none;
}	
	
/* 送信ボタン ----------------------*/
.msr_sendbtn_04 {
	margin:10px auto 10px;
	position: relative;
	height: 50px;
	width: 150px;
}

.msr_sendbtn_04 input[type=submit] {
	background: #594a4e;
	background-position: 10px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border: none;
	color: #FFFFFF;
	cursor: pointer;
	font-size: 14px;
	transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-webkit-transition: 0.2s ease-in-out;
	height: 50px;
	width: 150px;
}

.msr_sendbtn_04:before {
	border: 6px solid transparent;
	border-left: 6px solid #FFFFFF;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	content: "";
	display: inline-block;
	height: 12px;
	position: absolute;
	top: 20px;
	left: 20px;
	vertical-align: middle;
	width: 6px;
	z-index: 10;
}

.msr_sendbtn_04 input[type=submit]:hover {
	opacity: 0.6;
}

.msr_sendbtn_04_disabled input[type=submit]{
	background: #FFFFFF;
	border: 5px solid #DDDDDD;
	color: #DDDDDD;
	cursor: default;
}
.msr_sendbtn_04_disabled:before {
	border-left: 6px solid #DDDDDD;
	content: "";
}
.msr_sendbtn_04_disabled input[type=submit]:hover {
	opacity: 1;
}

/* モバイル */
@media screen and (max-width:640px){
	/* フォーム全体のサイズを80vwにする */
	#form{
		margin:50px auto;
		width:80vw;
	}
	/* 460pxが指定してある、テキスト・テキストエリアの外枠と中のサイズを80vwに対して100%となるようにする */
	.msr_text_04,
	.msr_text_04 input[type=text],
	.msr_textarea_04,
	.msr_textarea_04 textarea {
		width:100%;
	}
}

/* フォーム 全体 -ここまで-----------------------------------*/