@charset "utf-8";
/* volks 50th anniversary project _ contents css - update: 2022.11.04 */
/*-------------------------------
 common
---------------------------------*/
.bg-c--pnk {
  --c-h: 355deg;
  --c-s: 74%;
  --c-l: 88%;
  background-color: hsl(var(--c-h) var(--c-s) var(--c-l) / var(--c-a));
}
.bg-c--blu {
  --c-h: 240deg;
  --c-s: 30%;
  --c-l: 95%;
  background-color: hsl(var(--c-h) var(--c-s) var(--c-l) / var(--c-a));
}
.bg-c--blu hr {
  border-top:  1px solid #d1d1e5;
  border-bottom: 1px solid #fff;
}
.bg-c--sato {
  --c-h: 290deg;
  --c-s: 20%;
  --c-l: 90%;
  background-color: hsl(var(--c-h) var(--c-s) var(--c-l) / var(--c-a));
  background-image: url(https://dollfie.volks.lol/event/sato/image/bg_waWH.png);
  background-position: 50% 10%;
  background-repeat: repeat;
  background-size: 6rem;
}
.bg-c--add {
  --c-add-h: 240deg;
  --c-add-s: 30%;
  --c-add-l: 85%;
  background-color: hsl(var(--c-h) var(--c-s) var(--c-l) / var(--c-a));
  border: 2px solid hsl(var(--c-add-h) var(--c-add-s) var(--c-add-l) / var(--c-a));
  box-shadow: 0 calc(var(--rs) * 0.3) calc(var(--rs) * 0.6) hsl(var(--c-add-h) var(--c-add-s) calc(var(--c-add-l) - 10%) / calc(var(--c-a) - 50%));
}
.box--br {
  border-radius: var(--border-r);
}
/* project image cut */
.pj-img { 
  text-align: center;
}
.pj-img > figcaption {
  display: none;
}
/* link decoration */
.link-popup::after {
  content: url(https://dollfie.volks.lol/assets/image/icons/blank_ic01_alf05.png);
  margin-left: 0.5em;
}
/* text color */
.tc--red {
  color: var(--c-l-pc-red);
}
.tc--blu {
  color: var(--c-mc);
}
/* text alternative image */
.text-alt-img {
  display: none;
}
/* hr */
hr {
  width: 96%;
  height: 1px;
  padding: 0;
  margin: calc(var(--fs) * 2) auto;
  border: 0;
  border-top: 1px solid #f3eedd;
  display: block;
}
/*-------------------------------
 wrapper
---------------------------------*/
.wrapper {
  width: min(100%, calc(var(--rs) * 102.8));
  padding: 1px 0;
  margin: calc(var(--rs) * 4) auto calc(var(--rs) * 8);
  background: hsl(var(--wrap-bg-h) var(--wrap-bg-s) var(--wrap-bg-l) / var(--wrap-bg-a));
  box-shadow: 0 10px 10px 5px hsl(235deg 100% 13% / 50%);
  position: relative;
}
/*-------------------------------
 container
---------------------------------*/
.contents-container {
  width: min(96%, var(--w-lg));
  padding: calc(var(--rs) * 1) 0;
  margin: calc(var(--rs) * 2) auto calc(var(--rs) * 6);
  background: #fff;
  border: 5px solid #ccc;
  box-shadow: 1px 1px 5px -1px #342d07;
  border-radius: 1rem;
  position: relative;
}
.container--red {
  border-color: var(--c-l-pc-red);
}
.container--blu {
  border-color: var(--c-mc);
}
.cont-inbox {
  width: 96%;
  padding: calc(var(--rs) * 2);
  margin: calc(var(--rs) * 2) auto;
  position: relative;
}
.cont-fullbox {
  width: 100%;
  padding: calc(var(--rs) * 2) 4%;
  margin: calc(var(--rs) * 1) auto;
  position: relative;
}
/*-------------------------------
 contents local navigation
---------------------------------*/
.cont-navi-local {
  width: 96%;
  padding: calc(var(--rs) * 1) 0;
  margin: calc(var(--fs) * 1) auto;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  gap: calc(var(--rs) * 1);
}
.cont-navi-local::before,
.cont-navi-local::after {
  content: "";
  height: 0;
  order: 2;
}
.cont-navi-local::before,
.cont-navi-local::after,
.navi-local_list {
  width: min(100%, calc(var(--rs) * 30));
  flex: 1 1 auto;
}
.navi-local_list {
  position: relative;
}
.navi-local_list.ic-new::after {
    content: "New";
    color: var(--c-pc-red);
    font-family: "wf-tegaki";
    font-size: calc(var(--fs) * 2);
    font-weight: bold;
    letter-spacing: -0.05em;
    line-height: 1.0;
    text-shadow: 0px 2px 0 #fff, -1px 2px 0px #fff;
    position: absolute;
    left: calc(var(--rs) * -0);
    top: calc(var(--fs) * -1.8);
    transform: rotate(-11deg);
}
.navi-local_list .link-btn {
  width: 100%;
  height: 100%;
  padding: 
    calc(var(--rs) * 1) 
    calc(var(--fs) * 3) 
    calc(var(--rs) * 1) 
    calc(var(--fs) * 1.5);
  margin: 0;
  display: grid;
  align-items: center;
}
/*-------------------------------
 contents
---------------------------------*/
.container--red .cont-title {
  color: var(--c-mc);
}
.container--blu .cont-title {
  color: var(--c-l-pc-red);
}
.cont-title {
  padding: 0 calc(var(--rs) * 1);
  text-shadow: var(--cont-text-ts);
  display: flex;
  position: relative;
  z-index: 1;
}
.cont-title > * {
  display: inline-block;
}
.cont-title_no {
  width: min(18rem, calc(var(--rs) * 20));
  height: calc(var(--rs) * 10);
  margin-top: calc(var(--rs) * 0.5);
  background: url(/50th/assets/image/mark_pj_no-bg.png) 50% 50% no-repeat;
  background-size: contain;
  text-align: center;
  flex: 1 1 auto;
}
.cont-title_pj {
  padding: calc(var(--rs) * 1);
  font-size: calc(var(--fs) * 2.8);
  line-height: 1.2;
  flex: 0 1 80%;
  align-self: center;
}
@media screen and (min-width: 768px) {
  .cont-title_pj {
    font-size: calc(var(--fs) * 4);
  }
}
/* contents title read */
.cont-title-read {
  padding: 0 calc(var(--rs) * 2);
  margin: 0.5em calc(var(--rs) * 1);
  color: var(--c-mc);
  font-size: calc(var(--fs) * 2.4);
  font-weight: bold;
  line-height: 1.3;
  flex: 1 1 auto;
}
.cont-title-read > span {
  color: var(--c-l-pc-red);
}
.cont-title-read > b {
  padding: 0.2rem 0.5em;
  margin-bottom: 0.4em;
  background: var(--c-mc);
  color: #fff;
  font-size: 93.75%;
  display: inline-block;
  position: relative;
  left: -0.5em;
}
/* content - text decoration */
.cont-heading {
  margin: 0 calc(var(--fs) * -0.5);
  font-size: calc(var(--fs) * 2.0);
  line-height: 1.3;
  display: inline-block;
}
.cont-read {
  padding: 0 calc(var(--fs) * 1);
  margin: calc(var(--rs) * 1);
  font-size: calc(var(--fs) * 1.6);
  font-weight: bold;
  line-height: 1.4;
  display: inline-block;
}
.cont-text {
  padding: 0 1em;
  margin-top: 0.5em;
}
/*-------------------------------
 contents details
---------------------------------*/
.cont-box {
  width: min(98%, 92rem);
  padding: calc(var(--rs) * 0.5);
  margin: calc(var(--rs) * 2) auto;
  position: relative;
}
.cont-box--full {
  width: 100%;
  margin: calc(var(--rs) * 1) auto;
}
.cont-box-heading {
  padding: 0.3em calc(var(--rs) * 2);
  background: var(--cont-bg);
  color: #fff;
  font-size: calc(var(--fs) * 2);
  font-weight: bold;
  line-height: 1.2;
  text-shadow: 2px 2px 0px hsl(0deg 0% 0% / 90%);
  display: inline-block;
  position: relative;
  margin: calc(var(--rs) * 1) calc(var(--rs) * 2) 0;}
.cont-box-heading + .cont-info,
.cont-box-heading + .cont-outline {
  margin-top: calc(var(--rs) * -1);
}
.cont-box > .cont-box-heading {
  margin: calc(var(--rs) * 1) 0 0 calc(var(--rs) * -1.5) ;
}
.text-skew {
  display: inline-block;
  transform: skewX(-15deg);
}
.cont-box-text {
  margin: 1em calc(var(--rs) * 2) 0;
  font-size: calc(var(--fs) * 1.8);
}
.cont-info {
  padding: calc(var(--fs) * 1);
  background: var(--c-mc);
}
.cont-info-title {
  margin: calc(var(--rs) * 1) auto;
  text-align: center;
}
.cont-info-text {
  margin-top: calc(var(--fs) * 1);
  color: #fff;
  font-size: calc(var(--fs) * 2);
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
}
.cont-info > .link-btn-container {
  padding: calc(var(--rs) * 0.5) calc(var(--rs) * 1);
  margin: calc(var(--rs) * 2) auto;
  background: #fff;
  border-radius: calc(var(--rs) * 0.5);
}
.contColor-red {
  --cont-bg: var(--c-l-pc-red);
}
.contColor-blu {
  --cont-bg: var(--c-mc);
}
/*-------------------------------
 content details (list) 
---------------------------------*/
.cont-details {
  padding-left: calc(var(--fs) * 0.5);
  margin-top: calc(var(--rs) * 1);
}
.cont-details_list {
  padding-left: 1em;
  margin-top: 0.5em;
  line-height: 1.3;
  text-indent: -1em;
}
/*-------------------------------
 content schedule (list) 
 - dd: _detail
 - li: _list
---------------------------------*/
.cont-schedule {
  margin-top: 1em;
}
.cont-schedule_title {
  margin-bottom: 0.2em;
  font-size: 112.5%;
  font-weight: bold;
}
.cont-schedule_detail:not(:first-of-type),
.cont-schedule_list:not(:first-child) {
  margin-top: 0.5em;
}
.cont-schedule_detail {
  padding-left: calc(var(--fs) * 0.5625);
}
.cont-schedule_list {
  padding-left: 1em;
}
.cont-schedule_list::before {
  content: "";
  width: 0.5em;
  height: 1.3em;
  background: #555;
  margin-right: 0.5em;
  margin-left: -1em;
  margin-bottom: -0.3em;
  display: inline-block;
  position: relative;
}

/*-------------------------------
 outline
---------------------------------*/
.cont-outline {
  padding: calc(var(--rs) * 1) calc(var(--rs) * 1);
  background: #fff;
  border: 2px solid var(--c-mc);
}
.outline-details {
  position: relative;
}
.outline-detail-title {
  margin-top: calc(var(--rs) * 1);
  color: var(--c-mc);
  font-size: calc(var(--fs) * 2.4);
  font-weight: bold;
}
.outline-detail-title > small {
  color: #333;;
}
.outline-detail-cont {
  padding-left: 1em;
  margin: calc(var(--rs) * 1) calc(var(--rs) * 0.5);
  font-size: calc(var(--fs) * 1.4);
  text-indent: -1em;
}
.outline-detail-cont_head {
  padding-left: 1em;
  border-left: 0.5em solid hsl(220deg 100% 27% / 30%);
  color: var(--c-mc);
  font-size: 150%;
  font-weight: bold;
  display: inline-block;
}
.outline-detail-cont > b {
  font-size: 125%;
}
.outline-detail-cont > b > strong {
  font-size: 150%;
}
/*-------------------------------
 notice
---------------------------------*/
.notice-list {
  position: relative;
}
.notice-list > * {
  padding-left: 1em;
  margin-top: 0.2em;
  text-indent: -1em;
  line-height: 1.3;
  font-size: calc(var(--fs) * 1.4);
}

/*-------------------------------
 project01
 移動：style_50th_conts-pj01 (2022.03.07)
---------------------------------*/


/*-------------------------------
 project02
 移動：style_50th_conts-pj02 (2022.03.07)
---------------------------------*/