@charset "UTF-8";

/*  1. Base */
:root {
  /* --- Colors --- */
  --c-white: #ffffff;
  --c-brand: #5d1c82;

  /* Foreground */
  --c-fg-main: #000033;
  --c-fg-acc: #8308a1;
  --c-fg-blue: #1290e9;
  --c-fg-cyan: #0cbdff;

  /* Background */
  --c-bg-pale: #faf7ff;

  /* --- Gradients --- */
  --g-fg-6: linear-gradient(90deg, #621d96 0%, #1290e9 25%, #621d96 70%, #f22f7d 100%);
  --g-bg-3: linear-gradient(90deg, #f22f7d 0%, #621d96 50.48%, #0cbdff 100%);
  --g-bg-4: linear-gradient(0deg, #f22f7d 0%, #621d96 45%, #0cbdff 100%);

  /* --- Font --- */
  --font-main: "Noto Serif JP", serif;
  --mv-text: calc(1.31vw + 11.06px);
  --main-text: max(16px, calc(0.19vw + 15.3px));
  --sec-ttl: clamp(28px, calc(2.63vw + 18.15px), 56px);
  --sec-ttl-sb: clamp(16px, calc(0.94vw + 12.48px), 26px);
}

h2,
h3 {
  line-height: 175%;
  font-weight: 600;
  margin: 0;
}

html {
  scrollbar-gutter: stable;
}

body.is-scroll-locked {
  overflow: hidden;
}

.text-p {
  color: var(--c-fg-acc);
}

.text-b-6 {
  font-weight: 600;
}

.text-b-7 {
  font-weight: 700;
}

.text-break-no {
  white-space: nowrap;
}

.text-break {
  display: inline-block;
}

.contents-wrapper {
  box-sizing: border-box;
  width: 100%;
  line-height: 150%;
  font-size: var(--main-text);
  color: var(--c-fg-main);
  font-family: var(--font-main);
  font-weight: 500;
  position: relative;
}

.contents-wrapper a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease-in-out;
}

/* 2. Structure */
/* header */
header {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.is-fixed header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9996;
  width: 100%;
  box-sizing: border-box;
}

.hd-logo {
  padding: 30px 0 0 40px;
  position: absolute;
  z-index: 9995;

  img {
    width: 160px;
    aspect-ratio: 40/11;
  }
}

.hd-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10002;
}

.menu-toggle {
  width: 123px;
  height: 64px;
  display: flex;
  gap: 10px;
  align-items: center;
  border: none;
  cursor: pointer;
  color: var(--c-white);
  background: var(--g-bg-4);
  box-sizing: border-box;
  padding: 15px 24px 21px 24px;
  border-radius: 0 0 0 32px;
  border: none;
}

.menu-text {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: var(--font-main);
}

.menu-icon {
  width: 18px;
  height: 11px;
  display: flex;
  align-items: center;
}

.hamburger-svg {
  overflow: visible;
}

.hamburger-svg rect {
  transform-origin: center;
  transition: all 0.3s ease-in-out;
}

.is-active .svg-line-mid {
  opacity: 0;
}

.is-active .svg-line-top {
  -webkit-transform: rotate(45deg) translateY(5.5px);
  transform: rotate(45deg) translateY(5.5px);
}

.is-active .svg-line-bot {
  -webkit-transform: rotate(-45deg) translateY(-5.5px) translateX(-1px);
  transform: rotate(-45deg) translateY(-5.5px) translateX(-0.5px);
}

@media (max-width: 1145px) {
  .hd-logo img {
    width: 125px;
  }
}

@media (max-width: 915px) {
  .hd-logo {
    padding: 30px 0 0 20px;
  }
}

@media (max-width: 768px) {
  .hd-logo {
    padding: calc(14px + env(safe-area-inset-top, 0px)) 0 0 max(16px, env(safe-area-inset-left, 0px));

    img {
      width: 100px;
      aspect-ratio: 25/7;
    }
  }

  .hd-nav {
    top: env(safe-area-inset-top, 0px);
    right: env(safe-area-inset-right, 0px);
  }

  .menu-toggle {
    width: 60px;
    height: 52px;
  }

  .menu-text {
    display: none;
  }
}

/* menu */
.menu-wrapper {
  width: 53.403vw;
  height: 100vh;
  min-height: -webkit-fill-available;
  background-color: var(--c-white);
  position: fixed;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  box-sizing: border-box;
  padding: 56px 12px 40px;
  font-family: var(--font-main);
  z-index: 10001;
  transform: translateX(0);
  transition: transform 0.4s ease;
  pointer-events: auto;
}

/* JS有効時：初期は隠す */
.js .menu-wrapper {
  transform: translateX(100%);
  pointer-events: none;
  transition: transform 0.4s ease;
}

/* メニューオープン時 */
.js .menu-wrapper.is-open {
  transform: translateX(0);
  pointer-events: auto;
}

.menu-wrapper.is-open {
  transform: translateX(0);
  pointer-events: auto;
}

.menu-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  flex-shrink: 0;
}

.menu-inner .mv-logo {
  width: max(112px, 7.778vw);
  height: auto;
}

.menu-inner ul {
  margin-top: 40px;
  padding: 0;
  list-style: none;
  text-align: center;
}

.menu-anchor-wrapper {
  margin-bottom: 40px;
}

.menu-anchor-wrapper li:not(:first-child) {
  margin-top: 12px;
}

.menu-anchor-wrapper a {
  text-align: center;
  font-size: calc(0.38vw + 14.59px);
  line-height: 175%;
  letter-spacing: 0.025em;
  transition: all 0.3s ease-in-out;
}

.menu-buttons-box {
  margin-bottom: 0;
}

.menu-buttons-box li:not(:first-child) {
  margin-top: 16px;
}

.base-button {
  display: flex;
  min-width: 329px;
  border-radius: 50px;
  background: var(--g-bg-3);
  position: relative;
  overflow: hidden;
}

.base-button span {
  display: block;
  width: 100%;
  padding: 16px 64px 16px 52px;
  margin: 0 auto;
  color: var(--c-white);
  z-index: 2;
  font-size: var(--main-text);
  text-align: center;
}

.base-button::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: url("/80th/common/images/icon_blank.svg") no-repeat center/contain;
  z-index: 2;
}

.base-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-brand);
  z-index: 1;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

/* 端末での Sticky Hover を回避するため */
@media (any-hover: hover) {
  .menu-anchor-wrapper a:hover {
    color: var(--c-brand);
  }

  .base-button:hover::before {
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .menu-wrapper {
    width: 100%;
    max-width: 100vw;
    padding-top: calc(env(safe-area-inset-top, 0px) + 36px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  .menu-inner {
    width: 87.2vw;
  }

  .menu-buttons-box {
    gap: 3.2vw;
    width: 100%;
  }

  .menu-buttons-box .base-button {
    min-width: 0;
    width: 100%;
    max-width: 329px;
  }
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 51, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  pointer-events: none;
}

.menu-wrapper.is-open~.menu-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* JS 無効（scripting 非対応含む）：メニューをページ先頭の通常フローに表示 */
@media (scripting: none) {
  header {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .hd-logo {
    position: static;
    z-index: auto;
    padding: calc(14px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-left, 0px)) 0;
    align-self: flex-start;
  }

  .menu-wrapper {
    position: static;
    inset: auto;
    right: auto;
    top: auto;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    transform: none;
    transition: none;
    z-index: auto;
    overflow: visible;
    box-sizing: border-box;
    padding: 8px 16px 28px;
    flex: 0 1 auto;
  }

  .menu-inner {
    width: min(100%, 420px);
    margin: 0 auto;
  }

  .menu-inner ul {
    margin-top: 24px;
  }

  .menu-anchor-wrapper {
    margin-bottom: 24px;
  }

  .menu-overlay {
    display: none;
  }
}

@media (scripting: none) and (min-width: 769px) {
  .hd-logo {
    padding: 30px 0 0 40px;
  }

  .menu-wrapper {
    padding: 0 40px 40px;
  }

  .menu-inner {
    width: min(100%, 480px);
  }
}

/* main-visual */
.main-visual {
  width: 100%;
  background-image: url("/80th/common/images/main-visual.jpg");
  background-position: center;
  background-size: cover;
  aspect-ratio: 1440 / 920;
  height: auto;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  justify-content: center;
}

.mv-inner {
  min-width: 265px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: min(40px, 2.7vw);
  font-family: var(--font-main);
  margin-top: 8.33vw;
}

.mv-inner p {
  margin: 0;
}

.mv-logo {
  width: 19.4vw;
  height: auto;
}

.mv-lead-text {
  font-size: var(--mv-text);
  line-height: 175%;
}

@media (max-width: 767px) {
  .main-visual {
    background-image: url("/80th/common/images/main-visual-sp.jpg");
    min-height: 502px;
    aspect-ratio: 375 / 500;
    align-items: center;
  }

  .mv-inner {
    margin-top: 0px;
    gap: 0;
  }

  .mv-logo {
    width: clamp(140px, 37.33vw, 280px);
  }
}

/* scroll-guide */
.scroll-guide {
  position: absolute;
  height: 100%;
  left: 1.6%;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
  z-index: 9995;
}

.scroll-text {
  font-size: 14px;
  letter-spacing: 0.28px;
  text-transform: uppercase;
  transform: rotate(90deg);
}

.scroll-guide::after {
  content: "";
  display: block;
  width: 1px;
  height: 38%;
  background: linear-gradient(180deg, #0CBDFF 0%, #621D96 25%, #F22F7D 50%, #0CBDFF 50%, #621D96 75%, #F22F7D 100%);
  background-size: 100% 200%;
  animation: scroll-color-flow 3s linear infinite;
}

@keyframes scroll-color-flow {
  0% {
    background-position: 0 100%;
  }

  100% {
    background-position: 0 0%;
  }
}

@media (max-width: 767px) {
  .scroll-guide {
    display: none;
  }
}

/* section */
section[class^="sec-"] {
  padding: 136px 5.556vw 168px 5.556vw;
  border-radius: 32px 32px 0 0;
}

section[class^="sec-"]:first-of-type {
  border-radius: 0;
  background-image: url("/80th/common/images/bg-se01.jpg");
  background-position: top;
  background-size: cover;
}

section[class^="sec-"]:last-child {
  padding: 136px 80px;
}

section.sec-02 {
  margin-top: -32px;
  background-color: var(--c-white);
  background-image: url("/80th/common/images/bg-se02.webp");
  background-size: 100% auto;
  padding-top: 136px;
  padding-bottom: clamp(200px, 87.324px + 30.047vw, 520px);
  background-position: center calc(100% - 64px);
  background-repeat: no-repeat;
}

section.sec-03 {
  background-color: var(--c-bg-pale);
}

section[class^="sec-"] .content-ttl {
  display: flex;
  flex-direction: column-reverse;
  width: fit-content;
  align-items: flex-start;
}

section[class^="sec-"] .content-ttl .sub-ttl {
  -webkit-text-fill-color: initial;
  font-size: var(--sec-ttl-sb);
  font-weight: 500;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

section[class^="sec-"] .content-ttl .sub-ttl::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("/80th/common/images/icon.svg") no-repeat center/contain;
}

section[class^="sec-"] .content-ttl .main-ttl {
  display: block;
  font-size: var(--sec-ttl);
  line-height: 150%;
  background: var(--g-fg-6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

section[class^="sec-"] p {
  font-size: var(--main-text);
  line-height: 175%;
  margin: 0;
}

@media (max-width: 768px) {
  section[class^="sec-"]:first-of-type {
    background-image: url("/80th/common/images/bg-se01-sp.jpg");
    background-size: cover;
  }

  section[class^="sec-"],
  section[class^="sec-"]:last-child {
    padding: 64px 16px;
  }

  section.sec-02 {
    padding-bottom: clamp(200px, 107.042px + 24.789vw, 464px);
    background-position: center 90%;
  }
}

/* section sec-01 message */
p.text-signature {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  line-height: 175%;
  margin-top: 32px !important;

  .signature-bg {
    font-size: clamp(22px, 0.56vw + 19.89px, 28px);
    font-weight: 400;
  }

  .signature-sm {
    font-size: clamp(16px, 0.38vw + 14.59px, 20px);
  }
}

.sec-content {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  gap: 64px;
  align-items: center;
}

.item-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.item-logo img,
.item-img img {
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .item-content {
    gap: 24px;
  }

  .sec-content {
    width: 90vw;
    flex-direction: column;
    gap: 32px;
  }

  .item-content {
    order: 1;
  }

  .item-logo,
  .item-img {
    order: 2;
  }
}

/* section sec-02 symbol */
.sec-02 {
  .item-content {
    max-width: 792px;
  }

  .item-logo {
    width: 420px;

    @media (max-width: 768px) {
      width: 100%;
    }

    img {
      width: 260px;

      @media (max-width: 768px) {
        width: clamp(170px, 45.33vw, 260px);
        aspect-ratio: 113 / 111;
        flex-shrink: 0;
      }
    }
  }
}

/* section sec-03 policy */
.sec-03 {
  .item-content {
    width: 60%;
    max-width: 700px;

    @media (max-width: 768px) {
      width: 100%;
    }
  }

  .item-img {
    width: 40%;
    max-width: 516px;
    margin: 0 auto;

    @media (max-width: 768px) {
      width: 100%;
    }

    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }
}

/* footer-buttons */
.footer-buttons-wrapper {
  padding: 590px 16px 50px 16px;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 480px;
    background: url("/80th/common/images/bg-footer.jpg") no-repeat top / cover;
  }
}

.units-layout {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
  width: 100%;
  margin: 0 auto;
}

.units-layout+.units-layout {
  margin-top: 24px;
}

.flex-unit {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

@media (max-width: 767px) {
  .footer-buttons-wrapper {
    padding: 304px 16px 48px 16px;

    &::before {
      height: 240px;
    }
  }

  .units-layout {
    gap: 16px;
  }

  .flex-unit {
    width: 100%;
  }

  .units-layout+.units-layout {
    margin-top: 16px;
  }
}