@charset "utf-8";



/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
html, body {overflow-x: hidden;}
body {
	margin: 0px;
	padding: 0px;
	color: #fff;	/*全体の文字色*/
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 15px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	background: #ffffff(../images/.png);	/*背景色、背景画像の読み込み*/
	-webkit-text-size-adjust: none;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #585858;	/*リンクテキストの色*/
	transition: 0.3s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	text-decoration:
	none;
}
a:hover {
	color: #f60247;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

/*inner共通
---------------------------------------------------------------------------*/
.inner {
	max-width: 1200px;	/*サイトの最大幅　※下の方の「画面幅1200px以上の設定」にも関連するので変更の際は注意して下さい。*/
	margin: 0 auto;
}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	background: #e5e5e5 url(../images/renga_bg.jpg);	/*背景色*/
    background-size:cover
}
header .inner {
	position: relative;
	height: 130px;	/*ヘッダーの高さ*/
}


/*ロゴ画像*/
header #logo img {
	width: 350px;	/*画像幅*/
	position: absolute;
	left: 0px;		/*ヘッダーに対して左から0pxの場所に配置*/
	bottom: 60px;	/*ヘッダーに対して下から32pxの場所に配置*/
}
header .auto-style1 {
	width: 500px;	/*画像幅*/
	color       : #9B4F02;
	 text-shadow    : 
	   2px  2px 5px #ffffff,
      -2px  2px 5px #ffffff,
       2px -2px 5px #ffffff,
      -2px -2px 5px #ffffff,
       2px  0px 5px #ffffff,
       0px  2px 5px #ffffff,
      -2px  0px 5px #ffffff,
       0px -2px 5px #ffffff;
	position: absolute;
	left: 30px;		/*ヘッダーに対して左から0pxの場所に配置*/
	bottom: 5px;	/*ヘッダーに対して下から32pxの場所に配置*/
}
br {
display: block;
content: "";
margin: -6px 0;
}

/*メインメニュー
---------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar {
	clear: both;
	overflow: hidden;
	position: relative;z-index: 100;
	background: #952e02;	/*背景色（グラデーションが使えない古いブラウザ向け）*/
	background: linear-gradient(#763c01, #97704a);	/*グラデーション*/
	box-shadow: 0px 0px 20px rgba(0,0,0,0.4);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.4は透明度40%の事。*/
}
/*メニュー１個あたりの設定*/
#menubar li {
	float: left;	/*左に回り込み*/
	width: 20%;		/*メニュー幅（100÷5個=20%）※下の方の「画面幅1200px以上の設定」にも関連するので変更の際は注意して下さい。*/
}
#menubar li a {
	display:  block;
	text-decoration: none;
	text-align: center;
	color: #ffffff;	/*文字色*/
	padding: 10px 0;	/*上下、左右へのボックス内の余白*/
}
/*マウスオン時*/
#menubar li a:hover {
	background: #fff;	/*背景色*/
	color: #7a3f02;		/*文字色*/
}
/*スマホ用メニューを表示させない*/
#menubar-s {
	display: none;
}
/*３本バーアイコンを表示させない*/
#menubar_hdr {
	display: none;
}

/*ドロップダウンメニュー用
----------------------------------------------------------------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar ul.ddmenu {
	position:absolute;
	visibility: hidden;
	z-index: 10;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.4);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.1は透明度10%の事。*/
	width: 20%;	/*幅。上の「#menubar li」と合わせる。*/
}
/*メニュー１個あたりの設定*/
#menubar ul.ddmenu li {
	float: none;
	width: 100%;
}
#menubar ul.ddmenu li a {
	width: 100%;
	border-bottom: 1px solid #fff;	/*下線の幅、線種、色（古いブラウザ用）*/
	border-bottom: 1px solid rgba(255,255,255,0.3);	/*下線の幅、線種、色。255,255,255は白のことで0.3は透明度30%のこと。*/
	background: #000;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.9);	/*背景色。0,0,0は黒の事で0.9は透明度90%の事。*/
}
/*マウスオン時*/
#menubar ul.ddmenu li a:hover {
	background: #fff;	/*背景色*/
}

/*fixmenu設定（メニューが画面上部に到達した際のスタイル）
---------------------------------------------------------------------------*/
/*上部固定メニュー用fixmenu設定*/
body.is-fixed-menu #menubar.nav-fix-pos {
	position: fixed;width: 100%;top: 0px;
}
body.is-fixed-menu .contents:first-of-type {
	margin-top: 100px;	/*メニューブロックの高さを指定する。背景画像も高さ100pxなので通常はこのままで。*/
}
/*※以下の２ブロックのスタイルの「中身」は、上の２ブロックのスタイルと単純に合わせておいて下さい。fixmenuスクリプトを２つ使う為に必要な設定になります。*/
body.is-fixed #menubar.nav-fix-pos {
	position: fixed;width: 100%;top: 0px;
}
body.is-fixed .contents:first-of-type {
	margin-top: 100px;
}

/*コンテンツ（mainとsubを囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	clear: both;
	padding-top: 3%;	/*上に空けるスペース、メインメニューの下のスペースです。*/
}

/*mainコンテンツ
---------------------------------------------------------------------------*/
#main {
	float: left;	/*左に回り込み*/
	width: 100%;		/*幅*/
}
/*１カラム時*/
body.c1 #main {
	float: none;
	width: auto;
}
/*h2タグの設定*/
#main h2 {
	clear: both;
	font-size: 20px;	/*文字サイズ*/
	letter-spacing: 0.1em;	/*文字間隔*/
	margin-bottom: 20px;	/*見出しの下にとるスペース*/
	padding: 5px 20px 7px;		/*上、左右、下への余白*/
	background: #794007;	/*背景色（グラデーションが使えない古いブラウザ向け）*/
	background: linear-gradient(#794007, #9f8367);	/*グラデーション*/
	border-top: 4px solid #b6aa77;	/*上の線の幅、線種、色*/
	text-shadow: 0px 2px #433f35;	/*テキストの影。右へ、下へ、色。*/
}
/*h3タグの設定*/
#main h3 {
	clear: both;
	margin-bottom: 0px;	/*見出しの下にとるスペース*/
	padding: 0px 50px;		/*上下、左右への余白*/
	color: #fff;		/*文字色*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は透明度20%の事。*/
	border: px solid #726e62;		/*枠線の幅、線種、色*/
}
/*段落タグ設定*/
#main nosepad p {
	padding: 0px 20px 15px;	/*上、左右、下への余白*/
}
#main h2 + p,
#main h3 + p {margin-top: -10px;}

/*box
---------------------------------------------------------------------------*/
/*main,subのbox共通*/
.box {
	overflow: hidden;
	background: rgb(255 255 255 / 20%);			/*背景色*/
	border: 10px solid #fff;	/*枠線の幅、線種、色*/
	padding: 20px;				/*ボックス内の余白*/
	margin-bottom: 50px;		/*ボックスの下に空けるスペース*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.2は透明度20%の事。*/	
}

.box a:hover img {opacity: 0.7;	/*マウスオン時に70%の透明度にする*/}

.box2 {
	overflow: hidden;
	background: rgb(255 255 255 / 20%);			/*背景色*/
	border: 10px solid #fff;	/*枠線の幅、線種、色*/
	padding: 20px;				/*ボックス内の余白*/
	margin-bottom: 40px;		/*ボックスの下に空けるスペース*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.2は透明度20%の事。*/	
	display:flex;
    justify-content: center;
}

.box2 a:hover img {opacity: 0.7;	/*マウスオン時に70%の透明度にする*/}
.box4{margin: 0px auto 50px;}
.box4 h4 {
	font-family: serif;
	font-size: 30px;	/*文字サイズ*/
	color: #ffffff;		/*文字色*/
	font-weight: bold;
	letter-spacing: 0.15em;	/*文字間隔*/
	background: linear-gradient(#2c2b2b, #979797);
	padding: 0 !important;
	line-height: 1.5;
	margin: 0px auto 30px;
	width: 80%;
}
.box4 h5 {
	font-family: serif;
	font-size: 18px;	/*文字サイズ*/
	color: #625e5e;		/*文字色*/
	font-weight: bold;
	letter-spacing: 0.15em;	/*文字間隔*/
	border-bottom: 3px solid #969799;
	padding: 0 !important;
	line-height: 1.5;
	margin: 30px auto 0px;
	width: 75%;
}
.box4 p {
	font-family: serif;
	color: #020202;		/*文字色*/
	padding: 0 !important;
	margin: 5px auto;
	width: 73%;
}

/*Pick Upページの各ブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
#main .list  {
	position: relative; overflow: hidden;
	width: 25%;				/*ボックスの幅*/
	margin-bottom: -30px;	/*ボックスの下に空けるスペース*/
	float: left;			/*左に回り込み*/
	line-height: 1.5;		/*行間を少し狭くする設定*/
}
#main .list a {
	text-decoration: none;overflow: hidden;
	display: block;
	height: 270px;	/*ボックスの高さ*/
	padding: 10px;	/*ボックス内の余白*/
	border-right: 1px solid #fff;	/*右の線の幅、線種、色（古いブラウザ用）*/
	border-right: 1px solid rgba(255,255,255,0.2);	/*右の線の幅、線種、色。255,255,255は白の事で0.2は透明度20%の事。*/
}
/*１、５、１０個目…のボックスへの追加設定*/
#main .list:nth-of-type(4n+1) a {
	border-left: 1px solid #fff;	/*左の線の幅、線種、色（古いブラウザ用）*/
	border-left: 1px solid rgba(255,255,255,0.2);	/*左の線の幅、線種、色。255,255,255は白の事で0.2は透明度20%の事。*/
}

/*ボックス内のh4タグ設定*/
#main .box .list h4 {color: #000;}
#main .box2 .list h4 {color: #000;}

/*ボックス内の段落(p)タグ設定*/
#main .list p {color: #000; padding: 0;	font-size: 12px;}
/*ボックス内の写真設定*/
#main .list figure img {width: 100%; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); margin-bottom: 10px;}

/*商品詳細ページの画像切り替え
---------------------------------------------------------------------------*/
/*大きな画像のボックスと説明文を入れるボックス*/
#item-image {
	position: relative;
	margin-bottom: 20px;
}
/*大きな画像の１行目*/
#item-image #item_image1 {
	z-index:2;
	position:relative;
	overflow:hidden;
}
/*大きな画像の２行目*/
#item-image #item_image2 {
	z-index:1;
	position:absolute;
	left:0px;
	top:0px;
	overflow:hidden;
}
/*サムネイル画像*/
.thumbnail {
	width: 80px;	/*画像の幅*/
	height: 80px;	/*画像の高さ*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	margin-bottom: 20px;
}
.thumbnail:hover {border: 1px solid #b6aa77;	/*マウスオン時の枠線の幅、線種、色*/}

/*商品検索ボックス
---------------------------------------------------------------------------*/
#search {text-align: center; padding: 20px 0;}

/*フッター設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
	background: #6c3700;	/*背景色*/
	font-size: 85%;	/*文字サイズ*/
	text-align: center;
}
footer .pr {
	display: block;
	font-size: 80%;
}

/*フッターメニュー
---------------------------------------------------------------------------*/
/*ボックス全体*/
#footermenu {overflow: hidden;	padding: 5px 0 35px;}
#footermenu a {color: #fff; font-size:16px;}

/*１行分の設定*/
#footermenu ul {
	float: left;	/*左に回り込み*/
	width: 21%;		/*幅。今回は５列作ったのでここの幅18%と下のpadding(合計の2%)でトータル20%になるよう設定。列に応じて調整して下さい。*/
	padding-right: 2%;
	padding-left: 2%;
	}

/*InstaやBlogなどのアイコン
---------------------------------------------------------------------------*/
/*アイコン全体を囲むブロック*/
ul.icon {margin-bottom: 20px;}

/*アイコン１個あたりの設定*/
ul.icon li {display: inline-block;	/*横並びにさせる指定*/}

/*アイコン画像の設定*/
ul.icon img {
    width: 120px;		/*画像の幅*/
　  position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
ul.icon img:hover {opacity: 0.8;		/*マウスオン時に透明度を80%にする。*/}

/*コピーライト
---------------------------------------------------------------------------*/
#copyright {clear: both;text-align: center;background: #6c3700;}
#copyright a {text-decoration: none; color:#fff}


/*トップページ内「お知らせ」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new dl {padding-left: 20px; margin-bottom: 20px;}
/*日付設定*/
#new dt {
	float: left;
	width: 9em;		/*幅*/
	color: #000;	/*文字色*/
	letter-spacing: 0.1em;
}
/*記事設定*/
#new dd {
	color: #000;	/*文字色*/
	padding-left: 9em;
	border-bottom: 1px solid #333;	/*下線の幅、線種、色*/
}

/*ABOUTページ
---------------------------------------------------------------------------*/
/*リストタグ（１ステップ分）*/
.step {
	overflow: hidden;
	margin: 0 2% 30px;		/*上、左右、下へのボックスの外に空けるスペース*/
	padding: 3%;
    position: relative;
}
.step  h4 {
	font-family: serif;
	color: #706f6f;		/*文字色*/
	font-size: 22px;	/*文字サイズ*/
	font-weight: bold;
	margin-bottom: 10px;	/*下に空けるスペース*/
	margin-top: 10px;
}
.step p {color: #6a6a6a;padding: 0 !important;line-height: 1.75;}
.step a:hover img {opacity: 0.7;	/*マウスオン時に70%の透明度にする*/}
/*h4見出し（※box1内で使う場合の追加設定）*/
.box ul.step li h4 {color: #000000;}

.step2 {
	overflow: hidden;
	margin: 0 2% 15px;		/*上、左右、下へのボックスの外に空けるスペース*/
	padding: 3%;
    position: relative;
	width: 80%;		/*画像の幅*/
	margin: 20px auto;
}
.step2 p {
	font-size: 16px;	/*文字サイズ*/
	color: #4b4a4a;		/*文字色*/
	padding: 0 !important;
	line-height: 1.5;
	margin-left: 10px;	
}
#main .step2 h4 {
	font-size: 22px;	/*文字サイズ*/
	font-weight: bold;
	letter-spacing: 0.05em;	/*文字間隔*/
	margin-bottom: 13px;	/*見出しの下にとるスペース*/
	padding: 1px 15px 1px;		/*上、左右、下への余白*/
	background: #fc6400;	/*背景色（グラデーションが使えない古いブラウザ向け）*/
	background: linear-gradient(#ff5400, #f89e77);	/*グラデーション*/
	text-shadow: 1px 2px #433f35;	/*テキストの影。右へ、下へ、色。*/
}



/*よく頂く質問ページ
---------------------------------------------------------------------------*/
/*ブロック全体*/
.faq {padding: 0px 20px;	/*上下、左右への余白*/}
/*質問の設定*/
.faq dt {color: #000;	/*文字色*/ padding-top: 15px;}
.faq dt a {color: #000;	/*文字色*/}
/*質問の設定（※box内で使った場合の文字色）*/
.box .faq dt,
.box .faq dt a {color: #b6aa77;	/*文字色*/}
/*回答の設定*/
.faq dd {
	border-bottom: 1px solid #fff;	/*下線の幅、線種、色*/
	overflow: hidden;
	padding-bottom: 15px;
}


/*店舗のご案内設定
---------------------------------------------------------------------------*/
/*テーブル（ta1）
/*ta1設定*/
.ta1 {width: 85%; margin: 10px auto 30px;} .ta12 {width: 65%; margin: 10px auto 30px;}
.ta13 {width: 70%; margin: 10px auto 30px;}
.ta1, .ta12, .ta1 td, .ta12 td, .ta1 th, .ta12 th {
	font-size: 12px;
	border: 1px solid #8f8f8f;	/*テーブルの枠線の幅、線種、色*/
	word-break: break-all;
	color: #595959;		/*文字色*/
	letter-spacing: 0.05em;	/*文字間隔*/
}
.ta13, .ta13 td, .ta13 th {border: 1px solid #8f8f8f; word-break: break-all; color: #595959; letter-spacing: 0.05em;}
/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi {
	color: #fff;
	font-size: 14px;
	width: auto;
	letter-spacing: 0.2em;
	padding: 1%;
	text-align: center;
	background: #4c71f9;	/*背景色*/
}

.ta1 td.tamidashi {
	color: #fff;
	font-size: 14px;
	width: auto;
	letter-spacing: 0.2em;
	text-align: center;
	background: #4c71f9;	/*背景色*/
}
.ta13 th.tamidashi3 {
	color: #595959;
	width: auto;
	padding: 1%;
	text-align: center;
	background: #f9f7e4;	/*背景色*/
}
.ta13 td.tamidashi3 {
	color: #595959;
	width: auto;
	padding: 1%;
	text-align: center;
	background: #f9f7e4;	/*背景色*/
}
/*ta1の左側ボックス*/
.ta1 th {
	color: #595959;		/*文字色*/
	width: 20%;	/*幅*/
	text-align: center;	/*センタリング*/
	font-weight: normal;
}
.ta12 th {
	color: #595959;		/*文字色*/
	font-size: 16px;
	width: 35%;	/*幅*/
	padding: 1% 2% ;
	text-align: left;	/*センタリング*/
	font-weight: normal;
}
.ta13 th {
	color: #595959;		/*文字色*/
	font-size: 14px;
	width: 75%;	/*幅*/
	padding: 1% 2% ;
	text-align: left;	/*センタリング*/
	font-weight: normal;
}
.ta12 th.dark {color: #ffffff; background: linear-gradient(#222121, #999898);}
.ta12 th.scy2 {color: #ffffff;background: linear-gradient(#004a28, #4cb97c);}
.ta12 th.msy {background: linear-gradient(#ffe7f7, #e1f7ff);}
.ta1 td {padding: 0px 10px; width: 80%px;} .ta12 td {font-size:16px; padding: 0px 10px; width: 60%;}
.ta13 td {font-size:16px; padding: 0px 10px; width: 60%;text-align: right;}

/*左側ボックスに画像を入れた場合の設定*/
.ta1 th img {width: 100%;}
.ta1 h1 {width: 100%; color: #000000;}

.box3 img {
	width: 48%;
    margin:0px 10px;
    float: left;	        	/*左に回り込み*/
	margin-bottom: 30px;		/*ボックスの下に空けるスペース*/
    justify-content: center;
}

#main .shop p {
	color: #595959;		/*文字色*/
	font-size: 22px;	/*文字サイズ*/
	font-weight: bold;
	letter-spacing: 0.05em;	/*文字間隔*/
	padding: 0 0 0 6%;
}

#main .map iframe {width: 55%;	/*画像の幅*/}
#main .map img{width:70%; margin: 50px;}
#main .map {    
    display:flex;
    justify-content:center;
    align-items:center;
    width:100％;
    height:100％;
	margin-bottom: 75px;		/*ボックスの下に空けるスペース*/
}

.box p{
	color:#4b4a4a;
	font-size: 20px;	        /*文字サイズ*/
    margin-bottom: px;		/*ボックスの下に空けるスペース*/
}

#main .list2  {
	position: relative;overflow: hidden;
	width: 25%;				/*ボックスの幅*/
	margin-bottom: 30px;	/*ボックスの下に空けるスペース*/
	float: left;			/*左に回り込み*/
	line-height: 1.5;		/*行間を少し狭くする設定*/
}

#other .list2  {
	position: relative;overflow: hidden;
	width: 30%;				/*ボックスの幅*/
	margin-bottom: 20px;	/*ボックスの下に空けるスペース*/
	float: left;			/*左に回り込み*/
	line-height: 1.5;		/*行間を少し狭くする設定*/
	margin:0 auto;
}

#main .list2 a {
	text-decoration: none;overflow: hidden;
	display: block;
	height: 270px;	/*ボックスの高さ*/
	padding: 10px;	/*ボックス内の余白*/
	border-right: 1px solid #fff;	/*右の線の幅、線種、色（古いブラウザ用）*/
	border-right: 1px solid rgba(255,255,255,0.2);	/*右の線の幅、線種、色。255,255,255は白の事で0.2は透明度20%の事。*/
}

/*ボックス内のh4タグ設定*/
#main .box .list2 h4 {color: #5b5959;}
/*ボックス内の段落(p)タグ設定*/
#main .list2 p {color: #000; padding: 0; font-size: 12px;}
/*ボックス内の写真設定*/
#main .list2 figure img {width: 100%;}
.list2 a:hover img {opacity: 0.7;	/*マウスオン時に70%の透明度にする*/}

/*itemの設定
---------------------------------------------------------------------------*/

.item {
	display: flex; /*横並び*/
	overflow: hidden;
	margin: 0 auto 50px;		/*上、左右、下へのボックスの外に空けるスペース*/
	padding: 3%;
	position: relative;
	background: #ffffff;	/*背景色（グラデーションが使えない古いブラウザ向け）*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.5は透明度50%の事。*/
	width: 79%;
}
.item2 {overflow: hidden;}
.item img{margin:10px auto;}
#main .item2 h3 {
    color: #000;		/*文字色*/
    letter-spacing: 0.15em;
    padding: 3px 30px !important;
    font-size: 20px;	/*文字サイズ*/
	width:90%;	        	/*画像の幅*/
    background: #f9f7e4;
    margin: 0px auto 30px;
}

#main .item2 p {color: #6a6a6a;width: 70%;margin: 0px auto;}
.item h4 {
    color: #000;		/*文字色*/
	font-size: 20px;	/*文字サイズ*/
	letter-spacing: 0.2em;	/*文字間隔*/
	padding: 3px 0px 0px 0px;
	margin: 60px auto 0px auto;
	width:90%;	        	/*画像の幅*/
}
.item p {
	color: #6a6a6a;		/*文字色*/
	letter-spacing: 0.2em;	/*文字間隔*/
	padding: 0 !important;
	line-height: 1.75;
	width: 90%;	        	/*画像の幅*/
	margin: 5px auto 0px auto;
}
.item a:hover img {opacity: 0.7;	/*マウスオン時に70%の透明度にする*/}


/*lens lens-hevの設定
---------------------------------------------------------------------------*/
.lens {
	overflow: hidden;
	padding: 3%;
    position: relative;
	margin: -20px auto;
}

.lens p {
	color: #6a6a6a;		/*文字色*/
	padding: 0 !important;
	letter-spacing: 0.2em;	/*文字間隔*/
	line-height: 2.0;
	margin: 5px auto;
	width: 85%;
}

.lens h5 {
	font-family: serif;
	font-size: 26px;	/*文字サイズ*/
	color: #a75503;		/*文字色*/
	font-weight: bold;
	letter-spacing: 0.15em;	/*文字間隔*/
	padding: 0 !important;
	line-height: 1.5;
	margin: 0px auto 10px;
}

.lens h6 {
	font-size: 24px;	/*文字サイズ*/
	color: #656664;		/*文字色*/
	font-weight: bold;
	letter-spacing: 0.25em;	/*文字間隔*/
	padding: 0 !important;
	line-height: 1.5;
	margin-left: 10px;
	margin-bottom: 0px;	/*見出しの下にとるスペース*/
	margin-top:75px;
}

.lens-item {
	display: flex; /*横並び*/
	overflow: hidden;
	margin: 0 5% 50px;		/*上、左右、下へのボックスの外に空けるスペース*/
	padding: 3%;
    position: relative;
	background: #ececec;	/*背景色（グラデーションが使えない古いブラウザ向け）*/
	background: linear-gradient(#f2f2f2, #fafafa);	/*グラデーション*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.5は透明度50%の事。*/	
}
.lens img {display: block;  margin:0 auto 30px; width: 35%;}
.lens-item img{margin: 5px auto 0px auto;}

#main .lens-item h4 {
	FONT-WEIGHT: 100;color: #ffffff;		/*文字色*/
	font-size: 24px;	/*文字サイズ*/
	font-weight: bold;
	letter-spacing: 0.3em;	/*文字間隔*/
	background: linear-gradient(#0275ce, #4a9edf);	/*グラデーション*/
	border-radius: 25px;
	padding: 3px 0px 0px 0px;
	margin: 0px auto 15px auto;
	width: 90%;	        	/*画像の幅*/
}

#main .lens-item h5 {
	FONT-WEIGHT: 100;color: #ffffff;		/*文字色*/
	font-size: 24px;	/*文字サイズ*/
	font-weight: bold;
	letter-spacing: 0.1em;	/*文字間隔*/
	background: linear-gradient(#ec7003, #f3a25c);	/*グラデーション*/
	border-radius: 25px;
	padding: 3px 0px 0px 0px;
	margin: 0px auto 15px auto;
	width: 90%;	        	/*画像の幅*/
}

#main .lens-item h6 {
	FONT-WEIGHT: 100;color: #ffffff;		/*文字色*/
	font-size: 24px;	/*文字サイズ*/
	font-weight: bold;
	letter-spacing: 0.1em;	/*文字間隔*/
	background: linear-gradient(#9c4900, #b1835b);	/*グラデーション*/
	border-radius: 25px;
	padding: 3px 0px 0px 0px;
	margin: 0px auto 15px auto;
	width: 90%;	        	/*画像の幅*/
}

.lens-item p {
	color: #6a6a6a;		/*文字色*/
	letter-spacing: 0.2em;	/*文字間隔*/
	padding: 0 !important;
	line-height: 1.75;
	width: 90%;	        	/*画像の幅*/
	margin: 5px auto 0px auto;
}

.lens-item a:hover img {opacity: 0.7;	/*マウスオン時に70%の透明度にする*/}

.lens-item2 {
	display: flex; /*横並び*/
	overflow: hidden;
	margin: 0 5% 50px;		/*上、左右、下へのボックスの外に空けるスペース*/
	padding: 3%;
    position: relative;
	background: #ececec;	/*背景色（グラデーションが使えない古いブラウザ向け）*/
	background: linear-gradient(#f2f2f2, #fafafa);	/*グラデーション*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.5は透明度50%の事。*/		
}

.lens-item2  img{margin: 5px auto 0px auto;		/*上、左右、下へのボックスの外に空けるスペース*/}

#main .lens-item2 h4 {
	FONT-WEIGHT: 100;color: #ffffff;		/*文字色*/
	font-size: 24px;	/*文字サイズ*/
	font-weight: bold;
	letter-spacing: 0.2em;	/*文字間隔*/
	background: linear-gradient(#42ae47, #6ddd72);	/*グラデーション*/
	border-radius: 25px;
	padding: 3px 0px 0px 0px;
	margin: 0px auto 15px auto;
	width: 90%;	        	/*画像の幅*/
}

#main .lens-item2 h5 {
	FONT-WEIGHT: 100;color: #e5c203;		/*文字色*/
	font-size: 24px;	/*文字サイズ*/
	font-weight: bold;
	letter-spacing: 0.1em;	/*文字間隔*/
	background: linear-gradient(#000000, #838483);	/*グラデーション*/
	border-radius: 25px;
	padding: 3px 0px 0px 0px;
	margin: 0px auto 15px auto;
	width: 90%;	        	/*画像の幅*/
}

.lens-item2 p {
	color: #6a6a6a;		/*文字色*/
	letter-spacing: 0.2em;	/*文字間隔*/
	padding: 0 !important;
	line-height: 1.75;
	width: 90%;	        	/*画像の幅*/
	margin: 5px auto 0px auto;
}

.lens-item2 a:hover img {opacity: 0.7;	/*マウスオン時に70%の透明度にする*/}

.lens-hev {
	overflow: hidden;
	padding: 2%;
    position: relative;
	margin: 0px auto;
}

.lens-hev p {
	color: #6a6a6a;		/*文字色*/
	padding: 0 !important;
	line-height: 1.2;
	margin: 0px auto;
	width: 80%;
}

#main .lens-hev h5 {
	color: #8024fb;
	font-size: 22px;	/*文字サイズ*/
	letter-spacing: 0.1em;	/*文字間隔*/
	margin-top: -20px;
}

.hev {
    width: 65%;		/*画像の幅*/
	margin-left: auto;
    margin-right: auto;
	margin-bottom: 40px;	/*見出しの下にとるスペース*/}
.hev p{width: 100%;}
.hev img{display: block;  margin: 0px auto;}
.hev a:hover img {opacity: 0.7;	/*マウスオン時に70%の透明度にする*/}
	
.hev-p{
	overflow: hidden;
	margin: 20px 5% 20px;		/*上、左右、下へのボックスの外に空けるスペース*/
	padding: 3%;
    position: relative;	
    }

.hev-p h5 {
	font-size: 24px;	/*文字サイズ*/
	color: #1108e8;		/*文字色*/
	padding: 0 !important;
	line-height: 1.75;
	margin-left: 10px;	
	margin-bottom: 10px;	/*見出しの下にとるスペース*/
}
.hev-p p {color: #4b4a4a; line-height: 1.7; width: 100%;}

.hev-item {
	display: flex; /*横並び*/
	overflow: hidden;
	margin: 20px 5% 20px;		/*上、左右、下へのボックスの外に空けるスペース*/
	padding: 3%;
    position: relative;
}

.hev-item img {margin: 5px auto 0px auto;		/*上、左右、下へのボックスの外に空けるスペース*/}

#main .hev-item h4 {
	FONT-WEIGHT: 100;
	color: #ffffff;		/*文字色*/
	font-size: 24px;	/*文字サイズ*/
	font-weight: bold;
	letter-spacing: 0.15em;	/*文字間隔*/
	background: #07bfe9;
	border-radius: 10px;
	padding: 3px 0px 0px 0px;
	margin: 0px auto 15px auto;
	width: 85%;	        	/*画像の幅*/
}

.hev-item p {
	color: #6a6a6a;		/*文字色*/
	letter-spacing: 0.2em;	/*文字間隔*/
	padding: 0 !important;
	line-height: 1.75;
	width: 80%;	        	/*画像の幅*/
	margin: 5px auto 0px auto;
}

.video-wrap {
     max-width: 50%; /* ここに動画の横幅を指定 */
	 margin-left: auto;
     margin-right: auto;
	 margin-top:20px;
     margin-bottom:75px;
}

.youtube {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
	}
 
.youtube iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
	}

.lens-phocro {
	overflow: hidden;
	padding: 1% 0 2% 0;
    position: relative;
     max-width: 100%; /* ここに動画の横幅を指定 */
	 margin-left: auto;
     margin-right: auto;
}
.lens-phocro p {
	color: #4b4a4a;		/*文字色*/
	padding: 0 !important;
	letter-spacing: 0.15em;	/*文字間隔*/
	line-height: 1.5;
	width: 75%;		/*画像の幅*/
	margin: 0px auto;
	}
#main .lens-phocro h4 {
	font-size: 24px;	/*文字サイズ*/
	color: #000;
	font-weight: bold;
	letter-spacing: 0.1em;	/*文字間隔*/
	padding: 5px 20px 1px;		/*上、左右、下への余白*/
	border-bottom: 4px solid #969799;
	width: 80%;		/*画像の幅*/
	margin: -10px auto 10px auto;
}
.lens-phocro h5 {
	font-size: 24px;	/*文字サイズ*/
	font-weight: bold;
	color: #000000;		/*文字色*/
	padding: 5px 0 !important;
	background: #f5f4d2;	/*背景色（グラデーションが使えない古いブラウザ向け）*/
	line-height: 1.5;
	margin: 50px auto 10px;
	width: 75%;		/*画像の幅*/
}
.lens-phocro img{width: 55%; display: block; margin: 10px auto;}
.lens-phocro a:hover img {opacity: 0.7;	/*マウスオン時に70%の透明度にする*/}
.rarts {
	overflow: hidden;
	padding: 1% 0 2% 0;
    position: relative;
     max-width: 100%; /* ここに動画の横幅を指定 */
	 margin-left: auto;
     margin-right: auto;
}

#main .rarts h4 {
	font-size: 24px;	/*文字サイズ*/
	color: #000;
	font-weight: bold;
	letter-spacing: 0.1em;	/*文字間隔*/
	padding: 5px 20px 1px;		/*上、左右、下への余白*/
	border-bottom: 4px solid #969799;
	width: 80%;		/*画像の幅*/
	margin: -10px auto 20px auto;
}
#main .rarts h5 {
	font-size: 20px;	/*文字サイズ*/
	color: #000000;		/*文字色*/
	letter-spacing: 0.15em;
	padding: 3px 0 !important;
	background: linear-gradient(#9cbacf, #f1f9ff); 	/*背景色（グラデーションが使えない古いブラウザ向け）*/
	border-top: 4px solid #6c81bd;
	margin: 70px auto 10px;
	width: 80%;		/*画像の幅*/
}
#main .rarts h6 {
	font-size: 16px;	/*文字サイズ*/
	color: #000000;		/*文字色*/
	font-weight: lighter;
	letter-spacing: 0.1em;
	margin: 50px auto -20px auto;
	width: 70%;		/*画像の幅*/
}
.rarts p {
	color: #6a6a6a;		/*文字色*/
	padding: 0 !important;
	letter-spacing: 0.15em;	/*文字間隔*/
	line-height: 1.5;
	width: 75%;		/*画像の幅*/
	margin: 0px auto;
	}

.rarts img{width: 55%; display: block; margin: 10px auto;}
.rarts a:hover img {opacity: 0.7;	/*マウスオン時に70%の透明度にする*/}
#main .nosetext h5 {color: #4b4a4a; font-size: 20px; letter-spacing: 0.2em; margin:30px auto; border-bottom: 3px solid #6c81bd;width: 65%;}
.nosepad {
	width: 70%;
	display: flex; /*横並び*/
	overflow: hidden;
	margin: 50px auto 40px auto;
	padding: 2%;
	position: relative;
	background: #ececec;	/*背景色（グラデーションが使えない古いブラウザ向け）*/
	background: linear-gradient(#fbf9e3, #fffdf3);	/*グラデーション*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.5は透明度50%の事。*/
}
.nosepad p {
	font-size: 20px;
	color: #6a6a6a;		/*文字色*/
	letter-spacing: 0.2em;	/*文字間隔*/
	padding: 0 !important;
	line-height: 2.0;
	width: 75%;	        	/*画像の幅*/
	margin: 15px auto 0px auto;
}
#main .nosepad h4 {
	font-size: 24px;	/*文字サイズ*/
	color: #000;
	font-weight: bold;
	letter-spacing: 0.1em;	/*文字間隔*/
	padding: 5px 20px 1px;		/*上、左右、下への余白*/
	border-bottom: 4px solid #969799;
	width: 80%;		/*画像の幅*/
	margin: -10px auto 20px auto;
}
.nosepad img{margin: 5px auto 0px auto;}
.nosepad a:hover img {opacity: 0.7;	/*マウスオン時に70%の透明度にする*/}
.sokutei{	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	position: relative;}

#main .sokutei h4 {
	font-size: 22px;	/*文字サイズ*/
	font-weight: bold;
	letter-spacing: 0.15em;
	padding: 0px 2% !important;
	background: #7bb54f;
	border-top: 4px solid #387e03;
	margin: 10px auto 10px;
	width:50%;
}
#main .sokutei h5 {
	font-size: 16px;
	color: #4b4a4a;
	padding: 20px 2% !important;
	background: #eaf7e0;
	margin: 20px auto 10px;
	width: 55%
}
.sokutei p {
	color: #6a6a6a;		/*文字色*/
	letter-spacing: 0.1em;	/*文字間隔*/
	line-height: 1.5;
	width: 50%;		/*画像の幅*/
	margin: 0 auto;
	}

.repair {
	overflow: hidden;
	padding: 3%;
    position: relative;
	margin: -20px auto 0px;
}

.repair p {
	color: #6a6a6a;		/*文字色*/
	padding: 0 !important;
	letter-spacing: 0.2em;	/*文字間隔*/
	line-height: 1.5;
	margin: 0px auto;
	width: 70%;
}

#main .repair h5 {
	font-size: 24px;	    /*文字サイズ*/
	color: #f589f5;		/*文字色*/
	font-weight: bold;
	letter-spacing: 0.1em;	/*文字間隔*/
	border-bottom: 2px solid #f589f5;
	margin: 0 auto 30px;	/*見出しの下にとるスペース*/
	width: 75%;	        	/*画像の幅*/
}
#main .repair h6 {
	font-size: 16px;
	color: #6a6a6a;
	padding: 20px 2% !important;
	background: #fff5ff;
	margin: 10px auto 10px;
	width: 80%
}
.repair-item {
	display: flex; /*横並び*/
	width: 65%;
	overflow: hidden;
	margin: 5px auto 50px;		/*上、左右、下へのボックスの外に空けるスペース*/
	padding: 2%;
	position: relative;
	background: #fff5ff;	/*背景色（グラデーションが使えない古いブラウザ向け）*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.5は透明度50%の事。*/
}
.repair-item p {
	color: #6a6a6a;		/*文字色*/
	letter-spacing: 0.2em;	/*文字間隔*/
	padding: 5px !important;
	line-height: 1.75;
	width: 80%;	        	/*画像の幅*/
	margin: 5px auto 0px auto;
}
.repair-item a:hover img {opacity: 0.7;}

.sitemap{padding: 0 0 6%;}
#main .sitemap h4 {
	font-size: 20px;	/*文字サイズ*/
	color: #606060;
	border-bottom: 2px solid #969799;
	width: 50%;		/*画像の幅*/
	margin: 0px auto 10px auto;
}
.sitemap p {color: #4b4a4a;	width: 47%;	margin: 0px auto;}
.arrow{
  width: 30px;
  height: 30px;
  border: 5px solid;
  border-color:  transparent transparent #565656 #565656;
  transform: rotate(-45deg);
  margin: 20px auto 40px;
}

/*ボタン(btn)の設定。詳細ページ(item.html)のかごに入れるボタンと、カートページで使用。
---------------------------------------------------------------------------*/
input[type=submit].btn, input[type=button].btn {
	width: 50%;
	padding: 10px 0px;	/*上下、左右へのボタン内の余白*/
	margin-bottom: 20px;
	border: 2px solid #910000;	/*枠線の幅、線種、色*/
	border-radius: 10px;	/*角丸のサイズ*/
	background: #9b4e00;	/*背景色（古いブラウザ用）*/
	font-size: 20px;	/*文字サイズ*/
	color: #fff;	/*文字色*/
}
/*マウスオン時の設定*/
input[type=submit].btn:hover, input[type=button].btn:hover {
	border: 2px solid #c10000;	/*枠線の幅、線種、色*/
	background: #fe0000;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#fe0000, #d50000 50%, #c10000 50%);	/*グラデーション*/
	position: relative;top: 1px;left: 1px;	/*マウスオン時に上から1px、左から1px場所を移動する*/
}

/*PAGE TOP設定
---------------------------------------------------------------------------*/
#pagetop {clear: both;	padding-top: 40px;}
#pagetop a {
	color: #fff;		/*文字色*/
	font-size: 20px;	/*文字サイズ*/
	background: #000;	/*背景色*/
	text-decoration: none;
	text-align: center;
	display: block;
	float: right;
	width: 60px;	/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 10px;	/*角丸のサイズ*/
	border: 3px solid #fff;	/*枠線の幅、線種、色*/
	box-shadow: 0px 5px 15px rgba(0,0,0,0.2);	/*ボックスの影*/
	margin-bottom: 20px;
}
/*マウスオン時*/
#pagetop a:hover {background: #333;	/*背景色*/}

/*一覧ページのボックス内のアイコン
（CMSの場合は管理ページの「オプション1」～のプルダウンと、setup.phpの「オプション選択肢」に関連します）
---------------------------------------------------------------------------*/
/*option1,option2共通*/
span.option1, span.option2 {
	text-align: center;
	display: block;
	font-size: 10px;	/*文字サイズ*/
	width: 100px;		/*幅*/
	position: absolute;
	right: 0px;	/*ボックスに対して右から0pxの場所に配置*/
	top: 0px;	/*ボックスに対して上から0pxの場所に配置*/
	transform: rotate(45deg) translate(32px,-9px);	/**/
	color: #FFF;	/*文字色*/
	background: #666;	/*背景色*/
}
/*option1への追加設定*/
span.option1 {
	color: #FFF;		/*文字色*/
	background: #F00;	/*背景色*/
}
/*h2タグ内で使った場合のoption1とoption2*/
h2 span.option1, h2 span.option2 {
	text-shadow: none;
	width: auto;
	padding: 2px 5px;
	position: static;
	transform: none;
	display: inline-block;
	font-size: 15px;
	margin-left: 10px;
}

/*トップページのNEWアイコン
---------------------------------------------------------------------------*/
.newicon {
	background: #F00;	/*背景色*/
	color: #FFF;		/*文字色*/
	font-size: 70%;		/*文字サイズ*/
	line-height: 1.5;
	padding: 2px 5px;
	border-radius: 2px;
	margin: 0px 5px;
	vertical-align: text-top;
}

/*checkブロック。赤い注意書きブロックです。
---------------------------------------------------------------------------*/
p.check {
	background: #ff0000;
	color:#fff;
	padding: 10px 25px !important;
	margin-bottom: 20px;
}
p.check a {color: #fff;}

/*その他
---------------------------------------------------------------------------*/
.look {background: #222;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px !important;}
.mb30 {margin-bottom: 30px !important;}
.p0 {padding:0 !important;}
.clear {clear: both;}
ul.disc {padding: 0em 25px 15px;list-style: disc;}
.color1, .color1 a {color: #F00;}
.bg1 {background: #f6f5f2;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
img.fr {float: right;margin-left: 10px;margin-bottom: 10px;}
img.fl {float: left;margin-right: 10px;margin-bottom: 10px;}
.big1 {font-size: 20px;}
.mini1 {font-size: 16px;display: inline-block;line-height: 1.5;}
.sh {display: none;}
.fr {float: right;}
.fl {float: left;}
.w25p {width: 30%;}
.w20p {width: 20%;}
.w65p {width: 65%;}
.w50p {width: 65%;}
hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
/* hr線の色を変えてみたバージョン */
.bar1 {
  display: block;
  width: 100%;
  height: 1px;
  border: 0;
  border-top: 1px dashed #2eb6f7;
}
.bar2 {
  display: block;
  width: 100%;
  height: 5px;
  margin: 50px auto;	
  background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#ccc), to(transparent));
  background-image: linear-gradient(to right, transparent, #ccc, transparent);
}


/*画面幅1200px以上の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:1200px){

/*inner共通
---------------------------------------------------------------------------*/
.inner {width: 1200px;	/*サイト幅*/}
	
/*メインメニューとドロップダウンメニューの設定変更。
上の共通設定で、max-widthを1200pxにしており、メニュー数が５個なので、1200÷5=240pxになります。
---------------------------------------------------------------------------*/
#menubar li, #menubar ul.ddmenu {width: 240px;}
}




/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

/*inner共通
---------------------------------------------------------------------------*/
.inner {width: auto;}
header #logo img {bottom: 65px;}
header .auto-style1 {bottom: 20px;line-height: 1.75;}
/*メインメニュー
---------------------------------------------------------------------------*/
/*アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。透明度(opacity)0%から透明度100%にする指定。*/
@keyframes menu1 {
0% {opacity: 0;}
100% {opacity: 1;}
}
/*スマホ用メニューを非表示から表示に切り替える*/
#menubar-s {
	display: block;
	overflow: hidden;
	position: absolute;
	border-top: 1px solid #fff;
	width: 100%;
	z-index: 10;
	animation-name: menu1;		/*上のkeyframesの名前*/
	animation-duration: 0.5S;	/*アニメーションの実行時間。0.5秒。*/
	animation-fill-mode: both;	/*アニメーションの完了後、最後のキーフレームを維持する*/
}
/*メニュー１個あたりの設定*/
#menubar-s li a {
	display: block;
	color: #fff;		/*文字色*/
	text-decoration: none;
	padding: 10px 5%;
	border-bottom: 1px solid #fff;
	background: #7a420a;
}
/*PC用メニューを非表示にする*/
#menubar {
	display: none;
}

/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
	display: block;
	position: absolute;
	top: 28px;		/*上から28pxの場所に配置*/
	right: 20px;	/*右から20pxの場所に配置*/
}
/*アイコン共通設定*/
#menubar_hdr.close,
#menubar_hdr.open {
	width: 30px;	/*幅*/
	height: 30px;	/*高さ*/
	border: 7px solid #fff;	/*枠線の幅、線種、色。padding(余白)の代わりです。*/
}
/*三本バーアイコン*/
#menubar_hdr.close {background: #fff url(../images/icon_menu.png) no-repeat center top/30px;}
/*閉じるアイコン*/
#menubar_hdr.open {background: #fff url(../images/icon_menu.png) no-repeat center bottom/30px;}

/*コンテンツ（mainとsubを囲むブロック）
---------------------------------------------------------------------------*/
#contents {padding: 3%;}

/*main,subコンテンツ
---------------------------------------------------------------------------*/
#main, #sub {float: none; width: auto;}

/*PAGE TOP設定
---------------------------------------------------------------------------*/
#pagetop {margin-right: 3%;}

/*その他
---------------------------------------------------------------------------*/
body.s-n #sub,body.s-n #footermenu,.m-n {display: none;}
img.fr,figure.fr,img.fl,figure.fl {float: none;margin: 0 auto;width: 65%;}
.fr, .fl {float: none;}
.w25p, .w65p {width: auto;}
.ta12 {width: 90%;}
.item {display: block; /*横並び*/}
.lens-item {display: block; /*横並び*/}
.lens-item2 {display: block; /*横並び*/}
.nosepad {display: block;}
.hev-item {display: block; /*横並び*/}
.lens h6 {font-size: 22px; margin: 75px 0px 20px; letter-spacing: 0.10em;}
.lens p {line-height: 1.5; margin:0 auto;}	
.item img {display: block; margin:35px auto; width: 80%;}
.item h4{font-size: 18px; line-height: 1.8;	margin:10px auto; width: 80%;}
.item p{line-height: 1.8; margin:0px auto; width: 80%;}
.box3 img {width: 50%; margin:0px 0px; float: left;	margin-bottom: 20px;}
.lens-item  img{margin:20px 0px 20px 0px;}
.lens-item2 img{margin:20px 0px 0px 0px;}	
.lens-hev {margin-bottom: 0px;margin-top: 2px;}
#main .hev-item  img{display: block; margin: 0px auto; margin-bottom: 30px;	margin-top: 50px; width: 80%;}	
.hev-p h5 {font-size: 20px;}
#main .list2  {margin-bottom: -50px;	/*ボックスの下に空けるスペース*/}
#main .map{display: block; text-align: center; margin-bottom: 30px;}
#main .map img{width:50%;}
#main .lens-phocro h4 {font-size: 20px; letter-spacing: 0.05em;	padding: 7px; width: 90%;}
.lens-phocro h5 {font-size: 18px; letter-spacing: 0.1em; width: auto;}
.lens-phocro p {letter-spacing: 0.15em;	width: 85%;}
.lens-phocro img{width: 75%; margin-top: 8px;}
#main .rarts h4 {font-size: 20px; letter-spacing: 0.05em;	padding: 7px; width: 90%;}
.rarts p {letter-spacing: 0.15em;	width: 85%;}
.nosepad  img{margin:20px 0px 20px 0px;}
.nosepad p {letter-spacing: 0.2em; line-height: 1.5; width: 65%;}
#main .nosetext h5 {font-size: 20px; letter-spacing: 0.15em;3px solid #6c81bd;width: 80%;}
#main .repair h5 {font-size: 24px; letter-spacing: 0.05em;}
.repair-item {display: block;}
.video-wrap {max-width: 65%; /* ここに動画の横幅を指定 */}
	
}





/*画面幅650px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:650px){

/*ロゴ画像*/
header #logo img {
	width: 320px;	/*画像幅*/
	bottom: 70px;	/*ヘッダーに対して下から40pxの場所に配置*/
}
header .auto-style1 {
	font-size: 12px;
	width: 500px;	/*画像幅*/
	bottom: 30px;	/*ヘッダーに対して下から40pxの場所に配置*/
    left: 20px;		/*ヘッダーに対して左から0pxの場所に配置*/
}
br {
display: block;
content: "";
margin: -4px 0;
}	
	/*商品一覧ページの各ブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
#main .list {width: auto; float: none; margin-bottom: 0;}
#main .list a { height: auto; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.2);}

/*１、５、１０個目…のボックスへの追加設定*/
#main .list:nth-of-type(4n+1) a {border-left: none;}
#other .list:nth-of-type(4n+1) a {border-left: none;}	
/*ボックス内の写真設定*/
#main .list figure img {width: 50%;	float: left;margin-right: 3%;}
#main h2 {font-size: 17px;}
.ta12 td {font-size:12px;} .ta12 th {font-size:12px;} .ta13 {width: 90%;}
.item h4{font-size: 18px; letter-spacing: 0.10em; line-height: 1.0;	text-align: center;	width: 95%;}
.box2 {display: block;}
.box3 img {width: 50%; margin:0px 0px; float: left;	margin-bottom: 20px;}
.lens h5 {font-size: 20px; letter-spacing: 0.10em;}
.lens h6 {font-size: 20px; letter-spacing: 0.1em;}	
#main .map iframe {width: 70%;	/*画像の幅*/}
#main .map img {width: 70%;	/*画像の幅*/}	
#main .list2 {width: auto; float: none;	margin-bottom: 0;}
#other .list2 {width: auto;	float: none; margin-bottom: 0;}
#main .list2 a {height: auto;}
#other .list2 a {height: auto;}
#main .list2 img {width: 20%; float: left; margin-right: 3%;}
#other .list2 img {width: 100%;	float: left; margin-right: 3%;}
#main .box .list2 h4 {color: #5b5959; font-size: 16px; margin-top: 25px;}
.item p {letter-spacing: 0.1em;	line-height: 1.5; width: 95%;}
#main .item2 h3 {letter-spacing: 0.15em; font-size: 18px;}
#main .hev-item  img {width: 95%;}	
.hev-item p {width: 100%;}
.lens img {width: 60%;}
#main .lens-hev h5 {font-size: 18px; margin-top:10px;}
#main .hev-item h4 {letter-spacing: 0.05em;	width: 100%;}
.lens-phocro h5 {font-size: 16px; letter-spacing: 0.05em;}	
.lens-phocro img{width: 70%; display: block; margin: 0px auto;}	
#main .rarts h5 {font-size: 16px; letter-spacing: 0.05em; width: 90%;}	
.rarts img{width: 80%; display: block; margin: 0px auto;}
.nosepad {margin: 20px auto 20px auto;}
#main .nosetext h5 {font-size: 16px; letter-spacing: 0.1em;3px solid #6c81bd;width: 85%;}
#main .sokutei h4 {letter-spacing: 0.1em; width:75%;}
#main .repair h5 {font-size: 18px; letter-spacing: 0.05em;width:85%}
	
/*一番上のボックスへの追加設定*/
#main .list:first-of-type a {border-top: 1px solid rgba(255,255,255,0.2);}
#other .list:first-of-type a {border-top: 1px solid rgba(255,255,255,0.2);}
/*一番下のボックスへの追加設定*/
#main .list:last-of-type a {margin-bottom: 20px;}
#other .list:last-of-type a {margin-bottom: 20px;}
#footermenu a {font-size: 100%;}

.fr, .fl {float: none;}
.w25p, .w65p {width: auto;}	

}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*全体の設定
---------------------------------------------------------------------------*/
body {
	font-size: 12px;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ロゴ画像*/
header #logo img {
	width: 280px;	/*画像幅*/
	bottom: 70px;	/*ヘッダーに対して下から40pxの場所に配置*/
}
header .auto-style1 {
	font-size: 11px;
	width: 400px;	/*画像幅*/
	bottom: 35px;	/*ヘッダーに対して下から40pxの場所に配置*/
    left: -10px;		/*ヘッダーに対して左から0pxの場所に配置*/
}
br {
display: block;
content: "";
margin: -2px 0;
}	

.step  h4 {
	color: #4b4a4a;		/*文字色*/
	font-size: 16px;	/*文字サイズ*/
	margin-bottom: 0px;	/*下に空けるスペース*/
	margin-top: 10px
}
.step img{display: block; margin: 0px auto;	width:80%}
#main .step2 h4 {font-size:16px; padding: 1px 10px 1px;}	
.step2 p {font-size: 12px;}	

/*mainコンテンツ
---------------------------------------------------------------------------*/
#main h2, #main h3 {
	font-size: 14px;
	letter-spacing: 0.05em;
	padding-left: 10px;
	padding-right: 10px;
}
/*段落タグ設定*/
#main p {font-size: 13px; padding: 0px 10px 15px;}
#main .shop p {font-size: 18px;}
/*box
---------------------------------------------------------------------------*/
/*main,subのbox共通*/
.box {border: 5px solid #fff;	/*枠線の幅、線種、色*/ padding: 10px;		/*ボックス内の余白*/}

/*フッターメニュー
---------------------------------------------------------------------------*/
/*ボックス全体*/
#footermenu {display: ;}

/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new dl {padding-left: 10px;}

/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*ta1設定*/
.ta1, .ta1 td, .ta1 th {padding: 5px;	/*ボックス内の余白*/}
.ta13, .ta13 td, .ta13 th {font-size: 12px;}
/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi {font-size: 14px;	/*文字サイズ*/}
/*ta1の左側ボックス*/
.ta1 th {width: 100px;}
.lens h5 {font-size: 18px; letter-spacing: 0.10em;}
.box4 h4 {font-size: 20px;}
#main .lens-item h4 {font-size: 20px; letter-spacing: 0.05em;}
#main .lens-item h5 {font-size: 20px; letter-spacing: 0.5em;}
#main .lens-item h6 {font-size: 18px; letter-spacing: 0.05em;}
#main .lens-item2 h4 {font-size: 20px; letter-spacing: 0.1em;}
#main .lens-item2 h5 {font-size: 16px; letter-spacing: 0.05em;}	
.lens h6 {font-size: 15px; letter-spacing: 0.05em;}	
#main .lens-hev h5 {font-size: 16px; letter-spacing: 0.02em; margin-bottom: 5px;}
.hev-p h5 {font-size: 16px;}
#main .hev-item h4 {font-size: 17px; letter-spacing: 0.05em; width: 100%;}
#main .hev-item  img{margin-top:5px;}	
#main .lens-phocro h4 {font-size: 14px; letter-spacing: 0.05em;	width: 100%;}
.lens-phocro h5 {font-size: 14px; letter-spacing: 0.05em; width: 100%;}
#main .rarts h5 {font-size: 14px; letter-spacing: 0.05em; width: 90%;}
#main .rarts h6 {font-size: 13px; letter-spacing: 0.05em; width: 85%; margin-bottom: 3px;}
#main .sokutei h4 {font-size: 18px; letter-spacing: 0.1em; width:80%;}
#main .repair h5 {width: 95%; font-size: 14px; letter-spacing: 0.02em;}
.repair p {width: 90%;}
.repair-item p {letter-spacing: 0.1em; width: 90%;　margin: 0px auto;}
#main .repair h6 {font-size: 13px; width: 80%}
/*その他
---------------------------------------------------------------------------*/
.ws,.wl {width: 94%;}
.big1 {font-size: 16px;}
img.fr,figure.fr,img.fl,figure.fl {float: none;margin:0 auto;width: 90%;}	
.sh {display:block;}
.pc {display:none;}
}



/*画面幅400px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:400px){

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ロゴ画像*/
header #logo img {width: 280px;	/*画像幅*/ bottom: 75px;	/*ヘッダーに対して下から40pxの場所に配置*/}
header .auto-style1 {font-size: 10.4px; width: 500px; bottom: 34px;	left: -30px;}
br {
display: block;
content: "";
margin: -2px 0;
}
#main h2, #main h3 {
	font-size: 16px;
	letter-spacing: 0.05em;
	padding-left: 10px;
	padding-right: 10px;
}	
#main .map img{width:70%;}
#main .box .list2 h4 {font-size: 14px;}
.item h4{font-size: 14px;　letter-spacing: 0.2em;
}
.lens h6 {font-size: 13px;}	
#main .lens-hev h5 {font-size: 14px; letter-spacing: 0.01em;}	
.hev-p h5 {font-size: 14px;}
.lens-phocro img{width: 85%; margin-top: 8px;}	
#main .hev-item h4 {font-size: 15px;}
.lens-phocro p {font-size: 9px;	letter-spacing: 0.05em;	width: 100%;}
#main .rarts h5 {font-size: 13px; letter-spacing: 0.02em; width: 90%;}
#main .rarts h6 {font-size: 10px; letter-spacing: 0.03em; width: 80%;}
.lens h5 {font-size: 16px; letter-spacing: 0.05em;}
#main .lens-item h4 {font-size: 18px; letter-spacing: 0.2em; width: 100%;}
#main .lens-item h5 {font-size: 18px; letter-spacing: 0.1em; width: 100%;}
#main .lens-item h6 {font-size: 18px; letter-spacing: 0.05em; width: 100%;}
#main .lens-item2 h4 {font-size: 18px; letter-spacing: 0.1em; width: 100%;}
#main .lens-item2 h5 {font-size: 16px; letter-spacing: 0.03em; width: 100%;}

	
img.fr,figure.fr,img.fl,figure.fl {float: none;margin:0 auto;width: 80%;}
.fr, .fl {float: none;}
.w25p, .w65p {width: auto;}
}