@charset "utf-8";
/* CSS Document */

/*-------------------------------
 intro
---------------------------------*/
#intro {
  width: 100%;
  background: 
    linear-gradient(180deg, rgb(252 232 213 / 50%) 0%, transparent 50%),
    linear-gradient(0deg, rgb(255 255 255 / 70%), rgb(255 255 255 / 70%)),
    url(/dd/special/gakuen-idolmaster/image/bg_classroom-mainheader.jpg) 50% 100% / calc(var(--rs) * 204.8) no-repeat
  ;
  font-family: var(--ff-zenmaruG);
  text-align: center;
}
.intro-cont {
  width: min(100%, calc(102.4rem + 4%));
  padding: calc(var(--rs) * 2) 2%;
  margin: 0 auto;
}
.intro-heading {
  width: fit-content;
  max-width: 96%;
  padding: 0.15em 0.5em 0.15em 0.5em;
  margin: auto;
  background: linear-gradient(90deg, #f0c242 0%, #f2bf42 100%);
  color: #fff;
  font-size: calc(var(--rs) * 2 + var(--fs) * 1);
  font-weight: normal;
  line-height: 1.4;
}
.intro-heading span {
  display: block;
  position: relative;
  left: -2em;
}
.intro-heading span ~ span {
  margin-top: calc(var(--rs) * 1);
  left: 2em;
}
.intro-text {
  width: min(100%, 62rem);
  margin: 1em auto;
  font-size: calc(var(--fs) * 2);
  font-weight: bold;
}
/*-------------------------------
 spec
---------------------------------*/
#specDDSkotone {
  padding: calc(var(--rs) * 5) 0;
  background: 
    linear-gradient(0deg, rgb(255 255 255 / 100%) 5%, transparent 10%),
    linear-gradient(-90deg, rgb(255 255 255 / 100%) 40%, transparent 60%),
    url("/dd/special/gakuen-idolmaster/image/bg_classroom-body.jpg") 50% 0 / cover no-repeat
    ;
}
.cont-ddsKotoneSpec {
  width: min(100%, 204.8rem);
  margin: 0 auto 1em;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  justify-content: center;
  position: relative;
}
/* spec _ img*/
.ddsKotoneSpec-img {
  width: min(100%, calc(var(--fs) * 87.3));
  max-width: 87.3rem;
  background: url("/dd/special/gakuen-idolmaster/image/bg_notes_grid-kotone.png") 0 0 / contain no-repeat;
  margin: 0;
  margin-left: auto;
  margin-right: calc(var(--rs) * -0.8);
  text-align: left;
  flex: 1 1 auto;
  position: relative;
  z-index: 2;
}
.ddsKotoneStanding {
  width: 43.528%;
  margin: 0;
  margin-right: auto;
}
/*spec _ text*/
.ddsKotoneSpec-text {
  width: min(100%, calc(var(--fs) * 87.3));
  max-width: 87.3rem;
  padding: 2em 2% 2em 4%;
  margin: 0;
  margin-left: calc(var(--rs) * -0.8);
  margin-right: auto;
  font-family: var(--ff-NtSnsJP);
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}
.cont-spec {
  width: 100%;
  /*filter: drop-shadow(0 0 calc(var(--rs) * 1)  rgb(0 0 0 / 50%));*/
  position: relative;
}
.bg-notesGrid {
  container-type: inline-size;
}
.grid-left {
  background: url("/dd/special/gakuen-idolmaster/image/bg_notes_grid-left.png") 0 0 / cover repeat-y;
}
.grid-right {
  background: url("/dd/special/gakuen-idolmaster/image/bg_notes_grid-right.png") 0 0 / cover repeat-y;
}
.spec-imgCont {
  width: 50.401%;
  margin: 0 0 3em auto;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  position: absolute;
  right: 7.5%;
  top: 13.51%;
}
.specImg {
  position: relative;
  display: block;
}
.specImg-includedItems {
}
.specImg-photo {

}
.partsPoint-text {
  width: min(80%, 22rem);
  padding: 0.8em 1em 0.8em 0.5em;
  background: #f9fbfc;
  border-left: calc(var(--rs) * 1.2) solid #3874aa;
  box-shadow: calc(var(--rs) * 0.2) calc(var(--rs) * 0.2) calc(var(--rs) * 1) 1px rgb(0 0 0 / 50%);
  font-size: calc(var(--fs) * 0.6 + var(--rs) * 0.8);
  text-align: left;
  position: absolute;
  left: 3%;
  bottom: 85%;
}
@media screen and (max-width: 1230px) {
  #specDDSkotone {
    padding-top: calc(var(--rs) * 3);
  }
  .cont-ddsKotoneSpec {
    flex-direction: column;
    align-items: center;
  }
  .ddsKotoneSpec-img {
    width: min(100%, calc(var(--fs) * 87.3));
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .ddsKotoneSpec-text {
    width: min(100%, calc(var(--fs) * 87.3));
    padding-top: calc(2em + 4%);
    padding-right: 6%;
    padding-left: 6%;
    margin: 0 auto;
    margin-top: -2.2%;
    background-position: right top;
    position: relative;
    z-index: 1;
  }
}
@media screen and (max-width: 873px) {
  .ddsKotoneSpec-img {
    width: min(104%, calc(var(--fs) * 87.3));
    margin-left: -2%;
  }
  .ddsKotoneSpec-text {
    width: min(104%, calc(var(--fs) * 87.3));
    margin: 0 auto;
    margin-top: -3.2%;
    margin-left: -2%;
  }
}
@container (min-width: 960px) {
  .spec-imgCont {
    position: absolute;
    right: 0;
    top: 0;
  }
}
/*-------------------------------
 gallery
---------------------------------*/
.cont-galleryDouble {
  width: var(--w-cont);
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: center;
}
.galleryDouble {
  width: min(100%, 52rem);
  margin: 0;
  flex: 1 1 auto;
}
/*gallery point*/
.gallery-pointText {
  width: 100%;
  background: 
    linear-gradient(165deg, #ffcf32 0%, #f5ea9d 50%)
    ;
  /*color: #fff;*/
  font-family: var(--ff-zenmaruG);
  text-align: center;
  position: relative;
}
.gallery-pointText:has(.pointText-charmpoint) {
  padding: 0.5em 0;
}
.pointText-charmpoint {
  width: fit-content;
  padding: 0.5em 4%;
  margin: 0;
  font-size: calc(var(--fs) * 1.6);
  text-align: left;
}
.pointText-parts {
  padding: 1em 3%;
  background: #fff;
  border-bottom: dotted 3px #f8d04d;
  color: #4c4c4c;
  font-size: calc(var(--fs) * 1.6);
  text-align: center;
}
.pointText-parts:nth-child(2n) {
  border: none;
}
/*standing img _ spec area */
.standing-pointText {
  width: 47%;
  position: absolute;
  left: 44%;
  top: 2%;

}
.standing-pointText > .pointText-parts {
  padding: calc(var(--rs) * 1) 1em;
  border: dotted calc(var(--rs) * 0.3) #f8d04d;
  border-radius: 10em;
  font-size: calc(var(--rs) * 1.6);
  text-align: center;
}
@media screen and (min-width: 2000px) {
  .gallery-pointText {
    width: 100%;
  }
}
/*-------------------------------
 slick _ unslick
---------------------------------*/
@media screen and (max-width: 840px) {
  .item-pic {
    padding: 1% 2%;
    display: flex;
    flex-flow: row wrap;
  }
  .item-pic--list {
    width: calc(100% / 3 - 2%);
    margin: 1%;
  }
  .slider-container {
    padding-bottom: 3% !important;
  }
}