@charset "UTF-8";

:root {
  /* color */
  --c-navy-01: #000365;
  --c-white: #ffffff;
  --c-black-01: #333333;
  --c-black-02: #505050;
  --c-black-03: #030000;
  --c-black-04: #000000;
  --c-black-05: #0f0f0f;
  --c-black-06: #231815;
  --c-gray-01: #f2f2f2;
  --c-gray-02: #f4f4f4;
  --c-gray-03: #e5e5e5;
  --c-blue-01: #0c2163;
  --c-blue-02: #006dd9;
  --c-blue-03: #0e3baa;
  --c-blue-04: #34539b;
  --c-blue-05: #00269a;
  --c-red-01: #ff0000;
  --c-ser-txt: #262626;
  --c-ser-01: #003c78;
  --c-ser-02: #007de3;
  --c-ser-03: #004499;
  --c-ser-04: #006eb6;
  --c-ser-05: #009ade;
  --c-ser-06: #004dff;

  /* font */
  --font-noto: "Noto Sans JP", sans-serif;
  --font-comfortaa: "Comfortaa", sans-serif;
  --font-ibm: "IBM Plex Sans JP", sans-serif;
  --font-shippori: "Shippori Mincho B1", serif;
  --font-noto-serif: "Noto Serif JP", serif;
  --font-josefin: "Josefin Sans", sans-serif;

  /* font-size */
  --base-font-size-pc: 62.5%;
  --base-font-size-tab: 56.25%;
  --base-font-size-sp: 54%;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 1.7rem;
  --fs-18: 1.8rem;
  --fs-19: 1.9rem;
  --fs-20: 2rem;
  --fs-21: 2.1rem;
  --fs-22: 2.2rem;
  --fs-23: 2.3rem;
  --fs-24: 2.4rem;
  --fs-26: 2.6rem;
  --fs-28: 2.8rem;
  --fs-30: 3rem;
  --fs-32: 3.2rem;
  --fs-33: 3.3rem;
  --fs-35: 3.5rem;
  --fs-36: 3.6rem;
  --fs-37: 3.7rem;
  --fs-40: 4rem;

  /* font-weight */
  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;
}
@media screen and (max-width: 640px) {
  :root {
    --fs-16: 15px;
    --fs-15: 14px;
  }
}

body {
  font-family: var(--font-noto);
  font-size: var(--fs-16);
  line-height: 1.75;
  font-weight: var(--fw-medium);
  letter-spacing: 0.075em;
  color: var(--c-black-01);
  overflow-x: hidden;
}

/* Common Button */
.c-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  height: 64px;
  border: 1px solid var(--c-navy-01);
  color: var(--c-navy-01);
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  letter-spacing: 0.255em;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease;
}

.c-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid var(--c-navy-01);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: all 0.3s ease;
}

.c-btn:hover {
  background: var(--c-navy-01);
  color: var(--c-white);
  opacity: 1 !important;
}

.c-btn:hover::after {
  border-left-color: var(--c-white);
  right: 20px;
}
.c-btn.right {
  margin-left: auto;
  margin-right: 0;
}
.c-btn--grad__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  background: linear-gradient(90deg, #01013c, #0044c0);
  color: var(--c-white);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  letter-spacing: 0.255em;
  text-decoration: none;
  border-radius: 50px;
  width: 355px;
  transition: opacity 0.3s ease;
}
.c-btn--grad.center {
  text-align: center;
}
.c-btn--grad.arrow-right .c-btn--grad__link {
  gap: 8px;
}

.c-btn--grad.arrow-right .c-btn--grad__link::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 8px solid var(--c-white);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.c-btn--grad.arrow-right:hover .c-btn--grad__link::after {
  transform: translateX(4px);
}

@media screen and (max-width: 768px) {
  .c-btn {
    height: 56px;
    font-size: var(--fs-16);
    max-width: 100%;
  }
  .c-btn::after {
    right: 16px;
  }
  .c-btn--grad__link {
    font-size: var(--fs-14);
    padding: 12px;
    width: 300px;
  }
}
/* --------------------------------
  ttl
--------------------------------*/
.sec-ttl {
  position: relative;
  font-size: var(--fs-33);
  letter-spacing: 0.1em;
  font-weight: var(--fw-semibold);
  color: var(--c-navy-01);
}
.sec-ttl .small{
  font-size: var(--fs-28);
}
.sec-subttl {
  display: block;
  font-size: var(--fs-21);
  font-family: var(--font-comfortaa);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.3em;
  color: var(--c-black-02);
}
.sec-subttl .line{
  display: inline-block;
  padding-top: 15px;
  border-top: 0.5px solid var(--c-red-01);
}
@media screen and (max-width: 1200px) {
  .sec-ttl .small {
    display: block;
  }
}
@media screen and (max-width: 1024px) {
  .sec-ttl .small {
    display: inline-block;
  }
}
@media screen and (max-width: 960px) {
  .sec-ttl {
    font-size: var(--fs-33);
  }
}

@media screen and (max-width: 768px) {
  .sec-ttl {
    font-size: var(--fs-24);
  }
  .sec-ttl .small{
    font-size: var(--fs-18);
  }
  .sec-subttl {
    font-size: var(--fs-18);
  }
}

/* --------------------------------
  bg
--------------------------------*/
.bg-gray {
  background-color: var(--c-gray-01);
}
.blue-gradient {
  background: linear-gradient(90deg, #0c2163, #006dd9);
}

/* --------------------------------
  cmn-news (NEWS一覧)
--------------------------------*/
#cmn-news .cmn-news__list li {
  border-bottom: 1px solid var(--c-navy-01);
}
#cmn-news .cmn-news__list li:last-child {
  border-bottom: none;
}
#cmn-news .cmn-news__list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  padding: 24px 0;
  font-size: var(--fs-18);
  letter-spacing: 0.005em;
  position: relative;
  transition:
    background-color 0.6s ease,
    color 0.6s ease;
}
#cmn-news .cmn-news__list li a::before {
  content: none;
}
#cmn-news .cmn-news__list li a .cmn-news__date {
  flex-shrink: 0;
  color: inherit;
  padding-left: 24px;
}
#cmn-news .cmn-news__list li a .cmn-news__title {
  flex: 1;
  min-width: 0;
  padding-right: 24px;
  letter-spacing: 0.1em;
}
#cmn-news .cmn-news__list li a:hover {
  background: linear-gradient(90deg, #0c2163, #006dd9);
  color: var(--c-white);
  opacity: 1;
}
#cmn-news .cmn-news__list li a:hover::after {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--c-white);
  flex-shrink: 0;
  margin-left: auto;
}
@media screen and (max-width: 960px) {
  #cmn-news .cmn-news__list li a {
    gap: 24px;
  }
}
@media screen and (max-width: 768px) {
  #cmn-news .cmn-news__list li a {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 0;
  }
  #cmn-news .cmn-news__list li a .cmn-news__date,
  #cmn-news .cmn-news__list li a .cmn-news__title {
    padding-left: 1em;
    padding-right: 1em;
    font-size: var(--fs-16);
  }
  #cmn-news .cmn-news__list li a:hover::after {
    right: 0.5em;
  }
}
@media screen and (max-width: 600px) {
  #cmn-news .cmn-news__list li a {
    gap: 4px;
  }
}

/* --------------------------------
  cmn-news ページネーション
--------------------------------*/
#cmn-news .cmn-news__pagination {
  margin-top: 48px;
  display: none;
}
#cmn-news .cmn-news__pagination-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
#cmn-news .cmn-news__pagination-list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--c-navy-01);
  color: var(--c-navy-01);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}
#cmn-news .cmn-news__pagination-list li a:hover {
  background: var(--c-navy-01);
  color: var(--c-white);
  opacity: 1;
}
#cmn-news .cmn-news__pagination-list li.is-current a {
  background: var(--c-navy-01);
  color: var(--c-white);
  pointer-events: none;
}
#cmn-news .cmn-news__pagination-list li.is-disabled a {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/*--------------------------------
  map
--------------------------------*/
.works-map .works-map__ttl-main {
  text-align: center;
  font-size: clamp(20px, 3vw, var(--fs-35));
  letter-spacing: 0.1em;
  font-family: var(--font-shippori);
  font-weight: var(--fw-semibold);
  background-image: linear-gradient(
    90deg,
    #009ade,
    #007de3 21%,
    #006eb6 44%,
    #004499 69%,
    #003c78
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.works-map .works-map__scroll {
  width: 100%;
}

.works-map .works-map__wrap {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
}

.works-map .works-map__img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------
  c-bg-pin（GSAP pin 背景固定）
  - 中身の <img> / <picture> から currentSrc を取得して背景に設定（JS側）
  - 高さの上限は --c-bg-pin-max-h（デフォルト 654px）
--------------------------------*/
.c-bg-pin {
  --c-bg-pin-max-h: 654px;
  position: relative;
  width: 100%;
  height: min(var(--c-bg-pin-max-h), 80vh);
  max-height: var(--c-bg-pin-max-h);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.c-parallax-window {
  --c-bg-pin-max-h: 654px;
  --c-parallax-from: 45%;
  --c-parallax-to: 60%;
  position: relative;
  width: 100%;
  height: min(var(--c-bg-pin-max-h), 80vh);
  max-height: var(--c-bg-pin-max-h);
  overflow: hidden;
  background-size: cover;
  background-position: center var(--c-parallax-from);
  background-repeat: no-repeat;
  will-change: background-position;
}

.c-bg-pin picture,
.c-bg-pin img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.c-parallax-window picture,
.c-parallax-window img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.c-bg-pin img {
  object-fit: cover;
}

.c-parallax-window img {
  object-fit: cover;
}

/* about.css #history と同じスクロールヒント（マップ横スクロール時のみ表示） */
.works-map .scrollbar__wrapper {
  display: none;
}

/* 780px以下: 地図を768px固定＋横スクロールで閲覧 */
@media screen and (max-width: 780px) {
  .works-map .works-map__scroll {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    max-width: none;
    padding-inline: clamp(20px, 4%, 80px);
    box-sizing: border-box;
    padding-bottom: 24px;
  }

  .works-map .works-map__wrap {
    width: 768px;
    max-width: none;
    margin-inline: 0;
    margin-bottom: 24px;
  }

  .works-map .works-map__img {
    width: 768px;
    max-width: none;
    height: auto;
  }

  .works-map .scrollbar__wrapper {
    display: block;
    position: sticky;
    left: 0;
    bottom: 0;
    height: 12px;
    width: 100%;
    pointer-events: none;
  }

  .works-map .scrollbar__txt {
    position: absolute;
    right: calc(108px + 16px);
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 10px;
  }

  .works-map .scrollbar__txt img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .works-map .scrollbar {
    --bar-h: 0.5px;
    --bar-w: 108px;
    position: absolute;
    right: 10px;
    top: 50%;
    width: var(--bar-w);
    height: var(--bar-h);
    overflow: visible;
    transform: translateY(50%);
  }

  .works-map .scrollbar::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--c-blue-01);
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: left;
    animation: works-map-scrollbar-line 2.4s ease-in-out infinite;
  }

  .works-map .scrollbar::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, 50%);
    width: 0;
    height: 0;
    border-left: 6px solid var(--c-blue-01);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    pointer-events: none;
    opacity: 0;
    animation: works-map-scrollbar-arrow 2.4s ease-in-out infinite;
  }
}

@keyframes works-map-scrollbar-line {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  66% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

@keyframes works-map-scrollbar-arrow {
  0% {
    transform: translate(0, -50%);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  66% {
    transform: translate(var(--bar-w), -50%);
    opacity: 1;
  }
  100% {
    transform: translate(var(--bar-w), -50%);
    opacity: 0;
  }
}

.works-map .works-map__pin {
  position: absolute;
  z-index: 2;
  line-height: 0;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 40, 0.22));
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

.works-map .works-map__pin:hover {
  transform: translate(-50%, -100%) scale(1.04);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 40, 0.28));
  opacity: 1;
}
.works-map .works-map__pin.pin-07:hover {
  transform: translate(0, 0) scale(1.04);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 40, 0.28));
  opacity: 1;
}

.works-map .works-map__pin img {
  display: block;
  width: 123px;
  height: auto;
  aspect-ratio: 123 / 97;
  object-fit: contain;
}

.works-map .works-map__pin.works-map__pin--wide img {
  width: 140px;
  height: auto;
  aspect-ratio: 140 / 97;
  object-fit: contain;
}

.works-map .works-map__pin.pin-07 {
  transform: translate(0, 0);
}

@media screen and (max-width: 1100px) {
  .works-map .works-map__pin img {
    width: 80px;
  }

  .works-map .works-map__pin.works-map__pin--wide img {
    width: 100px;
  }
}

@media screen and (max-width: 600px) {
  .works-map .works-map__pin img {
    max-width: min(36vw, 160px);
  }
  .works-map .works-map__pin.works-map__pin--wide img {
    max-width: min(44vw, 220px);
  }
}

/* --------------------------------
  triangle-red
--------------------------------*/
.triangle-red {
  width: 0;
  height: 0;
  border-left: 6.5px solid transparent;
  border-right: 6.5px solid transparent;
  border-top: 8px solid var(--c-red-01);
}

/* --------------------------------
  cube-txt-anime
--------------------------------*/
.cube-txt-anime {
  display: inline-block;
  overflow: hidden;
}
.cube-txt-anime__inner {
  display: inline-block;
  transform: translate3d(0, 100%, 0);
}
.cube-txt-anime.is-show .cube-txt-anime__inner {
  transform: translate3d(0, 0, 0);
  transition: transform 1.25s cubic-bezier(0.37, 0.16, 0.12, 1);
}