@charset "utf-8";
/* volks 50th anniversary project _ report css - update: 2022.09.27 */

/*-------------------------------
 overwrite the style_50th_conts.css
---------------------------------*/
.report-title span {
  margin: calc(var(--rs) * 0.5) 0 calc(var(--fs) * 1.5);
  font-size: calc(var(--rs) * 7);
  letter-spacing: -0.1em;
  line-height: 1.0;
}
.report-title b {
  font-size: calc(var(--rs) * 5);
}
.report-headrimg {
  width: min(98%, 96rem);
}
/*-------------------------------
 photocon base
---------------------------------*/
.photocon-headrimg {
  width: min(98%, calc(var(--rs) * 108));
  margin: calc(var(--rs) * 2) auto;
}
.photocon-text {
  width: min(96%, calc(var(--rs) * 108));
  margin: 1.1em auto;
  color: #03286a;
  font-family: "wf-tegaki";
  font-size: calc(var(--fs) * 2.4);
  font-weight: bold;
  letter-spacing: -0.05em;
  line-height: 1.5;
  text-align: left;
}
section.photocon-award {
  margin: calc(var(--rs) * 5) auto ;
}
section.photocon-award + section.photocon-award {
  margin-top: calc(var(--rs) * 15);
}
.link-btn--IG {
  width: min(94%, 80rem);
  padding: calc(var(--fs) * 1.5) calc(var(--fs) * 1) calc(var(--fs) * 2);
  margin: calc(var(--fs) * 2) auto calc(var(--fs) * 4);
  background: linear-gradient(225deg, #BC32A4 0%, #E03768 50%, #F67C33 100%);
  border-radius: calc(var(--fs) * 0.5);
  box-shadow: 0 2px 2px 0 rgba(50, 50, 50, 0.2);
  color: #fff;
  font-family: "wf-tegaki";
  font-size: calc(var(--fs) * 2.4);
  text-align: center;
  display: block;
}
.link-btn--IG::before {
  content: '\f16d';
  font-family: "Font Awesome 5 Brands";
  font-weight: normal;
  margin: 0 0.4em;
  position: relative;
  top: 2px;
}
.link-btn--IG::after {
  content: '\f105';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin: 0 0.4em;
  position: relative;
  top: 2px;
}
.link-btn--IG:hover {
  color: #fff;
  text-decoration: none;
  filter: brightness(1.1);
}
.link-btn--IG > i {
  position: relative;
  top: 2px;
}
/*-------------------------------
 award
---------------------------------*/
.award {
  width: min(84%, 74rem);
  padding-bottom: calc(var(--rs) * 0.5);
  margin: 0 auto calc(var(--rs) * -4.4);
  font-size: calc(var(--rs) * 5);
  font-family: "wf-tegaki";
  filter: drop-shadow(2px 4px 2px rgb(50 50 50 / 30%));
  line-height: 1.2;
  position: relative;
  z-index: 1; 
}
/*award decoration*/
.award::before,
.award::after {
  content: "";
  border: solid #a10417;
  border-width: calc(var(--rs) * 2.5) calc(var(--rs) * 4);
  position: absolute;
  bottom: calc(var(--rs) * 0.7);
}
.award::before {
  border-left-color: transparent;
  border-left-width: calc(var(--rs) * 2.5);
  left: calc(var(--rs) * -5.5);
}
.award::after {
  border-right-width: calc(var(--rs) * 2.5);
  border-right-color: transparent;
  right: calc(var(--rs) * -5.5);
}
.award--deco {
  width: calc(100% + var(--rs) * 1);
  padding: calc(var(--rs) * 1) 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%, var(--line-award) 5%, rgba(0 0 0 / 0%) 7%, rgba(0 0 0 / 0%) 93%, var(--line-award)  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% )
    ;*/
  background-image: 
    linear-gradient(180deg, rgba(0 0 0 / 0%) 5%, var(--line-award) 5%, rgba(0 0 0 / 0%) 7%, rgba(0 0 0 / 0%) 93%, var(--line-award)  95%, rgba(0 0 0 / 0%) 95%),    linear-gradient(90deg, hsl(var(--c-l-pc-red-dark-hsl)) 0%, hsl(var(--c-l-pc-red-hsl)) 20%, hsl(353deg 100% 45%) 50%, hsl(var(--c-l-pc-red-hsl)) 80%, hsl(var(--c-l-pc-red-dark-hsl)) 100% )
    ;
  display: block;
  text-align: center;
  position: relative;
  z-index: 1;
}
.award--deco > span {
  background: linear-gradient(135deg, var(--gr-award));
  color: transparent;
  -webkit-background-clip: text;
  filter: drop-shadow(1px 1px 0px #fff) drop-shadow(2px 2px 1px rgb(0 0 0 / 50%));
}
.award--gold {
  --line-award: #d8cb8e;
  --gr-award: #a67a35 0%, #eae8ae 7%, #d09e3e 9%, #a67a35 25%, #eae8ae 40%, #a67a35 45%, #d09e3e 65%, #eae8ae 70%, #a67a35 80%, #eae8ae 95%, #a67a35 99%;
}
.award--silver {
  --line-award: #cbd6dc;
  --gr-award: #8a9095 0%, #ced9df 7%, #a6afb5 9%, #8a9095 25%, #ced9df 40%, #8a9095 45%, #a6afb5 65%, #ced9df 70%, #8a9095 80%, #ced9df 95%, #8a9095 99%;
}
.award--bronze {
  --line-award: #cda073;
  --gr-award: #d15223 0%, #dfbe8d 7%, #ca7b31 9%, #dfbe8d 25%, #ca7b31 40%, #ca7b31 45%, #ca7b31 65%, #dfbe8d 70%, #ca7b31 80%, #dfbe8d 95%, #ca7b31 99%;
}
.award--deco > b {
  font-size: calc(var(--fs) * 1.8);
  filter: drop-shadow(0 0 2px #000);
}
.award--deco::before,
.award--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);
}
.award--deco::before {
  border-left-color: transparent;
  border-right-width: calc(var(--rs) * 1);
  left: 0rem;
}
.award--deco::after {
  border-right-color: transparent;
  border-left-width: calc(var(--rs) * 1);;
  right: 0rem;
}
.ic-crown {
  width: calc(var(--rs) * 4.5);
  height: calc(var(--rs) * 4.5);
  margin-left: calc(var(--rs) * -4.5);
  display: inline-block;
  position: relative;
  top: 0.1em;
  left: -0.2em;
}
.ic-crown--gld::before {
  background: url("/50th/assets/image/photocon/ic_crown-gld.png") 50% 50% no-repeat;
}
.ic-crown--slv::before {
  background: url("/50th/assets/image/photocon/ic_crown-slv.png") 50% 50% no-repeat;
}
.ic-crown--brz::before {
  background: url("/50th/assets/image/photocon/ic_crown-brz.png") 50% 50% no-repeat;
}
.ic-crown::before {
  content: "";
  width: 100%;
  height: 100%;
  display: inline-block;
  background-size: cover;
}
/* present */
.award-present {
  margin: calc(var(--rs) * 7) 0 calc(var(--rs) * -0.5);
  color: var(--c-l-pc-red);
  font-size: calc(var(--fs) * 2.4);
  font-weight: bold;
  text-shadow: 1px 1px 0px rgb(255 255 255 / 100%);
  filter: drop-shadow(0px 2px 3px rgb(50 50 50 / 30%));
}
/*-------------------------------
 work
---------------------------------*/
.photocon-work {
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.work-list {
  width: min(100%, calc(var(--fs) * 96));
  margin: calc(var(--fs) * 4) auto 0;
  display: inline-block;
  position: relative;
}
.work-detail {
  margin: 0 auto;
  background: #fff;
  outline: 1px solid #dbdbdb;
  box-shadow: var(--bs-cmn);
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  position: relative;
}
.work-photo {
  width: clamp(calc(var(--rs) * 48),100%, calc(var(--rs) * 64));
  margin: 0 auto;
  flex: 1 1 48rem;
}
.work-photo--w480 {
  max-width: 48rem;
}
.work-data {
  width: min(100%, 16rem);
  text-align: left;
  flex: 1 1 auto;
}
.work-acount {
  padding: 1em;
  border-bottom: 1px solid #dbdbdb;
}
.work-acount span {
  font-size: calc(var(--fs) * 1.4);
  font-weight: normal;
  display: none;
}
.work-acount a {
  color: #262626;
}
.work-acount a:hover {
  filter: opacity(0.5);
  text-decoration: none;
}
.work-text {
  max-height: calc(var(--rs) * 50);
  padding: 1em;
  padding-right: 0.8em;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: calc(var(--fs) * 1.4);
  line-height: /*1.28*/1.4;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--c-l-pc-red-hsl));
}
.work-text--h30 {
  max-height: calc(var(--rs) * 30);
}
.work-text--h35 {
  max-height: calc(var(--rs) * 35);
}
.work-text--h40 {
  max-height: calc(var(--rs) * 40);
}
.work-text--h45 {
  max-height: calc(var(--rs) * 45);
}
.work-text--h65 {
  max-height: calc(var(--rs) * 65);
}
.work-text::-webkit-scrollbar {
  width: /*calc(var(--rs) * 0.5)*/ 0;
  height: calc(var(--rs) * 0.5);
}
.work-text::-webkit-scrollbar-track {
  border-radius: 0.5rem;
  background: /*#fcfcfc*/ none;
  box-shadow: /*0 0 0.3rem #aaa inset*/ none;
}
.work-text::-webkit-scrollbar-thumb {
  background: /*hsl(var(--c-l-pc-red-hsl))*/ none;
  border-radius: 0.5rem;
}
.link-work .link-btn--IG {
  margin: calc(var(--rs) * 1) auto 0;
  box-shadow: none;
  font-size: calc(var(--fs) * 2.2);
  color: transparent;
  -webkit-background-clip: text;
}
.link-work .link-btn--IG::before,
.link-work .link-btn--IG::after {
  color: #d03480;
}
@media screen and (max-width: 680px) {
  .work-text--h30,.work-text--h35,.work-text--h40,.work-text--h45,.work-text--h60 {
      max-height: calc(var(--rs) * 50);
  }
}