@charset "utf-8";/* ------------------------
    カラム分け
------------------------ */
.grid-cmn {
  -js-display: flex;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.grid-cmn.ai-center {
  align-items: center;
}

.grid-cmn.jc-center {
  justify-content: center;
}

.grid-cmn .col {
  box-sizing: border-box;
  position: relative;
}

.grid-cmn .col.col-l-2 {
  width: 16.6666%;
}

.grid-cmn .col.col-l-20p {
  width: 20%;
}

.grid-cmn .col.col-l-3 {
  width: 25%;
}

.grid-cmn .col.col-l-4 {
  width: 33.33333%;
}

.grid-cmn .col.col-l-5 {
  width: 41.66666%;
}

.grid-cmn .col.col-l-6 {
  width: 50%;
}

.grid-cmn .col.col-l-7 {
  width: 58.33333%;
}

.grid-cmn .col.col-l-8 {
  width: 66.66666%;
}

.grid-cmn .col.col-l-9 {
  width: 75%;
}

.grid-cmn .col.col-l-10 {
  width: 83.33333%;
}

.grid-cmn .col.col-l-12 {
  width: 100%;
}

.grid-cmn .order-l-1 {
  order: 1;
}

.grid-cmn .order-l-2 {
  order: 2;
}

.grid-cmn .order-l-3 {
  order: 3;
}

.grid-cmn .order-l-4 {
  order: 4;
}

.grid-cmn .order-l-5 {
  order: 5;
}

.grid-cmn .order-l-6 {
  order: 6;
}

@media screen and (max-width: 1024px) {
  .grid-cmn .col.col-m-2 {
    width: 16.6666%;
  }
  .grid-cmn .col.col-m-20p {
    width: 20%;
  }
  .grid-cmn .col.col-m-3 {
    width: 25%;
  }
  .grid-cmn .col.col-m-4 {
    width: 33.33333%;
  }
  .grid-cmn .col.col-m-5 {
    width: 41.66666%;
  }
  .grid-cmn .col.col-m-6 {
    width: 50%;
  }
  .grid-cmn .col.col-m-7 {
    width: 58.33333%;
  }
  .grid-cmn .col.col-m-8 {
    width: 66.66666%;
  }
  .grid-cmn .col.col-m-9 {
    width: 75%;
  }
  .grid-cmn .col.col-m-10 {
    width: 83.33333%;
  }
  .grid-cmn .col.col-m-12 {
    width: 100%;
  }
  .grid-cmn .order-m-1 {
    order: 1;
  }
  .grid-cmn .order-m-2 {
    order: 2;
  }
  .grid-cmn .order-m-3 {
    order: 3;
  }
  .grid-cmn .order-m-4 {
    order: 4;
  }
  .grid-cmn .order-m-5 {
    order: 5;
  }
  .grid-cmn .order-m-6 {
    order: 6;
  }
}
@media only screen and (max-width: 768px) {
  .grid-cmn .col.col-s-12 {
    width: 100%;
  }
  .grid-cmn .col.col-s-10 {
    width: 83.33333%;
  }
  .grid-cmn .col.col-s-9 {
    width: 75%;
  }
  .grid-cmn .col.col-s-8 {
    width: 66.66666%;
  }
  .grid-cmn .col.col-s-7 {
    width: 58.33333%;
  }
  .grid-cmn .col.col-s-6 {
    width: 50%;
  }
  .grid-cmn .col.col-s-5 {
    width: 41.66666%;
  }
  .grid-cmn .col.col-s-4 {
    width: 33.33333%;
  }
  .grid-cmn .col.col-s-3 {
    width: 25%;
  }
  .grid-cmn .col.col-s-20p {
    width: 20%;
  }
  .grid-cmn .col.col-s-2 {
    width: 16.6666%;
  }
  .grid-cmn .order-s-1 {
    order: 1;
  }
  .grid-cmn .order-s-2 {
    order: 2;
  }
  .grid-cmn .order-s-3 {
    order: 3;
  }
  .grid-cmn .order-s-4 {
    order: 4;
  }
  .grid-cmn .order-s-5 {
    order: 5;
  }
  .grid-cmn .order-s-6 {
    order: 6;
  }
}
html {
  scroll-behavior: smooth;
}


.al-center {
  text-align: center;
}

.al-left {
  text-align: left;
}

.al-right {
  text-align: right;
}

.al-mg-left {
  margin-right: auto;
}

.al-mg-right {
  margin-left: auto;
}

.fv-anime {
  display: block;
  position: fixed;
  top: 0px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  height: 120lvh;
  background-color: #BF5D20;
  z-index: 998;
  transition: background-color 0.5s ease-in-out;
}
.fv-anime.bg-fade-out {
  background-color: transparent;
}
.fv-anime .fv-anime__title {
  position: absolute;
  padding: 0 2px;
  /*top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/
  width: 100%;
  max-width: 600px;
  height: 100svh;
  /*&::before {
      display: block;
      position: absolute;
      width: 100vw;
      height: 100svh;
      content: '';
      background-color: #BF5D20;
      z-index: 999;
      opacity: 0.4;
      animation: fadeOutRight 4s forwards;
  }*/
}
.fv-anime .fv-anime__title img {
  width: 100%;
}
.fv-anime .kv-tit-list {
  position: absolute;
  width: 100%;
  max-width: 390px;
  left: 50%;
  transform: translate(-50%, 10svh);
  height: 100svh;
}
.fv-anime .kv-tit-list .kv-tit-list01 {
  position: absolute;
  display: block;
  width: calc(83.8% - (390px - 100vw));
  right: 30px;
  top: calc(33.5% + 390px - 100vw);
}
.fv-anime .kv-tit-list .kv-tit-list02 {
  position: absolute;
  display: block;
  width: calc(69.2% - (390px - 100vw));
  left: 56px;
  top: calc(72.5% + 390px - 100vw);
}
.fv-anime .kv-tit-list .kv-tit-list03 {
  position: absolute;
  display: block;
  width: calc(41.5% - (390px - 100vw));
  right: 5px;
  top: calc(23.5% + 390px - 100vw);
}
.fv-anime .kv-tit-list .kv-tit-list04 {
  position: absolute;
  display: block;
  width: calc(66.4% - (390px - 100vw));
  left: 20px;
  top: calc(67.5% + 390px - 100vw);
}
.fv-anime .kv-tit-list .kv-tit-list05 {
  position: absolute;
  display: block;
  width: calc(83% - (390px - 100vw));
  left: 5px;
  top: calc(27.5% + 390px - 100vw);
}
.fv-anime .kv-tit-list .kv-tit-list06 {
  position: absolute;
  display: block;
  width: calc(87.7% - (390px - 100vw));
  left: 10px;
  top: calc(8% + 390px - 100vw);
}
.fv-anime .kv-tit-list .kv-tit-list07 {
  position: absolute;
  display: block;
  width: calc(47.4% - (390px - 100vw));
  right: 30px;
  top: calc(38.5% + 390px - 99vw);
}
.fv-anime .kv-tit-list .kv-tit-list08 {
  position: absolute;
  display: block;
  width: calc(80.2% - (390px - 100vw));
  right: 20px;
  top: calc(62.5% + 390px - 100vw);
}
.fv-anime .kv-tit-list .hidden {
  display: none;
}
.fv-anime .kv-tit-list .view {
  display: block;
}

@media only screen and (min-width: 500px) {
  .fv-anime .kv-tit-list .kv-tit-list01 {
    width: 83.8%;
    top: 33.5%;
  }
  .fv-anime .kv-tit-list .kv-tit-list02 {
    width: 69.2%;
    top: 72.5%;
  }
  .fv-anime .kv-tit-list .kv-tit-list03 {
    width: 41.5%;
    top: 23.5%;
  }
  .fv-anime .kv-tit-list .kv-tit-list04 {
    width: 66.4%;
    top: 67.5%;
  }
  .fv-anime .kv-tit-list .kv-tit-list05 {
    width: 83%;
    top: 27.5%;
  }
  .fv-anime .kv-tit-list .kv-tit-list06 {
    width: 87.7%;
    top: 8%;
  }
  .fv-anime .kv-tit-list .kv-tit-list07 {
    width: 47.4%;
    top: 38.5%;
  }
  .fv-anime .kv-tit-list .kv-tit-list08 {
    width: 80.2%;
    top: 62.5%;
  }
}

@media only screen and (max-width: 375px) {
  .fv-anime .kv-tit-list .kv-tit-list02 {
    top: calc(72.5% + 390px - 98vw);
  }
  .fv-anime .kv-tit-list .kv-tit-list04 {
    top: calc(67.5% + 390px - 99vw);
  }
}
@keyframes fadeOutRight {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}
.content {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.content img {
  width: 100%;
  vertical-align: top;
}
.content .fv-title {
  position: absolute;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 10px 2px;
  z-index: 900;
  box-sizing: border-box;
}
.content .fv-title img {
  width: 100%;
}
.content .fv img {
  width: 100%;
  vertical-align: top;
}
.content .fv .photo {
  opacity: 0;
  transition: opacity 0.8s ease-in;
}
.content .fv .fade-in {
  opacity: 1;
}
.content .main-title {
  text-align: center;
  box-sizing: border-box;
  margin: 70px 30px;
}
.content p {
 font-family: "Noto Sans JP", "Cinzel", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  color: #000;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.2px;
  font-weight: 300;
}

.content-mg {
  margin: 40px 30px;
}

.bnr-list {
  margin: 80px 0 0 0;
}
.bnr-list li {
  margin: 0 0 17px 0;
}

.model {
 font-family: "Noto Sans JP", "Cinzel", sans-serif;
  font-optical-sizing: auto;
  margin: 110px 0px 0 0px;
}
.model .content-title {
  box-sizing: border-box;
  padding: 0 26%;
}
.model .content-title-sub {
  margin: 38px 0 38px 0;
  box-sizing: border-box;
  padding: 0 12%;
}
.model p {

  margin: 30px 0 40px 0;
  color: #000;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 1px;
  font-weight: 300;
}
.model .buy {
  box-sizing: border-box;
  margin: 0 30px 0 30px;
}
.model .buy .buy__info {
  margin: 0 0 10px 0;
  letter-spacing: 1.3px;
}
.model .buy .buy__info .buy__name,
.model .buy .buy__info .buy__price {
  display: inline-block;
  font-weight: 400;
  font-size: 12px;
  margin-bottom: 2px;
}
.model .buy .buy__info .buy__name {
  padding: 0 5px 0 0;
}
.model .buy .buy__info .buy__bland {
  display: inline-block;
  padding: 0 5px;
  font-size: 8px;
  margin-bottom: 2px;
  font-weight: 200;
}
.model .buy .buy__info .btn-buy {
  display: inline-block;
  background-color: #121212;
  color: #fff;
  padding: 4px 20px;
  margin-bottom: 2px;
  font-size: 10px;
  font-weight: 400;
  text-decoration: none;
  border: 1px solid #000;
}
.model .buy .buy__info .btn-buy:hover {
  color: #000;
  background-color: #fff;
}
.model .buy small {
  display: block;
  text-align: left;
  font-size: 10px;
  margin: 15px auto 0 auto;
  font-weight: 300;
  letter-spacing: 1.6px;
}
.model .model__sub02 {
  margin-top: 85px;
}
.model .profile {
  box-sizing: border-box;
  margin: 60px 30px 0 30px;
  padding: 35px 23px;
  border: 1px solid #CFCFCF;
}
.model .profile .profile__name {
  display: inline-block;
  margin: 0 5px 0 0;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
}
.model .profile .profile__name-en {
  display: inline-block;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 1px;
}
.model .profile .profile__st {
  display: block;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 1px;
  line-height: 1.8;
  margin: 15px 0 30px 0;
}
.model .profile .profile__info {
  margin: 0;
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: 0.4px;
  font-weight: 300;
}
.model .profile a {
  text-decoration: none;
  color: #000;
}
.model .profile a:hover {
  text-decoration: underline;
}

.c01 .position-wrap {
  display: block;
  position: relative;
  padding-bottom: 220%;
}
.c01 .position-wrap .photo-sub01 {
  position: absolute;
}
.c01 .position-wrap .photo-sub01 .sub01 {
  margin: 0 30px 0 30px;
}
.c01 .position-wrap .photo-sub01 .sub02 {
  width: 59.4%;
  position: absolute;
  left: 0;
  top: 89%;
}
.c01 .position-wrap .photo-sub01 .sub03 {
  width: 50%;
  position: absolute;
  right: 0;
  top: 130%;
}
.c01 .position-wrap .photo-sub01 .sub04 {
  width: 37.6%;
  position: absolute;
  left: 30px;
  top: 185%;
}
.c01 .sub-pattern .position-wrap {
  padding-bottom: 125%;
}
.c01 .sub-pattern .position-wrap .photo-sub02 .sub02 {
  width: 40.5%;
  position: absolute;
  left: 0;
  top: -14%;
}
.c01 .sub-pattern .position-wrap .photo-sub02 .sub03 {
  width: 50%;
  position: absolute;
  right: 0;
  top: 12%;
}
.c01 .sub-pattern .position-wrap .photo-sub02 .sub04 {
  width: 37.6%;
  position: absolute;
  left: 30px;
  top: 50%;
}

.c02 .position-wrap {
  display: block;
}
.c02 .position-wrap .photo-sub01 {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: 13.5% 46.1% 40.5%;
  gap: 2px;
}
.c02 .position-wrap .photo-sub01 .sub01 {
  grid-row: 1;
  grid-column: 2;
}
.c02 .position-wrap .photo-sub01 .sub02 {
  grid-row: 1;
  grid-column: 3;
}
.c02 .position-wrap .photo-sub01 .sub03 {
  grid-row: 2;
  grid-column: 2;
}
.c02 .position-wrap .photo-sub01 .sub04 {
  grid-row: 2;
  grid-column: 3;
}
.c02 .position-wrap .sub05 {
  width: 50%;
  margin: 28px auto 40px auto;
}
.c02 .sub-pattern {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 41.5% 46.1%;
  gap: 2px;
}
.c02 .sub-pattern .pattern01 {
  grid-row: 1/3;
  grid-column: 1/2;
}
.c02 .sub-pattern .pattern02 {
  grid-row: 1/2;
  grid-column: 2/3;
}
.c02 .sub-pattern .pattern03 {
  grid-row: 2/3;
  grid-column: 2/3;
}

.c03 .position-wrap {
  display: block;
  position: relative;
  padding-bottom: 126%;
}
.c03 .position-wrap .photo-sub01 .sub01 {
  width: 36.1%;
  position: absolute;
  left: 30px;
  top: 6%;
}
.c03 .position-wrap .photo-sub01 .sub02 {
  width: 46.9%;
  position: absolute;
  right: 12px;
  top: 1%;
}
.c03 .position-wrap .photo-sub01 .sub03 {
  width: 36.1%;
  position: absolute;
  left: 30px;
  top: 44%;
}
.c03 .sub-pattern .position-wrap {
  padding-bottom: 146%;
}
.c03 .sub-pattern .position-wrap .photo-sub02 .sub01 {
  width: 50%;
  position: absolute;
  left: 0;
  top: 17%;
}
.c03 .sub-pattern .position-wrap .photo-sub02 .sub02 {
  width: 36.6%;
  position: absolute;
  right: 30px;
  top: 0%;
}
.c03 .sub-pattern .position-wrap .photo-sub02 .sub03 {
  width: 36.6%;
  position: absolute;
  right: 30px;
  top: 32.5%;
}
.c03 .sub-pattern .position-wrap .photo-sub02 .sub04 {
  width: 36.6%;
  position: absolute;
  right: 30px;
  top: 55%;
}

.c04 .position-wrap {
  display: block;
  position: relative;
  padding-bottom: 182%;
}
.c04 .position-wrap .photo-sub01 .sub01 {
  width: 76.4%;
  position: absolute;
  left: 0;
  top: 1%;
}
.c04 .position-wrap .photo-sub01 .sub02 {
  width: 36.6%;
  position: absolute;
  left: 0;
  top: 46%;
}
.c04 .position-wrap .photo-sub01 .sub03 {
  width: 36.6%;
  position: absolute;
  left: 40%;
  top: 46%;
}
.c04 .position-wrap .photo-sub01 .sub04 {
  width: 41.7%;
  position: absolute;
  right: 30px;
  top: 63.5%;
}
.c04 .sub-pattern .position-wrap {
  padding-bottom: 182%;
}
.c04 .sub-pattern .position-wrap .photo-sub02 .sub01 {
  width: 60.5%;
  position: absolute;
  right: 30px;
  top: 1%;
}
.c04 .sub-pattern .position-wrap .photo-sub02 .sub02 {
  width: 36.6%;
  position: absolute;
  left: 30px;
  top: 46%;
}
.c04 .sub-pattern .position-wrap .photo-sub02 .sub03 {
  width: 36.6%;
  position: absolute;
  left: 47%;
  top: 46%;
}
.c04 .sub-pattern .position-wrap .photo-sub02 .sub04 {
  width: 41.7%;
  position: absolute;
  right: 0px;
  top: 63.5%;
}

.c05 .position-wrap {
  display: block;
  position: relative;
  padding-bottom: 220%;
}
.c05 .position-wrap .photo-sub01 {
  position: absolute;
}
.c05 .position-wrap .photo-sub01 .sub01 {
  margin: 0 30px 0 30px;
}
.c05 .position-wrap .photo-sub01 .sub02 {
  width: 59.4%;
  position: absolute;
  left: 0;
  top: 89%;
}
.c05 .position-wrap .photo-sub01 .sub03 {
  width: 50%;
  position: absolute;
  right: 0;
  top: 130%;
}
.c05 .position-wrap .photo-sub01 .sub04 {
  width: 37.6%;
  position: absolute;
  left: 30px;
  top: 185%;
}
.c05 .sub-pattern .position-wrap {
  padding-bottom: 125%;
}
.c05 .sub-pattern .position-wrap .photo-sub02 .sub02 {
  width: 40.5%;
  position: absolute;
  left: 0;
  top: 2%;
}
.c05 .sub-pattern .position-wrap .photo-sub02 .sub03 {
  width: 50%;
  position: absolute;
  right: 0;
  top: 12%;
}
.c05 .sub-pattern .position-wrap .photo-sub02 .sub04 {
  width: 37.6%;
  position: absolute;
  left: 30px;
  top: 50%;
}

.c06 .position-wrap {
  display: block;
  position: relative;
  padding-bottom: 126%;
}
.c06 .position-wrap .photo-sub01 .sub01 {
  width: 36.1%;
  position: absolute;
  left: 30px;
  top: 6%;
}
.c06 .position-wrap .photo-sub01 .sub02 {
  width: 46.9%;
  position: absolute;
  right: 12px;
  top: 1%;
}
.c06 .position-wrap .photo-sub01 .sub03 {
  width: 36.1%;
  position: absolute;
  left: 30px;
  top: 44%;
}
.c06 .sub-pattern .position-wrap {
  padding-bottom: 148%;
}
.c06 .sub-pattern .position-wrap .photo-sub02 .sub01 {
  width: 50%;
  position: absolute;
  left: 0;
  top: 27%;
}
.c06 .sub-pattern .position-wrap .photo-sub02 .sub02 {
  width: 36.6%;
  position: absolute;
  right: 30px;
  top: 0%;
}
.c06 .sub-pattern .position-wrap .photo-sub02 .sub03 {
  width: 36.6%;
  position: absolute;
  right: 30px;
  top: 32%;
}
.c06 .sub-pattern .position-wrap .photo-sub02 .sub04 {
  width: 36.6%;
  position: absolute;
  right: 30px;
  top: 54.5%;
}

.mv {
  text-align: center;
  margin: 100px auto 100px auto;
}
.mv .mv__title {
  text-align: center;
  font-size: 12px;
  font-weight: 400;
}
.mv .mv__img {
  display: block;
  width: 41.2%;
  margin: 30px auto 0px auto;
}
.mv .mv__img img {
  width: 100%;
}

.staff {
  font-family: "Cinzel";
  font-size: 10px;
  line-height: 1.8;
  font-weight: 400;
  margin: 70px 30px;
}
.staff .staff__title {
  font-weight: 400;
  margin: 0 0 15px 0;
}

/* 初期状態 */
.fade-in-content {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 0.8s ease-out;
}

/* フェードイン時 */
.fade-in-content.visible {
  opacity: 1;
  transform: translateY(0);
}

.only-pc {
  display: block;
}

.only-sp {
  display: none;
}

.pc-sp {
  display: flex;
}
.pc-sp .pc-left {
  width: 40%;
}
.pc-sp .pc-left .mv__pc {
  position: sticky;
  top: 0;
   left: 0;
   width: 100%;
}
.pc-sp .pc-left .mv__pc .responsive-video {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pc-sp .pc-right {
  width: 60%;
}

@media only screen and (max-width: 768px) {
  .content {
    overflow: hidden;
  }
  .pc-sp {
    display: block;
  }
  .pc-sp .pc-left {
    display: none;
  }
  .pc-sp .pc-right {
    width: 100%;
  }
  .only-pc {
    display: none;
  }
  .only-sp {
    display: block;
  }
  .fv-anime {
    max-width: 768px;
  }
  .fv-anime .fv-anime__title {
    max-width: 768px;
  }
  .content {
    max-width: 768px;
  }
  .content .fv-title {
    max-width: 768px;
  }
}