@import url("https://file003.shop-pro.jp/PA01438/419/misc/sliderpro/slider-pro.css");

main a {text-decoration:none;}

/*=================================================================
  スライダー
===================================================================*/
/* 商品テキスト */
.slider-pro .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  margin: auto;
  border: 1px solid #fff;
  padding:4%;
}
.slider-pro .container h1, .slider-pro .container p {
  font-family: 'Noto Serif JP', serif;
  font-weight: normal;
  color:#fff;
  text-align:center;
  white-space:nowrap; /* 改行禁止 */
}
.slider-pro .container h1 {
  font-size:4.0rem;
  padding-bottom:10px;
}
.slider-pro .container p {
  font-size:2.0rem;
}

/* スライダー内のテキスト（ゴシック特別版） */
.slider-pro .gothic {
  border:0
}
.slider-pro .gothic h1, .slider-pro .gothic p {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  white-space:nowrap; /* 改行禁止 */
}
.slider-pro .gothic h1 {
  font-size:5.6rem;
  letter-spacing:-0.2rem
  padding-top:50px;
}
.slider-pro .gothic p {
  font-size:3rem;
  padding-top:10px;
}
.slider-pro .gothic p.sub {
  font-size:2rem;
  line-height:1.2;
}

/* ロゴ */
.slider-pro .logo {
  position: absolute;
  top:15%;
  left:0;
  right:0;
  margin: auto;
  text-align:center;
  z-index:3;
  color:#fff;
}
.slider-pro .logo_en {
  font-family:'IM Fell DW Pica', serif;
  font-size:1.6rem;
  letter-spacing: 0.15rem;
  margin-top:5px;
}

/* 画像のオーバーレイ */
.slider-pro .img_overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
}

/*=================================================================
  トピックス
===================================================================*/
#topics {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
#topics article {
  width:22%;
  margin-bottom:20px;
  position:relative; /* SALEマークのposition指定のため */
}
#topics article.space { /* トピックスを常に左揃えにするための調整用 */
  margin-bottom:0;
}
#topics article p {
  padding:5px 0;
  font-size:1.2rem;
  line-height:1.4;
  letter-spacing:0.05rem;
}
#topics article p span { /* 種別マーク */
  padding:1px 3px 2px 3px;
  margin-right:5px;
  font-size:1rem;
  font-weight:bold;
  color:#fff;
  background:#444;
  -webkit-border-radius:5px;
       -o-border-radius:5px;
          border-radius:5px;
}
#topics article a:hover span { /* 種別マーク */
  background:#910000;
}

#topics div {overflow:hidden;}
#topics div img:first-child {transition:transform 0.3s linear;}
#topics a:hover img:first-child {transform:scale(1.05);}

#topics article img.mark {
  position:absolute;
  top:0;
  left:0;
  width:25%;
}

.kei_ccc {
  border:1px solid #ccc;
}

/*=================================================================
  デバイス別
===================================================================*/
@media screen and (max-width:767px) {
  .slider-pro .container {width:100%; border-width:1px 0 1px 0;}
  .slider-pro .container h1 {font-size:2.8rem;}
  .slider-pro .container p {font-size:1.6rem;}
  .slider-pro .gothic p {font-size:1.8rem; padding-top:10px;}
  .slider-pro .gothic p.sub {font-size:1.4rem;}  
  .slider-pro .logo img {max-width:30%; height:auto;}
  .slider-pro .logo_en {font-size:1.1rem;}
  header {padding:0 !important;}
  .icon {fill:#fff !important;}
  .menu-trigger span.hambarg {background-color: #fff !important;}
  .menu-trigger.active span.hambarg {background-color: #000 !important;}
  #topics {margin-top:30px;}
  #topics article {width:48%;}  
}