* {
  padding: 0;
  margin: 0;
  border: 0;
  list-style-type: none;
  box-sizing:border-box;
}

a, a:visited {
  text-decoration: none;
  color:inherit;
}

html{
  font-size: 62.5%;
  font-family:"YakuHanJP", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  scroll-behavior: smooth;
}

@media screen and (max-width:960px){
  html{
    font-size: 1.05vw;
  }
}

@media screen and (max-width:576px){
  html{
    font-size: 1.45vw;
  }
}

main{
  width:100%;
  max-width:1500px;
  margin:0 auto;
}

#mv{
  display:flex;
  justify-content: flex-end;
  align-items: center;
  width:100%;
  background-image: url(../img/mv-back.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left bottom;
  padding:5vh 0;
  transition: all 2s ease;
  box-shadow: inset 0px -20px 30px 0px rgba(255, 255, 255, 1);
}

@media screen and (max-width:960px){
  #mv{
    padding:8vh 0;
  }
}

#mv-wrap{
  width:22%;
  margin-right:10%;
}

@media screen and (max-width:960px){
  #mv-wrap{
    width:30%;
  }
}

@media screen and (max-width:576px){
  #mv-wrap{
    width:70%;
    padding:5%;
    margin:0 15%;
    background-color: rgb(255 255 255 / 1);
  }
}

.mv-wrap p,.mv-wrap h1{
  width:100%;
}

.mv-text img{
  width:100%;
  margin:3vh 0;
}

#mv-product img{
  width:45%;
  float:right;
}

@media screen and (max-width:576px){
  #mv-product img{
    float:none;
    margin:0 24.5%;
  }
}

#mv-logo img{
  width:35%;
  float:right;
}

#msg{
  width:80%;
  margin:3vh 10%;
}

@media screen and (max-width:960px){
    #msg{
    margin:2vh 10%;
  }
}

@media screen and (max-width:576px){
    #msg{
    width:90%;
    margin:5vh 5%;
  }
}

#msg p{
  font-size:2.5rem;
  font-weight:lighter;
  font-weight:300;
  line-height:2;
  text-align: center;
  letter-spacing:0.15em;
}

@media screen and (max-width:576px){
  #msg p{
    font-size:3rem;
    letter-spacing:0.05em;
  }
}

#item{
  width:70%;
  margin:5vh 15%;
}

@media screen and (max-width:960px){
  #item{
    width:90%;
    margin:4vh 5%;
  }
}

@media screen and (max-width:576px){
  #item{
    width:95%;
    margin:5vh 2.5%;
  }
}

#item-type{
  width:50%;
  margin:0 0 3vh 20%;
}

@media screen and (max-width:960px){
  #item-type{
    margin:0 0 2vh 20%;
  }
}

@media screen and (max-width:576px){
  #item-type{
    width:90%;
    margin:0 0 2vh 5%;
  }
}

#item-type img{
  width:65%;
}

#item-area{
  display:flex;
  justify-content: space-around;
  align-items:flex-end;
  width:65%;
  margin:1vh 17.5%;
}

@media screen and (max-width:576px){
  #item-area{
    width:90%;
    margin:3vh 5%;
  }
}

#item-area div{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:40%;
}

@media screen and (max-width:576px){
  #item-area div{
    width:45%;
  }
}

#item-1 img{
  width:83%;
}

#item-4 img{
  width:100%;
}

#item-area div h2{
  margin-top:0.8em;
  padding:0.1em 0.01em;
  border:solid 1.3px #000;
  width:80%;
  max-width: 200px;
  text-align:center;
  font-size:1.8rem;
  font-weight:normal;
  font-weight:400;
  letter-spacing:0.02em;
}

@media screen and (max-width:576px){
  #item-area div h2{
    font-size:2.3rem;
  }
}

#item-type-text{
  width:100%;
  text-align: center;
  font-size:1.8rem;
  font-weight:normal;
  font-weight:400;
  letter-spacing:0.05em;
  margin:3vh 0 1vh;
}

@media screen and (max-width:576px){
  #item-type-text{
    font-size:2.5rem;
  }

}

#price-area{
  width:70%;
  max-width: 500px;
  margin:0 auto;
  display:flex;
  justify-content: flex-start;
  align-items:center;
}

@media screen and (max-width:960px){
  #price-area{
    width:60%;
  }
}

@media screen and (max-width:576px){
  #price-area{
    width:80%;
  }
}

#price-area h2{
  margin:0 1em 0 0;
  font-size:2rem;
  font-weight:bold;
  font-weight:500;
  letter-spacing:0.02em;
}

@media screen and (max-width:576px){
  #price-area h2{
    font-size:2.3rem;
  }
}

#price-area ul{
  width:100%;
}

#price-area ul li{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin:1.2rem 0;
}

#price-area ul li h3{
  display:flex;
  align-items:center;
  height: auto;
  font-size:2rem;
  font-weight: normal;
  font-weight:400;
  letter-spacing:0.02em;
  flex-grow:1;
}

@media screen and (max-width:576px){
  #price-area ul li h3{
    font-size:2.3rem;
  }
}

#price-area ul li p{
  font-size:2rem;
  font-weight: normal;
  font-weight:400;
  letter-spacing:0.02em;
}

@media screen and (max-width:576px){
  #price-area ul li p{
    font-size:2.3rem;
  }
}

#price-area ul li h3::before{
  content:"・";
  margin-right:0.2em;
}

#price-area ul li h3::after{
  content:"";
  display:block;
  width: auto;
  margin: 0 1.5rem;
  height: 1px;
  flex-grow:1;
  background-color:#000;
  background-size: contain;
}

#feature{
  width:100%;
  margin:7vh 0;
  background-image: url(../img/feature-bg.jpg);
  background-repeat: no-repeat;
  background-size:37% auto;
  background-position: top right;
}

@media screen and (max-width:960px){
  #feature{
    margin:5vh 0;
  }
}

#feature h2{
  width:100%;
  text-align:center;
  font-size:2.5rem;
  font-weight:normal;
  font-weight:400;
  margin:3vh 0;
}

@media screen and (max-width:576px){
  #feature h2{
    font-size:3rem;
    margin:3vh 0;
  }
}

#feature h2 span{
  letter-spacing: 1em;
}

#feature-area1{
  width:60%;
  margin:3vh 20% 5vh;
}

@media screen and (max-width:960px){
  #feature-area1{
    width:70%;
    margin:3vh 15% 3vh;
  }
}

@media screen and (max-width:576px){
  #feature-area1{
    width:90%;
    margin:3vh 5% 5vh;
  }
}

#feature figure img{
  width:100%;
}

#feature-child1{
  display:flex;
  justify-content: center;
  width:100%;
  margin:0 auto;
}

@media screen and (max-width:576px){
  #feature-child1{
    flex-direction: column;
    width:100%;
    margin:0 auto;
  }
}

#feature-child1 li{
  width:30%;
  margin:0;
}

@media screen and (max-width:576px){
  #feature-child1 li{
    display:flex;
    flex-direction:row;
    align-items: center;
    width:100%;
    margin:-0.5vh 0;
  }
}

#feature-child1 li h3{
  display:flex;
  justify-content: center;
}

@media screen and (max-width:576px){
  #feature-child1 li h3{
    display:block;
    width:35%;
    margin:0 3% 0 0;
  }
}

#feature-child1 li h3 img{
  width:110%;
  margin-left:-10%;
}

@media screen and (max-width:576px){
  #feature-child1 li h3 img{
  width:100%;
  margin:0;
  }
}

#feature-child1 li p{
  text-align:center;
  font-size:1.4rem;
  line-height:1.5em;
  font-weight:normal;
  font-weight:400;
  margin:1em 0em;
}

@media screen and (max-width:576px){
  #feature-child1 li p{
    width:70%;
    margin:0;
    text-align:left;
    font-size:2.4rem;
  }

  #feature-child1 li p br{
    display:none;
  }
}

#feature-area2{
  width:50%;
  margin:5vh 25%;
}

@media screen and (max-width:960px){
  #feature-area2{
    width:55%;
    margin:3vh 22.5%;
  }
}

@media screen and (max-width:576px){
  #feature-area2{
    width:70%;
    margin:3vh 15%;
  }
}

#feature-child2{
  width:100%;
  display:flex;
  flex-flow: column;
  margin:0 0 5vh;
}

@media screen and (max-width:960px){
  #feature-child2{
    margin:0 0 3vh;
  }
}

#feature-child2 li{
  width:100%;
  display:flex;
  justify-content:space-between;
  margin:0 0 3vh;
}

@media screen and (max-width:576px){
  #feature-child2 li{
    flex-direction: column;
    align-items:center;
  }
}

#feature-child2 li:last-child{
  margin:0;
}

#feature-child2 figure{
  width:26%;
}

@media screen and (max-width:960px){
  #feature-child2 figure{
    width:35%;
  }
}

@media screen and (max-width:576px){
  #feature-child2 figure{
    width:40%;
    margin:0 0 0.5vh;
  }
}

#feature-child2 figure img{
  width:100%;
}

#feature-child2 .discription{
  width:72%;
}

@media screen and (max-width:960px){
  #feature-child2 .discription{
    width:60%;
  }
}

@media screen and (max-width:576px){
  #feature-child2 .discription{
    width:100%;
  }
}

#feature-child2 .discription h3{
  font-size:1.8rem;
  font-weight:normal;
  font-weight:400;
  letter-spacing:0.05em;
  margin:0 0 0.2em;
}

@media screen and (max-width:576px){
  #feature-child2 .discription h3{
    font-size:2.8rem;
    text-align:center;
    margin:0 0 0.5em;
  }
}

#feature-child2 .discription p{
  font-size:1.5rem;
  font-weight:normal;
  font-weight:300;
  letter-spacing:0.05em;
  line-height:1.5em;
}

@media all and (max-width: 576px){
  #feature-child2 .discription p{
    font-size:2.4rem;
  }
}

@media all and (max-width: 1100px){
  #feature-child2 .discription p br{
    display:none;
  }
}

#feature-child2 .discription p sub{
  font-size:0.5em;
  line-height:0.5em;
}

#feature-child2 .discription aside{
  display:flex;
  margin:1vh 0;
}

#feature-child2 .discription aside p{
  display:inline-block;
  font-size:1.2rem;
  font-weight:normal;
  font-weight:300;
  line-height:1.5em;
}

@media all and (max-width: 576px){
  #feature-child2 .discription aside p{
    font-size:1.9rem;
  }
}

#feature-child2 .discription aside p.star{
  margin-right:0.5em;
}

#feature-area3{
  width:60%;
  margin:5vh 20%;
}

@media screen and (max-width:960px){
  #feature-area3{
    width:65%;
    margin:3vh 17.5%;
  }
}

@media screen and (max-width:576px){
  #feature-area3{
    width:90%;
    margin:3vh 5%;
  }
}

#feature-child3{
  width:100%;
}

#feature-child3 .grp{
  display:flex;
  justify-content: space-between;
  align-items: center;
}


@media screen and (max-width:576px){
  #feature-child3 .grp{
    display:block;
    position:relative;
  }
}

#feature-child3 .grp:first-child{
  margin-bottom:1vh;
}

#feature-child3 .grp:last-child{
  align-items: center;
}

#feature-child3 .grp figure{
  width:28%;
}

@media screen and (max-width:576px){
  #feature-child3 .grp figure{
    width:60%;
  }
}

#feature-child3 .grp div{
  width:67%;
}

@media screen and (max-width:576px){
  #feature-child3 .grp div{
    width:80%;
    position:absolute;
    bottom:0;
    right:0;
    margin:1vh 5%;
    padding:3%;
    background-color: rgb(255 255 255 / 0.9);
  }
}

#feature-child3 .grp div h3, #feature-child3 .grp div p{
  font-weight:normal;
  font-weight:350;
}

#feature-child3 .grp div .p1{
  font-size:2.4rem;
  margin:0 0 0.5em;
  letter-spacing:0.05em;

}

@media screen and (max-width:576px){
  #feature-child3 .grp div .p1{
    font-size:2.7rem;
    text-align: center;
  }

  #feature-child3 .grp div .p1 br{
    display: none;
  }
}

#feature-child3 .grp div .p1 .large1{
  font-size:1.5em;
  line-height:1.3em;
}

#feature-child3 .grp div .p1 .large2{
  display:inline-block;
  font-size:1.3em;
  margin-left:0.25em;
}

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

  #feature-child3 .grp div .p1 .large2{
    margin:0;
  }
  #feature-child3 .grp div .p1 .comma{
    margin:0 0.1em;
  }

}

#feature-child3 .grp div .p2{
  font-size:1.8rem;
  letter-spacing:0.15em;
}

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

  #feature-child3 .grp div .p2{
    font-size:2.5rem;
    letter-spacing:0.1em;
  }

  #feature-child3 .grp div .p2{
    text-align:center;
  }
}

#feature-child3 .grp div .p2 .large1{
  font-size:1.5em;
  line-height:1.4em;
}

#feature-child3 .grp div .p3{
  font-size:1.8rem;
  letter-spacing:0.1em;
  line-height:1.4em;
}

@media screen and (max-width:960px){
  #feature-child3 .grp div .p3{
    font-size:1.5rem;
  }
}

#feature-area4{
  width:60%;
  margin:5vh 20%;
}

@media screen and (max-width:576px){
  #feature-child3 .grp div .p3{
    font-size:2.2rem;
  }
}

@media screen and (max-width:960px){
  #feature-area4{
    width:90%;
    margin:3vh 5%;
  }
}

#feature-child4{
  width:90%;
  display:flex;
  justify-content: center;
  align-items: center;
}

#feature-child4 p{
  margin:0 2em 0 0;
  font-size:1.8rem;
  letter-spacing:0.1em;
  line-height:1.5em;
  font-weight:normal;
  font-weight:350;
}

@media screen and (max-width:960px){
  #feature-child4 p{
    font-size:1.5rem;
  }
}


@media screen and (max-width:576px){
  #feature-child4 p{
    width:100%;
    margin:0 0 1em;
    text-align:center;
    font-size:2.2rem;
  }
}

#feature-child4 figure{
  width:35%;
}

@media screen and (max-width:960px){
  #feature-child4 figure{
    width:30%;
  }
}

@media screen and (max-width:576px){
  #feature-child4 figure{
    width:70%;
  }
}

header {
  height:80px;
  width:100%;
  background-color: transparent;
  position: fixed;
  top:0;
  left:0;
  right:0;
  z-index: 90;
}

#header-wrap{
  max-width:1500px;
  display:flex;
  justify-content: space-between;
  align-items: center;
  height: inherit;
  padding: 0 25px;
  margin: 0 auto;
}

#header-logo img{
  height:30px;
}

#bt_ham{
  width:20px;
  height:20px;
  border:0;
  padding:0;
  margin:0;
  background-color: transparent;
}

#bt_ham span,
#bt_ham span::after,
#bt_ham span::before{
  display:block;
  content:"";
  position: relative;
  width:100%;
  height:2px;
  background-color:#000;
  transition: all 0.5s;
}

#bt_ham span::after{
  top: 5px;
}

#bt_ham span::before{
  bottom: 7px;
}

#bt_ham.open span{
  background-color: transparent;
}

#bt_ham.open span::before{
  top:1px;
  bottom:0;
  transform: rotate(45deg);
}

#bt_ham.open span::after{
  top:-1px;
  bottom:0;
  transform: rotate(-45deg);
}

#header-nav{
  position: fixed;
  width:40%;
  height:calc(100vh - 80px);
  top: 80px;
  right: -100%;
  background-color: #FFF;
  padding:20px 0;
  transition: all 0.5s;
  border-top: 1px solid #fff;
  z-index:100;
}

#header-nav.open{
  right:0;
}

header.white{
  background-color: #FFF;
  transition: all 0.5s;
}

#header-wrap::after{
  content:none;
  position:fixed;
  background:rgb(0 0 0 / 0.6);
  width:100%;
  height:calc(100% - 80px);
  top:80px;
  left:0;
  z-index:90;
}

#header-wrap.grayout::after{
  content:"";
}

.header-nav-item{
  display:block;
  font-size:2rem;
  color:#000;
  padding:1em 2em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.5s ease;
}

.header-nav-item:hover{
  text-decoration-color: currentColor;
}

@media screen and (max-width:960px){
  #header-nav{
    width:50%;
  }
}

@media screen and (max-width:576px){
  header{
    height:50px;
  }

  .header-nav-item{
    font-size:2.5rem;
  }

  #header-logo img{
    height:20px;
  }

  #header-nav{
    width:100%;
    height:calc(100vh - 50px);
    top:50px;
  }

  #header-wrap::after{
    height:calc(100% - 50px);
    top:50px;
  }

}

#footer-wrap{
  width:100%;
  padding:5vh 0 10vh;
  background-color: #333;
  display:flex;
  justify-content: space-between;
  align-items: center;
}

#footer-left{
  width:50%;
  max-width:200px;
  margin:0 3%;
}

#footer-logo{
  Width:100%;
}

#footer-logo img{
  width:100%;
}

#footer-copylight{
  margin-top:2rem;
}

#footer-copylight small{
  font-size:1.2rem;
  color:#FFF;
}

#footer-nav-list{
  display:flex;
  justify-content: flex-end;
}

#footer-nav-list li{
  color:#FFF;
  font-size:1.5rem;
  margin:0 2em;
}

@media screen and (max-width:960px){
  #footer-wrap{
    justify-content: space-around;
  }

  #footer-nav-list{
    flex-direction: column;
  }

  #footer-nav-list li{
    margin:0.5em 2em;
  }

}

@media screen and (max-width:576px){
  #footer-copylight small{
    font-size: 1.5rem;
  }

  #footer-nav-list li{
    font-size:2rem;
  }

  #footer-left{
    width:25%;
  }

  #footer-nav{
    width:60%;
  }
}

.bt-buy{
  width:50%;
  max-width:300px;
  margin:3vh auto;
  height:5vh;
  display:flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, rgb(0, 136, 182), rgb(220, 216, 235));
  opacity:1;
  position: relative;
  z-index:50;
  border-radius:9999px;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.bt-buy::after{
  content:"";
  position:absolute;
  z-index:51;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius:9999px;
  background: linear-gradient(90deg, rgb(203, 142, 85), rgb(224, 228, 202));
  opacity:0;
  transition: all 0.3s;
}


.bt-buy:hover::after{
  opacity:1;
}

.bt-buy.mover{
  background: linear-gradient(90deg, rgb(203, 142, 85), rgb(224, 228, 202));
  opacity:1;
  transition: all 0.5s;
}

.bt-buy p{
  font-size: 2rem;
  font-weight:bold;
  color:#fff;
  z-index:52;
}

.bt-buy span{
  display:inline-block;
  margin-left: 1rem;
}

#bottom-bt.bt-buy{
  width:30%;
  position:fixed;
  z-index:160;
  bottom: 1vh;
  right:1vh;

}

@media screen and (max-width:576px){
  .bt-buy{
    width:50%;
  }

  #bottom-bt.bt-buy{
    width:90%;
    max-width:100%;
    bottom:0;
    left:5%;
  }

  .bt-buy p{
    font-size:2.3rem;
  }

}

#order-hidden{
  display:none;
}

#ms-forms{
  margin-top:80px;
}

@media screen and (max-width:576px){
  #ms-forms{
    margin-top:50px;
  }
}

#footer-wrap.others{
  padding:2vh 0 2vh;
}

#article-terms{
  margin-top:80px;
}

@media screen and (max-width:576px){
  #article-terms{
    margin-top:50px;
  }
}

#article-terms h1, #article-privacy h1{
  width:80%;
  margin:10vh auto 5vh;
  text-align:center;
  font-size:2.5rem;
  padding:1em;
  border-bottom:solid 1px #000;
  font-weight:bold;
}

@media screen and (max-width:576px){
  #article-terms h1, #article-privacy h1{
    font-size:3rem;
  }
}

#article-privacy section{
  width:80%;
  margin:3vh auto;
}

#article-privacy section h2{
  width:100%;
  text-align: left;
  font-size:2rem;
  font-weight:bold;
}

@media screen and (max-width:576px){
  #article-privacy section h2{
    font-size:2.7rem;
  }
}

#article-privacy section h2::before{
  content:"■";
  margin-right:0.5em;
  color:rgb(0, 136, 182);
}

#article-privacy section p{
  width:100%;
  font-size:1.6rem;
  line-height:1.8em;
  margin:1em auto;
  text-align: left;
}

@media screen and (max-width:576px){
  #article-privacy section p{
    font-size:2.2rem;
    line-height:2em;
  }
}

#article-privacy section ol{
  width:100%;
  font-size:1.6rem;
  line-height:1.8em;
  list-style-type: decimal;
  list-style-position: inside;
}

@media screen and (max-width:576px){
  #article-privacy section ol{
    font-size:2.2rem;
    line-height:2em;
  }
}

#article-privacy section ol li{
  list-style-type: decimal;
  margin-left:1em;
}

#article-terms > dl{
  width:80%;
  margin:5vh auto;
}

#article-terms > dl > dt{
  width:100%;
  font-size:1.8rem;
  margin:1em 0 0.5em;
  font-weight:bold;
}

@media screen and (max-width:576px){
  #article-terms > dl > dt{
    font-size:2.7rem;
  }
}

#article-terms > dl > dt::before{
  content:"■";
  margin-right:0.5rem;
  color:rgb(0, 136, 182);
}

#article-privacy section div.contact div p{
  margin:0 auto;
}

#article-terms > dl > dd{
  width:100%;
  font-size:1.8rem;
  margin:0.5em 0 2em 1em;
  padding-bottom:0.2em;
  border-bottom:dotted 1px #000;
}

@media screen and (max-width:576px){
  #article-terms > dl > dd{
    font-size:2.2rem;
    line-height:2em;
  }
}

#article-terms > dl > dd dl dt{
  margin:1em 0 0.2em;
}

#article-terms > dl > dd dl > dt::before{
  content:"【";
  margin-right:0.5rem;
}

#article-terms > dl > dd dl > dt::after{
  content:"】";
  margin-left:0.5rem;
}

#article-terms > dl > dd dl dd > ul li{
  list-style-type: disc;
  list-style-position: inside;
}

#article-terms dd * small{
  font-size:0.8em;
  margin:0 1em;
}

@media screen and (max-width:576px){
  #article-terms dd * small{
    display:block;
    line-height:1em;
    margin:0 0 1em;
  }
}

.tlink a:hover{
  text-decoration: underline;
}