@charset "UTF-8";

@property --font-size-base {
  syntax: "<integer>";
  inherits: false;
  initial-value: 16;
}

@property --leading-trim {
  syntax: "*";
  inherits: false;
  initial-value: calc((1em - 1lh) / 2);
}

:root {
  /* Specify a safe font-family for the default Gothic typeface. */
  font-family: "Noto Sans JP", sans-serif;

  /* From an accessibility perspective, the line spacing within a paragraph should be at least 1.5 times the text size. (https://waic.jp/translations/WCAG21/#visual-presentation) */
  line-height: 2;

  /* Remove leading white space for a cleaner text alignment. */
  text-spacing-trim: trim-start;

  /* Use the browser's default method to determine word breaking. */
  word-break: initial;

  /* Apply strict line breaking rules to enhance readability in languages that require it. */
  line-break: strict;

  /* Allow long words to be broken and wrapped at any point to prevent overflow. */
  overflow-wrap: anywhere;

  /* Prevent mobile browsers from scaling text sizes automatically. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* Preventing the layout shift caused by scrollbars. */
  /* scrollbar-gutter: stable; */

  /* Eliminate the tap highlight color on mobile devices for a cleaner interface. */
  -webkit-tap-highlight-color: transparent;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --rem-ratio: calc(1rem / var(--font-size-base));
  --contents-width: 1240px;
  --color-base: #fff;
  --color-text: #333;
  --color-bg: #f7f5f0;
  --color-bg2: #ededed;
  --color-bg3: #efebe2;
  --color-bg4: #f7efda;
  --color-bg5: #fff6f5;
  --color-bg6: #ffe4e0;
  --color-link: #257722;
  --color-link2: #87e871;
  --color-line: #d5d2c8;
  --color-line2: #707070;
  --color-line3: #fb6f62;
  --color-line4: #fee4e0;
  --color-line5: #c6bca7;
  --color-line6: #c6bfb3;
  --color-line7: #bebebe;
  --color-line8: #ff6f61;
  --color-line9: #c1b69b;
}

/* ベース
----------------------------------------------------------------- */
html {
  @media (min-width: 768px) {
    &.--fz-small {
      /* 16px */
      --rem-ratio: calc(0.8rem / var(--font-size-base));
    }

    &.--fz-medium {
      /* 20px */
      --rem-ratio: calc(1rem / var(--font-size-base));
    }

    &.--fz-large {
      /* 24px */
      --rem-ratio: calc(1.2rem / var(--font-size-base));
    }
  }

  @media (max-width: 767px) {
    & {
      scroll-padding-top: 85px;
    }
  }
}

body {
  /* Ensures the body element occupies at least 100% of the viewport's block size. */
  min-block-size: 100svb;
  font-size: calc(20 * var(--rem-ratio));
  /* font-feature-settings: "palt"; */
  color: var(--color-text);
  background: var(--color-bg);

  @media (max-width: 767px) {
    &.is-noScroll {
      overflow: hidden;
      height: 100svh;
    }
  }
}

small {
  font-size: 1em;
}

img {
  max-width: 100%;
}

sup {
  font-size: 0.7em;
}

picture {
  display: block;
}

:where(a[href^="geo:"], a[href^="tel:"], a[href^="mailto:"], a[href^="http://maps.apple.com/"])
{
  text-decoration: none;
  pointer-events: none;
  color: inherit;
}

@media (any-hover: hover) {
  a:where(:hover) {
    color: var(--color-link);
  }
}

main
  a:not(
    .bl-btn,
    .un-sitemapList_link,
    .un-sitemapInsideList_link,
    .bl-btnSecondary,
    .un-topRecommend_link,
    .bl-list_link,
    .bl-listInside_link,
    .bl-relationLink_link
  ) {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;

  @media (any-hover: hover) {
    &:where(:hover) {
      text-decoration: none;
    }
  }

  &.--fw_bold {
    font-weight: bold;
  }
}

/* レイアウト (prefix: ly- )
----------------------------------------------------------------- */
.ly-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

:where(
    .ly-header_inner,
    .ly-footer_inner,
    .ly-main_inner,
    .ly-hero_inner,
    .ly-section_inner
  ) {
  max-width: var(--contents-width);
  margin-inline: auto;
  padding-inline: 20px;

  @media (max-width: 767px) {
    & {
      padding-inline: calc((20 / 390) * 100%);
    }
  }
}

@keyframes slideDown {
  from {
    translate: 0 -100%;
  }

  to {
    translate: 0 0;
  }
}

.ly-header {
  font-feature-settings: "palt";

  @media (max-width: 767px) {
    & {
      position: absolute;
      inset: 0 0 auto;
      z-index: calc(infinity);

      &.is-fixed {
        position: fixed;
        animation: slideDown 0.3s forwards;
      }
    }
  }

  & + .ly-hero {
    margin-block-start: 60px;

    @media (max-width: 767px) {
      & {
        margin-block-start: 0;
      }
    }
  }
}

.ly-header_inner {
  padding-block-start: 30px;

  @media (max-width: 767px) {
    & {
      padding: 0;
    }
  }
}

.ly-main {
  isolation: isolate;
  position: relative;

  &::before {
    content: "";
    width: min(calc((710 / 1536) * 100%), 710px);
    height: auto;
    aspect-ratio: 710 / 695;
    background: url(/assets/images/bg_contents.png) top right no-repeat;
    background-size: contain;
    position: absolute;
    top: calc((110 / 3000) * -100%);
    right: calc((-120 / 1536) * 100%);
    z-index: -1;
  }

  @media (max-width: 767px) {
    &::before {
      width: min(calc((317 / 390) * 100%), 317px);
      aspect-ratio: 317 / 310;
      top: calc((-60 / 3000) * -100%);
      right: calc((-50 / 390) * 100%);
    }
  }
}

.ly-footer {
  isolation: isolate;
  background: var(--color-bg);
  margin-block-start: 120px;
  position: relative;

  &::before {
    content: "";
    width: 100%;
    height: 120px;
    background: var(--color-base);
    position: absolute;
    inset: -120px 0 0 auto;
  }
}

.ly-footer_inner {
  font-size: calc(16 * var(--rem-ratio));
  padding-block: 85px 80px;

  @media (max-width: 767px) {
    & {
      /* padding-block: 50px 110px; */
      padding-block: 50px 40px;
    }
  }
}

.ly-section_inner {
  container-type: inline-size;
}

.ly-section {
  & + &:not(.--bg2, .--bg3) {
    margin-block-start: 96px;
  }

  @media (max-width: 767px) {
    & + &:not(.--bg2, .--bg3) {
      margin-block-start: 70px;
    }
  }

  &.--bg {
    min-height: 345px;
    background: var(--color-base);
    border-radius: 200px 0 0 0;
    /* 参考 角丸のclamp
    https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6Ijc2OHB4IiwibWF4V2lkdGgiOiIxMjAwcHgiLCJtaW5Gb250U2l6ZSI6IjEwMHB4IiwibWF4Rm9udFNpemUiOiIyMDBweCJ9 */
    border-radius: clamp(6.25rem, -4.8611rem + 23.1481vw, 12.5rem) 0 0 0;
    /* margin-block-end: 181px; */
    padding-block-end: 77px;
    position: relative;

    @media (max-width: 767px) {
      & {
        border-radius: 100px 0 0 0;
        /* padding-block-end: 0; */
      }
    }

    /* &::before {
      content: "";
      width: 100%;
      height: 170px;
      border-radius: 50%;
      background: var(--color-base);
      position: absolute;
      inset: auto 0 -88px 0;
      z-index: -1;
    }
    @media (max-width: 767px) {
      &::before {
        width: 950px;
        height: 194px;
        bottom: -100px;
        left: 50%;
        translate: -50% 0;
      }
    } */

    & .ly-section_inner {
      padding-block: 107px 90px;
      position: relative;

      @media (max-width: 767px) {
        & {
          /* padding-block: 68px 90px; */
          padding-block: 68px 0;
        }
      }
    }

    & .ly-section_bgItem {
      position: absolute;

      &.--position {
        /* width: calc((539 / 1240) * 100%); */
        top: calc((477 / 1567) * 100%);
        left: calc((343 / 1240) * -100%);
      }

      &.--position2 {
        /* width: calc((448 / 1240) * 100%); */
        top: calc((1118 / 1567) * 100%);
        left: calc((966 / 1240) * 100%);
      }

      @media (max-width: 767px) {
        &.--position {
          width: calc((350 / 390) * 100%);
          max-width: 350px;
          top: calc((1393 / 2870) * 100%);
          left: calc((65 / 390) * -100%);
        }

        &.--position2 {
          width: calc((325 / 390) * 100%);
          max-width: 325px;
          /* top: calc((2573 / 2870) * 100%); */
          top: calc((2560 / 2870) * 100%);
          left: calc((182 / 390) * 100%);
        }
      }
    }

    & .bl-contentsList {
      position: relative;
      z-index: 1;
    }
  }

  &.--bg2 {
    border-top: 1px solid var(--color-bg);
    background: var(--color-base);
    margin-block-start: 0;
    padding-block: 100px;
    overflow: hidden;

    @media (max-width: 767px) {
      & {
        padding-block: 80px;
      }
    }

    & .ly-section_inner {
      position: relative;
    }

    & .ly-section_bgItem {
      position: absolute;

      &.--position {
        /* width: calc((855 / 1240) * 100%); */
        top: calc((278 / 494) * -100%);
        left: calc((593 / 1240) * -100%);

        @media (max-width: 767px) {
          & {
            max-width: unset;
            width: calc((605 / 390) * 100%);
            top: calc((123 / 319) * -100%);
            left: calc((310 / 390) * -100%);
          }
        }
      }
    }

    & .bl-relation {
      position: relative;
      z-index: 1;
    }
  }

  &.--bg3 {
    border-radius: clamp(3.125rem, -2.4306rem + 11.5741vw, 6.25rem)
      clamp(3.125rem, -2.4306rem + 11.5741vw, 6.25rem) 0 0;
    background: var(--color-base);
    padding-block: 50px 0;
    padding-inline: 60px;

    @media (max-width: 767px) {
      & {
        border-radius: 60px 0 0 0;
        padding-block: 30px 0;
        padding-inline: 0;
      }
    }
  }
}

.ly-bgWrapper {
  background: url(/assets/images/bg_header.png) center bottom no-repeat;
  background-size: cover;
  margin: 0 0 90px;
  padding: 0 0 68px;

  @media (max-width: 767px) {
    & {
      margin-block-end: 40px;
      padding-block: 88px 0;
    }
  }
}

.ly-article {
  height: 100%;

  & .ly-section.--bg3 {
    height: 100%;
  }
}

/* エレメントモジュール (prefix: el- )
----------------------------------------------------------------- */
.el-materialText {
  line-height: calc(20 / 16);
  text-align: right;

  & + .bl-footerColumn {
    margin-block-start: calc(55px + var(--leading-trim));
  }

  @media (max-width: 767px) {
    & {
      font-size: calc(14 * var(--rem-ratio));
      line-height: calc(20 / 14);
    }
  }
}

.el-footerCopy {
  font-size: calc(14 * var(--rem-ratio));
  line-height: calc(20 / 14);
  text-align: center;
}

.el-footerNote {
  line-height: calc(26 / 16);

  @media (max-width: 767px) {
    & {
      line-height: calc(30 / 16);
    }
  }
}

.el-footerLogo {
  & img {
    display: block;
    width: fit-content;
    margin-inline-start: auto;
  }
}

.el-title {
  font-size: calc(40 * var(--rem-ratio));
  font-weight: bold;
  line-height: calc(70 / 40);
  text-align: center;
  text-wrap: balance;
  margin-block-end: calc(80px + var(--leading-trim));

  @media (max-width: 767px) {
    & {
      font-size: calc(32 * var(--rem-ratio));
      line-height: calc(52 / 32);
      margin-block-end: calc(40px + var(--leading-trim));
    }
  }

  .el-title_label {
    display: block;
    font-size: calc(24 * var(--rem-ratio));
    text-align: center;

    @media (max-width: 767px) {
      & {
        font-size: calc(20 * var(--rem-ratio));
      }
    }
  }
}

.el-titleV2 {
  font-size: calc(42 * var(--rem-ratio));
  font-weight: bold;
  line-height: calc(42 / 20);
  text-align: center;

  @media (max-width: 767px) {
    & {
      font-size: calc(28 * var(--rem-ratio));
      line-height: calc(40 / 28);
    }
  }

  &.--recommend {
    width: fit-content;
    border-bottom: 1px solid var(--color-link);
    margin-inline: auto;
    position: relative;

    &::before {
      content: "";
      width: 17px;
      aspect-ratio: 1 / cos(30deg);
      background-color: var(--color-link);
      margin-inline: auto;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      position: absolute;
      inset: 100% 0 0 0;
      z-index: 2;
    }

    &::after {
      content: "";
      width: 16px;
      aspect-ratio: 1 / cos(30deg);
      background-color: var(--color-bg);
      margin-inline: auto;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      position: absolute;
      inset: 99% 0 0 0;
      z-index: 2;
    }
  }
}

.el-titleV2_2 {
  font-size: calc(36 * var(--rem-ratio));
  font-weight: bold;
  line-height: calc(36 / 20);
  border-left: 5px solid var(--color-line3);
  margin: 0 0 50px;
  padding: 0 0 0 25px;
  position: relative;

  @media (max-width: 767px) {
    & {
      font-size: calc(28 * var(--rem-ratio));
      line-height: calc(40 / 28);
      margin-block-end: 40px;
    }
  }

  &::before {
    content: "";
    width: 8px;
    height: 100%;
    background: var(--color-line4);
    position: absolute;
    inset: 0;
  }

  & .el-titleV2_2_link {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 20px;
    width: fit-content;
  }
}

.el-titleV2_3 {
  font-size: calc(36 * var(--rem-ratio));
  font-weight: bold;
  line-height: calc(36 / 20);
  margin-block-start: var(--leading-trim);

  @media (max-width: 767px) {
    & {
      font-size: calc(28 * var(--rem-ratio));
      line-height: calc(28 / 20);
    }
  }
}

.el-titleV2_4 {
  font-size: calc(30 * var(--rem-ratio));
  font-weight: bold;
  line-height: calc(53 / 30);
  border-left: 5px solid var(--color-line3);
  margin-block-end: 40px;
  padding: 0 0 0 25px;
  position: relative;

  @media (max-width: 767px) {
    & {
      font-size: calc(28 * var(--rem-ratio));
      line-height: calc(44 / 28);
    }
  }

  &::before {
    content: "";
    width: 8px;
    height: 100%;
    background: var(--color-line4);
    position: absolute;
    inset: 0;
  }

  &.--uniqueIcon {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 15px;
    border: unset;
    padding-inline-start: 0;

    @media (max-width: 767px) {
      & {
        grid-template-columns: 60px 1fr;
      }
    }

    &::before {
      display: none;
    }

    & .el-titleV2_4_icon {
      align-self: start;
      margin-block-start: -0.5em;
    }
  }
}

.el-titleV2_5 {
  font-size: calc(24 * var(--rem-ratio));
  font-weight: bold;
  border-radius: 10px;
  border: 2px solid #fbdbe5;
  margin-block-end: 40px;
  padding: 20px 30px;
}

.el-titleV3 {
  font-size: calc(24 * var(--rem-ratio));
  font-weight: bold;
  line-height: calc(44 / 24);
  border-bottom: 2px solid var(--color-link2);
  margin-block-end: calc(40px + var(--leading-trim));
  padding-block-end: 15px;

  &:has(.el-titleV3_icon) {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 15px;
  }

  @media (max-width: 767px) {
    & {
      font-size: calc(24 * var(--rem-ratio));
      line-height: calc(40 / 24);
      margin-block-end: calc(30px + var(--leading-trim));
      padding-block-end: 18px;
    }

    &:has(.el-titleV3_icon) {
      align-items: start;
      gap: 10px;
    }

    & .el-titleV3_icon {
      width: 40px;
    }
  }
}

.el-titleV4 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  font-size: calc(20 * var(--rem-ratio));
  font-weight: bold;
  margin-block-end: calc(24px + var(--leading-trim));

  &::before {
    content: "";
    width: 24px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-line8);
    margin-block-start: calc(((1lh - 1rem) / 2) + ((1rem - 24px) / 2));
  }
}

.el-pageTop {
  position: absolute;
  inset: -35px 70px auto auto;
  z-index: calc(infinity);

  @media (max-width: 767px) {
    & {
      inset: -32px calc((20 / 390) * 100%) auto auto;
    }

    & img {
      width: 70px;
    }
  }

  &.is-fixed {
    position: fixed;
    top: auto;
    bottom: 30px;

    /* @media (max-width: 767px) {
      & {
        bottom: 80px;
      }
    } */
  }
}

.el-headerLogo {
  @media (max-width: 767px) {
    & {
      width: 171px;
      line-height: 1;
    }
  }
}

.el-headerLogo2 {
  line-height: 1;

  @media (max-width: 767px) {
    & {
      width: 58px;
    }
  }
}

.el-supervisor {
  font-size: calc(13 * var(--rem-ratio));
  line-height: calc(22 / 13);
  text-align: right;

  .bl-breadcrumbs + & {
    margin-block-start: calc(30px + var(--leading-trim));
  }
}

.el-em {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  width: fit-content;
  gap: 5px;
  min-width: 352px;
  min-height: 56px;
  font-size: calc(20 * var(--rem-ratio));
  font-weight: bold;
  line-height: calc(30 / 20);
  border-radius: calc(infinity * 1px);
  background: var(--color-bg3);
  margin-block-start: 20px;
  padding: 10px 26px;

  @media (max-width: 767px) {
    width: unset;
    min-width: unset;
    line-height: calc(30 / 20);
  }

  & + & {
    margin-block-start: 20px;
  }

  &.--note {
    min-width: unset;
    background-color: var(--color-bg3);
    text-align: center;
  }
}

.el-divide {
  font-size: calc(22 * var(--rem-ratio));
  line-height: 1;
}

.el-divide2 {
  font-size: calc(28 * var(--rem-ratio));
  line-height: 1;
}

.el-divide3 {
  font-size: calc(18 * var(--rem-ratio));
  line-height: 1;
}

.el-b {
  font-weight: normal;
  text-decoration: underline;
  text-underline-offset: 0.1em;
}

/* ブロックモジュール (prefix: bl- )
----------------------------------------------------------------- */
.bl-headerColumn {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;

  & + .bl-nav {
    margin-block-start: 30px;
  }
}

.bl-headerColumn_item {
  &:nth-child(2) {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
    gap: 0 22px;
  }
}

.bl-headerColumnSp {
  display: grid;
  grid-template-columns: auto 1fr auto;
  justify-items: center;
  align-items: center;
  background: var(--color-base);
  padding: 16px calc((20 / 390) * 100%);

  .is-fixed & {
    box-shadow: 0 3px 6px rgb(0 0 0 / 0.16);
  }
}

.bl-hamburgerMenu {
  display: grid;
  place-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: var(--color-link);
}

.bl-spNavWrapper {
  display: none;
  overflow: auto;
  overscroll-behavior: contain;

  @media (min-width: 768px) {
    & {
      display: none !important;
    }
  }
}

.bl-spNav {
  font-size: calc(18 * var(--rem-ratio));
  box-shadow: 0 3px 6px rgb(0 0 0 / 0.16);
}

.bl-spNav_item {
  & + & {
    border-top: 1px solid var(--color-line);
  }
}

.bl-spNav_link {
  display: grid;
  grid-template: ". icon" / 1fr 20px;
  align-items: center;
  gap: 0 calc((30 / 390) * 100%);
  width: 100%;
  min-height: 78px;
  font-weight: bold;
  line-height: calc(20 / 18);
  background: var(--color-bg);
  padding-block: 10px;
  padding-inline: calc((20 / 390) * 100%);

  &::before,
  &::after {
    content: "";
    grid-area: icon;
    border-block-end: 2px solid;
  }

  &::after {
    rotate: 90deg;
  }

  .is-close &::after {
    opacity: 0;
  }
}

.bl-spNav_linkDecoration {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  min-height: 28px;
  border-left: 5px solid var(--color-line3);
  padding-inline-start: 25px;
  position: relative;

  &::before {
    content: "";
    width: 8px;
    height: 100%;
    background: var(--color-line4);
    position: absolute;
    inset: 0;
  }
}

.bl-spNav_body {
  display: none;
  background: var(--color-base);
}

.bl-spNavUnder {
  display: grid;
  grid-auto-flow: row;
  align-items: center;
  gap: 0 calc((20 / 390) * 100%);
  border-top: 1px solid var(--color-line);
  padding: 20px calc((20 / 390) * 100%);
}

.bl-spNavUnder_link {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 0 calc((20 / 350) * 100%);
  font-weight: 500;
  line-height: calc(26 / 18);

  :is(&, .bl-spNavUnder_linkWrapper) + :is(&, .bl-spNavUnder_linkWrapper) {
    border-top: 1px dashed var(--color-line6);
    margin-block-start: 20px;
    padding-block-start: 20px;
  }
}

.bl-spNavUnder_linkWrapper {
  .bl-spNavUnder_link + .bl-spNavUnder_link {
    border-top: unset;
    padding-block-start: 0;
  }
}

.bl-spNavUnder_title {
  font-weight: 500;
  line-height: calc(28 / 18);
  color: var(--color-link);
  margin-block-end: calc(20px + var(--leading-trim));
  padding-inline-end: calc((30 / 350) * 100%);
}

.bl-fzChange {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  font-size: calc(14 * var(--rem-ratio));
}

.bl-fzChange_title {
  margin-inline-end: 10px;
}

.bl-fzChange_btn {
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid var(--color-line2);
  margin-inline-start: 6px;

  &.is-active {
    color: var(--color-base);
    border-color: var(--color-link);
    background-color: var(--color-link);
  }
}

.bl-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 1px;
  min-height: 90px;
  font-size: calc(18 * var(--rem-ratio));
  border-radius: calc(infinity * 1px);
  border: 1px solid var(--color-link);
  background: var(--color-link);
  position: relative;
}

.bl-nav_item {
  height: 100%;

  & + & .bl-nav_link::before {
    content: "";
    width: 1px;
    height: calc(100% - 34px);
    background: var(--color-line);
    margin-block: auto;
    position: absolute;
    inset: 0 0 0 -1px;
  }

  :is(&:hover, .is-current) + & .bl-nav_link::before {
    display: none;
  }

  &:first-child .bl-nav_link {
    border-radius: calc(infinity * 1px) 0 0 calc(infinity * 1px);
  }

  &:last-child .bl-nav_link {
    border-radius: 0 calc(infinity * 1px) calc(infinity * 1px) 0;
  }
}

.bl-nav_itemInner {
  height: 100%;
  position: relative;

  &::before {
    display: none;
    content: "";
    width: 17px;
    aspect-ratio: 1 / cos(30deg);
    background: url(/assets/images/bg_menu_arrow.png) center no-repeat;
    background-size: contain;
    margin-inline: auto;
    position: absolute;
    inset: auto 0 -19px 0;
  }

  &::after {
    display: none;
    content: "";
    width: 17px;
    aspect-ratio: 1 / cos(30deg);
    background-color: var(--color-base);
    margin-inline: auto;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    position: absolute;
    inset: auto 0 -21px 0;
    z-index: 2;
  }

  .is-open &::before,
  .is-open &::after {
    display: block;
  }
}

.bl-nav_link {
  display: grid;
  align-items: center;
  height: 100%;
  color: var(--color-base);
  font-weight: bold;
  line-height: calc(26 / 18);
  text-align: center;
  text-wrap: balance;
  padding-inline: 20px;
  position: relative;

  &:hover,
  .is-current &,
  .is-open & {
    color: var(--color-link);
    background: var(--color-base);

    &::before {
      display: none;
    }
  }
}

.bl-navSubWrapper {
  display: none;
  padding-block-start: 18px;
  position: absolute;
  inset: 88px 0 auto;
  z-index: 1;
}

.bl-navSub {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 40px;
  font-weight: 500;
  line-height: calc(28 / 18);
  border-radius: 20px;
  border: 1px solid var(--color-link);
  background: var(--color-base);
  padding: 40px;
  box-shadow: 0 3px 6px rgb(0 0 0 / 0.16);
}

.bl-navSub_link {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  gap: 10px;
}

.bl-hero_title {
  & img {
    display: block;
    margin-inline: auto;
  }
}

.bl-hero_text {
  font-size: calc(13 * var(--rem-ratio));
  line-height: calc(22 / 13);
  text-align: right;
  margin-block-start: calc(38px + var(--leading-trim));
}

.bl-footerColumn {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px 0;

  & + .el-footerCopy {
    margin-block-start: calc(103px + var(--leading-trim));

    @media (max-width: 767px) {
      & {
        margin-block-start: calc(40px + var(--leading-trim));
      }
    }
  }

  @media (max-width: 767px) {
    & {
      gap: 40px;
    }
  }
}

.bl-footerLinks {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  gap: 0 30px;
  margin-block-start: var(--leading-trim);

  @media (max-width: 767px) {
    & {
      grid-auto-flow: unset;
      grid-template-columns: repeat(2, auto);
      gap: 0 calc((20 / 390) * 100%);
    }
  }

  & + .el-footerNote {
    margin-block-start: calc(32px + var(--leading-trim));

    @media (max-width: 767px) {
      & {
        margin-block-start: calc(40px + var(--leading-trim));
      }
    }
  }
}

.bl-footerLinks_item {
  display: grid;
  grid-auto-flow: column;
  align-items: center;

  @media (max-width: 767px) {
    & {
      justify-content: start;
      align-items: center;
    }
  }

  & .bl-footerLinks_arrow {
    margin-inline-end: 6px;
  }

  & .bl-footerLinks_external {
    margin-inline-start: 8px;
  }
}

.bl-fixedLinks_inner {
  display: grid;
  grid-auto-flow: row;
  gap: 10px;
  position: fixed;
  inset: 300px 0 auto auto;
  z-index: calc(infinity);

  @media (max-width: 767px) {
    & {
      min-height: 70px;
      grid-auto-flow: unset;
      grid-template-columns: repeat(2, 1fr);
      gap: 0;
      font-weight: 500;
      line-height: calc(24 / 18);
      text-align: center;
      inset: auto 0 0 0;
    }
  }
}

.bl-fixedLinks_link {
  @media (max-width: 767px) {
    & {
      display: grid;
      place-content: center;
      height: 100%;
      font-size: calc(18 * var(--rem-ratio));
      padding: 10px 16px;
    }

    &.--bg {
      background-color: var(--color-line3);
    }

    &.--bg2 {
      background-color: var(--color-line4);
    }
  }
}

.bl-contentsList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc((50 / 1240) * 100cqw);

  @media (max-width: 767px) {
    & {
      grid-template-columns: 1fr;
      gap: 40px;
    }
  }
}

.bl-contentsList_item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
  border-radius: 20px;
  border: 1px solid var(--color-line5);
  background: var(--color-base);
  padding: 0 0 70px;
  overflow: hidden;

  @media (max-width: 767px) {
    & {
      border-radius: 20px 0 20px 20px;
      padding-block-end: 40px;
    }
  }
}

.bl-contentsList_title {
  display: grid;
  align-items: center;
  width: fit-content;
  min-height: 56px;
  font-size: calc(24 * var(--rem-ratio));
  font-weight: bold;
  line-height: calc(24 / 20);
  border-radius: 20px 0 20px 0;
  border: 1px solid var(--color-line5);
  background: var(--color-bg3);
  margin: 0 0 40px;
  padding: 10px 26px;
  translate: -1px -1px;

  @media (max-width: 767px) {
    & {
      width: calc(100% + 2px);
      min-height: 53px;
      font-size: calc(22 * var(--rem-ratio));
      line-height: calc(22 / 20);
      margin-block-end: 32px;
    }
  }
}

.bl-contentsList_img {
  margin: 0 0 40px;

  @media (max-width: 767px) {
    & {
      margin-block-end: 30px;
      padding-inline: calc((20 / 306) * 100%);
    }
  }

  & img {
    display: block;
    width: fit-content;
    margin-inline: auto;
  }
}

.bl-contentsList_body {
  padding: 0 40px;

  @media (max-width: 767px) {
    & {
      padding-inline: calc((20 / 306) * 100%);
    }
  }
}

.bl-list {
  font-size: calc(22 * var(--rem-ratio));
  font-weight: 500;
  line-height: calc(34 / 22);

  @media (max-width: 767px) {
    & {
      font-size: calc(18 * var(--rem-ratio));
      line-height: calc(30 / 18);
    }
  }

  &:where(.--disc, .--discL) {
    font-size: calc(18 * var(--rem-ratio));
    font-weight: normal;
    line-height: calc(32 / 18);
  }

  &:where(.--unique) {
    font-size: calc(24 * var(--rem-ratio));
    font-weight: bold;
  }

  .el-em + & {
    margin-block-start: calc(20px + var(--leading-trim));
  }
}

.bl-list_item {
  word-break: auto-phrase;

  &:not(:last-of-type, .--disc > &, .--discL > &) {
    border-bottom: 1px dashed var(--color-line2);
    padding-block-end: calc(20px + var(--leading-trim));

    @media (max-width: 767px) {
      & {
        padding-block-end: calc(30px + var(--leading-trim));
      }
    }
  }

  & + & {
    margin-block-start: calc(20px + var(--leading-trim));

    @media (max-width: 767px) {
      & {
        margin-block-start: calc(30px + var(--leading-trim));
      }
    }
  }

  :where(.--disc, .--discL) > & {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;

    @media (max-width: 767px) {
      & {
        align-items: start;
      }

      & + .bl-list_item {
        margin-block-start: calc(17px + var(--leading-trim));
      }
    }

    &::before {
      content: "";
      width: 10px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--color-line8);
      margin-block-start: calc(((1lh - 1rem) / 2) + ((1rem - 10px) / 2));
    }
  }

  .--discL > & {
    &::before {
      width: 16px;
      margin-block-start: calc(((1lh - 1rem) / 2) + ((1rem - 16px) / 2));
    }
  }

  .--discBg > & {
    &::before {
      background: var(--color-line3);
    }
  }
}

.bl-list_link {
  & [src*="arrow_circle_s.svg"] {
    width: 36px;
  }
}

.bl-list_uniqueTitle {
  display: block;
  padding-inline: 15px 10px;

  @media (max-width: 767px) {
    & {
      padding-inline: 0;
    }
  }
}

:where(.bl-list_link, .bl-listInside_link) {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-inline: 15px 10px;

  @media (max-width: 767px) {
    & {
      padding-inline: 0;
    }
  }
}

.bl-listInside {
  .bl-list_uniqueTitle + & {
    margin-block-start: calc(20px + var(--leading-trim));
  }
}

.bl-listInside_item {
  & + & {
    margin-block-start: calc(20px + var(--leading-trim));
  }
}

.bl-listInside_link {
  padding-inline-start: calc(15px + 1em);

  @media (max-width: 767px) {
    & {
      padding-inline-start: 1em;
    }
  }

  & [src*="arrow_circle_s.svg"] {
    width: 36px;
  }
}

.bl-btnWrapper {
  display: grid;
  gap: 20px;

  &.--3column {
    grid-template-columns: repeat(auto-fill, minmax(32%, 1fr));

    @media (max-width: 767px) {
      & {
        grid-template-columns: 1fr;
      }
    }
  }
}

.bl-btn {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 0 10px;
  min-height: 120px;
  font-size: calc(20 * var(--rem-ratio));
  font-weight: bold;
  line-height: calc(30 / 20);
  border-radius: calc(infinity * 1px);
  border: 1px solid var(--color-base);
  background: var(--color-base);
  padding: 32px;

  .--square > & {
    border-radius: 10px;
    border-color: var(--color-link);
  }

  @media (max-width: 767px) {
    & {
      gap: 0 5px;
      padding: 27px 25px;
    }
  }

  @media (any-hover: hover) {
    &:where(:hover) {
      border-color: var(--color-link2);
    }
  }

  &::after {
    content: "";
    width: 36px;
    aspect-ratio: 1;
    background: url(/assets/images/arrow_circle_s.svg) center no-repeat;
    background-size: cover;
  }

  &.is-current {
    font-size: calc(24 * var(--rem-ratio));
    color: var(--color-link);
  }

  &.is-current::after {
    background-image: url(/assets/images/arrow_circle_s03.svg);
  }
}

.bl-btn_label {
  display: block;
  font-size: calc(16 * var(--rem-ratio));
}

.bl-relation {
  display: grid;
  grid-auto-flow: row;
  justify-content: center;
  gap: 38px;

  @media (max-width: 767px) {
    & {
      gap: calc(60px + var(--leading-trim)) 0;
    }
  }

  & .el-titleV2_3 {
    text-align: center;
  }
}

.bl-relationLink_body {
  margin-block-start: 24px;

  @media (max-width: 767px) {
    & {
      margin-block-start: 20px;
    }
  }
}

.bl-relationLink_link {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  font-size: calc(20 * var(--rem-ratio));
  font-weight: 500;
  line-height: calc(30 / 20);

  @media (max-width: 767px) {
    & {
      font-size: calc(18 * var(--rem-ratio));
      line-height: calc(30 / 18);
    }
  }

  & .bl-relationLink_external {
    margin-inline: 10px 0;
  }

  & .bl-relationLink_arrow {
    width: 32px;
    margin-inline: 14px 0;
  }
}

.bl-information {
  border-image: linear-gradient(var(--color-bg2) 0 0) fill 0 / /0 100lvi;
  margin-block-start: 100px;
  padding-block: 70px;

  @media (max-width: 767px) {
    & {
      margin-block-start: 70px;
      padding-block: 50px;
    }
  }
}

.bl-information_title {
  font-size: calc(26 * var(--rem-ratio));
  font-weight: bold;
  line-height: calc(48 / 26);
  text-align: center;
  text-wrap: balance;
  margin-block-end: calc(50px + var(--leading-trim));

  @media (max-width: 767px) {
    & {
      font-size: calc(24 * var(--rem-ratio));
      line-height: calc(40 / 24);
      margin-block-end: calc(30px + var(--leading-trim));
    }
  }
}

.bl-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5em;

  @media (max-width: 767px) {
    display: block;
    line-height: 1;
  }
}

.bl-breadcrumbs_item {
  display: flex;
  align-items: center;
  font-size: calc(16 * var(--rem-ratio));
  line-height: calc(30 / 16);

  & + &::before {
    content: "＞";
    font-size: calc(14 * var(--rem-ratio));
    margin-inline-end: 0.5em;
  }

  @media (max-width: 767px) {
    & {
      display: inline;
      font-size: calc(14 * var(--rem-ratio));
      line-height: calc(30 / 14);
    }

    & + & {
      padding-inline-start: 0.5em;
    }

    & + &::before {
      font-size: calc(12 * var(--rem-ratio));
    }
  }
}

.bl-breadcrumbs_link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bl-contentsSection {
  & + & {
    margin-block-start: 80px;
  }

  .el-supervisor + & {
    margin-block-start: 30px;
  }

  @media (max-width: 767px) {
    & + & {
      margin-block-start: 70px;
    }

    .el-supervisor + & {
      margin-block-start: 50px;
    }
  }
}

.bl-contentsSection_body {
  padding-inline: 40px;

  @media (max-width: 767px) {
    & {
      padding-inline: 0;
    }
  }
}

.bl-noteList {
  p + & {
    margin-block-start: calc(40px + var(--leading-trim));
  }

  @media (max-width: 767px) {
    p + & {
      margin-block-start: calc(30px + var(--leading-trim));
    }
  }
}

.bl-noteList_item {
  & + & {
    margin-block-start: calc(40px + var(--leading-trim));
  }

  @media (max-width: 767px) {
    & + & {
      margin-block-start: calc(30px + var(--leading-trim));
    }
  }
}

.bl-noteList_title {
  font-size: calc(20 * var(--rem-ratio));
  line-height: calc(30 / 20);
  border-radius: calc(infinity * 1px);
  background: var(--color-bg3);
  margin-block-end: calc(15px + var(--leading-trim));
  padding: 10px 26px;

  &:has(> .bl-noteList_titleIcon, > .el-divide2) {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 5px;
  }
}

.bl-noteList_titleIcon {
  &.--circle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-text);

    @media (max-width: 767px) {
      & {
        align-self: start;
        margin-block-start: 0.25lh;
      }
    }
  }
}

.bl-noteList_body {
  padding-inline: 35px;

  @media (max-width: 767px) {
    & {
      padding-inline: 0;
    }
  }

  &:has(.bl-figure) {
    margin-block-start: 30px;
    padding-block-end: 30px;
  }
}

.bl-noteListColumn {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
}

.bl-contetsColumn {
  display: grid;

  &.--2column {
    grid-auto-flow: column;
    justify-content: space-between;
    gap: 10px;

    @media (max-width: 767px) {
      &.--2column {
        grid-auto-flow: row;
        gap: 30px;

        img {
          display: block;
          margin-inline: auto;
        }
      }
    }
  }

  &.--2column2 {
    grid-template-columns: calc((558 / 1120) * 100%) calc((480 / 1120) * 100%);
    gap: calc((76 / 1120) * 100%);

    @media (max-width: 767px) {
      &.--2column2 {
        grid-template-columns: 1fr;
        gap: 24px;

        img {
          display: block;
          margin-inline: auto;
        }
      }
    }
  }

  &.--2column3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 calc((95 / 1120) * 100%);

    @media (max-width: 767px) {
      grid-template-columns: 1fr;
      gap: 0;
    }

    & + & {
      margin-block-start: 30px;
    }
  }

  p + & {
    margin-block-start: 30px;
  }
}

.bl-contetsColumn_item {
  .--subgrid & {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;

    @media (max-width: 767px) {
      & {
        display: initial;
      }

      &:has(.el-titleV3) + & {
        margin-block-start: 40px;
      }
    }
  }
}

.bl-contetsColumn_img {
  width: fit-content;
  margin-block: 24px 0;
  margin-inline: auto;

  @media (max-width: 767px) {
    & {
      margin-block: 30px 0;
    }
  }
}

:is(.bl-modalExternal, .bl-modalConfirmation) {
  & .modaal-inner-wrapper {
    @media (max-width: 767px) {
      & {
        padding-inline: calc((20 / 390) * 100%);
      }
    }
  }

  & .modaal-container {
    max-width: 900px;
    border-radius: 20px;
    border: 1px solid #adadad;
    position: relative;
  }

  & .modaal-content-container {
    padding-block: 70px;

    @media (max-width: 767px) {
      & {
        padding-inline: calc((17 / 390) * 100%);
        padding-block: 40px 50px;
      }
    }
  }

  & .modaal-close {
    width: 56px;
    height: 56px;
    border: 1px solid #adadad;
    background: var(--color-base);
    top: -30px;
    right: -30px;
    position: absolute;

    @media (max-width: 955px) {
      & {
        right: max(-20px, calc((20 / 390) * -100%));
      }
    }
  }

  & .modaal-close:after,
  & .modaal-close:before {
    width: 3px;
    height: 22px;
    border-radius: 0;
    background: #707070;
    top: 16px;
    left: 25px;
  }

  .bl-modalExternal_titleWrapper {
    max-width: 600px;
    margin-inline: auto;

    @media (max-width: 767px) {
      & {
        max-width: unset;
      }
    }
  }

  & .bl-modalExternal_title {
    font-size: calc(22 * var(--rem-ratio));
    font-weight: bold;
  }

  & .bl-modalExternal_btnWrapper {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    gap: 48px;
    margin-block-start: calc(50px + var(--leading-trim));

    @media (max-width: 767px) {
      grid-auto-flow: row;
      justify-content: unset;
      gap: 36px;
      margin-block-start: calc(40px + var(--leading-trim));
    }
  }

  & .bl-modalExternal_link {
    display: grid;
    align-items: center;
    width: fit-content;
    min-width: 248px;
    min-height: 68px;
    font-size: calc(20 * var(--rem-ratio));
    font-weight: 500;
    line-height: 1;
    color: var(--color-base);
    text-align: center;
    border-radius: calc(infinity * 1px);
    border: 2px solid var(--color-link);
    background: var(--color-link);
    padding: 10px 20px;
    position: relative;

    @media (max-width: 767px) {
      & {
        width: unset;
      }
    }

    &.--invert {
      color: var(--color-link);
      background: var(--color-base);
    }

    & .bl-modalConfirmation_btnIcon {
      margin-block: auto;
      position: absolute;
      inset: 0 20px 0 auto;
    }

    @media (any-hover: hover) {
      &:where(:hover) {
        background-color: var(--color-base);
        color: var(--color-link);
      }

      &.--invert:where(:hover) {
        background-color: var(--color-link);
        color: var(--color-base);
      }
    }
  }
}

.bl-modalConfirmation {
  & .bl-modalConfirmation_text {
    text-align: center;

    @media (max-width: 767px) {
      text-align: left;
    }
  }

  & .bl-modalConfirmation_text2 {
    font-size: calc(22 * var(--rem-ratio));
    font-weight: 500;
    line-height: calc(38 / 22);
    text-align: center;
    text-wrap: balance;
    margin-block-start: 24px;
  }

  & .bl-modalConfirmation_btnWrapper {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    gap: 48px;
    margin-block-start: calc(50px + var(--leading-trim));

    @media (max-width: 767px) {
      grid-auto-flow: row;
      justify-content: unset;
      gap: 36px;
      margin-block-start: calc(40px + var(--leading-trim));
    }
  }

  & .bl-modalConfirmation_btn {
    width: fit-content;
    min-width: 248px;
    min-height: 68px;
    font-size: calc(20 * var(--rem-ratio));
    font-weight: 500;
    line-height: 1;
    color: var(--color-base);
    text-align: center;
    border-radius: calc(infinity * 1px);
    border: 2px solid var(--color-link);
    background: var(--color-link);
    padding: 10px 20px;
    position: relative;

    @media (max-width: 767px) {
      & {
        width: unset;
      }
    }

    &.--invert {
      color: var(--color-link);
      background: var(--color-base);
    }

    & .bl-modalConfirmation_btnIcon {
      margin-block: auto;
      position: absolute;
      inset: 0 20px 0 auto;
    }

    @media (any-hover: hover) {
      &:where(:hover) {
        background-color: var(--color-base);
        color: var(--color-link);
      }

      &.--invert:where(:hover) {
        background-color: var(--color-link);
        color: var(--color-base);
      }
    }
  }
}

.bl-btnSecondaryWrapper {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  gap: 20px;

  p + & {
    margin-block-start: calc(60px + var(--leading-trim));
  }
}

.bl-btnSecondary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: fit-content;
  min-width: 340px;
  min-height: 68px;
  font-size: calc(20 * var(--rem-ratio));
  font-weight: 500;
  line-height: 1;
  color: var(--color-base);
  text-align: center;
  border-radius: calc(infinity * 1px);
  border: 2px solid var(--color-link);
  background: var(--color-link);
  padding: 10px 20px;
  position: relative;

  @media (max-width: 767px) {
    width: unset;
  }

  &::before,
  &::after {
    content: "";
    width: 24px;
    aspect-ratio: 1;
    background: center no-repeat;
  }
  &::after {
    background-image: url(/assets/images/arrow_circle_s02.svg);
  }

  & .bl-btnSecondary_icon {
    margin-block: auto;
    position: absolute;
    inset: 0 20px 0 auto;
  }

  @media (any-hover: hover) {
    &:where(:hover) {
      background-color: var(--color-base);
      color: var(--color-link);

      &::after {
        background-image: url(/assets/images/arrow_circle_s.svg);
      }
    }
  }
}

.bl-contentsUnderSection {
  & + & {
    margin-block-start: 60px;

    @media screen and (max-width: 767px) {
      & {
        margin-block-start: 40px;
      }
    }
  }

  p + & {
    margin-block-start: 30px;
  }
}

.bl-noteWrapper {
  border-top: 1px dashed var(--color-line7);
  margin: 50px 0 0;
  padding: 40px 0 0;

  @media screen and (max-width: 767px) {
    & {
      margin-block-start: 40px;
    }
  }

  &.--unique {
    border-top: unset;
    margin-block-start: 20px;
    padding: 0;
  }
}

.bl-note {
  font-size: calc(14 * var(--rem-ratio));
  line-height: calc(26 / 14);
  text-align: right;

  @media screen and (max-width: 767px) {
    & {
      text-align: left;
    }
  }
}

.bl-figure {
  & + & {
    margin-block-start: 50px;
  }

  &.--fit_width {
    & .bl-figure_body {
      width: fit-content;
      margin-inline: auto;
    }
  }

  & figcaption {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    gap: 10px;
    line-height: calc(32 / 18);

    &::before {
      display: inline-block;
      content: "";
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--color-line3);
      margin-block-start: 0.25lh;
    }

    & + .bl-figure_body {
      margin-block-start: 40px;
    }

    &.--unique {
      font-size: calc(22 * var(--rem-ratio));
      font-weight: bold;

      &::before {
        display: none;
      }
    }
  }

  & .bl-note {
    margin-block-start: 14px;

    @media screen and (max-width: 767px) {
      & {
        text-align: right;
      }
    }
  }

  & + p {
    margin-block-start: calc(60px + var(--leading-trim));
  }

  p + & {
    margin-block-start: calc(40px + var(--leading-trim));

    @media screen and (max-width: 767px) {
      p + & {
        margin-block-start: calc(30px + var(--leading-trim));
      }
    }
  }
}

.bl-notesList {
  .bl-noteList + & {
    margin-block-start: 10px;
  }

  p + & {
    margin-block-start: calc(20px + var(--leading-trim));

    @media screen and (max-width: 767px) {
      p + & {
        margin-block-start: calc(24px + var(--leading-trim));
      }
    }
  }
}

.bl-notesList_item {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;

  font-size: calc(14 * var(--rem-ratio));
  line-height: calc(24 / 14);

  & + & {
    margin-block-start: calc(5px + var(--leading-trim));
  }
}

.bl-attention {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  gap: 16px;
  min-height: 113px;
  font-size: calc(20 * var(--rem-ratio));
  font-weight: bold;
  line-height: calc(34 / 20);
  border-radius: 20px;
  background: var(--color-bg6);
  padding: 25px 35px;

  @media screen and (max-width: 767px) {
    & {
      grid-auto-flow: row;
      gap: 20px;
      padding: 30px calc((20 / 350) * 100%);
    }
  }

  & .bl-attention_icon {
    display: block;
    margin-inline: auto;

    @media screen and (max-width: 767px) {
      width: unset;
    }
  }

  .bl-figure + & {
    margin-block-start: 40px;
  }

  :is(.bl-contetsColumn, p) + & {
    margin-block-start: 80px;

    @media screen and (max-width: 767px) {
      & {
        margin-block-start: 70px;
      }
    }
  }
}

.bl-attention_item {
  &:first-child {
    align-self: start;
    margin-block-start: -0.5em;
  }
}

.bl-promises {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 0 calc((40 / 1120) * 100%);

  @media screen and (max-width: 767px) {
    & {
      grid-template-columns: 1fr;
      gap: 40px;
    }

    .bl-promises_img {
      text-align: center;
    }
  }

  & + & {
    margin-block-start: 40px;

    @media screen and (max-width: 767px) {
      & {
        margin-block-start: 60px;
      }
    }
  }

  & + .bl-contentsUnderSection {
    margin-block-start: 80px;
  }
}

.bl-promises_text {
  font-weight: bold;
  line-height: calc(32 / 18);

  & .bl-notesList {
    display: block;
    font-weight: normal;
    margin-block-start: calc(15px + var(--leading-trim));
  }

  &.--fw_normal {
    font-weight: normal;
  }
}

.bl-kinds {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px calc((72 / 1120) * 100%);
  border-radius: 20px;
  background: var(--color-bg5);
  padding: 40px;
  position: relative;

  &::before {
    content: "";
    width: 1px;
    height: calc(100% - 80px);
    border-left: 1px dashed var(--color-line9);
    margin: auto;
    position: absolute;
    inset: 0;
  }

  @media screen and (max-width: 767px) {
    & {
      grid-template-columns: 1fr;
      gap: 72px 0;
      padding: 40px calc((30 / 350) * 100%);
    }
    &::before {
      width: calc(100% - ((30 / 350) * 100%));
      height: 1px;
      border: none;
      border-bottom: 1px dashed var(--color-line9);
    }
  }

  p + & {
    margin-block-start: calc(30px + var(--leading-trim));

    @media screen and (max-width: 767px) {
      & {
        margin-block-start: calc(20px + var(--leading-trim));
      }
    }
  }
}

.bl-kinds_item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;

  @media screen and (max-width: 767px) {
    & {
      grid-template-rows: unset;
      gap: 25px;
    }
  }
}

.bl-kinds_title {
  font-weight: bold;
  line-height: calc(32 / 18);
}

.bl-kinds_text {
  line-height: calc(32 / 18);
}

.bl-kinds_img {
  display: block;
  margin-inline: auto;
}

.bl-titleWrapper {
  & {
    margin-block-end: 40px;
  }

  & .el-titleV2_4 {
    margin-block-end: 16px;
  }
}

.bl-title_note {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  font-size: calc(18 * var(--rem-ratio));
}

.bl-photoList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 calc((38 / 1120) * 100%);

  .bl-figure {
    margin-block-start: 0;
  }

  & + .bl-note {
    margin-block-start: calc(20px + var(--leading-trim));
  }
}

.bl-photoList_text {
  font-weight: 500;
}

/* ヘルパー (prefix: hp- )
----------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .hp-pcOnly {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .hp-spOnly {
    display: none;
  }
}

.hp-leadingTrim {
  &::before,
  &::after {
    content: "";
    display: block flow;
    inline-size: 0;
    block-size: 1px;
  }

  &::before {
    margin-block-end: var(--leading-trim);
  }

  &::after {
    margin-block-start: var(--leading-trim);
  }
}

/* ユニーク (prefix: un- )
----------------------------------------------------------------- */