@font-face {
  font-family: "DIN Alternate Bold";
  font-style: normal;
  font-weight: normal;
  src: local("DIN Alternate Bold"), url("../font/DINAlternate-Bold.woff") format("woff");
}
.l-pagetitle__inner::after {
  content: "PROJECT STORY";
}

.p-projIndexSec {
  padding: clamp( 40px, -19.1626213592px + 15.7766990291vw,170px) 0 clamp( 60px, -26.4684466019px + 23.0582524272vw,250px);
}
.p-projIndexSec__item:not(:last-child) {
  margin-bottom: clamp( 30px, 11.7961165049px + 4.854368932vw,70px);
}
.p-projIndexSec__item a {
  display: block;
  position: relative;
  color: #fff;
  transition: 0.3s opacity;
}
@media (any-hover: hover) {
  .p-projIndexSec__item a:hover {
    opacity: 0.7;
  }
}
.p-projIndexSec__item a .u-img {
  position: relative;
  z-index: 0;
  aspect-ratio: 1.5/1;
  overflow: hidden;
}
@media (min-width: 767px) {
  .p-projIndexSec__item a .u-img {
    aspect-ratio: 2/1;
  }
}
@media (min-width: 959px) {
  .p-projIndexSec__item a .u-img {
    aspect-ratio: 3/1;
  }
}
.p-projIndexSec__item a .u-img::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  mix-blend-mode: multiply;
  background-color: rgba(0, 40, 85, 0.24);
}
.p-projIndexSec__item a .u-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-projIndexSec__item a .u-txt {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: grid;
  place-items: center start;
  padding: 0 clamp( 20px, -2.7548543689px + 6.067961165vw,70px);
}
.p-projIndexSec__item a .u-txt h2 {
  font-size: clamp( 1.0625rem, 0.9771692961rem + 0.3640776699vw,1.25rem);
  line-height: 1.5;
}
.p-projIndexSec__item a .u-txt h2 span.u-inter {
  font-family: "Inter", system-ui;
  font-size: clamp( 3.75rem, 1.6167324029rem + 9.1019417476vw,8.4375rem);
  font-weight: 500;
  line-height: 1.1;
  display: inline-block;
  margin-bottom: 5px;
}
.p-projIndexSec__item a .u-txt h2 span.u-large {
  font-size: clamp( 1.875rem, 1.4199029126rem + 1.9417475728vw,2.875rem);
  display: inline-block;
  margin-top: 5px;
}
.p-projLead {
  text-align: center;
  margin-bottom: clamp( 50px, -41.0194174757px + 24.2718446602vw,250px);
}
.p-projLead__txt-inner {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: clamp( 30px, 20.8980582524px + 2.427184466vw,50px) 0 0;
}
.p-projLead__txt-inner::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 40, 85, 0.9);
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
}
.p-projLead__txt-inner > * {
  position: relative;
  z-index: 2;
}
.p-projLead__txt-inner h2 {
  font-size: clamp( 1.0625rem, 0.9771692961rem + 0.3640776699vw,1.25rem);
  line-height: 1.5;
  margin-bottom: 20px;
  position: relative;
  padding: 0 clamp( 30px, 20.8980582524px + 2.427184466vw,50px);
}
@media (min-width: 959px) {
  .p-projLead__txt-inner h2 {
    margin-bottom: 32px;
  }
}
.p-projLead__txt-inner h2 span.u-inter {
  font-family: "Inter", system-ui;
  position: absolute;
  left: 0.2em;
  top: -1em;
  font-weight: 500;
  font-size: clamp( 3.75rem, 1.3891838592rem + 10.072815534vw,8.9375rem);
  line-height: 1.1;
}
@media (min-width: 959px) {
  .p-projLead__txt-inner h2 span.u-inter {
    top: -0.8em;
    left: 0.3em;
  }
}
.p-projLead__txt-inner h2 span.u-large {
  font-size: clamp( 1.875rem, 1.4199029126rem + 1.9417475728vw,2.875rem);
  display: inline-block;
  margin-top: 5px;
}
.p-projLead__txt-inner h2 + p {
  font-weight: bold;
  font-size: clamp( 1rem, 0.7724514563rem + 0.9708737864vw,1.5rem);
  padding: 0 clamp( 30px, 20.8980582524px + 2.427184466vw,50px);
}
.p-projLead__bg {
  position: relative;
  z-index: 0;
  margin-bottom: calc(clamp(2.5rem, -0.913rem + 14.563vw, 10rem) * -1);
}
@media (min-width: 1199px) {
  .p-projLead__bg {
    margin-bottom: -160px;
  }
}
.p-projLead__overview {
  position: relative;
  margin-top: clamp( 30px, 20.8980582524px + 2.427184466vw,50px);
  padding: 0 clamp( 30px, 20.8980582524px + 2.427184466vw,50px) clamp( 35px, 23.6225728155px + 3.0339805825vw,60px);
  text-align: left;
}
.p-projLead__overview::before {
  content: "PROJECT STORY";
  font-family: "Inter", system-ui;
  color: #4682A0;
  opacity: 0.2;
  position: absolute;
  bottom: -0.5em;
  left: 50%;
  z-index: 0;
  font-weight: 500;
  translate: -50% 0;
  font-size: clamp( 2.5rem, -0.4296875rem + 12.5vw,8.9375rem);
  white-space: nowrap;
}
.p-projLead__overview > * {
  max-width: 900px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
.p-projLead__overview h3 {
  font-family: "Inter", system-ui;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
  font-size: clamp( 1.125rem, 1.0112257282rem + 0.4854368932vw,1.375rem);
}
@media (min-width: 959px) {
  .p-projLead__overview h3 {
    margin-bottom: 20px;
  }
}
.p-projLead__overview h3::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #fff;
  display: inline-block;
  position: relative;
  flex: 1;
}
.p-projLead__overview p {
  font-size: 1rem;
}
@media (min-width: 959px) {
  .p-projLead__overview p {
    font-size: 1.125rem;
  }
}
.p-projContents {
  background-color: #F0F0F0;
  padding-bottom: clamp( 60px, -26.4684466019px + 23.0582524272vw,250px);
  padding-top: clamp( 50px, 37.1575342466px + 3.4246575342vw,70px);
}
@media (min-width: 959px) {
  .p-projContents {
    padding-top: 50px;
  }
}
.p-projKeypoint {
  margin-bottom: clamp( 200px, 120.3580097087px + 21.2378640777vw,375px);
}
.p-projKeypoint__item:not(:last-child) {
  margin-bottom: 40px;
}
@media (min-width: 959px) {
  .p-projKeypoint__item:not(:last-child) {
    margin-bottom: clamp( 150px, -452.510460251px + 62.7615062762vw,300px);
  }
}
@media (min-width: 959px) {
  .p-projKeypoint__item {
    overflow: visible;
    position: relative;
  }
  .p-projKeypoint__item:nth-child(odd) .p-projKeypoint__item-img {
    right: 0;
  }
  .p-projKeypoint__item:nth-child(even) .p-projKeypoint__item-txt {
    margin-right: 0;
    margin-left: auto;
  }
  .p-projKeypoint__item:nth-child(even) .p-projKeypoint__item-img {
    left: 0;
  }
}
.p-projKeypoint__item-txt {
  background-color: #fff;
  padding: clamp( 20px, 10.8980582524px + 2.427184466vw,40px) clamp( 30px, 16.3470873786px + 3.640776699vw,60px) clamp( 30px, 16.3470873786px + 3.640776699vw,60px);
}
.p-projKeypoint__item-txt h3 {
  font-size: clamp( 1.25rem, 0.9086771845rem + 1.4563106796vw,2rem);
  line-height: 1.5;
  margin-bottom: clamp( 15px, 8.1735436893px + 1.8203883495vw,30px);
}
.p-projKeypoint__item-txt h3 span {
  font-family: "Inter", system-ui;
  color: #4682A0;
  font-weight: 500;
  font-size: clamp( 1rem, 0.8293385922rem + 0.7281553398vw,1.375rem);
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}
.p-projKeypoint__item-txt h3 span::before {
  content: "";
  height: 1px;
  width: 28px;
  background-color: #4682A0;
  display: inline-block;
  position: relative;
}
.p-projKeypoint__item-txt p {
  font-size: clamp( 1rem, 0.9431128641rem + 0.2427184466vw,1.125rem);
}
@media (min-width: 959px) {
  .p-projKeypoint__item-txt {
    width: 50%;
    position: relative;
    z-index: 1;
  }
}
.p-projKeypoint__item-img {
  text-align: center;
}
.p-projKeypoint__item-img img {
  width: 100%;
}
@media (min-width: 959px) {
  .p-projKeypoint__item-img {
    width: 66.666%;
    position: absolute;
    z-index: 0;
    top: calc(clamp(6.25rem, -6.302rem + 20.921vw, 9.375rem) * -1);
  }
}
.p-projKeyman {
  overflow: visible;
}
.p-projKeyman:not(:last-of-type) {
  margin-bottom: clamp( 200px, 163.5922330097px + 9.7087378641vw,280px);
}
.p-projKeyman-inner {
  position: relative;
  background-color: #4682A0;
  padding: 0 clamp( 30px, 9.520631068px + 5.4611650485vw,75px) clamp( 50px, 27.2451456311px + 6.067961165vw,100px);
  color: #fff;
}
.p-projKeyman-inner::before {
  content: "KEY MAN";
  font-family: "Inter", system-ui;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: 50%;
  top: 0.1em;
  translate: -50% 0;
  font-size: clamp( 3.4375rem, -2.1658828883rem + 23.9077669903vw,15.75rem);
  line-height: 1;
  white-space: nowrap;
}
.p-projKeyman__mainImg {
  width: 250px;
  height: 250px;
  border-radius: 250px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: -125px;
  translate: -50% 0;
}
.p-projKeyman h3 {
  text-align: center;
  padding-top: 135px;
  font-size: clamp( 1rem, 0.9431128641rem + 0.2427184466vw,1.125rem);
  margin-bottom: clamp( 40px, 12.6941747573px + 7.2815533981vw,100px);
}
.p-projKeyman h3 strong {
  color: #002855;
  background-color: #fff;
  display: inline-block;
  border-radius: 100px;
  font-size: clamp( 1.125rem, 1.0112257282rem + 0.4854368932vw,1.375rem);
  min-width: 220px;
  margin-top: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
}
.p-projKeyman__item:not(:last-child) {
  margin-bottom: clamp( 40px, 21.7961165049px + 4.854368932vw,80px);
}
.p-projKeyman__item h4 {
  font-size: clamp( 1.0625rem, 0.9771692961rem + 0.3640776699vw,1.25rem);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: clamp( 10px, 5.4490291262px + 1.213592233vw,20px);
  line-height: 1.5;
}
@media (min-width: 959px) {
  .p-projKeyman__item h4 {
    margin-bottom: 20px;
  }
}
.p-projKeyman__item h4::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #fff;
  display: inline-block;
  position: relative;
  flex: 1;
}
.p-projKeyman__item-inner {
  flex-direction: column;
  gap: 30px;
}
@media (min-width: 959px) {
  .p-projKeyman__item-inner {
    flex-direction: row;
  }
}
@media (min-width: 1199px) {
  .p-projKeyman__item-inner {
    gap: 50px;
  }
}
.p-projKeyman__item-inner p span.u-large {
  font-weight: bold;
  display: inline-block;
  font-size: clamp( 1.25rem, 0.9086771845rem + 1.4563106796vw,2rem);
  line-height: 1.5;
  margin-bottom: 0.5em;
}
@media (min-width: 959px) {
  .p-projKeyman__item-txt {
    width: calc(100% - 30px - 34.285%);
  }
}
@media (min-width: 1199px) {
  .p-projKeyman__item-txt {
    width: calc(100% - 50px - 34.285%);
  }
}
@media (min-width: 959px) {
  .p-projKeyman__item-img {
    width: 34.285%;
  }
}
.p-projSpecial {
  margin: clamp( 50px, -4.6116504854px + 14.5631067961vw,170px) 0 clamp( 50px, 18.1432038835px + 8.4951456311vw,120px);
  overflow: visible;
}
.p-projSpecial a {
  display: block;
  background-color: #002855;
  position: relative;
  color: #fff;
  text-decoration: none;
  transition: 0.3s opacity;
}
@media (any-hover: hover) {
  .p-projSpecial a:hover {
    opacity: 0.7;
  }
}
.p-projSpecial a hgroup {
  padding: 30px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
@media (min-width: 767px) {
  .p-projSpecial a hgroup {
    padding: clamp( 30px, -56.7796610169px + 11.2994350282vw,90px) calc(45.8333% + 100px) clamp( 30px, -56.7796610169px + 11.2994350282vw,90px) clamp( 30px, -49.5480225989px + 10.3578154426vw,85px);
  }
}
.p-projSpecial a hgroup::after {
  content: "SPECIAL CONTENT";
  font-family: "Inter", system-ui;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: 50%;
  top: -0.1em;
  translate: -50% 0;
  font-size: clamp( 1.875rem, -0.9693567961rem + 12.1359223301vw,8.125rem);
  line-height: 1;
  white-space: nowrap;
  z-index: 0;
}
@media (min-width: 767px) {
  .p-projSpecial a hgroup::after {
    top: auto;
    bottom: -0.2em;
  }
}
.p-projSpecial a hgroup h3 {
  position: relative;
  z-index: 1;
  line-height: 1.2;
  font-size: clamp( 1.875rem, 1.4199029126rem + 1.9417475728vw,2.875rem);
  translate: 0 -20px;
}
.p-projSpecial a hgroup h3 span.u-sml {
  font-weight: 500;
  font-size: clamp( 1rem, 0.8293385922rem + 0.7281553398vw,1.375rem);
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.p-projSpecial a hgroup h3 span.u-sml::before {
  content: "";
  height: 2px;
  width: 30px;
  background-color: #fff;
  display: inline-block;
  position: relative;
}
.p-projSpecial a hgroup h3 span.u-mark {
  display: inline-block;
  border-radius: 100px;
  border: 1px solid #fff;
  width: clamp( 50px, 43.1735436893px + 1.8203883495vw,65px);
  aspect-ratio: 1;
  margin-left: clamp( 10px, 4.5388349515px + 1.4563106796vw,22px);
  position: relative;
  top: 0.3em;
  margin-top: -0.2em;
}
.p-projSpecial a hgroup h3 span.u-mark::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: scalex(0.9) rotate(45deg);
  position: absolute;
  top: calc(50% - 5px);
  left: 50%;
  translate: -50% 0;
  z-index: 10;
}
.p-projSpecial a hgroup p {
  position: relative;
  z-index: 1;
  font-weight: bold;
  margin-top: -0.2em;
}
@media (min-width: 767px) {
  .p-projSpecial a figure {
    position: absolute;
    right: clamp( 30px, 20.8980582524px + 2.427184466vw,50px);
    bottom: clamp( 30px, 20.8980582524px + 2.427184466vw,50px);
    z-index: 1;
    width: 45.8333%;
  }
}

.c-projNav {
  margin: clamp( 50px, 18.1432038835px + 8.4951456311vw,120px) 0 0;
}
.c-projNav ul {
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (min-width: 1199px) {
  .c-projNav ul {
    gap: 32px;
  }
}
.c-projNav ul li {
  width: calc((100% - 20px) / 2);
}
@media (min-width: 767px) {
  .c-projNav ul li {
    width: calc((100% - 40px) / 3);
  }
}
@media (min-width: 959px) {
  .c-projNav ul li {
    width: calc((100% - 80px) / 5);
  }
}
@media (min-width: 1199px) {
  .c-projNav ul li {
    width: calc((100% - 128px) / 5);
  }
}
.c-projNav ul li.active {
  opacity: 0.5;
  transition: 0.3s opacity;
}
@media (any-hover: hover) {
  .c-projNav ul li.active:hover {
    opacity: 0.5;
  }
}
.c-projNav ul li a {
  display: block;
  position: relative;
  color: #fff;
  text-align: center;
  transition: 0.3s opacity;
}
@media (any-hover: hover) {
  .c-projNav ul li a:hover {
    opacity: 0.7;
  }
}
.story01 .c-projNav ul li.-story01 {
  opacity: 0.5;
  transition: 0.3s opacity;
}
@media (any-hover: hover) {
  .story01 .c-projNav ul li.-story01:hover {
    opacity: 0.5;
  }
}
.story02 .c-projNav ul li.-story02 {
  opacity: 0.5;
  transition: 0.3s opacity;
}
@media (any-hover: hover) {
  .story02 .c-projNav ul li.-story02:hover {
    opacity: 0.5;
  }
}
.story03 .c-projNav ul li.-story03 {
  opacity: 0.5;
  transition: 0.3s opacity;
}
@media (any-hover: hover) {
  .story03 .c-projNav ul li.-story03:hover {
    opacity: 0.5;
  }
}
.story04 .c-projNav ul li.-story04 {
  opacity: 0.5;
  transition: 0.3s opacity;
}
@media (any-hover: hover) {
  .story04 .c-projNav ul li.-story04:hover {
    opacity: 0.5;
  }
}
.story05 .c-projNav ul li.-story05 {
  opacity: 0.5;
  transition: 0.3s opacity;
}
@media (any-hover: hover) {
  .story05 .c-projNav ul li.-story05:hover {
    opacity: 0.5;
  }
}
.c-projNav__txt {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: clamp( 1.0625rem, 0.9771692961rem + 0.3640776699vw,1.25rem);
  font-weight: bold;
  line-height: 1.5;
}
@media (min-width: 1199px) {
  .c-projNav__txt {
    font-size: 1.5rem;
  }
}
.c-projNav__txt span.u-inter {
  font-family: "Inter", system-ui;
  font-size: clamp( 1.5625rem, 1.1358464806rem + 1.8203883495vw,2.5rem);
  font-weight: 500;
  line-height: 1.1;
  display: inline-block;
  margin-bottom: 5px;
}
.c-projNav__img {
  position: relative;
  z-index: 0;
}
.c-projNav__img::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  mix-blend-mode: multiply;
  background-color: rgba(0, 40, 85, 0.24);
}
.c-projNav__img img {
  width: 100%;
}
/*# sourceMappingURL=project_story.css.map */