@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
@layer Reset {
  /* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  /* Prevent font size inflation */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  /* Remove default margin in favour of better control in authored CSS */
  body, h1, h2, h3, h4, p,
  figure, blockquote, dl, dd {
    margin-block-end: 0;
  }
  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  ul[role=list],
  ol[role=list] {
    list-style: none;
  }
  /* Set core body defaults */
  body {
    min-height: 100vh;
    line-height: 1.5;
  }
  /* Set shorter line heights on headings and interactive elements */
  h1, h2, h3, h4,
  button, input, label {
    line-height: 1.1;
  }
  /* Balance text wrapping on headings */
  h1, h2,
  h3, h4 {
    text-wrap: balance;
  }
  /* A elements that don't have a class get default styles */
  a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
  }
  /* Make images easier to work with */
  img,
  picture {
    max-width: 100%;
    display: block;
  }
  /* Inherit fonts for inputs and buttons */
  input, button,
  textarea, select {
    font-family: inherit;
    font-size: inherit;
  }
  /* Make sure textareas without a rows attribute are not tiny */
  textarea:not([rows]) {
    min-height: 10em;
  }
  /* Anything that has been anchored to should have extra scroll margin */
  :target {
    scroll-margin-block: 5ex;
  }
}
/**
* @ Media Query(1方向 || 範囲指定)
* params: $key : variables/breakpointsで定義しているマップのキー
* params: $option : (up/down) or (variables/breakpointsのキー)
*/
/**
* @ Hover
*/
/**
* @ clamp
*/
/* Custom Property
---------------------------------------------------------- */
:root {
  /* Colors */
  --clr-main: #563bff;
  --clr-base: #F7F6F2;
  --clr-gray-dark: #585858;
  --clr-gray-pale: #C4C4C4;
  --clr-gray-line: #E2E2E2;
  /* Typography */
  --ff-base: Noto Sans JP, sans-serif;
  --fs-base-min: 14px;
  --fs-base-max: 16px;
  --fc-default: #000;
  /* Theme */
  --root-font-size: 16px;
  --root-mobile-inline-size: 393;
  --theme-inline-size: min(100%, 1255px);
  --theme-inline-size-max: 1255px;
  --theme-side-gap: min(8.9058524173vw, 52px);
  --theme-content-inline-size-raw: 65rem;
  --theme-content-inline-size: min(100%, var(--theme-content-inline-size-raw));
  --theme-content-inline-size-min: min(100%, 51.6875rem);
  --header-height: clamp(7.125rem, 6.3221685083rem + 0.0342541436 * 100vw, 9.0625rem);
  --border-radius-base: clamp(0.375rem, 0.2714088398rem + 0.0044198895 * 100vw, 0.625rem);
  /* Utility */
  --leading-trim: calc((1em - 1lh) / 2);
  /* Fontsize */
  --fs-xs: 0.75rem;
  --fs-s: 0.875rem;
  --fs-base: 1rem;
  --fs-l: 1.125rem;
  --fs-xl: 1.5rem;
  /* Font Weight */
  --fw-r: 400;
  --fw-m: 500;
  --fw-b: 700;
  /* Link */
  --link-clr-default: #0066c0;
  /* Animation */
  --_duration-s: .35s;
  --_duration-m: .75s;
  --_duration-l: .75s;
  interpolate-size: allow-keywords;
}

:lang(en) {
  --leading-trim: calc((1cap - 1lh) / 2);
}

@layer Generic {
  :where(*) {
    min-inline-size: 0;
    min-block-size: 0;
    margin: 0;
    padding: 0;
  }
  /* Html
  ---------------------------------------------------------- */
  :where(html) {
    font-size: calc(100 / var(--root-mobile-inline-size) * 16 * 1vw);
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }
  @media (width >= 768px) {
    :where(html) {
      font-size: var(--root-font-size);
    }
  }
  /* Body
  ---------------------------------------------------------- */
  :where(body) {
    color: var(--fc-default);
    line-height: 1.5;
    min-block-size: 100dvh;
    font-family: var(--ff-base);
    font-weight: var(--fw-r);
    background-color: #fff;
    font-size: 1rem;
    margin: 0;
    padding: 0;
    accent-color: var(--clr-main);
  }
  :where(ul, ol) {
    list-style: none;
  }
  :where(a, a:link) {
    color: var(--link-clr-default);
    text-decoration: none;
    cursor: pointer;
  }
  :where(a:visited) {
    color: revert;
  }
  @media (any-hover: hover) {
    :where(a:hover) {
      color: revert;
    }
  }
  :where(a:active) {
    color: revert;
  }
  :where(a:focus-visible, a:focus) {
    outline: solid currentColor;
    color: revert;
  }
  :where(textarea) {
    inline-size: 100%;
    field-sizing: content;
  }
  @supports (field-sizing: content) {
    :where(textarea) {
      resize: none;
    }
  }
  :where(img, picture, svg) {
    display: block;
    max-inline-size: 100%;
    height: auto;
  }
  :where(iframe, object, video) {
    display: block;
    max-inline-size: 100%;
    height: auto;
  }
  :where(button, [type=button], [type=reset], [type=submit]) {
    touch-action: manipulation;
  }
  :where(button) {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
  }
  :where(dialog) {
    width: unset;
    max-width: unset;
    height: unset;
    max-height: unset;
    padding: unset;
    color: unset;
    border: unset;
    overflow: unset;
    background-color: transparent;
  }
}
@layer Layout {
  .root {
    inline-size: 100%;
    min-block-size: 100dvh;
    display: grid;
    grid-template-rows: auto auto 1fr;
    row-gap: clamp(2rem, 1.5856353591rem + 0.017679558 * 100vw, 3rem);
  }
  .header {
    display: grid;
    padding-inline: var(--theme-side-gap);
    padding-block: clamp(1rem, 0.7928176796rem + 0.008839779 * 100vw, 1.5rem);
    grid-template-columns: 1fr min(42vw, 280px) 1fr;
    grid-template-areas: "h1 h1 h1" ". logo menu";
    gap: clamp(1rem, 0.7928176796rem + 0.008839779 * 100vw, 1.5rem);
    border-block-end: 1px solid #efefef;
  }
  @media (width >= 992px) {
    .header {
      grid-template-columns: min(24vw, 320px) 1fr;
      grid-template-areas: "h1 h1" "logo menu";
    }
  }
  .header__text {
    grid-area: h1;
    font-size: clamp(0.75rem, 0.6982044199rem + 0.0022099448 * 100vw, 0.875rem);
    font-weight: var(--fw-r);
    margin-block: var(--leading-trim);
    color: #808080;
  }
  .header__logo {
    grid-area: logo;
    font-size: clamp(1.25rem, 1.1464088398rem + 0.0044198895 * 100vw, 1.5rem);
    font-weight: var(--fw-b);
  }
  .header__logo a {
    color: #000;
    margin-block: var(--leading-trim);
  }
  .header .menu__list {
    display: none;
    grid-area: menu;
    place-self: flex-end end;
    color: #000;
  }
  @media (width >= 992px) {
    .header .menu__list {
      display: grid;
    }
  }
  .header .menu__item:is(a) {
    color: currentColor;
    margin-block: var(--leading-trim);
  }
  .global-menu__btn {
    display: grid;
    inline-size: min(18vw, 64px);
    aspect-ratio: 1;
    background: url(../img/ic_menu.svg) var(--clr-main) no-repeat center center/48% auto;
    border-radius: 50%;
    grid-area: menu;
    justify-self: flex-end;
    align-self: center;
  }
  @media (width >= 992px) {
    .global-menu__btn {
      display: none;
    }
  }
  .main {
    display: grid;
    padding-inline: var(--theme-side-gap);
    align-items: flex-start;
    gap: clamp(3rem, 2.7928176796rem + 0.008839779 * 100vw, 3.5rem);
  }
  @media (width >= 992px) {
    .main {
      grid-template-columns: 1fr 280px;
    }
  }
  .main .content {
    display: grid;
    row-gap: clamp(3.5rem, 3.0856353591rem + 0.017679558 * 100vw, 4.5rem);
  }
  .article {
    inline-size: min(100%, 800px);
    margin-inline: auto;
    display: grid;
  }
  .article-header-meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
  }
  .article-header-meta__published {
    display: grid;
    grid-template-columns: min(5.6vw, 24px) 1fr;
    align-items: center;
    column-gap: 0.24em;
    color: #808080;
  }
  .article-header-meta__published::before {
    content: "";
    aspect-ratio: 1;
    background: url(../img/ic_clock.svg) no-repeat center center/contain;
  }
  .article-body {
    display: grid;
    row-gap: 1.72lh;
  }
  .article-body h3 {
    font-size: clamp(1.25rem, 1.1464088398rem + 0.0044198895 * 100vw, 1.5rem);
    font-weight: var(--fw-b);
    border-inline-start: 5px solid var(--clr-main);
    padding-inline-start: 1em;
  }
  .article-body h3:not(:first-child) {
    margin-block-start: 1.72lh;
  }
  .article-body h4 {
    font-size: clamp(1rem, 0.9482044199rem + 0.0022099448 * 100vw, 1.125rem);
    font-weight: var(--fw-m);
  }
  .article-body p {
    margin-block: var(--leading-trim);
    line-height: 1.72;
  }
  .article-body p.center {
    max-inline-size: fit-content;
    margin-inline: auto;
  }
  .article-body figure {
    margin-inline: calc(var(--theme-side-gap) * -1);
  }
  @media (width >= 768px) {
    .article-body figure {
      margin-inline: 0;
    }
  }
  .article-body .note {
    background: #fafafa;
    padding: clamp(1rem, 0.7928176796rem + 0.008839779 * 100vw, 1.5rem);
  }
  .article-body .note dt {
    font-size: clamp(1rem, 0.9482044199rem + 0.0022099448 * 100vw, 1.125rem);
    font-weight: var(--fw-b);
    padding-block-end: 0.32lh;
    margin-block-end: 0.48lh;
    border-block-end: 1px solid #ddd;
    display: grid;
    grid-template-columns: min(7.2vw, 32px) 1fr;
    align-items: center;
    column-gap: 0.24em;
    color: #404040;
  }
  .article-body .note dt::before {
    content: "";
    aspect-ratio: 1;
    background: url(../img/ic_note.svg) no-repeat center center/contain;
  }
  .article-body table {
    inline-size: 100%;
    border-block-start: 1px solid #ddd;
    border-collapse: collapse;
  }
  .article-body table th, .article-body table td {
    padding: 0.48lh 1em;
    border: 1px solid #ddd;
  }
  .article-body table th {
    text-align: left;
    inline-size: 10em;
  }
  .article-body table tr:nth-child(even) {
    background: #fafafa;
  }
  .side {
    --side-padding-inline: clamp(1rem, 0.7928176796rem + 0.008839779 * 100vw, 1.5rem);
    display: grid;
    row-gap: clamp(1.5rem, 1.2928176796rem + 0.008839779 * 100vw, 2rem);
  }
  .side-section {
    border: 1px solid #ddd;
    padding: 0 var(--side-padding-inline);
    border-radius: 8px;
    overflow: hidden;
  }
  .side__title {
    font-size: clamp(1.125rem, 1.0732044199rem + 0.0022099448 * 100vw, 1.25rem);
    font-weight: var(--fw-b);
    border-block-end: 1px solid #ddd;
    padding-block: 0.72lh;
    margin-inline: calc(var(--side-padding-inline) * -1);
    padding-inline: var(--side-padding-inline);
    background: #fafafa;
  }
  .side__inner {
    padding-block: clamp(1rem, 0.7928176796rem + 0.008839779 * 100vw, 1.5rem);
  }
  .side-link__list {
    display: grid;
  }
  .side-link__item:not(:last-child) {
    border-block-end: 1px dashed #ddd;
  }
  .side-link__item a {
    font-weight: var(--fw-b);
    color: #000;
    display: grid;
    padding-block: 0.4lh;
  }
  .footer {
    padding-block: clamp(2rem, 1.5856353591rem + 0.017679558 * 100vw, 3rem) clamp(3.5rem, 3.0856353591rem + 0.017679558 * 100vw, 4.5rem);
    padding-inline: var(--theme-side-gap);
    background: #fafafa;
  }
  .footer-link__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32lh 1.32em;
    margin-block-end: clamp(1rem, 0.7928176796rem + 0.008839779 * 100vw, 1.5rem);
  }
  .footer-link__item:is(a) {
    color: #606060;
  }
  .footer-link__item {
    display: grid;
    grid-template-columns: auto min(12vw, 24px);
    align-items: center;
    column-gap: 0.32em;
    font-size: clamp(0.875rem, 0.8232044199rem + 0.0022099448 * 100vw, 1rem);
  }
  .footer-link__item::after {
    content: "";
    aspect-ratio: 1;
    background: url(../img/ic_arrow.svg) no-repeat center center/contain;
  }
  .footer__copy {
    color: #808080;
  }
  .footer__notice {
    color: #808080;
    font-size: smaller;
  }
  .drawer {
    background: #fff;
    position: fixed;
    inset: 0;
    z-index: 999;
    padding-inline: var(--theme-side-gap);
    overflow-y: auto;
  }
  .drawer__inner {
    display: block;
    padding-block: clamp(2rem, 1.5856353591rem + 0.017679558 * 100vw, 3rem);
  }
  .drawer-header {
    display: grid;
    grid-template-columns: min(40vw, 180px) 1fr min(14vw, 48px);
    grid-template-areas: "logo . nav";
    align-items: center;
    border-block-end: 1px solid #ddd;
    padding-block-end: clamp(1rem, 0.7928176796rem + 0.008839779 * 100vw, 1.5rem);
    margin-block-end: clamp(1rem, 0.7928176796rem + 0.008839779 * 100vw, 1.5rem);
  }
  .drawer-header__logo {
    grid-area: logo;
  }
  .drawer-header__close {
    grid-area: nav;
    aspect-ratio: 1;
    background: #808080;
    border-radius: 50%;
    color: #fff;
  }
  .drawer-body {
    display: grid;
    row-gap: clamp(1.5rem, 1.2928176796rem + 0.008839779 * 100vw, 2rem);
  }
}
@layer Components {
  .card__list {
    --max-inline-size: var(--theme-content-inline-size-raw);
    --gap: clamp(1rem, 0.7928176796rem + 0.008839779 * 100vw, 1.5rem);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, (var(--max-inline-size) - var(--gap) * 4) / 3), 1fr));
    gap: var(--gap);
  }
  .card__item {
    gap: 0.54lh;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    color: #000;
    padding-block-end: 1lh;
    border-block-end: 1px solid #ddd;
  }
  .card__image {
    aspect-ratio: 16/9;
    position: relative;
    contain: strict;
    border-radius: 8px;
  }
  .card__image img {
    inline-size: 100%;
    block-size: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
  }
  .card__title {
    font-size: clamp(1.25rem, 1.1464088398rem + 0.0044198895 * 100vw, 1.5rem);
    font-weight: var(--fw-m);
    line-height: 1.4;
  }
  .card__published {
    color: #808080;
  }
}
@layer Components {
  .heading__lv1 {
    font-size: clamp(1.5rem, 1.2928176796rem + 0.008839779 * 100vw, 2rem);
    font-weight: var(--fw-b);
    margin-block: var(--leading-trim) calc(var(--leading-trim) + 1.24lh);
    border-block-end: 1px solid #ddd;
    padding-block-end: 0.56lh;
    line-height: 1.3333333333;
  }
  .heading__lv1:not(:first-child) {
    margin-block-start: calc(var(--leading-trim) + 0.72lh);
  }
}
@layer Components {
  .btn__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1rem, 0.7928176796rem + 0.008839779 * 100vw, 1.5rem);
    margin-block-start: clamp(2rem, 1.5856353591rem + 0.017679558 * 100vw, 3rem);
  }
  .btn {
    background: #efefef;
    color: #000;
    inline-size: max(8vw, 160px);
    display: grid;
    place-content: center center;
    font-weight: var(--fw-b);
    padding: 0.48lh 1em;
    border-radius: 8px;
  }
  .btn.--to {
    background: var(--clr-main);
    color: #fff;
    max-inline-size: fit-content;
    inline-size: revert;
    display: grid;
    grid-template-columns: 1fr min(8vw, 32px);
    font-size: clamp(1.125rem, 1.0732044199rem + 0.0022099448 * 100vw, 1.25rem);
    font-weight: var(--fw-b);
    align-items: center;
    column-gap: 0.48em;
    padding: 0.72lh 1.72em;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.24);
  }
  .btn.--to::after {
    content: "";
    aspect-ratio: 1;
    background: url(../img/ic_blank.svg) no-repeat center center/cover;
  }
}
@layer Components {
  .category__list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(0.5rem, 0.2928176796rem + 0.008839779 * 100vw, 1rem);
  }
  .category__item {
    display: grid;
    place-content: center center;
    padding: 0.16lh 1em;
    border-radius: 24px;
    background: var(--clr-main);
    color: #fff;
    font-weight: var(--fw-r);
  }
}
@layer Components {
  .profile {
    display: grid;
    grid-template-columns: min(24vw, 125px) 1fr;
    align-items: center;
    column-gap: clamp(1.5rem, 1.2928176796rem + 0.008839779 * 100vw, 2rem);
  }
  .profile__image {
    inline-size: 100%;
    aspect-ratio: 1;
    contain: strict;
    border-radius: 50%;
    margin-inline: 0;
  }
  .profile__image img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .profile__data {
    display: grid;
    row-gap: 0.16lh;
  }
  .profile__data dt {
    color: #808080;
  }
  .profile__data dd {
    font-size: clamp(1.25rem, 1.1464088398rem + 0.0044198895 * 100vw, 1.5rem);
    font-weight: var(--fw-m);
  }
  .profile__data dd :is(a) {
    color: #000;
  }
  .profile-user {
    display: grid;
    place-content: center center;
    margin-block-end: 1rem;
    row-gap: 0.56lh;
  }
  .profile-user img {
    margin-inline: auto;
    display: block;
    inline-size: 64%;
  }
  .profile-user figcaption {
    text-align: center;
    font-weight: var(--fw-b);
  }
}
@layer Components {
  .player {
    max-inline-size: 720px;
    aspect-ratio: 72/48;
    contain: strict;
  }
  .player iframe {
    max-inline-size: revert;
    inline-size: 100%;
    block-size: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
  }
}
@layer Components {
  .contact-form {
    height: 1200px;
  }
}
@layer Elements {}
@layer Projects {
  .p-home-main-visual {
    --block-size: calc(100svh - var(--header-height));
    --weather-ui-inline-size: 12.75rem;
    inline-size: 100%;
    block-size: var(--block-size);
    margin-block-end: clamp(2.5rem, 0.9461325967rem + 0.0662983425 * 100vw, 6.25rem);
    position: relative;
  }
  .p-home-main-visual :is(.p-home-main-visual__track, .p-home-main-visual__list, .p-home-main-visual__slide) {
    inline-size: 100%;
    block-size: var(--block-size);
  }
  .p-home-main-visual__slide {
    display: grid;
    grid-template-rows: 5.25rem auto 1fr;
    grid-template-areas: ". . ." ". link ." ". . .";
    grid-template-columns: var(--theme-side-gap) 1fr var(--theme-side-gap);
  }
  @media (width >= 992px) {
    .p-home-main-visual__slide {
      grid-template-columns: var(--theme-side-gap) 1fr var(--weather-ui-inline-size) var(--theme-side-gap);
      grid-template-areas: ". . . ." ". link . ." ". . . .";
      grid-template-rows: 1.875rem auto 1fr;
    }
  }
  .p-home-main-visual__slide img {
    inline-size: 100%;
    block-size: 100%;
    grid-column: 1/-1;
    grid-row: 1/-1;
    max-width: inherit;
    object-fit: cover;
    transform: scale(1);
    opacity: 0;
    transition: 20s transform linear, 1s opacity linear;
  }
  .p-home-main-visual__slide img:where(.p-home-main-visual__slide.is-visible *) {
    transform: scale(1.2);
    opacity: 1;
  }
  .p-home-main-visual-language__trigger {
    position: absolute;
    inline-size: 2rem;
    block-size: 2rem;
    object-fit: cotain;
    right: min(25 / var(--root-mobile-inline-size) * 100vw, 1.875rem);
    top: 1.4375rem;
    z-index: 99;
    display: block;
  }
  @media (width >= 768px) {
    .p-home-main-visual-language__trigger {
      display: none;
    }
  }
  .p-home-main-visual-arrows {
    border-block-start: 1px solid #A3A3A3;
    position: absolute;
    bottom: 0;
    left: 0;
    inline-size: 100%;
    block-size: 3.75rem;
    z-index: 100;
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
  }
  .p-home-main-visual-arrow {
    background: url(../img/icon/ic_arrow_white.svg) no-repeat center center;
    inline-size: 3.75rem;
    aspect-ratio: 1;
    display: block;
  }
  .p-home-main-visual-arrow svg {
    display: none;
  }
  .p-home-main-visual-arrow.--prev {
    transform: scale(-1, 1);
  }
  .p-home-main-visual-weather {
    position: absolute;
    z-index: 101;
    color: #fff;
    display: grid;
    inline-size: var(--weather-ui-inline-size);
  }
  @media (width <= 767px) {
    .p-home-main-visual-weather {
      bottom: 5.3125rem;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  @media (width >= 768px) {
    .p-home-main-visual-weather {
      top: 1.875rem;
      right: var(--theme-side-gap);
    }
  }
  .p-home-main-visual-weather-heading {
    font-size: 1.125rem;
    text-align: center;
  }
  .p-home-main-visual-weather-status {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    column-gap: 0.48em;
  }
  .p-home-main-visual-weather-status__icon {
    inline-size: 3.875rem;
    aspect-ratio: 1;
  }
  .p-home-main-visual-weather-status__icon img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }
  .p-home-main-visual-weather-status__temp {
    font-size: 2.8125rem;
  }
  .p-home-main-visual-weather-status__temp span {
    font-size: 1.9375rem;
  }
  .p-home-main-visual-weather-status__text {
    font-size: 1.125rem;
    text-align: center;
    border-block-end: 1px solid #D8D8D8;
    padding-block: 0.24lh;
    margin-block-end: 0.24lh;
  }
  .p-home-main-visual-weather__updated {
    font-size: 1.125rem;
    font-weight: var(--fw-b);
    text-align: center;
  }
  .p-home-main-visual-link {
    grid-area: link;
    place-content: flex-start flex-start;
    color: #fff;
    z-index: 102;
    max-inline-size: fit-content;
    display: grid;
    overflow: hidden;
    grid-template-columns: auto 1px 1.125rem;
    grid-template-rows: auto auto;
    grid-template-areas: "heading1 line arrow" "heading2 . .";
    column-gap: 1.25rem;
    transform: translateX(-10%);
    opacity: 0;
    transition: opacity var(--_duration-m) ease 1.5s, transform var(--_duration-m) ease 1.5s;
  }
  .p-home-main-visual-link:where(.p-home-main-visual__slide.is-visible *) {
    transform: translateX(0);
    opacity: 1;
  }
  .p-home-main-visual-link::before {
    content: "";
    grid-area: line;
    block-size: 100%;
    background: currentColor;
    display: block;
    grid-row: 1/-1;
  }
  .p-home-main-visual-link::after {
    content: "";
    grid-area: arrow;
    background: url(../img/icon/ic_arrow_white.svg) no-repeat center center/0.5rem auto;
    aspect-ratio: 1;
    align-self: center;
    grid-row: 1/-1;
  }
  .p-home-main-visual-link-heading {
    grid-area: heading1;
    font-size: clamp(1.4375rem, 1.3080110497rem + 0.0055248619 * 100vw, 1.75rem);
    font-weight: var(--fw-b);
    margin-block: var(--leading-trim);
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: flex-start;
    column-gap: 0.4em;
  }
  .p-home-main-visual-link-heading::after {
    content: attr(data-en);
    font-size: clamp(0.6875rem, 0.6098066298rem + 0.0033149171 * 100vw, 0.875rem);
    font-family: serif;
    font-weight: var(--fw-r);
  }
  .p-home-main-visual-link__category {
    grid-area: heading2;
    font-size: clamp(1.0625rem, 0.9589088398rem + 0.0044198895 * 100vw, 1.3125rem);
    font-weight: var(--fw-b);
    margin-block-start: 0.24lh;
  }
  .p-home-section-whatsnew {
    margin-block-end: clamp(5.0625rem, 6.3055939227rem + -0.053038674 * 100vw, 2.0625rem);
  }
  .p-home-section-discover {
    margin-block-end: clamp(4.375rem, 4.1160220994rem + 0.0110497238 * 100vw, 5rem);
  }
  .p-home-section-watch_walk {
    margin-block-end: clamp(4.375rem, 3.2095994475rem + 0.0497237569 * 100vw, 7.1875rem);
  }
  .p-home-discover-tile__list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "index" "m1" "m2" "m3" "m4" "m5";
  }
  @media (width >= 992px) {
    .p-home-discover-tile__list {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(5, auto);
      grid-template-areas: "index m1" ". m2" ". m3" "m4 m5";
      gap: 0 1.875rem;
    }
  }
  .p-home-discover-tile__list .p-home-discover-tile__row.--media-1 {
    grid-area: m1;
    border-block-start: 1px solid var(--clr-gray-pale);
  }
  .p-home-discover-tile__list .p-home-discover-tile__row.--media-2 {
    grid-area: m2;
  }
  .p-home-discover-tile__list .p-home-discover-tile__row.--media-3 {
    grid-area: m3;
  }
  .p-home-discover-tile__list .p-home-discover-tile__row.--madia-lg-1 {
    grid-area: m4;
  }
  .p-home-discover-tile__list .p-home-discover-tile__row.--madia-lg-2 {
    grid-area: m5;
  }
  .p-home-discover-tile__list .p-home-discover-tile__row:is(.--media-1, .--media-2, .--media-3, .--media-lg-1, .--media-lg-2) {
    border-block-end: 1px solid var(--clr-gray-pale);
    padding-block: 1.5rem;
  }
  @media (width >= 992px) {
    .p-home-discover-tile__list .p-home-discover-tile__row:is(.--media-1, .--media-2, .--media-3, .--media-lg-1, .--media-lg-2) {
      padding-block: 2.25rem;
    }
  }
  .p-home-discover-index {
    grid-area: index;
    display: grid;
    padding-block: 5.25rem 2rem;
    position: relative;
    overflow: hidden;
  }
  @media (width >= 992px) {
    .p-home-discover-index {
      border-radius: var(--border-radius-base);
    }
  }
  .p-home-discover-index::after {
    content: "";
    background: url(../img/dummy/discover_img_main.jpg) no-repeat center/cover;
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: var(--_duration-s) transform ease;
  }
  .p-home-discover-index:focus-visible::after {
    transform: scale(1.1);
  }
  @media (any-hover: hover) {
    .p-home-discover-index:hover::after {
      transform: scale(1.1);
    }
  }
  @media (width <= 991px) {
    .p-home-discover-index {
      margin-inline: calc(var(--theme-side-gap) * -1);
      margin-block-end: 2.1875rem;
      padding-inline: var(--theme-side-gap);
    }
  }
  @media (width >= 992px) {
    .p-home-discover-index {
      grid-row: 1/4;
      border-radius: var(--border-radius-base);
    }
  }
  .p-home-discover-index .c-heading-style1 {
    color: #fff;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "primary" "description" "." "link";
    align-items: flex-start;
    margin-block-end: 0;
  }
  .p-home-discover-index .c-heading-style1 .c-heading-primary::after {
    background: #fff;
  }
  .p-home-discover-index .c-heading-style1 .c-heading-style1__description {
    grid-area: description;
    font-size: 1.3125rem;
    font-weight: var(--fw-b);
    margin-block-start: 0.9375rem;
    overflow-wrap: anywhere; /* 収まらない場合に折り返す */
    word-break: normal; /* 単語の分割はデフォルトに依存 */
    line-break: strict; /* 禁則処理を厳格に適用 */
  }
  .p-home-discover-index .c-heading-style1 .c-link__single {
    grid-row: revert;
  }
  @media (width <= 991px) {
    .p-home-discover-index .c-heading-style1 .c-link__single {
      justify-self: end;
      margin-block-start: 4.0625rem;
    }
  }
}
@layer Utilities {
  .u-md-up-show-g {
    display: none;
  }
  @media (width >= 768px) {
    .u-md-up-show-g {
      display: grid;
    }
  }
  .u-md-down-show-g {
    display: grid;
  }
  @media (width >= 768px) {
    .u-md-down-show-g {
      display: none;
    }
  }
  .u-lg-up-show-g {
    display: none;
  }
  @media (width >= 992px) {
    .u-lg-up-show-g {
      display: grid;
    }
  }
  .u-lg-down-show-g {
    display: grid;
  }
  @media (width >= 992px) {
    .u-lg-down-show-g {
      display: none;
    }
  }
  .u-md-up-show-b {
    display: none;
  }
  @media (width >= 768px) {
    .u-md-up-show-b {
      display: block;
    }
  }
  .u-md-down-show-d {
    display: block;
  }
  @media (width >= 768px) {
    .u-md-down-show-d {
      display: none;
    }
  }
  .u-lg-up-show-b {
    display: none;
  }
  @media (width >= 992px) {
    .u-lg-up-show-b {
      display: block;
    }
  }
  .u-lg-down-show-b {
    display: block;
  }
  @media (width >= 992px) {
    .u-lg-down-show-b {
      display: none;
    }
  }
}
@layer Generic, Objects, Components, Projects, Elements, Utilities;

/*# sourceMappingURL=styles.css.map */