@charset "utf-8";
/*volks 50th anniversary project _ common css - update: 2022.09.12-01*/
/*-------------------------------
@import "/cs/assets/css/variable.css"; 
 media screen break point
- monitor: over 768px @media screen and (min-width: 768px)
- tablet: under 767px @media screen and (max-width: 767px)
- sp only: under 475px @media (max-width: 475px)
- sp only: under 375 @media (max-width: 375px)
---------------------------------*/
/*-------------------------------
 variable
---------------------------------*/
:root {
  /*background*/
  --bg-cmnA: rgb(255 255 255 / 100%);
  --wrap-bg-h: 46deg;
  --wrap-bg-s: 48%;
  --wrap-bg-l: 91%;
  --wrap-bg-a: 100%;
  --wrap-bgLG-h: 53deg;
  --wrap-bgLG-s: 100%;
  --wrap-bgLG-l: 97%;
  --wrap-bgLG-a: 100%;
  /*box-shadow*/
  --bs-cmn: 0 2px 3px 1px rgb(50 50 50 / 10%);
  /*color - base*/
  --c-h: 0deg;
  --c-s: 100%;
  --c-l: 100%;
  --c-a: 100%;
  --c-wht: #fff;
  --c-mc: #002e8a;
  --c-pc-ylw: #ffdc5e;
  --c-pc-blu: #50c4ea;
  --c-pc-red: #ee2d1d;
  --c-pc-red-dark: #8f0011;
  --c-mc-rgb: 0 46 138;
  --c-mc-hsl: 220deg 100% 27%;
  --c-pc-ylw-rgb: 255 220 94;
  --c-pc-blu-rgb: 80 196 234;
  --c-pc-red-rgb: 238 45 29;
  /*color - logo color*/
  --c-l-mc: #1d2253;
  --c-l-pc-ylw: #fcd04f;
  --c-l-pc-blu: #0097d5;
  --c-l-pc-red: #c42b22;
  --c-l-mc-rgb: 29 34 83;
  --c-l-pc-ylw-rgb: 252 208 79;
  --c-l-pc-blu-rgb: 0 151 213;
  --c-l-pc-red-rgb: 196 43 34;
  --c-l-pc-red-hsl: 353deg 87% 41%;
  --c-l-pc-red-dark-hsl: 353deg 100% 28%;
  /*color - bg*/
  --c-bg-wrapA: #fffaf7;
  --c-bg-wrapB: #f6f5f2;
  --c-bg-wrapC: #f2f1ed;
  --c-bg-wrapD: #f9f9f9;
  /*color - common*/
  --c-gry-dark: #595857; 
  --c-gry-light: #999; 
  --c-gry-pale: #ccc; 
  --c-gry-smoke: #eee; 
  /*color - link*/
  --c-link: #27abdc;
  --c-link-hover: #00f;
  /*color -text*/
  --c-txt-base: #222;
  /*common parts*/
  --bg-conts: repeating-linear-gradient(180deg, hsl(var(--wrap-bg-h) var(--wrap-bg-s) var(--wrap-bg-l) / var(--wrap-bg-a)), hsl(var(--wrap-bgLG-h) var(--wrap-bgLG-s) var(--wrap-bgLG-l) / var(--wrap-bg-a)), hsl(var(--wrap-bg-h) var(--wrap-bg-s) var(--wrap-bg-l) / var(--wrap-bg-a)));
  --border-r: calc(var(--rs) * 1); /*border-radius*/
  --cont-bg-blu: linear-gradient(0deg, hsl(228deg 40% 80%) 0%, hsl(225deg 43% 85%) 50%, hsl(223deg 44% 94%) 100%);
  --cont-bg-red: linear-gradient(0deg, hsl(12deg 96% 78%) 0%, hsl(14deg 64% 87%) 80%, hsl(20deg 60% 93%) 100%);
  --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; /*text-shadw: white*/
  --cont-text-ds: drop-shadow(0 0 calc(var(--rs) * 5) #fff); /*filter dorop-shadow: white*/
  --navi-cont-ts: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 5px #fff, 1px 1px 0px #fff, 0 0 calc(var(--rs) * 0.5) #fff;
  /*gradation*/
  --gr-gld: #a67a35 0%, #eae8ae 7%, #d09e3e 9%, #a67a35 25%, #eae8ae 40%, #a67a35 45%, #d09e3e 65%, #eae8ae 70%, #a67a35 80%, #eae8ae 95%, #a67a35 99%;
  /*font-size*/
  --fs: min(2.114vw,1rem);
  /*responsive-size*/
  --rs: clamp(0.5rem, 1.042vw, 1rem);
  /*width*/
  --w-xl: 144rem;
  --w-lg: 128rem;
  --w-md: 96rem;
  --w-sm: 80rem;
  --w-site: min(100%, 128rem);
  --w-cont: min(100%, 96rem);
  --w-box: min(90%, 80rem);
  /*higth*/
  --h-header: 5rem;
}
/*-------------------------------
 base
---------------------------------*/
*, *::before, *::after { /*box-sizing all*/
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html { 
  font-size: 62.5%;
}
body {
  background-color: #fff;
  background-image: url("/50th/assets/image/bg_body_pattern_vslogo.png"), linear-gradient(180deg, hsl(var(--c-mc-hsl) / 10%) 0%, hsl(var(--c-mc-hsl) / 60%) 5%, hsl(var(--c-mc-hsl) / 90%) 60%);
  background-position: 0% 0%;
  background-repeat: repeat;
  color: #000;
  /*font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, sans-serif;*/
  /*font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;*/
  font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-feature-settings: "palt";
  font-size: calc(var(--fs) * 1.6);
  -webkit-text-size-adjust: 100%;
}
/*image*/
img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  vertical-align: middle;
  /*image-rendering: -webkit-optimize-contrast;*/
}
figure {
  margin: 0;
}
/*link*/
a {
  color: var(--c-link);
  text-decoration: none;
}
a:hover {
  color:  var(--c-link-hover);
  text-decoration: underline;
}
a:hover > img {
  filter: opacity(0.8);
  transition: all 0.5s;
}
/*color*/
.pc-ylw {
  color: var(--c-pc-ylw);
}
.pc-blu {
  color: var(--c-pc-blu);
}
.pc-red {
  color: var(--c-pc-red);
}
/*Font*/
.font-mincho {
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
@font-face {
  font-family: "wf-tegaki";
  src: url("/50th/assets/fonts/HuiFontP29.eot");/*For IE*/
  src: url("/50th/assets/fonts/HuiFontP29.woff") format("woff"),/*For Modern browser*/
    url("/50th/assets/fonts/HuiFontP29.ttf") format("truetype");/*For iOS Android*/
}
.wf-sawarabi { /*@Google Fonts*/
  font-family: "Sawarabi Mincho";
}
.wf-tegaki {
  font-family:"wf-tegaki";
}
.wf-tegaki sup {
  font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica,sans-serif;
}
/*link button*/
.link-btn-container {
  width: min(96%, 80rem);
  margin: calc(var(--rs) * 1)  auto 0;
  text-align: center;
}
.link-btn {
  width: min(96%, 72rem);
  padding: calc(var(--rs) * 1.5) calc(var(--rs) * 3);
  margin: calc(var(--rs) * 2) auto;
  background: var(--c-link);
  border-radius: 5px;
  color: #fff;
  font-weight: normal;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-indent: -0.5em;
  display: inline-block;
  position: relative;
}
.link-btn:hover {
  color: #fff;
  text-decoration: none;
  filter: brightness(1.2);
}
.link-btn::after {
  content: "";
  width: 0;
  height: 0;
  border: 0.5em solid transparent;
  border-left-color: #fff;
  position: absolute;
  top: 50%;
  right: calc(var(--rs) * 0.5);
  margin-top: -0.5em;
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
/*link button - buy*/
.link-btn--buy {
  background: var(--c-red);
}
/*link button - bg white*/
.link-btn--wht:not(:hover) {
  background: var(--c-wht);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 10%) inset;
  color: var(--c-link);
}
/*.link-btn--wht:hover {
  background: var(--c-link);
  filter: opacity(0.9);
}*/
.link-btn--wht::after {
  border-left-color: var(--c-link);
}
/*link button - off & close */
.link-btn--off,
.link-btn--close {
  padding-top: 1em;
  padding-bottom: 1em;
  background: #ccc;
  color: #999;
  line-height: 1.2;
  pointer-events: none;
}
.link-btn--close {
  text-decoration: line-through;
}
.link-btn--off::after,
.link-btn--close::after {
  all: initial;
}
.link-btn--close > del {
  color: #777;
}
/*link button - small size*/
.link-btn.link-btn--small {
  width: auto;
  padding: calc(var(--rs) * 0.5) 3em;
  margin: 0.5em auto;
  font-size: 93.75%;
  text-indent: -0.5em;
}
.link-btn.link-btn--small::after {
  border-width: calc(var(--rs) * 0.6);
  top: calc(50% + 0.2em);
  right: 1%;
}
.link-btn.link-btn--smalcr {
  border-width: 0.5em;
  right: 0.5em;
  margin-top: -0.5em;
}
/*link button - down arrow*/
.link-btn.link-btn--down::after {
  margin-top: -0.25em;
  right: calc(var(--rs) * 1);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
/*link button - none marker*/
.link-btn:not(.link-btn--small).link-btn--nomarker {
  padding-right:  calc(var(--rs) * 3);
}
.link-btn.link-btn--nomarker::after {
  all: initial;
}
/*link text decorations*/
.link-text-container {
  padding: 0 1em;
  margin: 1em auto;
  line-height: 1.8;
  flex: 1 1 100%;
}
.link-text-container--more {
  width: min(100%, var(--w-lg));
  text-align: right;
}
.link-text-container--center {
  width: min(90%, var(--w-sm));
  text-align: center;
}
.link-text {
  display: inline-block;
}
.link-text::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  margin: 0 0 0 1rem;
  border: 0;
  border-top: 0.2em solid var(--c-link);
  border-right: 0.2em solid var(--c-link);
  display: inline-block;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: relative;
  top: -0.1em;
}
.link-text:hover::after {
  border-color: var(--c-link-hover);
}
.link-text.link-text--btn {
  padding: 0.4em 0.8em;
  margin: 0.5em 0;
  background: var(--c-link);
  border-radius: 2em;
  color: var(--c-wht);
  font-size: 93.75%;
  line-height: 1;
}
.link-text.link-text--btn:hover {
  background: var(--c-link-hover);
  text-decoration: none;
}
.link-text.link-text--btn::after,
.link-text.link-text--btn:hover::after,
.link-text.link-text--wht,
.link-text.link-text--wht::after,
.link-text.link-text--wht:hover::after {
  border-color: var(--c-wht);
  color: var(--c-wht);
}
.link-bg {
  padding: 0.1em 0.3em;
  background: rgb(255 255 255 / 50%);
  position: relative;
  top: -0.05em;
}
.link-text > img {
  margin: calc(var(--rs) * 0.5) auto;
  display: inline-block;
}
.link-not { /*link cancel*/
  pointer-events: none;
  color: #aaa;
}
.link-btn.link-not {
  background: #eee;
}
.link-btn.link-not::after {
  display: none;
}
/*text*/
.ta-l { text-align: left;}
.ta-c { text-align: center;}
.ta-r { text-align: right;}
/*video*/
iframe[title="YouTube video player"] {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
/*-------------------------------
 header
---------------------------------*/
header {
  width: 100%;
  padding: calc(var(--rs) * 1) calc(var(--rs) * 2);
  background: hsl(var(--c-l-pc-red-hsl));
  background-image: linear-gradient(90deg, hsl(var(--c-l-pc-red-dark-hsl)) 20%, hsl(var(--c-l-pc-red-hsl)) 50%, hsl(var(--c-l-pc-red-dark-hsl)) 80% );
  color: #fff;
  text-align: center;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
}
/*header logo*/
#headerLogo {
  /*position: absolute;
  left: calc(var(--rs) * 1);
  top: 1.5rem;
  z-index: 1;削除対象*/
  margin-top: calc(var(--fs) * -1.3);
  position: absolute;
  left: calc(var(--rs) * 1);
  top: 50%;
  z-index: 1;
}
.header-logo {
  width: calc(var(--fs) * 12);
  line-height: 1;
}
/*header conents*/
#headerConts {
  width: min(100%, var(--w-lg));
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.header-title {
  font-size: calc(var(--fs) * 1.8);
  display: flex;
  justify-content: center;
}
.header-title > a {
  color: #fff;
}
.header-title > a:hover {
  text-decoration: none;
}
.header-title_logo {
  height: 2em;
  margin: 0 0.5em;
}
/*header conents -  toggle button*/
.navi-menu-toggle {
  margin-top: calc(var(--rs) * -0.8);
  color: var(--c-wht);
  font-size: calc(var(--fs) * 1.1);
  display:block;
  position: absolute;
  right: calc(var(--rs) * 2);
  top: 50%;
  cursor: pointer;
  z-index: 999;
}
.navi-menu-toggle_tit {
  margin-top: 9px;
  display: block;
}
.navi-menu-toggle_btn,
.navi-menu-toggle_btn::before,
.navi-menu-toggle_btn::after {
  height: 3px;
  background: var(--c-wht);
  margin: 0 auto;
}
.navi-menu-toggle_btn {
  width: 90%;
  position: relative;
  display: block;
}
.navi-menu-toggle_btn::before,
.navi-menu-toggle_btn::after {
  width: 100%;
  content: "";
  position: absolute;
  left: 0;
  transition-duration: 0.3s;
}
.navi-menu-toggle_btn::before {
  top: -6px;
}
.navi-menu-toggle_btn::after {
  bottom: -6px;
}
/*toggle button - on*/
.navi-menu-toggle.on {
  --c-wht: hsl(var(--c-l-pc-red-hsl));
}
.navi-menu-toggle.on .navi-menu-toggle_btn {
  background: none;
}
.navi-menu-toggle.on .navi-menu-toggle_btn::before,
.navi-menu-toggle.on .navi-menu-toggle_btn::after {
  width: 80%;
  top: 0;
  bottom: 0;
  left: 10%;
}
.navi-menu-toggle.on .navi-menu-toggle_btn::before { 
  transform : rotate(40deg);
}
.navi-menu-toggle.on .navi-menu-toggle_btn::after {
  transform : rotate(-40deg);
}
/*-------------------------------
 header navigation
---------------------------------*/
#headerNavi {
  width: 100%;
  height: calc(100vh - var(--rs) * 0);
  padding: calc(var(--rs) * 10) 0;
  margin: 0 auto;
  background: hsl(44deg 45% 90% / 100%);
  background-position: 0 0;
  background-repeat: repeat;
  font-size: calc(var(--fs) * 1.6);
  overflow-y: auto;
  transition: .5s;
  /*transform: translateY(-100%);*/
  filter: opacity(0);
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  visibility: hidden;
}
#headerNavi-footer {
  padding: calc(var(--rs) * 2) 0;
  margin-top: calc(var(--rs) * 5);
  background-image: 
    url("/50th/assets/image/bg_body_pattern_vslogo.png"),
    linear-gradient(180deg, hsl(var(--c-mc-hsl) / 90%) 0%, hsl(var(--c-mc-hsl) / 90%) 100%)
    ;
  box-shadow: 0 10px 10px 5px hsl(235deg 100% 13% / 50%) inset;
  text-align: center;
}
/*navi - scrollbar*/
#headerNavi::-webkit-scrollbar {
width: calc(var(--rs) * 1);
height: calc(var(--rs) * 1);
}
#headerNavi::-webkit-scrollbar-track {
  border-radius: 0.5rem;
  background: #fcfcfc;
  box-shadow: 0 0 0.3rem #aaa inset;
}
#headerNavi::-webkit-scrollbar-thumb {
  background: #a8a8a8;
  border-radius: 0.5rem;
}
/*navi - open*/
#headerNavi.open {
  /*transform: translateY(0%);*/
  filter: opacity(1);
  z-index: 99;
  visibility: visible;
}
/*navi - contents*/
#headerNavi-contents {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}
#headerNavi-mainConts {
  width: min(96%, calc(var(--w-md) - var(--rs) * 22));
  padding: calc(var(--rs) * 1) calc(var(--rs) * 2);
  padding-top: calc(var(--fs) * 2.0);
  margin: 0 auto;
  margin-top: calc(var(--fs) * 5);
  background: #fff;
  border: calc(var(--rs) * 0.5) solid;
  border-image: linear-gradient(135deg, var(--gr-gld)) 10;
  box-shadow: 1px 1px 5px -1px #342d07 inset, var(--bs-cmn);
  position: relative;
}
.headerNavi-title {
  width: min(96%, 60rem);
  margin: calc(var(--fs) * -5) auto 0 !important;
}
.navi-mainConts {
  padding: calc(var(--rs) * 0.5);
  margin: calc(var(--fs) * 1.5) auto;
  border: calc(var(--rs) * 0.3) solid #eb8b70;
  border-radius: calc(var(--rs) * 1);
  background-image: var(--cont-bg-red);
  text-align: left;
}
.navi-mainConts:nth-child(2n -1) {
  background-image: var(--cont-bg-blu);
  border-color: #7b8cc2;
}
.navi-mainConts > a {
  padding: calc(var(--rs) * 0.4) 1em calc(var(--rs) * 0.4) 0;
  color: var(--c-l-mc);
  font-size: calc(var(--fs) * 1.8);
  font-weight: bold;
  line-height: 1.1;
  text-shadow: var(--navi-cont-ts);
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}
.navi-mainConts:nth-child(2n -1) > a {
  color: var(--c-l-pc-red);
}
.navi-mainConts > a:hover {
  filter: brightness(1.1);
  text-decoration: none;
}
.navi-mainConts > a::after {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-size: calc(var(--fs) * 1.6);
  font-weight: 900;
  position: absolute;
  right: 0.5em;
  top: calc(50% - 0.5em);
}
.navi-mainConts > a > img {
  width: min(20%, calc(var(--rs) * 5));
}
#headerNavi-subConts {
  min-width: calc(var(--fs) * 40);
  padding: 0 1em;
  margin: calc(var(--rs) * 4) auto;
  background-image: linear-gradient( 0deg, hsl(var(--c-l-pc-red-dark-hsl)) 0%, hsl(var(--c-l-pc-red-hsl)) 100% );
  border-radius: var(--border-r);
  box-shadow: var(--bs-cmn);
  text-align: center;
  display: inline-block;
}
.navi-subConts:not(:nth-last-child(1)) {
  border-bottom: 1px solid hsl(353deg 100% 28%);
}
.navi-subConts ~ .navi-subConts {
  border-top: 1px solid hsl(353deg 80% 45%);
}
.navi-subConts > a {
  padding: 0.4em 1em;
  color: #fff;
  display: block;
}
.navi-subConts > a:hover {
  background: hsl(0deg 0% 0% / 20%);
  filter: brightness(1.1);
  text-decoration: none;
}
.navi-bnr-report {
  width: min(90%, calc(var(--w-md) - var(--rs) * 26));
  margin: calc(var(--rs) * 4) auto;
}
#navi-50thTop {
  width: min(60%, calc(var(--rs) * 20));
  margin: calc(var(--rs) * 4) auto 0;
  text-align: center;
  filter: drop-shadow(0 calc(var(--rs) * 0.5) calc(var(--rs) * 0.5) hsl(0deg 0% 0% / 80%));
}
@media screen and (min-width: 768px) {
  body {
    padding-top: calc(var(--rs) * 6);
  }
  header {
    height: calc(var(--rs) * 6);
    padding-left: 12rem;
    padding-right: 16rem;
  }
  a[id]:not([href]) {
      height: calc(var(--rs) * 6);
      margin-top: calc(var(--rs) * -6);
      display: block;
  }
}
@media screen and (max-width: 767px) {
  body {
    padding-top: calc(var(--rs) * 10);
    background-size: 100%;
  }
  header {
    height: calc(var(--rs) * 10);
    padding-left: 0;
    padding-right: 0;
    transition: .5s;
  }
  a[id]:not([href]) {
      height: calc(var(--rs) * 10);
      margin-top: calc(var(--rs) * -10);
      display: block;
  }
  .header-logo {
    clip-path: inset(-0.2rem calc(var(--fs) * 7.4) -0.1rem 0rem);
  }
  .header-title {
    left: calc(var(--rs) * -1.6);
    position: relative;
  }
}
/*-------------------------------
 header animation
---------------------------------*/
/*open animation for  inner container*/
@keyframes menuOpen {
  0%{
    opacity: 0;
    transform: scaleX(0);
  }
  100%{
    pacity: 1;
    transform: scaleX(1);
  }
}
/*-------------------------------
 project contents (contents navigation)
---------------------------------*/
#pjConts {
  padding: calc(var(--rs) * 1) 0;
  margin: 0 auto;
  background-image: var(--bg-conts);
  overflow: hidden;
}
/*pj contents ic*/
.pujCont-icNews {
  background: #fefced;
  padding: calc(var(--fs) * 0.5) calc(var(--fs) * 1);
  margin: 0 calc(var(--rs) * 1) calc(var(--rs) * -2) 0;
  box-shadow: calc(var(--rs) * 0.2) calc(var(--rs) * 0.2) calc(var(--rs) * 0.3) 1px hsl(0deg 0% 0% / 30%);
  color: var(--c-l-pc-red);
  font-size: calc(var(--rs) * 1.8);
  font-weight: bold;
  line-height: 1;
  display: inline-block;
  position: relative;
  float: right;
  top: calc(var(--rs) * -1);
  transform: rotate(-4deg);
   z-index: 1;  
}
.pujCont-icNew {
  padding: 0.2em 0.5em;
  background: var(--c-l-pc-red);
 color: #fff;
  font-size: calc(var(--rs) * 1.4);
  position: absolute;
  left: calc(var(--rs) * -1);
  top: calc(var(--fs) * -1);
  transform: rotate(-10deg);
  z-index: 1;
}
.pujCont-icNew::before {
  content: "";
  width: 0;
  height: 0;
  border: calc(var(--rs) * 0.8) solid var(--c-l-pc-red);
  border-left-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  left: 20%;
  bottom: calc(var(--rs) * -1.1);
  transform: rotate(-10deg);
  z-index: -1;
}
/*pj contents - title*/
.pjContsList-title {
  width: min(84%, 74rem);
  padding-bottom: calc(var(--rs) * 0.5);
  margin: 0 auto calc(var(--rs) * -4.4);
  line-height: 1.2;
  position: relative;
  z-index: 1; 
}
.headerNavi-title.pjContsList-title {
  width: min(94%, 74rem);
}
/*pj contents -title decoration*/
.pjContsList-title::before,
.pjContsList-title::after {
  content: "";
  border: solid #a10417;
  border-width: calc(var(--rs) * 2.5) calc(var(--rs) * 4);
  position: absolute;
  bottom: calc(var(--rs) * 0.7);
}
.pjContsList-title::before {
  border-left-color: transparent;
  border-left-width: calc(var(--rs) * 2.5);
  left: calc(var(--rs) * -5.5);
}
.pjContsList-title::after {
  border-right-width: calc(var(--rs) * 2.5);
  border-right-color: transparent;
  right: calc(var(--rs) * -5.5);
}
.pjContsList-title--deco {
  width: calc(100% + var(--rs) * 1);
  padding: calc(var(--rs) * 1.8) calc(var(--rs) * 0);
  margin: 0 0 calc(var(--rs) * 1) calc(var(--rs) * -0.5);
  background: #ba1526;
  background-image: 
    linear-gradient(180deg, rgba(0 0 0 / 0%) 5%, #fff 5%, rgba(0 0 0 / 0%) 7%, rgba(0 0 0 / 0%) 93%, #fff 95%, rgba(0 0 0 / 0%) 95%),
    linear-gradient(90deg, hsl(var(--c-l-pc-red-dark-hsl)) 20%, hsl(var(--c-l-pc-red-hsl)) 50%, hsl(var(--c-l-pc-red-dark-hsl)) 80% )
    ;
  color: #fff;
  display: block;
  text-align: center;
  position: relative;
  z-index: 1;
}
.pjContsList-title--deco > b {
  font-size: calc(var(--fs) * 1.8);
  filter: drop-shadow(0 0 2px #000);
}
.pjContsList-title--deco::before,
.pjContsList-title--deco::after {
  content: "";
  border: calc(var(--rs) * 0.4) solid #74000e;
  border-bottom-color: transparent;
  position: absolute;
  bottom: calc(var(--rs) * -0.8);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.pjContsList-title--deco::before {
  border-left-color: transparent;
  border-right-width: calc(var(--rs) * 1);
  left: 0rem;
}
.pjContsList-title--deco::after {
  border-right-color: transparent;
  border-left-width: calc(var(--rs) * 1);;
  right: 0rem;
}
/*pj contents - list*/
#pjContsList {
  width: min(96%, var(--w-lg));
  padding: calc(var(--rs) * 1);
  padding-top: calc(var(--rs) * 4);
  margin: 0 auto;
  background: #fff;
  border: calc(var(--rs) * 0.5) solid;
  border-image: linear-gradient(135deg, var(--gr-gld)) 10;
  box-shadow: 1px 1px 5px -1px #342d07 inset;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
.pjContsList-cont {
  --pjContsList-br: 1rem;
  width: min(100%, calc(var(--rs) * 44));
  margin: 1%;
  border: 2px solid #fff;
  border-radius: var(--pjContsList-br);
  position: relative;
  flex: 1 1 auto;
}
.pjContsList-cont.pjCred {
  background-image: var(--cont-bg-red);
  border-color: #eb8b70;
}
.pjContsList-cont.pjCblu {
  background-image: var(--cont-bg-blu);
  border-color: #7b8cc2;
}
a.pjCont-link {
  width: 100%;
  height: 100%;
  border-radius: var(--pjContsList-br);
  color: inherit;
  display: block;
}
a.pjCont-link:hover {
  background: hsl(0deg 100% 100% / 20%);
  filter: brightness(1.1);
  text-decoration: none;
}
/*pj contents - list content*/
.pjCont {
  padding: calc(var(--rs) * 0.5) 0;
  border-radius: var(--pjContsList-br);
}
.pjCont-heading {
  padding: calc(var(--rs) * 0.5) calc(var(--rs) * 1) 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: calc(var(--rs) * 1);
  position: relative;
  z-index: 1;
}
.pjCred .pjCont-heading {
  color: var(--c-l-mc);
}
.pjCblu .pjCont-heading {
  color: var(--c-l-pc-red);
}
.pjCont-heading__no {
  width: min(20%, calc(var(--rs) * 8));
  flex: 0 0 auto;
}
.pjCont-heading_title {
  padding: calc(var(--rs) * 1.2) calc(var(--rs) * 0.5);
  font-size: calc(var(--fs) * 2.0);
  font-weight: bold;
  line-height: 1.1;
  text-shadow: var(--navi-cont-ts);
  filter: drop-shadow(0 0 calc(var(--rs) * 1) #fff);
  flex: 1 1 auto;
}
.pjCont-text {
  font-size: calc(var(--rs) * 2);
  font-weight: bold;
  line-height: 1.3;
  text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff;
  filter: drop-shadow(0 0 1px #fff);
  position: relative;
}
/*pj contents - list content 01*/
#pjCont01-text {
  margin-top: calc(var(--rs) * -4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#pjCont01-text > img {
  width: 20%;
  margin-top: calc(var(--rs) * 2);
  position: relative;
  display: block;
}
#pjCont01-text > span {
  width: 80%;
  padding: 0  calc(var(--rs) * 2) 0 calc(var(--rs) * 3);
  margin-top: calc(var(--rs) * 2);
  text-align: justify;
  position: relative;
  display: inline-block;
}
#pjCont01-text::before {
  content: "";
  width: 50%;
  height: 3em;
  background: url( "/50th/assets/image/pjContsList_pj01_kira-up.png") 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  left: calc(var(--rs) * -1);
  top: calc(var(--rs) * 2);
}
#pjCont01-text::after {
  content: "";
  width: 50%;
  height: 2.5em;
  background: url( "/50th/assets/image/pjContsList_pj01_kira-down.png") right bottom no-repeat;
  background-size: contain;
  position: absolute;
  right: 20%;
  top:60%;
}
/*pj contents - list content 02*/
#pjCont02 {
  padding-bottom: 0;
}
#pjCont02-text {
  margin-top: calc(var(--rs) * -3);
  display: flex;
  flex-flow: row-reverse nowrap;
  align-items: center;
  justify-content: flex-end;
}
#pjCont02-text > img {
  width: 25%;
  position: relative;
  display: block;
}
#pjCont02-text > span {
  width: 80%;
  padding: 0  calc(var(--rs) * 0.5) 0 0;
  position: relative;
  display: inline-block;
}
#pjCont02-text::before {
  content: "";
  width: 50%;
  height: 3em;
  background: url( "/50th/assets/image/pjContsList_pj02_kira-Lup.png") 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  top: calc(var(--rs) * 1);
}
#pjCont02-text::after {
  content: "";
  width: 30%;
  height: 2.5em;
  background: url( "/50th/assets/image/pjContsList_pj02_kira-Ldown.png") right bottom no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  bottom: calc(var(--fs) * -1.5);
}
#pjCont02-text > span::before {
  content: "";
  width: 20%;
  height: 3em;
  background: url( "/50th/assets/image/pjContsList_pj02_kira-Rup.png") right 0 no-repeat;
  background-size: contain;
  position: absolute;
  right: calc(var(--fs) * -1.5);
  top: calc(var(--fs) * -3);
  z-index: -1;;
}
#pjCont02-text > span::after {
  content: "";
  width: 20%;
  height: 2.5em;
  background: url( "/50th/assets/image/pjContsList_pj02_kira-Rdown.png") right bottom no-repeat;
  background-size: contain;
  position: absolute;
  right: calc(var(--rs) * 1);
  bottom: calc(var(--rs) * -3);
  z-index: -1;
}
/*pj contents - list content 03*/
#pjCont03 {
  height: 100%;
  background-image: 
    linear-gradient(180deg, hsl(0deg 100% 100% / 60%) 20%, hsl(0deg 100% 100% / 0%) 100%),
    url("/50th/assets/image/pjContsList_pj03_bg.png") 
    ;
  background-position: 0 0, right top;
  background-repeat: no-repeat;
  background-size: auto, cover;
}
#pjCont03-heading::before {
  content: "";
  width: 35%;
  height: calc(var(--rs) * 5);
  background: url(/50th/assets/image/pjContsList_pj03_kira-left.png) 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  bottom: calc(var(--rs) * -2.5);
}
#pjCont03-heading::after {
  content: "";
  width: 20%;
  height: calc(var(--rs) * 10);
  background: url(/50th/assets/image/pjContsList_pj03_kira-right.png) right bottom no-repeat;
  background-size: contain;
  position: absolute;
  right: calc(var(--rs) * 1);
  top: 0;
}
#pjCont03-text {
  padding: 0  0 1em calc(var(--rs) * 4);
  margin-top: calc(var(--rs) * 1);
  position: relative;
}
/*pj contents - list content 04*/
#pjCont04-text {
  margin-top: calc(var(--rs) * -4);
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}
#pjCont04-text > img {
  width: 25%;
  margin-top: calc(var(--rs) * -4);
  position: relative;
  display: block;
}
#pjCont04-text > span {
  padding-left: calc(var(--rs) * 4);
  margin-top: calc(var(--rs) * 2);
  position: relative;
  display: inline-block;
}
#pjCont04-text > span::before {
  content: "";
  width: 50%;
  height: 2.5em;
  background: url( "/50th/assets/image/pjContsList_pj04_kira-left.png") left 0 no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  top: calc(var(--fs) * -2.5);
}
/*pj contents - list content 05*/
#pjCont05-text {
  margin-top: calc(var(--rs) * -4);
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}
#pjCont05-text > img {
  width: 20%;
  margin-top: calc(var(--rs) * -2);
  position: relative;
  display: block;
}
#pjCont05-text > span {
  padding-left: calc(var(--rs) * 3);
  margin-top: calc(var(--rs) * 2);
  position: relative;
  display: inline-block;
}
#pjCont05-heading > .pjCont-heading_title::before {
  content: "";
  width: 50%;
  height: 3em;
  background: url(/50th/assets/image/pjContsList_pj05_kira-left.png) left center no-repeat;
  background-size: contain;
  position: absolute;
  left: calc(var(--rs) * -2);
  top: calc(var(--rs) * -2.5);
}
/*pj contents - list content 06*/
#pjCont06-text {
  margin-top: calc(var(--rs) * -4);
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}
#pjCont06-heading::before {
  content: "";
  width: 20%;
  height: calc(var(--rs) * 4);
  background: url( "/50th/assets/image/pjContsList_pj06_kira-left01.png") left 0 no-repeat;
  background-size: contain;
  position: absolute;
  left: calc(var(--rs) * -1);
  top: calc(var(--rs) * -1.5);
}
#pjCont06-heading > .pjCont-heading_title::before {
  content: "";
  width: 50%;
  height: 3em;
  background: url("/50th/assets/image/pjContsList_pj06_kira-left02.png") left center no-repeat;
  background-size: contain;
  position: absolute;
  left: calc(var(--rs) * -2);
  top: calc(var(--rs) * -2.5);
}
#pjCont06-heading > .pjCont-heading_title::after {
  content: "";
  width: 50%;
  height: 1em;
  background: url("/50th/assets/image/pjContsList_pj06_kira-right.png") left center no-repeat;
  background-size: contain;
  position: absolute;
  right: calc(var(--rs) * -2);
  top: calc(var(--rs) * -2.5);
}
#pjCont06-text > img {
  width: 20%;
  margin-top: calc(var(--rs) * -2);
  position: relative;
  display: block;
  top: calc(var(--rs) * -2);
}
#pjCont06-text > span {
  padding-left: calc(var(--rs) * 3);
  margin-top: calc(var(--rs) * 2);
  font-size: 93.75%;
  position: relative;
  display: inline-block;
}
/*pj contents - list content 07*/
#pjCont07-text {
  margin-top: calc(var(--rs) * -4);
  margin-bottom: calc(var(--rs) * -2);
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}
#pjCont07-text > img {
    width: 20%;
    position: relative;
    display: block;
    top: calc(var(--rs) * -2);
}
#pjCont07-text > span {
  padding-left: calc(var(--rs) * 3);
  margin-top: calc(var(--rs) * 1);
  font-size: 93.75%;
  position: relative;
  display: inline-block;
}
/*pj contents - list content 08*/
#pjCont08-text {
  padding-bottom: 1em;
}
#pjCont08-text > span {
  padding-left: calc(var(--rs) * 3);
  padding-right: calc(var(--rs) * 2);
  margin-top: calc(var(--rs) * 1);
  font-size: 93.75%;
  position: relative;
  display: inline-block;
}
#pjCont08::before {
    content: "";
    width: 20%;
    height: calc(var(--rs) * 10);
    background: url(/50th/assets/image/pjContsList_pj03_kira-right.png) right bottom no-repeat;
    background-size: contain;
    position: absolute;
    right: calc(var(--rs) * 1);
    bottom: 0;
}
/*pj contents - list content 09*/
#pjCont09-text {
  margin-top: calc(var(--rs) * -4);
  margin-bottom: calc(var(--rs) * -2);
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}
#pjCont09-text > img {
  width: 20%;
  margin-right: calc(var(--rs) * 1);
  position: relative;
  display: block;
  top: calc(var(--rs) * -2);
}
#pjCont09-text > span {
  padding-left: calc(var(--rs) * 3);
  margin-top: calc(var(--rs) * 1);
  font-size: 93.75%;
  position: relative;
  display: inline-block;
}
#pjCont09::before {
    content: "";
    width: 10%;
    height: 60%;
    background: url(/50th/assets/image/pjContsList_pj05_kira-left.png) left center no-repeat;
    background-size: contain;
    position: absolute;
    right: 20%;
    bottom: calc(var(--rs) * 2);
    transform: scale(-1, 1);
}
/*pj contents - list content 10*/
#pjCont10 {
  height: 100%;
  background-image: url("/50th/assets/image/pjContsList_pj10_bg.png") ;
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
}
#pjCont10-text {
  padding:  calc(var(--rs) * 1) calc(var(--rs) * 3) 1em;
}
#pjCont10::before {
  content: "";
  width: 20%;
  height: calc(var(--rs) * 4);
  background: url(/50th/assets/image/pjContsList_pj01_kira-down.png) right bottom no-repeat;
  background-size: contain;
  position: absolute;
  right: calc(var(--rs) * 1);
  top: calc(var(--rs) * 6);
}
@media screen and (max-width: 767px) {
  .pjContsList-cont:nth-child(2n).pjCred {
    background-image: var(--cont-bg-blu);
    border-color: #7b8cc2;
  }
  .pjContsList-cont:nth-child(2n).pjCred .pjCont-heading {
      color: var(--c-l-pc-red);
  }
  .pjContsList-cont:nth-child(2n -1).pjCblu {
    background-image: var(--cont-bg-red);
    border-color: #eb8b70;
  }
  .pjContsList-cont:nth-child(2n -1).pjCblu .pjCont-heading {
      color: var(--c-l-mc);
  }
}
/*-------------------------------
 retarn top page
---------------------------------*/
#pjTopRetarn {
  padding: 0 0 calc(var(--rs) * 10);
  font-size: calc(var(--fs) * 2);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  position: relative;
}
#pjTopRetarn > a:hover {
  text-decoration: none;
}
#pjTopRetarnLogo {
  margin: 0 auto;
}
#pjTopRetarnLogo img {
  width: min(60%, calc(var(--rs) * 24));
  display: inline-block;
  filter: drop-shadow(0 calc(var(--rs) * 0.5) calc(var(--rs) * 0.5) hsl(0deg 0% 0% / 80%));
}
#pjTopRetarnLogo > figcaption {
  --ds-fil-cmn: drop-shadow(1px 2px 1px #000);
  padding: calc(var(--rs) * 1) 0;
  background: linear-gradient(60deg,#b18e17, #eecb59 23%,#f8f0d2 24%, #f1ce5d 25%,#b18e17, #eecb59 73%,#f8f0d2 74%, #f1ce5d 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 400%;
  filter: var(--ds-fil-cmn);
  font-size: calc(var(--fs) * 2.2);
  text-align: center;
  animation: textAnime 15s both infinite ease-in-out alternate;
}
@keyframes textAnime{
  0%{ background-position:0% 50%}
  50%{ background-position:100% 50%}
  100%{ background-position:0% 50%}
}
/*-------------------------------
 footer
---------------------------------*/
footer {
  width: 100%;
  padding: calc(var(--rs) * 2) 0;
  background: #fff;
  font-size: calc(var(--fs) * 1.4);
  text-align: center;
  position: relative;
}
#footerCopylight {
  width: 100%;
}
/*footer logo*/
.copy-logo {
  margin: 1em auto 0;
  line-height: 1;
}
.footer-logo {
  width: min(calc(100vw / 3), 18rem);
  margin: calc(var(--rs) * 1) auto;
}
/*copylite text*/
.copylight-vs {
  margin: 1em auto;
}
.copylight-dollfie {
  font-size: calc(var(--fs) * 1.2);
}
/*footer note*/
.copy-note {
  padding: 0 2vw;
  margin: calc(var(--rs) * 2) auto 0;
  font-size: calc(var(--fs) * 1.1);
  line-height: 1.3;
  text-align: left;
  display: inline-block;
}
.copy-note > * {
  padding-left: 1em;
  text-indent: -1em;
}
.copy-note > * ~ * {
  margin-top: 0.2em;
}
/*-------------------------------
 Breadcrumbs - on contents wrapper
---------------------------------*/
.breadcrumbs-container {
  padding: calc(var(--rs) * 0.4) 0.5em;
  background: hsl(var(--c-l-pc-red-hsl));
  background-image: linear-gradient(90deg, hsl(var(--c-l-pc-red-dark-hsl)) 20%, hsl(var(--c-l-pc-red-hsl)) 50%, hsl(var(--c-l-pc-red-dark-hsl)) 80% );
  border-top: 1px solid #fee;
  border-image: linear-gradient(135deg, var(--gr-gld)) 10;
  position: relative;
}
.breadcrumbs-container::before {
  content: "";
  width: 100%;
  height: 100%;
  background: hsl(0deg 0% 0% / 10%);
  position: absolute;
  left: 0;
  top: 0;
}
.breadcrumbs-list {
  width: min(100%, calc(var(--rs) * 102.8));
  margin: 0 auto;
  font-size: calc(var(--rs) * 1.2);
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap;
  position: relative;
  z-index: 1;
}
.breadcrumbs-list > *:not(:last-of-type)::after {
  content: "\f054";
  margin: 0 1em;
  font-family: "Font Awesome 5 Free";
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  position: relative;
}
.breadcrumbs-list > * > a,
.breadcrumbs-list > *:last-of-type > a {
  color: #eae8ae;
  /*pointer-events: none;*/
  text-decoration: none;
}
.breadcrumbs-list > *:not(:last-of-type)::after,
.breadcrumbs-list > * > a:hover {
  color: #d09e3e;
}