@charset "utf-8";

/************************************************
 ブロック用
************************************************ */
/*** 目次 ***

▼ブロック共通
リスト
タイトル
ヘッダー上、フッター下のブロックエリア

▼各機能ブロックの指定
-新着情報
-現在のカゴの中
-カテゴリ
-ガイドリンク
-ログイン（サイド用）
-検索
-カレンダー
-おすすめ商品
    *メインカラム用 1カラム時 [one_maincolumn]
    *メインカラム用 2カラム時 [two_maincolumn_left]
                              [two_maincolumn_right]
    *メインカラム用 3カラム時 [three_maincolumn]
    *サイドカラム用           [side_column]
    *商品詳細のオススメ商品   [whobought_area]
 */

/*画面大*/
@media only screen and (min-width: 1000px) {}
/*画面中*/
@media only screen and (min-width: 820px) and (max-width: 999px){}
/*画面小*/
@media only screen and (max-width: 819px){}



/* ==============================================
ブロック共通
/* ============================================= */
#container .bloc_body {
}
.side_column {
    overflow-x: hidden; /* IE6 表示乱れ防止 */
}
.side_column .bloc_outer {
margin-bottom:25px;
width:190px;
background:url(../img/common/side_bg.gif) repeat-y left top;
border-top:1px solid #444444;
border-bottom:1px solid #444444;
}
.side_column .bloc_body ,
.main_column .bloc_body {
}
.side_column .bloc_body .box {
}
.main_column .bloc_outer {
}

/* リスト
----------------------------------------------- */
/* ログイン 検索条件 */
#container .bloc_outer .bloc_body dl.formlist {
    margin-bottom: 8px;
}
#container .bloc_outer .bloc_body dl.formlist dd {
}
#container .bloc_outer .bloc_body dl.formlist dt {
}
#container .bloc_outer .bloc_body dl.formlist span{
    vertical-align: top;
}


/* タイトル
----------------------------------------------- */
/* タイトルの背景 白 */
#login_area h2 ,
#search_area h2 ,
#calender_area h2 ,
#cart_area h2 ,
#cart h2 {
    padding: 5px 0 8px 10px;
    border-style: solid;
    border-color: #f90 #ccc #ccc;
    border-width: 1px 1px 0;
    background: url('../img/background/bg_tit_bloc_01.jpg') repeat-x left bottom;
    font-size:1.5rem;
}
#category_area h2 {
    border-top: solid 1px #f90;
    background: url('../img/background/bg_tit_bloc_01.jpg') repeat-x left bottom;
    padding: 5px 0 8px 10px;
    font-size:1.5rem;
}

/* タイトルの背景 オレンジ */
#recomend_area h2 ,
#news_area h2 {
    padding: 5px 0 8px 10px;
    border-style: solid;
    border-color: #f90 #ccc #ccc;
    border-width: 1px 1px 0;
    background: url('../img/background/bg_btn_bloc_02.jpg') repeat-x left bottom #fef3d8;
}


/* ==============================================
▼ヘッダー上、フッター下のブロックエリア
=============================================== */
div#topcolumn {
    margin:0px;
    clear:both;
}
div#bottomcolumn {
    margin:0px;
    clear: both;
}


/* ***********************************************
▼各機能ブロックの指定
/*********************************************** */


/* ######################################################################################

	ピックアップ

###################################################################################### */
/*
#PickUp {font-size:0; margin:0 auto 25px; text-align:center;}
#PickUp dl {display:inline-block;}
#PickUp dl dt {background:#ffffff;}
#PickUp dl dt img {width:100%; height:auto;}
#PickUp dl dd {
	background:#fffcfd;
	min-height:5em;
	padding:0 10px 10px;
	text-align:center;
	font-size:1.4rem;
	}
@media only screen and (min-width: 820px) {
#PickUp dl {
	display:inline-block;
	width:250px;
	margin-right:15px;
	vertical-align:top;
}
#PickUp dl:last-of-type {margin-right:0;}
}

@media only screen and (max-width: 819px){
#PickUp dl {display:block; margin-bottom:20px;}
#PickUp dl dd {font-size:1.7rem; text-align:left;}
#PickUp dl dd br {display:none;}
}

*/
/* ######################################################################################

	サブイメージ

###################################################################################### */

.subimg.multi {
    text-align: center;
    margin-top:20px;
}
.subimg .head {margin-bottom:15px;}
.subimg .foot {margin-bottom:20px; margin-top:-15px;}

.subimg li {
    margin-bottom: 20px;
    text-align: center;
    font-size:0;
}
.subimg li.narrow {
    margin-bottom: 0;
}
/*
.subimg.multi li {
    display: inline-block;
    margin-right:15px;
}
.subimg.multi li:nth-of-type(2n) {
    margin-right:0;
}
*/
.subimg .sp,
.subimg.multi .sp {
    display: none;
}

.subimg.multi {
    width:797px\9;
    margin-right:-15px\9;
}
@media only screen and (max-width: 999px){
.subimg.box,
.subimg.box * {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
}
.subimg.box {
    max-width:780px;
    margin-left:auto;
    margin-right:auto;
    background:#ffffff;
}
.subimg.box ul {
    margin-bottom:20px;
    padding:0 10px 1px;
}
.subimg.box.multi li {
    width:48.5%;
    margin-right:0;
}
.subimg.box.multi li:nth-of-type(2n) {padding-left:5px;}
.subimg.box.multi li:nth-of-type(2n+1) {padding-right:5px;}
.subimg.box.multi img {width:100%; height:auto;}
}

@media only screen and (max-width: 819px){
    .subimg img {width:100%;}
    .subimg.multi li {
        display: block;
        margin-right: 0;
    }
    .subimg.box.multi li {
        width:100%;
        padding:0 !important;
    }
    .subimg .pc,
    .subimg.multi .pc {display: none;}
    .subimg .sp,
    .subimg.multi .sp {display: block;}
}
@media only screen and (min-width: 500px){
  .subimg.multi ul{
      max-width:780px;
      margin-left:auto;
      margin-right:auto;
      display: flex;
      flex-wrap: wrap;
      justify-content:space-between;
  }
  .subimg.multi ul li{width:48.8%;}
  .subimg.multi ul li img {max-width:100%; height:auto;}
}


/* ######################################################################################

	タイトル＋テキスト

###################################################################################### */

	.info {color: #C70000; background-color: rgba(246,192,189,0.5);}
	.freecall {color: #e70000;}
	.email {color: #04316b;}

	.info {
		font-size:1.5rem;
		font-weight: bold;
		background-repeat: no-repeat;
		text-align: left;
		padding: 4px 10px;
		margin: 0 0 10px;
	}
	.info_txt {
		padding: 4px 10px;
		margin: 0 0 20px;
	}
	.info_txt dl {
		margin: 10px 0;
		font-size:1.4rem;
	}
	.freecall {
		font-size:1.6rem;
		font-weight: bold;
		line-height: 1.5em;
		margin-top: 5px;
	}
	.email {
		font-size:1.5rem;
		font-weight: bold;
		line-height: 1.6em;
		padding-left: 10px;
	}






/* ######################################################################################

	新着情報

###################################################################################### */

/*色設定*/
#NewsArea dl.newslist {color:#626745; border-bottom:1px dotted #99AB4E;}
#NewsArea dl.newslist dt {color:#666666;}
@media only screen and (max-width: 819px){
	#NewsArea div.title {border-bottom:3px solid #cf5350;}
	#NewsArea div.title:before {background:url(../../img/icon/ico_ume.png) 5px center no-repeat; background-size:13px auto;}
}






/*共通設定*/
#NewsArea{margin-bottom:20px;}
#NewsArea .news_contents {font-size:1.5rem;}
#NewsArea dl.newslist {padding:5px 0px;}
#NewsArea dl.newslist dt {padding:0 0 0 5px; line-height:150%;}
#NewsArea dl.newslist dd {padding:0 0 5px 5px; line-height:150%;}
#NewsArea .bloc_body {padding:5px 70px 5px 25px;}

@media only screen and (max-width: 999px){
	#NewsArea .bloc_body {padding: 5px 0;}
	#NewsArea div.title img {width:100%; height:auto;}
}

@media only screen and (max-width: 819px){
	#NewsArea div.title {background:#ffffff;}
	#NewsArea div.title img {display:none;}
	#NewsArea div.title:before {content:"お知らせ"; font-size:1.9rem; font-weight:bold; padding-left:23px;}
}

/* ######################################################################################

	Web限定

###################################################################################### */
#WebService{font-size:0;}

#WebService ul {display:inline-block; width:auto; margin:0 auto; text-align:center;}
#WebService li{display:inline-block; margin-bottom:10px;}
#WebService li img{vertical-align:top;}


@media only screen and (max-width: 999px){
#WebService li img {width:100%; height:auto; max-width:auto;}

}




/* ===============================================
▼現在のカゴの中
=============================================== */
#cart_area .bloc_body{
padding: 5px 4px 10px 4px;
}

#cart_area .information {
width:194px;
font-size:1.5rem;
margin:0px auto;
color:#626745;
}
#cart_area .information p.item{
border-bottom:1px dotted #999999;
padding:5px 0px;
margin-bottom:5px;
margin-top:5px;

}
#cart_area .postage {
    margin-top: 10px;
    padding-top: 10px;
}
#cart_area .postage .point_announce {
    padding: 2px 0 2px 20px;
}
#cart_area .btn {
    padding: 10px 0;
    text-align: center;
}


/* ===============================================
▼カテゴリ
=============================================== */
#category_area{
height:200px;
width:1000px;
}
#category_area .bloc_body{
padding-top:22px;
}
#category_area .bloc_body div{
float:left;
}
#category_area ul#categorytree{
width: 825px;
float:right;
padding-top:5px;
}

#category_area li{
background:url(../img/common/cate_icon.gif) no-repeat left 5px;
line-height:150%;
color:#FFFFFF;
padding-left:10px;
width:225px;
display:block;
float:left;
padding-bottom:3px;
}

#category_area li a:link,
#category_area li a:visited{
color:#FFFFFF;
text-decoration:none;
}

#category_area li a:hover,
#category_area li a:active{
color:#FFFFFF;
text-decoration:underline;
}


/* ===============================================
▼ガイドリンク
=============================================== */
#guide_area {
    margin-top: 1em;
    border: none;
}
#guide_area li{
    margin-bottom: 5px;
    letter-spacing: -0.05em;
}
ul.button_like li {
    margin: 0;
    padding: 0 0 1px 0;
    background: url("../img/background/bg_btn_list.jpg") bottom repeat-x;
}
ul.button_like li a {
    margin: 0;
    padding: 10px 15px 10px 10px;
    border: 1px solid;
    border-bottom: none;
    border-color: #ccc;
    display: block;
    background: url("../img/icon/ico_arrow_02.gif") no-repeat right;
    text-decoration: none;
    outline: none;
}


/* ===============================================
▼ログイン（サイド用）
※ヘッダー用はbloc_alpha.css内に記述
=============================================== */
#container div#login_area .bloc_body {
    padding: 5px 4px 10px 4px;
}

#container div#login_area .bloc_body p {
}
#container div#login_area .s_login_ttl{
background:url(../img/common/side_login_ttl.gif) no-repeat left top;
padding:8px 10px;
line-height:150%;
height:19px;
font-size:1.5rem;
margin-bottom:10px;
}

#container div#login_area .login_box{
width:160px;
margin:0px auto;
}
#container div#login_area .box140{
width:154px;
}

#container div#login_area .bloc_body .btn {
    text-align: center;
}
#container .login_area dl.formlist {
    margin-bottom: 8px;
    width: 420px;
}
#container .login_area dl.formlist dt {
    margin-bottom: 3px;
    padding-left: 15px;
    color: #333;
    background: url("../img/icon/ico_arrow_03.gif") no-repeat left;
    width: 90px;
    float: left;
    font-size:90%;
}
#container .login_area dl.formlist dd {
    margin-bottom: 5px;
    float: right;
    width: 300px;
    vertical-align: bottom;
    text-align: left;
}
#container div#login_area .bloc_body .mini {
    margin-top: 5px;
    letter-spacing: -0.01em;
}


/* ===============================================
▼検索
=============================================== */
div#search_area .bloc_body {
    padding: 10px;
}
div#search_area .bloc_body .btn {
    text-align: center;
}
.side_search{
width:165px;
padding:5px 0px;
}
.side_search div,
.side_search input{
float:left;
}
.side_search .box140{
width: 94px !important;
height:12px !important;
_height: 18px;
}
.side_search .btn{
width: 24px !important;
}


/* ===============================================
▼カレンダー
=============================================== */
#calender_area {
    background-color: transparent;
    border: none;
}
#calender_area .bloc_body {
    padding: 10px 0;
    background-color: #f1f9fc;
}
#calender_area table {
    background: #fff;
    border: none;
    width: 150px;
    margin: 0 auto 5px;
    font-size:90%;
}
#calender_area table td {
    padding: 1px 3px;
    border-top: 1px solid #ccc;
    border-right: none;
    text-align:center;
}
#calender_area th {
    padding: 1px 3px;
    background: #fff;
    border: none;
    text-align: center;
}
#calender_area table .month {
    margin-bottom: 5px;
    padding-left: 12px;
    background: url("../img/icon/ico_arrow_04.gif") no-repeat left;
    font-size:120%;
}
#calender_area .off {
    color: #f00;
}
#calender_area .information {
    margin-left: 10px;
    font-size:90%;
}


/* ===============================================
▼おすすめ商品
=============================================== */
/*
   tplファイルのマークアップが同じ項目
   メインカラム用 2カラム時 [two_maincolumn_left]
                            [two_maincolumn_right]
   メインカラム用 3カラム時 [three_maincolumn]
   サイドカラム用           [side_column]
   商品詳細のオススメ商品   [whobought_area]
=============================================== */
/* 共通
----------------------------------------------- */
#recomend_area .bloc_body ,
#whobought_area .whobought_bloc {
width: 800px;
}

#recomend_area .bloc_body p ,
#whobought_area .whobought_bloc p {
    margin: 0 0 5px 0;
}

#recomend_area .bloc_body img ,
#whobought .whobought_bloc img {
    display: block;
    float: left;
    margin: 0 5px 0 0;
}

#recomend_area .bloc_body h4 ,
#whobought_area .whobought_bloc h4 {
font-size:1.5rem;
font-weight:bold;
}

#recomend_area .bloc_body h4 a:link,
#recomend_area .bloc_body h4 a:visited,
#whobought_area .whobought_bloc h4 a:link,
#whobought_area .whobought_bloc h4 a:visited{
color:#333333;
text-decoration: none;
}
#recomend_area .bloc_body h4 a:hover,
#recomend_area .bloc_body h4 a:active,
#whobought_area .whobought_bloc h4 a:hover,
#whobought_area .whobought_bloc h4 a:active{
color:#333333;
text-decoration: underline;
}

/* 鐢诲儚
----------------------------------------------- */
#recomend_area .bloc_body .productImage ,
#whobought_area .whobought_bloc .productImage {
    margin-bottom: 10px;
    float: left;
    width: 82px;
}


/* 宸﹀彸銇尟銈婂垎銇�
----------------------------------------------- */
#one_maincolumn #recomend_area .recomendleft ,
#two_maincolumn_right #recomend_area .recomendleft ,
#two_maincolumn_left #recomend_area .recomendleft ,
#three_maincolumn #recomend_area .recomendleft ,
#whobought_area .whobought_bloc .whobought_left {
    float: left;
    width: 180px;
margin-right:20px;
}
#one_maincolumn #recomend_area .recomendright ,
#two_maincolumn_right #recomend_area .recomendright ,
#two_maincolumn_left #recomend_area .recomendright ,
#three_maincolumn #recomend_area .recomendright ,
#whobought_area .whobought_bloc .whobought_right {
    float: left;
    width: 180px;
margin-right:20px;
}


/* 鍟嗗搧瑾槑銉嗐偔銈广儓
----------------------------------------------- */
/* 銉°偆銉炽偒銉┿儬鐢� 1銈儵銉犳檪*/
#one_maincolumn #recomend_area .bloc_body .productContents {
    float: right;
    width: 74%;
}

/* 銉°偆銉炽偒銉┿儬鐢� 2銈儵銉犳檪*/
#two_maincolumn_right #recomend_area .bloc_body .productContents ,
#two_maincolumn_left #recomend_area .bloc_body .productContents ,
#two_maincolumn_right #whobought_area .whobought_bloc .productContents ,
#two_maincolumn_left #whobought_area .whobought_bloc .productContents {
float: right;
width: 88px;
}

/* 銉°偆銉炽偒銉┿儬鐢� 3銈儵銉犳檪*/
#three_maincolumn #recomend_area .bloc_body .productContents ,
#three_maincolumn #whobought_area .whobought_bloc .productContents {
    float: right;
    width: 67%;
}

/* 銈点偆銉夈偒銉┿儬鐢� (骞卲x鍥哄畾) */
.side_column #recomend_area .bloc_body {
    margin-top: 5px;
    margin-right: 0;
    width: 157px;
    padding: 0;
}
.side_column #recomend_area .bloc_body .productContents {
    padding: 0;
    margin: 0;
    width: 80px;
}
.side_column #recomend_area .recomendleft {
    padding: 0;
    width: 70px;
    float: left;
}
.side_column #recomend_area .recomendright {
    margin: 0;
    padding: 0;
    width: 70px;
    float: right;
}

/* IE6浠ヤ笅*/
* html .side_column #recomend_area .bloc_body {
    width: 180px;
}





/*++++++++
++++++++++*/
#top_container .sns_box{
padding-left:55px;
}
.sns_box{
width:190px;
padding-bottom:30px;
}
.sns_box div{
width:95px;
float:left;
}



/*++++++++
++++++++++*/
.right_btm{
width:740px;
padding-top:20px;
}
.right_btm ul li{
float:left;
padding-right:20px;
}


/* デザイン番号で検索
----------------------------------------------- */
.nossearch .formlist_n {display: none;}
.nossearch p {margin-top: 20px; line-height: 1.07143;}
.nossearch p .red {color: #C30216;}

.nossearch .searchBox {display: flex; margin-top: 50px; margin-bottom: 38px;}
.nossearch .searchBox input[type="text"] {
    flex: 1;
    height: 40px;
    border-radius: 3px 0 0 3px;
    font-size: 1.3rem;
    font-family: Hiragino Sans, "ヒラギノ角ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
}
.nossearch .searchBox.large input[type="text"] {height: 48px;}
.nossearch .searchBox input[type="text"]::placeholder,
.nossearch .searchBox input[type="text"]:-ms-input-placeholder {color: #707070;}
.nossearch .searchBox button {
    width: 55px;
    height: 40px;
    background: #CF5749;
    border: none;
    border-radius: 0 3px 3px 0;
    color: #fff;
    -webkit-appearance: none;
}
.nossearch .searchBox.large button {height: 48px; font-size: 14px;}


/* ######################################################################################

　カテゴリーツリー

###################################################################################### */

.categorytree + .categorytree {margin-top: 15px;}
.categorytree + .bottomBorderTitle.side {margin-top: 33px;}
.categorytree .level1 + .level1 {margin-top: 15px;}
.categorytree .level1 > a {padding: 0; pointer-events: none;}
.categorytree li ul li a {
    position: relative;
    display:block;
    padding: 17px 24px 15px 15px;
    background: #fff;
    border-bottom: 1px dashed #D7D7D7;
    color: #000;
    text-decoration: none;
}

.categorytree li ul li a:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 13px;
    transform: translateY(-50%);
    display: block;
    width: 7px;
    height: 8px;
    background-image: url("../img/common/icon_arrow_outline.svg");
    background-size: 7px 8px;
}