@charset "utf-8";
/* volks 50th anniversary project _ top css - update: 2022.08.26 */
/*-------------------------------
 wrapper top
---------------------------------*/
.wrapper-top {
  width: min(100%, calc(var(--rs) * 144));
  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;
}
/*-------------------------------
 project header
---------------------------------*/
#pjHeader {
  padding: calc(var(--rs) * 1) 0;
  background: var(--c-mc);
  margin: calc(var(--rs) * -0.6) 0 0;
  position: relative;
  z-index: 10;
}
#pjHeader-conts {
  width: min(100%, var(--w-md));
  padding-left: calc(var(--rs) * 20);
  padding-right: calc(var(--rs) * 1);
  margin: 0 auto;
  color: #fff;
  position: relative;
}
#pjHeader #logoMain {
  width: min(70%, calc(var(--rs) * 18));
  position: absolute;
  left: calc(var(--rs) * 1);
  top: calc(var(--rs) * -4);
}
#pjTitle {
  padding: calc(var(--rs) * 0.6) 0;
  font-size: calc(var(--fs) * 1.5);
  line-height: 1.2;
  transition:  1.8s ease-out;
}
@media screen and (min-width: 767px) {
  #pjTitle {
    font-size: calc(var(--fs) * 2.8);
  }
}
/*-------------------------------
 heroheader
---------------------------------*/
#heroHeader {
  --hh-bgP-base: 50% 0;
  --hh-bgS-base: cover;
  min-height: calc(100vh - var(--rs) * 14);
  padding: 1px 0;
  background-color: #a7c9ee;
  background-image:
    linear-gradient(0deg, hsl(46deg 48% 91%) 5%, hsl(46deg 44% 90% / 0%) 20%),
    url("/50th/assets/image/heroHeader_bg-base.jpg");
  background-position: 0 0, var(--hh-bgP-base);
  background-repeat: no-repeat;
  background-size: auto, var(--hh-bgS-base);
  position: relative;
}
#heroHeader-inner00 {
  --hh-bgP-shop01: 50% 0;
  --hh-bgS-shop01: auto;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0; top: 0;
  z-index: 0;
  background-image: url("/50th/assets/image/heroHeader_bg-shop01.png") ;
  background-position: var(--hh-bgP-shop01);
  background-repeat: no-repeat;
  background-size: var(--hh-bgS-shop01);
}
#heroHeader-inner {
  --hh-bgP-shopFS: 50% 0;
  --hh-bgP-shopHT2: 50% 0;
  --hh-bgP-kirakira: 50% 0;
  --hh-bgS-shopFS: auto;
  --hh-bgS-shopHT2: auto;
  --hh-bgS-kirakira: auto;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0; top: 0;
  z-index: 0;
  background-image:
    url("/50th/assets/image/heroHeader_bg-shopFS.png"),
    url("/50th/assets/image/heroHeader_bg-shopHT2.png"),
    url("/50th/assets/image/heroHeader_bg-kirakira.png")
    ;
  background-repeat: no-repeat;
  background-position: 
    var(--hh-bgP-shopFS),
    var(--hh-bgP-shopHT2),
    var(--hh-bgP-kirakira)
    ;
  background-repeat: no-repeat;
  background-size: 
    var(--hh-bgS-shopFS),
    var(--hh-bgS-shopHT2),
    var(--hh-bgS-kirakira)
    ;
}
@media (max-width: 1440px) {
  #heroHeader{
    --hh-bgP-shop01: 75% 0;
  }
  #heroHeader-inner {
    --hh-bgP-shopFS: 85% 0%;
    --hh-bgP-shopHT2: 85% 0%;
    --hh-bgP-kirakira: 85% 0%;
  }
}
@media (max-width: 768px) {
  #heroHeader-inner00 {
    --hh-bgP-shop01: 65% 0;
  }
  #heroHeader-inner {
    --hh-bgP-shopFS: 90% 140%;
    --hh-bgP-shopHT2: 90% 140%;
    --hh-bgP-kirakira: 100% 140%;
  }
}
@media (max-width: 475px) {
  #heroHeader-inner00 {
    --hh-bgP-shop01: 50% 0;
    --hh-bgS-shop01: 200%;
  }
  #heroHeader-inner {
    --hh-bgP-shopFS: 90% 90%;
    --hh-bgP-shopHT2: 90% 90%;
    --hh-bgP-kirakira: 35% 50%;
    --hh-bgS-shopFS: 260%;
    --hh-bgS-shopHT2: 260%;
    --hh-bgS-kirakira: 260%;
  }
}
/* project outline */
#pjOutline {
  width: min(100%, calc(var(--w-md) - var(--rs) * 4));
  margin: calc(var(--rs) * 8) auto 0;
  font-size: calc(var(--fs) * 2.0);
  padding: 0 calc(var(--rs) * 2);
  line-height: 1.6;
}
@media screen and (min-width: 800px) {
  #pjOutline {
  font-size: calc(var(--fs) * 2.8);
  }
}
.pj-outline__text {
  margin-top: 1em;
  font-weight: bold;
}
.pj-outline__text:not(#pjMessage) {
  filter: drop-shadow(0px 0px 5px #fff);
  text-shadow: 0 0 0 #fff, 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 5px #fff, 0 1px 10px #fff;
}
.pj-outline__text-dream {
  --c-l-pc-red: #cd0b00;
  margin: 1rem 1.5em;
  color: var(--c-l-pc-red);
  font-size: 125%;
  font-weight: bolder;
  display: inline-block;
}
#pjLink {
  width: min(85%, 50rem);
  padding: calc(var(--rs) * 4) 0;
}
#pjLink > * ~ * {
  margin-top: calc(var(--fs) * 2);
}
#pjLink > * > a {
  padding: 0.6em 1em;
  color: #fff;
  background: hsl(var(--btn-h) var(--btn-s) var(--btn-l) / 80%);
  border-radius: 2em;
  box-shadow: 0 0px 1px 1px var(--btn-bs-c);
  filter: drop-shadow(0px 0px 6px var(--btn-bs-c));
  font-weight: normal;
  font-size: calc(var(--fs) * 1.6);
  line-height: 1.1;
  text-align: center;
  display: block;
}
#pjLink > * > a.pjLink-conts {
  --btn-h: 353deg;
  --btn-s: 100%;
  --btn-l: 28%;
  --btn-bs-c: #dfbd4d;
}
#pjLink > * > a.pjLink-greeting {
  --btn-h: 220deg;
  --btn-s: 100%;
  --btn-l: 30%;
  --btn-bs-c: #dfbd4d;
}
#pjLink > * > a[class]:hover {
  --btn-l: 40%;
  text-decoration: none;
}
/*-------------------------------
 news
---------------------------------*/
#pjNews {
  --news-br: calc(var(--rs) * 1);
  width: min(96%, calc(var(--w-lg) - 3rem));
  padding: calc(var(--rs) * 0.5) calc(var(--rs) * 1);
  margin: calc(var(--rs) * 5) auto;
  background:  hsl(0deg 100% 100% / 80%);
  border-radius: var(--news-br);
  box-shadow: inset 0 0 5px hsl(0deg 0% 0% / 30%);
  display: flex;
  flex-flow: row wrap;
}
#pjNews > * {
  flex: 1 1 auto;
}
.news-heading {
  width: min(100%, 6em);
  padding: 0.2em 0.5em;
  margin: calc(var(--rs) * 0.5) 0;
  background: hsl(var(--c-l-pc-red-hsl));
  border-radius: var(--news-br);
  color: #fff;
  font-size: calc(var(--fs) * 2);
  font-weight: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--rs) * 0.5);
}
.news {
  width: min(100%, calc(var(--rs) * 90));
  max-height: 7em;
  padding: 0 0.5em;
  margin: calc(var(--rs) * 1) auto;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--c-l-pc-red-hsl));
  position: relative;
}
.news::-webkit-scrollbar {
  width: calc(var(--rs) * 1);
  height: calc(var(--rs) * 1);
}
.news::-webkit-scrollbar-track {
  border-radius: 0.5rem;
  background: #fcfcfc;
  box-shadow: 0 0 0.3rem #aaa inset;
}
.news::-webkit-scrollbar-thumb {
  background: hsl(var(--c-l-pc-red-hsl));
  border-radius: 0.5rem;
}
.news-list {
  padding: 0 0.5em 0.3em;
  margin: 0.3em auto;
  font-size: calc(var(--fs) * 1.4);
  line-height: 1.5;
  text-align: left;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  justify-content: flex-start;
}
.news-list ~ .news-list {
  padding-top: 0.8em;
  border-top: 1px dotted #a67a35;
}
.news-list > * {
  flex: 0 1 auto;
}
.news-time {
  color: hsl(var(--c-l-pc-red-hsl));
  font-size: 87.5%;
}
.news-time::after {
  content: "-";
  margin: 0 0.5em;
}
a.news-link:hover {
  background: none;
  text-decoration: none;
}
/*-------------------------------
 project lines
---------------------------------*/
#pjLines {
  background-image: 
    linear-gradient(
      0deg,
      hsl(var(--c-l-pc-red-dark-hsl)) 0%,
      hsl(var(--c-l-pc-red-hsl)) 30%,
      hsl(0deg 100% 100% / 0%) 30%
    );
}
.pj-lines{
  --ds-fil-cmn: drop-shadow(1px 2px 4px hsl(0deg 0% 0% / 60%));
  width: min(100%, var(--w-lg));
  padding: calc(var(--rs) * 2) calc(var(--rs) * 10) calc(var(--rs) * 1);
  padding-right: calc(var(--rs) * 5);
  margin: 0 auto;
  filter: var(--ds-fil-cmn);
  display: flex;
  flex-flow: row-reverse;
  justify-content: center;
}
.pj-lines__pop {
  --cont-text-ts: 1px 1px 0px #fff, 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 5px #fff;
  --cont-text-ds: drop-shadow(0 0 calc(var(--rs) * 5s) #fff);
  padding: 2.2em 0.5em 1.8em;
  background: url(/50th/assets/image/deco_pop.png) 50% 50% no-repeat;
  background-size: contain;
  color: #333;
  margin-left: calc(var(--rs) * -7);
  font-family: "wf-tegaki";
  font-size: calc(var(--fs) * 2.4);
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  text-indent: 0.5em;
  text-shadow: var(--cont-text-ts);
  filter: var(--cont-text-ds);
  transform: rotate(-3deg);
  position: relative;
  top: -2.4em;
  align-self: flex-start;
}
.pj-line__img {
  width: min(36%, calc(var(--rs) * 30));
  margin-left: -10%;
  transform: rotate(-3deg);
  position: relative;
  align-self: flex-end;
}