@charset "utf-8";
/* CSS Document */
/* 20151225からの季節の企画ページ共通 */
/* 幅950pxで作成（left15.htmlなし） */

/* micro clearfix
-----------------------------------------------------*/
.cf:before, .cf:after { content: " "; display: table;} .cf:after { clear: both; } .cf { *zoom:1;}

/* reset
-----------------------------------------------------*/
ul, ol, dl { list-style: none; }
ul, ol, dl, li, dt, dd, p, div, table, tr, th, td { margin: 0; padding: 0; }
img {
/* IE7 縮小画像 ニアレストネイバーによる画像荒れをバイキュービックで回避 IE 9+～微妙 */
-ms-interpolation-mode: bicubic;
vertical-align: bottom;
}
b {font-weight: normal;}
em {font-style:normal;} 

a img {
background:none;
}


/* base style
==========================================================*/
body {
 background: #fff;
 font-family: Meiryo,"Hiragino Kaku Gothic ProN","MS PGothic",sans-serif;
 font-size: 16px;
 font-weight: normal;
 line-height: 1.5em; /* 24px */
 margin: 0 auto;
 padding: 0;
 -webkit-text-size-adjust: 100%; /* iOS文字サイズ調整 */

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;

}

html, body {
 width: 100%; /* スマホPC表示用に明示 */
}

/* 文字間 カーニング（トラッキング）用 ※大体emmet記法 */
.lts1px {letter-spacing: 1px;} .lts2px {letter-spacing: 2px;} .lts3px {letter-spacing: 3px;} .lts4px {letter-spacing:4px;} .lts5px {letter-spacing:5px;}
.lts6px {letter-spacing:6px;}
/* 文字間 マイナスカーニング用 */
.lts-1px {letter-spacing: -1px;} .lts-2px {letter-spacing: -2px;} .lts-3px {letter-spacing:-3px;} .lts-4px {letter-spacing: -4px;} .lts-5px {letter-spacing: -5px;}
.lts-6px {letter-spacing: -6px;} .lts-7px {letter-spacing: -7px;} .lts-8px {letter-spacing: -8px;} .lts-9px {letter-spacing: -9px;}
/* font-size 微調整用 ※大体emmet記法 */
.fz06e {font-size: .6em;} .fz07e {font-size: .7em;} .fz08e {font-size:.8em;} .fz09e {font-size: .9em;} .fz1e {font-size: 1em;} .fz11e {font-size: 1.1em;} .fz12e {font-size: 1.2em;} .fz13e {font-size: 1.3em;}
.fz14e {font-size: 1.4em;} .fz15e {font-size: 1.5em;} .fz2e {font-size: 2em;} .fz3e {font-size: 3em;} .fz4e {font-size: 4em;} .fz5e {font-size: 5em;}

.fz6px {font-size: 6px;} .fz7px {font-size: 7px;} .fz8px {font-size: 8px;}
.fz9px {font-size: 9px;} .fz10px {font-size: 10px;} .fz11px {font-size: 11px;}
.fz12px {font-size: 12px;} .fz13px {font-size: 13px;} .fz14px {font-size: 14px;}
.fz15px {font-size: 15px;} .fz16px {font-size: 16px;} .fz17px {font-size: 17px;}
.fz18px {font-size: 18px;} .fz19px {font-size: 19px;} .fz20px {font-size: 20px;}


/* 各商品のボーダー色設定 
==========================================================*/
.border_r {
border-right:#AAAAAA 1px solid;
}

.border_b {
border-bottom:#AAAAAA 1px solid;
}


/* PC改行位置
==========================================================*/
br.smp { display: none; }
br.pc { display: inline; }


/* PC表示
==========================================================*/
span.smp { display: none; }
span.pc { display: inline; }


/* 非表示箇所
==========================================================*/
#header_smp, #footer_smp, .itemlink, {
display:none;
}


/* ページ内 ボタン 位置調整
==========================================================*/
#backTop { position: fixed; bottom: 10px; right: 20px;  z-index: 10;} /* 下から出てくる戻るボタン用 */
#backTop .b-size { width:60px; height:60px;} 
#eventMainImg { margin-top: -25px; padding-top: 25px; }


/* ページ内 カテゴリリンク 位置調整 
==========================================================*/
#item01,#item02,#item03
 { margin-top: -43px; padding-top: 43px; }


/* ページ設定 
==========================================================*/
#season {
  font-family: Meiryo,"Hiragino Kaku Gothic ProN","MS PGothic",sans-serif;
  width:950px;
  margin:0px auto;
  padding:0px;
  background:#FFFFFF;
  text-align:left;
}


/* TOP画像
==========================================================*/
#season_top {
  width:950px;
  background-color:#FFFFFF;
}


/* カテゴリーリンク関連
==========================================================*/
#season_c {
  width:950px;
  height:90px;
  margin:80px 0px 90px;
  background-color:#FFFFFF;
  z-index: 5;
}

#season_c ul{
  width:950px;
  height:50px;
  padding-left:0px;
  display:flex;
  justify-content: center;
}

#season_c li{
  width:33%;
  flex: 1 1;
  position: relative;
  display: flex;
}

#season_c li::after {
  content: "";
  display: block;
  height: 30px;
  position: absolute;
  top: 0;
  bottom:0;
  margin:auto;
}

#season_c li:last-child::after {
  content: none;
}

#season_c a{
  font-size:20px;
  display: flex;
  flex: 1 1;
  justify-content: center;
  align-items: center;
}

#season_c a.smp{
  display:none;
}

#season_c i{
  margin-left:3%;
}


#season_cz_fixed{
  position: fixed;
  top:auto;
  left: auto;
  width:950px;
  height:40px;
  z-index: 100;
  visibility : hidden;
}

#season_cz{
  width:950px;
  background-color:#FFFFFF;
  background-size:contain; 
}

#season_cz ul{
  background-color:#FFFFFF;
  width:950px;
  height:40px;
  padding-left:0px;
  display:flex;
  justify-content: center;
}

#season_cz li{
  width:33%;
  flex: 1 1;
  position: relative;
  display: flex;
}

#season_cz li::after {
  content: "";
  display: block;
  height: 25px;
  position: absolute;
  top: 0;
  bottom:0;
  margin:auto;
}

#season_cz li:last-child::after {
  content: none;
}

#season_cz a{
  font-size:18px;
  display: flex;
  flex: 1 1;
  justify-content: center;
  align-items: center;
}

#season_cz a.smp{
  display:none;
}

#season_cz i{
margin:1.5% 0% 0% 3%;
}


.fixed {
  position: fixed;
  top:auto;
  left: auto;
  visibility: visible !important;
}

#season_c a, #season_cz a {
  transition:all .3s;
}

#season_c a:hover , #season_cz a:hover {

}


/* 商品関連-大枠
==========================================================*/

#season_item{
  position:relative;
  margin-bottom:50px;
}

.middlebox_mb{
  margin-bottom:100px;
}


/* 商品関連-カテゴリータイトル
==========================================================*/

.tmbox{
  width:948px;
  height:60px;
  flex: 1 1;
  position: relative;
  display: flex;
  margin-bottom:20px;
}

.tmbox span.title{
  font-size:30px;
  margin:auto 0px auto 0px;
}

.tmbox span.subtitle{
  font-size:15px;
  margin:26px 0px 0px 15px;
}

.tmbox::before {
  content: '';
  display: inline-block;
  width: 60px;
  height: 60px;
  background-size: contain;
  vertical-align: middle;
}


/* 商品関連-2カラム
==========================================================*/

div.items_2column {
  color:#222;
  margin-bottom: 2em;
  width: 430px;
  height:980px;
  list-style-type:none;
  vertical-align:top;
  position: relative;
  text-align:left;
}

div.items_2column:first-child {
  margin-right:30px;
}

div.items_2column img {
  transition: all .3s;
}

div.items_2column a:hover img, .items li a:active img {
  opacity: .7;
}

div.items_2column .copy {
  color:#222;
  width: 430px;
  margin-top:10px;
  line-height: 1.4;
  transition: all .3s;
  z-index: 15;
  font-weight: bold;
}
div.items_2column a:hover .copy, .items li a:active .copy {
  color: #bf0000;
}

/* 装飾用のボーダ－を生成 */
.items_2column .copy:after {
  content: "";
  display: block;
  border-bottom: 1px solid #222;
  width: 285px;
  padding-bottom: .6em;
  margin-bottom: 1em;
  z-index: 15;
}

/* .copyの実際のテキスト部分のみにマーカー */
.items_2column .copy span {
  font-size: 17px;
  font-weight: 500;
  background: linear-gradient(transparent 20%, #fffcec 0%);
  z-index: 15;
}
div.items_2column .img_wrap {
  width: 430px;
  height: 644px;
  overflow: hidden;
  position: relative;
  margin-bottom:5px;
}

div.items_2column .img_wrap img{
  width: 430px;
}

/*
 商品イメージ下テキストを絶対配置
=============================================*/

.items_2column .item_txt_wrap {
  width: 420px;
  font-size: .9em;
  top: 670px;
  left: 20px;
  z-index: 10;
}

/*
基本の2カラムのときの各種設定 テキスト情報位置
---------------------------------------------*/

/* 商品名 */
.items_2column .item_name {
  width: 430px;
  font-weight: 500;
  line-height: 1.3;
  font-size:18px;
  margin-top:0.7em;
}


div.items_2column a:hover .item_name, .items li a:active .item_name {
  color: #bf0000;
}


/* 商品説明文 */
.items_2column .item_description {
  width: 420px;
  font-size:14px;
  font-weight: 400;
  line-height: 1.4;
  margin-top:0.5em;
  color:#222;
}

/* 商品 詳しくはこちらボタン */
.items_2column .item_detail {
  width: 200px;
  font-size: 12px;
  padding: 5px 0;
  padding-left: 1em;
  background: #fff;
  border: 1px solid #222;
  text-align: center;
  position: absolute;
  top:930px;
  transition: all .3s;
}

div.items_2column a:hover .item_detail, div.items_2column a:active .item_detail {
  color: #fff;
  border: 1px solid #bf0000;
  background-color: #bf0000;
}

/* 商品 詳しくはこちらボタンの装飾矢印 */
.items_2column .item_detail:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: 31%;
  left: 33%;
  border: 5px solid transparent;
  border-left: 5px solid #bf0000;
  z-index: 11;
  vertical-align: middle;
  margin: auto;
  padding-left: 20px;
  transition: all .3s;
}
div.items_2column a:hover .item_detail:before, div.items_2column a:active .item_detail:before {
  border-left: 5px solid #fff;
}

.items_2column .item_txt_wrap .white {
  color: #fff;
}



/* 商品関連-4カラム
==========================================================*/



.mainbox{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  letter-spacing: normal;
  margin-bottom:40px;
  text-align:center;
}

.itembox{
  width:215px;
  height:340px;
  padding:10px 10px 0px 0px;
  margin:0px;
  position:relative;
  vertical-align:top;
  text-align:left;
}

.itembox a{
  text-decoration:underline;
  font-size:13px;
  line-height:1.4;
  z-index: 2;
  position: absolute;
  display:block;
  width:200px;
  margin-left:12px;
}

.itembox a:hover,.itembox a:active {
	color:#bf0000;
}

			
.itembox a img {
  margin-bottom:8px;
  width:200px;
  height:200px;
  transition:all .3s;
  opacity: 1.0;
}


.itembox a:hover img {
  opacity: .15;
}


.itembox p{
  margin:10px 10px 0px 12px;
  padding:10px 5px 0px 10px;
  font-size:14px;
  line-height:1.4;
  color:#FFFFFF;
  position:absolute; left:0px; top:0px;
  width:185px;
  height:190px;
  background: #331100;
  z-index: 1;
}


/* 回遊リンク
==========================================================*/

.linkbox{
  width:950px;
  margin-bottom:80px;
  text-align:center;
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
}

/* ボタン設定 */
.button_1,.button_2{
  text-align:center;
  display: inline-block;
  padding:0px 15px;
  text-decoration: none;
  outline: none;
  margin-right:0.5em;
  position: relative;
  border-radius: 3px;
  line-height: 2.5em;
  transition: none;
}

.button_1:hover, .button_2:hover {
  display: inline-block;
  transition:all .3s;
  opacity: 0.7;
  filter: alpha(opacity=70);
}