@charset "UTF-8";
/* breakpoint */
:root {
  /* color */
  --color-gray01: #efedec;
  --color-gray02: #e2dfdd;
  --color-gray03: #d3cecb;
  --color-gray04: #5b5d63;
  --color-black01: #1f1f1f;
  --color-black02: #4c4c4c;
  --color-blue01: #1c486d;
  --color-blue01-light01: #335b7c;
  --color-blue01-light02: #557692;
  --color-blue01-light03: #7791a7;
  --color-blue02: #143c5e;
  --color-white: #ffffff;
  --color-brown01: #9d8a5b;
  --color-brown02: #b29c64;

  /* font */
  --base-font-size: 16; /* デフォルトのフォントサイズ */
  --rem: calc(1rem / var(--base-font-size));
  --font-bar: "Barlow Condensed", sans-serif;
  --font-ins: "Instrument Serif", serif;
  --font-zen: "Zen Old Mincho", serif;
  --rem: calc(1rem / var(--base-font-size));

  /* layout */
  --leading-trim: calc((1em - 1lh) / 2);
  --layout-width-min: 390px; /* SPのデザインカンプの横幅 */
  --layout-width-max: 1440px; /* PCのデザインカンプの横幅 */
  --content-width-sm: 1100px; /* コンテンツマックス幅 */
  --content-width-md: 1140px; /* コンテンツマックス幅 */
  --content-width-lg: 1180px; /* コンテンツマックス幅 */

  /* z-index */
  --z-index-modal: 500;
  --z-index-hamburger: 400;
  --z-index-menu-modal: 100;
  --z-index-overlay: 200;
  --z-index-header: 300;

  --header-height-sp: 72px;
  --header-height-pc: 100svb;
  --header-width-sp: 100%;
  --header-width-pc: 100px;

  --inline-content-space: calc(24 * var(--rem));
  --block-section-space: calc(96 * var(--rem)) calc(112 * var(--rem));
  @media (width >= 992px) {
    --inline-content-space: calc(80 * var(--rem));
  }
}

/* font */
/* デフォルト値 */
body {
  --clamp-viewport-min: 390;
  --clamp-viewport-max: 1440;
  --clamp-min: 14;
  --clamp-max: 16;
  background-color: var(--color-gray01);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-black01);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 2;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*,
::before,
::after {
  --clamp-root-font-size: var(--base-font-size);
  --clamp-slope: calc((var(--clamp-max) - var(--clamp-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)));
  --clamp-y-axis-intersection: calc(var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min)));
  --clamp-preffered-value: calc(var(--clamp-y-axis-intersection) * (1rem / var(--clamp-root-font-size)) + (var(--clamp-slope) * 100vw));
  --clamp: clamp(calc(var(--clamp-min) * (1rem / var(--clamp-root-font-size))), var(--clamp-preffered-value), calc(var(--clamp-max) * (1rem / var(--clamp-root-font-size))));
  font-size: var(--clamp);
}

/* 使用例
.sample {
  --clamp-min: 20;
  --clamp-max: 24;
} */
body * {
  box-sizing: border-box;
}

a.link {
  transition-duration: 0.2s;
  &:focus-visible {
    opacity: 0.7;
  }
}
@media (any-hover: hover) {
  a.link:hover {
    opacity: 0.7;
  }
}

a.text-link {
  color: var(--color-blue01);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  &::after {
    aspect-ratio: 5/4;
    background-color: currentColor;
    block-size: auto;
    content: "";
    display: inline-block;
    inline-size: 0.8em;
    -webkit-mask-image: url("../img/common/icon-new-tab.svg");
    mask-image: url("../img/common/icon-new-tab.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    margin-inline-start: 0.2em;
  }
}

a .img {
  transition-duration: 0.2s;
  &:focus-visible {
    scale: 1.1;
  }
}
@media (any-hover: hover) {
  a:hover .img {
    scale: 1.1;
  }
}

.l-main {
  margin-block-start: var(--header-height-sp);
  @media (width >=768px) {
    inline-size: calc(100% - var(--header-width-pc));
    margin-block-start: 0;
    margin-inline-start: var(--header-width-pc);
  }
}

.l-content-wrapper {
  padding-inline: var(--inline-content-space);
  width: 100%;
}

.l-content-wrapper * {
  box-sizing: border-box;
}

.l-content {
  margin-inline: auto;
}

.l-content-sm {
  max-inline-size: var(--content-width-sm);
}

.l-content-md {
  max-inline-size: var(--content-width-md);
}

.l-content-lg {
  max-inline-size: var(--content-width-lg);
}

.c-button-arrow-right {
  align-items: center;
  background-color: var(--color-black01);
  border-radius: 100px;
  column-gap: 1em;
  color: var(--color-white);
  display: inline grid;
  font-size: calc(16 * var(--rem));
  font-weight: 700;
  grid-template-columns: 1fr auto;
  letter-spacing: 0.04em;
  line-height: 1.8;
  min-inline-size: 240px;
  padding: 0.75em 1em 0.75em 1.5em;
  text-wrap: pretty;
  transition-duration: 0.4s;
  transition-property: border-radius;
  vertical-align: middle;
  @media (width >=768px) {
    min-inline-size: 264px;
    padding: 1.3125em 2em;
  }
  &:focus-visible {
    border-radius: 0;
  }
  @media (any-hover: hover) {
    &:hover {
      border-radius: 0;
    }
  }
  .text {
    text-align: center;
  }
  .arrow {
    background-color: var(--color-white);
    aspect-ratio: 1;
    border-radius: 50%;
    inline-size: calc(32 * var(--rem));
    position: relative;
  }
  .arrow::after {
    aspect-ratio: 1;
    background-color: var(--color-black01);
    content: "";
    inline-size: calc(19 * var(--rem));
    justify-self: end;
    left: 50%;
    -webkit-mask-image: url("../img/common/icon-arrow.svg");
    mask-image: url("../img/common/icon-arrow.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    position: absolute;
    top: 50%;
    translate: -50% -50%;
  }
}

.c-button-arrow-right--reverse {
  background-color: var(--color-white);
  color: var(--color-black01);
  .arrow {
    background-color: var(--color-black01);
  }
  .arrow::after {
    background-color: var(--color-white);
  }
}

.c-button-arrow-right-lg {
  --clamp-min: 22;
  --clamp-max: 32;
  align-items: center;
  background: var(--color-gray01);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: normal;
  border: 1px solid var(--color-black01);
  column-gap: 0.5em;
  color: var(--color-black01);
  display: inline grid;
  grid-template-columns: 1fr auto;
  inline-size: 100%;
  line-height: 1.8;
  padding: 1.09em 1.36em;
  position: relative;
  text-wrap: pretty;
  transition-duration: 0.4s;
  vertical-align: middle;
  @media (width >=768px) {
    padding: 2.25em 2.5em;
  }
  &::before {
    background: linear-gradient(color-mix(in srgb, var(--color-black01) 50%, transparent), color-mix(in srgb, var(--color-black01) 50%, transparent)), url(../img/common/bkg-button-arrow-lg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    inset: 0;
    opacity: 0;
    position: absolute;
    transition-duration: 0.4s;
    visibility: hidden;
    z-index: -1;
  }
  &::after {
    background-color: var(--color-black01);
    content: "";
    justify-self: end;
    -webkit-mask-image: url("../img/common/icon-arrow.svg");
    mask-image: url("../img/common/icon-arrow.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    inline-size: 1.818em;
    aspect-ratio: 1;
    position: relative;
    z-index: 1;
    @media (width >=768px) {
      inline-size: 1.75em;
    }
  }
  .text {
    position: relative;
    z-index: 1;
  }
  &:focus-visible::before {
    opacity: 1;
    visibility: visible;
    z-index: 0;
  }
  &:focus-visible::after {
    background-color: var(--color-white);
  }
  @media (any-hover: hover) {
    &:hover {
      color: var(--color-white);
    }
    &:hover::before {
      opacity: 1;
      visibility: visible;
      z-index: 0;
    }
    &:hover::after {
      background-color: var(--color-white);
    }
  }
}

.c-section-sub-heading {
  --clamp-min: 96;
  --clamp-max: 160;
  color: color-mix(in srgb, var(--color-white) 20%, transparent);
  font-family: var(--font-ins);
  line-height: 0.82;
  writing-mode: vertical-rl;
  @media (width >= 992px) {
    writing-mode: revert;
  }
}

.js-fadein {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-fadein.on {
  opacity: 1;
  transform: translateY(0);
}

/* header */
.p-header {
  background-color: var(--color-blue01);
  color: var(--color-white);
  height: var(--header-height-sp);
  left: 0;
  padding: 8px 16px 8px 20px;
  position: fixed;
  top: 0;
  transition-duration: 0.2s;
  transition-property: opacity, visibility;
  width: var(--header-width-sp);
  z-index: var(--z-index-header);
}
@media (width >= 768px) {
  .p-header {
    height: var(--header-height-pc);
    padding: 32px 22px;
    width: var(--header-width-pc);
  }
}

/* 追従用 */
@media (width >= 768px) {
  #js-header.off {
    opacity: 0;
    visibility: hidden;
  }
}

.p-header__inner {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 72px 40px;
  gap: 16px;
  grid-template-areas: "logo entry-button hamburger";
  height: 100%;
  width: 100%;
}
@media (width >= 768px) {
  .p-header__inner {
    gap: calc(80 * var(--rem));
    grid-template-columns: 1fr;
    grid-template-rows: max-content 56px 1fr;
    grid-template-areas: "logo" "hamburger" ". ";
    justify-items: center;
  }
}

.p-header__logo {
  grid-area: logo;
  font-size: 10px;
  height: inherit;
}
.p-header__logo-img {
  aspect-ratio: 197/34;
  block-size: 100%;
  inline-size: auto;
  object-fit: contain;
  @media (width >= 768px) {
    aspect-ratio: 56/414;
    block-size: 100%;
    inline-size: 100%;
    object-fit: contain;
    object-position: top;
  }
}

.p-header__toggle-button {
  grid-area: hamburger;
}

/* entry button */
.p-header__entry {
  grid-area: entry-button;
}
@media (width >= 768px) {
  .p-header__entry {
    position: fixed;
    right: 40px;
    top: 40px;
  }
}

.p-header__entry-button {
  align-items: center;
  background-color: var(--color-brown01);
  color: var(--color-white);
  display: block flex;
  font-family: var(--font-bar);
  font-size: calc(18 * var(--rem));
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.04em;
  line-height: 1.7;
  text-align: center;
  padding: calc(12 * var(--rem)) calc(14 * var(--rem));
  transition-property: background-color, color;
  transition-duration: 0.2s;
  @media (width >= 768px) {
    font-size: calc(28 * var(--rem));
    padding: calc(8 * var(--rem)) calc(76 * var(--rem));
  }
  &:focus-visible {
    background-color: var(--color-brown02);
  }
  &:hover {
    @media (any-hover: hover) {
      background-color: var(--color-brown02);
    }
  }
}

/* hamburger */
.c-hamburger {
  align-self: end;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  display: grid;
  grid-template-rows: 19px 1fr; /* 線：19px、テキスト：残りの高さ */
  place-items: center;
  width: 40px;
  height: 47px; /* 全体の高さ */
  position: relative;
  transition: transform 0.6s, width 0.6s;
  z-index: var(--z-index-hamburger);
}
@media (width >= 768px) {
  .c-hamburger {
    width: 56px;
    height: 47px;
  }
}

.c-hamburger-line {
  background-color: currentColor;
  height: 1px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  transition: inherit;
}

.c-hamburger-line::before,
.c-hamburger-line::after {
  background-color: currentColor;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  transition: inherit;
  width: 100%;
}

.c-hamburger-line::before {
  top: -9px;
}

.c-hamburger-line::after {
  top: 9px;
}

.c-hamburger-label {
  align-self: end;
  color: currentColor;
  font-family: var(--font-bar);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04;
  line-height: 1.7;
  letter-spacing: 0.5px;
  text-align: center;
}

.c-hamburger[aria-expanded="true"] .c-hamburger-line {
  background-color: transparent;
}

.c-hamburger[aria-expanded="true"] .c-hamburger-line::before {
  top: 0;
  transform: rotate(17.72deg);
}

.c-hamburger[aria-expanded="true"] .c-hamburger-line::after {
  top: 0;
  transform: rotate(-17.72deg);
}

/* global nav */
.p-global-nav {
  background-color: var(--color-blue01);
  color: var(--color-white);
  display: grid;
  align-items: center;
  position: fixed;
  height: calc(100% - var(--header-height-sp));
  opacity: 0;
  top: var(--header-height-sp);
  left: 0;
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
  width: 100%;
  visibility: hidden;
  z-index: var(--z-index-menu-modal);
}
@media (width >= 768px) {
  .p-global-nav {
    left: var(--header-width-pc);
    height: 100%;
    top: 0;
    width: calc(100% - var(--header-width-pc));
  }
}

.p-global-nav[aria-hidden="false"] {
  opacity: 1;
  overflow-y: scroll;
  visibility: visible;
  -ms-overflow-style: none;
  scrollbar-width: none;
  &:-webkit-scrollbar {
    display: none;
  }
}

.p-global-nav__outside-links {
  align-items: end;
  align-self: end;
  color: var(--color-white);
  display: grid;
  font-size: calc(11 * var(--rem));
  gap: 1.1em;
  grid-area: links;
  line-height: 1.8;
}

.p-global-nav__inner {
  display: grid;
  gap: 2.85em;
  padding-block: calc(48 * var(--rem));
  padding-inline: var(--inline-content-space);
  width: 100%;
  grid-template-rows: repeat(5, auto) 0 auto auto;
  grid-template-areas:
    "area1"
    "area2"
    "area3"
    "area4"
    "area5"
    "."
    "outside-links"
    "entry-button";
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.p-global-nav__inner::-webkit-scrollbar {
  display: none;
}
@media (width >= 768px) {
  .p-global-nav__inner {
    grid-template-columns: 7fr 5fr;
    grid-template-rows: repeat(4, min-content) 0px repeat(2, min-content);
    gap: 2.5em min(10%, calc(80 * var(--rem)));
    grid-template-areas:
      "area1 area3"
      "area2 area4"
      "area2 area5"
      "area2 ."
      "area2 outside-links"
      "area2 entry-button";
  }
}

.p-global-nav__block {
  display: grid;
  gap: 1.5em;
  container: nav-block / inline;
}

.p-global-nav__block:nth-of-type(1) {
  grid-area: area1;
}

.p-global-nav__block:nth-of-type(2) {
  grid-area: area2;
}

.p-global-nav__block:nth-of-type(3) {
  grid-area: area3;
}

.p-global-nav__block:nth-of-type(4) {
  grid-area: area4;
}

.p-global-nav__block:nth-of-type(5) {
  grid-area: area5;
}

.p-global-nav__title .link {
  display: inline grid;
  gap: 0.5em;
}
.p-global-nav__title .sub {
  --clamp-min: 14;
  --clamp-max: 18;
  color: color-mix(in srgb, var(--color-white) 60%, transparent);
  font-family: var(--font-ins);
  line-height: 1;
}
.p-global-nav__title .main {
  --clamp-min: 24;
  --clamp-max: 32;
  font-family: var(--font-zen);
  font-weight: 500;
  line-height: 1.35;
  transform: scale(0.85, 1);
  transform-origin: left;
}

.p-global-nav__cards {
  display: block grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(108px, 100%), 1fr));
  grid-template-rows: auto 1fr;
  @media (width >= 768px) {
    grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
    grid-template-rows: auto;
  }
  @media (width >= 1200px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-global-nav__card {
  display: block grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0;
  @media (width >= 768px) {
    grid-template-columns: 100px 1fr;
    grid-row: span 1;
  }
}

.p-global-nav__card-img-wrapper {
  inline-size: 100%;
  aspect-ratio: 100/118;
  overflow: hidden;
  @media (width >= 768px) {
    aspect-ratio: revert;
  }
}

.p-global-nav__card-img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.p-global-nav__card-body {
  background-color: var(--color-blue02);
  container: nav-cards / inline-size;
  color: var(--color-white);
  display: grid;
  padding: 0.5em;
  @media (width >= 768px) {
    align-content: center;
    padding: 1em;
  }
}

.p-global-nav__card-status {
  font-size: clamp(calc(8 * var(--rem)), 10cqi, calc(12 * var(--rem)));
  line-height: 1.6;
}

.p-global-nav__card-name {
  font-size: clamp(calc(12 * var(--rem)), 12cqi, calc(16 * var(--rem)));
  line-height: 1.7;
}

.p-global-nav__outside-links {
  grid-area: outside-links;
}

.p-global-nav__entry {
  grid-area: entry-button;
}

.entry-button {
  grid-area: entry-button;
}

.p-global-nav__outside-link {
  font-size: inherit;
}

.p-global-nav__outside-link .link {
  font-size: inherit;
  display: inline grid;
  grid-template-columns: auto 14px;
  -moz-column-gap: 0.72em;
  column-gap: 0.72em;
  align-items: center;
}
.p-global-nav__outside-link .link:after {
  content: "";
  -webkit-mask: url(../img/common/icon-window.svg) no-repeat center/contain;
  mask: url(../img/common/icon-window.svg) no-repeat center/contain;
  aspect-ratio: 1;
  background-color: currentColor;
}

.p-global-nav__entry {
  align-self: start;
  grid-area: entry-button;
}

.p-global-nav__entry-button {
  --clamp-min: 32;
  --clamp-max: 56;
  align-items: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-white);
  -moz-column-gap: 0.84375em;
  column-gap: 0.84375em;
  color: var(--color-black01);
  display: inline grid;
  font-family: var(--font-bar);
  grid-template-columns: 1fr auto 1fr;
  inline-size: 100%;
  letter-spacing: 0.04em;
  line-height: 1.7;
  padding: 0.25em 1em;
  text-wrap: pretty;
  transition-duration: 0.2s;
  transition-property: background-color, color;
  vertical-align: middle;
  @media (width >= 768px) {
    padding: 0.16em 1em;
  }
  &::before {
    content: "";
  }
  &::after {
    background: conic-gradient(currentcolor 0 0), CanvasText;
    content: "";
    justify-self: end;
    -webkit-mask-image: url("../img/common/icon-arrow.svg");
    mask-image: url("../img/common/icon-arrow.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    inline-size: 1em;
    aspect-ratio: 1;
    @media (width >= 768px) {
      inline-size: 0.857em;
    }
  }
  &:focus-visible {
    background-color: var(--color-brown02);
    color: var(--color-white);
  }
  @media (any-hover: hover) {
    &:hover {
      background-color: var(--color-brown02);
      color: var(--color-white);
    }
  }
}

body.is-fixed {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

/* footer */
.p-footer {
  background-image: url(../img/common/bkg-footer.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: normal;
  padding-block: calc(64 * var(--rem)) calc(80 * var(--rem));
  @media (width >=992px) {
    padding-block: calc(124 * var(--rem));
  }
}

.p-footer__inner {
  display: grid;
  grid-template-columns: 14% 12% 1fr;
  grid-template-rows: auto 2.85em auto 2.28em auto 3.35em auto;
  gap: 0px 0px;
  grid-template-areas: "logo       .          site-map    " "logo       .          .           " "logo       .          links       " "logo       .          .           " "logo       .          entry-button" "logo       .          .           " "copy-right copy-right copy-right";
  padding-inline: var(--inline-content-space) var(--inline-content-space);
  @media (width >=768px) {
    column-gap: 4.86%;
    grid-template-columns: auto 1fr 40%;
    grid-template-rows: auto 2.75em auto auto;
    grid-template-areas: "logo     logo    entry-button" ".        .       entry-button" "site-map links   entry-button" "site-map links   copy-right  ";
  }
  @media (width >=992px) {
    grid-template-columns: auto 1fr 33%;
  }
}

.p-footer__logo {
  align-self: start;
  grid-area: logo;
  font-size: 10px;
  justify-self: start;
}
.p-footer__logo img {
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: left center;
  object-position: left center;
  width: 100%;
}

.p-footer__sitemap {
  color: var(--color-white);
  display: grid;
  gap: 0.928em;
  grid-area: site-map;
  line-height: 1.8;
  .link {
    font-size: calc(14 * var(--rem));
  }
}

.p-footer__outside-links {
  align-items: end;
  align-self: end;
  color: var(--color-white);
  display: grid;
  font-size: calc(11 * var(--rem));
  gap: 1.1em;
  grid-area: links;
  line-height: 1.8;
}

.p-footer__outside-link {
  font-size: inherit;
}

.p-footer__outside-link .link {
  font-size: inherit;
  display: inline grid;
  grid-template-columns: auto 14px;
  -moz-column-gap: 0.72em;
  column-gap: 0.72em;
  align-items: center;
}
.p-footer__outside-link .link:after {
  content: "";
  -webkit-mask: url(../img/common/icon-window.svg) no-repeat center/contain;
  mask: url(../img/common/icon-window.svg) no-repeat center/contain;
  aspect-ratio: 1;
  background-color: currentColor;
}

.p-footer__entry {
  align-self: start;
  grid-area: entry-button;
}

.p-footer__entry-button {
  --clamp-min: 32;
  --clamp-max: 56;
  align-items: center;
  background-color: var(--color-white);
  column-gap: 0.84375em;
  color: var(--color-black01);
  display: inline grid;
  font-family: var(--font-bar);
  grid-template-columns: 1fr auto 1fr;
  inline-size: 100%;
  letter-spacing: 0.04em;
  line-height: 1.7;
  padding: 0.25em 1em;
  text-wrap: pretty;
  transition-duration: 0.2s;
  transition-property: background-color, color;
  vertical-align: middle;
  @media (width >= 768px) {
    .p-footer__entry-button {
      padding: 0.357em 1em;
    }
  }
  &::before {
    content: "";
  }
  &::after {
    content: "";
    justify-self: end;
    -webkit-mask: url(../img/common/icon-arrow.svg) no-repeat center/contain;
    mask: url(../img/common/icon-arrow.svg) no-repeat center/contain;
    inline-size: 1em;
    aspect-ratio: 1;
    background: conic-gradient(currentcolor 0 0), CanvasText;
    @media (width >= 768px) {
      inline-size: 0.857em;
    }
  }
  &:focus-visible {
    background-color: var(--color-brown02);
    color: var(--color-white);
  }
  @media (any-hover: hover) {
    &:hover {
      background-color: var(--color-brown02);
      color: var(--color-white);
    }
  }
}

.p-footer__copyright {
  --clamp-min: 11;
  --clamp-max: 12;
  color: color-mix(in srgb, var(--color-white) 50%, transparent);
  grid-area: copy-right;
  text-align: end;
}

/* page-links */
.p-page-links {
  background-color: var(--color-gray02);
  border-image: linear-gradient(var(--color-gray02) 0 0) fill 0 / /0 100lvi;
  margin-block-start: calc(160 * var(--rem));
  padding-block: calc(48 * var(--rem));
  @media (width >= 768px) {
    padding-block: calc(80 * var(--rem));
    margin-inline-start: var(--header-width-pc);
  }
}

.p-page-links__container {
  display: block grid;
  gap: calc(16 * var(--rem));
  @media (width >= 768px) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: calc(20 * var(--rem));
  }
}

.p-page-link {
  align-items: center;
  border: 1px solid var(--color-black01);
  container: link / inline-size;
  display: block grid;
  gap: calc(16 / (326 - 20 * 2) * 100%);
  grid-template-columns: calc(80 / (326 - 20 * 2) * 100%) 1fr;
  padding: calc(16 * var(--rem));
  @media (width >= 768px) {
    gap: calc(40 / (540 - 16 * 2) * 100%);
    grid-template-columns: calc(151 / (540 - 16 * 2) * 100%) 1fr;
  }
  @media (any-hover: hover) {
    &:any-link:hover .p-page-link__title::after {
      translate: 115% -50%;
    }
  }
}

.p-page-link__img-wrapper {
  aspect-ratio: 151/128;
  inline-size: 100%;
  overflow: hidden;
}

.p-page-link__img {
  display: block;
  block-size: 100%;
  object-fit: cover;
  inline-size: 100%;
}

.p-page-link__title {
  display: inline-block;
  font-family: var(--font-zen);
  font-size: max(calc(17 * var(--rem)), 4.5cqw);
  font-weight: 600;
  line-height: 1.35;
  scale: 0.85 1;
  transform-origin: left;
  &::after {
    aspect-ratio: 1;
    background-color: var(--color-black01);
    content: "";
    inline-size: calc(20 * var(--rem));
    justify-self: end;
    -webkit-mask-image: url("../img/common/icon-arrow.svg");
    mask-image: url("../img/common/icon-arrow.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    position: absolute;
    right: calc(-12 * var(--rem));
    top: 50%;
    translate: 100% -50%;
    transition-duration: 0.2s;
  }
}

@container (width >= 400px ) {
  .p-page-link__title::after {
    inline-size: 28px;
  }
}

/* mv */
.p-mv {
  align-items: center;
  display: block grid;
  justify-content: center;
  block-size: 303px;
  inline-size: 100%;
  position: relative;
  @media (width >= 768px) {
    block-size: 490px;
  }
}

.p-mv__img-wrapper {
  inset: 0;
  position: absolute;
}

.p-mv__img {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
}

.p-mv__title {
  color: var(--color-white);
  display: block grid;
  gap: calc(8 * var(--rem));
  justify-content: center;
  position: relative;
  text-align: center;
  > span:lang(en) {
    --clamp-min: 20;
    --clamp-max: 28;
    font-family: var(--font-ins);
    font-weight: 400;
    line-height: 1;
  }

  > span:lang(ja) {
    --clamp-min: 32;
    --clamp-max: 56;
    font-family: var(--font-zen);
    font-weight: 500;
    line-height: 1.6;
    scale: 0.85 1;
  }
}

/* utility */
.u-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.u-md-hidden {
  @media (width >= 768px) {
    display: none;
  }
}

.u-md-visible {
  display: none;
  @media (width >= 768px) {
    display: block;
  }
}

.u-lg-hidden {
  @media (width >= 992px) {
    display: none;
  }
}

/* 長体クラス　JSによる処理を挟むため長体表示にタイムラグあり。
ファーストビュー（MVなど）用のテキストには不向き */
.js-choootype {
  display: block;
  overflow-wrap: break-word;
  word-break: break-word;
}
.js-choootype span {
  display: inline-block;
  transform: scaleX(0.85);
  transform-origin: left;
  letter-spacing: -0.15em;
}