@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/earlyaccess/hannari.css');
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
.font-roboto {
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
}
.font-noto {
  font-family: 'Noto Sans JP';
}
.font-noto-sf {
  font-family: 'Noto Serif JP';
}
.font-hannari {
  font-family: 'Hannari';
}
html, body {
  height: 100%;
}
*, *::after, *::before {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}
body {
  color: #FFFFFF;
  background:rgba(0,0,0); 
  font-family: "Roboto","Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Lucida Grande", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Verdana, "ＭＳ Ｐゴシック", sans-serif;
  overflow-x: hidden;
  font-size: 1.4em;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
}

main {
  display: block;
}
li {
  list-style-type: none;
}
a {
  text-decoration: none;
  display: inline-block;
  color: #FFFFFF;
  cursor: pointer;
}
.br-pc {
  display: block;
}
.br-sp {
  display: none;
}
sup, sub {
  font-size: 50%;
  letter-spacing: 0;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align:bottom;
}
.wrap {
  background-color: rgba(0,0,0, 1);
  background-blend-mode: lighten;
  z-index: 20;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.wrap img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  animation: wrapload 2.6s;
  animation-fill-mode: backwards;
  -webkit-animation: wrapload 2.6s;
  -webkit-animation-fill-mode: backwards;
  max-width: 350px;
  width: 50%;
  height: auto;
}

.wrap.active {
  -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
  background-color: rgba(0, 0, 0, 0);
}



.wrap.active img {
  display: none;
}


@media only screen and (max-width:480px) {
  .wrap img {
    width: 60%;
    margin: auto;
  }
}

.main{

}

@media only screen and (max-width:640px) {
  .main{

  }
}

.wrapmain {
  width:100%;
  max-width:900px;
  margin:0 auto;
  background:#FFFFFF;
  color:#000000;
  overflow:hidden;
}



/*-------------------
animation
-------------------*/
@-webkit-keyframes wrapload {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: .2;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
}
@keyframes wrapload {
   0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: .2;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
}

@keyframes poyon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

@-webkit-keyframes fadeSmall {
  from {
    opacity: 0;
    transform: scale(1.2, 1.2);
  }
  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes fadeSmall {
  from {
    opacity: 0;
    transform: scale(1.2, 1.2);
  }
  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}

@-webkit-keyframes fadeBig {
  from {
    opacity: 0;
    transform: scale(0.8, 0.8);
  }
  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes fadeBig {
  from {
    opacity: 0;
    transform: scale(0.8, 0.8);
  }
  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@-webkit-keyframes fadeOutTop {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }
}
@keyframes fadeOutTop {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }
}
@-webkit-keyframes fadeInTop {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTop {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInBottom {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottom {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/*-------------------
common
-------------------*/


.pr-by-bt {
  width:50%;
  padding:0;
  margin:0 auto;
  z-index:6;
  position:relative;
  display:inline-block;
}

.pr-by-bt img,.pr-ts-bt img{
  vertical-align:middle;
}


.pr-by-bt .pr-eshop {
  margin:0 auto;
  padding: 3vw 0;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  opacity: 1;
  cursor:pointer;
  display:inline-block;
  background:#9c1b14;
  width:100%;
}

.pr-by-bt .js-dropdown > img{
  width:65%;
  margin:0 auto;
}

.pr-ts-bt {
  z-index:5;
}



.pr-ts-bt .pr-eshop {
  color:#000000;
  margin:0 auto;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  opacity: 1;
  cursor:pointer;
  display:inline-block;
  font-weight:800;
  font-size:3.5vw;
  border-bottom:1px solid #000000;
  padding:0 0 2px 0;
  line-height:1;
}

.pr-ts-bt .pr-eshop:hover{
  color:#9c1b14;
  border-bottom:1px solid #9c1b14;
}


.pr-eshop .js-dropdown {
  position: relative;
  width: 100%;
  margin: 0 auto;
  cursor: pointer;
  pointer-events: auto;
  display:block;
}


.pr-by-bt .pr-eshop .js-dropdown .pr_eshop_hv {
  line-height: 1;
  position: absolute;
  z-index: 100;
  top: 8.5vw;
  left: 0;
  right:0;
  display: none;
  width: 100%;
  padding:0;
  margin:0 auto;
}

.pr-ts-bt .pr-eshop .js-dropdown .pr_eshop_hv {
  line-height: 1;
  position: absolute;
  z-index: 100;
  top: 4vw;
  left: 0;
  right:0;
  display: none;
  width: 90%;
  padding:0;
  margin:0 auto;
}

.pr-eshop .js-dropdown .pr_eshop_hv ul{
  width:100%;
}
.pr-eshop .js-dropdown .pr_eshop_hv li {
  position: relative;
    margin:0 auto;
    
}

.pr-eshop .js-dropdown .pr_eshop_hv li a {
  display: block;
  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
  opacity: 1;
  cursor:pointer;
  background:#FFFFFF;
  border-bottom:1px solid #000;
  padding:.8em 3em;
}

.pr-eshop .js-dropdown .pr_eshop_hv li a:hover {
  opacity: .7;
}
.pr-eshop .js-dropdown .pr_eshop_hv li:hover::after {
  right: 5px;
}

.pr-ts-bt .pr-eshop .js-dropdown .pr_eshop_hv ul{
  width:90%;
  margin:0 auto;
}


@media only screen and (min-width:900px) {
  .pr-by-bt .pr-eshop {
    padding: 1.2em 0;
  }
  .pr-by-bt .pr-eshop .js-dropdown .pr_eshop_hv {
    line-height: 1;
    position: absolute;
    z-index: 100;
    top: 3.4em;
    left: 0;
    right:0;
    display: none;
    width: 100%;
    padding:0;
    margin:0 auto;
  }

  .pr-ts-bt .pr-eshop {
    font-size:1.4em;
  }

  .pr-ts-bt .pr-eshop .js-dropdown .pr_eshop_hv {
    line-height: 1;
    position: absolute;
    z-index: 100;
    top: 1.2em;
    left: 0;
    right:0;
    display: none;
    width: 100%;
    padding:0;
    margin:0 auto;


  }


}


@media only screen and (max-width:640px) {

  .pr-by-bt {
    width:70%;
  }

  .pr-by-bt .pr-eshop {
    padding:0;
    line-height:3.5;
  }

  .pr-ts-bt .pr-eshop {
    font-size:4.5vw;
  }

  .pr-by-bt .pr-eshop .js-dropdown .pr_eshop_hv {
    top: 13vw;
  }

  .pr-ts-bt .pr-eshop .js-dropdown .pr_eshop_hv {
    top: 5vw;
  }

  .pr-eshop .js-dropdown .pr_eshop_hv li a {
    display: block;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    opacity: 1;
    cursor:pointer;
    background:#FFFFFF;
    padding:.8em 3vw;
  }
  .pr-ts-bt .pr-eshop .js-dropdown .pr_eshop_hv li a{
    padding:.8em 8vw;
  }
}
/* 24/02/02 link 変更
-------------------------------------------------- */
.pr-ts-bt .pr-eshop a { color: #000;}

@media only screen and (max-width:480px) {

  .pr-by-bt {
    width:90%;
  }

  .pr-by-bt .js-dropdown > img{
    width:70%;
    margin:0 auto;
  }

  .pr-by-bt .pr-eshop {
    padding:10px 0 12px 0;
    line-height:1;
  }

  .pr-by-bt .pr-eshop .js-dropdown .pr_eshop_hv {
    top: 14vw;
  }

  .pr-ts-bt .pr-eshop .js-dropdown .pr_eshop_hv {
    top: 6vw;
  }

  .pr-ts-bt .pr-eshop .js-dropdown .pr_eshop_hv ul{
    width:80%;
    margin:0 auto;
  }

  .pr-by-bt .pr-eshop .js-dropdown .pr_eshop_hv li a {
    padding:.3em 5vw;
  }

  .pr-ts-bt .pr-eshop .js-dropdown .pr_eshop_hv li a {
    padding:.8em 5vw;
  }
}



/*-------------------
header
-------------------*/

header {
  width: 100%;
  position: relative;
  text-align:center;
  margin: 0 auto;
  z-index:1;
  background:url(../images/head_mainimg2_pc.jpg) no-repeat center top;
  background-size:100% auto;
  background-color:#000000;
  padding-bottom:5vw;

}

header .head-lg{
  width:28%;
  position:absolute;
  top:3vw;
  left:3vw;
  animation: fadeSmall 1s;
  animation-delay: 1.8s;
  animation-fill-mode: backwards;
  -webkit-animation: fadeSmall 1s;
  -webkit-animation-delay: 1.8s;
  -webkit-animation-fill-mode: backwards;
}

header .badge{
  position:absolute;
  top:15vw;
  right:5vw;
  width:25%;
  animation: fadeBig .5s;
  animation-delay: 2.2s;
  animation-fill-mode: backwards;
  -webkit-animation: fadeBig .5s;
  -webkit-animation-delay: 2.2s;
  -webkit-animation-fill-mode: backwards;
}

header .head-cp{
  width:85%;
  margin:0 auto;
  padding:calc(100% / 1.1) 0 0 0;
  animation: fadeInLeft 1s;
  animation-delay: 1.5s;
  animation-fill-mode: backwards;
  -webkit-animation: fadeInLeft 1s;
  -webkit-animation-delay: 1.5s;
  -webkit-animation-fill-mode: backwards;
}

header h1{
  width:85%;
  margin:0 auto;
  animation: fadeInTop 1s;
  animation-delay: 1.8s;
  animation-fill-mode: backwards;
  -webkit-animation: fadeInTop 1s;
  -webkit-animation-delay: 1.8s;
  -webkit-animation-fill-mode: backwards;
  padding:6vw 0 3vw 0;
  z-index:3;
  position:relative;
}

header .sub{
  position:relative;
  margin:0 auto;
}

header .sub .subtl{
  width:85%;
  padding:2vw 0;
  margin:0 auto;
  animation: fadeInBottom 1s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
  -webkit-animation: fadeInBottom 1s;
  -webkit-animation-delay: 2s;
  -webkit-animation-fill-mode: backwards;
}


header .sub .kk{
  display:flex;
  justify-content: center;
  width:95%;
  margin:0 auto;
}

header .sub .kk li{
  width:clac(100vw / 3.5);
  padding:0 .5vw;
}

header .sub .ld{
  width:85%;
  margin:0 auto;
  padding:2vw 0;
}



@media only screen and (min-width:900px) {
  header .head-lg{
    top:1.5em;
    left:1em;
  }

  header .badge{
    top:7em;
    right:3em;
    width:25%;
  }

  header h1{
    padding:3em 0 1em 0;
  }

  header .sub .subtl{
    padding:1em 0;
  }

  header .sub .ld{
    padding:1em 0;
  }

}


@media only screen and (max-width:640px) {

  header {
    background:url(../images/head_mainimg2_sp.jpg) no-repeat center top;
    background-size:100% auto;
    background-color:#000000;
    padding-bottom:5vw;
  }


}
@media only screen and (max-width:480px) {

  header .sub .subtl{
    width:85%;
    padding:0;
    margin:0 auto;
  }

  header .sub img{
    vertical-align:middle;
  }
  header .sub ul{
    padding:0;
  }
}


/*-------------------
sec-buy
-------------------*/
.sec-buy {
  margin:0 auto;
  text-align: center;
  padding:0 0 5vw 0;
  position: relative;
  background:url(../images/buy_title3_pc.png) no-repeat center 5vw;
  background-size:100% auto;
  background-color:#FFFFFF;

}

.sec-buy.nnbg{
  background-image:none;
  padding:5vw 0 0 0;
}

.sec-buy .pack{
  width:40%;
  margin:0 auto;
  padding:10vw 0 5vw 0;
  position:relative;
  z-index:2;
}

.sec-buy .badge{
  position:absolute;
  top:78vw;
  right:5vw;
  width:25%;
}


.sec-buy .bgmint01{
  position:absolute;
  top:47vw;
  left:-1.5vw;
  width:35%;
  z-index:1;
}

.sec-buy .bgmint02{
  position:absolute;
  top:60vw;
  right:0;
  width:28%;
}

.sec-buy .prtl{
  text-align:left;
  padding-bottom:2vw;
  width:80%;
  margin:0 auto 0 5%;
}

.sec-buy .pr{
  display:flex;
  align-items: center;
  padding-bottom:5vw;
  width:90%;
  margin:0 auto;
}

.sec-buy .pr .price{
  padding-right:2vw;
}

.sec-buy .pr .pr-eshop{

}




@media only screen and (min-width:900px) {


  .sec-buy {
    margin:0 auto;
  }

  .sec-buy.nnbg{
    background-image:none;
    padding:3em 0 0 0;
  }

  .sec-buy .pack{
    padding:4em 0 2em 0;
  }

  .sec-buy .badge{
    top:30em;
    right:0;
    width:25%;
  }

  .sec-buy .bgmint01{
    top:16em;
    left:-1em;
    width:37%;
  }

  .sec-buy .bgmint02{
    top:22em;
    right:0;
    width:28%;
  }

  .sec-buy .pr{
    padding-bottom:3em;
  }

  .sec-buy .prtl{
    padding-bottom:1em;
  }

  .sec-buy .pr .price{
    padding-right:1em;
  }
}

@media only screen and (max-width:640px) {
  .sec-buy {
    background:url(../images/buy_title3_sp.png) no-repeat center 5vw;
    background-size:100% auto;

  }
}

@media only screen and (max-width:480px) {

  .sec-buy .pr .price{
    width:90%;
    padding-right:2vw;
  }

  .sec-buy .pr{
    padding-bottom:0;
  }
}

/*-------------------
section01
-------------------*/
#section01 {
  text-align: center;
  padding:0;
  position: relative;
}

#section01 .point{
  position: relative;
}

#section01 .point li{
  position:relative;
  padding:10vw 0 0 0;
}

#section01 .point .poin01{
  
}

#section01 .point .pointtl{
  position:absolute;
  top:2vw;
  left:3vw;
  width:65%;
}

#section01 .point .pointld{
  position:absolute;
  top:calc(100vw / 3.6);
  left:5vw;
}

#section01 .point .point01 .pointld{
  width:50%;
}

#section01 .point .point02 .pointld{
  width:60%;
  top:calc(100vw / 4);
}

#section01 .point .point03 .pointld{
  width:90%;
}


#section01 .point li .pointtxt{
  width:90%;
  margin:0 auto;
  padding:1em 0;
}

#section01 .point li .pointtxt p{
  text-align:left;
  padding:.5em 0;
  line-height:1.4;
  font-weight:600;

}

#section01 .point li .pointtxt p .pc{
  display:block;

}


#section01 .point li .pointtxt p.nm{
  font-size:2.5vw;
}

#section01 .point li .pointtxt p.lg{
  font-size:3.5vw;
}

#section01 .point li .pointtxt p.atten{
  font-size:2.3vw;
}


#section01 .point .fragrance{
  width:90%;
  margin:0 auto;
  font-size:3.5vw;
  font-weight:600;
  padding-bottom:1em;
}

#section01 .point .fragrance dt{
  border-bottom:1px solid #000000;
  padding:0.1em 0;
}

#section01 .point .fragrance dd{
  border-bottom:1px solid #000000;
  padding:0.1em 0;
}

#section01 .point .pointil{
  width:90%;
  margin:0 auto;
  padding-bottom:.5em;
}



#section01 .time-b ul li:nth-child(1),#section01 .time-b ul li:nth-child(3){
  width:90%;
  margin:0 0 0 auto;
}

#section01 .time-b ul li:nth-child(2){
  width:90%;
  margin:0 auto 0 0;
}






@media only screen and (min-width:900px) {

  #section01 .point li{
    padding:6.5em 0 0 0;
  }

  #section01 .point .pointtl{
    position:absolute;
    top:3.2em;
    left:2em;
  }

  #section01 .point .pointld{
    top:15em;
    left:2em;
  }

  #section01 .point .point02 .pointld{
    top:13em;
  }


  #section01 .point li .pointtxt p.nm{
    font-size:1em;
  }

  #section01 .point li .pointtxt p.lg{
    font-size:1.4em;
  }

  #section01 .point li .pointtxt p.atten{
    font-size:0.9em;
  }

  #section01 .point .fragrance{
    font-size:1.4em;
  }

}


@media only screen and (max-width:640px) {


}


@media only screen and (max-width:480px) {

  #section01 .point li .pointtxt p.nm{
    font-size:2.5vw;
  }

  #section01 .point li .pointtxt p.lg{
    font-size:3.7vw;
  }

  #section01 .point .fragrance{
    font-size:3.7vw;
  }

  #section01 .point li .pointtxt p.atten{
    font-size:2.3vw;
  }

  #section01 .point li .pointtxt p .pc{
    display:none;

  }

}



/*-------------------
lineup
-------------------*/
#lineup {
  text-align: center;
  position: relative;
  padding:5vw 0;
}



#lineup h2{
  width:100%;
  margin:0 auto;
  padding-bottom:5vw;
  position:relative;
  z-index:3;
}

#lineup ul{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  width:80%;
  margin:0 auto;
}

#lineup ul li{
  padding:0 1vw 3vw 1vw;
  width:calc(100% / 2);
}

#lineup ul li a{
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  opacity: 1;
}

#lineup ul li a:hover{
  opacity: .7;
}

#lineup .lineup-bt{
  margin:5vw auto 0 auto;
  padding: .8em 0;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  opacity: 1;
  cursor:pointer;
  display:block;
  background:#9c1b14;
  width:75%;
  line-height:1;
}

#lineup .lineup-bt img{
  width:70%;
  margin:0 auto;
}


#lineup .lineup-bt:hover{
  opacity:.7;
}

@media only screen and (min-width:900px) {
  #lineup {
    padding:3em 0;
  }

  #lineup h2{
    padding-bottom:3em;
  }

  #lineup ul li{
    padding-bottom:2em;
   
  }

  #lineup .lineup-bt{
    margin:2em auto 0 auto;
  }
}

@media only screen and (max-width:640px) {

  #lineup .lineup-bt{
    margin:5vw auto 0 auto;
    padding: .5em 0;
  }
}

/*-----------------
footer
-----------------*/
footer {
  text-align: center;
  position: relative;
  padding:5vw 0;
  background:#000000;
  max-width:900px;
  margin:0 auto;
}

footer .ftwp{
  display:flex;
  justify-content: space-around;
  max-width:900px;
  margin:0 auto;
}

footer .ftlink{
  font-size:1rem;
  font-weight:600;
  color:#FFFFFF;
  display:flex;
  justify-content: center;
  position:relative;
}

footer .ftlink a{
  color:#FFFFFF;
  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
  border-bottom:1px solid #FFFFFF;
  line-height:1;
}

footer .ftlink a:hover{
  color:#9c1b14;
  border-bottom:1px solid #9c1b14;
}

footer .ftlink li:first-child:after{
  content:'｜';
  display:inline-block;
}

footer small {
  font-size: 1rem;
  font-weight:600;
  letter-spacing: 0;
  color:#FFFFFF;
}
@media only screen and (min-width:900px) {

  footer {
    padding:2em 0;
  }

}
@media only screen and (max-width:640px) {
  footer {
    padding:5vw 0;

  }
  footer small {
    font-size: 2.5vw;
  }

  footer .btlogo{
    padding-top:calc(100vw / 2.3);
  }

  footer .ftlink{
    font-size:2.5vw;
  }
}
@media only screen and (max-width:480px) {

}

.floating{
  position:fixed;
  display:none;
  z-index:4;
  bottom:0;
  left:0;
  right:0;
  margin:0 auto;
  text-align:center;
  width:70%;

}

.floating a{
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity:.8;
}

.floating a:hover{
  opacity:1;
}


/* back to top */
#go-shop {
  position: fixed;
  bottom: 3vw;
  right: 0;
  left:0;
  z-index: 6;
  width: 100%;
  text-align: center;
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#go-top .totop {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  left:0;
  padding: 0;
  margin:0 auto;
  display:inline-block;
}
#go-top .totop img {
  max-width: 100%;
  height: auto;
}
#go-top .totop a {
  display: block;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#go-top .totop a:hover {
  opacity: 0.5;
}

@media only screen and (min-width:1000px) {
  #go-shop {
    bottom: 1em;
  }
}
@media only screen and (max-width:640px) {
  #go-top {
    bottom: 5%;
    right: 5%;
  }
  #go-top .totop {
    width: 30px;
  }
}
@media only screen and (max-width:480px) {

}
/*------------
animetion
------------*/
.fadein {
  opacity: 0;
}
.fadein.scrollin {
  animation: fadeInBottom 1s;
  animation-fill-mode: backwards;
  opacity: 1;
}
.fadeinp {
  opacity: 0;
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  transition: all 1000ms;
}
.fadeinp.scrollin {
  opacity: 1;
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
}
.fadeinbottom {
  transition: all .8s ease-in-out;
  transform: translate(0, 30px);
  -webkit-transform: translate(0, 30px);
  -moz-transform: translate(0, 30px);
  opacity: 0;
}
.fadeinbottom.scrollin {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  opacity: 1;
}
.fadeinup {
  transition: all .8s ease-in-out;
  transform: translate(0, -30px);
  -webkit-transform: translate(0, -30px);
  -moz-transform: translate(0, -30px);
  opacity: 0;
}
.fadeinup.scrollin {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  opacity: 1;
}
.fadeinleft {
  transition: all .8s ease-in-out;
  transform: translate(-30px, 0);
  opacity: 0;
}
.fadeinleft.scrollin {
  opacity: 1.0;
  transform: translate(0, 0);
}
.fadeinright {
  transition: all .8s ease-in-out;
  transform: translate(30px, 0);
}
.fadeinright.scrollin {
  opacity: 1.0;
  transform: translate(0, 0);
}