@charset "euc-jp";

a {
  color: #464e54;
}
a:hover {
  color: #5e5e5e;
}

/**************************ページ全体******************************/
body {
 background:#f4f2f2;/*文字の所の背景*/
}
.pezizenntai {
  margin: 0px auto; /*アイコンなどの外側の幅を変える*/
  width: 1150px;/*横のサイズ指定*/
  text-align: left; /*文字を左寄せ*/
  position: relative;/* ←相対位置 */
  padding: 0px 0px 0px 0px; /*アイコンなどの内側の幅を変える*/
}
/**************************サイト内検索バー******************************/
/*カテゴリー窓_ヘッダーサイド共通*/
.kategorimado{
  display: flex; /*フレックスボックス*/
  width:120%;/*横のサイズ指定*/
  border: 0; /*枠線を消す*/
  border-radius: 4px 0px 0px 4px;/*角の丸み*/
  font-size:100%;　/*フォントサイズ*/
  background:#83aa6c;/*文字の所の背景*/
}
/*検索窓ヘッダ*/
.header_nanikaosagasi{
 font-size: 100%; /*フォントサイズ*/
 background: #fff; /*文字の所の背景*/
 padding: 0 5px; /*アイコンなどの内側の幅を変える*/
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
 box-sizing: border-box;
 width: 180px;/*横のサイズ指定*/
 height: 30px;/*縦のサイズ指定*/
 border: 0; /*枠線を消す*/
 border-radius: 3px 0px 0px 3px; /*角の丸み変則*/
}
/*検索窓サイドメニュー*/
.saido_nanikaosagasi{
 font-size: 100%; /*フォントサイズ*/
 background: #fff; /*文字の所の背景*/
 padding: 0 5px; /*アイコンなどの内側の幅を変える*/
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
 box-sizing: border-box;
 width: 190px;/*横のサイズ指定*/
 height: 30px;/*縦のサイズ指定*/
 border: 1px solid #bdbdbd; /*アイコンなどの縁*/
 margin: 5px 0px 0px 0px; /*アイコンなどの外側の幅を変える*/
 border-radius: 3px 0px 0px 3px; /*角の丸み変則*/
}
/*検索窓の虫眼鏡ヘッダー*/
.header_btnmusimegane{
 text-align:center; /*文字をセンタリング*/
 width: 40px;/*横のサイズ指定*/
 height: 30px;/*縦のサイズ指定*/
 border: 0; /*枠線を消す*/
 border-radius: 0px 4px 4px 0px;/*角の丸み*/
 background:#c86509;/*文字の所の背景*/
 color:#ffff; /*文字カラー*/
}
/*検索窓の虫眼鏡サイドメニュー*/
.saido_btnmusimegane{
 text-align:center; /*文字をセンタリング*/
 width: 40px;/*横のサイズ指定*/
 height: 30px;/*縦のサイズ指定*/
 border: 0; /*枠線を消す*/
 border-radius: 0px 4px 4px 0px;/*角の丸み*/
 background:#c86509;/*文字の所の背景*/
 color:#ffff; /*文字カラー*/
 margin: 5px 0px 0px 0px; /*アイコンなどの外側の幅を変える*/
}
/**************************ヘッダー******************************/
/*ヘッダー_全体*/
.header {
 clear:both;
 width:100%;/*横のサイズ指定*/
 background:#323e55;/*文字の所の背景*/
 padding: 10px 0px 0px 0px; /*アイコンなどの内側の幅を変える*/
}
/*ヘッダー_ネイビー部分全体*/
.header_nei{
 display: flex; /*フレックスボックス*/
}
/*ヘッダー_ネイビー部分_ロゴ*/
.header_nei_logo {
 align-items: center; /*縦方向に中央寄せ*/
 width: 400px; /*横のサイズ指定*/
}
.header_nei_logo img{
 width:100%; /*横のサイズ指定*/
 margin: 5px 10px 5px 20px; /*アイコンなどの外側の幅を変える*/
}
/*ヘッダー_ネイビー部分_真ん中の文と検索*/
.header_nei_mannnaka {
width:70%;/*横のサイズ指定*/
}
/*ヘッダー_ネイビー部分_真ん中の文*/
.header_nei_mannnaka_ue {
 display: flex; /*フレックスボックス*/
 align-items: center; /*縦方向に中央寄せ*/
 justify-content: center; /*横方向に中央寄せ*/
 margin: 5px 5px 0px 5px; /*アイコンなどの外側の幅を変える*/
 color:#ffffff; /*文字カラー*/
}
/*ヘッダー_ネイビー部分_真ん中の検索窓*/
.header_nei_mannnaka_sita {
 font-size:80%;　/*フォントサイズ*/
 background: #ff7700; /*文字の所の背景*/
 margin: auto; /*画像などをセンターに寄せる*/
 display: inline-block;  /*ブロック化してpaddingやmarginを適用させる*/
 vertical-align: bottom; /*インラインブロックの時の縦方向の下寄せ*/
 display: flex; /*フレックスボックス*/
 align-items: center; /*縦方向に中央寄せ*/
 justify-content: center; /*横方向に中央寄せ*/
 margin: 10px 5px 0px 5px; /*アイコンなどの外側の幅を変える*/
}

/*ヘッダー_ネイビー部分_右側全体*/
.header_nei_migi {
 width:70%;/*横のサイズ指定*/
}
/*ヘッダー_ネイビー部分_右側_上　送料とカート*/
.header_nei_migi_ue {
 display: flex; /*フレックスボックス*/
 align-items: center; /*縦方向に中央寄せ*/
 justify-content:flex-end; /*横方向に右寄せ*/
 margin: 5px 5px 0px 5px; /*アイコンなどの外側の幅を変える*/
 height: 30px;/*縦のサイズ指定*/
}
/*送料*/
.header_delivery_price {
 margin: 5px 0px 5px 0px; /*アイコンなどの外側の幅を変える*/
 padding: 5px 10px 3px 10px; /*アイコンなどの内側の幅を変える*/
 border: solid 1px #aaa; /*アイコンなどの縁*/
 color:#ffffff; /*文字カラー*/
 font-size:100%;　/*フォントサイズ*/
}
/*カート*/
.header_kaato{
 margin: 0px 10px 0px 10px; /*アイコンなどの外側の幅を変える*/
}
.header_kaato a{
 color: #ffffff; /*文字カラー*/
}
.header_kaato_kosuu {
 margin: 5px 0px 0px 5px; /*アイコンなどの外側の幅を変える*/
 padding: 3px 10px; /*アイコンなどの内側の幅を変える*/
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px; /*角の丸み*/
 background: #e56527; /*文字の所の背景*/
 color: #fff; /*文字カラー*/
 font-weight: bolder;
}
/*ヘッダー_ネイビー部分_右側_下　インフォ*/
.header_nei_migi_sita {
 margin: 10px 10px 0px 0px; /*アイコンなどの外側の幅を変える*/
 align-items: flex-start; /*縦方向に上寄せ*/
 color: #ffffff; /*文字カラー*/
 font-size: 70%; /*フォントサイズ*/
}
/*ヘッダー_グレー部分*/
.header_gure{
 text-align:center; /*文字をセンタリング*/
 font-size:100%;　/*フォントサイズ*/
 font-weight:bold;/*フォント太字*/
 color:#d8e306; /*文字カラー*/
 padding: 3px 0px 2px 0px; /*アイコンなどの内側の幅を変える*/
 margin: 0px 0px 10px 0px; /*アイコンなどの外側の幅を変える*/
 background:#a19b96;;/*文字の所の背景*/
 width:100%;
}
/**************************メインコンテンツ（右側）******************************/
.m_contents {
 float: right;
 width: 900px; /*横のサイズ指定*/
}

/*基本的にトップの所にCSSは置いてあります*/


/**************************サイドコンテンツ（左側）******************************/
/*サイドメニュー_全体*/
.side {
 float: left;
 width: 230px; /*横のサイズ指定*/
}
/*サイドメニューのバナーの隙間*/
.side_menyu1{
 margin: 0px 0px 3px 0px; /*アイコンなどの外側の幅を変える*/
}
.side_menyu2{
 margin: 0px 0px 7px 0px;  /*アイコンなどの外側の幅を変える*/
}
.side_menyu3{
 margin: 0px 0px 7px 0px; /*アイコンなどの外側の幅を変える*/
 background:#fbfbfb;/*文字の所の背景*/
 padding:  5px 5px 5px 10px; /*アイコンなどの内側の幅を変える*/
 border-top:solid 1px #978D86;
 border-bottom:solid 1px #978D86;
}
.side_menyu4{
 margin: 0px 0px 7px 0px; /*アイコンなどの外側の幅を変える*/
 background:#fbfbfb;/*文字の所の背景*/
 padding: 5px 5px 5px 10px; /*アイコンなどの内側の幅を変える*/
 border-top: solid 1px #978D86; /*上に線を引く*/
 border-bottom: solid 1px #978D86;/*下に線を引く*/
}
/*サイドメニューの〇〇から探す*/
.side_sagasu{
  padding-left: 10px; /*アイコンなどの内側の幅を変える*/
  font-weight:900;/*フォント太字*/
}
/*アコーディオンメニュー*/
.accordion {
 color:#000000; /*文字カラー*/
 padding: 0px 50px 0px 20px; /*アイコンなどの幅を変える*/
}
.accordion a {
 color:#000000; /*文字カラー*/
 padding: 10px 0px 5px 0px; /*アイコンなどの幅を変える*/
}
.accordion ul {
 list-style: none;
 margin:0; /*アイコンなどの外側の幅を変える*/
}
label{
 cursor: pointer;
}
.toggle{
 display: none;
}
.toggle + ul{
 max-height: 0;
 overflow: hidden;
 transition: all 1s ease;
 padding: 0px 0px 0px 3px; /*アイコンなどの幅を変える*/
 line-height:250%;
 font-size:85%;　/*フォントサイズ*/
}
.toggle:checked + ul{
 max-height: 1200px;
 transition: all 1s ease-in;
 padding: 0px 0px 0px 3px; /*アイコンなどの幅を変える*/
 line-height:250%;
 font-size:85%;　/*フォントサイズ*/
}
a {
 text-decoration: none;　/*リンクの下線消す*/
 list-style: none;
}
a:hover {
 text-decoration: none;/*リンクホバーの下線を消す*/
 list-style: none;
}
a:link {
 color:ff0;
 list-style: none;
}
.aaaa { /*カテゴリーから探す*/
 padding:2px 0px 0px 0px ; /*アイコンなどの内側の幅を変える*/
 list-style: none;
}
.aaaa img{
 margin: 0px 0px 2px 0px; /*アイコンなどの外側の幅を変える*/
 border-top: 1px solid #cdc6c0;/*上に線を引く*/
 border-bottom: 1px solid #cdc6c0;/*下に線を引く*/
}
.aaaa ul{
 margin: 0px 0px 0px 5px; /*アイコンなどの外側の幅を変える*/
}
.dddd { /*下線なし*/
 padding:10px 0px 5px 20px ; /*アイコンなどの内側の幅を変える*/
}
.eeee {
 padding:5px 0px 5px 0px ; /*アイコンなどの内側の幅を変える*/
 width: 100%; /*横のサイズ指定*/
}
.eeee img {
 border-top: 1px solid #cdc6c0;/*上に線を引く*/
 border-bottom: 1px solid #cdc6c0;/*下に線を引く*/
}
.bbbb {/*メーカーから探す*/
 border-bottom:solid 1px #978D86; /*下に線を引く*/
 padding:10px 0px 4px 20px ; /*アイコンなどの内側の幅を変える*/
}
.cccc {/*以下*/
 padding:10px 0px 0px 0px ; /*アイコンなどの内側の幅を変える*/
 list-style: none;
}
.gggg {/*見出し*/
 background:#ED8D49;/*文字の所の背景*/
 padding: 3px 0px 3px 25px; /*アイコンなどの幅を変える*/
 color:#ffffff; /*文字カラー*/
 font-size: medium;/*フォントサイズ*/
}
.ffff {
 border-top:solid 1px #978D86; /*上に線を引く*/
 padding:13px 0px 13px 0px ; /*アイコンなどの内側の幅を変える*/
 margin: 0 0 0 0px; /*アイコンなどの外側の幅を変える*/
 width: 100%; /*横のサイズ指定*/
 list-style: none;
 border-bottom:solid 1px #978D86; /*下に線を引く*/
 font-size:110%;　/*フォントサイズ*/
 text-decoration: none;
 background:#d5d3cb;/*文字の所の背景*/
}
.ffff a {
 margin: 0 0 0 8px; /*アイコンなどの外側の幅を変える*/
}

/*メーカー一覧展開*/
.meekaa{
 display: flex;/*フレックスボックス*/
 flex-wrap: wrap;/*フレックスボックスで折り返し*/
 justify-content: center;/*フレックスボックス中央寄せ*/
}
.meekaa_naka{
 text-align: center; /*文字をセンタリング*/
 padding: 2px 2px 2px 2px; /*アイコンなどの内側の幅を変える*/
  width: 31%; /*横のサイズ指定*/
}

/*ブログバナー*/
.burogu{
 text-align:center; /*文字をセンタリング*/
 font-size:140%;　/*フォントサイズ*/
 font-weight:bold;/*フォント太字*/
 background:#73D0C2;/*文字の所の背景*/
 width: 95%;/*サイズ指定*/
 padding: 4px 3px 2px 3px; /*アイコンなどの幅を変える*/
 margin: auto; /*アイコンなどの外側の幅を変える*/
 border-radius: 40px;
 margin: 5px 0px; /*アイコンなどの外側の幅を変える*/
}
.burogu a{
  color:#ffffff; /*文字カラー*/
}
/*Twitterバナー*/
.Twitter{
 text-align:center; /*文字をセンタリング*/
 font-size:140%;　/*フォントサイズ*/
 font-weight:bold;/*フォント太字*/
 background:#7cadc8;/*文字の所の背景*/
 width: 95%;/*サイズ指定*/
 padding: 4px 3px 2px 3px; /*アイコンなどの幅を変える*/
 margin: auto; /*アイコンなどの外側の幅を変える*/
 border-radius: 40px; /*角の丸み*/
 margin: 5px 0px 10px 0px; /*アイコンなどの外側の幅を変える*/
}
.Twitter a{
 color:#ffffff; /*文字カラー*/
}
/*モバイルショップQRコード*/
.side_mobairu{
 text-align: center; /*文字をセンタリング*/
}
.side_mobairu img{
 text-align: center; /*文字をセンタリング*/
 width: 50%; /*横のサイズ指定*/
}
/**************************最近チェックした商品******************************/
/*最近チェック_全体*/
.checksita {
 margin: 10px 0px 20px 0px; /*アイコンなどの外側の幅を変える*/
}
/*最近チェック_タイトル*/
.checksita_taitoru{
 margin: 15px 0px 5px 0px; /*アイコンなどの外側の幅を変える*/
 padding: 10px 0px 0px 10px; /*アイコンなどの内側の幅を変える*/
 text-overflow: ellipsis;/*文字があふれた場合...にする*/
 font-size:100%;　/*フォントサイズ*/
 display: inline-block;/*ブロック化してpaddingやmarginを適用させる*/
 border-bottom: 1px solid #978D86; /*下に線を引く*/
}
/*最近チェック_単体枠*/
.checksita_waku{
 display: flex;/*フレックスボックス*/
 list-style: none;　/*点を消す*/
 padding: 5px 5px 5px 5px; /*アイコンなどの内側の幅を変える*/
 margin: 5px 5px 5px 5px; /*アイコンなどの外側の幅を変える*/
}
/*最近チェック_単体枠中身*/
.checksita_naka{
 padding: 5px 5px 5px 5px; /*アイコンなどの内側の幅を変える*/
 margin: 5px 5px 10px 5px; /*アイコンなどの外側の幅を変える*/
 background:#ffffff;/*文字の所の背景*/
 border-radius: 5px;/*角の丸み*/
 width: 14.5%; /*横のサイズ指定*/
}
/*最近チェック_単体枠中身の名前と値段*/
.checksita_name_nedan{
 border-left: 1px solid #636363;/*左に線を引く*/
 margin: 3px 0px 0px 0px; /*アイコンなどの外側の幅を変える*/
}
/*最近チェック_単体枠中身の名前*/
.checksita_name{
 padding: 0px 5px 2px 5px; /*アイコンなどの内側の幅を変える*/
 margin: 0px 0px 0px 0px; /*アイコンなどの外側の幅を変える*/
 font-size:80%;　/*フォントサイズ*/
 width: 30px;  /*横のサイズ指定*/
 overflow: hidden;
 display: -webkit-box;/*↓ここから文字がはみ出した時に…にする*/
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 制限したい行数が2の場合 */
}
/*最近チェック_単体枠中身の値段*/
.checksita_nedan{
 padding: 0px 5px 3px 5px; /*アイコンなどの内側の幅を変える*/
 margin: 0px 0px 0px 0px; /*アイコンなどの外側の幅を変える*/
 font-size:80%;　/*フォントサイズ*/
}
/**************************フッター******************************/
.footer{
 clear:both; /*要素は先行する左右両方の浮動要素と切り離され、下に移動*/
}
.topobi {
 display: flex; /*フレックスボックス*/
 text-align:center; /*文字をセンタリング*/
 color:#ffffff; /*文字カラー*/
 font-size:90%;　/*フォントサイズ*/
 font-weight:bold;/*フォント太字*/
 background:#978d86;/*文字の所の背景*/
 width:100%;/*横のサイズ指定*/
 height: 17px;/*縦のサイズ指定*/
 padding: 6px 0px 8px 0px; /*アイコンなどの内側の幅を変える*/
 position: absolute;/*←絶対位置*/
 bottom: 0; /*下に固定*/
 list-style: none; /*点を消す*/
 justify-content: center; /*横方向に中央寄せ*/
}
.topobi a{
 color:#ffffff; /*文字カラー*/
}