:root {
  --fontsize01: 0.825rem;
  /* --fontsize02: 1.125rem ;　05*/
  /* --fontsize03: 1.195rem;　05*/
  /* --fontsize04: 1.25rem;　05*/
  --fontsize05: 1.375rem;
  /* --fontsize06: 1.4rem;　05*/
  /* --fontsize07: 1.45rem;　 09*/
  /* --fontsize08: 1.525rem;　 09*/
  --fontsize09: 1.575rem;
  --fontsize10: 1.725rem ;
  /* --fontsize11: 1.85rem;　 12*/
  --fontsize12: 1.925rem;
  /* ----fontsize13: 2.00rem;　 12*/
  /* ------fontsize14: 2.325rem;　 15*/
  --fontsize15: 2.525rem;
  --fontsize16: 3.125rem;
  --fontsize17: 3.8rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
img {
    height: auto;
}
html{
    font-size: 16px;
}
.loaditem {
  opacity: 0;
  visibility: hidden;
  transition: all 1.0s;
}
.slidein {
  opacity: 0;
  visibility: hidden;
  transition: all 1.0s;
}
.loaditem.delay,
.slidein.delay {
    transition-delay: 650ms;
}
.loaditem.delay2,
.slidein.delay2 {
    transition-delay: 450ms;
}
.loaditem.right,
.slidein.right {
  transform: translateX(30px);
}
.loaditem.left,
.slidein.left {
  transform: translateX(-30px);
}
.loaditem.fade,
.slidein.fade {
  -ms-filter: blur(15px);
  filter: blur(15px);
  transform: scale(1.02);
}
.loaditem.is-active,
.slidein.is-active {
  /*要素を表示させる*/
  opacity: 1;
  visibility: visible;
  /*元の位置に戻す*/
  transform: translateX(0);
  -ms-filter: blur(0);
  filter: blur(0);
  transform: scale(1.0);
}
body {
    font-family:"Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.6;
    color: #1f2937;
    position: relative;
}
body::before{
    content: "";
    position: fixed;
    display: block;
    width: 100vw;
    height: 100vh;
    background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
    background-size:  cover;
    background-position: center;
    top: 0;
    z-index: 0;
}
header{
    width: 700px;
    position: fixed;
    top: 0;
    z-index: 3;
    display: flex;
    flex-wrap: nowrap;
    background-color: #f7f7f7;
}
@media (max-width: 700px) {
    header{
        width: 100%;
    }
}
header .logo{
    width: 60%;
    padding: 5% 5%;
    display: flex;
    align-items: center;
}
header .logo h1{
    margin: 0;
    padding: 0;
    line-height: 1;
    display: block;
    width: 60%;
}
header .logo img{
    display: block;
}
header .tocart{
    width: 40%;
    display: flex;
}
header .tocart a{
    background-color: #121e38;
    text-align: center;
    width: 100%;
    color: #f7f7f7;
    text-decoration: none;
    display: flex;
    align-items: center;
}
header .tocart a:hover{
  animation-duration: 0.7s;
    transition:all 0.5s ease-out;
    background-color: #d7725a;
}

header .tocart a span{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../images/shop_icon.svg);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 3.25rem;
    font-size: var(--fontsize09);
}
footer{
    background-color: #121e38;
    display: flex;
    padding: 20px 5%;
    flex-wrap: nowrap;
    justify-content: space-between;
}
footer div{
    display: flex;
    align-items: center;
}
footer .flogo img{
    height: 2.5vw;
    width: auto;
}
footer .copy{
    color: #f7f7f7;
}

@media (max-width: 1179px) {
    main{
        padding-top: 13.2%;
    }
}
p{
    text-align: justify;
    font-size: var(--fontsize05);
}
.wrapper{
    width:700px;
    margin: 0 auto;
    background: #f7f7f7;
    position: relative;
    z-index: 2;    /*
  animation-duration: 1.0s;
  animation-name: load;
  */
}

    /*
@keyframes load {
  0% {
  filter: blur(30px);
  opacity:  0;
  transform: translate( 0,-70px);
  }
  20% {
  filter: blur(30px);
  transform: translate( 0,-50px);
  }
  50% {
  opacity:  0.5;
  }
  100% {
  filter: blur(0px);
  opacity: 1.0;
  transform: translate(0, 0);
  }
}
  */
.ls{
    letter-spacing:-0.15em;
}
.ultit{
    text-align: center;
}
.ultit span{
    position: relative;
    z-index: 2;
    background-image: url(../images/tit_line.webp);
    background-repeat: no-repeat;
    background-size: 100% 40%;
    background-position: center bottom 0.2rem;
    padding: 0 0.2rem;
}
.ul{
    position: relative;
    z-index: 2;
    background-image: url(../images/tit_line.webp);
    background-repeat: no-repeat;
    background-size: 100% 40%;
    background-position: center bottom 0.2rem;
    padding: 0 0.2rem 0 0;
}
.notemark{
    font-size: 65%;
}
.note{
    font-size: 70%;
}
/* ABOUT */
.about{
    color: #f7f7f7;
}
.about h3{
    margin-bottom: 5%;
}
.about .ctn01{
    background:url(../images/about_img01.webp);
    background-repeat:  no-repeat;
    background-size: 100% auto;
    background-position: center;
    color: #f7f7f7;
    padding: 8.5rem 0 9.5rem;
}
.about .ctn01 h2{
    /*font-size: var(--fontsize17); */
    font-size: 3.8rem;
    text-align: center;
    padding-left: 1.925rem;
}
.about .ctn01 h3{
    font-size: 2.00rem;
    margin-bottom: 2.85rem;
    text-align: center;
}
.about .ctn01 p{
    text-align: left;
    padding-left: 6%;
    font-size: var(--fontsize05);
    line-height: 2.3rem;
    margin-bottom: 2%;
    text-shadow: rgba(0, 0, 0, 0.8) 0 0 0.7rem;
}
.about .ctn02{
    background-color: #121e38;
    padding-top: 3rem;
}
.about .ctn02 .movie{
    width: 75%;
    margin:0 auto 5%;
}
.about .ctn02 .movie video{
    width: 100%;
}
.about .ctn02 .category h3,
.about .ctn02 .effect h3{
    font-size: var(--fontsize12);
}
.about .ctn02 .category h4,
.about .ctn02 .effect h4{
    font-size: var(--fontsize09);
}
.about .ctn02 .category ul{
    display: flex;
    flex-wrap: nowrap;
    gap:5px;
    width: 75% ;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8%;
    padding-top: 2%;
}
.about .ctn02 .category ul li{
    list-style: none;
    text-align: center;
    width: calc((100% - 10px) / 3 );
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 65% auto;
    padding-top: 22%;
}
.about .ctn02 .category ul li:nth-child(1){
    background-image: url(../images/about_category01.svg);
}
.about .ctn02 .category ul li:nth-child(2){
    background-image: url(../images/about_category02.svg);
}
.about .ctn02 .category ul li:nth-child(3){
    background-image: url(../images/about_category03.svg);
}
.about .ctn02 .effect{
    background-image: url(../images/about_img02.webp) , url(../images/about_img03.webp);
    background-repeat: no-repeat, no-repeat;
    background-position: left bottom, right bottom;
    background-size: 50% auto, 50% auto;
    padding-bottom: 55%;
}
.about .ctn02 .effect h4{
    text-align: center;
    margin-bottom: 4%;
}
.about .ctn02 .effect h4::before,
.about .ctn02 .effect h4::after{
    content: "/";
    padding-left: 0.5rem;
    display: inline-block;
    color: #ee837f;
    font-weight: bold;
}
.about .ctn02 .effect h4::before{
    transform: scale(-1, 1);
}
.about .ctn02 .effect ul{
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    gap: 15px 3%;
    justify-content: center;
}
.about .ctn02 .effect ul.e1{
    width: 78%;
    margin-bottom: 8%;
}
.about .ctn02 .effect ul.e2{
}
.about .ctn02 .effect ul li{
    width: 20%;
    list-style: none;
    text-align: center;
    font-size: var(--fontsize09);
    line-height: 1.8rem;
    display: flex;
    align-items:center;
    justify-content: center;
    aspect-ratio: 1;
    border:1px solid #f7f7f7;
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.0);
}
.about .ctn02 .effect ul.e1 li{
    width: 25.75%;
}
.about .ctn02 .effect ul li div{
    color: #000;
    color: #f7f7f7;
    font-weight: bold;
    font-size: 94%;
    line-height: 1.2;
}
.about .ctn02 .effect ul li div span{
    font-size: 82%;
    font-weight: normal;
}
.about .ctn02 .secret{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 5% 0;
}
.about .ctn02 .secret h3{
    margin-bottom: 1.35rem;
}
.about .ctn02 .secret h3 > span{
    display: block;
    font-size: var(--fontsize10);
    margin-bottom: 0.8rem;
}
.about .ctn02 .secret h3 + p{
    font-size: var(--fontsize05);
}

.about .ctn02 .secret h3 + p img{
    width: 108%;
    display: block;
    margin-left: -4%;
}
.about .ctn02 .secret h3 + p .note{
    padding-top: 2%;
    margin-bottom: 8%;
    display: block;
}
.voice{
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    padding: 5% 0 8%;
}
.voice h3{
    font-size: var(--fontsize12);
    margin-bottom: 3%;
}
.voice ul{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height:660px;
    gap:15px;
}
.voice ul li{
    flex: 1;
    display: flex;
    list-style: none;
    font-size: var(--fontsize05);
    width: 100%;
    align-items: stretch;
    background-repeat: no-repeat;
    background-size: auto 92%;
    padding: 20px 0 15px;

}
.voice ul li:nth-child(1){
    background-image: url(../images/voice_img01.svg);
    justify-content: right;
}
.voice ul li:nth-child(2){
    background-image: url(../images/voice_img02.svg);
    background-position: right;
}
.voice ul li:nth-child(3){
    background-image: url(../images/voice_img03.svg);
    justify-content: right;
}
.voice ul li p{
    width: 72.5%;
    display: block;
    margin-left: 5%;
    padding:0 1.525rem;
    border: 1px solid #000;
    border-radius: 15px;
    display: flex;
    align-items: center;
    position: relative;
}

.voice ul li:nth-child(3) p {
    padding:0 3.225rem;
}
.voice ul li:nth-child(1) p::before,
.voice ul li:nth-child(3) p::before {
  content: "";
  border-left: 25px solid transparent;
  border-bottom: 25px solid #000;
  position: absolute;
  bottom: 55px;
  left: -25px;
}
.voice ul li:nth-child(1) p::after,
.voice ul li:nth-child(3) p::after {
  content: "";
  border-left: 25px solid transparent;
  border-bottom: 25px solid #f7f7f7;
  position: absolute;
  bottom: 54px;
  left: -25px;
}
.voice ul li:nth-child(2) p::before {
  content: "";
  border-right: 25px solid transparent;
  border-top: 25px solid #000;
  position: absolute;
  bottom: 55px;
  right: -25px;
}
.voice ul li:nth-child(2) p::after {
  content: "";
  border-right: 25px solid transparent;
  border-top: 25px solid #f7f7f7;
  position: absolute;
  bottom: 56px;
  right: -25px;
}


.product {
  background-image: linear-gradient(0deg, #d7725a, #8a4261 12%, #0c1a49 35.5%, #0b152e 100%);
  padding: 12% 0 10%;
}
.product .ctn01{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #f7f7f7;
    color: #f7f7f7;
    margin-bottom: 8%;
    padding-top: 5%;
}
.product .ctn01 div{
    padding: 0 0 5% 0;
}
.product .ctn01 h3{
    background-image: url(../images/product_icon.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 85%;
    margin-bottom: 3%;
    margin-left:6.5% ;
    font-size: var(--fontsize10);
    padding-left: 3.925rem;
}
.product .ctn01 h4{
    font-size: var(--fontsize09);
    margin-bottom: 4%;
    margin-left: 8.5%;
}
.product .ctn01 h4 span:first-child{
    display: block;
    width:50%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4%;
    padding-right: 8.5%;
}
.product .ctn01 p{
    padding: 0 8.5%;
}
.product .ctn02{
    color:#f7f7f7;
}
.product .ctn02 h3{
    font-size: var(--fontsize12);
    margin-bottom: 3%;
}
.product .ctn02 h3 + p{
    text-align: center;
    font-size: var(--fontsize05);
    margin-bottom: 5%;
}
.product .ctn02 h3 + p .ul{
    font-size: 120%;
}
.product .ctn02 h3 + p img{
    width: 75%;
    margin-top: 3%;
}
.product .ctn02 .goods {
    width: 72%;
    margin-left: 14%;
}
.product .ctn02 .goods h4{
    font-size: var(--fontsize12);
    letter-spacing: 0.1rem;
    margin-bottom: 2%;
    line-height: 1.6;
}
.product .ctn02 .goods h4 img{
    width: 48%;
    display: inline-block;
    margin-right: 0.5rem;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
}
.product .ctn02 .goods h4 > span{
    font-size: var(--fontsize05);
    line-height: 2;
}
.product .ctn02 .goods h4 > span.note{
    font-size: var(--fontsize01);
    margin-left: 0.225rem;
    display: block;
}
.product .ctn02 .goods p{
    margin-bottom: 8%;
}
.product .ctn02 .goods p .name,
.product .ctn02 .goods p .price{
    display: block;
    font-size: var(--fontsize12);
    margin-bottom: 2%;
}
.product .ctn02 .goods p .price span{
    font-size: 60%;
}
.product .ctn02 .goods p .color{
    font-size: var(--fontsize12);
}
.product .ctn02 .goods p .color span{
    padding-right: 0.125rem;
    vertical-align: top;
    display: inline-block;
}
.product .ctn02 .goods p .color span img{
    width: 1.725rem;
    vertical-align: baseline;
}
.product .ctn02 .goods a{
    display: block;
    width: 100% ;
    border: 1px solid #f7f7f7;
    text-align: center;
    text-decoration: none;
    color: #f7f7f7;
    font-size: var(--fontsize12);
    padding: 1.325rem 8rem 1.325rem 0 ;
    background-image: url(../images/arrow.svg);
    background-repeat: no-repeat;
    background-position: right 6rem center;
    background-size: auto 30%;
    transition:all 0.5s ease-out;
}
.product .ctn02 .goods a:hover{
    background-color: #f7f7f7;
    color: #8a4261;
    background-image: url(../images/arrow2.svg);
    background-position: right 4rem center;
}
.outro{
    padding: 5% 0 8%;
}
.outro p{
    text-align: center;
    font-size: var(--fontsize09);
    margin-bottom: 5%;
}
.outro ul{
    display: flex;
    flex-wrap: nowrap;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8%;
}
.outro ul li{
    list-style:none;
    text-align:center;
    flex:1;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 70% auto;
    padding-top: 16%;
    font-size: var(--fontsize05);
}
.outro ul li:nth-child(1){
    background-image: url(../images/outro_img01.svg);
}
.outro ul li:nth-child(2){
    background-image: url(../images/outro_img02.svg);
}
.outro ul li:nth-child(3){
    background-image: url(../images/outro_img03.svg);
}
.outro ul li:nth-child(4){
    background-image: url(../images/outro_img04.svg);
}
.outro a{
    display: block;
    width: 65%;
    margin-left: auto;
    margin-right: auto;
    padding: 9% 0 6% 0;
    box-sizing: border-box;
    overflow: hidden;
    background-image: url(../images/newmine_bnr01.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    text-align: center;
    transition:all 0.5s ease-out;
}
.outro a:hover{
    background-size: 105% auto;
}
.outro a img{
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2%;
}
.outro a span{
    color: #f7f7f7;
    border:1px solid #f7f7f7;
    vertical-align: bottom;
    padding: 0 4% 1.0%;
    font-size: 1.125rem;
    line-height: 1;
    transition:all 0.5s ease-out;
}
.outro a span::after{
    content: "";
    display: inline-block;
    background-image: url(../images/arrow.svg);
    width: 10%;
    padding-top: 4%;
    background-repeat: no-repeat;
    background-position: center right;
    line-height: 1;
    margin-left: 3%;
}
.outro a:hover span{
    background-color: #121e38;
    border:1px solid #121e38;
}

.fixed{
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 1;
    top: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    transition:all 0.5s ease-out;
}
.fixed .tocart,
.fixed .logo{
    width: calc((100% - 700px) / 2);
    min-width: 250px;
}
.fixed .fctn{
    max-width: 65%;
    margin-left: auto;
    margin-right: auto;
}
.fixed .tocart .fctn{
    padding-top: 20%;
}
.fixed .tocart .fctn .tit{
    margin-bottom: 30%;
}
.fixed .tocart .fctn .tit img{
    display: block;
    margin-bottom: 4%;
    width: 100%;
}
.fixed .tocart .fctn .tit p{
    color: #f7f7f7;
    text-align: center;
    font-size: 1.125vw;
}
.fixed .tocart .fctn a{
    display: block;
    border: 1px solid #f7f7f7;
    text-align: center;
    text-decoration: none;
    color: #f7f7f7;
    font-size: calc(((100vw - 700px) / 2) * 0.06);
    padding: 5% 0 5% 10%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../images/shop_icon.svg);
    background-repeat: no-repeat;
    background-position: left 12% center;
    background-size: 12% auto;
    background-color: rgba(18, 30, 56, 0.3);
    transition:all 0.5s ease-out;
}
.fixed .tocart .fctn a:hover{
    background-color: #f7f7f7;
    color: #8a4261;
    background-image: url(../images/shop_icon2.svg);
}
.fixed .logo{
    position: relative;
}
.fixed .logo .fctn{
    position: absolute;
    bottom: 2%;
    max-width: 90%;
    width: 100%;
    padding-left: 35%;
}

@media (min-width: 1180px) {
    header{
        display: none;
    }
}
@media (max-width: 1179px) {
    .fixed{
        opacity: 0.0;
    }
    .fixed a{
        pointer-events: none;
    }
}
@media (max-width: 699px) {
    html{
        font-size: 2.3vw;
    }
    .wrapper{
        width:100%;
        overflow: hidden;
    }
    .voice ul {
        height: 112vw;
    }

    .voice ul li:nth-child(2) p {
        margin-left: 0;
    }
    .voice ul li:nth-child(1) p::before,
    .voice ul li:nth-child(3) p::before {
      border-left: 4vw solid transparent;
      border-bottom: 4vw solid #000;
      bottom: 10vw;
      left: -4vw;
    }
    .voice ul li:nth-child(1) p::after,
    .voice ul li:nth-child(3) p::after {
      border-left: 4vw solid transparent;
      border-bottom: 4vw solid #f7f7f7;
      bottom: calc(10vw - 1px);
      left: -4vw;
    }
    .voice ul li:nth-child(2) p::before {
      border-right: 4vw solid transparent;
      border-top: 4vw solid #000;
      bottom: 10vw;
      right: -4vw;
    }
    .voice ul li:nth-child(2) p::after {
      border-right: 4vw solid transparent;
      border-top: 4vw solid #f7f7f7;
      bottom: calc(10vw + 1px);
      right: -4vw;
    }
    footer .flogo img {
        height: 5.5vw;
    }


}