@charset "utf-8";
/* CSS Document */

/*-------------------------------
 intro
---------------------------------*/
#intro {
  width: 100%;
  background: rgb(255 255 255 / 80%);
  font-family: var(--ff-zenmaruG);
  text-align: center;
  position: relative;
}
.intro-heading {
  padding: calc(var(--rs) * 1) 3%;
  color: var(--sasara-pnk);
  font-size: calc(var(--fs) * 3.2);
}
#introDD20th {
  width: min(100%, 88rem);
  padding: calc(var(--fs) * 1) 1% calc(var(--fs) * 1) 4%;
  margin: 0 auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}
.intro-text {
  margin: 0 auto;
  font-size: calc(var(--fs) * 0 + var(--rs) * 2.4);
  font-weight: bold;
  line-height: 1.3;
}
.intro-text  span {
  display: block;
}
.intro-logo {
  width: min(20%, 12rem);
  margin: calc(var(--rs) * -5) 0 calc(var(--rs) * -5) auto;
  filter: drop-shadow(1px 2px 3px rgb(0 0 0 / 80%));
}
/*-------------------------------
 dress design
---------------------------------*/
#drsDesign {
  width: 100%;
  position: relative;
}
#drsDesign-text {
  padding: calc(var(--fs) * 2) 3%;
  background: rgb(255 255 255 / 80%);
  font-family: var(--ff-zenmaruG);
  font-size: calc(var(--rs) * 2.2);
  text-align: center;
  line-height: 1.5;
}
#drsDesign-text p {
  width: min(100%, 96rem);
  margin: 0 auto;
}
#drsDesign-text b {
  font-size: calc(var(--rs) * 3.2);
  display: block;
}
#drsDesign {
  width: fit-content;
  margin: 0 auto;
  position: relative;
}
#drsDesign-illust {
  width: min(40%, calc(var(--rs) * 33));
  filter: drop-shadow(3px 6px 10px rgb(220 107 130 / 70%));
  position: absolute;
  left: calc(50% + var(--rs) * 8);
  top: calc(var(--rs) * -2);
  z-index: 1;
}
#drsDesign-img {
  mask-image: linear-gradient( to left, transparent 0%, black 10%, black 90%, transparent 100% );
  min-height: calc(var(--rs) * 60);
  object-fit: cover;
  position: relative;
}
hr.lace-line {
  width: 100%;
  height: calc(var(--rs) * 6);
  margin: calc(var(--rs) * -3) auto;
  background: url("/dd/special/th2/image/dddy_sasara20th/line_lace.png") 50% 50% / calc(var(--rs) * 104) repeat-x;
  border: none;
  filter: drop-shadow(3px 6px 10px rgb(220 107 130 / 70%));
  position: relative;
  z-index: 2;
}
/*-------------------------------
 gallery
---------------------------------*/
.mdl-imgCont {
  position: relative;
}
.mdl-imgCont-point {
  width: 100%;
  padding: calc(var(--rs) * 1) 3%;
  background: linear-gradient(90deg, rgb(236 99 132 / 60%) 0%, rgb(236 99 132 / 60%) 100%);
  color: #fff;
  font-family: var(--ff-zenmaruG);
  font-size: calc(var(--fs) * 1 + var(--rs) * 0.8);
  font-weight: bold;
  text-align: center;
  /*position: absolute;
  left: 0;
  bottom: 0;*/
}
.mdl-imgCont-point p:first-child {
  margin-bottom: 0.5em;
  font-size: calc(var(--fs) * 0.2 + var(--rs) * 1.6);
}
.mdl-imgCont-point p {
  text-shadow: 0 0 1px #cb2f54, 0 0 5px #cb2f54;
  filter: drop-shadow(0px 1px 1px #cb2f54) drop-shadow(0px 0px 10px #cb2f54);
}
/*-------------------------------
 spec
---------------------------------*/
.spec-imgCont-point {
  padding: 1em 3%;
  background: linear-gradient(180deg,  rgb(240 150 175 / 80%) 0%, rgb(233 155 177 / 80%) 50%, transparent 100%);
  color: #fff;
  font-family: var(--ff-zenmaruG);
  font-size: calc(var(--fs) * 1 + var(--rs) * 0.8);
  font-weight: bold;
  text-align: center;
}
.spec-imgCont-point ul {
  text-shadow: 0 0 1px #cb2f54, 0 0 5px #cb2f54;
  filter: drop-shadow(0px 0px 1px #cb2f54) drop-shadow(0px 0px 10px #cb2f54);
  display: inline-block;
}
.spec-imgCont-point ul li {
  text-align: left;
}
.spec-imgCont-pointDrs {
  padding: 1em 3%;
  background: linear-gradient(180deg, rgb(var(--bg-blu01-rgb) / 80%) 0%, transparent 90%);
  color: inherit;
  font-family: var(--ff-zenmaruG);
  font-size: calc(var(--fs) * 1 + var(--rs) * 0.8);
  font-weight: bold;
  text-align: center;
}
.pointDrs-heading {
  color: #fff;
  font-size: calc(var(--rs) * 3.8);
  font-weight: normal;
  text-shadow: 0 0 1px #e5648b, 0 0 5px #e5648b;
  filter: drop-shadow(0px 0px 1px #e5648b) drop-shadow(0px 0px 10px #e5648b);
}
.pointDrs-text {
  max-width: 80rem;
  margin: 0.5em auto;
  text-align: left;
}
.spec-imgCont-pointDrs ul {
  margin: 0.5em auto;
  color: #e5648b;
  text-shadow: 0 0 1px #fff, 0 0 5px #fff;
  filter: drop-shadow(0px 0px 1px #fff) drop-shadow(0px 0px 10px #fff);
  display: inline-block;
}
.spec-imgCont-pointDrs ul li {
  text-align: left;
}
/*-------------------------------
 spec decoration box
---------------------------------*/
.specBox {
  width: min(100%, 90.4rem);
  padding: 0 5%;
  margin: calc(5.5309734cqw * 0.5) auto calc(5.5309734cqw + 0.5em);
  background: url("/dd/special/th2/image/dddy_sasara20th/spec_frame-middle.png") 50% 0 / 100% repeat-y;
  container-type: inline-size;
  position: relative;
  z-index: 1;
}
.specBox::before {
  content: "";
  width: 100%;
  height: 5.5309734cqw;
  background: url("/dd/special/th2/image/dddy_sasara20th/spec_frame-top.png") 50% 0 / 100% no-repeat;
  position: absolute;
  left: 0;
  top: -5.5309734cqw;
  z-index: 1;
}
.specBox::after {
  content: "";
  width: 100%;
  height: 5.5309734cqw;
  background: url("/dd/special/th2/image/dddy_sasara20th/spec_frame-bottom.png") 50% 0 / 100% no-repeat;
  position: absolute;
  left: 0;
  bottom: -5.5309734cqw;
  z-index: 1;
}
/*-------------------------------
 dresss set
---------------------------------*/
#specDressContainer {
  width: min(100%, 128rem);
  margin: 0 auto;
}
/*dress image*/
.contDrsSpec {
  width: 94%;
  margin: 0 auto calc(var(--rs) * 4);
  margin-top: auto;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.contDrsSpec .contDrsImg {
  width: min(96%, 32rem);
  padding: 1%;
  flex: 1 1 auto;
}
.contDrsSpec .specTable {
  width: min(96%, 48rem);
  margin-top: 1em;
  flex: 1 1 auto;
}
/*-------------------------------
 link coloer
---------------------------------*/
#mdlDDdySasara20th .anchorlink-list {
  
}
#mdlDDdySasara20th .anchorlink-list a:not(:hover),
#mdlDDdySasara20th .anchorlink-list a:not(:hover) i {
  color: #fff;
  text-shadow: 0 0 1px #fa0e47, 0 0 3px #fa0e47;
  filter: drop-shadow(0 0 5px #fa0e47);
}
#mdlDDdySasara20th .anchorlink-list a:hover,
#mdlDDdySasara20th .anchorlink-list a:hover i {
  color: var(--sasara-pnk);
}