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

/*-------------------------------
  Main Header
---------------------------------*/
.main-header {
  padding-top: var(--height-hdrInfo);
  margin-bottom: calc(var(--rs) * -91);
  background:
    url("/dd/special/fate-go/2026/image/top_mainimg_saber_alter_bg.jpg") 50% var(--height-hdrInfo) / calc(var(--rs) * 200) no-repeat,
    linear-gradient(180deg, rgb(58 8 1 / 100%) 0%, rgb(58 8 1 / 100%) 100%)
  ;
  text-align: center;
  position: relative;
}
.main-header-img {
  width: fit-content;
  margin: 0 auto;
}
@media screen and (max-width: 960px) {
  .main-header {
    padding-top: var(--height-hdrInfo-sp);
    margin-bottom: calc(var(--rs) * -68);
    background: none;
  }
}
/*-------------------------------
 content
---------------------------------*/
.content-container {
  width: 100%;
  position: relative;
  z-index: 1;
}
.cont-inner {
  width: var(--w-cont);
  padding-bottom: 1px;
  margin: 0 auto;
  background: rgb(0 0 0 / 60%);
  position: relative;
}
.cont-inner-bs {
  box-shadow: 0 calc(var(--rs) * 0.5) calc(var(--rs) * 3) calc(var(--rs) * 0.6) rgb(0 0 0 / 70%);
}
/*content _ dds saber alter*/
#mdlDDSsaberAlter.content-container {
  background: 
    linear-gradient(180deg, rgb(0 0 0 / 60%) 0%, rgb(0 0 0 / 60%) calc(var(--rs) * 91), transparent 50%, rgb(0 0 0 / 60%) 100%),
    linear-gradient(180deg, transparent calc(var(--rs) * 91), rgb(0 0 0 / 40%) calc(var(--rs) * 91), transparent 100%)
}
/*content _ dress Alter Final*/
#drsAlter_final.content-container {
  background: 
    linear-gradient(180deg, rgb(0 0 0 / 70%) 0%, transparent 50%, rgb(0 0 0 / 70%) 100%),
    linear-gradient(180deg, rgb(0 0 36 / 50%) 0%, rgb(0 0 36 / 20%)  50%, rgb(0 0 36 / 50%) 100%),
    url("/dd/special/fate-go/2026/image/bg_pattern_cross-blu.png") 50% 0 / calc(var(--rs) * 97.2) repeat,
    #133e7d
}
/*content _ title*/
.sctn-title {
  width: var(--w-cont);
  padding: 0 2%;
  margin: 0 auto calc(var(--rs) * 3);
  color: #fff;
  font-size: calc(var(--rs) * 4.8);
  font-weight: normal;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
  text-shadow: 0 0 1px rgb(165 4 0 / 50%), 0 0 5px rgb(165 4 0 / 50%);
  filter: drop-shadow(0 0 5px rgb(165 4 0 / 50%)) drop-shadow(0 0 5px rgb(165 4 0 / 50%)) drop-shadow(0 0 5px rgb(165 4 0 / 50%));
  position: relative;
}
.sctn-title span {
  font-size: calc(var(--fs) * 2.4);
  display: block;
}
/*-------------------------------
 intro
---------------------------------*/
#intro {
  width: min(100%, 96rem);
  padding: 2em 2%;
  margin: 0 auto;
  color: #fff;
  font-family: var(--ff-NtSrfJP);
  font-size: calc(var(--rs) * 3.0);
  text-shadow: 0 0 1px rgb(165 4 0 / 50%), 0 0 5px rgb(165 4 0 / 50%);
  filter: drop-shadow(0 0 5px rgb(165 4 0 / 50%)) drop-shadow(0 0 5px rgb(165 4 0 / 50%)) drop-shadow(0 0 5px rgb(165 4 0 / 50%));
  text-align: center;
  position: relative;
}
.intro-heading {
  margin-bottom: 0.5em;
  font-size: calc(var(--rs) * 4.8);
  line-height: 1.2;
}
.intro-text {
  margin: 0 auto;
  font-size: calc(var(--fs) * 0 + var(--rs) * 2.4);
  font-weight: bold;
  line-height: 1.8;
}
.intro-text  span {
  display: block;
}
/*-------------------------------
 text box
---------------------------------*/
.cont-inner:has(.textBox) {
  padding: calc(var(--rs) * 5) 0;
  background: none;
  container-type: inline-size;
}
.textBox {
  width: min(100%, 96rem);
  padding: 0 8%;
  margin: calc(9.375cqw * 0.5) auto calc(9.375cqw * 0.5);
  background: url("/dd/special/fate-go/2026/image/part_frame_body.png") 50% 0 / 100% repeat-y;
  container-type: inline-size;
  color: #fff;
  font-family: var(--ff-NtSrfJP);
  font-size: calc(var(--fs) * 1.0 + var(--rs) * 0.8);
  line-height: 1.8;
  position: relative;
  z-index: 5;
}
.textBox > * {
  width: 100%;
}
.textBox::before {
  content: "";
  width: 100%;
  height: 9.375cqw;
  background: url("/dd/special/fate-go/2026/image/part_frame_top.png") 50% 0 / 100% no-repeat;
  position: absolute;
  left: 0;
  top: -9.375cqw;
  z-index: 1;
}
.textBox::after {
  content: "";
  width: 100%;
  height: 9.375cqw;
  background: url("/dd/special/fate-go/2026/image/part_frame_bottom.png") 50% 100% / 100% no-repeat;
  position: absolute;
  left: 0;
  bottom: -9.375cqw;
  z-index: 1;
}
/*-------------------------------
 saber alter _ dettail
---------------------------------*/
#sbrAtl02 {
  container-type: inline-size;
  position: relative;
}
#sbrAtl02::before {
  content: "";
  width: min(100%, 96rem);
  height: 15.625cqw;
  background: url("/dd/special/fate-go/2026/image/img_saber_alter_02-deco.png") 50% 0 / 100% no-repeat;
  position: absolute;
  left: 0;
  top: -15.625cqw;
  display: block;
}
/*-------------------------------
 dress design
---------------------------------*/
#drsDesign {
  width: 100%;
  position: relative;
}
#drsDesign-text {
  padding: calc(var(--rs) * 3.6) 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;
}
/*-------------------------------
 gallery
---------------------------------*/
.mdl-imgCont {
  position: relative;
}
/*-------------------------------
included items &  point
---------------------------------*/
.spec-includedBox {
  margin: 4% 3%;
  background: rgb(164 10 14 / 60%);
  display: flex;
  flex-flow: row-reverse wrap;
  align-items: center;
}
.spec-includedItems {
  width: min(96%, 32rem);
  margin: 0 auto;
  overflow: hidden;
  flex: 1 1 auto;
}
/*point text list*/
.spec-imgCont-point {
  width: min(100%, 48rem);
  padding: 1em 2%;
  color: #fff;
  font-family: var(--ff-NtSrfJP);
  font-size: calc(var(--fs) * 1.0 + var(--rs) * 0.6);
  font-weight: bold;
  list-style: disc;
  text-align: left;
  display: inline-block;
  flex: 1 1 auto;
}
.spec-imgCont-point li {
  margin-left: 1.5em;
  line-height: 1.3;
}
.spec-imgCont-point li ~ li {
  margin-top: 1em;
}

/*pint _ dress*/
.spec-imgCont-pointDrs {
  padding: 1em 3%;
  background: linear-gradient(180deg, rgb(10 40 100 / 70%) 0%, transparent 90%);
  color: #fff;
  font-family: var(--ff-NtSrfJP);
  font-size: calc(var(--fs) * 1 + var(--rs) * 0.8);
  font-weight: bold;
  text-align: left;
}
.pointDrs-heading {
  color: #fff;
  font-size: calc(var(--fs) * 1 + var(--rs) * 2);
  font-weight: normal;
  text-shadow: 0 0 1px #0a112b, 0 0 5px #0a112b;
  filter: drop-shadow(0px 0px 1px #0a112b) drop-shadow(0px 0px 10px #0a112b);
}
.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;
}

/*-------------------------------
 dresss set
---------------------------------*/
#specDressContainer {
  width: min(100%, 128rem);
  margin: 0 auto;
}
/*dress image*/
.contDrsSpec {
  width: 94%;
  padding-top: 1%;
  margin: 0 auto calc(var(--rs) * 4);
  margin-top: auto;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
}
.contDrsSpec .contDrsImg {
  width: min(96%, 32rem);
  padding: 1%;
  margin-top: 1em;
  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(--saber-ylw);
}
/*-------------------------------
 products list
---------------------------------*/
.productList-container {
  width: 100%;
  padding: 0;
  background: rgb(240 192 203 / 20%);
  text-align: center;
}
.productsThumbList {
  width: min(100%, 108rem);
  padding: calc(var(--rs) * 2) 2%;
  margin: 0   auto;
  font-size: calc(var(--fs) * 1.6);
  letter-spacing: 0.01em;
  text-align: center;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  transition: all 0.4s;
}
.prdctThumb-title {
  color: var(--c-gkmas-orgdrk);
  font-family: var(--ff-IBM-Sns);
  font-size: calc(var(--fs) * 4);
  font-style: italic;
  font-weight: normal;
  text-align: center;
  display: none;
}
.productsThumbList a {
  
}
.productsThumbList a:hover {
  filter: opacity(0.8);
  transition: all .3s;
}
.prdctThumb-ctg {
  width: 100%;
  margin: 1% auto;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.prdctThumb-ctg > :is(li,dd) {
  width: calc(100% / 3 - 0%);
  padding-bottom: 1em;
  margin: 1% 2%;
  background: rgb(255 255 255 / 90%);
  border-radius: calc(var(--rs) * 1);
  box-shadow: 0 2px 3px 1px rgb(50 50 50 / 20%);
  position: relative;
  order: 1;
  display: flex;
  flex-flow: column nowrap;
  /*flex-flow: row nowrap;*/
  align-items: center;
  justify-content: space-between;  
}
@media screen and (max-width: 640px) {
  .prdctThumb-ctg > :is(li,dd) {
    width: calc(100% / 2 - 4%);
    /*width: 100%;*/
  }
}
.prdctListThum-link {
  /*width: 20%;*/
}
.prdctsThum {
  background: none;
}
.prdctsThum img {
  border-radius: calc(var(--rs) * 1) calc(var(--rs) * 1) 0 0;
}
.prdctsThum,
.item-pic--thumb {
  position: relative;
}
.prdctsThum-name {
  min-height: 0;
  padding: 0.5em;
  margin-bottom: 0.5em;
  background: none;
  color: var(--saber-ylw);
  font-weight: normal;
  line-height: 1.4;
  position: relative;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
}
/*-------------------------------
 Online store link
---------------------------------*/
.link-olstore {
  width: min(94%, 72rem);
  margin: 0 auto;
  font-family: var(--ff-NtSnsJP);
  text-align: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.link-olstore-title {
  width: 100%;
  padding: calc(var(--rs) * 1);
  font-size: calc(var(--fs) * 1.8);
  font-weight: bold;
  letter-spacing: -0.05em;
  display: none;
}
.link-olstore-btn {
  width: min(96%, 24rem);
  margin: 0 2%;
  flex: 1 1 auto;
}
a.olstore-linkButton {
  width: min(100%,64rem);
  padding: 1.5em 1em;
  padding-right: 2em;
  margin: 0 auto;
  background: var(--c-link-cmn);
  border-radius: calc(var(--fs) * 6);
  color: #fff;
  font-size: calc(var(--fs) * 1.6);
  line-height: 1.3;
  text-align: center;
  display: block;
  position: relative;
}
a.olstore-linkButton:hover {
  color: #fff;
  filter: brightness(1.1);
}
a.olstore-linkButton small {
  margin: 0 auto;
  font-size: calc(var(--fs) * 1.3);
  display: block;
}
a.olstore-linkButton i {
  position: absolute;
  right: 0.5em;
  top: calc(50% - 0.4em);
}
a.olstore-linkButton.end {
  filter: grayscale(1);
}
a.olstore-linkButton.end i {
  display: none;
}