@charset "UTF-8";

@keyframes fadein {
	 0% { opacity: 0; }
	100% { opacity: 1; }
}

#mainimg {
  position: fixed;
  top: 0;
  height: 100vh;
  min-height: 56.25vw;
  min-height: 70rem;
  z-index: -1;
  background: #000;
  margin: 0;
}
/*#mainimg .content{
  filter: brightness( 20% );
}*/
#mainimg .sp img {
  position: absolute;
  top: 0;
  left: 5%;
  z-index: 1;
  width: 20%;
}
@media only screen and (max-width: 782px) {
  #mainimg {
    margin: 0;
    width: 100%;
  }
}
#mainimg .sl {
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 10;
}
#mainimg article.sl-1 { background-image: url("../img/home/mainimg-sp1.jpg"); overflow: hidden; /*filter: brightness( 80% );*/ }
#mainimg article.sl-2 { background-image: url("../img/home/mainimg-sp2.jpg"); /*filter: brightness( 80% );*/}
#mainimg article.sl-3 { background-image: url("../img/home/mainimg-sp3.jpg"); /*filter: brightness( 80% );*/}

.home #mainimg .content {
  /*width: 80%;*/
  max-width: unset;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
  height: 100vh;
}

#mainimg .video-container {
  width: 100vw;
  height: 100vh;
  position: relative;
/*  -webkit-transition: opacity 0.9s 1.2s;
  transition: opacity 0.9s 1.2s;
  opacity: 0;*/
}

@media screen and (min-width: 1600px) {
  /*#top #mv .video-container iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 150% !important;
     height: 150% !important;
     margin-top: 0 !important;
     margin-left: 0 !important;
  }*/
}
#mainimg .video-container .blk-bar {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.mvload #mainimg .video-container {
  opacity: 1;
}

@media screen and (max-width: 743px) {
  #mainimg .video-container {
    display: none;
  }
  .mv_top {
    display: block;
  }
}
#mainimg #wrapper_videoPlay {
  max-width: 100%;
}

#top-mv-video-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 743px) {
  #top-mv-video-wrap {
    display: none;
  }
}
#top-mv-video-wrap {
  background-color: #000;
  /*天地中央配置*/
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  /*縦横幅指定*/
  width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
  overflow: hidden;
/*  background-image: url(../img/top/top-yt-thumb.jpg);*/
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
#top-mv-video-video {
  position: absolute;
  z-index: 3;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#top-mv-video-video video {
  max-width: 101%;
  width: 101%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#top-mv-video-mask {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 100%;
  height: 100%;
}
#top-mv-video-mask img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
  font-family: "object-fit: cover ; object-position: 50% 50% ";
  width: 100%;
  height: 100%;
  width: 100%;
  height: 100%;
}


/*.scrollanime {
	opacity: 0;
	transition-delay: 600ms;
} 

.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 2s;
    animation-fill-mode: forwards; 
    transition-delay: 2s;
}
@keyframes fadeInDown {
   0% {
		opacity: 0;
	}
	100% {
    opacity: 1;
    transform: translate(0);
	}
}
*/
/*全共通*/

.slide-in {
  overflow: hidden;
  position: sticky;
  top: 25rem/*38rem*/;
}
/*.slide-in:nth-child(2) {top: 44rem;}
.slide-in:nth-child(3) {top: 50rem;}
.slide-in:nth-child(4) {top: 56rem;}
.slide-in:nth-child(5) {top: 62rem;}*/
.slide-in:nth-child(2) {top: 30rem;}
.slide-in:nth-child(3) {top: 35rem;}
.slide-in:nth-child(4) {top: 40rem;}
.slide-in:nth-child(5) {top: 45rem;}
.slide-in:nth-child(6) {top: 50rem;}


.slide-in_inner {
  display: inline-block;
}

.upAnime{
    opacity: 0;
}

.slideAnimeDownUp {
    animation : slideTextY100 2s forwards;
    opacity: 0;
}
@keyframes slideTextY100 {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.slideAnimeUpDown {
    animation: slideTextY-100 2s forwards;
    opacity: 0;
}
@keyframes slideTextY-100 {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
}

.slide-in.move {
  position: relative;
  top: 83rem/*60rem*/;
}
#copyBlock p.move:not(:first-child) {
  margin-top: 2.8rem/*3.8rem*/;
}
.hand.move{
  position: relative;
  top: 37rem;
  margin-top: 30rem;
}

#copyBlock {
  margin-top: 100vh;
  padding-top: 55vh;
  background-color: #fff;
  text-align: center;
  padding-bottom: 3rem;
}
#copyBlock p:not(:first-child) {
  margin-top: 17rem;
}
#copyBlock span {
  font-size: 1.8rem;
}
.hand {
  margin-top: 35rem /*17rem*/;
  margin-left: -94rem;
  margin-bottom: -12rem;
}
#copyBlock.move {
  padding-top: 91rem;
  padding-bottom: 40rem/*33rem*/;
}
@media only screen and (max-width: 782px) {
  #copyBlock {
    padding-bottom: 4rem;
  }
  #copyBlock p:not(:first-child) {
    margin-top: 30vw;
  }
 
  .hand{
    margin: 4rem auto 0 0;
    width: 66%;
    position: relative;
    left: 0;
    transform: translateX(-28%);
  }
  .slide-in{position:relative; top: 0;}
  .fixed .slide-in{position:sticky; top:10rem/*24vw*/;}
/*  .fixed .slide-in:nth-child(2) {top: 14rem/*32vw*;}
  .fixed .slide-in:nth-child(3) {top: 18rem/*40vw*;}
  .fixed .slide-in:nth-child(4) {top: 22rem/*48vw*;}
  .fixed .slide-in:nth-child(5) {top: 26rem/*56vw*;}
  .fixed .slide-in:nth-child(6) {top: 30rem/*64vw*;}
  .fixed .slide-in:nth-child(7) {top: 34rem/*72vw*;}
  .fixed .slide-in:nth-child(8) {top: 38rem/*80vw*;}*/
  .fixed .slide-in:nth-child(2) {top: 13.5rem/*32vw*/;}
  .fixed .slide-in:nth-child(3) {top: 17rem/*40vw*/;}
  .fixed .slide-in:nth-child(4) {top: 20.5rem/*48vw*/;}
  .fixed .slide-in:nth-child(5) {top: 24rem/*56vw*/;}
  .fixed .slide-in:nth-child(6) {top: 27.5rem/*64vw*/;}
  .fixed .slide-in:nth-child(7) {top: 31rem/*72vw;*/}
  .fixed .slide-in:nth-child(8) {top: 34.5rem/*80vw;*/}
  .fixed .slide-in:nth-child(9) {top: 38rem}


.slide-in.move {
  top: 87rem/*228vw*/;
}
#copyBlock.move{
  padding-top: 50rem/*34rem90vw*/;
  padding-bottom: 52rem/*71rem175vw*/;
}
#copyBlock p.move:not(:first-child) {
  margin-top: 1.4rem/*1.9rem5vw*/;
}
.hand.move{
  top: 52rem/*68rem181vw*/;
}
}
@media only screen and (min-width: 2068px) {
  #copyBlock span {
    font-size: 0.9vw;
  }
  .hand{
    margin-left: 0;
    width: 55%;
    position: relative;
    right: 23%;
  }
}


#productBlock {
  background: #fff;
  border-top: #fff 1px solid;
}
#productBlock .grid {
  margin: 0 auto;
  padding: 0rem 0 10rem;
  display: grid;
  grid-template-columns: 33% 33% 33%;
  justify-content: space-around;
  max-width: 1200px;
  width: 80%;
}
#productBlock .grid li {
  text-align: center;
  padding: 5rem;
}
.product3 .img-wrap{
  width: 140%;
  position: relative;
  left: -20%;
}
.product-ltd img{
  margin-left: -3rem;
}
.product-ltd h5{
  letter-spacing: -2px;
}
.product.grid li a, .postage a, #link00, #link10, #link20, .tostores a{
  background-color: #992020;
  color: #fff;
  padding: 3rem 0;
  margin: 2rem auto;
  display: block;
  font-size: 1.6rem;
}
#link10, #link00, #link10, #link20{
  opacity: 0.5;
}
.tostores a{
  padding: 1rem 3rem;
  margin: 0 auto;
}
.product.grid li.product-ltd a{
  padding: 1rem 0;
  line-height: 1.8;
}
.product li > p {
  text-align: left;
}
.product.grid li dl {
  font-size: 2.0rem;
  line-height: 2.2;
  text-align: left;
  margin-top: 2rem;
}
.product.grid li dl dt:not(:last-of-type){
  float: left;
  margin-right: 0.5rem;
}
.product.grid li dl dt:not(:last-of-type)::after{
  content: ' ： ';
}
.product.grid li dd{
  display: flex;
}
.product p{
  margin-top: 0;
}
.product p:nth-child(6) {
  text-align: left;
}
/*.price{
  font-size: 2rem;
}*/
.product{
  opacity: 0;
}
.is-active{
  animation: fadein 0.8s linear;
  opacity: 1;
}
.postage{
  padding: 0 0 40rem;
  width: 40%;
  max-width: 400px;
  margin: 0 auto;
}
.postage a {
  background-color: #000;
  text-align: center;
}

/*select-option ----------------------------------*/
 #select *{
  box-sizing: content-box;
}
/*ul,li{
  margin: 0;
  padding: 0;
  list-style: none;
}*/

.selectBox{
  position: relative;
  width: 100%;
  height: 60px;
  text-align: left;
}
.selectBox select{
  position: absolute;
  left: 0;
  top: 0;
  width: calc( 95% - 2px);
  height: 100%;
}
.selectBox__output{
  display: flex;
  align-items: center;
  position: relative;
  width: calc( 84% - 1px);
  height: 54%;
  padding: 1em 8%;
  border: 1px solid #992020;
  background-color: #f1f1f1;
/*  border-radius: 5px;*/
  z-index: 2;
  font-size: 1.4rem;
  line-height: 1.5;
}
.selectBox__output::after{
  display: block;
  position: absolute;
  right: 7%;
  top: 50%;
  font-family: "CONDENSEicon";
  transform: translateY(-50%) rotate(45deg);
  content: "";
  border-bottom: 1px solid #992020;
  border-right: 1px solid #992020;
  width: 10px;
  height: 10px;
  transition: all 0.1s;
}
.selectBox__output.open::after{
  transform: translateY(-50%) rotate(225deg);
  transition: all 0.1s;
}
.selectBox__selector{
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% - 1px);
  width: calc(100% - 1px);
  border: 1px solid #992020;
  border-top: 0;
  background-color: #f1f1f1;
  z-index: 10;
}
.selectBox__selectorItem{
  width: 84%;
  padding: .75em 8%;
  font-size: 1.4rem;
  line-height: 1.5;
}
/*.selectBox__selectorItem+.selectBox__selectorItem{
  border-top: 1px solid #ccc;
}*/
.selectBox__selectorItem:hover{
  background-color: #cc8f8f;
  color:#fff;
}

/*select-option ----------------------------------*/


@media only screen and (max-width: 782px) {
  #productBlock .grid{
    grid-template-columns: 100%;
    width: 85%;
    padding: 0 /*0 0 35vw*/;
  }
  #productBlock .grid li{
    padding: 5rem 0;
  }
  .img-wrap, .product3 .img-wrap{
    width: 60%;
    margin: 0 auto;
    position: static;
  }
  .postage{
    padding: 0 0 20rem;
    width: 85%;
  }
}


@media only screen and (min-width: 783px) and (max-width: 1300px) {
  #productBlock .grid{
    grid-template-columns: 33% 33% 32%;
    width: 90%;
  }
  #productBlock .grid li{
    padding: 0 2rem;
  }
}

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

/*----    20231225 add  「年末年始の出荷について」 stt    ----*/
.holiday{
  width: 75%;
  margin: 50px auto 100px;
  padding: 50px 5%;
  border: 1px solid #992020;
  position: relative;
}
.holiday-title{
  position: absolute;
  top: 0;
  right: 50%;
  transform: translate(50%, -50%);
  font-size: 2rem;
  text-align: center;
  background-color: #992020;
  color: #fff;
  padding: 15px 40px;
}
.holiday-caption{
  font-size: 1.6rem;
  text-align: center;
  line-height: 2;
}
.holiday-caption .date{
  color: #992020;
  font-size: 2rem;
  font-weight: 500;
}
.holiday-caption .bold{
  font-size: 3rem;
}
@media only screen and (max-width: 782px) {
  .holiday-title{
    padding: 5px 20px;
    width: max-content;
  }
}
/*----    20231225 add  「年末年始の出荷について」 end    ----*/