/*
common.css
=================================================================

サイト共通設定CSS
---------------------------------------------------------

*/

@charset "utf-8";


/* 
HTMLタグに適用する共通のスタイル
=================================================================
*/


/* フォント設定 */
body {
	font: 14px/1.6 sans-serif;
	background-color: #FFFFFF;
	color: #000;
}

/* リンクの下線を非表示にする */
a {
	text-decoration: none;
}

a:hover {
	color: #344591;
	text-decoration: underline;
}

/* 画像リンクのホバー時に透明にする */
a:hover img{
	opacity:0.9;
}

hr {
	border: none;
	border-bottom: 1px solid #ccc;
}


/* 
サイトの大枠フレーム設定（領域）
=================================================================
サイトを以下の大きく３ブロックに分割

* site_header
* site_body
* site_footer

*/

/*コンテンツ有効幅
---------------------------------------------------------
上記大きなボックスの中に以下のボックスを設置し、枠の有効範囲を設定
*/

/* 940pxで揃える */
.contents_width{
	width: 940px;
	height: 100%;
	padding: 10px 10px 0 10px;
	margin: 0 auto;
	overflow: hidden;
}

.for_pc {
	display: inherit;
}

.for_sp {
	display: none;
}



/* 
ヘッダー／.site_header
=================================================================
*/

.site_header {
	background-image: url(../images/common/top_stripe_bg.jpg) ;
	background-repeat: repeat-x;
	background-color: #fff9d9 ;
	height: 100%;
	border-bottom: solid 1px #D8D8D8;
	box-shadow: 0 2px 3px #D8D8D8;
}

.site_header h1 ,
.site_header p {
	font-weight: normal;
	font-size: 15px;
}

/*左のボックス
---------------------------------------------------------
* サイトの説明
* サイトロゴ
* ナビゲーション
*/

/* ボックスの範囲設定　*/
.head_main{
	width: 560px;
	float: left;
	margin-bottom: 10px;
	padding-top: 12px;
	clear: both;
}

.logo {
	width: 201px;
	float: left;
}


/* ナビゲーションの設定 */
.head_nav {
	width: 350px;
	height: 63px;
	float: right;
}
.head_nav ul{
	width: 100%;
	height: 15px;
	margin-top: 33px;
	/* リストマークの画像を設定する */
	list-style-image: url(../images/common/headnav_icon.png);
	margin-left: 15px;

}
.head_nav ul li{
	float: left;
	height: 15px;
}
.head_nav ul li + li {
	margin-left: 20px;
}

.head_nav ul li a {
	letter-spacing: -1.2px;
}


/*右のボックス
---------------------------------------------------------
* お問い合わせはお気軽に
* メールでのお問い合わせ（リンク）
* フリーダイヤル電話番号
*/

/* ボックスの範囲設定 */
.company_info{
	width: 379px;
	float: right;
	margin-bottom: 10px;
}

.company_info .mail{
	width: 180px;
	height: 15px;
	display: inline-block;
	text-align: right;
	line-height: 1;
	margin-left: 10px;
	padding: 0;
}

.company_info .mail a {
	text-decoration: none;
	color: #333333;	
}

.company_info .mail a:hover {
	opacity: 0.5;
}

.company_info .mail a:before {
	content: '\f0e0';
 	font-family: "FontAwesome";
 	font-weight: 400;
	color: #FF7C0F;
	font-size: 18px;
	margin-right: 5px;
}

.company_info .mail a:after{
	content: '';
	width: 5px;
	height: 5px;
	border-top: 3px solid #ff2a00;	
	border-right: 3px solid #ff2a00;
	transform: rotate(45deg);
	display: inline-block;
	margin-left: 5px;
}

.company_info .contact{
	width: 175px;
	height: 20px;
	display: inline-block;
	background-color: #ffdea5;
	border-radius: 30px;
	color: #54280d;
	text-align: center;
	border: 1px solid #c5a775;
}

.company_info .tel {
	margin: -3px 0 0;
	padding: 0;
}


/*グローバルナビの設定
---------------------------------------------------------
*/


.l-gnav {
	background: #FFF;
	clear: both;
	position: relative;
	height: 46px;
	margin-bottom: 15px;
}


/*グローバルナビの範囲設定 */

 /*ul*/.gnav {
	display: table;
	width: 100%;
	table-layout: fixed;/*幅指定されたもの以外の子要素の`table-cell`幅を均等にする*/
	border-collapse: collapse;/*子要素の`table-cellのborderを重ねる`*/
	margin: auto 0;
	border-left: solid 1px #baa98c;
}

/* リスト内部構造
--------------------------------------------------

*/
/* アイコンの設定 */
.icon {
	background-position: center center;
	background-repeat: no-repeat;
	padding-right: 5px;
	color : #314689;
	font-size: 120%;
}



.gnav > li {
	font-family: "メイリオ", Meiryo;
	display: table-cell;
	vertical-align: middle;
	position: relative;
	border: solid 1px #baa98c;
	border-left: none;
	font-size: 15px;

	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgb(255,255,255) 0%, rgb(255,255,253) 50%, rgb(232,229,222) 51%, rgb(235,234,216) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgb(255,255,255) 0%,rgb(255,255,253) 50%,rgb(232,229,222) 51%,rgb(235,234,216) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgb(255,255,255) 0%,rgb(255,255,253) 50%,rgb(232,229,222) 51%,rgb(235,234,216) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebead8',GradientType=0 ); /* IE6-9 */

}


 /*リンクのスタイリング*/
.gnav > li > a {
	display: inline-block;
	color: #565055;
	height: 33px; /* 44-11(padding-top) */
	width: 100%;
	text-decoration: none;
	text-align: center;
	padding-top: 11px;
}


 /*aタグ内のテキスト設定*/
.gnav > li > a > .text {
	vertical-align: middle;
}

.gnav ul li a {
	height: 44px;
}
/* マウスホバー時の設定
--------------------------------------------------
ナビゲーションにマウスが乗った時の指定。

個別に色などを変えたい場合は、ナビゲーションに付与されたclassを使用する。
*/
 /*共通設定*/
.gnav > li > a:hover {
	/* opacity: 0.5; */
	width: 100%;
	background: #F3F1F2;
	/* box-shadow */
	box-shadow:0px 0px 0px 4px #ffffff inset;
	-moz-box-shadow:0px 0px 0px 4px #ffffff inset;
	-webkit-box-shadow:0px 0px 0px 4px #ffffff inset;

	/* border-radius */
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	}

/* ページのis-active設定
--------------------------------------------------
該当ページにいる時に、ナビゲーションの色を反転させる設定。

bodyに割り当てられたclassと、ナビゲーションのclassで場所を特定して色を変える。  
bodyからのセレクタのため、個別に色などを設定する事もできる。
*/

#home .gnav_li_1 > a ,
#products .gnav_li_2 > a ,
#company .gnav_li_3 > a ,
#flow .gnav_li_4 > a,
#customer .gnav_li_5 > a,
#contact .gnav_li_6 > a {
	/* opacity: 0.5; */
	width: 100%;
	background: #F3F1F2;
	/* box-shadow */
	box-shadow:0px 0px 0px 5px #ffffff inset;
	-moz-box-shadow:0px 0px 0px 5px #ffffff inset;
	-webkit-box-shadow:0px 0px 0px 5px #ffffff inset;

	/* border-radius */
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}



 /*liのis-active後のマウスホバー*/
.gnav > li.is-active > a:hover {
	background: #123;
}

/* 要素個別指定
--------------------------------------------------
個別にスタイルを付与したい場合には、個別に割り当てたclassに対してセレクタを書く

*/


 /*homeを除いて1つめ*/
.gnav .gnav_li_1 {
}
.gnav .gnav_li_1 > a {
	/*border-bottom: solid 4px #CCC;
	color: #CCC;*/
}

 /*homeを除いて2つめ*/
.gnav .gnav_li_2 {
}
.gnav .gnav_li_2 > a {
	/*border-bottom: solid 4px #CCC;
	color: #CCC;*/
	
}

 /*homeを除いて3つめ*/
.gnav .gnav_li_3 {
}
.gnav .gnav_li_3 > a {

}

 /*homeを除いて4つめ*/
.gnav .gnav_li_4 {
}
.gnav .gnav_li_4 > a {
	/*border-bottom: solid 4px #CCC;
	color: #CCC;*/
}

 /*homeを除いて5つめ*/
.gnav .gnav_li_5 {
}
.gnav .gnav_li_5 > a {
	/*border-bottom: solid 4px #CCC;
	color: #CCC;*/
}

 /*homeを除いて6つめ*/
.gnav .gnav_li_6 {
}
.gnav .gnav_li_6 > a {
}

 /*homeを除いて7つめ*/
.gnav .gnav_li_7 {
}
.gnav .gnav_li_7 > a {
}


/* 
ボディ／.site_body
=================================================================
*/

.site_body {
	height: 100%;
}


/* 
サイトフッター／.site_footer
=================================================================
*/

.site_footer {
	height: 100%;
	border-top: solid 1px #D8D8D8;
	box-shadow: 0 -2px 3px #D8D8D8;
	background-color: #fff9d9 ;
}


/*フッター内のボックス(footer01）の設定
---------------------------------------------------------
サイトロゴとフッターナビゲーションを設置
*/

/* ボックスの下に区切り線を引く */
.footer01 {
	height: 80px;
	border-bottom: solid 1px #d0d4a4;
}

.footer01 h2{
	height: 43px;
	width: 154px;
	float: left;
	overflow: hidden;
	margin-top: 10px;
}

/* フッターナビゲーションの設定 */
.footnav {
	width: 760px;
	float: right;
	margin-top: 22px;
}

.footnav ul {
	border-left:1px solid #333333;
	padding-left: 10px;
	margin-left: 15px;
	overflow: hidden;
}

.footnav li {
	border-right:1px solid #333333;
	padding-right:8px;
	margin-right:6px;
	font-size: 13px;
	display: -moz-inline-box;
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

.footnav a{
	color: #000;
}


/*フッター内のボックス(footer02）の設定
---------------------------------------------------------
店舗紹介のボックス
*/

.footer02 {
	height: 323px;
	border-bottom: solid 1px #d0d4a4;
}

.footer02 h3 {
	width: 670px;
	height: 25px;
	float: left;
	margin: 0 0 20px 0;
	font-size: 25px;
	color: #3B4594;
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";	
	letter-spacing: -0.08em;
}

.footer02 .mail {
	width: 256px;
	height: 26px;
	float: right;
	margin: 6px 0 18px 0;
}

.footer02 .mail a{
	text-decoration: none;
	color: #333333;
	display: block;
	background-color: #F6EC8D;
	border: 1px solid #938E60;
	border-radius: 10px;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
}

.footer02 .mail a:before {
	content: '\f0e0';
 	font-family: "FontAwesome";
 	font-weight: 400;
	color: #FF7C0F;
	font-size: 18px;
	margin-right: 10px;
}

/* ３店舗の写真と地図のボックス */
.map_area {
	width: 940px;
	height: 235px;
	clear: both;
}

.map_area ul {
	list-style: none;
	padding: 0;
	width: 984px;
	height: 100%;
	margin-right: -45px;
}

.map_area ul li {
	width: 283px;
	height: 100%;
	float: left;
	margin-right: 45px;
}

.map_area dl dt img {
	width: 281px;
	height: 194px;
	margin: 0;
	padding: 0;
	border: solid 1px #000000;
}

.map_area dl dt {
	margin-bottom: 8px;
}

.map_area dl dd {
	width: 283px;
	height: 100%;
	position: relative;
}

/* 地図ボタンの位置を絶対配置で指定 */
.map_area dl dd .btn_map {
	position: absolute;
	right: 0;
	bottom: 0;
}

.map_area dl dd .btn_map a{
	text-decoration: none;
	color: #333333;
	display: block;
	background: #aaaaaa;
	background: linear-gradient( #f8f8f8 0%, #cccccc 100%);
	border: 1px solid #938E60;
	border-radius: 4px;
	text-align: center;
	font-size: 13px;
	line-height: 1.5;
	padding: 2px 14px;
}

.map_area dl dd .btn_map a:before {
	content: '\f08e';
	 font-family: "FontAwesome";
	 font-weight: 400;
	 color: #ff0000;
	 margin-right: 3px;
}


/* 住所の文字サイズを小さく */
.map_area p {
	font-size: 13px;
	/* 行間の調整 */
	line-height: 1.5em;
	letter-spacing: -0.5px;
}



/*フッター内のボックス(footer03）の設定
---------------------------------------------------------
電話番号、営業エリア
*/
.footer03 {
	height: 129px;
}

.businnes_area {
	margin-top: 10px;
	width: 440px;
	height: 80px;
	float: right;
	letter-spacing: -0.5px;
}


/*コピーライト表記の設定
---------------------------------------------------------
*/
.copyright {
	height: 30px;
	background-color: #344591;
	color: #FFFFFF;
	text-align: center;
}

.copyright p {
	padding-top: 3px;
}



/* 下層ページのコンテンツ部分の大枠フレーム設定
=================================================================
コンテンツ部分は以下のブロックに分類

* article_header
* article_body
* article_footer

*/
.article_header {
	box-shadow: 0 1px rgba(170,170,170,0.3) inset,
				0 2px rgba(190,190,190,0.3) inset,
				0 3px rgba(200,200,200,0.2) inset;
}

/*下層ページコンテンツ内の設定
---------------------------------------------------------
有効幅の設定、背景設定、左右のシャドー設定
*/

.lower {
	background-image:url(../images/common/articlebody_bg.jpg);
	background-repeat: no-repeat;
	width: 940px;
	margin: 0 auto;
	padding: 0;
	border-right: solid 2px #dbdbdb;
	border-left: solid 2px #dbdbdb;
	box-shadow: 0 0 6px #E9E8E8;
}

/* 下層ページinner_box */
.inner_box {
	width: 780px;
	margin: 0 auto;
	padding: 0;
	background-color: #fff; 
}



/* 
下層ページ共通設定
=================================================================
*/

/* 
パンくずリスト
---------------------------------------------------------
*/

/* パンくずリストの幅指定 */
.topic_path {
	width: 740px;
	height: 24px;
	margin-left: 45px;
	margin-bottom: 20px;
	margin-top: 16px;
}

.topic_path ol {
	list-style: none;
	line-height: 1;
}

.topic_path li {
	font-size: 16px;
	display: inline-block;
	vertical-align: middle;

}
.topic_path li a{
	display: inline-block;
	font-size: 16px;
}

/* liの前に記号を追加する */
.topic_path ol li:before {
	content:" > ";
	color: #777;
}

/* 先頭のliのリストマークを消す */
.topic_path ol li:first-child:before{
	content: none;
}



/*テーブルの設定
---------------------------------------------------------
*/

table, td, th {
	border: 1px #000 solid;
	border-collapse: collapse;
}

/* 料金は赤文字で表示 */
strong {
	color: #FF0000;
}

td, th {
	padding: 3px;
}


/*コンテンツ内、上のタイトルボックスの設定 / .article_header
=================================================================
各ページタイトルは横幅が異なるため、個別cssで設定*/

.article_header {
	padding-top: 10px;
	margin-bottom: 20px;
}

/* ページタイトルのボックス */
.page_title {
	width: 780px;
	margin: 0 auto;
}
/*文字タイトル*/
.page_title .title {
	font-size: 36px;
	color: #444;
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	font-weight: normal;
	line-height: 1;
}

/* タイトル横の説明分（pタグ）の設定 */
.page_title p {
	font-size: 16px;
	overflow: hidden;
	padding-top: 20px;
}

.page_description {
	width: 780px;
	box-sizing: border-box;
	margin: 0 auto;
	margin-top: 20px;
	padding: 20px 30px;
	background-color: #eff4ec;
	border-radius: 10px;
}
.page_description p + p {
	margin-top: 10px;
}



/*
コンテンツ内、真ん中のボックスの設定 / .article_body
=================================================================	
*/
.article_body {
	width: 780px;
	margin: 0 auto;
	margin-bottom: 30px;
}



/*グッズ
--------------------------------------------------
*/
.goods_info {
	width: 940px;
	margin: auto 0;
	overflow:hidden;
	margin-bottom: 40px;
}
.goods_info h2{
	text-align: left;
	font-size: 21px;
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";	
	border-left: 5px solid #344591;
	margin: 0 0 30px 10px;
	display: inline-block;
	line-height: 21px;
	padding-left: 10px;
}

.goods_info p {
	display: inline-block;
	margin: 10px 10px 0 20px;
}

.goods_info ul {
	list-style: none;
	padding: 0;
	width: 948px;
	overflow: hidden;
}

.goods_info ul li {
	font-size: 0;
	display: inline-block;
	margin-right: 2px;
}

.goods_info ul li:last-child {
	margin-right: 0;
}



/*
コンテンツ内、一番下のボックスの設定 / .article_footer
=================================================================	
*/

.article_footer {
	width: 940px;
	height: 50px;
	margin: 0 auto;
	margin-bottom: 30px;
}



/*
コンテンツ下部ナビゲーション/.sitenav_box
---------------------------------------------------------
「続けて他の情報を見る」の設定
*/

.sitenav_box {
	/* 角丸 */
	border-radius: 5px; /* CSS3草案 */  
    -webkit-border-radius: 5px; /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px; /* Firefox用 */
	width: 780px;
	height: 40px;
	border: 1px solid #efe09b;
	background-color: #fffbe7;
	overflow: hidden;
	margin-bottom: 20px;
	margin: 0 auto;
}

.sitenav_box h2{
	width: 162px;
	float: left;
	margin: 10px 0 0 20px;
	padding: 0;
}

.sitenav{
	width: 540px;
	float: right;
	margin: 10px 0 20px 0;
	padding: 0;
}

.sitenav_box ul {
	list-style-image:url(../images/common/other_list_icon.png);
	width: 100%;
	display: block;
}

.sitenav_box li {
	float: left;
	margin-right: 10px;
	margin-left: 30px;
}


/*
お問い合わせボックス/.contact_box
---------------------------------------------------------
*/

.contact_box {
	width: 780px;
	height: 146px;
	margin: 0 auto;
	margin-bottom: 30px;
	}

.contact_box h2{
	width: 490px;
	float: left;
}

.contact_box .mail {
	width: 246px;
	float: right;
	margin-top: 30px;
	margin-right: 20px;
}

.contact_box .mail a{
	text-decoration: none;
	color: #333333;
	display: block;
	padding: 5px 10px;
	font-size: 14px;
	line-height: 1;
}

.contact_box .mail a:before {
	content: '\f0e0';
	 font-family: "FontAwesome";
	 font-weight: 400;
	color: #FF7C0F;
	font-size: 18px;
	margin-right: 10px;
}

.contact_box .mail a:after{
	content: '';
	width: 6px;
	height: 6px;
	border-top: 3px solid #ff2a00;	
	border-right: 3px solid #ff2a00;
	transform: rotate(45deg);
	display: inline-block;
	margin-left: 5px;
}

.contact_box .tel {
	width: 780px;
	height: 68px;
	padding-top: 84px;
}


/*
電話番号ボックス/.tel_box
---------------------------------------------------------
*/
.article_footer .tel_box {
	width: 740px;
	margin: 0 auto;
}


/*このページの先頭へ戻るボタンの設定 / .to_pagetop
---------------------------------------------------------
*/

.article_footer .to_pagetop {
	width: 173px;
	float: right;
	padding: 20px;
}



/*スマホ
---------------------------------------------------------
*/

@media screen and (max-width:600px){
	body{
		font: 16px/1.4 sans-serif;
	}
	
	.contents_width{
		width: 100%;
		padding: 0;
		margin: 0 auto;
		overflow: visible;
	}

	.contents_width img{
		width: 100%;
		height: 100%;
	}

	.for_pc {
		display: none;
	}
	
	.for_sp {
		display: inherit;
	}

	.video {
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
		margin-bottom: 10px;
	  }
	   
	  .video iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	  }

	.site_header {
		background-image: url(../images/common/top_stripe_bg.jpg) ;
		background-repeat: repeat-x;
		height: 80px;
		background-color: #fff9d9 ;
		border-bottom: solid 1px #D8D8D8;
		box-shadow: 0 2px 3px #D8D8D8;
		width: 100%;
		position: relative;
	}

	#g-nav{
		/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
		position:fixed;
		z-index: 999;
		/*ナビのスタート位置と形状*/
		top:0;
		right: -120%;
		width: 100%;
		height: 100vh;/*ナビの高さ*/
		background-color:#FDF8DC;
		transition: all 0.6s;
	}
	
	/*アクティブクラスがついたら位置を0に*/
	#g-nav.panelactive{
		right: 0;
		position: fixed;
	}
	
	/*ナビゲーションの縦スクロール*/
	#g-nav.panelactive #g-nav-inner{
		/*ナビの数が増えた場合縦スクロール*/
		z-index: 9999; 
		width: 100%;
		height: 100vh;/*表示する高さ*/
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
		background-color:#FDF8DC;
	}

	#g-nav-inner .g-nav-list-tit{
		position: fixed;
		font-size: 1.8em;
		color: #344591;
		padding: 6.5% 0 3.5% 5%;
		z-index: 9999;
		width: 95%;
		background:#FDF8DC;
		background-image: url(../images/common/top_stripe_bg.jpg) ;
		background-repeat: repeat-x;
		border-bottom: 1px solid #AAAAAA;
	}

	.g-nav-list ul{
		z-index: 999;
		padding-top: 22%;
	}

	/*リストのレイアウト設定*/
	.g-nav-list li{
		display:  inline-block;
		box-sizing:  border-box;
	    width: 100%;
		list-style: none;
		text-align: left;
		border-bottom: 1px solid #AAAAAA;
		color: #333333;
		font-size: 1em;
	}
	
	.g-nav-list li a{
		color: #333;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		align-items:center;
		margin: 0 auto;
		padding: 3% 10% 2% 5%;
	}

	.g-nav-list li a:after{
		content: '';
		width: 5px;
		height: 5px;
		border-top: 3px solid #333333;	
		border-right: 3px solid #333333;
		transform: rotate(45deg);
	}

	#g-nav.panelactive #g-nav-cover {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -99;
		background-color: rgb(253, 248, 220, .5);
	}
	
	/*========= ボタンのためのCSS ===============*/
	.openbtn{
		position:absolute;
		z-index: 9999;/*ボタンを最前面に*/
		background: #344591;
		top:12px;
		right: 20px;
		cursor: pointer;
		border-radius: 5px;
    	line-height: 50px;
		width: 40px;
		height:40px;
		margin-top: 1.75%;
	}
		
	/*×に変化*/	
	.openbtn span{
		display: inline-block;
		transition: all .4s;
		position: absolute;
		left: 11px;
		height: 3px;
		border-radius: 2px;
		background-color: #fff;
		width: 48%;
	  }
	.openbtn span:nth-of-type(3)::after {
		content:url(../images/common/btn_menu.svg);
		position: absolute;
		top: -3px;
		left:-11px;
		width: 40px;
		height: 15px;
		display: block;
	}
	
	.openbtn span:nth-of-type(1) {
		top:10px;	
	}
	
	.openbtn span:nth-of-type(2) {
		top:18px;
	}
	
	.openbtn span:nth-of-type(3) {
		top:26px;
	}

	.openbtn.active {
		position: fixed;
	}
	
	.openbtn.active span:nth-of-type(1) {
		top: 12px;
		left: 12px;
		transform: translateY(6px) rotate(-45deg);
		width: 40%;
	}
	
	.openbtn.active span:nth-of-type(2) {
		opacity: 0;
	}
	
	.openbtn.active span:nth-of-type(3){
		top: 24px;
		left: 12px;
		transform: translateY(-6px) rotate(45deg);
		width: 40%;
	}
	
	.openbtn.active span:nth-of-type(3)::after {
		content:url(../images/common/btn_close.svg);
		transform: translateY(0) rotate(-45deg);
		top: 1px;
		left: -5px;
	}

	.g-navi-request ul {
		margin: 5% auto;
		text-align: center;
	}

	.g-navi-request li {
		list-style: none;
		margin-bottom: 3.75%;
	}

	.g-navi-request li img{
		width: 85%;
	}

	.g-navi-request a.btn {
		display: inline-block;
		width: 85%;
		padding: 3.75% 0;
		border: 1px solid #938E60;
		border-radius: 5px;
		text-align: center;
		background-color: #F6EC8D;
		color: #333;
		text-decoration: none;
		font-weight: bold;
		font-size: 1em;
	}

	.g-navi-request li:nth-of-type(2) a.btn:before {
		content: '\f095';
		font-family: "FontAwesome";
		font-weight: 400;
		color: #FF7C0F;
		font-size: 1.7em;
		margin-right: 2%;
		vertical-align: middle;
	}

	.g-navi-request li:nth-of-type(3) a.btn:before {
		content: '\f0e0';
		font-family: "FontAwesome";
		font-weight: 400;
		color: #FF7C0F;
		font-size: 1.3em;
		margin-right: 2%;
	}

	.g-navi-request a.btn:after {
		content: '';
		width: 7px;
		height: 7px;
		border-top: 3px solid #FF7C0F;
		border-right: 3px solid #FF7C0F;
		transform: rotate(45deg);
		display: inline-block;
		margin-left: 2%;
		margin-bottom: 0.3%;
	}

	.head_main {
		width: calc(100% - 80px);
		text-align: left;
		margin: 0;
		padding: 0;
		height: 80px;
		float: none;
	}

	.logo {
		width: 100%;
		float: none;
		padding: 12px 0 0 14px;
	}

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

	.footer01 {
		height: 100%;
		border-bottom: solid 1px #d0d4a4;
	}
	
	.footer01 h2{
		height: 100%;
		width: 100%;
		float: inherit;
		overflow: hidden;
		margin: 5% auto;
		text-align: center;
	}
	
	.footer01 h2 img{
		width: 50%;
	}

	/* フッターナビゲーションの設定 */
	.footnav {
		width: 100%;
		float: inherit;
	}
	
	.footnav ul {
		border-left: 0;
		padding-left: 0;
		margin-left: 0;
		display: block;
	}
	
	.footnav li {
		border-right: 0;
		padding-right: 0;
		margin-right: 0;
		box-sizing:  border-box;
	    width: 100%;
		list-style: none;
		text-align: left;
		border-bottom: 1px solid #AAAAAA;
		color: #333333;
		font-size: 1em;
	}

	.footnav li:first-child{
		border-top: 1px solid #AAAAAA;
		display: inline-block;
	}
	
	.footnav li a{
		color: #333;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		align-items:center;
		margin: 0 auto;
		padding: 3% 5% 2%;
	}

	.footnav li a:after{
		content: '';
		width: 5px;
		height: 5px;
		border-top: 3px solid #333333;	
		border-right: 3px solid #333333;
		transform: rotate(45deg);
	}
	.footer02 {
		height: auto;
		border-bottom: solid 1px #d0d4a4;
		margin: 0 auto;
	}
	
	.footer02 h3 {
		width: 80%;
		height: 100%;
		float: inherit;
		margin: 5% auto;
		text-align: center;
		font-size: 1.3em;
		letter-spacing: -0.05em;
	}
	
	.footer02 .mail {
		width: 80%;
		height: auto;
		float: inherit;
		margin: 5% auto 10%;
		font-size: 1.3em;
		font-weight: bold;
		line-height: 1.5;
	}

	.footer02 .mail a{
		padding: 3.75% 0;
	}
	
	.footer02 .mail a:before {
		font-size: 1.3em;
		margin-right: 5%;
	}

	.footer02 .mail a:after {
		content: '';
		width: 7px;
		height: 7px;
		border-top: 3px solid #FF7C0F;
		border-right: 3px solid #FF7C0F;
		transform: rotate(45deg);
		display: inline-block;
		margin-left: 2%;
		margin-bottom: 0.3%;
	}
	
	/* ３店舗の写真と地図のボックス */
	.map_area {
		width: 70%;
		height: auto;
		clear: both;
		margin: 0 auto;
	}
	
	.map_area ul {
		list-style: none;
		padding: 0;
		width: 100%;
		height: 100%;
		margin-right: 0;
	}
	
	.map_area ul li {
		width: 100%;
		height: 100%;
		float: inherit;
		margin-right: 0;
	}
	
	.map_area dl dt img {
		width: 100%;
		height: 100%;
	}
	
	.map_area dl dt {
		margin-bottom: 1.75%;
	}
	
	.map_area dl dd {
		width: 100%;
		height: 100%;
		position: inherit;
	}
	
	/* 地図ボタンの位置を絶対配置で指定 */
	.map_area dl dd .btn_map {
		position: inherit;
		font-size: 1em;
		border-radius: 10px;
	}

	.map_area dl dd .btn_map a{
		padding: 3% 0;
		width: 50%;
		margin: 1.5% auto 10%;
	}
	
	.map_area dl dd .btn_map a:before {
		 margin-right: 5%;
	}
	
	/* 住所の文字サイズを小さく */
	.map_area p {
		font-size: 1.0em;
	}

	.footer03 {
		height: auto;
		width: 90%;
		margin: 0 auto;
	}
	
	.businnes_area {
		margin-top: 1.75%;
		width: 100%;
		height: 100%;
		float: inherit;
		letter-spacing: -0.5px;
		font-size: 1.0em;
	}

	.footer03 .tel {
		float: inherit;
		margin: 5% auto;
	}

	.copyright {
		height: 100%;
		padding: 1.5% 0 1.7%;
		margin-bottom: 21.5%;
		font-size: 0.8em;
	}

	.lower {
		background-size: contain;
		width: 100%;
		border:none;
		box-shadow: none;
	}

	.topic_path {
		width: 95%;
		height: auto;
		margin: 1.5% 0 5% 2.5%;
	}
	
	.topic_path li {
		font-size: 0.9em;
	
	}
	.topic_path li a{
		font-size: 0.9em;
	}
	
	/* 下層ページinner_box */
	.inner_box {
		width: 95%;
	}

	.page_title {
		width: 95%;
	}
	
	.page_title .title {
		font-size: 1.7em;
	}
	
	.page_title p {
		font-size: 0.9em;
		padding-top: 2.5%;
		line-height: 1.4;
	}
	
	.page_description {
		width: 95%;
		margin: 5% auto 0;
		padding: 5%;
	}
	.page_description p + p {
		margin-top: 10px;
	}

	.article_body {
		width:100%;
	}

	.goods_info {
		width:95%;
		margin: 0 auto 5%;
		overflow:hidden;
	}
	.goods_info h2{
		font-size: 1.3em;
		line-height: 1.3;
		margin: 0;
		display: block;
	}
	.goods_info p {
		display: block;
		margin: 1.5% 0 3.75%;
		text-align: left;
		font-size: 0.9em;
	}
	.goods_info ul {
		width: 100%;
		margin: 0 auto 6.25%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.goods_info ul li {
		display: block;
		margin-right: 0;
		margin-bottom: 3.75%;
		width: 49%;
	}
	
	.goods_info ul li:last-child {
		margin-right: 0;
	}

	.article_footer {
		width: 95%;
		height: auto;
		margin: 0 auto;
		margin-bottom: 3%;
	}

	.sitenav_box {
		width: 95%;
		height: auto;
		margin: 5% auto 10%;
	}
	
	.sitenav_box h2{
		width: 100%;
		float: inherit;
		margin: 5% 5% 3%;
		font-size: 1.2em;
	}
	
	.sitenav{
		width: 95%;
		float: inherit;
		margin: 5% 0 7%;
		padding: 0;
	}
	
	.sitenav_box ul {
		width: 100%;
		display: block;
	}
	
	.sitenav_box li {
		float: inherit;
		margin: 0 0 3% 10%;
	}

	.contact_box {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		margin-bottom: 3%;
	}
	
	.contact_box h2{
		width: 90%;
		float: inherit;
		margin: 0 auto;
	}
	
	.contact_box .mail {
		width: 95%;
		float: inherit;
		margin: 0 auto;
	}

	.contact_box .mail a{
		padding: 5% 0;
		font-size: 14px;
		text-align: center;
		background-color: #F6EC8D;
		border: 1px solid #938E60;
		border-radius: 10px;
		font-size: 1.2em;
	}

	.contact_box .mail a:before {
		font-size: 1.2em;
	}

	.contact_box .mail a:after{
		width: 10px;
		height: 10px;
	}
	
	.contact_box .tel {
		width: 95%;
		height: 95%;
		margin: 0 auto;
		padding-top: 5%;
	}

	.article_footer .tel_box {
		width: 95%;
	}

	.article_footer .to_pagetop {
		width: 35%;
		float: inherit;
		text-align: right;
		padding: 0 0 5%;
		margin-right: 0;
 		margin-left: auto;
	}

	/*メニューをページ下部に固定*/
	#fixed_request{
		position: fixed;
		width: 100%;
		bottom: 0px;
		z-index: 99;
		border-top: 1px solid #333;
 	}
 
 	#fixed_request ul{
		display: flex;
		justify-content: space-between;
		align-items: center;
		list-style: none;
		width:100%;
 	}
 
	#fixed_request li{
		padding:0;
		margin:0;
		font-size: 1em;
	}

	#fixed_request li a{
		color: #fff;
		text-align: center;
		display:block;
		width: 100%;
	}
 
	#fixed_request li:first-child{
		background-color: #fff;
		width: 75%;
		
 	}

	#fixed_request li:last-child{
		background-color: #06ba50;
		width: 25%;

 	}
}