@charset "utf-8";
/* CSS Document */
/*■ベースはスマートフォン■*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');
@import url('https://fonts.googleapis.com/css?family=Prata&display=swap');/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/
html,body {margin:0; padding:0;}
body {background:#F7F7F7;}
.pc_only {display:none}
.sp_only {display:block}
@media screen and (min-width: 768px) {/*■スマホとPC画像切り替え用■*/
.sp_only {display:none}
.pc_only {display:block}}
#go_top {position:fixed; bottom:3%; right:3%; }
#go_top a {display:block;width:40px; height:40px; opacity:0.45;}
#go_top a:hover {opacity:0.7;}
.fixed {
    position: fixed;
    top: 0;
    padding: 0;
      z-index:1;}
* {font-family: 'Noto Sans JP', sans-serif;}
#floatnavi {
  display: -webkit-box;  /*この辺が*/
  display: -webkit-flex; /*Android2.3~とか*/
  display: -ms-flexbox; /*IE9~用*/
  display: flex; /*最新のブラウザのみであればflexだけでもよいかも*/
  background:#111;
  width:100%;
  font-family: 'Noto Sans JP', sans-serif;

    flex-wrap: wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;}
#floatnavi div { margin:0 5px 0 5px; width:20%; text-align:center; color:#FFF;line-height:1em;  border-right:1px solid #DEDEDE;
font-size:0.9em;}
#floatnavi div a {color:#FFF; display:block; width:100%;padding:8%;}
#floatnavi div:last-child {border:none;}

#main {
min-height:1500px;
width:100%;
color:#598CA8;
width:100%%; max-width:1000px; margin:0 auto 0 auto; padding:0 ;
font-family: 'Noto Sans JP', sans-serif; background:#F7F7F7; text-align:center;
}


#main > div { padding:0 4%; background:#FFF;}
p.category {font-family: 'Prata', serif; font-size:5em; text-align:center; margin: 50px auto 0 auto; border-bottom:double 6px #598CA8; padding:0 0 10px 0;}





.full-width {/*親要素虫で突き抜け*/
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding:0% 0.5% 0% 0.5%;
  background-color: #FFF;
}
.full-width::before {content:""; position:absolute; top:0;bottom:0; right:0; left:0; background-image:url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u11386081/pc/newlife2020/cssjs/ss1909back_stars.png); z-index:0;}


.full-width div.box {margin:2% auto 2% auto; max-width:1000px;padding:2%; width:95%; border-radius:5px; z-index:1; position:relative;
text-align:center;}
.full-width div.box .staffcomment {color:#FFF;border-bottom:#fff 1px solid;}
.full-width div.back {min-height:200px; height:78vh;background-repeat:no-repeat; background-position:50% 0%;background-size:cover; background-repeat:no-repeat; text-align:center;}
.full-width div.back_1 {background-image:url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u11386081/pc/newlife2020/cssjs/../img/back_1.jpg);}
.full-width div.back_2 {background-image:url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u11386081/pc/newlife2020/cssjs/../img/back_4.jpg);}
.full-width div.back_3 {background-image:url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u11386081/pc/newlife2020/cssjs/../img/back_3.jpg);}
.full-width div.back_4 {background-image:url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u11386081/pc/newlife2020/cssjs/../img/back_2.jpg);}
.full-width div.back_5 {background-image:url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u11386081/pc/newlife2020/cssjs/../img/back_5.jpg);}
.full-width div.back_6 {background-image:url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u11386081/pc/newlife2020/cssjs/../img/back_6.jpg);}



div.title {width:100%; height:100%;display:block; width:100%; max-width:1200px; margin:auto; color:#FFF; 
text-align:center; text-shadow:0px 0px 3px #000000; padding:10% 3% 5% 3%; height:70vh; font-size:0.75em;}
div.title hr {border:solid 1px #FFF; max-width:800px;}


.flexbox {
  display: -webkit-box;  /*この辺が*/
  display: -webkit-flex; /*Android2.3~とか*/
  display: -ms-flexbox; /*IE9~用*/
  display: flex; /*最新のブラウザのみであればflexだけでもよいかも*/
  flex-wrap: wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
  width:100%;
  position:relative;
  }
.flexbox div {
  width: 100%;
  padding:2% 1%;
  min-height: 100px;
  font-size:12px;
  text-align:left;
  border-radius:3px;
  color:#FFF;
  font-size:12px;
  }
.flexbox div.white {background:rgba(230,230,255,0.3);}
.flexbox div b {font-size:1.3em; display:block;}

#main ul li div.saleitem hr {display:none;}
#main ul li { padding:0%;}


#main ul li div.saleitem  div.saleitem_1,
#main ul li div.saleitem div.saleitem_4   {color:#333; font-weight:normal; margin:0 auto; padding:0%; text-align:center; font-size:16px;} 

.textbox {width:100%; max-width:900px; text-align:center; padding:5% 0; }

div.pickupitem {width:100%; margin:0 auto; padding:3%; position:relative; min-height:500px;}
div.pickupitem .itemimage {width:100%; background:url() 50% 50% /100% auto no-repeat;}
div.pickupitem .itemimage a {width:100%; padding:50% 0; display:block;}
div.pickupitem p {width:100%; text-align:center;font-size:13px; display:block;}
div.pickupitem p span {font-size:4.5em; font-weight:; border-bottom:1px solid #222; display:block; margin:5% auto;
font-family: 'Staatliches', cursive;}


.subtitle {margin:4% auto 0 auto; text-align:center; font-size:25px; font-weight:normal;}
.subtitle::after {content:"";display:block; width:45vw;border-bottom:4px double #222; margin:-3% auto 3% auto; padding:3% 0}

body ul[class*="item"] li:nth-child(3n),
body ul[class*="item"] li:nth-child(2n) {animation-delay:0.4s;}
body ul[class*="item"] li,
body ul[class*="item"] li:nth-child(4n) {animation-delay:0s; /*2秒遅延して実行*/}

div.bg {background:#DAE9F5;/*親要素虫で突き抜け*/
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding:0.5% 0.5% 1% 0.5%;
  margin-top:5%;}
  
div.bg_box {width:100%%; max-width:1000px; margin:10px auto; padding:3%;} 

p.go_link  {display:block; background:#F487A8;margin:10px auto; text-align:center;
border-radius:5px; max-width:600px; min-width:80%;}
p.go_link a {width:100%; display:block;  padding:3% 2%; font-size:1.1rem; color:#FFF;}

/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
■PC用■
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@media screen and (min-width: 768px) {/*1024でも可*/
  // ここに既存のCSSを上書きするCSSを書く
  #go_top a {display:block;width:55px; height:55px; opacity:0.45;}
  
  
#floatnavi{-webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;}
#floatnavi div { font-size:1em; width:10%; padding:1% 0;}
#floatnavi div a {padding:3%;}

ul { font-size:0; padding:0; margin:0; width:100%;}
li { font-size:10px; list-style:none; box-sizing:border-box; padding:0; margin:5px 5px 5px 0;}
div.saleitem { list-style:none; padding:0; margin:0; font-size:16px; margin:0 0 15px 0; width:100%;}
p.minicorner {padding:5px 0; margin:0; display:block; font-size:60px; font-weight:normal; background:#336; color:#FFF;}

div.title {width:100%; height:100%;display:block; width:100%; max-width:1200px; margin:auto; color:#FFF; 
text-align:center; text-shadow:0px 0px 3px #000000; padding:3% 3% 3% 3%; font-size:1em; min-height:700px;}


.flexbox {flex-direction: row;}
.flexbox div{ width: 50%; font-size:12px;  margin:0 1% 1% 0;}
.flexbox div:nth-child(2n) {margin-right:0;}

.full-width div.back {background-attachment:fixed; }

.goldenbox div {
  width: 50%;
  padding:2% 1%;
  min-height: 100px;
  font-size:14px;
  text-align:left;
  border-radius:3px;
  color:#223;
    position:relative;

  }
  
div.pickupitem {  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  }
  
div.pickupitem .itemimage {width:50%;}
div.pickupitem .itemimage a {width:100%;  padding:50% 0;}
div.pickupitem p {width:50%; padding:10% 3%;}
body ul[class*="item"] li {animation-delay:0s; /*2秒遅延して実行*/}
body ul[class*="item"] li:nth-child(4n),
body ul[class*="item"] li:nth-child(3n) {animation-delay:0s; /*2秒遅延して実行*/}
body ul[class*="item"] li:nth-child(2n) {animation-delay:0.4s;}



/*■消さない■*/
}
/*■消さない■*/