@charset "utf-8";
/* CSS:  Drs_Miku20: Sweet Snow Set _ SNOW MIKU 2026 */
:root {
}
/*-------------------------------
 Drs_Miku 20 _ base
---------------------------------*/
a:is(.pre, .end) {
  background: #555;
  color: #777;
  position: relative;
}
a:is(.pre, .end) > i {
  visibility: hidden;
}
a:is(.pre, .end)::after {
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 50%);
  border-radius: calc(var(--fs) * 6);
  color: #fff;
  letter-spacing: 0.05em;
  text-align: center;
  text-shadow: 0 0 1px #000, 0 0 5px #000;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
}
a.pre {
  pointer-events: none;
}
a.pre::after {
  content: "準備中";
}
a.end::after {
  content: "予約受付終了";
  }
/*-------------------------------
 Drs_Miku 20
---------------------------------*/
#DrsMiku20Wrap {
  width: 100%;
  padding: 0;
  background:
    url("/dd/special/piapro/image/event/ev_sm2026/bg_main03.png") 100% 60% / 100% auto repeat,
    url("/dd/special/piapro/image/event/ev_sm2026/bg_main02.png") 50% 50% / 100% auto repeat-y,
    url("/dd/special/piapro/image/event/ev_sm2026/bg_main01.png") 50% 50% / 100% auto repeat-y,
    #fefbf5
  ;
  color: var(--c-sm26-txt-main);
  font-family: "Zen Maru Gothic", "Noto Sans JP","sans-serif";
  line-height: 1.6;
  position: relative;
}
#DrsMiku20Wrap hr {
  width: 87.5%;
  height: calc(var(--fs) * 1);
  margin: calc(var(--fs) * 2) auto;
  background: url("/dd/special/piapro/image/event/ev_sm2026/line_pop.png") 0% 50% / contain repeat-x;
  border: none;
}
/*content*/
#DrsMiku20Top {
  width: 100%;
  background: #FFFBF5;
  position: relative;
}
@media screen and (min-width: 1300px) {
  #DrsMiku20Top {
    margin-bottom: calc(var(--rs) * -5);
    background: 
      url("/dd/special/piapro/image/product/drsMiku20_topBg.jpg") 50% 0 / auto no-repeat,
      #FFFBF5
    ;
  }
}
#DrsMiku20Cont {
  width: 100%;
  background: linear-gradient(180deg, rgb(254 251 245 / 100%) 0%, rgb(254 251 245 / 5%) 15%, transparent 50%,rgb(254 251 245 / 5%) 85%, rgb(254 251 245 / 100%) 100%);
}
.DrsMiku20-content {
  margin: 0 auto;
  container-type: inline-size;
  position: relative;
}
/*content inner*/
.DrsMiku20-contentInner{
  width: min(96%, 96rem);
  padding: 1em 0;
  margin: 0 auto;
}
/*-------------------------------
 Drs_Miku 20 _ top image
---------------------------------*/
#DrsMiku20Top {
  
}
#cntPrdctTopImg {
  width: 100%;
  /*margin-bottom: -52%;*/
  margin-bottom: 0;
  box-shadow: 0 0 100px 50px #fefbf5;
  position: relative;
  z-index: 0;
}
/*#cntPrdctTopImg::after {
  content: "";
  width: 100%;
  height: 55%;
  background: linear-gradient(0deg, #fefbf5 0%, transparent 100%);
  position: absolute;
  left: 0;
  bottom: 0;
}*/

/*-------------------------------
 Drs_Miku 20 _ intro
---------------------------------*/
#DrsMiku20Intro {
  padding: calc(var(--rs) * 1) 0;
  background: 
    rgb(254 252 253 / 100%)
  ;
  position: relative;
}
#DrsMiku20Intro::before {
  content: "";
  width: 100%;
  height: calc(var(--rs) * 12);
  background:
    url("/dd/special/piapro/image/product/drsMiku20_line_snowballl.png") 50% 100% / calc(var(--rs) * 90) calc(var(--rs) * 12) repeat-x,
    linear-gradient(0deg, rgb(249 249 249 / 100%) 0%, rgb(249 249 249 / 100%) 10%,  transparent calc(var(--rs) * 6))
  ;
  display: block;
  position: absolute;
  left: 0;
  top: calc(var(--rs) * -12);
  z-index: 10;
}
#DrsMiku20Intro-cont {
  width: min(100%, 96rem);
  padding: 0 4%;
  margin: 0 auto;
  text-align: center;
  filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #fff) drop-shadow(0 0 15px #fff) drop-shadow(0 0 20px #fff);
  position: relative;
}
/*intro text*/
.intro-title {
  margin-bottom: calc(var(--rs) * 1);
  color: var(--c-sm26-red);
  /*font-size: 4cqw;*/
  font-size: calc(var(--rs) * 3.2);
  line-height: 1.1;
  text-shadow: 0 0 1px #fff, 0 0 5px #fff;
}
.intro-text {
  width: 100%;
  margin: 1em auto;
  color: var(--c-sm26-pink);
  font-size: calc(var(--fs) * 0.6 + var(--rs) * 1.4);
  font-weight: bold;
  line-height: 1.5;
}
.intro-text:nth-of-type(1) {
  max-width: 36em;
}
.intro-text:nth-of-type(2) {
  max-width: 21em;
}
/*-------------------------------
 Drs_Miku 20 _ container
---------------------------------*/
.DrsMiku20-container {
  width: 100%;
  padding: 1em 0;
  margin: 1em auto;
  background: #fff;
  border-radius: calc(var(--rs) * 2);
  box-shadow: var(--c-sm26-bs-cmn), var(--c-sm26-bs-cmn);
  position: relative;
}
/*content text*/
.cont-text {
  padding: 0.25em 1em;
  font-size: calc(var(--fs) * 1.7);
  font-weight: bold;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}
.cont-text > strong {
  color: var(--c-sm26-red);
  font-size: 125%;
}
/*-------------------------------
 Drs_Miku 20 _ details - main image
---------------------------------*/
#DrsMiku20Details {
  width: 100%;
  padding: calc(var(--fs) * 1) 0;
  background: 
    linear-gradient(180deg, rgb(254 252 253 / 100%) 0%, transparent 10%, transparent 90%, rgb(254 251 245 / 100%) 100%),
    linear-gradient(180deg, rgb(254 251 245 / 100%) 0%, rgb(254 251 245 / 5%) 15%, transparent 50%,
    rgb(254 251 245 / 5%) 85%, rgb(254 251 245 / 100%) 100%),
    repeating-linear-gradient(270deg, #d9e5ef 0 calc(var(--rs) * 10), #ebfaef calc(var(--rs) * 11) calc(var(--rs) * 21), #d9e5ef calc(var(--rs) * 22))
  ;
  position: relative;
}
#DrsMiku20Main {
  width: min(100%, 96rem);
  padding-bottom: 0.5em;
  margin: 0 auto;
  background: #ea6d8d;
  box-shadow: 0 5px 5px rgb(144 130 120 / 30%);
}
@media screen and (min-width: 960px) {
  #DrsMiku20Main {
    border-radius: calc(var(--rs) * 2);
    overflow: hidden;
  }
}
/*main point*/
#DrsMiku20MainPoint {
  padding: 2% 4%;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
#DrsMiku20Main-includItems {
  width: min(96%, 32rem);
  margin: 2% auto;
  margin-bottom: 1%;
  border-radius: calc(var(--rs) * 1);
  overflow: hidden;
  flex: 1 1 auto;
}
/*point text list*/
.DrsMiku20-point {
  width: min(100%, 48rem);
  padding: 1em 2%;
  color: #fff;
  font-size: calc(var(--fs) * 1.6 + var(--rs) * 0.4);
  font-weight: bold;
  list-style: disc;
  text-align: left;
  display: inline-block;
  flex: 1 1 auto;
}
.DrsMiku20-point li {
  margin-left: 1.5em;
  line-height: 1.3;
}
.DrsMiku20-point li ~ li {
  margin-top: 0.5em;
}
/*-------------------------------
 Drs_Miku 20 _ content
---------------------------------*/
.cont-container {
  margin-bottom: calc(var(--rs) * 8);
}
.sm26-contBox .sm26-contentInner ~ .sm26-contentInner {
  margin-top: 0;
}
.sm26-contBox {
  margin-top: 0;
}
@media screen and (min-width: 1300px) {
  .sm26-contBox {
    background: linear-gradient(180deg, transparent 0%, var(--c-sm26-bg-color) 5%, var(--c-sm26-bg-color) 100%);
  }
}
section.contBox-section {
  overflow: visible;
}
section.contBox-section + section.contBox-section {
  margin-top: calc(var(--rs) * 16);
}
.cont-heading {
  width: min(100%, 120rem);
  margin: 0 auto calc(var(--rs) * 4);
  font-size: calc(var(--fs) * 2 + var(--rs) * 3);
  text-align: center;
}
.cont-title {
  color: var(--c-sm26-bwn);
  font-size: calc(var(--fs) * 1 + var(--rs) * 1.6);
}
/*event info*/
.cont-eventInfo {
  font-size: calc(var(--fs) * 1 + var(--rs) * 1.6);
  font-weight: bold;
  text-align: left;
}
/*-------------------------------
  Drs_Miku 20 _ spec table
---------------------------------*/
table.specTable {
  width: 96%;
  padding-bottom: 1em;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 5px;
  color: var(--c-sm26-bwn);
}
table.specTable caption {
  width: 100%;
  padding: calc(var(--fs) * 2) 0 calc(var(--fs) * 1.4);
  font-size: calc(var(--fs) * 1.8);
  font-weight: bold;
  line-height: 1.2;
  text-align: left;
  position: relative;
}
table.specTable caption b {
  margin: 0 0.25em;
  font-size: calc(var(--fs) * 3.0);
}
table.specTable caption small {
  font-weight: normal;
  display: inline-block;
}
table.specTable tr {
  padding-bottom: calc(var(--fs) * 0.5);
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  justify-content: flex-start;
}
table.specTable tr:has(td[colspan]) {
  padding-bottom: 0;
}
table.specTable th,
table.specTable td {
  padding: calc(var(--fs) * 0.5) 0.5em;
  font-size: calc(var(--fs) * 1.6);
  line-height: 1.6;
  text-align: left;
}
table.specTable th {
  max-width: 7em;
  position: relative;
  flex: 0 1 30%;
}
table.specTable th:after {
  content: "：";
  position: absolute;
  right: 0;
}
table.specTable th:empty {
  background: none;
}
table.specTable td {
  font-weight: normal;
  flex: 1 1 70%;
}
table.specTable td[colspan] {
  padding: 0;
  flex-basis: auto;
}
table.specTable td.spec-price {
  padding-top: 0;
  line-height: 1.2;
}
table.specTable tr:has(td.spec-price) {
  padding-top: 0.5em;
}
table.specTable td a.ev_att {
  font-weight: bold;
  color: var(--c-bs-red);
}
.price-tax {
  font-size: calc(var(--fs) * 2.4);
  font-weight: bold;
  vertical-align: text-top;
}
.price-tax small {
  font-size: calc(var(--fs) * 1.4);
}
.price-hontai {
  display: none;
}
/*-------------------------------
 Online store link
---------------------------------*/
.product-linkbox {
  padding: 1em 0 0;
}
.link-olstore {
  width: min(90%, 90rem);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.link-olstore-title {
  width: 100%;
  padding: calc(var(--fs) * 1);
  font-size: calc(var(--fs) * 1.8);
  font-weight: bold;
  letter-spacing: -0.05em;
  display: none;
}
.link-olstore-btn {
  width: min(90%, 32rem);
  margin: calc(var(--fs) * 1) 2%;
  flex: 1 1 auto;
}
#DrsMiku20Wrap a.olstore-linkButton {
  width: min(100%, 64rem);
  padding: calc(var(--fs) * 1.5) 1em;
  margin: 0 auto;
  background: #aaa;
  border-radius: calc(var(--fs) * 6);
  color: #fff;
  font-size: calc(var(--fs) * 2);
  line-height: 1.4;
  text-align: center;
  display: block;
  position: relative;
}
#DrsMiku20Wrap .olstore-btn-onetime a.olstore-linkButton { /*リンクボタンカラー：1回払い*/
  /*background: #64a3da;*/
  background: var(--c-sm26-blu);
}
#DrsMiku20Wrap .olstore-btn-installment a.olstore-linkButton { /*リンクボタンカラー：2回払い*/
  /*background: #ff698a;*/
  background: var(--c-sm26-pink);
}
#DrsMiku20Wrap a.olstore-linkButton:hover {
  color: #fff;
  filter: brightness(1.1);
}
#DrsMiku20Wrap a.olstore-linkButton small {
  margin: 0 auto;
  font-size: 80%;
  display: block;
}
#DrsMiku20Wrap a.olstore-linkButton i {
  position: absolute;
  right: calc(var(--fs) * 2);
  top: calc(50% - 0.4em);
}
#DrsMiku20Wrap a.olstore-linkButton.end i {
  display: none;
}
/*onlinestore period*/
.link-olstore-period {
  width: 100%;
  padding: 1em;
  margin: 0.5em auto;
  font-size: calc(var(--fs) * 1.6);
  line-height: 1.8;
  text-align: center;
  display: block;
}
.link-olstore-period span {
  font-weight: bold;
  display: inline-block;
}
/*anchor link*/
.anchorlink-container {
  width: 94%;
  padding: calc(var(--fs) * 1) 2%;
  margin: 0 auto;
  background: url("/dd/special/piapro/image/event/ev_sm2026/line_pop.png") 0% 0% / auto calc(var(--fs) * 1) repeat-x;
  position: relative;
}
.anchorlink-list {
  width: 100%;
  margin: calc(var(--fs) * 2) auto;
  border-radius: 5px;
  font-size: calc(var(--fs) * 1.6);
  font-weight: bold;
  line-height: 1.8;
  text-align: left;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.anchorlink-list li {
  padding: 0;
}
.anchorlink-list a {
  padding: calc(var(--rs) * 1.6) 1.5em;
  display: block;
}
.anchorlink-list a i {
  color: var(--c-link-cmn);
}
.anchorlink-list a:hover,
.anchorlink-list a:hover i {
  color: var(--color-link-cmn-hover);
}
/*-------------------------------
 spec attention
---------------------------------*/
.product-attention {
  width: min(100%, 192rem);
  margin: 0 auto;
  position: relative;
}
.spec-att {
  width: min(100%, 92rem);
  padding-left: 1%;
  margin: calc(var(--rs) * 4) auto;
  color: #333;
  font-size: calc(var(--fs) * 1.2);
  line-height: 1.3;
  text-align: left;
  text-shadow: 0 0 3px #fff, 0 0px 5px #fff, 0px 0px 4px rgb(255 255 255 / 60%);
}
.spec-att dt {
  text-indent: -0.5em;
  font-size: calc(var(--fs) * 1.3);
  font-weight: bold;
}
.spec-att :is(li,dd) {
  padding-left: 1em;
  margin-top: 0.25em;
  margin-right: 0.5em;
  display: inline-block;
  position: relative;
}
.spec-att :is(li,dd)::before {
  content: "\203B";
  position: absolute;
  left: 0;
  top: 0;
}
.spec-att a {
  padding: 0.25em 0.5em;
  background: rgb(255 255 255 / 100%);
  border-radius: 3px;
  color: #d61979;
  font-size: 87.5%;
  line-height: 1;
  text-decoration: none;
  display: inline-block;
}
.spec-att a:hover {
  filter: brightness(1.1);
}
.spec-att .att-imp {
  color: var(--c-bs-pnk);
  font-weight: bold;
}
/*-------------------------------
 Gallery _ overwrite
---------------------------------*/
#galleryBoxWrap {
  background: rgb(254 251 245 / 100%);
}
.galleryBox {
  width: 100%;
  padding: calc(var(--fs) * 2) 0;
  margin: 0 auto;
  background: var(--c-sm26-bwn);
  color: #fff;
  position: relative;
}
.item-pic {
  width: min(98%, 144rem);
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  }
.item-pic--list {
  width: calc(100% / 5 - var(--rs) * 2);
  margin: calc(var(--rs) * 1);
  outline: calc(var(--rs) * 0.5) solid #9b7b7a;
  border: none;
  border-radius: calc(var(--rs) * 0.8);
  overflow: hidden;
}
.item-pic--thumb {
  width:100%;
  object-fit: contain;
}
@media screen and (max-width: 960px) {
  .item-pic--list {
    width: calc(100% / 2 - var(--rs) * 2);
  }
}
/*-------------------------------
  Drs_Miku 20 _ 予約案内
---------------------------------*/
#infoContainer a[id]:not([href]) {
    height: calc(var(--fs) * 20);
    margin-top: calc(var(--fs) * -20);
}
dl.shopEvCont-data > dd.preorderDetails {
  padding-bottom: 1em;
  border-bottom: 1px dashed var(--c-sm26-txt-main);
  /*border-image:  url("/dd/special/piapro/image/event/ev_sm2026/line_pop.png") 0 0 100% / 5px 0 repeat;*/
  position: relative;
}
.preorder-shop {
  padding-left: 0.5em;
  margin-top: 1em;
  color: var(--c-sm26-red);
  font-size: calc(var(--fs) * 1.6 + var(--rs) * 0.6);
}
.preorder-shop::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  margin-left: -0.75em;
  margin-right: 0.25em;
  background: var(--c-sm26-red);
  transform: rotate(-45deg) translateY(-3px);
  display: inline-block;
}
.preorder-period {
  margin-left: 0.5em;
  font-size: calc(var(--fs) * 1.6 + var(--rs) * 0.8);
  line-height: 1.2;
}
.preorder-period > small {
  margin: 0 -0.5em;
}
/*海外販売店舗リスト*/
.shoplist-overseas {
  margin-left: 0.5em;
}
.shoplist-overseas li {
  margin: 0.25em 0 0;
  margin-right: 1.5em;
  display: inline-block;
}
.shoplist-overseas li::before {
  content: "・";
}
/*受付店舗詳細リンク*/
a.preorder-shoplink i {
  font-size: 87.5%;
  transform: translate(0.25em, -0.125%);
}
/*予約について詳細*/
.preorder-notice {
  font-family: var(--ff-NtSnsJP);
  font-size: calc(var(--fs) * 1.6);
  font-weight: normal;
}
.preorder-notice > li:not([class]) {
  padding: 1.25em 1em;
  padding-left: 1.5em;
  margin-top: 0;
  border-bottom: 1px dashed var(--c-sm26-red);
  font-size: calc(var(--fs) * 1.6);
  line-height: 1.6;
  text-align: justify;
}
.preorder-notice > li:not([class]):last-of-type {
  border-bottom: none;
}
.preorder-notice > li:not([class])::before {
  content: "\25C6";
  padding-right: 0.5em;
  margin-left: -1.5em;
  color: var(--c-sm26-red);
}
.preorder-notice > li > ul {
  width: fit-content;
  padding: 0.125em 1em;
  margin: 0.5em 0;
  background: var(--c-sm26-bg-color);
  border: 1px solid #ccbfac;
  border-radius: 5px;
  font-size: calc(var(--fs) * 1.6);
  font-weight: bold;
  text-indent: 0;
}
.preorder-notice > li > ul > li {
  padding: 0.25em 0;
  /*color: var(--color-red);*/
  display: inline-block;
}
@media screen and (min-width:768px) {
  .preorder-notice > li > ul > li:not(:last-of-type)::after {
    content: "/";
    margin: 0 1.5em;
    color: rgb(32 54 90 / 100%);
  }
}
/*preorder cancel*/
.cancel-text {
  margin: 0.5em 0 1em;
  font-family: var(--ff-NtSnsJP);
  font-size: calc(var(--fs) * 1.8);
  text-align: justify;
  display: inline-block;
}
/*info ancher link*/
.anchorlink-methodInfo-wrap {
  width: 100%;
  padding: 0;
  margin: calc(var(--rs) * 2) auto 0;
  container-type: scroll-state;
  position: sticky;
  top: 4rem;
  z-index: 1;
}
.anchorlink-methodInfo {
  width: 100%;
  padding: 0.5em 1%;
  background: #fff;
  font-size: calc(var(--fs) * 1.5);
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 2%;
  transition: all 0.4s;
}
.anchorlink-methodInfo li {
  width: calc(100% / 4 - 2%);
  margin: 0.5em auto;
  flex: 0 1 auto;
}
#DrsMiku20Wrap .anchorlink-methodInfo a {
  padding: 0.5em 1em;
  background: var(--c-sm26-article-fil);
  border: 2px solid #fff;
  border-radius: 3em;
  box-shadow: 0 2px 5px 1px #efe6d8;
  color: var(--c-sm26-bwn);
  outline: 3px solid var(--c-sm26-article-fil);
  text-align: center;
  display: block;
}
#DrsMiku20Wrap .anchorlink-methodInfo a:hover {
  background: #fff;
  box-shadow: none;
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .anchorlink-methodInfo {
    padding: 0.5em 2%;
    text-align: left;
    justify-content: flex-start;
  }
  .anchorlink-methodInfo li {
      width: calc(100% / 2 - 2%);
  }
}
@container scroll-state(stuck: top) {
  .anchorlink-methodInfo {
    width: 104%;
    margin: 0 -2%;
    background: var(--c-sm26-article-fil);
    border-bottom: 1px solid #fff;
    box-shadow: 0 2px 5px 1px #efe6d8;
  }
  .anchorlink-methodInfo a {
    border: none;
    outline: none;
  }
  .anchorlink-methodInfo a:hover {
    color: var(--c-sm26-red);
    text-decoration: none;
    opacity: 1;
  }
  @media screen and (min-width: 961px) {
    .anchorlink-methodInfo {
      top: calc(var(--rs) * 6);
      position: relative;
    }
  }
  @media screen and (max-width: 960px) {
    .anchorlink-methodInfo {
      width: 100vw;
      padding: 0 4%;
      margin: 0 calc(50% - 50vw);
    }
  }
  @media screen and (max-width: 767px) {
    .anchorlink-methodInfo li {
      /*width: auto;*/
    }
  }
}