@charset "UTF-8";

.pane-contents,
.edit-format {
  background: #2F2725;
}

/* .pane-contents--container {
    width: 1200px;
} */
/* .pane-main {
    
} */

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


/* ==================================================
Page Head Custom
================================================== */
#page-head {}

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

  #page-head {}

}

/* ==================================================
Page Body
================================================== */


#page-body {

  max-width: 1200px;
  position: relative;
  overflow: hidden;
}

.none {
  display: none;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.topTitle {
  margin: 0 auto;
  padding-top: 50px;
  width: 60%;
}



.unna-regular {
  font-family: "Unna", serif;
  font-weight: 400;
  font-style: normal;
  color: #fff;
}

.logo-cont {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Logo styles */
.logo {
  width: 30%;
  color: #fff;
  opacity: 0;
}

.logo1 {
  transform: translateX(-100px);
  animation: slideFromLeft 1s ease forwards;
}

.logo2 {
  transform: translateX(100px);
  animation: slideFromRight 1s ease forwards;
}

/* Divider line */
.divider {
  width: 1px;
  height: 0;
  background: white;
  animation: dropLine 0.8s ease forwards;
  animation-delay: 0.7s;
}

/* Animations */
@keyframes slideFromLeft {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideFromRight {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes dropLine {
  to {
    height: 70px;
  }
}



.Intro {
  font-size: 40px;
}

.desc {
  font-size: 15px;
  color: #fff;
}

.Glp1 {
  max-width: 900px;
  width:100%;
  margin: 0 auto;

  .flex-item1 {
    width: 42%;
  }

  .flex-item2 {
    width: 42%;
    margin-top: 145px;
  }

}

.itemcredit {
  font-size: 12px;
  color: #fff;
  text-align: left;
  margin-top: 100px;
}

.itemcredit2 {
  font-size: 12px;
  color: #fff;
  text-align: left;
  margin-top: 50px;
}

.creditlink {
  position: relative;
  padding: 0 16px 0 0;
}

.creditlink a:link,
.creditlink a:visited {
  color: #fff;
}


.creditlink::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left: 8px solid #fff;
}

.itemtop {
  position: absolute;
}

.Glp2 {
  position: relative;
  padding-top: 120px;
}

.full {
  max-width:1200px;
  width:100%;
}


.overimg {
  position: absolute;
  top: 18%;
  left: 58%;
  transform: translate(-50%, -50%);
  width: 32%;
}


.overtext {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: left;
  top: 70%;
  left: 35%;
}

.overtext2 {
position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  top: 50%;
  left: 50%;
  white-space: nowrap;
}

.Group3 {
  position: relative;
  max-width: 900px;
  width:100%;
  margin: 0 auto;
}

.Glp4 {
  gap: 40px;
  margin: 0 auto;
  max-width: 900px;
  width: 100%;

  .flex-item1 {
    width: 50%;
  }

  .flex-item2 {
    width: 50%;
    margin-top: 145px;
  }

}

/* SLIDER */
.slider-container {
  position: absolute;
  max-width: 500px;
  width:100%;
  margin: 0 auto;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.caslider {
  margin-bottom: 5px;
}

.slick-slide img {
  width: 100%;
  display: block;
}

.title-box {
  font-size: 40px;
  margin-top: 30px;
  letter-spacing: 0.1em;
}

.slick-slide {
  height: auto;
}






.btn_check {
  position:relative;
  border: 1px solid #fff;
  width: 280px;
  margin: 0 auto;
}

.btn_check a:link,
.btn_check a:visited {
  color: #fff;
}

.btn_check a {
display:block;
padding:10px 0px;
font-size:14px;
color:#fff;
text-align:center;
text-decoration:none;
}

.btn_check:hover {
  transform: scale(1.1, 1.1);
  transition: 0.3s;
}





/* タブレット用 */
@media screen and (max-width: 768px) {

  .overimg {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38%;

    .style-title {
      text-align: center;
      color: #fff;
      font-size: 22px;
      line-height: 0.8em;
    }

    .item-detail {
      font-size: 9px;
      color: #fff;
      text-align: center;
      line-height: 0.8em;
    }

  }


}

/* SP用 */
@media screen and (max-width: 430px) {

.Intro {
  font-size: 25px;
} 

.desc {
  font-size: 11px;
  color: #fff;
}

.Glp1 {
    gap: 25px;
    margin: 0 auto;
    margin-top: 0px;
    width: 88%;
  
  .flex-item1 {
    width: 50%;
  }

  .flex-item2 {
    width: 50%;
    margin-top: 50px;
  }
}

.itemcredit {
font-size: 9px;
    color: #fff;
    text-align: left;
    letter-spacing: 0.1em!important;
    margin-top: 60px;
}
  .itemcredit2 {
    font-size: 9px;
    color: #fff;
    text-align: left;
    letter-spacing: 0.1em !important;
    margin-top: 10px;
  }
  .overimg {
    position: absolute;
    top: 1%;
    left: 68%;
    transform: translate(-50%, -50%);
    width: 35%;
  }
.overtext {
position: absolute;
    transform: translate(-50%, -50%);
    text-align: left;
    top: 80%;
    left: 50%;
    font-size: 10px;
    white-space: nowrap;
}
.overtext2 {
    position: absolute;
    text-align: center;
    padding: 20px;
    font-size: 11px;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}
.Glp2 {
  padding-top: 0px;
}
.Glp4 {
  gap: 15px;
  margin:0 auto;
  width:88%;
}

/* SLIDER */
.slider-container {
width: 69%;
max-width: none;
}

.slick-list {
  overflow:hidden!important;
}

.title-box {
  font-size: 15px;
  margin-top: 8px;
}

  .set-image {
    padding-left: 10px;
  }

  .item-text {
    padding: 16px 0 0 32px;

    .item-credit {
      font-size: 10px;
    }

    .item-price {
      font-size: 8px;
    }
  }

  .btn_check {
    width: 200px;
  }



}



/* Fade in */
.inView {
  opacity: 0;
}

.imgFade {
  opacity: 0;
}

.imgAnim {
  -webkit-animation-name: imgAnim;
  animation-name: imgAnim;
  -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes imgAnim {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: translate(0);
  }
}

.imgFade.fadeT {
  opacity: 0;
  transform: translateY(50px);
  position: relative;
  z-index: 5;
}

.imgAnim.fadeT {
  -webkit-animation-name: imgAnim;
  animation-name: imgAnim;
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.imgFade.fadeR {
  opacity: 0;
  transform: translateX(50px);
  position: relative;
  z-index: 5;
}

.imgFade.fadeL {
  opacity: 0;
  transform: translateX(-50px);
  position: relative;
  z-index: 5;
}

.imgAnim.fadeR {
  -webkit-animation-name: imgAnim;
  animation-name: imgAnim;
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.imgAnim.fadeL {
  -webkit-animation-name: imgAnim;
  animation-name: imgAnim;
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}