@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Jacques+Francois&family=MonteCarlo&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Tangerine:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
body {
  font-family: "Noto Serif JP", serif;
  font-size:16px;
}
a {
  display:block;
  text-decoration: none;
}
header{
  background-color: #000000 !important;
}
h1{
  margin-inline:auto !important;
}
p {
  font-family: "Noto Serif JP", serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height:180%;
}
div, li, p{
     /*  commonの設定解除  */
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
li {
  list-style: none;
}
img {
   /*  commonの設定解除  */
  vertical-align: unset;
  width: 100%;
}
.LC_Page_User #main-content {
  margin-bottom: 0;
}
.letter-03{
  letter-spacing: -0.3px;
}
.letter-01{
  letter-spacing: -0.1rem;
}
.letter-05{
  letter-spacing: 0.5px;
}
.contents-bg {
  position: relative;
  background-color: #93cfeb;
}
.sp-wrap{
  max-width:544px;
  width: 100%;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  color:#fff;
  box-shadow: 1px 1px 16px rgba(5, 1, 1, 0.3);
  z-index: 2;
}
.sp-main {
  width: 100%;
  /* グラデーションを先に設定し、画像を後ろに指定 */
  background: url(/user_data/packages/default/client/lp/2025/idolmaster/img/sp_bk.png), 
   linear-gradient(0deg, rgba(55, 97, 167, 1.0) 1%, rgba(134, 176, 216, 1.0) 56%, rgba(19, 52, 128, 1.0) 100%);
  
  background-size: contain;
  background-repeat: repeat;
}
.sp-top{
  margin-inline: auto;
}
.mv {
  position: relative;
  width:100%;
  text-align: center;
}
.top-title{
  position: absolute;
  bottom:7%;
  left:50%;
  transform: translateX(-50%);
  width:66%;
}
/* .title2{
  position: relative;
} */
.title2::before{
  position: absolute;
  content:url(/user_data/packages/default/client/lp/2025/idolmaster/img/top_L.png);
  top:-26px;
  left:-151px;
  transform: scale(0.35);
}
.title2::after{
  position: absolute;
  content:url(/user_data/packages/default/client/lp/2025/idolmaster/img/top_R.png);
  top:-26px;
  right:-151px;
  transform: scale(0.35);
}
.idol-logo {
  padding: 2rem 1rem 2rem;
}
.idol-logo img{
  height: auto;
  display: block;
  margin: 0 auto;
  width: 79vw;
}
#collection {
  background:linear-gradient(rgba(0, 0, 0, 1), rgba(65, 5, 65, 0));
  padding-bottom: 2em;
}
.intro {
  padding: 0 2.5vw 4vw;
  margin: 0 auto;
  text-align: center;
}
.intro-txt{
    font-style: normal;
    font-size: clamp(0.95rem, 0.95rem, 1rem);
    line-height: 210% !important;
    letter-spacing: -0.02em;
 }
.sec-scroll-point {
  display:block;
  position: relative;
}
.for-sp {
  display: block;
  white-space: nowrap;
}
.order {
  margin: 0.7rem auto 1.5rem;
  width:20rem;
}
.order-icon{
  width:19vw;
  margin:0 0 14px 0;
}
.order-txt {
  position: relative;
  color: inherit;
  font-size: 1.1rem;
  font-weight: 600;
} 
.period {
  margin: 0 auto;
  text-align: center;
}
.period p {
  font-size: clamp(1rem, 1.1rem, 1.11rem);
  font-weight: 700;
  line-height: 170%;
  letter-spacing: 1.5px;
}
.postdate {
  padding: 1em 0;
}
.postdate p{
  font-size: clamp(0.95rem, 1.02rem, 1.02rem);
  font-weight: 700;
}
.postdate span {
  display: inline-block;
  font-size: .65rem;
  line-height: 210%;
  padding: 1.4em 0;
  letter-spacing: -0.03em;
}
.sp-slick-wrap{
  position: relative;
  max-width: 81vw;
  text-align:center;
  margin: 0 auto;
}
.sp-slick-ttl{
  width:67vw;
  margin-bottom: 15px;
}
.slick-sp-slider{
  position: relative;
  margin:0 auto;
  max-width:365px;
}
.slick-sp-slider > ul .slick-margin {
  padding:5px;
  background-color: rgba(255, 255, 255, 0.3);
  border: solid 2px #fff;
}
.slick-thumb-slider{
  position: relative;
  width: max(300px,345px);
  margin: 26px auto 0;
}
.vol{
  position: absolute;
  top:-17px;
  left:15px;
  width:max(65px,80px);
}
.vol2{
  position: absolute;
  top:154px;
  left:15px;
  width:max(65px,80px);
}
.sp-slick-txt{
  padding: 0 9vw 5vw;
}
.slick-txt{
  font-family: 'Noto Serif JP', serif;
  color: inherit;
  line-height:160%;
  /* letter-spacing: -0.1px; */
  text-align:justify;
  font-size:clamp(2.99vw, calc(2.9vw + 0.62vw), 4vw);
  margin:0 0 2rem;
}
.slick-txt-sub{
  font-size:0.65rem;
  line-height:160%;
  letter-spacing: -0.1px;
}
.movie-wrap{
  position: relative;
  display: inline-block;
  background: url(/user_data/packages/default/client/lp/2025/idolmaster/img/waku.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width:82%;
  padding-top: 56.25%;
  z-index: 10;
  /* margin:0 auto; */
}
.movie-wrap video{
  position: absolute;
    top: 0%;
    left: 14px;
    width: 91%;
    height: 100%;
    object-fit: contain;
}
.button-area{
  display:none;
  margin: 1rem auto 2.6rem;
  height:100%;
}
.button01{
  position: relative;
  border-radius: 31px;
  width: 82vw;
  /* max-width:324px; */
  height: 60px;
  transition: 0.3s;
  margin:0 auto;
  box-shadow: 0px 6px 6px 0px rgba(44, 66, 133, 0.25);
  background-image: linear-gradient(180deg, rgba(30, 67, 151, 1), rgba(95, 181, 241, 1));
}
.button02{
  position: relative;
     border-radius: 20px;
    border-radius: 31px;
    width: 82vw;
   height: 60px;
    transition: 0.3s;
    margin:0 auto;
    box-shadow: 0px 6px 6px 0px rgba(44, 66, 133, 0.25);
    background-color: [object object];
    background-image: linear-gradient(180deg, rgba(33, 117, 195, 1), rgba(147, 207, 235, 1));
 }
.button-txt {
  position: absolute;
  display:flex;
  color: #f6eee5;
  font-family: "MonteCarlo", cursive;
  align-items:center;
  justify-content:space-evenly;
  line-height:59px;
  padding: 0 0 0.1em 1.3rem;
  width:97%;
}
.button-name {
  font-size: 6vw;
  padding:0 0 0.2em 0;
}
.button-price {
  font-size: 1.5em;
  font-weight: 400; 
  letter-spacing: -0.02em;
  padding:0 0 0.2em 0;
}
.click{
  width: 1.8em;
  display:flex;
  justify-content: center;
  animation: clickanim 1s infinite ;
  padding:0 0 0.2em 0;
}
/* .button-txt:hover{
  opacity: 0.8;
} */
.detail01{
  display:flex;
  flex-direction: column;
  align-items: center;
  background: url(/user_data/packages/default/client/lp/2025/idolmaster/img/kira3.png)top center / contain no-repeat;
  margin: 3rem auto 0;

}
.detail02{
  display:flex;
  flex-direction: column;
  align-items: center;
  background: url(/user_data/packages/default/client/lp/2025/idolmaster/img/kira1.png) center 14vw / contain no-repeat;
  padding:6rem 0 3rem;
}
.detail03{
  display:flex;
  flex-direction: column;
  align-items: center;
  background: url(/user_data/packages/default/client/lp/2025/idolmaster/img/kira4.png) center -8vw / contain no-repeat;
  padding: 0px 1rem;
}
.detail01-ttl{
  width:50vw;
  height:auto;
  padding:2rem 0 2.2rem;
}
.detail-txt{
  width:92%;
  max-width:79vw;
  padding:1rem 0 2rem;
}
.detail02-ttl{
  width:50vw;
  height:auto;
  padding:1rem 0 2.5rem;
}
.detail03-ttl{
  width:72vw;
  height:auto;
  padding:5rem 0 2.2rem;
}
.detail-txt p{
  font-size:clamp(2.9vw, calc(2.9vw + 0.8vw), 4vw);
  letter-spacing: -0.5px;
  text-align:justify;
}
.detail-img{
  margin:0 auto 1rem;
  width:80vw;
}
.btn-wrap {
  padding: 9rem 2rem 3rem;
}
/* フッターボタン */
.footer-btn {
    position: relative;
    width: 290px;
    max-width: 300px;
    margin: 0 auto;
    filter: none;
    -webkit-transition: transform 0.2s ease-out, filter 0.2s ease-out; /* iOS用のプレフィックス */
    transition: transform 0.2s ease-out, filter 0.2s ease-out; /* アニメーション設定 */
    filter: drop-shadow(0px 9px 3px rgba(58, 88, 114, 0.77)); /* 影 */
    will-change: transform, filter; /* パフォーマンス向上のために指定 */
  }
  
  /* ホバー時のアニメーション (押し込まれる効果) */
  .footer-btn:hover,
  .footer-btn:active {  /* ここでタップ時（:active）にも対応 */
    -webkit-transform: translateY(4px); /* 少し押し込む */
    transform: translateY(4px); /* 少し押し込む */
    filter: drop-shadow(0px 4px 2px rgba(58, 88, 114, 0.77)); /* 影を小さくすることで押し込んだ感じを出す */
  }
  
  /* ボタン内のテキスト */
  .footer-btn-txt {
    position: absolute;
    top: 32%;
    line-height: 142%;
    text-align: center;
    color: #0f337d;
    font-weight: 700;
    font-size: 0.7rem;
    width: 100%;
    z-index: 6;
  }
  
.footer-bk {
  background: url(/user_data/packages/default/client/lp/2025/idolmaster/img/kira5.png) center 0vh / contain no-repeat;
  width: 100%;
}

.footer {
  padding: 4vh 1vh 2vh;
  text-align: center;
}

.footer-inner {
  position: relative;
  padding: 0 0 1em 0;
}

/* フッターのロゴ */
.footer-logo {
  position: absolute;
  bottom: 190%;
  left: 50%;
  transform: translateX(-50%);
  width: 7.5rem;
}

.page-top {
  position: absolute;
  bottom:177%;
  right:0;
}
.page-top p{
  font-size:2.5vw;
}
.page-top a{
  color: inherit;
}
.page-top:hover {
  filter:drop-shadow(1px 1px 12px rgba(255,255,255,1.00));
}
.bottom-hr {
  display: block !important;
  position: absolute;
  width: 120vw;
  left: -5%;
  bottom:40%;
  border-bottom: 0.03em solid #fff;
}
hr {
  border: 0;
  line-height: 0;
}
.copy {
  position: absolute;
  bottom:-20%;
  width:100%;
}
small {
  color:inherit; 
  font-size: 2.8vw;
  font-weight:300;
  float:none;
  letter-spacing: -0.2px;
}
.block-icon02 {
  justify-self: center;
  width: 42px;
}

.pclist img {
  height: 1.0em;
  width: auto;
  padding: 0.35em 0;
}
/*　       PC       　*/
@media (min-width:768px) {
  .for-sp {
    display: none;
  }
  .pc-wrap{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image: url(/user_data/packages/default/client/lp/2025/idolmaster/img/contents_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .sp-wrap{
    max-width:544px; 
   }
  .sp-main{
    width:100%;
  }
  .top-title{
    max-width:100%;

  }
  .title2::before{
    left:-178px;
    transform: scale(0.5);
  }
  .title2::after{
    right:-178px;
    transform: scale(0.5);
  }
  .idol-logo {
    padding: 3rem 0 3.5rem;
  }
  .idol-logo img{
    width: 27rem;
  }
  .order {
    margin: 1.4vw auto 2.2Svw;
    width:23rem;
   }
  .order-txt {
    font-size: 1.3rem;
  } 
  .order-icon {
    margin:0 0 23px;
    width:6rem;
  }
  .period {
    margin: 1.4em auto;
  }
  .period p {
    font-size: 1.35rem;
    line-height: 170%;
    letter-spacing: 1.5px;
  }
  .postdate {
    padding: .8em 3em;
    line-height: 200%;
  }
  .postdate p{
    font-size: 1.22rem;
  }
  .postdate span {
    font-size: 0.7em;
    padding: 2em 0;
    line-height: 202%;
  }
   .item-info {
    padding: 1.5rem 2.6rem 2rem;
  }
  .item-info-txt {
    font-size: 0.82em;
    text-align: justify;
    letter-spacing: .6px;
  }
  .item-btn {
    margin: 2.6rem 0 0;
  }
  .intro{
    padding:0 2.5vw 1vw;
  }
  .intro-txt{
    font-size: 1.2rem;
    letter-spacing: -0.04em;
 }
 .movie-wrap{
  max-width:413px;
 }
 .movie-wrap video{
    top: 0%;
    left: 1rem;
    width: 380px;
 }
 .button-area{
  display:none;
  margin: 4.2rem auto -1.5rem;
  max-width: 26rem;
  height:100%;
 }
 .button01{
  width: 25rem;
  max-width:390px;
  height: 62px;
 }
 .button02{
  width: 25rem;
  max-width:390px;
  height: 62px;
 }
  .button-txt {
   line-height:60px;
    width:98%;
  }
  .button-name{
    font-size: 1.8em;
    padding: 0 0 0 1rem;
  }
  .button-price {
    font-size: 1.8em;
    padding: 0 0 .2vw 0;
  }
  .click{
    width: 2.2em;
    padding: 0 0 .2em 0;
  }
  .sp-slick-wrap{
    margin: 0 3rem 0;
  }
  .sp-slick-ttl{
    width:377px;
  }
  .vol2{
     top:48.2%;
  }
  .slick-sp-slider{
    max-width:430px;
  }
  .slick-thumb-slider{
    margin: 31px auto 0;
    width: 84%;
 }
  .sp-slick-txt{
    margin: 0 2.8rem 0;
    padding: 0 0 2rem;
  }
  .slick-txt{
    font-size:1.08rem;
    line-height:180%;
  }
  .slick-txt-sub{
    margin:0 auto;
    width:30rem;
    font-size: 0.86em;
    line-height:160%;
  }
  .detail01-ttl{
    width:194px;
    padding:5rem 0 1rem;
  }
  .detail01{
    padding: 0px 1rem;
    margin: 4rem auto 0;
  }
  .detail-txt{
    padding: 0.55rem 2rem 0;
    width:27.8rem;
  }
  .detail-txt p{
    font-size:clamp(0.7rem, calc(0.7rem + 0.62vw), 1rem);
    letter-spacing: 0;
  }
  .detail-img{
    width:26rem;
  }
  .detail02-ttl{
    width:210px;
    padding:5rem 0 3rem;
  }
  .detail02{
    background-position: center 3vw;
    padding:6rem 0 2rem;
  }
  .detail03-ttl{
    width:330px;
    padding:9rem 0 3rem;
  }
  .detail03{
    background-position: center 0vw;
  }
  .btn-wrap{
    padding:15rem 4.3rem 0;
  }
  .footer-btn{
    width:373px;
    max-width:30rem;
  }
  .footer-btn-txt{
    font-size:1rem;
  }
  .footer {
    padding: 5rem 1rem 2rem;
  }
  .footer-inner {
    padding:0 0 2.4rem 0;
  }
  .footer-logo {
    top:-19%;
    width: 11rem;
  }
  .bottom-hr {
    width:550px;
    left:-16px;
    bottom:8px;
  }
  small {
    font-size: .9rem;
    letter-spacing: 0.01em;
  }
  .page-top {
    bottom:57%;
  }
  .page-top p{
    font-size:.8em;

  }
  .copy {
    bottom:-40%;
  }
}
/*　      　*/
@media (max-width:1023px) {
  .l-content-menu {
    display:none;
  }
  .r-content-menu {
    display:none;
  }
}

@media (min-width:1024px) {
  .l-content {
      position: absolute;
      left:0;
      top:26vh;
      height:100vh;
      width:calc(50% - 272px);
    }
    .l-content-menu {
      position: absolute;
      left: 50%;
      width: min(17rem,21rem);
      transform: translateX(-50%);
    }
    .l-list {
      font-size:17.5px;
      color:#3d78bb;
      font-weight:700;
      margin:15% 0 0 16%;
      line-height: 138%;
      letter-spacing: 1px;
    }
  
    .l-logo{
      display:block;
      max-width:22vw;
      margin:0 auto;
    }
    .l-list:hover {
      filter:drop-shadow(0px 5px 3px rgb(179, 225, 242));
      transition: 0.5s;
    }
    .l-list.is-active {
      filter: drop-shadow(1px 1px 5px #000000);
      position: relative; /* リンクボタンのz-indexを設定するためにpositionを追加 */
      z-index: 1; /* リンクボタンのz-indexを設定*/
    }
    .l-list:hover:before {
      opacity: 1;
      /* filter: drop-shadow(1px 1px 8px #f565b6); */
    }
    .r-content {
      position: absolute;
      right:0;
      top:0;
      height:100vh;
      width:calc(50% - 272px);
    }
    .r-content-menu {
      position: absolute;
      left: 50%;
      top: 42vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: min(14rem,16rem);
      transform: translateX(-50%);
    }
    .menu-list {
      padding: .6rem .5rem 1.5rem;
      text-align: center;
    }
    .logo02{
      margin:0 0 1rem;
      max-width:9rem;
    }
    .menu-list p {
      font-size:17.5px;
      font-weight: 700;
      color: #8d6dd5;
      line-height: 35px;
      letter-spacing: 1px;
    }
  .menu-list p:hover {
      /* color:#42deff; */
      filter: drop-shadow(1px 1px 8px #fff) drop-shadow(0px 5px 3px rgb(179, 225, 242));
    
   }

  .contents-bg {
     position: relative;
   }
}


/*    min-mobile    */
@media (max-width: 344px) {
  .slick-thumb-slider{
    width: 86%;
 }
.intro-txt{
    font-size: 4vw;
 }
  .movie-wrap{
    width: 83%;
  }
.movie-wrap video{
  left: 12.5px;
  width: 261px;
}
.button01{
  width: 18rem;
  height: 3.5rem;
 }
 .button02{
  width: 18rem;
  height: 3.5rem;
 }
.button-txt {
  bottom:-7%;
  width:98%;
}
 .button-name {
  font-size: 1.5em;
  letter-spacing: -1px;
 }
 .button-price {
  font-size: 1.3em;
  padding:0;
 }
 .click{
  width: 1.7em;
 }
}