@charset "Shift_JIS";

/* ---------------------------------------
 TOP 汎用class
---------------------------------------- */
/* 見出し */
.common_headline2_Wrap { display: flex; align-items: flex-start; justify-content: space-between;}
.common_headline2_Wrap .common_headline2_ { padding: 0;}
.common_headline2_Wrap .more_link { margin: 0 0 0 40px; font-size: 14px; color: #333;}
.common_headline2_Wrap .more_link a { font-size: 14px; text-decoration: underline; color: #1D3994; position: relative;}
.common_headline2_Wrap .more_link a:hover { text-decoration: none;}

/* 一覧 */
.feature_list_ ul { display: flex; flex-wrap: wrap;}
.feature_list_ li { width: calc((100% - 40px) / 3); margin: 0 20px 20px 0;}
.feature_list_ li:nth-child(3n) { margin-right: 0;}
.feature_list_ li img { width: 100%; border: #DDD 1px solid; display: block;}
.feature_list_ li span { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: #333; display: inline-block;}

/* 社員向け */
.bnr_employee_ { width: 100%; margin: 0 auto 30px;}
.bnr_employee_ img { width: 100% !important;}

.async-hide {　opacity: 0 !important}

/* ---------------------------------------
 TOP レイアウト
---------------------------------------- */
div.container_ {
  width: auto;
  max-width: 1400px;
  min-width: 1000px;
  padding: 40px 0 0;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}
div.container_ div.leftmenuframe_ { width: 18%; padding: 25px 10px 0 20px; text-align: left;}
div.container_ div.mainframe_ { width: 78%; min-width: auto; padding-left: 28px; margin-left: auto; border-left: #DDD 1px solid;}
div.recommendbox_ { padding-right: 0; padding-left: 0;}

/* ---------------------------------------
 TOP メインフレーム 共通
---------------------------------------- */
#block_of_top_body {
  padding: 0 0 50px 0;
  margin: 40px 0 50px 0;
  border-bottom: #DDD 5px solid;
}
#block_of_top_recommend1,
#block_of_top_recommend2,
#block_of_top_recommend3,
#block_of_top_recommend4,
#block_of_top_recommend5,
#block_of_top_free1, 
#block_of_top_free2,
#block_of_top_free4 {
  padding: 10px 0;
  margin: 0 0 20px 0;
  background: #FFF;
}
#block_of_top_free3 {
	clear: both;
}
#block_of_top_free1 > div,
#block_of_top_free2 > div,
#block_of_top_free3 > div,
#block_of_top_free4 > div,
#block_of_top_free5 > div,
#block_of_top_free6 > div,
#block_of_top_free7 > div,
#block_of_top_free8 > div,
#block_of_top_free9 > div {
  padding: 0;
  margin: 0;
  background: #FFF;
}
#block_of_top_free1 > div:empty,
#block_of_top_free2 > div:empty,
#block_of_top_free3 > div:empty,
#block_of_top_free4 > div:empty,
#block_of_top_free5 > div:empty,
#block_of_top_free6 > div:empty,
#block_of_top_free7 > div:empty,
#block_of_top_free8 > div:empty,
#block_of_top_free9 > div:empty {
  display: none;
}
#block_of_top_free10 {
	width: 75%;
	background: inherit;
	display: inline-block;
}

div.line_ { overflow: hidden;}
div.line_ div.line2_ { width: 49%; padding: 20px; margin-right: 20px; margin-bottom: 30px; background: #FFF;}
div.line_ div.line2_:last-child { margin-right: 0;}
div.line_ div.line3_ { width: 32%; padding: 20px; margin: 10px 20px 30px 0; background: #FFF;}
div.line_ div.line3_ a { height: 100%; text-decoration: none; display: flex; flex-direction: column;}
div.line3_line4_ { margin-bottom: 20px; border-top: #DDD 1px solid; border-bottom: #DDD 1px solid; position: relative;}
div.line3_line4_ h3 { padding: 15px 0; margin: 0; font-size: 13px; font-weight: 600; text-align: center; color: #333;}
div.line3_line4_ h3:after {
	content: '';
	width: 18px;
	height: 18px;
	position: absolute;
	top: 50%;
	right: 10px;
	background: url(../../img/usr/banner/arrow_bk.png) no-repeat;
	background-size: cover;
	transform: translateY(-50%);
}
a div.line3_line4_ h3:hover{ opacity: 0.7;}
div.line3_ .line3_imglink { margin-top: auto;}
div.line3_ p.line3_lead { padding: 5px 0; margin: 0; font-size: 13px; text-align: left; color: #333;}
div.line3_ p.line3_storelink {
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	text-decoration: underline;
	color: #333;
}
div.line3_ p.line3_storelink:hover { text-decoration: none;}
div.line_ div.line3_:last-child { margin-right: 0;}
div.line_ div.line4_ { width: 24%; padding: 20px; margin-right: 20px; margin-bottom: 30px; background: #FFF;}
div.line_ div.line4_:last-child { margin-right: 0;}
div.line_ div.line5_ { width: 19%; padding: 20px; margin-right: 20px; margin-bottom: 30px; background: #FFF;}
div.line_ div.line5_:last-child { margin-right: 0;}

/* ---------------------------------------
 TOP メインビジュアル
---------------------------------------- */
.block-topMv { width: 100%; height: auto; padding: 25px 0 35px; overflow-x: hidden; z-index: 0;}
.block-topMv .container { width: 100%; max-width: 100%; margin: 0 auto; position: relative;}
.block-topMv .top-carousel .slick-list { overflow: visible;}
.block-topMv .top-carousel { opacity: 0; transition: .3s ease;}
.block-topMv .top-carousel.slick-slider { margin: 0; opacity: 1;}
.block-topMv .top-carousel li.slick-slide { margin: 0 12.5px 0; box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.16);}
.block-topMv .top-carousel > li { height: calc(100% / 3.45 * (592 / 900)); transition: .3s ease; opacity: 0;}
.block-topMv .top-carousel li.slick-slide { opacity: 1;}
.block-topMv .top-carousel li.slick-slide:hover { opacity: 0.7;}
.block-topMv .top-carousel li.slick-slide a { width: 100%; display: block;}
.block-topMv .top-carousel li.slick-slide img { width: 100%; height: auto;}
.block-topMv .img-eiyoushi { width: 266px; position: absolute; left: 30px; bottom: 0px;}
.block-topMv .top-carousel .slick-arrow { width: 50px; height: 50px; top: 44%; z-index: 1;}
.block-topMv .top-carousel .slick-prev { background: url(../../img/usr/common/sslider_prev02.png) no-repeat center; left: 35px;}
.block-topMv .top-carousel .slick-next { background: url(../../img/usr/common/sslider_next02.png) no-repeat center; top: calc(50% - 25px); right: 35px;}
.block-topMv .top-carousel .slick-arrow:before { display: none;}
.block-topMv .top-carousel .slick-dots { margin: 19px 0 0; display: flex; align-items: center; justify-content: center; position: static;}
.block-topMv .top-carousel .slick-dots li { display: block;}
.block-topMv .top-carousel .slick-dots li button { padding: 4px;}
.block-topMv .top-carousel .slick-dots li button:before { width: 8px; height: 8px; top: 6px; left: 6px;}
.block-topMv .top-carousel .slick-dots li.slick-active button:before { background: #c00;}

/* ---------------------------------------
 TOP ●●●円以上で送料無料等のインフォメーション
---------------------------------------- */
#block_of_top_free1 #top_info_ { padding: 0; margin: 0 0 15px; background: #666; position: relative;}
#block_of_top_free1 #top_info_:after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: #fff 1px solid;
  border-bottom: #fff 1px solid;
  position: absolute;
  top: 13px;
  right: 23px;
  transform: rotate(-45deg);
}
#block_of_top_free1 #top_info_ a {
  padding: 9px 20px 9px 45px;
  font-size: 14px;
  color: #FFF;
  background: url(../../img/usr/common/icon_info.png) no-repeat left 20px center;
  display: block;
}

/* ---------------------------------------
 TOP 話題のキーワード
---------------------------------------- */
#block_of_top_free1 #attention_keyword {
  padding: 10px 20px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F2F2F2;
}
#block_of_top_free1 #attention_keyword p { width: 130px; font-size: 14px; font-weight: bold;}
#block_of_top_free1 #attention_keyword ul { width: 920px; display: flex; flex-wrap: wrap;}
#block_of_top_free1 #attention_keyword li { margin: 0 3px 6px;}
#block_of_top_free1 #attention_keyword li a { padding: 8px 25px; border-radius: 20px; font-size: 14px; text-decoration: none; color: #333; display: block; background: #FFF;}
#block_of_top_free1 #attention_keyword li a:hover { text-decoration: none; color: #FFF; background: #333;}

/* ---------------------------------------
 TOP おすすめショップ　ロゴスライダー
---------------------------------------- */
#recommend_shop { margin: 0 0 60px;}
#recommend_shop ul { display: flex;}
#recommend_shop li {
  width: 206px;
  padding: 10px;
  margin: 0 10px 0 0;
  border: #DDD 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
}
#recommend_shop li a:focus { outline: none;}
#recommend_shop li img { max-width: 100%;}
#recommend_shop .slick-arrow { width: 50px; height: 50px; top: 44%; z-index: 1;}
#recommend_shop .slick-prev { background: url(../../img/usr/common/sslider_prev02.png) no-repeat center; top: calc(50% - 25px); left: -25px; transform: none;}
#recommend_shop .slick-next { background: url(../../img/usr/common/sslider_next02.png) no-repeat center; top: calc(50% - 25px); right: -15px; transform: none;}
#recommend_shop .slick-arrow:before { display: none;}
.cv-tech-drop.cv-tech-modal-show { top: -100px !important;}

/* ---------------------------------------
 TOP 人気ランキング タブ切替
---------------------------------------- */
#ranking_area { margin: 0 0 60px;}
#ranking_area .ranking_tab_ { margin: 0 0 20px; border-bottom: #666 2px solid; display: flex; align-items: flex-end;}
#ranking_area .ranking_tab_ li {
  padding: 13px 20px 9px;
  margin: 0 4px 0 0;
  border-radius: 5px 5px 0 0;
  font-size: 14px;
  color: #666;
  background: #F2F2F2;
  transition: .2s ease;
  cursor: pointer;
}
#ranking_area .ranking_tab_ li.current,
#ranking_area .ranking_tab_ li:hover { padding: 15px 20px 11px; color: #FFF; background: #666;}
#ranking_area .ranking_contents_ div[id^="ppz_recommend"]:not(:first-child) { display: none;}
#ranking_area .ranking_contents_ h3 { font-size: 16px;}

/* ---------------------------------------
 TOP 郵便局のネットショップ　ストア一覧
---------------------------------------- */
#block_of_rightmenu_top { margin: 60px 0;}
#block_of_rightmenu_top div.line_ { flex-wrap: wrap; justify-content: flex-start;}
#block_of_rightmenu_top div.line_ div.line3_ { width: calc((100% - 40px) / 3); padding: 0; margin-right: 20px;}
#block_of_rightmenu_top div.line_ div.line3_:nth-of-type(3n){ margin-right: 0;}
#block_of_rightmenu_top div.line_ div.line3_ img { width: 100%; max-width: 100%; margin: 20px auto;}
#block_of_rightmenu_top div.line_ div.line3_ img:hover { opacity: 1;}