@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap");
@layer Reset {
  /*! destyle.css v1.0.14 | MIT License | https://github.com/nicolas-cusan/destyle.css */
  /* Reset box-model */
  /* ============================================ */
  * {
    box-sizing: border-box;
  }
  ::before,
  ::after {
    box-sizing: inherit;
  }
  /* Document */
  /* ============================================ */
  /**
   * 1. Correct the line height in all browsers.
   * 2. Prevent adjustments of font size after orientation changes in iOS.
   * 3. Remove gray overlay on links for iOS.
   */
  html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -webkit-tap-highlight-color: transparent; /* 3*/
  }
  /* Sections */
  /* ============================================ */
  /**
   * Remove the margin in all browsers.
   */
  body {
    margin: 0;
  }
  /**
   * Render the `main` element consistently in IE.
   */
  main {
    display: block;
  }
  /* Vertical rhythm */
  /* ============================================ */
  p,
  table,
  blockquote,
  address,
  pre,
  iframe,
  form,
  figure,
  dl {
    margin: 0;
  }
  /* Headings */
  /* ============================================ */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    margin: 0;
  }
  /* Lists (enumeration) */
  /* ============================================ */
  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* Lists (definition) */
  /* ============================================ */
  dt {
    font-weight: bold;
  }
  dd {
    margin-left: 0;
  }
  /* Grouping content */
  /* ============================================ */
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
    border: 0;
    border-top: 1px solid;
    margin: 0;
    clear: both;
    color: inherit;
  }
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: inherit; /* 2 */
  }
  address {
    font-style: inherit;
  }
  /* Text-level semantics */
  /* ============================================ */
  /**
   * Remove the gray background on active links in IE 10.
   */
  a {
    background-color: transparent;
    text-decoration: none;
    color: inherit;
  }
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  b,
  strong {
    font-weight: bolder;
  }
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: inherit; /* 2 */
  }
  /**
   * Add the correct font size in all browsers.
   */
  small {
    font-size: 80%;
  }
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  /* Embedded content */
  /* ============================================ */
  /**
   * Remove the border on images inside links in IE 10.
   */
  img {
    border-style: none;
    vertical-align: bottom;
  }
  embed,
  object,
  iframe {
    border: 0;
    vertical-align: bottom;
  }
  /* Forms */
  /* ============================================ */
  /**
   * Reset form fields to make them styleable
   */
  button,
  input,
  optgroup,
  select,
  textarea {
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
    color: inherit;
    font: inherit;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    outline: 0;
    border-radius: 0;
    text-align: inherit;
  }
  /**
   * Reset radio and checkbox appearance to preserve their look in iOS.
   */
  [type=checkbox] {
    -webkit-appearance: checkbox;
    appearance: checkbox;
  }
  [type=radio] {
    -webkit-appearance: radio;
    appearance: radio;
  }
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  button,
  input {
    /* 1 */
    overflow: visible;
  }
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  button,
  select {
    /* 1 */
    text-transform: none;
  }
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  button,
  [type=button],
  [type=reset],
  [type=submit] {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  button[disabled],
  [type=button][disabled],
  [type=reset][disabled],
  [type=submit][disabled] {
    cursor: default;
  }
  /**
   * Remove the inner border and padding in Firefox.
   */
  button::-moz-focus-inner,
  [type=button]::-moz-focus-inner,
  [type=reset]::-moz-focus-inner,
  [type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  /**
   * Restore the focus styles unset by the previous rule.
   */
  button:-moz-focusring,
  [type=button]:-moz-focusring,
  [type=reset]:-moz-focusring,
  [type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  /**
   * Remove arrow in IE10 & IE11
   */
  select::-ms-expand {
    display: none;
  }
  /**
   * Remove padding
   */
  option {
    padding: 0;
  }
  /**
   * Reset to invisible
   */
  fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
  }
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  legend {
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  progress {
    vertical-align: baseline;
  }
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  textarea {
    overflow: auto;
  }
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  [type=number]::-webkit-inner-spin-button,
  [type=number]::-webkit-outer-spin-button {
    height: auto;
  }
  /**
   * 1. Correct the outline style in Safari.
   */
  [type=search] {
    outline-offset: -2px; /* 1 */
  }
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  [type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  /**
   * Clickable labels
   */
  label[for] {
    cursor: pointer;
  }
  /* Interactive */
  /* ============================================ */
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  details {
    display: block;
  }
  /*
   * Add the correct display in all browsers.
   */
  summary {
    display: list-item;
  }
  /*
   * Remove outline for editable content.
   */
  [contenteditable] {
    outline: none;
  }
  /* Table */
  /* ============================================ */
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  caption {
    text-align: left;
  }
  td,
  th {
    vertical-align: top;
    padding: 0;
  }
  th {
    text-align: left;
    font-weight: bold;
  }
  /* Misc */
  /* ============================================ */
  /**
   * Add the correct display in IE 10+.
   */
  template {
    display: none;
  }
  /**
   * Add the correct display in IE 10.
   */
  [hidden] {
    display: none;
  }
}
/* Settings
---------------------------------------------------------- */
/* Theme
---------------------------------------------------------- */
/* Color
---------------------------------------------------------- */
/* Font
---------------------------------------------------------- */
/* Breakpoints
---------------------------------------------------------- */
/* Bootstrap 参考 */
/**
* @ Media Query(1方向 || 範囲指定)
* params: $key : variables/breakpointsで定義しているマップのキー
* params: $option : (up/down) or (variables/breakpointsのキー)
*/
/* Base(  @layer Base )
---------------------------------------------------------- */
@layer Base {
  /**
  * Available vars:
  * @var --viewport-from: <number> - Number in pixels without the unit. Required if `--font-size` is not exist.
  * @var --viewport-to: <number> - Number in pixels without the unit. Required if `--font-size` is not exist.
  * @var --font-size-from: <number> - Number in pixels without the unit. Required if `--font-size` and `--min-font-size` is not exist.
  * @var --font-size-to: <number> - Number in pixels without the unit. Required if `--font-size` and `--max-font-size` is not exist.
  * @var --max-font-size: <number> - Number in pixels without the unit. Optional.
  * @var --min-font-size: <number> - Number in pixels without the unit. Optional.
  * @var --viewport-unit-converter: 1vw | 1vh | 1vmin | 1vmax - Optional. Default: 1vw.
  * @var --font-size: <length> | <percentage> | <absolute-size> | <relative-size> | Global values - Optional.
  */
  *,
  *::before,
  *::after {
    --viewport-unit-converter: 1vw;
    --fz-from: var(--font-size-from, var(--min-font-size));
    --fz-to: var(--font-size-to, var(--max-font-size));
    --fz-slope: (var(--fz-to) - var(--fz-from)) / (var(--viewport-to) - var(--viewport-from)) * 100;
    --fz-intercept: (var(--viewport-to) * var(--fz-from) - var(--viewport-from) * var(--fz-to)) / (var(--viewport-to) - var(--viewport-from));
    --font-size: calc(var(--fz-slope) * var(--viewport-unit-converter) + var(--fz-intercept) * 1px);
    --min-fz-px: calc(var(--min-font-size) * 1px);
    --max-fz-px: calc(var(--max-font-size) * 1px);
    --clamp: clamp(var(--min-fz-px), var(--font-size), var(--max-fz-px));
    --max: var(--has-max, var(--min));
    --min: var(--has-min, var(--font-size));
    --has-max: min(var(--max-fz-px), var(--font-size));
    --has-min: max(var(--min-fz-px), var(--font-size));
    font-size: var(--clamp, var(--max));
  }
  :root {
    --root-font-size: 16px;
    --viewport-from: 375;
    --viewport-to: 1024;
    --clr-official-primary: #2FA0E5;
    --clr-official-instagram: #F040AA;
    --fc-default: #000;
    --px: 0.26666666666666666vw;
    --link-clr-default: #0000ee;
    --link-clr-visited: #551a8b
    --link-clr-hover : #0000ee;
    --link-clr-active: #FF0000;
    --theme-side-gap: min(4.8vw, 48px);
    --theme-inline-size-min: 90%;
    --theme-inline-size-max: 1024px;
    --theme-inline-size-base: min(calc( 100% - ( var(--theme-side-gap) * 2 ) ), var(--theme-inline-size-max));
    --theme-inline-size-wide: 90%;
    --leading-trim: calc((1em - 1lh) / 2);
    --theme-bg-color: #FCF8EF;
    --fw-r: 400;
    --fw-m: 500;
    --fw-b: 700;
    --theme-header-height: clamp(4rem, 0.6414676425rem + 14.3297380586vw, 9.8125rem);
    --scroll-bar-inline-size: 15px;
    --ff-icon: "Material Icons Outlined";
    --easing-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  }
  :lang(en) {
    --leading-trim: calc((1cap - 1lh) / 2);
  }
  :where(*) {
    min-inline-size: 0;
    min-block-size: 0;
  }
  :where(html) {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }
  :where(body) {
    --min-font-size: 14;
    --max-font-size: 16;
    color: var(--fc-default);
    line-height: 1.75;
    min-block-size: 100svh;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: var(--fw-r);
    background: var(--theme-bg-color);
    overflow-x: hidden;
    accent-color: #080;
  }
  :where(body):has(.l-root.--drawer-open) {
    overflow: hidden;
  }
  :where(body):has(.c-dialog__wrapper[open]) {
    overflow: hidden;
  }
  :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(dialog) {
    width: unset;
    max-width: unset;
    height: unset;
    max-height: unset;
    padding: unset;
    color: unset;
    background-color: unset;
    border: unset;
    overflow: unset;
  }
  .--animation {
    opacity: 0;
  }
}
/* Components(  @layer Base )
---------------------------------------------------------- */
@layer Components;
/* --- Components --- */
@layer Components.buttons {
  .c-btn {
    display: grid;
    grid-template-columns: auto min(5.4vw, 28px);
    place-content: center center;
    padding: 0.5lh 2.2em;
    border-radius: 99em;
    background: #fff;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
    font-weight: bold;
    column-gap: 0.5em;
    color: var(--clr-official-primary);
    align-items: center;
    max-inline-size: fit-content;
    white-space: nowrap;
  }
  .c-btn::after {
    content: "";
    aspect-ratio: 1;
    border-radius: 50%;
    background: url(../img/ic_arrow_white.svg) currentColor no-repeat center center/48% auto;
  }
  .c-btn[href$=".pdf"]::after {
    content: "";
    aspect-ratio: 1;
    border-radius: revert;
    background: url(../img/icon_pdf.png) no-repeat center bottom/contain;
  }
  .c-btn__group.--to {
    margin-block-start: 2.2lh;
  }
  .c-btn__group.--center {
    display: grid;
    justify-content: center;
  }
}
@layer Components.link {
  .c-link {
    font-weight: bold;
    align-self: flex-end;
    display: grid;
    grid-template-columns: 1fr min(4vw, 28px);
    margin-block: var(--leading-trim);
    column-gap: 0.5em;
    color: var(--clr-official-primary);
  }
  .c-link::after {
    content: "";
    aspect-ratio: 1;
    border-radius: 50%;
    background: url(../img/ic_arrow_white.svg) currentColor no-repeat center center/48% auto;
  }
}
/* --- Components => Heading --- */
@layer Components.heading {
  .c-heading__lv1 {
    --min-font-size: 24;
    --max-font-size: 48;
    font-weight: bold;
    margin-block: var(--leading-trim);
    line-height: 1.3333333333;
  }
  .c-heading__lv1 .--lg {
    --min-font-size: 32;
    --max-font-size: 60;
  }
  .c-heading__lv1:not(:first-child) {
    margin-block-start: 1.25lh;
  }
  .c-heading__lv1:where(:is(.--auto-format) *):not(:last-child) {
    margin-block-end: 0.56lh;
  }
}
/* --- Components => Card --- */
@layer Components.Card {
  .c-card__list {
    --padding-inline: min(6.4vw, 32px);
    --gap: min(6.4vw, 32px) 1lh;
    display: grid;
    gap: var(--gap);
    z-index: 99;
  }
  @media (width >= 992px) {
    .c-card__list {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .c-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "img ." "heading link";
    grid-row: span 2;
    background: #fff;
    overflow: hidden;
    border-radius: 1em;
    padding: var(--padding-inline);
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.08);
    cursor: pointer;
  }
  .c-card:where(#root:not([data-page=home]) *) {
    transition: 0.3s transform ease;
  }
  .c-card:where(#root[data-page=home] *) {
    opacity: 0;
  }
  .c-card:has(.c-card__description) {
    grid-row: span 4;
    grid-template-areas: "img ." "heading ." "description ." ". link";
  }
  .c-card:focus-visible {
    transform: scale(1.08);
  }
  @media (any-hover: hover) {
    .c-card:hover {
      transform: scale(1.08);
    }
  }
  .c-card__image {
    grid-area: img;
    grid-column: 1/-1;
    margin: calc(var(--padding-inline) * -1) calc(var(--padding-inline) * -1) 0;
    aspect-ratio: 21/9;
    contain: strict;
  }
  .c-card__image :is(img) {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .c-card__heading {
    --min-font-size: 24;
    --max-font-size: 32;
    grid-area: heading;
    display: grid;
    margin-block: var(--leading-trim);
    line-height: 1.48;
    font-weight: bold;
  }
  .c-card__heading span {
    --min-font-size: 18;
    --max-font-size: 24;
  }
  .c-card__heading:where(.c-card:has(.c-card__description) *) {
    --min-font-size: 20;
    --max-font-size: 24;
    grid-column: 1/-1;
  }
  .c-card__description {
    grid-area: description;
    grid-column: 1/-1;
    margin-block: var(--leading-trim);
  }
  .c-card__link {
    grid-area: link;
    font-weight: bold;
    align-self: flex-end;
    display: grid;
    grid-template-columns: 1fr min(4vw, 28px);
    margin-block: var(--leading-trim);
    column-gap: 0.5em;
    align-items: center;
  }
  .c-card__link:is(a) {
    color: var(--clr-official-primary);
  }
  .c-card__link::after {
    content: "";
    aspect-ratio: 1;
    border-radius: 50%;
    background: url(../img/ic_arrow_white.svg) currentColor no-repeat center center/48% auto;
  }
}
/* --- Components => Attention --- */
@layer Components.Attention {
  .c-attention__list {
    display: grid;
    row-gap: 0.4lh;
  }
  .c-attention__item {
    --min-font-size: 12;
    --max-font-size: 14;
    color: #808080;
    line-height: 1.4285714286;
    position: relative;
    padding-inline-start: 1em;
  }
  .c-attention__item :is(a) {
    text-decoration: underline;
  }
  .c-attention__item::before {
    content: "※";
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* --- Components => Datatable --- */
@layer Components.Datatable {
  .c-datatable {
    --side-gap: min(2.5vw, 20px);
    display: grid;
    padding-inline: var(--side-gap);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  }
  .c-datatable-heading {
    --min-font-size: 20;
    --max-font-size: 28;
    background: var(--clr-official-primary);
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 0.25lh 1em;
    margin-inline: calc(var(--side-gap) * -1);
  }
  .c-datatable-row {
    display: grid;
    padding-block: 0.5lh;
    align-items: center;
  }
  @media (width >= 992px) {
    .c-datatable-row {
      grid-template-columns: min(24vw, 250px) 1fr;
    }
  }
  .c-datatable-row:not(:last-child) {
    border-block-end: 1px dashed #aaa;
  }
  .c-datatable-row__headline {
    --min-font-size: 18;
    --max-font-size: 20;
  }
  .c-datatable-row__headline.--has-icon {
    display: grid;
    grid-template-columns: min(12vw, 52px) 1fr;
    align-items: center;
    column-gap: 1em;
  }
  .c-datatable-row__headline.--has-icon::before {
    content: "";
    aspect-ratio: 52/48;
    display: block;
    background: #E4EDFF no-repeat center center/56% auto;
    border-radius: 8px;
  }
  .c-datatable-row__headline.--has-icon.--open::before {
    background-image: url(../img/ic_clock_dark.svg);
  }
  .c-datatable-row__headline.--has-icon.--target::before {
    background-image: url(../img/ic_card.svg);
  }
  .c-datatable-row__value {
    --min-font-size: 20;
    --max-font-size: 24;
    font-weight: bold;
  }
  @media (width <= 991px) {
    .c-datatable-row__value {
      margin-block-start: 0.32lh;
    }
  }
  .c-datatable-row__value span {
    --min-font-size: 16;
    --max-font-size: 18;
    background: #E4EDFF;
    border-radius: 3em;
    padding-inline: 0.5em;
    color: #415EA8;
    display: block;
  }
  @media (width >= 992px) {
    .c-datatable-row__value span {
      display: revert;
      margin-inline-end: 0.5em;
    }
    .c-datatable-row__value span:not(:first-child) {
      margin-inline-start: 1em;
    }
  }
  .c-datatable-row__value span.sun {
    background: #FF7A05;
    color: #fff;
  }
}
/* --- Components => Information --- */
@layer Components.Information {
  .c-information__list {
    display: grid;
  }
  @media (width >= 768px) {
    .c-information__list {
      padding-inline: 0;
    }
  }
  .c-information {
    --padding-inline: min(6.4vw, 40px);
    background: #fff;
    display: grid;
    grid-template-columns: 1fr min(8vw, 55px);
    grid-template-areas: "time icon" "heading .";
    align-items: center;
    gap: 0.2lh 2em;
    padding: var(--padding-inline);
    cursor: pointer;
  }
  .c-information:not(:last-child) {
    border-block-end: 3px dashed #D6D7E9;
  }
  .c-information::after {
    content: "";
    aspect-ratio: 1;
    border-radius: 50%;
    background: url(../img/ic_arrow.svg) #EDEDED no-repeat center center/32% auto;
    transition: 0.3s background ease;
    grid-area: icon;
    grid-row: 1/-1;
  }
  .c-information-heading :is(a) {
    --min-font-size: 16;
    --max-font-size: 20;
    color: #000;
    font-weight: bold;
    text-decoration: underline;
  }
  .c-information__publish {
    color: #808080;
    font-weight: 500;
  }
  .c-information:focus-visible::after {
    background: url(../img/ic_arrow_white.svg) var(--clr-official-primary) no-repeat center center/32% auto;
  }
  @media (any-hover: hover) {
    .c-information:hover::after {
      background: url(../img/ic_arrow_white.svg) var(--clr-official-primary) no-repeat center center/32% auto;
    }
  }
}
/* --- Components --- */
@layer Components.PageHeader {
  .c-page-header {
    padding: 4.8lh 0 0;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .c-page-header::before {
    content: "";
    inline-size: min(36vw, 280px);
    aspect-ratio: 645/427;
    display: block;
    background: url(../img/page-header-img.png) no-repeat center center/contain;
    margin-inline: auto;
    margin-block-end: 0.56lh;
  }
  .c-page-header::after {
    content: "";
    inline-size: min(68vw, 618px);
    aspect-ratio: 1.453;
    clip-path: shape(from 62.91% 16.21%, curve to 97.72% 32.94% with 74.93% 21.56%/91.97% 22.34%, curve to 89.3% 78.53% with 103.4% 43.56%/97.68% 64.14%, curve to 60.67% 99.8% with 81% 92.99%/69.93% 101.41%, curve to 32.56% 79.77% with 51.39% 98.1%/43.87% 86.49%, curve to 1.58% 60.95% with 21.24% 72.94%/6.19% 70.98%, curve to 10.63% 19.92% with -2.95% 50.98%/2.96% 32.93%, curve to 35.8% 0.09% with 18.3% 6.91%/27.68% -0.95%, curve to 62.91% 16.21% with 43.99% 1.12%/50.91% 10.96%, close);
    background: #E1FFB2;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 25%);
    z-index: -1;
  }
  .c-page-header-heading {
    --min-font-size: 32;
    --max-font-size: 60;
    font-weight: bold;
    display: grid;
    line-height: 1.375;
  }
  .c-page-header-heading span {
    --min-font-size: 24;
    --max-font-size: 32;
  }
}
/* --- Components --- */
@layer Components.Dialog {
  .c-dialog__wrapper {
    display: grid;
    place-content: center center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    display: none;
  }
  .c-dialog__wrapper[open] {
    display: grid;
    visibility: visible;
    opacity: 1;
    pointer-events: revert;
    height: revert;
  }
  .c-dialog__wrapper::backdrop {
    background: rgba(0, 0, 0, 0.65);
  }
  .c-dialog {
    --padding: min(2.4vw, 24px);
    inline-size: min(80vw, 540px);
    border: 5px solid #000;
    border-radius: 1em;
    background: #fff;
    block-size: auto;
    position: relative;
  }
  .c-dialog:has(.c-dialog-image__wrapper) {
    inline-size: min(80vw, 800px);
  }
  .c-dialog__close {
    --min-font-size: 20;
    --max-font-size: 24;
    inline-size: min(8vw, 64px);
    aspect-ratio: 1;
    display: grid;
    place-content: center center;
    font-weight: bold;
    border: 5px solid #000;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 0;
    background: #000;
    color: #fff;
    transform: translate(50%, -50%);
  }
  .c-dialog-header {
    padding-block: 0.24lh;
    border-block-end: 5px solid #000;
    text-align: center;
  }
  .c-dialog-heading {
    --min-font-size: 20;
    --max-font-size: 24;
    font-weight: bold;
  }
  .c-dialog-body {
    padding: var(--padding);
    gap: 0.5lh min(2.4vw, 24px);
    display: grid;
  }
  .c-dialog-image__wrapper {
    display: grid;
    grid-row: -1;
  }
  @media (width >= 992px) {
    .c-dialog-image__wrapper {
      grid-row: revert;
    }
  }
}
/* --- Components => Guide --- */
@layer Components.Guide {
  .c-guide__list {
    display: grid;
    row-gap: 2.4lh;
  }
  .c-guide {
    display: grid;
    gap: min(5.6vw, 24px);
  }
  @media (width >= 992px) {
    .c-guide {
      grid-template-columns: min(48vw, 540px) 1fr;
    }
  }
  .c-guide-heading {
    --min-font-size: 24;
    --max-font-size: 32;
    font-weight: var(--fw-b);
    margin-block-end: 0.32lh;
  }
  .c-guide__description {
    font-weight: var(--fw-m);
  }
}
/* --- Components => Thumbnail --- */
@layer Components.Thumbnail {
  .c-thumbnail__list {
    --gutter: min(2.4vw, 12px);
    --side-gap: min(2.4vw, 12px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, (1024px - var(--gutter) * 2) / 3), 1fr));
    gap: var(--gutter);
    border-radius: 8px;
    overflow: hidden;
  }
  .c-thumbnail {
    display: grid;
    grid-template-columns: var(--side-gap) 1fr var(--side-gap) min(24vw, 180px) var(--side-gap);
    grid-template-rows: subgrid;
    grid-row: span 3;
    background: #fff;
    row-gap: 0.56lh;
    color: #000;
    border-radius: 8px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    grid-template-areas: "heading . . . ." ". desc . img .";
  }
  @media (width >= 992px) {
    .c-thumbnail {
      grid-template-columns: var(--side-gap) 1fr var(--side-gap) min(18vw, 120px) var(--side-gap);
    }
  }
  .c-thumbnail__heading {
    --min-font-size: 18;
    --max-font-size: 20;
    grid-area: heading;
    grid-column: 1/-1;
    font-weight: var(--fw-b);
    line-height: 1.32;
    background: var(--clr-official-primary);
    color: #fff;
    padding: 0.24lh 1em;
    display: grid;
    place-content: center center;
  }
  .c-thumbnail__description {
    --min-font-size: 12;
    --max-font-size: 14;
    line-height: 1.32;
    grid-area: desc;
  }
  .c-thumbnail__image {
    grid-area: img;
    inline-size: 100%;
    aspect-ratio: 4/3;
  }
  .c-thumbnail__image :is(img) {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: 8px;
  }
}
@layer Components.Align {
  .c-align-center * {
    max-inline-size: min(100%, fit-content);
    margin-inline: auto;
    display: block;
  }
}
/* Layout(  @layer Base )
---------------------------------------------------------- */
@layer Layout;
/* --- Root --- */
@layer Layout.Root {
  .l-root {
    inline-size: 100%;
    overflow-x: hidden;
  }
}
/* --- Header --- */
@layer Layout.Header {
  .l-header {
    display: grid;
    grid-template-columns: min(var(--px) * 100, 267px) 1fr auto calc(var(--theme-side-gap) * 0.5);
    grid-template-rows: repeat(2, auto);
    grid-template-areas: "logo auther util .";
    position: fixed;
    top: 0;
    left: 0;
    inline-size: 100%;
    z-index: 999;
    transition: 0.3s all ease;
  }
  @media (width >= 992px) {
    .l-header {
      grid-template-columns: min(var(--px) * 100, 267px) 1fr auto var(--theme-side-gap);
    }
    .l-header:where(.is-scroll *) {
      grid-template-columns: min(var(--px) * 120, 148px) 1fr auto var(--theme-side-gap);
      background-image: linear-gradient(#ffffff, transparent);
    }
  }
  .l-header__logo {
    grid-area: logo;
    grid-row: 1/-1;
    background: #fff;
    border-radius: 0 0 min(50%, 120px) 0;
    overflow: hidden;
    padding: min(2.4vw, 24px);
    transition: 0.3s all ease;
  }
  .l-header__logo :is(img) {
    transition: 0.3s all ease;
  }
  .l-header-link__list {
    display: none;
    row-gap: 0.32lh;
    align-self: center;
    grid-column: 2/-2;
    grid-row: 1/2;
    position: relative;
    z-index: 10;
    padding-inline-start: 1em;
    block-size: min(5vw, 80px);
    align-items: center;
  }
  @media (width >= 992px) {
    .l-header-link__list {
      display: grid;
      grid-auto-flow: column;
      justify-content: flex-start;
      column-gap: 1em;
    }
  }
  .l-header-link {
    margin-block: var(--leading-trim);
    font-weight: bold;
    text-shadow: 0 0 0.2em white, 0 0 1em white;
    border: 1px solid #ddd;
    border-radius: 5em;
    padding: 0.16lh 1em;
    background: #fff;
    color: #000;
    display: grid;
    grid-template-columns: min(5.6vw, 24px) 1fr;
    align-items: center;
    column-gap: 0.5em;
    line-height: 1.32;
  }
  .l-header-link :is(a) {
    text-decoration: underline;
  }
  .l-header-link::before {
    content: "";
    display: block;
    aspect-ratio: 1;
    border-radius: 50%;
  }
  .l-header-link:is(.--auther)::before {
    background: url(../img/ic_auther.svg) #3d9cdb no-repeat center center/80% auto;
  }
  .l-header-link:is(.--cooperation)::before {
    background: url(../img/ic_cooperation.svg) #33cc66 no-repeat center center/80% auto;
  }
  .l-header-link:is(.--access)::before {
    background: url(../img/ic_place.svg) #fff no-repeat center center/contain;
  }
  .l-header-link:is(.--support)::before {
    background: url(../img/ic_support.png) #FBBEE9 no-repeat center center/130% auto;
  }
  .l-header-auther {
    grid-area: auther;
    padding-block: 1.5lh 1lh;
    font-weight: bold;
    align-items: center;
    display: none;
    margin-inline-start: 1em;
  }
  @media (width >= 992px) {
    .l-header-auther {
      display: block;
    }
  }
  .l-header-auther a {
    font-weight: normal;
    display: grid inline;
    grid-template-columns: auto min(2vw, 18px);
    align-items: baseline;
    column-gap: 0.25em;
  }
  .l-header-auther a::after {
    content: "";
    aspect-ratio: 1;
    background: url(../img/ic_blank.svg) no-repeat center center/contain;
  }
  .l-header-util {
    grid-area: util;
    display: grid;
    grid-template-columns: min(var(--px) * 40, 90px) min(var(--px) * 60, 140px);
    grid-auto-flow: column;
    grid-row: 1/-1;
    align-items: flex-start;
    transform: translateY(calc(var(--theme-side-gap) * 0.5));
    column-gap: min(2.4vw, 18px);
    z-index: 99;
  }
  @media (width >= 992px) {
    .l-header-util {
      align-items: center;
      transform: revert;
    }
    .l-header-util:where(.is-scroll *) {
      grid-template-columns: 72px 100px;
      transition: 0.3s all ease;
    }
  }
  .l-header-sns__list {
    display: grid;
    grid-auto-flow: column;
  }
  .l-header-sns__link {
    background: var(--clr-official-instagram);
    display: grid;
    place-content: center center;
    padding: 0.25lh min(2.4vw, 16px);
    aspect-ratio: 1.077;
    transition: all 0.3s ease;
    clip-path: shape(from 80.97% 6.16%, curve to 97.39% 34.31% with 89.21% 11.99%/94.42% 22.92%, curve to 98.05% 68.03% with 100.36% 45.7%/101.08% 57.49%, curve to 79.46% 93.36% with 94.97% 78.63%/88.06% 87.86%, curve to 50.63% 99.91% with 70.86% 98.79%/60.56% 100.43%, curve to 22.94% 91.07% with 40.69% 99.38%/31.12% 96.7%, curve to 4.1% 66.65% with 14.83% 85.44%/8.1% 76.86%, curve to 1.5% 33.85% with 0.05% 56.44%/-1.35% 44.52%, curve to 20.46% 8.13% with 4.41% 23.18%/11.62% 13.76%, curve to 50.63% 0.14% with 29.3% 2.56%/39.78% 0.66%, curve to 80.97% 6.16% with 61.47% -0.38%/72.73% 0.34%, close);
  }
  .l-header-drawer__btn {
    --min-font-size: 12;
    --max-font-size: 20;
    display: grid;
    place-content: center center;
    line-height: 1;
    background: var(--clr-official-primary);
    color: #fff;
    aspect-ratio: 1.076;
    clip-path: shape(from 19.03% 6.16%, curve to 2.61% 34.31% with 10.79% 11.99%/5.58% 22.92%, curve to 1.95% 68.03% with -0.36% 45.7%/-1.08% 57.49%, curve to 20.54% 93.36% with 5.03% 78.63%/11.94% 87.86%, curve to 49.37% 99.91% with 29.14% 98.79%/39.44% 100.43%, curve to 77.06% 91.07% with 59.31% 99.38%/68.88% 96.7%, curve to 95.9% 66.65% with 85.17% 85.44%/91.9% 76.86%, curve to 98.5% 33.85% with 99.95% 56.44%/101.35% 44.52%, curve to 79.54% 8.13% with 95.59% 23.18%/88.38% 13.76%, curve to 49.37% 0.14% with 70.7% 2.56%/60.22% 0.66%, curve to 19.03% 6.16% with 38.53% -0.38%/27.27% 0.34%, close);
    font-weight: bold;
    row-gap: 0.5lh;
    transition: 0.3s all ease;
  }
  .l-header-drawer__btn::before {
    content: "";
    inline-size: 40%;
    aspect-ratio: 1;
    background: url(../img/ic_menu.svg) no-repeat center center/contain;
    display: grid;
    margin-inline: auto;
  }
  @media (width >= 992px) {
    .l-header-drawer__btn:where(.is-scroll *) {
      --min-font-size: 14;
      --max-font-size: 16;
    }
    .l-header-drawer__btn:where(.is-scroll *)::before {
      inline-size: 40%;
    }
  }
  .l-header-drawer__btn:focus-visible {
    transform: scale(1.4);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.16);
  }
  .l-header-drawer__btn:focus-visible::before {
    background-color: #fff;
  }
  @media (any-hover: hover) {
    .l-header-drawer__btn:hover {
      transform: scale(1.2);
      box-shadow: 0 0 16px rgba(0, 0, 0, 0.16);
    }
  }
}
/* --- Main --- */
@layer Layout.Main {
  .l-main {
    display: grid;
    row-gap: min(12.5vw, 120px);
  }
  .l-main:where(.l-root:not([data-page=home]) *) {
    margin-block-end: min(18vw, 240px);
  }
}
/* --- Section --- */
@layer Layout.Section {
  .l-section {
    display: grid;
    position: relative;
  }
  .l-section:has(.l-section__inner) {
    grid-template-columns: var(--theme-side-gap) 1fr var(--theme-inline-size-base) 1fr var(--theme-side-gap);
    grid-template-areas: ". . inner . .";
  }
  .l-section:is(.--ball1)::after {
    content: "";
    inline-size: 890px;
    background: #fbffca;
    aspect-ratio: 1.2;
    clip-path: shape(from 80.08% 14.79%, curve to 99.86% 45.84% with 89.77% 22.83%/98.59% 33.82%, curve to 87.38% 80.78% with 101.05% 57.86%/94.68% 70.91%, curve to 63.36% 99.33% with 80.01% 90.65%/71.85% 97.34%, curve to 38.41% 94.56% with 54.93% 101.32%/46.24% 98.62%, curve to 16.18% 76.64% with 30.65% 90.5%/23.68% 85.08%, curve to 0.06% 44.09% with 8.75% 68.13%/0.72% 56.58%, curve to 15.32% 9.78% with -0.67% 31.51%/5.89% 17.9%, curve to 48.5% 0.31% with 24.74% 1.66%/37.08% -0.97%, curve to 80.08% 14.79% with 59.91% 1.5%/70.46% 6.67%, close);
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: -2;
    transform: translate(-90%, 50%);
    pointer-events: none;
  }
  .l-section:is(.--ball2) {
    padding-block-start: 1.24lh;
  }
  .l-section:is(.--ball2)::after {
    content: "";
    inline-size: min(68vw, 820px);
    aspect-ratio: 1.113;
    background: #E8F2FF;
    clip-path: shape(from 49.48% 0.51%, curve to 82.92% 4.32% with 61.5% -0.03%/73.69% -1.29%, curve to 99.73% 35.04% with 92.1% 9.87%/98.37% 22.33%, curve to 91.9% 72.39% with 101.05% 47.69%/97.41% 60.54%, curve to 69.11% 98.58% with 86.3% 84.23%/78.75% 95.06%, curve to 36.29% 93.99% with 59.5% 102.16%/47.81% 98.34%, curve to 7.03% 75.42% with 24.84% 89.65%/13.52% 84.73%, curve to 0.73% 38.95% with 0.55% 66.01%/-1.18% 52.11%, curve to 16.91% 7.23% with 2.68% 25.83%/8.22% 13.41%, curve to 49.48% 0.51% with 25.61% 1.06%/37.46% 1.14%, close);
    position: absolute;
    right: 50%;
    top: 0;
    z-index: -1;
    transform: translate(80%, -10%);
    pointer-events: none;
  }
  .l-section__inner {
    grid-area: inner;
  }
  .l-section__inner:is(.--auto-format) > *:not(.c-heading__lv1, .l-section-header):not(:last-child) {
    margin-block-end: 1.32lh;
  }
  .l-section__inner:is(.--auto-format) ul > li {
    position: relative;
    padding-inline-start: 1.24em;
  }
  .l-section__inner:is(.--auto-format) ul > li::before {
    content: "";
    inline-size: min(2.4vw, 16px);
    aspect-ratio: 1;
    background: var(--clr-official-primary);
    border-radius: 50%;
    position: absolute;
    top: 0.24lh;
    left: 0;
  }
  .l-section__inner:is(.--auto-format) :is(a):not(.c-btn):is([href$=".pdf"],
  [href$=".doc"],
  [href$=".docx"],
  [href$=".xlsx"],
  [href$=".xls"],
  [href$=".ppt"],
  [target=_blank]) {
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.56em;
  }
  .l-section__inner:is(.--auto-format) :is(a):not(.c-btn):is([href$=".pdf"],
  [href$=".doc"],
  [href$=".docx"],
  [href$=".xlsx"],
  [href$=".xls"],
  [href$=".ppt"],
  [target=_blank])::after {
    content: "";
    inline-size: 1.48em;
    aspect-ratio: 1;
    display: inline-block;
    vertical-align: text-bottom;
    margin-inline-start: 0.32em;
  }
  .l-section__inner:is(.--auto-format) :is(a):not(.c-btn)[href$=".pdf"]::after {
    content: "";
    background: url(../img/icon_pdf.png) no-repeat center bottom/contain;
  }
  .l-section__inner:is(.--auto-format) :is(a):not(.c-btn)[href$=".doc"]::after, .l-section__inner:is(.--auto-format) :is(a):not(.c-btn)[href$=".docx"]::after {
    content: "";
    background: url(../img/icon_word.png) no-repeat center bottom/contain;
  }
  .l-section__inner:is(.--auto-format) :is(a):not(.c-btn)[href$=".xls"]::after, .l-section__inner:is(.--auto-format) :is(a):not(.c-btn)[href$=".xlsx"]::after {
    content: "";
    background: url(../img/icon_excel.png) no-repeat center bottom/contain;
  }
  .l-section__inner:is(.--auto-format) :is(a):not(.c-btn)[href$=".ppt"]::after {
    content: "";
    background: url(../img/icon_ppt.png) no-repeat center bottom/contain;
  }
  .l-section-header {
    margin-block-end: 1.72lh;
  }
  .l-section-header:has(.c-link) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: ". heading link";
    align-items: flex-end;
  }
  .l-section-header:has(.c-link)::before {
    content: "";
  }
  .l-section-header:has(.c-link) .c-link {
    align-self: flex-end;
    justify-self: end;
  }
  .l-section-header .c-heading__lv1 {
    max-inline-size: fit-content;
    margin-inline: auto;
  }
  .l-section-description {
    --min-font-size: 18;
    --max-font-size: 20;
    margin-inline: auto;
    line-height: 1.6666666667;
    max-inline-size: fit-content;
    margin-block-start: 1lh;
  }
}
/* --- Footer --- */
@layer Layout.Footer {
  .l-footer {
    background: var(--clr-official-primary);
  }
  .l-footer-section {
    display: grid;
    grid-template-columns: var(--theme-side-gap) 1fr var(--theme-inline-size-base) 1fr var(--theme-side-gap);
    grid-template-areas: ". . inner . .";
    position: relative;
  }
  .l-footer-section__inner {
    grid-area: inner;
  }
  .l-footer-section :is(.--max) {
    grid-column: 1/-1;
  }
  .l-footer-cta__list {
    display: grid;
    margin-inline: auto;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    row-gap: 1.8lh;
    margin-block-start: calc(clamp(2rem, 0.267rem + 7.4vw, 5rem) * -1);
    padding-block: calc(var(--theme-side-gap) * 2);
  }
  @media (width >= 992px) {
    .l-footer-cta__list {
      padding-block: 0;
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .l-footer-cta__list::before {
    inline-size: 2px;
    block-size: 65%;
    background: #ddd;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  @media (width >= 992px) {
    .l-footer-cta__list {
      row-gap: revert;
    }
    .l-footer-cta__list::before {
      content: "";
    }
  }
  .l-footer-cta__block {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 1lh;
    padding-inline: var(--theme-side-gap);
  }
  @media (width >= 992px) {
    .l-footer-cta__block {
      padding-block: 1lh 2.2lh;
      padding-block: 2.2lh;
    }
  }
  .l-footer-cta__headline {
    --min-font-size: 20;
    --max-font-size: 24;
    max-inline-size: fit-content;
    margin-inline: auto;
    font-weight: bold;
    margin-block: var(--leading-trim);
  }
  .l-footer-cta__phone {
    --min-font-size: 28;
    --max-font-size: 42;
    color: var(--clr-official-primary);
    font-weight: bold;
    display: grid;
    margin-block-start: var(--leading-trim);
    max-inline-size: fit-content;
    margin-inline: auto;
    line-height: 1.5;
  }
  .l-footer-cta__phone span {
    --min-font-size: 16;
    --max-font-size: 18;
    color: #000;
    margin-block: var(--leading-trim);
    max-inline-size: fit-content;
    margin-inline: auto;
  }
  .l-footer-cta-btn__group {
    display: grid;
    grid-template-columns: 1fr min(80%, 300px) 1fr;
    grid-template-areas: ". btn .";
  }
  .l-footer-cta-btn {
    --min-font-size: 16;
    --max-font-size: 18;
    grid-area: btn;
    font-weight: bold;
    border: 1px solid #aaa;
    border-radius: 8em;
    padding: 5px;
    display: grid;
    grid-template-columns: min(8vw, 48px) 1fr;
    align-items: center;
    column-gap: 1em;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  }
  .l-footer-cta-btn:is(a) {
    color: #000;
  }
  .l-footer-cta-btn::before {
    content: "";
    aspect-ratio: 1;
    background: #48BBC8;
    border-radius: 50%;
  }
  .l-footer-cta-btn:is(.--contact)::before {
    background: url(../img/ic_mail.svg) #48BBC8 no-repeat center center/60% auto;
  }
  .l-footer-cta-btn:is(.--support)::before {
    background: url(../img/ic_support.png) #FBBEE9 no-repeat center center/auto 100%;
  }
  .l-footer-bottom {
    padding-block-end: 80px;
    display: grid;
    margin-block-start: 1.56lh;
    row-gap: 0.5lh;
  }
  @media (width >= 992px) {
    .l-footer-bottom {
      grid-template-columns: 1fr auto;
    }
  }
  .l-footer-auther {
    --min-font-size: 12;
    --max-font-size: 14;
    color: #fff;
  }
  .l-footer-sns {
    display: grid;
    align-items: center;
    column-gap: 1em;
    grid-template-columns: auto min(8vw, 56px);
    justify-content: flex-start;
  }
  @media (width >= 992px) {
    .l-footer-sns {
      grid-template-columns: 1fr min(8vw, 56px);
    }
  }
  .l-footer-sns__label {
    --min-font-size: 20;
    --max-font-size: 24;
    color: #fff;
    display: grid;
    font-weight: bold;
    grid-template-columns: auto min(3vw, 60px);
    align-items: center;
    column-gap: 1em;
  }
  .l-footer-sns__label::after {
    content: "";
    block-size: 1px;
    background: #fff;
    display: block;
  }
  .l-footer-sns__icon {
    background: var(--clr-official-instagram);
    display: grid;
    place-content: center center;
    padding: 0.25lh min(2vw, 16px);
    aspect-ratio: 1.077;
    clip-path: shape(from 80.97% 6.16%, curve to 97.39% 34.31% with 89.21% 11.99%/94.42% 22.92%, curve to 98.05% 68.03% with 100.36% 45.7%/101.08% 57.49%, curve to 79.46% 93.36% with 94.97% 78.63%/88.06% 87.86%, curve to 50.63% 99.91% with 70.86% 98.79%/60.56% 100.43%, curve to 22.94% 91.07% with 40.69% 99.38%/31.12% 96.7%, curve to 4.1% 66.65% with 14.83% 85.44%/8.1% 76.86%, curve to 1.5% 33.85% with 0.05% 56.44%/-1.35% 44.52%, curve to 20.46% 8.13% with 4.41% 23.18%/11.62% 13.76%, curve to 50.63% 0.14% with 29.3% 2.56%/39.78% 0.66%, curve to 80.97% 6.16% with 61.47% -0.38%/72.73% 0.34%, close);
  }
  .l-footer-sns__icon :is(img) {
    inline-size: 100%;
  }
}
/* --- Article --- */
@layer Layout.Article {
  .l-article-header {
    display: grid;
    margin-block-end: 1.72lh;
  }
  .l-article-header__title {
    --min-font-size: 27;
    --max-font-size: 48;
    max-inline-size: fit-content;
    margin-inline: auto;
    font-weight: var(--fw-b);
    margin-block: var(--leading-trim) calc(var(--leading-trim) + 0.4lh);
    line-height: 1.32;
  }
  .l-article-header__published {
    --min-font-size: 18;
    --max-font-size: 20;
    max-inline-size: fit-content;
    margin-inline: auto;
    font-weight: var(--fw-b);
    display: grid;
    grid-template-columns: min(3.2vw, 24px) 1fr;
    column-gap: 0.48em;
    align-items: center;
    color: #808080;
  }
  .l-article-header__published::before {
    content: "";
    aspect-ratio: 1;
    background: url(../img/ic_clock_dark.svg) no-repeat center center/contain;
  }
  .l-article-body {
    margin-block-end: 1.72lh;
  }
}
/* --- Drawer --- */
@layer Layout.Drawer {
  .l-drawer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    place-content: center center;
    transform: scale(1);
    display: grid;
    transform-origin: center center;
    contain: strict;
    pointer-events: none;
  }
  .l-drawer::after {
    content: "";
    aspect-ratio: 1;
    background: var(--clr-official-primary);
    position: absolute;
    top: 0;
    right: 0;
    transform: scale(1) translate(100%, -100%);
    opacity: 1;
    border-radius: 50%;
    transition: 1s transform 0.35s ease, 1s opacity 0.35s ease, 1s visibility 0.35s ease, 1s border-radius 0.35s ease;
  }
  @media (orientation: portrait) {
    .l-drawer::after {
      block-size: 100svh;
    }
  }
  @media (orientation: landscape) {
    .l-drawer::after {
      inline-size: 100%;
    }
  }
  .l-drawer:where(.l-root.--drawer-open *) {
    pointer-events: revert;
  }
  .l-drawer:where(.l-root.--drawer-open *)::after {
    transform: scale(2) translate(0, 0);
    transition: 1s transform ease, 1s opacity ease, 1s visibility ease, 1s border-radius ease;
  }
  .l-drawer:where(.l-root.--drawer-open *) .l-drawer__outer, .l-drawer:where(.l-root.--drawer-open *) .l-drawer__close {
    opacity: 1;
  }
  .l-drawer__close {
    --min-font-size: 12;
    --max-font-size: 20;
    inline-size: min(var(--px) * 60, 140px);
    display: grid;
    place-content: center center;
    line-height: 1;
    background: #404040;
    color: #fff;
    aspect-ratio: 1.076;
    clip-path: shape(from 19.03% 6.16%, curve to 2.61% 34.31% with 10.79% 11.99%/5.58% 22.92%, curve to 1.95% 68.03% with -0.36% 45.7%/-1.08% 57.49%, curve to 20.54% 93.36% with 5.03% 78.63%/11.94% 87.86%, curve to 49.37% 99.91% with 29.14% 98.79%/39.44% 100.43%, curve to 77.06% 91.07% with 59.31% 99.38%/68.88% 96.7%, curve to 95.9% 66.65% with 85.17% 85.44%/91.9% 76.86%, curve to 98.5% 33.85% with 99.95% 56.44%/101.35% 44.52%, curve to 79.54% 8.13% with 95.59% 23.18%/88.38% 13.76%, curve to 49.37% 0.14% with 70.7% 2.56%/60.22% 0.66%, curve to 19.03% 6.16% with 38.53% -0.38%/27.27% 0.34%, close);
    font-weight: bold;
    row-gap: 0.5lh;
    z-index: 100;
    position: fixed;
    right: var(--theme-side-gap);
    top: calc(var(--theme-side-gap) * 1.42);
    transition: 0.3s all ease;
  }
  .l-drawer__close::before {
    content: "";
    inline-size: 60%;
    aspect-ratio: 1;
    background: url(../img/ic_close.svg) no-repeat center center/contain;
    display: grid;
    margin-inline: auto;
  }
  .l-drawer__close:focus-visible {
    transform: scale(1.4);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.16);
  }
  .l-drawer__close:focus-visible::before {
    background-color: #fff;
  }
  @media (any-hover: hover) {
    .l-drawer__close:hover {
      transform: scale(1.2);
      box-shadow: 0 0 16px rgba(0, 0, 0, 0.16);
    }
  }
  .l-drawer__outer {
    padding-block: min(5vw, 72px);
    overflow-y: auto;
    transition: 0.5s all ease;
    opacity: 0;
    display: grid;
    place-content: center center;
    grid-template-columns: var(--theme-side-gap) 1fr min(100% - var(--theme-side-gap) * 2, 720px) 1fr var(--theme-side-gap);
    grid-template-areas: ". . inner . .";
    position: absolute;
    inset: 0;
    z-index: 99;
    place-content: center center;
  }
  .l-drawer__outer:where(.l-root.--drawer-open *) {
    transition: 0.5s opacity 1s ease;
  }
  .l-drawer__inner {
    grid-area: inner;
    z-index: 99;
    position: relative;
    color: #fff;
  }
  .l-drawer-header {
    display: grid;
    align-items: center;
    row-gap: 1lh;
    column-gap: 1em;
    margin-block-end: min(5.6vw, 32px);
  }
  .l-drawer-header__logo {
    inline-size: min(var(--px) * 160, 220px);
    margin-inline: auto;
  }
  .l-drawer-header-link__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: min(3.2vw, 24px);
  }
  @media (width >= 992px) {
    .l-drawer-header-link__list {
      place-content: center center;
      grid-template-columns: revert;
      grid-auto-flow: column;
    }
  }
  .l-drawer-header-link :is(a) {
    color: currentColor;
    text-decoration: underline;
  }
  .l-drawer-body {
    padding-block-end: 1.72lh;
  }
  .l-drawer-segment-heading {
    --min-font-size: 22;
    --max-font-size: 32;
    font-weight: bold;
    margin-block: calc(var(--leading-trim) + 0.72lh) calc(var(--leading-trim) + 0.56lh);
    display: grid;
    grid-template-columns: min(8vw, 32px) 1fr;
    align-items: flex-start;
    column-gap: 0.32em;
  }
  .l-drawer-segment-heading::before {
    content: "";
    background: yellow;
    display: block;
    aspect-ratio: 1.076;
    clip-path: shape(from 19.03% 6.16%, curve to 2.61% 34.31% with 10.79% 11.99%/5.58% 22.92%, curve to 1.95% 68.03% with -0.36% 45.7%/-1.08% 57.49%, curve to 20.54% 93.36% with 5.03% 78.63%/11.94% 87.86%, curve to 49.37% 99.91% with 29.14% 98.79%/39.44% 100.43%, curve to 77.06% 91.07% with 59.31% 99.38%/68.88% 96.7%, curve to 95.9% 66.65% with 85.17% 85.44%/91.9% 76.86%, curve to 98.5% 33.85% with 99.95% 56.44%/101.35% 44.52%, curve to 79.54% 8.13% with 95.59% 23.18%/88.38% 13.76%, curve to 49.37% 0.14% with 70.7% 2.56%/60.22% 0.66%, curve to 19.03% 6.16% with 38.53% -0.38%/27.27% 0.34%, close);
    position: relative;
    top: 0.24lh;
  }
  .l-drawer-menu__list {
    display: grid;
  }
  .l-drawer-menu__item {
    --min-font-size: 18;
    --max-font-size: 20;
    color: #fff;
    font-weight: bold;
    display: grid;
    grid-template-columns: 1fr min(8vw, 32px);
    align-items: center;
    padding-block: 0.32lh;
  }
  .l-drawer-menu__item::after {
    content: "";
    aspect-ratio: 1;
    background: url(../img/ic_arrow.svg) #fff no-repeat center center/48% auto;
    border-radius: 50%;
  }
  .l-drawer-menu__item:not(:last-child) {
    border-block-end: 1px dashed currentColor;
  }
  .l-drawer-contact {
    background: #fff;
    color: var(--clr-official-primary);
    border-radius: 1em;
    overflow: hidden;
    margin-block-start: 1.72lh;
  }
  .l-drawer-contact-heading {
    --min-font-size: 20;
    --max-font-size: 24;
    padding-block: 0.32lh;
    border-block-end: 1px solid currentColor;
    text-align: center;
    font-weight: bold;
  }
  .l-drawer-contact-body {
    padding: 1lh 1em;
    text-align: center;
  }
  .l-drawer-contact__phone {
    --min-font-size: 32;
    --max-font-size: 48;
    font-weight: bold;
    line-height: 1.32;
  }
  .l-drawer-contact-link__block {
    margin-block-start: 1lh;
    display: grid;
    justify-content: center;
  }
  .l-drawer-contact-link {
    --min-font-size: 16;
    --max-font-size: 18;
    grid-area: btn;
    font-weight: bold;
    border: 1px solid #aaa;
    border-radius: 8em;
    padding: 5px 28px 5px 5px;
    display: grid;
    grid-template-columns: min(8vw, 48px) 1fr;
    align-items: center;
    column-gap: 1em;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  }
  .l-drawer-contact-link:is(a) {
    color: #000;
  }
  .l-drawer-contact-link::before {
    content: "";
    aspect-ratio: 1;
    border-radius: 50%;
    background: url(../img/ic_mail.svg) #48BBC8 no-repeat center center/60% auto;
  }
}
/* Projects(  @layer Base )
---------------------------------------------------------- */
@layer Projects;
/* --- Projects --- */
@layer Projects.Home {
  @keyframes scroll-action {
    0% {
      opacity: 0;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
    }
    25% {
      opacity: 1;
    }
    60% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      top: 100%;
      left: 50%;
      transform: translate(-50%, 0);
    }
  }
  @keyframes slider-img-zoom {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.3);
    }
  }
  .p-home-slider {
    --padding-value: min(5vw, 80px);
    --innner-padding-value: min(3.2vw, 40px);
    --round-value: min(5vw, 60px);
    inline-size: 100%;
    aspect-ratio: 10/16;
    padding: var(--padding-value);
    background: #fff;
    display: grid;
    grid-template-columns: var(--innner-padding-value) repeat(3, 1fr) var(--innner-padding-value);
    grid-template-rows: var(--innner-padding-value) 1fr 1fr auto var(--innner-padding-value);
  }
  @media (width >= 1200px) {
    .p-home-slider {
      block-size: 100svh;
    }
  }
  .p-home-slider-scroll {
    --min-font-size: 14;
    --max-font-size: 24;
    grid-column: 3/4;
    grid-row: -3/-4;
    position: relative;
    justify-self: center;
    color: #fff;
    font-weight: bold;
    display: grid;
    grid-template-rows: auto auto;
    align-self: flex-end;
    justify-self: center;
    row-gap: 0.2lh;
  }
  @media (width >= 1200px) {
    .p-home-slider-scroll {
      grid-row: -1/-3;
    }
  }
  .p-home-slider-scroll :is(i) {
    inline-size: 3px;
    block-size: 1.5lh;
    background: #fff;
    justify-self: center;
    border-radius: 3em;
    position: relative;
  }
  .p-home-slider-scroll :is(i)::before {
    content: "";
    inline-size: min(2.4vw, 16px);
    aspect-ratio: 1;
    background: #fff;
    display: block;
    border-radius: 50%;
    position: absolute;
    animation: scroll-action 1.5s infinite;
  }
  .p-home-slider-arrow__list {
    position: absolute;
    bottom: 50%;
    left: 50%;
    z-index: 99;
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    column-gap: 40px;
    transform: translate(-50%, 50%);
    inline-size: 100%;
  }
  @media (width >= 1200px) {
    .p-home-slider-arrow__list {
      bottom: 0;
      left: 0;
      transform: translate(-40px, 40px);
      grid-auto-flow: column;
      justify-content: flex-start;
    }
  }
  .p-home-slider-arrow {
    --arrow-size: min(2.4vw, 16px);
    z-index: 99;
    cursor: pointer;
    inline-size: min(var(--px) * 40, 80px);
    aspect-ratio: 1;
    background: #ddd;
    border-radius: 50%;
    background: #EFEFEF;
    display: grid;
    position: relative;
    place-content: center center;
    transition: 0.3s box-shadow var(--easing-bounce), 0.3s transform var(--easing-bounce), 0.3s background-color ease;
  }
  @media (width <= 1199px) {
    .p-home-slider-arrow {
      border-radius: 50%;
    }
  }
  .p-home-slider-arrow :is(svg) {
    display: none;
  }
  .p-home-slider-arrow::before {
    content: "";
    width: var(--arrow-size);
    aspect-ratio: 1;
    background-color: #77aff1;
    clip-path: polygon(var(--arrow-size) 50%, 0% 0%, 0% var(--arrow-size));
    display: block;
  }
  @media (width <= 1199px) {
    .p-home-slider-arrow:is(.--prev) {
      left: calc(var(--theme-side-gap) * -1);
      border-radius: 0 50% 50% 0;
      background: #fff;
    }
  }
  .p-home-slider-arrow:is(.--prev)::before {
    clip-path: polygon(0% 50%, var(--arrow-size) 0%, var(--arrow-size) var(--arrow-size));
  }
  @media (width <= 1199px) {
    .p-home-slider-arrow:is(.--next) {
      left: calc(var(--theme-side-gap) * 1);
      border-radius: 50% 0 0 50%;
      background: #fff;
    }
  }
  .p-home-slider-arrow:focus-visible {
    transform: scale(1.4);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.16);
    background-color: var(--clr-official-primary);
  }
  .p-home-slider-arrow:focus-visible::before {
    background-color: #fff;
  }
  @media (any-hover: hover) {
    .p-home-slider-arrow:hover {
      transform: scale(1.4);
      box-shadow: 0 0 16px rgba(0, 0, 0, 0.16);
      background-color: var(--clr-official-primary);
    }
    .p-home-slider-arrow:hover::before {
      background-color: #fff;
    }
  }
  .p-home-slider-catch {
    grid-column: 2/-2;
    grid-row: 1/-1;
    position: relative;
    z-index: 11;
    align-self: center;
    display: grid;
    row-gap: 0.24lh;
    text-align: center;
    justify-self: center;
  }
  @media (width >= 1200px) {
    .p-home-slider-catch {
      text-align: right;
      justify-self: flex-end;
    }
  }
  .p-home-slider-catch span {
    --min-font-size: 16;
    --max-font-size: 32;
    font-weight: bold;
    color: #fff;
    position: relative;
    display: inline-block;
    inline-size: fit-content;
    z-index: 10;
    margin-inline: auto;
    text-shadow: 0 0 0.5em #2fa0e5, 0 0 0.5em #2fa0e5, 0 0 0.5em #2fa0e5;
  }
  @media (width >= 1200px) {
    .p-home-slider-catch span {
      margin-inline: 0;
    }
  }
  .p-home-slider-catch span::after {
    content: "";
    inline-size: 100%;
    background: var(--clr-official-primary);
    opacity: 0.72;
    block-size: 0.5lh;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
  }
  .p-home-slider .splide {
    grid-column: 1/-1;
    grid-row: 1/-1;
  }
  .p-home-slider .splide__track {
    block-size: 100%;
  }
  .p-home-slider .splide__slide {
    inline-size: 100%;
    block-size: 100%;
    border-radius: var(--round-value);
    overflow: hidden;
  }
  .p-home-slider .splide__slide :is(img) {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .p-home-slider .splide__slide.is-active img, .p-home-slider .splide__slide.is-prev img {
    animation: slider-img-zoom 20s linear infinite forwards;
  }
  .p-home-open__window {
    --inner-padding: min(2.5vw, 24px);
    --round-value: min(2.4vw, 16px);
    grid-column: -2/-5;
    grid-row: -2/-3;
    position: relative;
    z-index: 10;
    border-radius: var(--round-value);
    overflow: hidden;
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.16);
    justify-self: flex-end;
    inline-size: 100%;
  }
  @media (width >= 992px) {
    .p-home-open__window {
      inline-size: revert;
      grid-row: -2/-3;
    }
  }
  .p-home-open-header {
    background: var(--clr-official-primary);
    color: #fff;
    padding: 0.32lh 1em;
    display: grid;
    justify-content: center;
  }
  .p-home-open__heading {
    --min-font-size: 18;
    --max-font-size: 20;
    font-weight: bold;
    display: grid;
    grid-template-columns: min(5vw, 30px) 1fr;
    align-items: center;
    column-gap: 0.3em;
  }
  .p-home-open__heading::before {
    content: "";
    aspect-ratio: 1;
    background: url(../img/ic_clock.svg) no-repeat center center/contain;
  }
  .p-home-open-body {
    background: #fff;
    padding: 0.5lh var(--inner-padding);
  }
  .p-home-open__text {
    --min-font-size: 20;
    --max-font-size: 24;
    font-weight: bold;
    display: grid;
    grid-template-columns: 5em 1fr;
    column-gap: 0.5em;
    align-items: baseline;
    justify-content: flex-start;
  }
  .p-home-open__text :is(span) {
    --min-font-size: 16;
    --max-font-size: 18;
    background: #E4EDFF;
    border-radius: 5em;
    padding: 0 0.25em;
    line-height: 1.4;
    color: #415EA8;
    text-align: center;
  }
  .p-home-open__text :is(span).sun {
    background: #FF7A05;
    color: #fff;
  }
  .p-home-open__text :is(span).small {
    --min-font-size: 12;
    --max-font-size: 14;
    color: #808080;
    padding: 0;
    border-radius: 0;
    background: revert;
    display: block;
    grid-column: 2/3;
    text-align: left;
  }
  .p-home-feature {
    --inner-size-t1: 400px;
    --inner-size-t2: 378px;
    --inner-size-t3: 360px;
    --inner-size-t4: 380px;
    --balloon-inline-size-t1: min(calc(var(--px) * 148), 640px);
    --balloon-aspect-t1: 1.253;
    --balloon-path-t1: shape(from 23.69% 14.04%,curve to 59.22% 2.68% with 35.14% 6.81%/45.94% 5.11%,curve to 95.19% 5.32% with 72.43% 0.25%/88.2% -2.91%,curve to 96.78% 48.33% with 102.19% 13.46%/100.48% 33%,curve to 79.86% 84% with 93.08% 63.75%/87.39% 74.95%,curve to 53.22% 100% with 72.32% 93.06%/62.94% 99.88%,curve to 22.6% 83.57% with 43.5% 100.12%/33.51% 93.54%,curve to 0% 47.23% with 11.69% 73.69%/-0.14% 60.34%,curve to 23.69% 14.04% with 0.14% 34.13%/12.24% 21.27%,close);
    --balloon-color-t1: #DCFBE4;
    --img-bg-t1: url(../img/home/img_action_1.png) no-repeat center center / contain;
    --img-inline-size-t1: min(calc(var(--px) * 80), 183px);
    --img-aspect-t1: 1;
    --balloon-inline-size-t2: min(calc(var(--px) * 148), 618px);
    --balloon-aspect-t2: 1.453;
    --balloon-path-t2: shape(from 62.91% 16.21%,curve to 97.72% 32.94% with 74.93% 21.56%/91.97% 22.34%,curve to 89.3% 78.53% with 103.4% 43.56%/97.68% 64.14%,curve to 60.67% 99.8% with 81% 92.99%/69.93% 101.41%,curve to 32.56% 79.77% with 51.39% 98.1%/43.87% 86.49%,curve to 1.58% 60.95% with 21.24% 72.94%/6.19% 70.98%,curve to 10.63% 19.92% with -2.95% 50.98%/2.96% 32.93%,curve to 35.8% 0.09% with 18.3% 6.91%/27.68% -0.95%,curve to 62.91% 16.21% with 43.99% 1.12%/50.91% 10.96%,close);
    --balloon-color-t2: #E1FFB2;
    --img-bg-t2: url(../img/home/img_action_2.png) no-repeat center center / contain;
    --img-inline-size-t2: min(calc(var(--px) * 80), 200px);
    --img-aspect-t2: 1;
    --balloon-inline-size-t3: min(calc(var(--px) * 132), 520px);
    --balloon-aspect-t3: 1.128;
    --balloon-path-t3: shape(from 98.67% 22.66%,curve to 95.94% 55.81% with 101.5% 33.34%/99.45% 45.39%,curve to 80.85% 82.65% with 92.37% 66.19%/87.41% 74.98%,curve to 56.95% 99.04% with 74.32% 90.27%/66.23% 96.71%,curve to 27.78% 94.35% with 47.74% 101.34%/37.33% 99.42%,curve to 4.48% 70.42% with 18.21% 89.33%/9.51% 81.15%,curve to 3.34% 37.88% with -0.58% 59.75%/-1.89% 46.5%,curve to 29.17% 21% with 8.59% 29.2%/20.43% 25.04%,curve to 51.65% 8.32% with 37.95% 16.9%/43.63% 12.92%,curve to 79.07% 0.47% with 59.69% 3.67%/70.02% -1.62%,curve to 98.67% 22.66% with 88.1% 2.47%/95.81% 11.9%,close);
    --balloon-color-t3: linear-gradient(45deg, #f4ded2, #e694d5);
    --img-bg-t3: url(../img/home/img_action_3.png) no-repeat center center / contain;
    --img-inline-size-t3: min(calc(var(--px) * 100), 240px);
    --img-aspect-t3: 1;
    --balloon-inline-size-t4: min(calc(var(--px) * 110), 560px);
    --balloon-aspect-t4: 1.046;
    --balloon-path-t4: shape(from 99.9% 42.86%,curve to 86.26% 86.19% with 100.73% 59.16%/96.56% 75.55%,curve to 44.2% 99.44% with 76.02% 96.87%/59.69% 101.75%,curve to 6.28% 73.41% with 28.69% 97.03%/13.98% 87.4%,curve to 4.7% 28.6% with -1.42% 59.42%/-2.15% 41.04%,curve to 41.11% 4.93% with 11.56% 16.16%/26.09% 9.65%,curve to 82.5% 3.86% with 56.21% 0.19%/71.79% -2.77%,curve to 99.9% 42.86% with 93.21% 10.49%/99.08% 26.64%,close);
    --balloon-color-t4: #FFBAD6;
    --img-bg-t4: url(../img/home/img_action_4.png) no-repeat center center / contain;
    --img-inline-size-t4: min(calc(var(--px) * 100), 156px);
    --img-aspect-t4: 1;
    margin-inline: auto;
    padding-block-start: min(8vw, 80px);
    padding-inline: var(--theme-side-gap);
    display: grid;
    inline-size: 100%;
    position: relative;
    z-index: 100;
  }
  @media (width >= 1200px) {
    .p-home-feature {
      --img-aspect-t1: 183 / 166;
    }
  }
  @media (width >= 1200px) {
    .p-home-feature {
      --img-aspect-t2: 258 / 265;
    }
  }
  @media (width >= 1200px) {
    .p-home-feature {
      --img-aspect-t3: 361 / 235;
    }
  }
  @media (width >= 1200px) {
    .p-home-feature {
      --img-aspect-t4: 156 / 222;
    }
  }
  .p-home-feature__list {
    inline-size: min(100%, 1440px);
    margin-inline: auto;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "t1 t2" ". ." "t3 t4";
    gap: 0 min(3.8vw, 32px);
  }
  @media (width >= 1200px) {
    .p-home-feature__list {
      grid-template-columns: 1fr repeat(2, auto);
      grid-template-rows: auto repeat(2, auto);
      grid-template-areas: ". t1 t2" ". t3 t4";
      gap: 148px 120px;
    }
  }
  .p-home-feature-header {
    grid-column: 1/-1;
    grid-row: 2/3;
    align-items: center;
    display: grid;
    place-content: center center;
    position: relative;
    z-index: 200;
  }
  @media (width >= 1200px) {
    .p-home-feature-header {
      grid-row: 1/3;
      place-content: flex-start flex-start;
    }
  }
  @media (width <= 1199px) {
    .p-home-feature-header {
      margin-block-end: 1lh;
    }
    .p-home-feature-header .c-btn {
      justify-self: center;
    }
  }
  .p-home-feature-header .c-btn {
    pointer-events: revert;
  }
  .p-home-feature-heading {
    --min-font-size: 56;
    --max-font-size: 72;
    font-weight: bold;
    line-height: 1.24;
    margin-block: var(--leading-trim) calc(var(--leading-trim) + 0.8lh);
  }
  .p-home-feature-heading::before {
    content: "";
    inline-size: min(var(--px) * 80, 154px);
    aspect-ratio: 154/135;
    background: url(../img/home/star1.png) no-repeat center center/contain;
    display: block;
    position: absolute;
    right: 0;
    top: 15%;
    z-index: -1;
  }
  @media (width >= 1200px) {
    .p-home-feature-heading::before {
      position: relative;
    }
  }
  .p-home-feature-heading .heading-1 {
    --min-font-size: 20;
    --max-font-size: 40;
  }
  .p-home-feature-heading .heading-2 {
    --min-font-size: 18;
    --max-font-size: 32;
  }
  .p-home-feature-heading .heading-3 {
    --dot-size: min(1.5vw, 16px);
    background-image: radial-gradient(circle, #F09240 calc(var(--dot-size) / 2), transparent calc(var(--dot-size) / 2));
    background-position: left 0 bottom;
    background-repeat: repeat-x;
    background-size: calc(var(--dot-size) * 4.5) var(--dot-size);
    padding-block-end: 0.16lh;
  }
  .p-home-feature-heading .heading-4 {
    --min-font-size: 32;
    --max-font-size: 56;
  }
  .p-home-feature__block {
    justify-self: center;
    position: relative;
    z-index: 1;
    opacity: 0;
  }
  @media (width >= 1200px) {
    .p-home-feature__block {
      justify-self: flex-end;
    }
  }
  .p-home-feature__block .p-home-feature__inner {
    position: relative;
    z-index: 10;
  }
  .p-home-feature__block .p-home-feature__inner::before {
    content: "";
    position: relative;
    display: block;
    margin-inline: auto;
  }
  @media (width >= 1200px) {
    .p-home-feature__block .p-home-feature__inner::before {
      position: absolute;
    }
  }
  .p-home-feature__block::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: -1;
  }
  @media (width >= 1200px) {
    .p-home-feature__block::after {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .p-home-feature__block:is(.--type1) {
    grid-area: t1;
    z-index: 100;
  }
  .p-home-feature__block:is(.--type1) .p-home-feature__inner {
    max-inline-size: var(--inner-size-t1);
  }
  .p-home-feature__block:is(.--type1) .p-home-feature__inner::before {
    background: var(--img-bg-t1);
    inline-size: var(--img-inline-size-t1);
    aspect-ratio: var(--img-aspect-t1);
  }
  @media (width >= 1200px) {
    .p-home-feature__block:is(.--type1) .p-home-feature__inner::before {
      top: 0;
      right: 0;
      transform: translate(20%, -65%);
    }
  }
  .p-home-feature__block:is(.--type1)::after {
    inline-size: var(--balloon-inline-size-t1);
    aspect-ratio: var(--balloon-aspect-t1);
    clip-path: var(--balloon-path-t1);
    background: var(--balloon-color-t1);
  }
  @media (width >= 1200px) {
    .p-home-feature__block:is(.--type1)::after {
      top: 50%;
      left: 50%;
      transform: translate(-55%, -50%);
    }
  }
  .p-home-feature__block:is(.--type2) {
    grid-area: t2;
  }
  .p-home-feature__block:is(.--type2) .p-home-feature__inner {
    max-inline-size: var(--inner-size-t2);
  }
  .p-home-feature__block:is(.--type2) .p-home-feature__inner::before {
    background: var(--img-bg-t2);
    inline-size: var(--img-inline-size-t2);
    aspect-ratio: var(--img-aspect-t2);
  }
  @media (width >= 1200px) {
    .p-home-feature__block:is(.--type2) .p-home-feature__inner::before {
      top: 0;
      right: 0;
      transform: translate(-10%, -50%);
    }
  }
  .p-home-feature__block:is(.--type2)::after {
    inline-size: var(--balloon-inline-size-t2);
    aspect-ratio: var(--balloon-aspect-t2);
    clip-path: var(--balloon-path-t2);
    background: var(--balloon-color-t2);
  }
  @media (width >= 1200px) {
    .p-home-feature__block:is(.--type2)::after {
      top: 50%;
      left: 50%;
      transform: translate(-55%, -45%);
    }
  }
  .p-home-feature__block:is(.--type3) {
    grid-area: t3;
    position: relative;
    z-index: 120;
  }
  .p-home-feature__block:is(.--type3) .p-home-feature__inner {
    max-inline-size: var(--inner-size-t3);
    position: relative;
  }
  @media (width >= 1200px) {
    .p-home-feature__block:is(.--type3) .p-home-feature__inner {
      top: 2lh;
      left: -2em;
    }
  }
  .p-home-feature__block:is(.--type3) .p-home-feature__inner::before {
    background: var(--img-bg-t3);
    inline-size: var(--img-inline-size-t3);
    aspect-ratio: var(--img-aspect-t3);
  }
  @media (width >= 1200px) {
    .p-home-feature__block:is(.--type3) .p-home-feature__inner::before {
      top: 0;
      right: 0;
      transform: translate(16%, -95%);
    }
  }
  .p-home-feature__block:is(.--type3)::after {
    inline-size: var(--balloon-inline-size-t3);
    aspect-ratio: var(--balloon-aspect-t3);
    clip-path: var(--balloon-path-t3);
    background: var(--balloon-color-t3);
  }
  @media (width >= 1200px) {
    .p-home-feature__block:is(.--type3)::after {
      top: 50%;
      left: 50%;
      transform: translate(-60%, -50%);
    }
  }
  .p-home-feature__block:is(.--type4) {
    grid-area: t4;
    z-index: 100;
  }
  .p-home-feature__block:is(.--type4) .p-home-feature__inner {
    max-inline-size: var(--inner-size-t4);
  }
  .p-home-feature__block:is(.--type4) .p-home-feature__inner::before {
    background: var(--img-bg-t4);
    inline-size: var(--img-inline-size-t4);
    aspect-ratio: var(--img-aspect-t4);
  }
  @media (width >= 1200px) {
    .p-home-feature__block:is(.--type4) .p-home-feature__inner::before {
      top: 0;
      right: 0;
      transform: translate(8%, -66%);
    }
  }
  .p-home-feature__block:is(.--type4)::after {
    inline-size: var(--balloon-inline-size-t4);
    aspect-ratio: var(--balloon-aspect-t4);
    clip-path: var(--balloon-path-t4);
    background: var(--balloon-color-t4);
  }
  @media (width >= 1200px) {
    .p-home-feature__block:is(.--type4)::after {
      top: 50%;
      right: 50%;
      transform: translate(-60%, -50%);
    }
  }
  .p-home-feature-row-heading__en {
    font-weight: bold;
    margin-block: var(--leading-trim) calc(var(--leading-trim) + 0.5lh);
    text-align: center;
    position: relative;
  }
  @media (width >= 1200px) {
    .p-home-feature-row-heading__en {
      text-align: left;
    }
  }
  .p-home-feature-row-heading__ja {
    --min-font-size: 20;
    --max-font-size: 32;
    font-weight: bold;
    position: relative;
    display: inline-block;
    z-index: 1;
    line-height: 1.32;
    margin-block: var(--leading-trim) calc(var(--leading-trim) + 0.7lh);
    inline-size: 100%;
    text-align: center;
  }
  @media (width >= 1200px) {
    .p-home-feature-row-heading__ja {
      inline-size: auto;
      text-align: left;
    }
  }
  .p-home-feature-row-heading__ja::after {
    content: "";
    background: #F1FD55;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    inline-size: 100%;
    block-size: 0.5lh;
  }
  .p-home-feature-row__description {
    font-weight: bold;
  }
  .p-home-feature-row__description br {
    display: none;
  }
  @media (width >= 992px) {
    .p-home-feature-row__description br {
      display: block;
    }
  }
  .p-home-feature__link {
    text-decoration: underline;
    display: inline grid;
    column-gap: 0.3em;
    grid-template-columns: auto min(8vw, 24px);
    justify-content: flex-start;
    margin-block-start: 0.5lh;
  }
  .p-home-feature__link::after {
    content: "";
    aspect-ratio: 1;
    background: url(../img/ic_question.svg) no-repeat center center/contain;
  }
  .p-home-message {
    --arrow-size: min( calc(var(--px) * 24), 32px );
    display: grid;
    column-gap: calc(var(--arrow-size) + 1em);
    align-items: flex-start;
    margin-block-start: 1.5lh;
    inline-size: min(100%, 820px);
    margin-inline: auto;
    row-gap: calc(var(--arrow-size) + 0.5lh);
  }
  @media (width >= 768px) {
    .p-home-message {
      margin-block-start: 3lh;
      row-gap: revert;
      grid-template-columns: min(24vw, 185px) 1fr;
    }
  }
  .p-home-message__image {
    display: grid;
    row-gap: 0.5lh;
    text-align: center;
  }
  .p-home-message__image img {
    inline-size: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
  }
  @media (width <= 767px) {
    .p-home-message__image img {
      inline-size: 32%;
      margin-inline: auto;
    }
  }
  .p-home-message__image figcaption {
    --min-font-size: 12;
    --max-font-size: 14;
    font-weight: bold;
    display: grid;
    grid-auto-flow: column;
    column-gap: 1em;
    justify-content: center;
    align-items: baseline;
  }
  .p-home-message__image figcaption span {
    --min-font-size: 16;
    --max-font-size: 18;
  }
  .p-home-message__text {
    background: #fff;
    padding: 1lh 2.2em;
    block-size: auto;
    font-weight: 500;
    background: #fff;
    border-radius: 1.8em;
    position: relative;
    box-shadow: 0 0 48px rgba(0, 0, 0, 0.08);
  }
  .p-home-message__text::before {
    content: "";
    width: var(--arrow-size);
    aspect-ratio: 4/3;
    background: #fff;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-100%, -50%);
  }
  @media (width <= 767px) {
    .p-home-message__text::before {
      top: 0;
      left: 50%;
      transform: translate(-50%, -100%);
      clip-path: polygon(0 100%, 50% 0, 100% 100%);
    }
  }
  .p-home-about {
    position: relative;
    z-index: 80;
  }
  .p-home-about::before {
    content: "";
    inline-size: 1135px;
    aspect-ratio: 1.113;
    background: #E8F2FF;
    clip-path: shape(from 49.48% 0.51%, curve to 82.92% 4.32% with 61.5% -0.03%/73.69% -1.29%, curve to 99.73% 35.04% with 92.1% 9.87%/98.37% 22.33%, curve to 91.9% 72.39% with 101.05% 47.69%/97.41% 60.54%, curve to 69.11% 98.58% with 86.3% 84.23%/78.75% 95.06%, curve to 36.29% 93.99% with 59.5% 102.16%/47.81% 98.34%, curve to 7.03% 75.42% with 24.84% 89.65%/13.52% 84.73%, curve to 0.73% 38.95% with 0.55% 66.01%/-1.18% 52.11%, curve to 16.91% 7.23% with 2.68% 25.83%/8.22% 13.41%, curve to 49.48% 0.51% with 25.61% 1.06%/37.46% 1.14%, close);
    position: absolute;
    right: 50%;
    top: 0;
    z-index: -1;
    transform: translate(80%, -10%);
    pointer-events: none;
  }
  .p-home-about::after {
    content: "";
    inline-size: 890px;
    background: #fbffca;
    aspect-ratio: 1.2;
    clip-path: shape(from 80.08% 14.79%, curve to 99.86% 45.84% with 89.77% 22.83%/98.59% 33.82%, curve to 87.38% 80.78% with 101.05% 57.86%/94.68% 70.91%, curve to 63.36% 99.33% with 80.01% 90.65%/71.85% 97.34%, curve to 38.41% 94.56% with 54.93% 101.32%/46.24% 98.62%, curve to 16.18% 76.64% with 30.65% 90.5%/23.68% 85.08%, curve to 0.06% 44.09% with 8.75% 68.13%/0.72% 56.58%, curve to 15.32% 9.78% with -0.67% 31.51%/5.89% 17.9%, curve to 48.5% 0.31% with 24.74% 1.66%/37.08% -0.97%, curve to 80.08% 14.79% with 59.91% 1.5%/70.46% 6.67%, close);
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: -2;
    transform: translate(-90%, 50%);
    pointer-events: none;
  }
  .p-home-about .l-section-header {
    position: relative;
  }
  .p-home-about .l-section-header::before {
    content: "";
    inline-size: min(var(--px) * 120, 349px);
    aspect-ratio: 484/314;
    background: url(../img/home/img_about.png) no-repeat center center/contain;
    position: relative;
    display: block;
    margin-inline: auto;
  }
  @media (width >= 992px) {
    .p-home-about .l-section-header::before {
      margin-inline: revert;
      position: absolute;
      top: 0;
      right: 50%;
      transform: translate(200%, -45%);
    }
  }
  .p-home-about .l-section__inner {
    position: relative;
  }
  .p-home-about .l-section__inner::after {
    content: "";
    inline-size: min(var(--px) * 108, 183px);
    aspect-ratio: 183/153;
    background: url(../img/home/star2.png) no-repeat center center/contain;
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateY(75%);
    z-index: -1;
  }
  .p-home-activity {
    position: relative;
    z-index: 105;
  }
  .p-home-activity::after {
    content: "";
    inline-size: 800px;
    background: #e1ffea;
    aspect-ratio: 1.147;
    clip-path: shape(from 71.99% 21.27%, curve to 95.2% 47.19% with 80.36% 29.47%/89.73% 36.2%, curve to 96.34% 83.7% with 100.59% 58.25%/102.08% 73.72%, curve to 66.19% 99.48% with 90.61% 93.6%/77.59% 98.09%, curve to 32.87% 97.08% with 54.73% 100.87%/44.74% 99.25%, curve to 2.25% 83.47% with 21% 95%/7.17% 92.37%, curve to 5.08% 45.72% with -2.61% 74.57%/1.37% 59.41%, curve to 19.52% 11.29% with 8.86% 31.95%/12.23% 19.72%, curve to 47.04% 0.69% with 26.73% 2.86%/37.86% -1.86%, curve to 71.99% 21.27% with 56.28% 3.25%/63.63% 13.07%, close);
    position: absolute;
    right: 50%;
    top: 50%;
    z-index: -1;
    transform: translate(100%, 0%);
    pointer-events: none;
  }
  .p-home-usage {
    --img-inline-size: min(calc(var(--px)*80), 232px);
    position: relative;
    z-index: 100;
  }
  .p-home-usage::before {
    content: "";
    background: #FFE8D2;
    inline-size: 1113px;
    aspect-ratio: 1.305;
    clip-path: shape(from 74.96% 7.21%, curve to 99.37% 45.97% with 86.46% 15.1%/96.83% 29.52%, curve to 87.05% 90.67% with 101.9% 62.43%/96.61% 81.03%, curve to 53.47% 99.34% with 77.5% 100.31%/63.69% 100.9%, curve to 28.91% 91.26% with 43.17% 97.78%/36.45% 93.98%, curve to 7.2% 80.06% with 21.3% 88.53%/12.94% 86.78%, curve to 0.78% 52.21% with 1.52% 73.34%/-1.54% 61.56%, curve to 17.87% 26.98% with 3.09% 42.86%/10.78% 35.85%, curve to 41.23% 2.73% with 25.03% 18.12%/31.6% 7.41%, curve to 74.96% 7.21% with 50.86% -2.04%/63.54% -0.58%, close);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-68%, -15%);
    z-index: -1;
    pointer-events: none;
  }
  .p-home-usage .l-section-header {
    position: relative;
    z-index: 99;
    margin-block-end: 1.4lh;
  }
  @media (width >= 768px) {
    .p-home-usage .l-section-header {
      margin-block-end: 3.5lh;
    }
  }
  .p-home-usage .l-section__inner {
    position: relative;
  }
  .p-home-usage .l-section__inner::after {
    content: "";
    inline-size: var(--img-inline-size);
    aspect-ratio: 232/309;
    position: absolute;
    bottom: 0;
    right: 0;
    background: url(../img/home/img_usage.png) no-repeat center center/contain;
    transform: translate(0, 30%);
  }
  @media (width >= 992px) {
    .p-home-usage .l-section__inner::after {
      transform: translate(70%, -30%);
    }
  }
  .p-home-usage__group {
    inline-size: min(100%, 820px);
    margin-inline: auto;
    display: grid;
    row-gap: 0.72lh;
    margin-block-start: 2.5lh;
  }
  @media (width <= 991px) {
    .p-home-usage__group .c-attention__list {
      padding-inline-end: calc(var(--img-inline-size) + 1em);
    }
  }
  .p-home-information {
    position: relative;
    z-index: 120;
  }
  .p-home-signin-step__list {
    --key-color: #F09240;
    display: grid;
    gap: 30px;
  }
  @media (width >= 992px) {
    .p-home-signin-step__list {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .p-home-signin-step {
    border: 3px solid var(--key-color);
    background: #fff;
    border-radius: 2em;
    padding: var(--theme-side-gap);
    position: relative;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0.5lh;
    grid-template-columns: auto 1fr;
    gap: 0.5lh 1em;
    opacity: 0;
  }
  @media (width >= 768px) {
    .p-home-signin-step {
      gap: revert;
      grid-template-columns: revert;
      padding: 64px 24px 24px;
    }
  }
  .p-home-signin-step__number {
    aspect-ratio: 1;
    background: var(--key-color);
    color: #fff;
    display: grid;
    place-content: center center;
    border-radius: 50%;
    contain: strict;
    line-height: 1;
    inline-size: min(14vw, 90px);
  }
  @media (width >= 768px) {
    .p-home-signin-step__number {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, -50%);
    }
  }
  .p-home-signin-step__number span {
    --min-font-size: 24;
    --max-font-size: 46;
    font-weight: bold;
    display: block;
    text-align: center;
  }
  .p-home-signin-step__headline {
    --min-font-size: 20;
    --max-font-size: 24;
    font-weight: bold;
    justify-self: flex-start;
    align-self: center;
  }
  @media (width >= 768px) {
    .p-home-signin-step__headline {
      max-inline-size: fit-content;
      margin-inline: auto;
      justify-self: revert;
      align-self: revert;
    }
  }
  .p-home-signin-step__text {
    grid-column: 1/-1;
  }
  .p-home-signin-step__link {
    grid-column: 1/-1;
    background: #E56565;
    color: #fff;
    font-weight: bold;
    display: grid;
    grid-template-columns: 1fr 32px;
    padding: 0.4lh 1em;
    align-items: center;
    border-radius: 8px;
  }
  .p-home-signin-step__link::after {
    content: "";
    aspect-ratio: 1;
    background: url(../img/ic_beginner.png) no-repeat center center/contain;
  }
  .p-home-access-header .c-heading__lv1 {
    display: grid;
    grid-template-columns: min(var(--px) * 32, 60px) auto;
    column-gap: 0.5em;
    align-items: center;
    max-inline-size: fit-content;
    margin-inline: auto;
  }
  .p-home-access-header .c-heading__lv1::before {
    content: "";
    aspect-ratio: 60/90;
    background: url(../img/ic_place.svg) no-repeat center center/contain;
  }
  .p-home-access__address {
    --min-font-size: 20;
    --max-font-size: 24;
    margin-block-end: 1lh;
    text-align: center;
  }
  .p-home-access__address .break {
    display: block;
  }
  @media (width >= 992px) {
    .p-home-access__address .break {
      display: none;
    }
  }
  .p-home-access__map {
    grid-row: 2/3;
    grid-column: 1/-1;
    block-size: clamp(20rem, 9.888rem + 43.14vw, 37.5rem);
  }
  .p-home-access__map iframe {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}
/* --- Projects --- */
@layer Projects.Staff {
  .p-staff-intro__message {
    margin-block-start: 2lh;
  }
  .p-staff-intro__message :is(img) {
    margin-inline: auto;
    inline-size: min(67vw, 420px);
  }
  @media (width >= 992px) {
    .p-staff-segment-list {
      margin-block-start: calc(min(6vw, 64px) * -1);
    }
  }
  .p-staff-whatsYC {
    max-inline-size: fit-content;
    margin-inline: auto;
    margin-block-start: 1lh;
  }
  .p-staff-whatsYC a {
    display: grid inline;
    grid-template-columns: auto min(6vw, 32px);
    column-gap: 0.32em;
    font-weight: bold;
    text-decoration: underline;
  }
  .p-staff-whatsYC a::after {
    content: "";
    aspect-ratio: 1;
    background: url(../img/ic_question.svg) no-repeat center center/contain;
  }
  .p-staff__list {
    display: grid;
    row-gap: 3.2lh;
  }
  .p-staff__block .p-staff {
    display: grid;
    gap: 0.56lh min(4.8vw, 48px);
    grid-template-areas: "img" "header" "body";
  }
  @media (width >= 992px) {
    .p-staff__block .p-staff {
      grid-template-columns: min(18vw, 220px) 1fr;
      grid-template-areas: "img header" ". body";
    }
    .p-staff__block .p-staff:where(.p-staff__block:nth-child(even) *) {
      grid-template-columns: 1fr min(18vw, 220px);
      grid-template-areas: "header img" "body .";
    }
  }
  .p-staff__block .p-staff-profile__image {
    grid-area: img;
    aspect-ratio: 3/4;
    position: relative;
    margin-inline: auto;
    inline-size: min(40vw, 100%);
  }
  @media (width >= 992px) {
    .p-staff__block .p-staff-profile__image {
      grid-row: 1/-1;
    }
  }
  .p-staff__block .p-staff-profile__image::before {
    content: "";
    background: url(../img/page/staff/star3.png) no-repeat center center/contain;
    inline-size: min(12vw, 56px);
    aspect-ratio: 1;
    display: block;
    margin-inline: auto;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    transform: translate(50%, -35%);
  }
  .p-staff__block .p-staff-profile__image img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .p-staff__block .p-staff-profile-header {
    grid-area: header;
    position: relative;
  }
  .p-staff__block .p-staff-profile__name {
    --min-font-size: 27;
    --max-font-size: 32;
    font-weight: var(--fw-b);
  }
  .p-staff__block .p-staff-profile__name span {
    --min-font-size: 18;
    --max-font-size: 20;
    color: #808080;
    font-weight: var(--fw-m);
  }
  .p-staff__block .p-staff-profile-body {
    grid-area: body;
    display: grid;
    row-gap: 0.56lh;
  }
  .p-staff__block .p-staff-profile__row dt {
    --min-font-size: 18;
    --max-font-size: 20;
    display: grid;
    grid-template-columns: min(4.2vw, 16px) 1fr;
    column-gap: 0.24em;
    align-items: baseline;
  }
  .p-staff__block .p-staff-profile__row dt::before {
    content: "";
    aspect-ratio: 1;
    background: var(--clr-official-primary);
    border-radius: 50%;
  }
  .p-staff__block .p-staff-profile__row .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.56lh 1em;
    padding-block-start: 0.56lh;
  }
  .p-staff__block .p-staff-profile__row .tags .tag {
    --min-font-size: 12;
    --max-font-size: 14;
    display: grid;
    grid-template-columns: 1em 1fr;
    color: #fff;
    background: #ff6666;
    border-radius: 12em;
    padding: 0.24lh 1em;
    gap: 0.16em;
    font-weight: var(--fw-b);
  }
  .p-staff__block .p-staff-profile__row .tags .tag::before {
    --min-font-size: 12;
    --max-font-size: 14;
    content: "#";
    font-style: italic;
    font-weight: var(--fw-b);
  }
  .p-staff-support {
    position: relative;
    border: 5px solid #000;
    border-radius: 1em;
    padding: min(8vw, 48px) min(2.4vw, 24px);
    background: #fff;
    position: relative;
  }
  @media (width >= 992px) {
    .p-staff-support {
      padding: min(5vw, 24px) min(5vw, 24px) min(5vw, 24px) calc(min(5vw, 24px) * 3);
    }
  }
  .p-staff-support::after {
    content: "";
    inline-size: min(18vw, 168px);
    aspect-ratio: 488/555;
    background: url(../img/page/staff/ic_monery.png) no-repeat center center/contain;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -200%);
  }
  @media (width >= 992px) {
    .p-staff-support::after {
      left: 0;
      transform: translate(-25%, -55%);
    }
  }
  .p-staff-support-heading {
    --min-font-size: 18;
    --max-font-size: 24;
    font-weight: bold;
    background: #fdd000;
    margin-block-end: 0.32lh;
    text-align: center;
  }
  .p-staff-support-description {
    margin-block-end: 0.5lh;
  }
}
/* --- Projects --- */
@layer Projects.Facility {
  .p-facility-map-index {
    display: grid;
    place-content: center center;
    justify-content: center;
    grid-auto-flow: column;
    column-gap: 1.24em;
    margin-block-end: 1lh;
  }
  .p-facility-map-index__to {
    --min-font-size: 27;
    --max-font-size: 32;
    font-weight: var(--fw-b);
    display: grid;
    grid-template-columns: auto min(5.4vw, 32px);
    color: var(--clr-official-primary);
    column-gap: 0.24em;
    border-block-end: 2px solid currentColor;
    padding: 0.08lh 0.56em;
  }
  .p-facility-map-index__to::after {
    content: "";
    aspect-ratio: 1;
    background: url(../img/ic_arrow_white.svg) currentColor no-repeat center center/48% auto;
    display: block;
    align-self: center;
    border-radius: 50%;
    transform: rotate(90deg);
  }
  .p-facility-map-heading {
    --min-font-size: 32;
    --max-font-size: 48;
    font-weight: var(--fw-b);
    border-block-end: 2px solid var(--clr-official-primary);
    margin-block-end: 0.56lh;
    padding-block-start: 0.56lh;
  }
  .p-facility-map__image {
    display: grid;
    row-gap: 0.48lh;
    margin-inline: calc(var(--theme-side-gap) * -1);
  }
  @media (width >= 992px) {
    .p-facility-map__image {
      margin-inline: 0;
    }
  }
  .p-facility-map__image :is(figcaption) {
    --min-font-size: 16;
    --max-font-size: 18;
    color: #404040;
    padding-inline: var(--theme-side-gap);
  }
  .p-facility-map__image :is(figcaption)::before {
    content: "※";
  }
  @media (width >= 992px) {
    .p-facility-map__image :is(figcaption) {
      padding-inline: revert;
    }
  }
  .p-facility-map__image :is(img) {
    overflow: hidden;
    border-radius: 16px;
  }
}
/* --- Projects --- */
@layer Projects.History {
  .p-history__list {
    display: grid;
    position: relative;
    z-index: 99;
  }
  @media (width <= 991px) {
    .p-history__list {
      row-gap: 1.72lh;
    }
  }
  .p-history__block {
    display: grid;
    column-gap: min(8vw, 80px);
    align-items: center;
    grid-template-areas: "year" "content";
    row-gap: 1lh;
  }
  @media (width >= 992px) {
    .p-history__block {
      grid-template-columns: 6em min(4.8vw, 40px) 1fr;
      grid-template-areas: "year ball content" ". . .";
      row-gap: revert;
    }
    .p-history__block:not(:last-child) {
      grid-template-rows: auto 3.2lh;
    }
    .p-history__block::before, .p-history__block::after {
      grid-area: ball;
      content: "";
    }
    .p-history__block::after {
      aspect-ratio: 1;
      border-radius: 50%;
      border: 8px solid var(--clr-official-primary);
      background: #fff;
    }
  }
  .p-history__block::before {
    grid-row: 1/-1;
    block-size: 100%;
    inline-size: 8px;
    background-image: radial-gradient(circle, var(--clr-official-primary) 4px, transparent 4px);
    background-position: left top;
    background-repeat: repeat-y;
    background-size: 8px 20px;
    margin-inline: auto;
  }
  .p-history-row {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "img" "heading" "note";
    gap: 0.32lh 1em;
  }
  .p-history-row__image {
    grid-area: img;
  }
  .p-history-row-heading {
    --min-font-size: 20;
    --max-font-size: 24;
    grid-area: heading;
    font-weight: var(--fw-b);
  }
  @media (width <= 991px) {
    .p-history-row-heading {
      max-inline-size: fit-content;
      margin-inline: auto;
    }
  }
  .p-history-row-note {
    grid-area: note;
  }
  .p-history-row__year {
    --min-font-size: 24;
    --max-font-size: 28;
    grid-area: year;
    color: #808080;
    line-height: 1.32;
    font-weight: var(--fw-b);
    margin-block: var(--leading-trim);
    display: grid;
    place-content: center center;
    text-align: center;
  }
  @media (width <= 991px) {
    .p-history-row__year {
      max-inline-size: fit-content;
      margin-inline: auto;
    }
  }
  @media (width >= 992px) {
    .p-history-row__year :is(.range) {
      display: block;
      writing-mode: vertical-rl;
      text-align: center;
      margin-block: auto;
      line-height: 1;
    }
  }
  .p-history-row__year .month {
    --min-font-size: 48;
    --max-font-size: 56;
    display: grid;
    color: #000;
  }
  .p-history-row__list {
    grid-area: content;
    display: grid;
    row-gap: 1.32lh;
    background: #fff;
    padding: min(3.2vw, 24px);
    border-radius: 16px;
  }
}
@layer Reset, Base, Layout, Components, Projects;

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