@charset "utf-8";
/* volks 50th anniversary project _ greeting css - update: 2022.03.11-01 */

/*-------------------------------
 greeting
---------------------------------*/
#pjGreeting {
  padding: calc(var(--rs) * 8) 0 0;
  background: #dccfbc;
  position: relative;
  display: flex;
  flex-flow: row-reverse wrap;
  align-items: flex-end;
  justify-content: center;
}
#pjGreeting::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgb(106 97 83 / 40%) 10%, transparent 10%), linear-gradient(180deg, rgb(220 207 188 / 95%) 0%, rgb(220 207 188 / 95%) 100%), url(/50th/assets/image/photo_philosophy.jpg?17721203);
  background-position: 50% 0%;
  background-repeat: repeat, repeat, no-repeat;
  background-size: 5px 5px, auto, cover;
  box-shadow: 0 calc(var(--rs) * -10) calc(var(--rs) * 10) rgb(255 255 220 / 20%) inset;
  filter: blur(1px);
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
/* greeting - letter */
.containr-pj-greeting {
  width: min(96%, 66rem);
  margin-bottom: calc(var(--rs) * 12);
  position: relative;
}
.pj-greeting {
  width: min(100%, 66rem);
  margin: calc(var(--rs) * -4) auto calc(var(--rs) * 3);
  background-color: #fff;
  background-image: linear-gradient( 0deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0) 98%, #5dacba 100%);
  background-size: 100% 1.8em;
  border: calc(var(--rs) * 2.56) solid rgb(255 252 247 / 100%);
  border-radius: 3px;
  box-shadow: 0 calc(var(--rs) * 0.5) calc(var(--rs) * 1) rgb(50 50 50 / 20%), inset 0 0 calc(var(--rs) * 40) 0 rgb(255 252 247 / 100%);
  font-size: calc(var(--fs) * 1.6);
  line-height: 2;
  position: relative;
}
.pj-greeting::after {
  content: "";
  width: calc(var(--rs) * 20);
  height: calc(var(--rs) * 15);
  aspect-ratio: 4/3;
  display: block;
  position: absolute;
  left: calc(var(--rs) * 1);
  bottom: calc(var(--rs) * -8);
  background: url("/50th/assets/image/photo_philosophy.jpg?17721203") 50% 50% no-repeat;
  background-size: auto;
  background-size: cover;
  border: 2px solid #fff;
  transform: rotate(-4deg);
  box-shadow: var(--bs-cmn);
}
.pj-greeting > p:not(.text-signature) {
  margin-bottom: 1.45em;
  text-indent: 1em;
}
.text-signature {
  width: 70%;
  margin: 1em 0 0 auto;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  font-weight: bold;
  line-height: 1.5;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-end;
}
/*.pj-greeting-thanks::after {
  content: "";
  width: 16rem;
  height: 12rem;
  display: block;
  position: absolute;
  left: 103%;
  bottom: calc(var(--rs) * 4);
  background: url("/50th/assets/image/photo_philosophy.jpg?17721203") 50% 50% no-repeat;
  background-size: auto;
  background-size: cover;
  border: 2px solid #fff;
  transform: rotate(-4deg);
  box-shadow: var(--bs-cmn);
}*/
.text-signature > img {
  width: calc(var(--rs) * 18);
  margin-left: 1em;
}
/* greetion - thanks */
.pj-greeting-thanks {
  width: min(48%, calc(var(--fs) * 24));
  line-height: 0;
  position: relative;
  right: calc(var(--rs) * -3);
  bottom: 0;
  flex: 0 1 auto;
  z-index: 2;
}
.pj-greeting-thanks__comment {
  width: 6em;
  padding-right: 1.1em;
  margin-left: -2.3em;
  color: #222;
  font-family: "wf-tegaki";
  font-size: calc(var(--fs) * 3);
  font-weight: bold;
  line-height: 1.2;
  text-indent: 0.3em;
  position: absolute;
  left: 36%;
  top: calc(var(--fs) * -7);
  z-index: 1;
}
/*.pj-greeting-thanks__comment::before {
  content: "";
  width: calc(var(--rs) * 28.7);
  height: calc(var(--rs) * 19.5);
  background: url("/50th/assets/image/deco_greeting-thanks.png") 50% 0 no-repeat;
  background-size: cover;
  position: absolute;
  top: calc(var(--rs) * -2.5);
  left: calc(var(--rs) * -10.5);
}*/
.pj-greeting-thanks__comment::after {
  content: "!";
  margin-left: 0.2em;
  text-indent: 0;
  position: absolute;
}
.comment-deco--l,
.comment-deco--c,
.comment-deco--r {
  width: calc(var(--fs) * 0.4);
  background: #222;
  position: absolute;
}
.comment-deco--l {
  height: calc(var(--rs) * 7.5);
  left: calc(var(--rs) * -7);
  top: calc(var(--rs) * 12);
  transform: rotateZ(-77deg);
}
.comment-deco--c {
  height: calc(var(--rs) * 14);
  left: calc(var(--rs) * -4);
  top: calc(var(--rs) * 0.5);
  transform: rotateZ(-30deg);
}
.comment-deco--r {
  height: calc(var(--rs) * 14);
  right: calc(var(--rs) * -1);
  top: calc(var(--rs) * -2.5);
  transform: rotateZ(10deg);
}
/*-------------------------------
 about volks (quote from base.css)
---------------------------------*/
#about-volks {
  padding: calc(var(--rs) * 4) 0 0;
  margin-bottom: calc(var(--rs) * 10);
  background: var(--c-bg-wrapA);
  position: relative;
}
#about-volks > section {
  padding-bottom: calc(var(--rs) * 4);
}
.heading-category {
  margin: calc(var(--rs) * 2) auto 0;
  color: var(--c-mc);
  font-size: calc(var(--fs) * 3.2);
  line-height: 1.2;
  text-align: center;
}
.heading-category-shoulder {
  margin: -0.5em auto 1rem;
  color: var(--c-gry-light);
  font-size: calc(var(--fs) * 1.2);
  text-align: center;
}
.heading-lead {
  max-width: var(--w-cont);
  margin: calc(var(--rs) * 1) ;
  margin-top: calc(var(--rs) * 4);
  color: var(--c-mc);
  font-size: calc(var(--fs) * 2);
  font-weight: bold;
  line-height: 1.8;
  position: relative;
}
.text-lead-catch {
  max-width: var(--w-cont);
  padding: 0 2vw;
  margin: 0 auto;
  margin-top: calc(var(--rs) * 4);
  color: var(--c-mc);
  font-size: calc(var(--fs) * 2);
  font-weight: bold;
  line-height: 1.8;
  text-align: center;
}
.text-lead-page {
  max-width: var(--w-cont);
  padding: 0 2vw;
  margin: calc(var(--rs) * 1) auto;
  color: var(--c-txt-base);
  font-size: calc(var(--fs) * 1.6);
  line-height: 1.8;
  text-align: center;
}
.container {
  max-width: var(--w-cont);
  margin: calc(var(--rs) * 4) auto;
  position: relative;
}
.container-img {
  text-align: center;
}
/* about volks: deployment */
.deployment {
  max-width: var(--w-cont);
  padding: 0 2%;
  margin: 0 auto;
  text-align: center;
}
.deployment-list {
  max-width: calc(var(--rs) * 78);
  padding: 0.5em;
  margin: calc(var(--rs) * 2) auto;
  background: #fff;
  box-shadow: var(--bs-cmn);
  font-size: calc(var(--fs) * 1.6);
  font-weight: bold;
  text-align: left;
}
.deployment-list > li {
  margin: 0.5em;
  display: inline-block;
}
.deployment-list > li::before {
  content: "\0025cf";
  color: #202020;
}
.dept-container {
  max-width: 100%;
  padding: calc(var(--rs) * 0.5) 2%;
  background: var(--c-bg-wrapC);
}
.dept-list {
  max-width: calc(var(--rs) * 90);
  margin: calc(var(--rs) * 2) auto;
  color: #333;
  font-size: calc(var(--fs) * 1.2);
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}
.dept-list.dept-list--1st {
  font-size: calc(var(--fs) * 1.4);
}
.dept-list > li {
  margin: calc(var(--rs) * 1);
  text-align: center;
  position: relative;
  flex: 0 1 auto;
}
.dept-list > li figcaption {
  margin-top: 0.5em;
  font-size: calc(var(--rs) * 1.6);
  line-height: 1.3;
}
.dept-list.dept-list--2nd > li figcaption {
  font-size: calc(var(--rs) * 1.3);
}
.dept-list > li b {
  margin-bottom: calc(var(--rs) * 0.5);
  font-size: 125%;
  display: inline-block;
}