@charset "utf-8";
/*@charset "UTF-8";     コメント */
/*css初期設定 start*/
html {
  font-size: 62.5%; /*文字標準*/
}
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none; /*リンクデコレーションリセット*/
}
/*大きさの計算*/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  width: 100%;
  margin: 0 auto;
  /*文字詰め*/
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
  /*スマホ横向き時のフォントサイズリセット*/
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow: visible;
  font-size: clamp(14px, 3.73vw, 23px);
  line-height: 1.7;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-style: normal;
}
p {
  font-size: clamp(14px, 3.73vw, 21px);
  line-height: 1.4;
}
.eng {
  font-family: 'bebas-neue-pro-semiexpanded', sans-serif;
  font-weight: 400;
  font-style: normal;
}
/*iOSフォーム要素の初期化*/
input,
button,
textarea,
select {
  -webkit-appearance: none;
  appearance: none;
}
/*画像の調整*/
img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

@media (max-width: 1024px) {
  .sp {
    display: block !important;
  }
  .pc {
    display: none !important;
  }
}
@media only screen and (min-width: 1025px) {
  .sp {
    display: none !important;
  }
  .pc {
    display: block !important;
  }
  .br-sp {
    display: none;
  }
}

#copyright {
  font-size: 1.2rem;
}
#main-footer a {
  font-size: 1.2rem;
}
/*css初期設定 end*/
/*main start*/
body {
  background-color: #ffffff;
  color: #2d2d2d;
}
.mainWrap {
  display: block;
  width: 100%;
  margin: 0 auto;
}
.heroSec {
  width: 100%;
  margin: 0 auto;
  background-image: url('../images/bg_tecsture.png');
}
.heroSec .heroTitleBox {
  padding: 33% 4% 6.5%;
}
.parallax {
  width: 100%;
  height: 50vh;
}
.parallax01::before {
  background-image: url('../images/heroImg_sp.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;
}
.heroSec h1 {
  font-size: clamp(103px, 27.46vw, 249px);
  font-weight: 900;
  line-height: 0.8;
  padding-bottom: 1%;
}
.heroSec h2 {
  font-size: clamp(17px, 4.53vw, 41px);
  font-weight: 900;
  line-height: 1;
}
.heroSec .heroImgBox {
  width: 100%;
}
.leadSec {
  width: 100%;
  margin: 0 auto;
  background-color: #000;
  padding: 20% 4%;
  color: #6d6b6b;
}
.leadSec h3 {
  color: #6d6b6b;
  font-size: clamp(45px, 12vw, 92px);
  font-weight: 900;
  line-height: 0.8;
}
.leadSec h3 span.red {
  color: #e63e3d;
}
.leadSec h3 span.white {
  color: #fff;
}
.leadSec p {
  color: #6d6b6b;
  font-size: clamp(16px, 4.26vw, 23px);
  font-weight: 600;
  line-height: 1.6;
  padding: 3% 0;
}
.leadSec .cvSec {
  padding-top: 5%;
}
.itemOutWrap {
  width: 100%;
  margin: 0 auto;
  padding-top: 5%;
  background-image: url('../images/bg_tecsture.png');
}
.itemOutWrap2 {
  width: 100%;
  margin: 0 auto;
  padding-top: 5%;
  background-color: #fff;
  display: flex;
  flex-direction: column-reverse;
}
.cvSec {
  display: block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
a.cvBtn {
  display: inline-block;
  width: 74.66%;
  max-width: 320px;
  border: 1px solid #fff;
  color: #fff;
  font-size: clamp(20px, 5.33vw, 25px);
  text-align: center;
  font-weight: 400;
}
.itemTitleSec {
  width: 100%;
  padding: 13.86% 4% 0;
  line-height: 1;
}
.itemTitleSec h4 {
  font-size: clamp(30px, 8vw, 48px);
  font-weight: 800;
  line-height: 1.2;
}
.itemTitleSec h3 {
  font-size: clamp(65px, 17.33vw, 125px);
  font-weight: 800;
  line-height: 0.8;
  margin: 0;
}
.itemImgSec {
  width: 96%;
  height: 0;
  padding-top: 120%;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}
.artistBox {
  padding-top: 2%;
}
.itemImgSec .itemImg01 {
  width: 100%;
  top: 0;
  right: 0;
  position: absolute;
}
.itemImgSec .swiper {
  width: 100%;
  top: 0;
  right: 0;
  position: absolute;
}

.itemTxtSec {
  width: 100%;
  padding: 0 4%;
  margin-bottom: 15%;
}

.swiper02 {
  width: 100%;
  overflow: hidden;
  margin: 3% auto;
}
.itemDescSec {
  padding: 8% 0;
}
.itemDescSec p {
  font-size: clamp(15px, 4vw, 20px);
  line-height: 1.7;
  font-weight: 500;
}
.itemDescSec.credit p {
  text-align: center;
  font-size: clamp(14px, 3.73vw, 16px);
  line-height: 1.3;
}
.itemDescSec.credit .bigLetter {
  font-size: clamp(20px, 5.33vw, 16px);
  font-weight: 800;
  line-height: 1;
}
.itemDescSec img {
  padding-top: 4%;
}
.itemDescSec .noveltyNote {
  font-size: 13px;
}

hr.hr-line {
  width: 50%;
  border-bottom: 1px solid #000;
  margin: 5% auto;
}
.buyBtnSec {
  display: block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
a.buyBtn {
  display: inline-block;
  width: 74.66%;
  max-width: 320px;
  border: 1px solid #000;
  color: #000;
  font-size: clamp(20px, 5.33vw, 25px);
  text-align: center;
  font-weight: 800;
}
.detailSec {
  margin-bottom: 15%;
}
.detailSec > img {
  display: block;
  width: 90%;
  margin: 8% auto 1%;
}
.detailSec h4 {
  font-size: clamp(20px, 5.33vw, 25px);
  line-height: 1.2;
  font-weight: 600;
  text-align: center;
  margin-bottom: 4%;
}
.detailBox {
  width: 100%;
  height: 0;
  position: relative;
}
.detailBox p {
  font-size: clamp(13px, 3.46vw, 16px);
}
.detailBox.detBox01 {
  padding-top: 374.53%; /*1307*/
}
.detailBox.detBox01 .img01 {
  position: absolute;
  width: 86.13%;
  top: 0;
  left: 6.93%;
}
.detailBox.detBox01 .img02 {
  position: absolute;
  width: 73.06%;
  top: 37.05%;
  right: 0;
}
.detailBox.detBox01 .img03 {
  position: absolute;
  width: 57.06%;
  top: 53.1%;
  left: 7.2%;
}
.detailBox.detBox01 .img04 {
  position: absolute;
  width: 45%;
  top: 71.1%;
  left: 54.2%;
  border-radius: 50%;
}
.detailBox.detBox01 .img05 {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}
.detailBox.detBox01 .txt01 {
  position: absolute;
  top: 51%;
  right: 0;
}
.detailBox.detBox01 .txt02 {
  position: absolute;
  top: 76%;
  left: 7%;
}
.detailBox.detBox02 {
  padding-top: 376.53%; /*1307*/
}
.detailBox.detBox02 .img01 {
  position: absolute;
  width: 86.13%;
  top: 0;
  left: 6.93%;
}
.detailBox.detBox02 .img02 {
  position: absolute;
  width: 73.06%;
  top: 36.05%;
  right: 0;
}
.detailBox.detBox02 .img03 {
  position: absolute;
  width: 49.06%;
  top: 36.1%;
  left: 7%;
}
.detailBox.detBox02 .img04 {
  position: absolute;
  width: 55%;
  top: 66.1%;
  left: 7%;
}
.detailBox.detBox02 .img05 {
  position: absolute;
  width: 49.06%;
  top: 51%;
  right: 7%;
}
.detailBox.detBox02 .img06 {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}
.detailBox.detBox02 .txt01 {
  position: absolute;
  top: 49.5%;
  left: 7%;
}
.detailBox.detBox02 .txt02 {
  position: absolute;
  top: 64%;
  right: 7%;
}
.detailBox.detBox02 .txt03 {
  position: absolute;
  top: 81%;
  left: 63%;
}
.itemListSec {
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  background-color: #ebe8e1;
  padding: 5% 0 9%;
}
.itemListSec > img {
  display: block;
  width: 90%;
  margin: 8% auto 3%;
}
.itemListSec h4 {
  font-size: clamp(20px, 5.33vw, 25px);
  line-height: 1.2;
  font-weight: 600;
  text-align: center;
  margin-bottom: 6%;
}
.itemListSec .itemCard {
  padding: 5%;
  background-color: #fff;
  position: relative;
  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
}
.itemListSec .itemCard a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 50;
}
.itemListSec .cardTxt {
  padding-top: 5%;
}
.itemListSec .cardTxt p {
  text-align: center;
  font-size: clamp(11px, 2.93vw, 15px);
  line-height: 1.7;
}
.cvSec {
  text-align: left;
}
/* a.cvBtn {
  width: 32.61%;
} */
/* swiper基礎設定 */
.swiper-wrapper {
  height: auto;
}

.swiper-notification {
  display: none;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 3rem;
  color: #fff;
}
.swiper-pagination-bullet {
  background-color: #000;
}
.swiper-pagination {
  /*ドットと同じ高さを揃える*/
  height: 30px;
  /*位置を調整*/
  bottom: 0 !important;
}

/* swiper基礎設定 */
.cvArea {
  width: 90%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  margin-bottom: 3%;
}
.finishSec {
  width: 100%;
  margin: 0 auto;
  background-color: #000;
  padding: 12% 0 5%;
}
.finishSec .finishTxt {
  width: 100%;
  text-align: center;
}
.finishSec .finishTxt h5 {
  font-size: clamp(15px, 4vw, 18px);
  color: #6d6b6b;
  font-weight: 700;
}
.finishSec .finishTxt h3 {
  font-size: clamp(68px, 18.13vw, 133px);
  color: #6d6b6b;
  font-weight: 700;
  line-height: 1;
}
.finishSec .cvSec {
  text-align: center;
  margin: 10% auto;
}
/* span.jpSmall {
  font-size: 18px;
} */

/* animation */
.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes sample1 {
  from {
    -webkit-animation-timing-function: linear;
    -webkit-transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg);
    opacity: 1;
  }
  to {
    -webkit-animation-timing-function: linear;
    -webkit-transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg);
    opacity: 0;
  }
  29% {
    -webkit-animation-timing-function: linear;
    -webkit-transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg);
    opacity: 1;
  }
  32% {
    -webkit-animation-timing-function: linear;
    -webkit-transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg);
    opacity: 0;
  }
  26% {
    -webkit-animation-timing-function: linear;
    -webkit-transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg);
    opacity: 0;
  }
  47% {
    -webkit-animation-timing-function: linear;
    -webkit-transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg);
    opacity: 1;
  }
  50% {
    -webkit-animation-timing-function: linear;
    -webkit-transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg);
    opacity: 0;
  }
  53% {
    -webkit-animation-timing-function: linear;
    -webkit-transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg);
    opacity: 1;
  }
  23% {
    -webkit-animation-timing-function: linear;
    -webkit-transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg);
    opacity: 1;
  }
  35% {
    -webkit-animation-timing-function: linear;
    -webkit-transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg);
    opacity: 1;
  }
}

@keyframes sample1 {
  from {
    animation-timing-function: linear;
    transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg);
    opacity: 1;
  }
  to {
    animation-timing-function: linear;
    transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg);
    opacity: 0;
  }
  29% {
    animation-timing-function: linear;
    transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg);
    opacity: 1;
  }
  32% {
    animation-timing-function: linear;
    transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg);
    opacity: 0;
  }
  26% {
    animation-timing-function: linear;
    transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg);
    opacity: 0;
  }
  47% {
    animation-timing-function: linear;
    transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg);
    opacity: 1;
  }
  50% {
    animation-timing-function: linear;
    transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg);
    opacity: 0;
  }
  53% {
    animation-timing-function: linear;
    transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg);
    opacity: 1;
  }
  23% {
    animation-timing-function: linear;
    transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg);
    opacity: 1;
  }
  35% {
    animation-timing-function: linear;
    transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg);
    opacity: 1;
  }
}

.sample1 {
  -webkit-animation-name: sample1;
  animation-name: sample1;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

/* imview */
@media only screen and (min-width: 740px) {
  .itemTitleSec h3 {
    line-height: 0.9;
  }
  .itemTitleSec h4 {
    line-height: 1.5;
  }
  .swiper02 {
    width: 80%;
    margin: 5% auto 3%;
  }
  .itemDescSec {
    padding: 4% 0;
  }
}
@media only screen and (min-width: 1025px) {
  .heroSec .heroTitleBox {
    padding: 12.23% 1.77% 1.82%;
  }
  .parallax {
    width: 100%;
    height: 70vh;
  }
  .parallax01::before {
    background-image: url('../images/heroImg_pc.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
  }

  .leadSec {
    width: 100%;
    padding: 5.67% 4%;
    background-image: url('../images/bg_img.jpg');
    background-repeat: no-repeat;
    background-size: cover;
  }
  .leadWrap {
    width: 55.98%;
    min-width: 700px;
    margin: 0 auto;
  }
  .leadSec p {
    padding: 1.5% 0;
  }
  .itemOutWrap {
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    margin: 0 auto;
  }
  .itemOutWrap2 {
    width: 100%;
    flex-direction: row-reverse;
    padding-top: 0;
  }
  .itemImgWrap {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 50%;
    height: 100vh;
    padding: 0;
  }

  .itemImgSec .swiper {
    width: 100%;
    margin: 0 auto;
  }
  .swiper img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
  }
  .itemTxtSec {
    width: 50%;
    position: relative;
    margin-bottom: 0;
  }
  .itemTxtSec .itemTitle {
    width: 100%;
    /* height: 50%; */
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 50% 0;
  }
  .itemTxtSec {
    padding: 0 8% 5%;
  }
  .itemTitleSec {
    padding: 13.86% 0 0;
  }
  .itemTitle .logo01 {
    width: 50%;
    margin: 0 auto;
    display: flex;
  }
  .swiper02 {
    width: 66%;
    margin: 8% auto 3%;
  }
  .detailSec {
    margin-bottom: 10%;
  }
  .detailSec > img {
    width: 30%;
  }
  .detailBox.detBox01 {
    padding-top: 165%;
  }
  .detailBox.detBox01 .img01 {
    width: 33.59%;
    top: 0;
    left: 33.22%;
  }
  .detailBox.detBox01 .img02 {
    width: 35.41%;
    top: 33.86%;
    right: 14.58%;
  }
  .detailBox.detBox01 .img03 {
    width: 28.48%;
    top: 37.62%;
    left: 14.58%;
  }
  .detailBox.detBox01 .img04 {
    width: 20.36%;
    top: 56.25%;
    left: 36.97%;
    border-radius: 50%;
  }
  .detailBox.detBox01 .txt01 {
    top: 49.3%;
    right: 15%;
  }
  .detailBox.detBox01 .txt02 {
    top: 63.8%;
    left: 15%;
  }
  .detailBox.detBox02 {
    padding-top: 179.01%;
  }
  .detailBox.detBox02 .img01 {
    width: 33.59%;
    top: 0;
    left: 33.22%;
  }
  .detailBox.detBox02 .img02 {
    width: 35.41%;
    top: 29.86%;
    right: 14.58%;
  }
  .detailBox.detBox02 .img03 {
    width: 23.48%;
    top: 30.62%;
    left: 21.58%;
  }
  .detailBox.detBox02 .img04 {
    width: 28.48%;
    top: 50.25%;
    left: 15.97%;
  }
  .detailBox.detBox02 .img05 {
    width: 23.48%;
    top: 39.25%;
    left: 49.97%;
  }
  .detailBox.detBox02 .txt01 {
    top: 44%;
    left: auto;
    right: 55%;
  }
  .detailBox.detBox02 .txt02 {
    top: 52.5%;
    right: 26.5%;
  }
  .detailBox.detBox02 .txt03 {
    top: 68%;
    left: 45%;
  }

  .itemListSec > img {
    width: 30%;
    margin: 0 auto;
  }
  .itemListSec h4 {
    margin-bottom: 4%;
  }
  .finishSec .cvSec {
    margin: 4% auto;
  }
  .finishSec {
    padding: 9% 0 5%;
  }
}

/*ヘッダーエリア*/
.header {
  width: 100%;
}
.header {
  padding-bottom: 8px;
  margin-bottom: -8px;
}
.toplogo {
  width: 100%;
  height: 100px;
  /*      border-top: 8px solid #067fc4;*/
  text-align: center;
}
img.blandLogo {
  height: 80px;
  width: auto;
  margin: 10px;
}