@layer reset, base, components, utilities;

:root {
  --header-height: 85px;
  --sp-space-padding: 2rem;
  --post-icon-area: 6.8rem;
  --icon-area: 6.8rem;

  /* z-index */
  --z-index-mobile-menu: 100;

  /* color */
  --color-black: #2e2e2e;
  --color-black-02: #000000;
  --color-white: #fff;
  --color-gray: #736f6f;
  --color-brown: #a2736e;
  --color-tab: #ca2420;
  --color-tab-border: #d1cfcc;
  --color-note-border: #d1cfcc;
  --color-link-border-01: #d1cfcc;
  --color-link-disabled-01: #d1cfcc;
  --color-gray-lighter: #e3e1df;
  --color-blue-primary: #284989;
  --color-blue-lighter: #1a77e3;
  --color-pink-lighter: #fcebe4;
  --color-pink-darker: #fad6c5;
  --color-light-red-lighter: #f8aca2;
  --color-red: #d4392d;
  --color-orange: #de8012;
  --color-orange-02: #fad6c5;
  --color-green: #0dbc86;
  --color-green-02: #137870;
  --color-blue: #1271de;
  --color-main-background: #faf6f4;
  --color-text-background-blue: #5378cb;
  --color-text-background-contrast-blue: #5173c4;
  --color-background-light-blue: #97b8f8;
  --color-background-light-red: #df7b78;
  --color-background-light-pink: #faebdb;
  --color-background-light-pink-02: #f5ede9;
  --color-footer-border: #ff8686;
  --color-background-nav-belt: #fff4e8;
  --color-main: #ca2420;
  --color-base-background: #faebdb;
  --color-accent1: #5378cb;
  --color-accent2: #cb621e;
  --color-text-link-01: #a85118;
  --color-text-link-02: #bd5b1c;
  --color-underline-01: #f4fc94;
  --color-link-text-background-01: #faebdb;
  --color-link-text-background-02: #555252;

  /* font-size */
  --font-size-12: 1.2rem;
  --font-size-13: 1.3rem;
  --font-size-14: 1.4rem;
  --font-size-15: 1.5rem;
  --font-size-16: 1.6rem;
  --font-size-17: 1.7rem;
  --font-size-18: 1.8rem;
  --font-size-19: 1.9rem;
  --font-size-20: 2rem;
  --font-size-22: 2.2rem;
  --font-size-23: 2.3rem;
  --font-size-24: 2.4rem;
  --font-size-26: 2.6rem;
  --font-size-28: 2.8rem;
  --font-size-30: 3rem;
  --font-size-32: 3.2rem;
  --font-size-36: 3.6rem;
  --font-size-38: 3.8rem;
  --font-size-42: 4.2rem;
  --font-size-50: 5rem;
  --border-radius: 2rem;
  --border-radius-10: 1rem;
  --border-radius-12: 1.2rem;
  --border-radius-20: 2rem;
  --border-radius-24: 2.4rem;
  --border-radius-30: 3rem;
  --border-radius-pill: 9999px;
  --max-width-container: 1200px;
}
@media (min-width: 1200px) {
  :root {
    --sp-space-padding: 0;
  }
}

@layer reset {
/* ===== reset ===== */
/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html,
body {
  height: 100%;
}
body {
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}
input,
button,
textarea,
select {
  font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
#root,
#__next {
  isolation: isolate;
}
html {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 62.5%;
  scroll-behavior: smooth;
}
@supports (hanging-punctuation: first) {
  rt {
    margin-block-end: -.5em;
  }
}
/*! デザイン幅以下スマホ用 */
@media (max-width: 360px) {
html {
    font-size: 55.95%;
}
  }
body {
  background-color: var(--color-main-background);
}
ul,
ol {
  list-style-type: none;
  padding: 0;
}
a {
  text-decoration: none;
}
.has-visited:visited * {
  color: var(--color-gray);
}
button {
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
img {
  border: none;
  line-height: 0;
}

}
@layer base {
/* ===== base ===== */
@media (min-width: 640px) {
  .no_radius_pc {
    border-radius: unset;
  }
}

/* .wrapper */
.wrapper {
  overflow: hidden;
}

main {
  &:only-child {
    width: 100%;
  }
}
.link-text {
  &:where([href]) {
    color: var(--color-text-link-01);
    &:where([target="_blank"]) {
      &:not(:has(.icon_new-windw)) {
        &::after {
          aspect-ratio: 1;
          background-image: url("/shared/images/icon/icon_new_window_dark_orange_01.svg");
          background-size: contain;
          content: '';
          display: inline-block;
          margin-inline: .5em;
          position: static;
          width: calc((14 / 16) * 1em);
          height: auto;
        }
        &:where([href*=".pdf"]) {
          &::after {
            background-image: url(/images/classroom/ico-pdf.png);
            vertical-align: bottom;
            width: calc((14 / 16) * 1.5em);
          }
        }
      }
    }
    &:hover {
      text-decoration: underline;
    }
  }
}
@media (min-width: 640px) {
  /* hover */
  button[aria-selected="true"]:hover {
    cursor: unset;
  }

  /* trantion */
  a,
  button,
  .hover__up,
  .hover__up > *,
  .hover__right,
  .hover__right-up > *,
  .hover__small-up,
  .hover__reversal__03[aria-selected="false"],
  .hover__reversal_underline_blue {
    transition: all 0.3s 0.15s;
  }

  .hover__zoom-up,
  .accordion__panel#more-article-list[aria-hidden="false"] .hover__zoom-up {
    transition: all 1s 0.05s;
  }
  .hover__zoom-up-02 {
    transition: all 1s 0.05s;
  }

  .hover__up {
    transition: all 0.15s 0.1s;
  }

  .hover__underline,
  .hover__add-border,
  .hover__font-weight__bold,
  .hover__reversal_underline_blue {
    transform-origin: right top;
    transition: all 0.3s 0.15s;
  }

  /* 右上に動く */

  .icon-button:hover .hover__right-up {
    transform: translate(1px, -3px);
  }

  /* 上に動く */
  .hover__up:not([aria-selected="true"]),
  a .hover__up,
  button .hover__up {
    transition: transform 0.3s 0.15s;
  }
  .hover__up:not([aria-selected="true"]):hover,
  a:hover .hover__up,
  button:hover .hover__up {
    transform: translateY(-5px);
  }

  a:hover .hover__small-up,
  button:hover .hover__small-up {
    transform: translateY(-3px);
  }

  /* 右に動く */
  a:hover .hover__right,
  button:hover .hover__right {
    transform: translateX(3px);
  }

  /* 下線 */
  .hover__underline:hover,
  a:hover .hover__underline,
  button:hover .hover__underline {
    text-decoration: underline;
  }

  /* 反転 */
  .hover__reversal__01 > .content__header {
    transition: background-color 0.3s 0.15s;
  }
  .hover__reversal__01:hover > .content__header {
    background-color: var(--color-main);
  }

  .hover__reversal__01 > .content__header > * {
    transition: color 0.3s 0.15s;
  }
  .hover__reversal__01:hover > .content__header > * {
    color: var(--color-white);
  }

  /* カルーセルカードの中のボタンの反転 */
  a .hover__reversal__02 {
    transition: 0.5s 0.2s;
  }

  a:hover .hover__reversal__02 {
    background: var(--color-white);
    border: 2px solid var(--color-text-background-blue);
    color: var(--color-text-background-blue);
  }

  a:hover .hover__reversal__02 > .content__header > * {
    color: var(--color-white);
  }
  /* カルーセルバレッドの反転 */
  a .carousel-card__button::after {
    transition: opacity 0.5s 0.2s;
  }
  a:hover .carousel-card__button::after {
    opacity: 1;
  }

  /* タブの反転 */
  .hover__reversal__03 {
    transition: all 0.12s 0.15s;
  }
  .hover__reversal__03[aria-selected="false"]:hover {
    background: var(--color-main-background);
    border: 2px solid var(--color-tab-border);
    border-bottom: none;
    color: var(--color-tab);
  }

  .hover__reversal__04 {
    transition: background-color 0.12s 0.15s;
  }
  .hover__reversal__04:hover {
    background-color: var(--color-link-text-background-02);
  }

  /* bottom-borderの反転 */
  .hover__reversal_underline__blue:hover,
  .hover__reversal_underline__blue:hover
    .hover__reversal_underline__blue::after {
    border-bottom: 1px solid var(--color-text-background-blue);
  }

  /* 画像の切り替え */
  .hover__image-home:hover::after {
    opacity: 1;
  }

  /* 大きくする */
  .hover__zoom-up:hover,
  a:hover .hover__zoom-up {
    transform: scale(1.05);
  }

  .hover__zoom-up-02::before,
  .hover__zoom-up-02::after {
    transition: all 0.3s 0.15s;
  }
  .hover__zoom-up-02:hover::before,
  .hover__zoom-up-02:hover::after {
    transform: scale(1.142);
  }

  .hover__zoom-up-03 {
    transition: all 0.3s 0.15s;
  }
  a:hover .hover__zoom-up-03,
  button:hover .hover__zoom-up-03 {
    transform: scale(1.142);
  }

  /* カルーセルカードのホバー */
  a .hover__zoom-up-04 {
    transition: transform 0.5s 0.2s;
  }
  a:hover .hover__zoom-up-04 {
    transform: scale(1.015);
  }

  .hover__arrow__zoom-up {
    position: relative;
    transition-duration: 0.3s;
  }

  a:hover .hover__arrow__zoom-up::before,
  button:hover .hover__arrow__zoom-up::before {
    transform: scale(1.2);
  }

  a .hover__arrow__zoom-up::before,
  button .hover__arrow__zoom-up::before {
    background-color: var(--color-text-background-blue);
    border-radius: 50%;
    content: "";
    display: block;
    height: 100%;
    inset: 0;
    position: absolute;
    transition-duration: 0.3s;
    width: 100%;
  }

  .hover__arrow__zoom-up img {
    position: relative;
  }

  /* タブにボーダーをつける */
  .hover__add-border:hover {
    border: 2px solid var(--color-tab);
    border-bottom: none;
  }

  /* 文字の太さを太くする */
  .hover__font-weight__bold:hover {
    font-weight: bold;
  }
}

}
@layer components {
/* ===== box ===== */
.box__lead {
  background-color: #fffad0;
  border-radius: var(--border-radius-20);
  font-size: var(--font-size-18);
  font-weight: bold;
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  padding: 20px;
  @media (min-width: 640px) {
    padding: 20px 40px;
  }
}

.box__section {
  background-color: #faf6f4;
  border-radius: var(--border-radius-30);
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  padding: 20px;
  @media (min-width: 640px) {
    row-gap: 40px;
    padding: 50px;
  }
  > .box__section {
    background-color: #fff;
    row-gap: 10px;
    @media (min-width: 640px) {
      row-gap: 20px;
    }
    .heading-3 {
      border-bottom: 2px solid #f2f2f2;
      color: var(--color-black);
      font-size: var(--font-size-20);
      padding-block-end: 4px;
      @media (min-width: 640px) {
        font-size: var(--font-size-28);
      }
    }
    > .heading-3 {
      &:first-child {
        margin-block-start: -10px;
        @media (min-width: 640px) {
          margin-block-start: -30px;
        }
      }
    }
    .heading-4 {
    }
    .section {
      display: flex;
      flex-direction: column;
      row-gap: 4px;
      font-size: var(--font-size-14);
      @media (min-width: 640px) {
        font-size: var(--font-size-16);
      }
    }
  }
  &.-outset-header {
    margin-block-start: 22px;
    @media (min-width: 640px) {
      margin-block-start: 28px;
    }
    .heading-2 {
      align-self: center;
      margin-block-start: -42px;
      @media (min-width: 640px) {
        margin-block-start: -78px;
      }
      &.-pill {
        justify-content: center;
        min-width: min(400px, 100%);
        .label {
          justify-self: start;
        }
      }
      + .box__section {
        margin-block-start: 0;
        @media (min-width: 640px) {
          margin-block-start: -20px;
        }
      }
    }
  }
}

.box__experience {
  text-align: center;
}
.box__experience::before {
  background-image: url("/shared/images/top/icon/icon_decoration__01.svg");
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 22px;
  margin: 0 auto 10px;
  width: 57px;
}

/* ===== heading ===== */
.heading {
  align-items: center;
  display: flex;
}
.heading > * + * {
  font-size: var(--font-size-20);
  margin-left: 16px;
  color: var(--color-black);
}
@media (min-width: 640px) {
.heading > * + * {
    font-size: var(--font-size-24);
    margin-left: 1em
}
  }
.heading--icon {
  border-radius: 50%;
  min-width: 30px;
  min-height: 30px;
}
.heading--main-color {
  color: var(--color-main);
  font-size: var(--font-size-22);
}
@media (min-width: 640px) {
  .heading--main-color {
    font-size: var(--font-size-32);
  }
}

.heading-1 {
  color: var(--color-black);
  line-height: 1.5;
  font-size: var(--font-size-26);
  margin-block: 4px 10px;
  @media (min-width: 640px) {
    font-size: var(--font-size-36);
    margin-block: 6px 10px;
  }
}

.heading-2 {
  color: var(--color-main);
  font-weight: bold;
  font-size: var(--font-size-24);
  @media (min-width: 640px) {
    font-size: var(--font-size-32);
  }
  &.-pill {
    background-color: #ca2420;
    border-radius: 22px;
    color: #fff;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: var(--font-size-20);
    padding: 6px 15px 8px;
    @media (min-width: 640px) {
      border-radius: 28px;
      font-size: var(--font-size-28);
    }
    .label {
      border: 1px solid #fff;
      border-radius: var(--border-radius-pill);
      font-size: var(--font-size-14);
      line-height: 1;
      padding: 6px 12px 8px;
      @media (min-width: 640px) {
        font-size: var(--font-size-18);
      }
    }
  }
}

.heading-3 {
  color: var(--color-main);
  font-size: var(--font-size-20);
}

.heading-4 {
  color: var(--color-black);
  font-size: var(--font-size-18);
}

/* ===== category-description ===== */
.area-category-description-01 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  max-width: 1360px;
  margin-inline: auto;
}
@media (max-width: 639px) {
.area-category-description-01 {
    margin-top: 8px;
    margin-bottom: 20px;
    padding-inline: 20px
}
  }
@media (min-width: 640px) {
.area-category-description-01 {
    margin-top: 16px;
    margin-bottom: 40px;
    padding-inline: 40px
}
  }

.box-category-description-01 {
  display: grid;
}
@media (max-width: 639px) {
.box-category-description-01 {
    grid-template-columns: 64px 1fr;
    grid-template-rows: 22px auto auto;
    column-gap: 16px
}
  }
@media (min-width: 640px) {
.box-category-description-01 {
    column-gap: 25px;
    grid-template-columns: 100px 1fr;
    grid-template-rows: 18px auto auto
}
  }
.box-category-image-01 {
  display: inline-block;
}
@media (max-width: 639px) {
.box-category-image-01 {
    width: 64px;
    height: 64px;
    grid-column: 1 / 1;
    grid-row: 1 / 2
}
  }
@media (min-width: 640px) {
.box-category-image-01 {
    width: 100px;
    height: 100px;
    grid-column: 1 / 1;
    grid-row: 1 / 2
}
  }

/** 202512 あなたにおすすめのコンテンツ */
@media (max-width: 999px) {
  .box-category-description-01 {
    &:not(:has(.box-category-image-01)) {
      .category-title-01 {
        grid-column: 1 / 3
      }
    }
  }
}

.category-name-01 {
  color: var(--color-main);
  font-weight: bold;
}
@media (max-width: 639px) {
.category-name-01 {
    font-size: var(--font-size-14);
    grid-row: 1 / 1;
    grid-column: 2 / 2
}
  }
@media (min-width: 640px) {
.category-name-01 {
    font-size: var(--font-size-16);
    grid-row: 1 / 1;
    grid-column: 2 / 2
}
  }

.category-title-01 {
  color: var(--color-main);
  font-weight: bold;
}
@media (max-width: 639px) {
.category-title-01 {
  min-height: 50px;
    font-size: var(--font-size-26);
    grid-row: 2 / 2;
    grid-column: 2 / 2;
}
  }
@media (max-width: 400px) {
  .category-title-01 {
      font-size: var(--font-size-24);
      grid-row: 2 / 2;
      grid-column: 2 / 2;
  }
    }
@media (min-width: 640px) {
  .category-title-01 {
    min-height: 62px;
    font-size: var(--font-size-38);
    grid-row: 2 / 2;
    grid-column: 2 / 2;
  }
}

.category-description-01 {
  font-size: var(--font-size-14);
}
@media (max-width: 639px) {
.category-description-01 {
    grid-row: 3 / 3;
    grid-column: 1 / 3
}
  }
@media (min-width: 640px) {
.category-description-01 {
    grid-row: 3 / 3;
    grid-column: 2 / 2
}
  }

/* ===== post ===== */
.post {
  background-color: var(--color-white);
  border: solid 2px var(--color-main);
  border-radius: var(--border-radius);
  height: 100%;
}
.post__header {
  position: relative;
}
.post__tag-list {
  left: 20px;
  position: absolute;
  top: 10px;
}
.post__icon {
  border: solid 2px var(--color-main);
  border-radius: 50%;
  bottom: 20px;
  overflow: hidden;
  position: absolute;
  right: 16px;
}
.post__icon img {
  background: var(--color-white);
  height: var(--post-icon-area);
  padding: 12px;
  width: var(--post-icon-area);
}
.post__figure {
  border-bottom: solid 2px var(--color-main);
}
@media (min-width: 640px) {
  .post__figure {
    border-radius: 1.8rem 1.8rem 0 0;
    max-height: 180px;
    overflow: hidden;
    picture,
    img {
      aspect-ratio: 620 / 348;
    }
  }
}
.post__figure-image {
  border-radius: 1.8rem 1.8rem 0 0;
  max-height: 142px;
  object-fit: cover;
  width: 100%;
}
@media (min-width: 640px) {
.post__figure-image {
    max-height: 180px;
}
  }
.post__body {
  background: var(--color-white);
  border-radius: 0 0 1.8rem 1.8rem;
  padding: 0 2rem 1.6rem;
}
.experience .post__body {
    padding-bottom: 2.4rem;
  }
.post__body > * + * {
  margin-top: 1.1rem;
}
.post__title {
  color: var(--color-black);
  font-size: var(--font-size-18);
  padding: 1.6rem 2rem 0.9rem;
}
.post__description {
  font-size: var(--font-size-14);
  font-weight: 500;
  color: var(--color-black);
}
.post__link-list {
}
.post__link-items {
  padding-bottom: 0.8rem;
  padding-top: 0.8rem;
}
.post__link {
  color: var(--color-black);
  display: flex;
  font-size: var(--font-size-14);
}
.post__link > * + * {
  margin-left: 6px;
}

.post-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
}
.post-list__link {
    display: block;
    height: 100%;
  }
@media (min-width: 640px) {
  .post-list {
    flex-direction: row;
    justify-content: center;
  }

  .post-list > * + * {
    margin-left: 20px;
  }
}
@media (min-width: 1000px) {
  .post-list {
    gap: 28px;
  }
}
@media (min-width: 640px) {
  .post-list__items {
    flex: 1;
    max-width: 446px;
  }
}

/* ===== section-card-list ===== */
.section-card-list-01 {
  @media (max-width: 639px) {
    display: flex;
    gap: 16px;
    margin-top: 40px;
    flex-direction: column;
  }
  @media (min-width: 640px) {
    gap: 24px;
    margin-top: 40px;
    display: grid;
  }
  @media (min-width: 640px) and (max-width: 799px) {
    grid-template-columns: 1fr;
  }
  @media (min-width: 800px) and (max-width: 1199px) {
    grid-template-columns: 1fr 1fr;
  }
  @media (min-width: 1200px) {
    grid-template-columns: 1fr 1fr 1fr;
    &.-div-2 {
      grid-template-columns: 1fr 1fr;
    }
  }
  &.-border {
    .section-card-list-01__item {
      border: 1px solid var(--color-gray-lighter);
      border-radius: var(--border-radius-12);
    }
    .section-card-list-01__text-wrapper {
      padding-inline: 16px;
    }
    .section-card-list-01__image-wrapper {
      @media (max-width: 799px) {
        margin-block-start: 24px;
        margin-inline: 16px;
      }
    }
  }
}
.section-card-list-01__item {
  @media (max-width: 639px) {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-gray-lighter);
  }
  @media (min-width: 640px) {
    background-color: var(--color-white);
    border-radius: var(--border-radius-12);
  }
}
.section-card-list-01__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  @media (min-width: 640px) {
    padding-bottom: 24px;
  }
  @media (min-width: 640px) and (max-width: 799px) {
    flex-direction: row;
  }
}
.section-card-list-01__text-wrapper {
  order: 2;
  @media (max-width: 639px) {
    margin-top: 16px;
  }
  @media (min-width: 640px) {
    margin-top: 24px;
    padding-inline: 16px;
  }
  @media (min-width: 640px) and (max-width: 799px) {
    display: flex;
    flex-direction: column;
    width: 60%;
  }
}
.section-card-list-01__title {
  color: var(--color-black);
  font-weight: bold;
  @media (max-width: 639px) {
    font-size: var(--font-size-16);
  }
  @media (min-width: 640px) {
    font-size: var(--font-size-18);
  }
}
.section-card-list-01__paragraph {
  color: var(--color-black);
  font-size: var(--font-size-14);
  line-height: 1.714;
  @media (max-width: 639px) {
    margin-top: 12px;
  }
  @media (min-width: 640px) {
    margin-top: 16px;
  }
  @media (min-width: 640px) and (max-width: 799px) {
    flex-grow: 1;
  }
}
.section-card-list-01__label {
  font-size: var(--font-size-14);
  color: var(--color-text-link-02);
  font-weight: 500;
  margin-top: 8px;
  display: block;
  text-align: right;
}
.section-card-list-01__image-wrapper {
  order: 1;
  @media (min-width: 640px) {
    margin-inline: 16px;
    margin-top: 16px;
    overflow: hidden;
  }
  @media (min-width: 640px) and (max-width: 799px) {
    width: 40%;
    margin-top: 24px;
  }
}
.section-card-list-01__image {
  width: 100%;
  object-fit: contain;
  height: max-content;
}

/* ===== section-movie-manga ===== */
.section-movie-01 {
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
}
@media (max-width: 639px) {
.section-movie-01 {
    margin-top: 64px
}
  }
@media (min-width: 640px) {
.section-movie-01 {
    margin-top: 100px
}
  }
.section-manga-01 {
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
}
@media (max-width: 639px) {
.section-manga-01 {
    margin-top: 64px
}
  }
@media (min-width: 640px) {
.section-manga-01 {
    margin-top: 122px
}
  }
.section-manga-01__title {
    font-weight: bold;
    color: var(--color-black);
  }
@media (max-width: 639px) {
.section-manga-01__title {
      font-size: var(--font-size-20);
      margin-top: 24px;
      line-height: 1.45
  }
    }
@media (min-width: 640px) {
.section-manga-01__title {
      font-size: var(--font-size-24);
      margin-top: 32px;
      line-height: 1.666
  }
    }
.section-manga-01__paragraph {
    margin-top: 16px;
    color: var(--color-black);
  }
@media (max-width: 639px) {
.section-manga-01__paragraph {
      font-size: var(--font-size-14);
      line-height: 1.857
  }
    }
@media (min-width: 640px) {
.section-manga-01__paragraph {
      font-size: var(--font-size-16);
      line-height: 1.75
  }
    }

/* ===== section-column ===== */
/* .section-column-01 */
.section-column-01-wrapper {
  max-width: 1200px;
  width: 100%;
  margin-block-start: 50px;
  margin-inline: auto;
  @media (max-width: 639px) {
    margin-block-end: 4rem;
  }
}

.section-column-01 {
}

.section-column-01__hero {
  display: flex;
  justify-content: center;
  > img {
    max-width: 100%;
    height: auto;
  }
}

.section-column-01__box-summary {
  background-color: var(--color-main-background);
  border-radius: var(--border-radius-24);
  padding: 24px 16px;
  @media (min-width: 640px) {
    padding: 40px;
  }
  &:is(dl) {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
  }
  > dt {
    font-weight: bold;
  }
  ol {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    font-weight: bold;
  }
}

.section-column-01__contents {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  @media (min-width: 640px) {
    row-gap: 30px;
  }
  .-attach {
    margin-block-start: -16px;
    @media (min-width: 640px) {
      margin-block-start: -20px;
    }
  }
  + .section-column-01__contents {
    margin-block-start: 40px;
    @media (min-width: 640px) {
      margin-block-start: 70px;
    }
  }
}

.section-column-01__title {
  color: var(--color-black);
  font-weight: bold;
  &:is(hgroup),
  &:is(h2) {
    &:not(:first-child) {
      margin-block-start: 40px;
      @media (min-width: 640px) {
        margin-block-start: 48px;
      }
    }
  }
  &:is(hgroup) {
    > p {
      font-size: var(--font-size-16);
      @media (min-width: 640px) {
        font-size: var(--font-size-22);
      }
    }
  }
  &:is(h2),
  > h2 {
    font-size: var(--font-size-24);
    @media (min-width: 640px) {
      font-size: var(--font-size-32);
    }
  }
  &:is(h3) {
    margin-block-start: 16px;
    font-size: var(--font-size-18);
    @media (min-width: 640px) {
      font-size: var(--font-size-20);
      margin-block-start: 32px;
    }
  }
}

.section-column-01__box-lead {
}

.section-column-01__paragraph {
  color: var(--color-black);
  font-size: var(--font-size-16);
  @media (min-width: 640px) {
    font-size: var(--font-size-18);
  }
}

.section-column-01__block-image {
  img {
    max-width: 100%;
    height: auto;
  }
}

.section-column-01__lst-image {
  --row-gap: 10px;
  --column-gap: 10px;
  --cols: 1;
  @media (min-width: 640px) {
    --column-gap: 15px;
    --cols: 2;
  }
  @media (min-width: 1000px) {
    --cols: 4;
  }
  &:has(.dev-2) {
    --row-gap: 20px;
    @media (min-width: 640px) {
      --cols: 2;
    }
  }
  &:has(.row-gap-50) {
    --row-gap: 50px;
  }
  &:has(.column-gap-15) {
    --column-gap: 15px;
  }
  > ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--row-gap) var(--column-gap);
    > li {
      &:not(:has(figure)),
      & figure img {
        border-radius: 10px;
      }
      flex-basis: calc((100% - var(--column-gap) * (var(--cols) - 1)) / var(--cols));
      overflow: hidden;
      img {
        width: 100%;
        height: auto;
        @media (min-width: 640px) {
          max-width: 100%;
        }
      }
      > figure {
        display: flex;
        align-items: center;
        flex-direction: column;
        row-gap: 8px;
        > figcaption {
          font-size: var(--font-size-14);
        }
        &.w-80 {
          img {
            width: 100%;
            max-width: 360px;
          }
          figcaption {
            max-width: 80%;
          }
        }
      }
    }
  }
}

/* spacer */
.section-column-01__hero + .section-column-01__box-summary {
  margin-block-start: 40px;
  @media (min-width: 1000px) {
    margin-block-start: 100px;
  }
}

.section-column-01__box-summary,
.section-column-01__box-lead {
  + .section-column-01__contents {
    margin-block-start: 32px;
    @media (min-width: 640px) {
      margin-block-start: 60px;
    }
  }
  .section-column-01__paragraph + & {
    margin-block-start: 16px;
    @media (min-width: 640px) {
      margin-block-start: 24px;
    }
  }
}

.section-column-01__lst-image + .section-column-01__lst-image {
  @media (min-width: 640px) {
    margin-block-start: 8px;
  }
}

/* ===== block-image ===== */
.block-image {
  display: flex;
  gap: 8px 16px;
  @media (max-width: 999px) {
    align-items: center;
    flex-direction: column;
  }
  > * {
    flex-grow: 0;
    flex-shrink: 1;
    min-width: 0;
    @media (max-width: 999px) {
      max-width: 100%;
    }
  }
  > figure {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    row-gap: 14px;
    margin-block-start: 14px;
    > div {
      display: flex;
      flex-wrap: wrap;
      gap: 15px 30px;
    }
    .-attach {
      margin-top: -10px;
    }
  }
  &.-inline {
    display: inline-flex;
  }
}

/* ===== link-rounded-corners ===== */
.link-rounded-corners-01-wrapper {
  text-align: center;
}
@media (max-width: 639px) {
.link-rounded-corners-01-wrapper {
    margin-top: 16px
}
  }
@media (min-width: 640px) {
.link-rounded-corners-01-wrapper {
    margin-top: 32px
}
  }
.link-rounded-corners-01 {
  border-radius: 500px;
  font-weight: bold;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.link-rounded-corners-01.-white {
    background-color: var(--color-white);
    border: 2px solid var(--color-link-border-01);
    font-size: var(--font-size-16);
    color: var(--color-black);
    width: 100%;
    height: 48px;
  }
.link-rounded-corners-01.-blue {
  }
.link-rounded-corners-01.-light-orange {
    background-color: var(--color-base-background);
    font-size: var(--font-size-16);
    color: var(--color-main);
    width: 300px;
    height: 48px;
  }
.link-rounded-corners-01 {
  position: relative;
}
/* iconの設定 */
.link-rounded-corners-01::after {
    content: "";
    width: 28px;
    height: 28px;
    display: block;
    inset-block: auto;
    position: absolute;
    right: 10px;
    background-repeat: no-repeat;
  }
.link-rounded-corners-01.-arrow-right-upper-red::after {
    background-image: url(/shared/images/icon/icon_arrow_right_upper_red_01.svg);
  }
.link-rounded-corners-01.-arrow-right-upper-blue::after {
    background-image: url(/shared/images/icon/icon_arrow_right_upper_blue_01.svg);
  }
.link-rounded-corners-01.-new-window::after {
    background-image: url(/shared/images/icon/icon_new_window_white_circle_red.svg);
  }

/* ===== list-rounded-corners ===== */
/* list-rounded-corners-01 */
.list-rounded-corners-01 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
@media (max-width: 370px) {
.list-rounded-corners-01 {
    padding-inline: 12px
}
  }
@media (min-width: 380px) and (max-width: 639px) {
.list-rounded-corners-01 {
    padding-inline: 25px
}
  }
@media (max-width: 779px) {
.list-rounded-corners-01__item.-four {
        width: 100%
    }
      }
@media (min-width: 780px) and (max-width: 1359px) {
.list-rounded-corners-01__item.-four {
        width: calc(50% - 8px)
    }
      }
@media (min-width: 1360px) {
.list-rounded-corners-01__item.-four {
        width: calc(25% - 12px)
    }
      }
.list-rounded-corners-01__link {
    border-radius: 500px;
    font-weight: bold;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
.list-rounded-corners-01__link.-white {
      background-color: var(--color-white);
      border: 2px solid var(--color-link-border-01);
      font-size: var(--font-size-16);
      color: var(--color-black);
      width: 100%;
      height: 48px;
    }
@media (max-width: 360px) {
.list-rounded-corners-01__link.-blue {
        font-size: var(--font-size-14)
    }
      }
.list-rounded-corners-01__link.-blue {
      background-color: var(--color-text-background-blue);
      font-size: var(--font-size-17);
      color: var(--color-white);
      width: 100%;
      height: 48px;
}
.list-rounded-corners-01__link.-blue:not([href]) {
        background-color: var(--color-link-disabled-01);
      }
.list-rounded-corners-01__link.-blue:not([href]):hover::after {
          transform: scale(1);
        }
.list-rounded-corners-01__link.-blue:not([href])::after {
          background-image: url(/shared/images/icon/icon_arrow_right_upper_white_01.svg);
        }
.list-rounded-corners-01__link.-white:not([href]) {
        background-color: var(--color-link-disabled-01);
        color: var(--color-white);
      }
.list-rounded-corners-01__link.-white:not([href]):hover::after {
        transform: scale(1);
      }
.list-rounded-corners-01__link.-white:not([href])::after {
        background-image: url(/shared/images/icon/icon_arrow_right_upper_white_01.svg);
      }
.list-rounded-corners-01__link.-open:not([href])::after {
        background-image: url(/shared/images/icon/icon_new_window_gray_circle_white.svg);
      }

.list-rounded-corners-01__link.-light-orange {
      background-color: var(--color-base-background);
      font-size: var(--font-size-16);
      color: var(--color-main);
      width: 300px;
      height: 48px;
    }
@media (min-width: 1360px) {
      .list-rounded-corners-01__link.-pd-left {
        justify-content: flex-start;
        padding-left: 26px;
      }
    }
.list-rounded-corners-01__link {
    position: relative;
}
/* iconの設定 */
.list-rounded-corners-01__link::after {
      content: "";
      width: 28px;
      height: 28px;
      display: block;
      inset-block: auto;
      position: absolute;
      right: 10px;
      background-repeat: no-repeat;
    }
.list-rounded-corners-01__link.-arrow-right-upper-red::after {
      background-image: url(/shared/images/icon/icon_arrow_right_upper_red_01.svg);
    }
.list-rounded-corners-01__link.-arrow-right-upper-blue::after {
      background-image: url(/shared/images/icon/icon_arrow_right_upper_white_02.svg);
    }
.list-rounded-corners-01__link.-new-window-red::after {
      background-image: url(/shared/images/icon/icon_new_window_white_circle_red.svg);
    }
.list-rounded-corners-01__link.-new-window-blue::after {
      background-image: url(/shared/images/icon/icon_new_window_blue_circle_white.svg);
    }
@media (max-width: 360px) {
.list-rounded-corners-01__label-small {
      font-size: 80%;
  }
    }
.list-rounded-corners-01__label-small {
    color: var(--color-white);
    font-size: var(--font-size-15);
    font-weight: bold;
    padding-top: 3px;
}

/* ===== link-list-wrapper ===== */
.link-list-wrapper-01 {
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
}
@media (max-width: 639px) {
.link-list-wrapper-01 {
    margin-top: 40px
}
  }
@media (min-width: 640px) {
.link-list-wrapper-01 {
    margin-top: 64px
}
  }
@media (max-width: 639px) {
.link-list-wrapper-02 {
    margin-top: 24px
}
  }
@media (min-width: 640px) {
.link-list-wrapper-02 {
    margin-top: 40px
}
  }

/* ===== tag ===== */
.tag {
  background-color: var(--color-white);
  border: solid 1px var(--color-gray-lighter);
  border-radius: 4px;
  display: inline-block;
  font-feature-settings: "palt";
  font-size: var(--font-size-12);
  font-weight: bold;
  padding: 2px 6px;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 1.3;
}
@media (max-width: 375px) {
.tag {
    padding-inline: 2px
}
  }
@media (max-width: 999px) {
.tag {
    margin-inline: auto;
    margin-top: 4px
}
  }
.tag--red {
  color: var(--color-red);
}
.tag--blue-01 {
  color: var(--color-blue);
}
.tag--blue-02 {
  color: var(--color-blue-lighter);
}
.tag--green {
  color: var(--color-green);
}
.tag--orange {
  color: var(--color-orange);
}
.tag--undefined {
  display: none;
}

/* ===== breadcrumbs ===== */
.article-breadcrumbs {
  display: flex;
  align-items: center;
  background-color: transparent;
  color: var(--color-gray);
}
.breadcrumbs-wrapper .article-breadcrumbs {
  padding-top: 17px;
  padding-left: 40px;
  max-width: 1360px;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .breadcrumbs-wrapper .article-breadcrumbs {
    padding-top: 17px;
    padding-left: 80px;
    max-width: 1360px;
    margin-inline: auto;
  }
}
@media (max-width: 999px) {
.article-breadcrumbs {
    padding-top: 20px;
    padding-left: 20px;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
  }
@media (min-width: 1000px) {
.article-breadcrumbs {
    padding-top: 50px;
    padding-left: 0px;
}
  }
.article-breadcrumbs a {
    color: var(--color-text-link-01);
    font-size: var(--font-size-13);
    width: max-content;
  }
.article-breadcrumbs span {
    font-size: var(--font-size-13);
    font-weight: 500;
    width: max-content;
  }
@media (max-width: 999px) {
.article-breadcrumbs::-webkit-scrollbar {
    display: none;
}
  }
.article-breadcrumb-item {
  display: inline-flex;
}
.article-breadcrumb-item::after {
    content: "";
    background-image: url("/shared/images/icon/icon_arrow_right_gray_01.svg");
    width: 6px;
    height: 11.14px;
    margin: 5px 8px auto;
  }
.article-breadcrumb-item.-home {
    top: 3px;
  }
.article-breadcrumb-item.-home::after {
      margin: 2px 8px auto;
    }
.article-breadcrumb-item:last-child::after {
      background-image: none;
    }
.article-breadcrumbs .hover__image-home {
  position: relative;
  width: 16px;
  height: 14.4px;
  display: inline-block;
}
.hover__image-home::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 14.4px;
  background-image: url("/shared/images/icon/icon_home_orange_01.svg");
  position: absolute;
}
.hover__image-home::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 14.4px;
  background-image: url("/shared/images/icon/icon_home_red_01.svg");
  position: absolute;
  opacity: 0;
  transition: all 0.15s 0.15s;
}

/* ===== more-button ===== */
.show-more-button {
  background-color: var(--color-link-text-background-01);
  border-radius: 500px;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color-main);
  font-size: var(--font-size-16);
  font-weight: bold;
  padding-block: 13px;
  width: 300px;
  justify-content: center;
  position: relative;
  margin-inline: auto;
}
@media (max-width: 639px) {
.show-more-button {
    margin-top: 24px;
}
  }
@media (min-width: 640px) {
.show-more-button {
    margin-top: 32px;
}
  }
.show-more-button::after {
    content: "";
    width: 28px;
    height: 28px;
    display: block;
    inset-block: auto;
    position: absolute;
    right: 10px;
    background-image: url(/shared/images/icon/icon_plus_blue_01.svg);
  }
.show-more-button[data-visible="hidden"] {
    height: 0;
    padding-block: 0;
    margin-block: 0;
    content: none;
    line-height: 0;
    font-size: 0;
  }
.show-more-button[data-visible="hidden"]::after {
      content: none;
    }

/* ===== arrow ===== */
/* chapterにはない　*/
.arrow::before {
    content: "";
    background-image: url(/shared/images/top/icon/icon_arrow_red__01.svg);
    background-repeat: no-repeat;
    margin-right: 8.6px;
    display: inline-flex;
    width: 11.41px;
    background-size: 11.41px 9.5px;
    flex-shrink: 0;
  }
@media (max-width: 639px) {
.arrow::before {
      height: 9.5px;
  }
    }
@media (min-width: 640px) {
.arrow::before {
      height: 11.41px;
  }
    }
.link__text__orange-01 {
  color: var(--color-text-link-02);
}
@media (max-width: 639px) {
.link__text__orange-01 {
    font-size: var(--font-size-14);
}
  }
@media (min-width: 640px) {
.link__text__orange-01 {
    font-size: var(--font-size-16);
}
  }
.link__text__black-01 {
  color: var(--color-black);
  font-weight: 500;
}
@media (max-width: 639px) {
.link__text__black-01 {
    font-size: var(--font-size-14);
}
  }
@media (min-width: 640px) {
.link__text__black-01 {
    font-size: var(--font-size-16);
}
  }

/* ===== blank ===== */
/* 金融そもそも講座・いま聞きたいQ&Aの記事詳細のcontent内のblankとsearch_result.htmlに使用 */
.blank {
  margin-right: 24px;
  position: relative;
}
h2 > .blank {
    color: var(--color-main);
    margin-right: 8px;
  }
.blank::after {
    content: url("/shared/images/icon/icon_new_window_dark_orange_01.svg");
    height: 14px;
    margin-left: 4px;
    position: absolute;
    width: 14px;
  }
@media (max-width: 639px) {
.blank::after {
      bottom: 13px;
  }
    }
@media (min-width: 640px) {
.blank::after {
      bottom: 16px;
  }
    }
h2 > .blank::after {
      contain: content;
      position: unset;
    }
/* 記事の更新ページに使用 */
.blank-02 {
  margin-right: 24px;
  position: relative;
}
.blank-02::after {
    content: url("/shared/images/icon/icon_new_window_dark_orange_01.svg");
    height: 14px;
    margin-left: 4px;
    position: absolute;
    width: 14px;
  }
@media (max-width: 639px) {
.blank-02::after {
      bottom: 7px;
  }
    }
@media (min-width: 640px) {
.blank-02::after {
      bottom: 10px;
  }
    }

/* ===== keyword-area ===== */
/* .keyword-area */
.keyword-area {
  width: 100%;
  min-height: 40px;
  background-color: #FFF4E8;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 7px 0;
  .keyword-value {
    height: 26px;
    display: flex;
    align-items: center;
    border-radius: 16px;
    color: var(--color-white);
    font-size: var(--font-size-12);
    font-weight: bold;
    padding: 6px 14px 8px 12px;
    background-color: #736F6F;
    transition: background-color 0.12s 0.15s;
  }
  .keyword-value:hover {
    cursor: pointer;
    background-color: var(--color-link-text-background-02);
  }
  .keyword-value::before {
    background-image: url(/shared/images/icon/icon_search_white_01.svg);
    background-repeat: no-repeat;
    content: '';
    display: inline-flex;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    background-size: 12px 12px;
  }
}
.keyword-area:not(:has(*)) {
  display: none;
}

@media (min-width: 1000px) {
  .keyword-area {
    min-height: 60px;
    background-color: var(--color-base-background);
    padding: 14px 0;
    .keyword-value {
      font-size: var(--font-size-16);
      height: 32px;
    }
    .keyword-value::before {
      background-image: url(/shared/images/icon/icon_search_white_01.svg);
      background-repeat: no-repeat;
      content: '';
      display: inline-flex;
      width: 16px;
      height: 16px;
      margin-right: 8px;
      background-size: 16px 16px;
    }
  }
}
/* ===== modal ===== */
/* オーバーレイ */
.overlay {
  /* 位置を固定 */
  position: fixed;
  top: 0;
  left: 0;
  /* 画面いっぱいに広がるようにする */
  width: 100%;
  height: 100vh;
  /* rgbaを使って60%の黒いオーバーレイにする */
  background: rgba(0, 0, 0, 0.6);
  /* デフォルトでは見えないようにする */
  opacity: 0;
  visibility: hidden;
  /* 表示する際の変化の所要時間 */
  transition: 0.3s;
}
/* activeクラスのついたオーバーレイ */
.overlay {
  /* activeクラスがついたときにオーバーレイを表示する */
  opacity: 1;
  visibility: visible;
  z-index: 10;
}
/* モーダルウィンドウ */
.modal {
  /* 位置の調整(真ん中に表示) */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* デフォルトでは非表示にしておく */
  opacity: 0;
  visibility: hidden;
  /* 表示の変化にかかる時間 */
  transition: 0.3s;

  max-width: 900px;
  width: 100%;
  padding-inline: 20px;
}
/* activeクラスのついたモーダルウィンドウ */
.modal[open] {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}
/* モーダルウィンドウ内の閉じるボタン */
.modal .close {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  font-size: 20px;
}
dialog {
  background: transparent;
  border: none;
  padding: 0;
  text-align: center;
  margin: auto;
}
.sl-movie__iframe-wrapper {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
  background: #000;
  position: relative;
}
.sl-movie__iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  background: #000;
}
.sl-movie__button-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-black-02);
  border: none;
  border-radius: 50%;
  height: 24px;
  position: relative;
  right: 0;
  top: -5px;
  width: 24px;
  margin-left: auto;
  border: solid 2px var(--color-white);
}
.sl-movie__button-close__image {
  }

/* 画像拡大モーダル */
.modal-image__close-button {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  margin-left: auto;
}
.modal-image__close-button::before {
  aspect-ratio: 1;
  content: "";
  display: block;
  width: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='1.5'%3E%3Cline x1='1' y1='1' x2='11' y2='11'/%3E%3Cline x1='11' y1='1' x2='1' y2='11'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.modal-image__img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  margin-inline: auto;
  margin-top: 8px;
}
.modal-image-trigger::after {
  aspect-ratio: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23a85118' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.4'%3E%3Ccircle cx='6.5' cy='6.5' r='5'/%3E%3Cline x1='6.5' y1='4' x2='6.5' y2='9'/%3E%3Cline x1='4' y1='6.5' x2='9' y2='6.5'/%3E%3Cline x1='10.5' y1='10.5' x2='15' y2='15'/%3E%3C/svg%3E");
  background-size: contain;
  content: "";
  display: inline-block;
  margin-inline-start: 0.5em;
  width: calc((14 / 16) * 1em);
  height: auto;
}

/* ===== accordion ===== */
.accordion > * + * {
  margin-top: 8px;
}
.accordion__button {
  color: var(--color-black);
  display: block;
  width: 100%;
}
.accordion__button[aria-selected="true"] {
  background-color: transparent;
  border: none;
  color: var(--color-black);
}
.accordion__button :last-child {
  margin-left: auto;
  margin-right: 2px;
  flex-shrink: 0;
}
.accordion__arrow-mark {
  background-image: url(/shared/images/top/icon/icon_triangle_arrow_bottom_blue_01.svg);
  content: "";
  height: 24px;
  width: 24px;
}

/* 漫画aside menu */
.accordion__button[aria-pressed="true"] .accordion__mark::before {
  transform: translate(50%, -50%) rotate(-45deg);
  content: "";
  height: 8px;
  left: 18%;
  position: absolute;
  top: 57%;
}
.accordion__panel[aria-hidden="true"] {
  /* max-height: 0; */
  overflow: hidden;
  margin-block: 0;
}
.accordion__panel[aria-hidden="true"] * {
    line-height: 0;
    height: 0;
    margin-block: 0;
    opacity: 0;
    padding-block: 0;
    visibility: hidden;
  }
.accordion__panel[aria-hidden="false"] {
  overflow: auto;

  /* max-height: 100vh; */
}
/* transition: max-height 2s linear; */
@media (max-width: 999px) {
.accordion__panel * {
      transition: opacity 0.1s linear 0.01s, padding-block 0.12s ease-out,
        margin-block 0.12s ease-out, line-height 0.01s ease-out,
        visibility 0.01s linear;
  }
    }
.accordion__panel#more-article-list * {
    transition: opacity 0.1s linear 0.01s, padding-block 0.12s ease-out,
      margin-block 0.12s ease-out, line-height 0.01s ease-out,
      visibility 0.01s linear;
  }
.accordion__panel::-webkit-scrollbar {
  display: none;
}
.accordion__button {
  background-color: transparent;
  border: none;
  display: flex;
  font-size: var(--font-size-16);
  padding: 0;
}
.accordion__button > * + * {
  margin-left: 8px;
}

/* ===== link-table-of-contents ===== */
/* .link-table-of-contents */
.link-table-of-contents-wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
@media (max-width: 999px) {
.link-table-of-contents-wrapper {
    margin-inline: auto;
    margin-top: 48px;
}
  }
@media (min-width: 1000px) {
.link-table-of-contents-wrapper {
    margin-inline: auto;
    margin-top: 64px;
}
  }
.link-table-of-contents-choices {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}
@media (max-width: 639px) {
.link-table-of-contents-choices {
    row-gap: 8px;
}
  }
.link-table-of-contents {
  background-color: var(--color-link-text-background-01);
  border-radius: 500px;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color-main);
  font-size: var(--font-size-16);
  font-weight: bold;
  padding: 12px 110px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 300px;
}
@media (max-width: 639px) {
.link-table-of-contents {
    padding-inline: 50px;
}
  }
.link-table-of-contents.-back-number {
  padding: 12px 34px 12px 54.48px;
}
.link-table-of-contents::before {
  content: "";
  width: 28px;
  height: 28px;
  display: block;
  inset-block: auto;
  position: absolute;
  left: 10px;
  background-image: url(/shared/images/icon/icon_arrow_left_blue_01.svg);
}
.link-table-of-contents-next {
  background-color: var(--color-link-text-background-01);
  border-radius: 500px;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color-main);
  font-size: var(--font-size-16);
  font-weight: bold;
  padding: 12px 110px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 300px;
}
@media (max-width: 639px) {
.link-table-of-contents-next {
    padding-inline: 50px;
}
  }
.link-table-of-contents-next::before {
  content: "";
  width: 28px;
  height: 28px;
  display: block;
  inset-block: auto;
  position: absolute;
  right: 10px;
  background-image: url(/shared/images/icon/icon_arrow_right_blue_01.svg);
}
.link-table-of-contents-wrapper ol {
  width: 100%;
}

/* ===== list ===== */
.list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  > li {
    img {
      vertical-align: top;
    }
  }
}

.list-data {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  > div {
    display: flex;
  }
  dt {
    flex-shrink: 0;
    &::after {
      content: '：';
    }
  }
  dd {
  }
  &.section-card-list-01__paragraph {
    row-gap: 0px;
  }
}

.list-definition {
  display: flex;
  flex-direction: column;
  row-gap: 18px;
  font-size: var(--font-size-14);
  @media (min-width: 640px) {
    font-size: var(--font-size-16);
    row-gap: 24px;
  }
  > div {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
  }
  dt {
    font-weight: 700;
  }
}

.list-note,
.marker-note {
  &:is(p),
  &:is(ul > li) {
    color: var(--color-gray);
    font-size: var(--font-size-13);
    line-height: 1.6;
    padding-left: 1em;
    text-indent: -1em;
    &::before {
      content: '※';
    }
  }
  &:is(ul) {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
  }
}

/* ===== header ===== */
.global-header {
  background-color: var(--color-base-background);
  height: var(--header-height);
  height: 100%;
  padding-top: 16px;
}

@media (min-width: 1000px) {
  .global-header {
    padding: 0;
  }
}

.global-header__credit {
  background-color: var(--color-main);
  display: grid;
  place-content: center;
  margin-block: -16px 16px;
  padding: 10px;
  @media (min-width: 1000px) {
    margin-block: 0;
  }
}

.global-header__inner {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-width: 1440px;
  padding: 0 var(--sp-space-padding);
  position: relative;
}

.wrapper:has(.keyword-value) .global-header__inner {
  padding: 0 var(--sp-space-padding) 15px;
}

@media (min-width: 1000px) {
  .global-header__inner,
  .wrapper:has(.keyword-value) .global-header__inner {
    padding: 16px 40px 24px;
  }
}
.global-header__menu-button {
  background-color: transparent;
  border: none;
  height: 36px;
  left: 20px;
  position: absolute;
  top: 16%;
  width: 36px;
}

@media (min-width: 1000px) {
  .global-header__menu-button {
    top: 32px;
    visibility: hidden;
  }
  .global-header__menu-button img {
    visibility: hidden;
  }
}
@media (max-width: 639px) {
  .global-header__logo {
    margin: auto;
  }
}
@media (max-width: 639px) {
  .global-header__logo img {
    height: 54px;
    width: 140px;
  }
}
@media (min-width: 1000px) {
  .global-header__logo img {
    height: 72px;
  }
}
.global-header__search-button {
  background-color: transparent;
  border: none;
  position: absolute;
  right: 20px;
  top: 28%;
  width: -moz-fit-content;
  width: fit-content;
}

.global-header__search-button[aria-pressed=true] {
  opacity: 0.5;
}

.global-header__search-button img {
  height: 100%;
  width: 100%;
}

.global-header__mobile-navigation {
  background-color: var(--color-base-background);
  height: 100vh;
  left: 0;
  -ms-overflow-style: none;
  overflow-y: scroll;
  padding-bottom: 48px;
  padding-top: 16px;
  position: fixed;
  scrollbar-width: none;
  top: 0;
  transition: all 0.3s linear;
  width: 100vw;
  z-index: var(--z-index-mobile-menu);
}

.global-header__mobile-navigation::-webkit-scrollbar {
  display: none;
}

.global-header__mobile-navigation[aria-hidden=false] {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 1000px) {
  .global-header__mobile-navigation[aria-hidden=false] {
    display: none;
  }
}

.global-header__mobile-navigation[aria-hidden=true] {
  opacity: 0;
  visibility: hidden;
}

@media (min-width: 1000px) {
  .global-header__mobile-navigation {
    visibility: hidden;
  }
}
.global-header__navigation {
  display: none;
}

@media (min-width: 1000px) {
  .global-header__navigation {
    background: var(--color-background-nav-belt);
    display: block;
    height: 60px;
    position: relative;
  }
  /*　top.jsエラー回避のため非表示で設置　*/
  .navigation__left-button,
  .navigation__right-button {
    display: none;
  }
  .global-header__navigation-list {
    display: flex;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    margin-inline: auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: 19px;
    white-space: nowrap;
    max-width: 1280px;
  }
  .global-header__navigation-list {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .global-header__navigation-list::-webkit-scrollbar {
    display: none;
  }
  .global-header__navigation-button,
  .global-header__navigation-link {
    align-items: center;
    background-color: transparent;
    border: none;
    color: var(--color-black);
    display: flex;
    font-size: var(--font-size-14);
    font-weight: bold;
    gap: 7px;
    padding-inline: 1rem;
  }
}
@media (min-width: 1000px) and (min-width: 640px) {
  .global-header__navigation-button,
  .global-header__navigation-link {
    font-size: var(--font-size-15);
  }
}
@media (min-width: 1000px) {
  .global-header__navigation-item:last-child .global-header__navigation-link {
    padding-right: 0;
  }
  .global-header__navigation-item {
    flex-basis: 20%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block: 13.5px;
  }
  .global-header__navigation-item[aria-current=true] {
    position: relative;
    overflow-x: hidden;
  }
  .global-header__navigation-item[aria-current=true] .global-header__navigation-link {
    color: var(--color-main);
  }
  .global-header__navigation-item[aria-current=true]::before {
    background-image: url(/shared/images/icon/icon_triangle_bottom_orange_01.svg);
    background-position-x: center;
    background-repeat: no-repeat;
    content: "";
    display: inline-flex;
    height: 8px;
    left: 20px;
    position: absolute;
    top: 0;
    width: 100%;
  }
}
.global-header__navigation-item:hover .sub-navigation__inner {
  display: block;
}

.global-header__navigation-item:hover .global-header__navigation-button {
  color: var(--color-main);
}

.global-header__navigation-item:hover .global-header__navigation-link {
  color: var(--color-main);
}

/* 202606 mobilenavi改修 */
.mobile-navigation__header {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}

.mobile-navigation__close-button {
  background-color: transparent;
  border: none;
  left: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.mobile-navigation__logo {
  height: 54px;
  width: 140px;
}

@media (min-width: 640px) {
  .mobile-navigation__logo {
    height: 70px;
    width: 180px;
  }
}

.mobile-navigation__search {
  background-color: #fff4e8;
  margin-block: 13px 20px;
  .search__inner {
    padding: 10px 40px;
  }
  .search__form {
    background-color: #fff;
    border-radius: 8px;
    align-items: center;
  }
  .search__input {
    color: var(--color-black);
    flex-grow: 1;
    font-size: 16px;
    line-height: 1;
    margin-inline-start: 0;
    padding: 13px 8px;
    width: auto;
    height: 42px;
    max-width: calc(100% - 42px);
    &::placeholder {
      color: #949494;
      opacity: 1;
    }
  }
  .search__button {
    aspect-ratio: 1;
    flex-shrink: 0;
    height: 42px;
  }
}


.mobile-navigation__list {
  padding-inline: 40px;
  & + & {
    padding-block-start: 0;
    .mobile-navigation__label {
      border-block-start: 1px solid #e3e1df;
      margin-block-start: 16px;
      padding-block-start: 16px;
    }
  }
}

dl.mobile-navigation__list {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}

.mobile-navigation__list li + li {
  margin-top: 24px;
}

.mobile-navigation__item {
  .accordion__header {
    margin-block: 0;
  }
}

.mobile-navigation__link {
  align-items: center;
  display: flex;
  position: relative;
}

.mobile-navigation__link::after {
  border-right: solid 2px var(--color-accent2);
  border-top: solid 2px var(--color-accent2);
  content: "";
  height: 10px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
}

.mobile-navigation__link > * + * {
  margin-left: 8px;
}

.mobile-navigation__text {
  color: var(--color-black);
  font-size: var(--font-size-16);
  font-weight: bold;
}

.mobile-sub-navigation__list {
  background-color: var(--color-white);
  border-radius: var(--border-radius-12);
  padding: 16px;
}
.mobile-sub-navigation__list .accordion__button {
  font-size: var(--font-size-14);
}
.mobile-sub-navigation__list .accordion__button .accordion__arrow-mark {
  margin-inline-end: -8px;
}
.mobile-sub-navigation__list .accordion__panel {
  margin-inline: -16px;
}
.mobile-sub-navigation__list .accordion__panel .mobile-sub-navigation__list {
  border-block-end: 1px solid #d9d9d9;
  border-radius: 0;
  padding-inline-start: 24px;
}

.mobile-sub-navigation__list > li + li {
  margin-top: 19px;
}

.mobile-sub-navigation__item {
  &:has(.mobile-sub-navigation__label) {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
  }
}

.mobile-sub-navigation__link {
  color: var(--color-black);
  display: block;
  font-size: var(--font-size-14);
  font-weight: 500;
  position: relative;
}

.mobile-sub-navigation__link::after {
  border-right: solid 1px var(--color-accent2);
  border-top: solid 1px var(--color-accent2);
  content: "";
  height: 7px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 7px;
}

.accordion__button[aria-pressed="true"] .accordion__arrow-mark {
  transform: rotate(180deg);
}

/* search / 検索フォーム */
.search {
  background-color: var(--color-main);
  opacity: 0.8;
  -ms-overflow-style: none;
  scrollbar-width: none;
  transition: max-height 0.2s linear;
}
.search::-webkit-scrollbar {
  display: none;
}
.search[aria-hidden="true"] {
  max-height: 0;
  overflow: hidden;
}
.search[aria-hidden="false"] {
  max-height: 112px;
  overflow: auto;
}
@media (min-width: 1000px) {
.search[aria-hidden="false"] {
    max-height: 120px;
}
  }
.search__inner {
  padding: 31px 20px 40px;
}
.search__form {
  border-bottom: 1px solid var(--color-white);
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  margin: 0 auto;
  max-width: 1280px;
}
.search__input {
  background-color: transparent;
  border: none;
  color: var(--color-white);
  margin-left: 1em;
  text-align: left;
  width: calc(100% - 50px);
}
@media (min-width: 640px) {
.search__input {
    font-size: var(--font-size-24);
    height: 50px;
}
  }
@media (max-width: 639px) {
.search__input {
    font-size: var(--font-size-16);
    height: 40px;
}
  }
.search__input::placeholder {
  color: var(--color-white);
  opacity: 0.7;
}
.search__button {
  align-items: center;
  background-color: transparent;
  border: none;
  display: flex;
  justify-content: center;
  padding: 0;
}
@media (min-width: 640px) {
.search__button {
    height: 50px;
}
  }
@media (max-width: 639px) {
.search__button {
    height: 40px;
}
  }

:root {
  --max-height-sub-navigation: 0;
  --opacity-sub-navigation: 0;
  --visibility-sub-navigation: hidden;
}

.sub-navigation {
  max-height: var(--max-height-sub-navigation);
  opacity: var(--opacity-sub-navigation);
  overflow: hidden;
  position: absolute;
  top: 60px;
  transition: opacity 0.2s linear, visibility 0.2s linear;
  visibility: var(--opacity-sub-navigation);
  white-space: normal;
  z-index: 10;
}

.sub-navigation[aria-hidden=true] {
  padding-top: 19px;
  top: 42px;
}

.sub-navigation[aria-hidden=false] {
  --opacity-sub-navigation: 1;
  --visibility-sub-navigation: visible;
  --max-height-sub-navigation: fit-content;
}

@media (min-width: 1000px) {
  .sub-navigation[aria-hidden=false] {
    z-index: 2;
  }
}
.sub-navigation__inner {
  background-color: #f9f9f9;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  /* min-width: 200px; */
  overflow: hidden;
}

.sub-navigation__item {
  position: relative;
}
.sub-navigation__item:last-of-type:has(.sub-sub-navigation__link)::after {
  top: calc(50% - 8px);
}
.sub-navigation__item:last-of-type:has(.sub-sub-navigation__link) .sub-sub-navigation__link {
  padding-block-end: 16px;
}

.sub-navigation__item::after {
  border-right: solid 1px var(--color-accent2);
  border-top: solid 1px var(--color-accent2);
  content: "";
  height: 8px;
  position: absolute;
  right: 20px;
  top: calc(50% - 4px);
  transform: rotate(45deg);
  width: 8px;
}

.sub-navigation__link {
  color: var(--color-black);
  display: block;
  font-size: var(--font-size-14);
  font-weight: bold;
  padding: 12px 16px;
  padding-right: 34px;
  z-index: 1;
}

.sub-navigation__link:hover {
  background-color: #f1f1f1;
}

.sub-sub-navigation__link {
  color: var(--color-black);
  display: block;
  font-size: var(--font-size-14);
  padding: 4px 34px 8px 26px;
}

.sub-sub-navigation__link:hover {
  background-color: #f1f1f1;
}

/* ===== footer ===== */
.global-footer {
  background-color: var(--color-main);
  border-top-left-radius: 20px;
  padding-inline: 20px;
}
.global-footer__inner {
  padding-top: 40px;
}
@media (min-width: 1000px) {
  .global-footer {
    border-top-left-radius: 80px;
    padding-inline: 60px;
  }

  .global-footer__inner {
    padding-top: 64px;
  }
}
.global-footer__banner__wrapper {
  background: var(--color-white);
  border-radius: var(--border-radius-12);
  margin-bottom: 45px;
  padding-inline: 20px;
}
.global-footer__banner__wrapper > * + * {
  border-top: 1px solid var(--color-gray-lighter);
}
@media (min-width: 640px) {
  .global-footer__banner__wrapper > * + * {
    width: calc(100% - 40px);
  }
}
.global-footer__banner {
  display: flex;
  justify-content: center;
  margin-inline: auto;
  padding: 24px 0 27px;
}
@media (min-width: 640px) {
  .global-footer__banner__wrapper {
    display: flex;
    padding: 40px 0;
  }

  .global-footer__banner {
    flex: 1;
    padding: 0 40px;
    max-width: 50%;
    margin-left: inherit;
  }

  .flex_footer-banner__center {
    align-items: center;
    display: flex;
  }

  .global-footer__banner__wrapper > * + * {
    border-left: 1px solid var(--color-gray-lighter);
    border-top: none;
  }
}
@media (min-width: 1000px) {
  .global-footer__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 auto;
    max-width: var(--max-width-container);
  }
}
.global-footer__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 38px;
}
@media (min-width: 1000px) {
  .global-footer__content {
    width: 65%;
  }

  .flex__large-frame {
    display: flex;
  }

  .global-footer__logo {
    justify-content: left;
    width: 35%;
  }

  .flex__medium-frame {
    align-items: center;
    border-bottom: 1px solid var(--color-footer-border);
    display: flex;
    justify-content: space-between;
    padding: 0 0 40px 15px;
  }
}
@media (min-width: 1000px) {
  .global-footer__logo img {
    height: 100px;
    width: 266px;
  }
}
.global-footer__description {
  color: var(--color-white);
  font-size: var(--font-size-13);
  font-weight: 500;
  margin-bottom: 35px;
  text-align: center;
}
@media (min-width: 1000px) {
  .global-footer__description {
    font-size: var(--font-size-16);
    padding-left: 15px;
    text-align: left;
  }
}
.global-footer__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}
@media (min-width: 640px) {
.global-footer__list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 20px;
}
  }
@media (min-width: 1000px) {
  .global-footer__list {
    column-gap: 40px;
    justify-content: start;
  }
}
.global-footer__item {
  font-size: var(--font-size-14);
  font-weight: 500;
}
.global-footer__link {
  color: var(--color-white);
}
@media (min-width: 640px) {
.global-footer__link {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
}
  }
.global-footer__navigation {
  padding-bottom: 40px;
  padding-top: 40px;
}
@media (min-width: 1000px) {
  .global-footer__navigation {
    padding-left: 15px;
  }
}
/* background調整 */
.experience + .footer-background {
  overflow: hidden;
  position: relative;
}
.experience + .footer-background::before {
    background: var(--color-background-light-red);
    clip-path: ellipse(600px 594px at center);
    content: "";
    height: 1194px;
    margin: auto;
    position: absolute;
    top: 0;
    top: -322px;
    width: 100%;
  }
.experience + .footer-background .global-footer {
    position: relative;
  }

.copy-right {
  color: var(--color-white);
  padding-bottom: 24px;
  text-align: center;
}
.copy-right small {
  font-size: 11px;
  font-weight: 500;
}
@media (min-width: 1000px) {
  .copy-right br {
    display: none;
  }
}

.navigation-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 25px;
}
@media (min-width: 1000px) {
  .navigation-list {
    gap: 20px 40px;
  }
}
.navigation-list__items {
  font-size: var(--font-size-14);
  font-weight: 500;
}
.navigation-list__link {
  align-items: center;
  color: var(--color-white);
  display: flex;
}
.navigation-list__link > .arrow {
  margin-right: 9px;
}

/* .icon_new-window */
.icon_new-windw {
  display: inline-block;
  height: 14px;
  align-items: center;
  margin-left: 8px;
  width: 14px;
}

/* .social-media-list */
.social-meia-list {
  display: flex;
  gap: 40px;
  justify-content: center;
}
.social-meia-list__items {
  padding: 14px 14px;
  border-radius: 5px;
  background-color: var(--color-white);
}
@media (max-width: 999px) {
  .social-meia-list {
    border-bottom: 1px solid var(--color-footer-border);
    padding: 45px 0 36px;
  }
}
@media (min-width: 1000px) {
  .social-meia-list {
    margin: 0 20px;
    gap: 12px;
  }
  .social-meia-list__items {
    flex-shrink: 0;
  }
  .social-meia-list__items img {
    height: 28px;
    width: 28px;
  }
}

/* ===== container ===== */
.container {
  background-color: var(--color-main-background);
  &.-transparent {
    background-color: transparent;
  }
  &.-two-color {
    background-color: var(--color-base-background);
    max-width: 100%;
    overflow: hidden;
    position: relative;
    @media (min-width: 640px) {
      display: flex;
      justify-content: center;
    }
    &::before {
      background: var(--color-background-light-red);
      bottom: 0;
      clip-path: circle(75% at 50% 122%);
      content: "";
      display: block;
      height: 100%;
      position: absolute;
      width: 100%;
      @media (min-width: 640px) {
        bottom: 0;

        /* clip-path: circle(54% at 50% 100%); */
        clip-path: ellipse(600px 594px at center);
        height: 1194px;
        margin: auto;
        top: 200%;

        /* width: 1200px; */
        width: 100%;
      }
    }
  }
  @media (min-width: 1000px) {
    margin-inline: auto;
    max-width: var(--max-width-container);
    &.-full-width {
      max-width: 100%;
    }
  }
}

.container--accent {
  background-color: var(--color-base-background);
}
@media (min-width: 1000px) {
  .container--max-width {
    margin: 0 auto;
    max-width: var(--max-width-container);
  }
}
.container--border-round {
  background-color: var(--color-white);
  border: solid 2px var(--color-main);
  border-radius: 20px;
  padding: 20px;
}
@media (min-width: 640px) {
  .container--border-round {
    padding: 48px 54px;
  }
}
.container__inner {
  @media (max-width: 639px) {
    padding-inline: var(--sp-space-padding);
  }
  @media (min-width: 640px) {
    padding-inline: 40px;
  }
  @media (min-width: 1000px) {
    .-full-width & {
      max-width: var(--max-width-container);
      margin-inline: auto;
    }
  }
}
.container__inner--colum {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media (min-width: 640px) {
  .container__inner--colum {
    align-items: center;
    column-gap: 180px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 50px;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
}
@media (min-width: 1000px) {
  .container__main-side__wrapper {
    display: flex;
    flex-wrap: wrap;
  }

  .container__side {
    flex-shrink: 0;
    width: 200px;
  }

  .container__main {
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .container__main-side__wrapper {
    flex-wrap: nowrap;
  }
}
@media (min-width: 1280px) {
  .container__main-side__wrapper {
    gap: 82px;
  }
}
.container--left-radius {
  background-color: var(--color-main-background);
  border-top-left-radius: 40px;
  padding-left: var(--sp-space-padding);
}
.container--left-radius.-transparent {
    background-color: var(--color-white);
  }
@media (min-width: 640px) {
  .container--left-radius {
    background-color: var(--color-main-background);
    border-top-left-radius: 80px;
  }
}
/* 記事一覧ページに使用 */
.container--left-radius-02 {
  background-color: var(--color-white);
}
@media (max-width: 639px) {
.container--left-radius-02 {
    border-top-left-radius: 40px;
}
  }
@media (min-width: 640px) {
.container--left-radius-02 {
    border-top-left-radius: 80px;
}
  }
.container__description {
  color: var(--color-black);
  font-size: var(--font-size-14);
}
@media (min-width: 640px) {
  .container__description {
    font-size: var(--font-size-18);
    padding-bottom: 8px;
    text-align: center;
  }
}
.container--no-right-padding {
  padding-right: 0;
}

@media (max-width: 639px) {
.container-wrapper {
    margin-top: 16px;
}
  }
@media (min-width: 640px) {
.container-wrapper {
    margin-top: 40px;
}
  }
.wrapper:has(.keyword-value) .container-wrapper {
  margin-top: 10px;
}
@media (min-width: 1000px) {
  .wrapper:has(.keyword-value) .container-wrapper {
    margin-top: 0px;
  }
}

/* ===== head ===== */
.-head {
  .container__inner {
    display: flex;
    justify-content: center;
    flex-direction: column;
    row-gap: 20px;
    @media (min-width: 640px) {
      align-items: center;
      flex-direction: row;
    }
  }
  .heading__text-wrapper {
    display: flex;
    flex-grow: 1;
    justify-content: center;
  }
  .heading__text {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    font-size: var(--font-size-16);
    @media (min-width: 640px) {
      font-size: var(--font-size-18);
    }
    .heading-1 {
      font-size: var(--font-size-38);
      font-weight: bold;
      @media (min-width: 640px) {
        font-size: var(--font-size-50);
      }
      &:has(small) {
        font-size: var(--font-size-30);
        @media (min-width: 640px) {
          font-size: var(--font-size-42);
        }
      }
      small {
        font-size: var(--font-size-20);
        @media (min-width: 640px) {
          font-size: var(--font-size-28);
        }
      }
    }
  }
  .heading__image {
    @media (min-width: 640px) {
      flex-basis: 40%;
    }
    img {
      aspect-ratio: 480/342;
      width: 100%;
      height: auto;
    }
  }
}

/* ===== classroom ===== */
/* classroomカテゴリ固有のスタイル(今後sl/somosomo等も同枠で追加予定) */

}
@layer utilities {
/* ===== utility ===== */
.text__bold {
  font-weight: bold;
}

/* margin-top */
.mt-xs {
  margin-top: 16px;
}
.mt-s {
  margin-top: 16px;
}
.mt-m {
  margin-top: 24px;
}
.mt-l {
  margin-top: 40px;
}
.mt-xl {
  margin-top: 48px;
}
.mt-xxl {
  margin-top: 64px;
}
@media (min-width: 640px) {
  .mt-xs {
    margin-top: 24px;
  }

  .mt-s {
    margin-top: 32px;
  }

  .mt-m {
    margin-top: 40px;
  }

  .mt-l {
    margin-top: 64px;
  }

  .mt-xl {
    margin-top: 64px;
  }

  .mt-xxl {
    margin-top: 100px;
  }
}
/* margin-bottom */
.mb-xs {
  margin-bottom: 16px;
}
.mb-s {
  margin-bottom: 16px;
}
.mb-m {
  margin-bottom: 24px;
}
.mb-l {
  margin-bottom: 40px;
}
.mb-xl {
  margin-bottom: 48px;
}
.mb-xxl {
  margin-bottom: 64px;
}
@media (min-width: 640px) {
  .mb-xs {
    margin-bottom: 24px;
  }

  .mb-s {
    margin-bottom: 32px;
  }

  .mb-m {
    margin-bottom: 40px;
  }

  .mb-l {
    margin-bottom: 64px;
  }

  .mb-xl {
    margin-bottom: 64px;
  }

  .mb-xxl {
    margin-bottom: 100px;
  }
}
/* padding-bottom */
.pt-xs {
  padding-top: 16px;
}
.pt-s {
  padding-top: 16px;
}
.pt-m {
  padding-top: 24px;
}
.pt-l {
  padding-top: 40px;
}
.pt-xl {
  padding-top: 48px;
}
.pt-xxl {
  padding-top: 64px;
}
@media (min-width: 640px) {
  .pt-xs {
    padding-top: 24px;
  }

  .pt-s {
    padding-top: 32px;
  }

  .pt-m {
    padding-top: 40px;
  }

  .pt-l {
    padding-top: 64px;
  }

  .pt-xl {
    padding-top: 64px;
  }

  .pt-xxl {
    padding-top: 100px;
  }
}
/* padding-botton */
.pb-xs {
  padding-bottom: 16px;
}
.pb-s {
  padding-bottom: 16px;
}
.pb-m {
  padding-bottom: 24px;
}
.pb-l {
  padding-bottom: 40px;
}
.pb-xl {
  padding-bottom: 48px;
}
.pb-xxl {
  padding-bottom: 64px;
}
@media (min-width: 640px) {
  .pb-xs {
    padding-bottom: 24px;
  }

  .pb-s {
    padding-bottom: 32px;
  }
  .pb-m {
    padding-bottom: 40px;
  }

  .pb-l {
    padding-bottom: 64px;
  }

  .pb-xl {
    padding-bottom: 64px;
  }

  .pb-xxl {
    padding-bottom: 100px;
  }
}
/* 個別 */
.pb-50 {
  padding-bottom: 50px;
}
@media (min-width: 640px) {
  .mr-20 {
    margin-right: 20px;
  }
}
/* デザインが8の倍数で幅を取るためmtの後の数値に8をかけた後がmargin-topの数となる */
.mt-0 {
  margin-top: 0;
}
.mt-1 {
  margin-top: 8px;
}
.mt-2 {
  margin-top: 16px;
}
.mt-3 {
  margin-top: 24px;
}
.mt-4 {
  margin-top: 32px;
}
.mt-5 {
  margin-top: 40px;
}
.mt-6 {
  margin-top: 48px;
}
.mt-7 {
  margin-top: 56px;
}
.mt-8 {
  margin-top: 64px;
}
@media (max-width: 639px) {
  .mt-0-sp {
    margin-top: 0;
  }
  .mt-1-sp {
    margin-top: 8px;
  }
  .mt-2-sp {
    margin-top: 16px;
  }
  .mt-3-sp {
    margin-top: 24px;
  }
  .mt-4-sp {
    margin-top: 32px;
  }
  .mt-5-sp {
    margin-top: 40px;
  }
  .mt-6-sp {
    margin-top: 48px;
  }
  .mt-7-sp {
    margin-top: 56px;
  }
  .mt-8-sp {
    margin-top: 64px;
  }
}
@media (min-width: 640px) and (max-width: 999) {
  .mt-0-tb {
    margin-top: 0;
  }
  .mt-1-tb {
    margin-top: 8px;
  }
  .mt-2-tb {
    margin-top: 16px;
  }
  .mt-3-tb {
    margin-top: 24px;
  }
  .mt-4-tb {
    margin-top: 32px;
  }
  .mt-5-tb {
    margin-top: 40px;
  }
  .mt-6-tb {
    margin-top: 48px;
  }
  .mt-7-tb {
    margin-top: 56px;
  }
  .mt-8-tb {
    margin-top: 64px;
  }
}
@media (min-width: 640px) {
  .mt-0-tb-pc {
    margin-top: 0;
  }
  .mt-1-tb-pc {
    margin-top: 8px;
  }
  .mt-2-tb-pc {
    margin-top: 16px;
  }
  .mt-3-tb-pc {
    margin-top: 24px;
  }
  .mt-4-tb-pc {
    margin-top: 32px;
  }
  .mt-5-tb-pc {
    margin-top: 40px;
  }
  .mt-6-tb-pc {
    margin-top: 48px;
  }
  .mt-7-tb-pc {
    margin-top: 56px;
  }
  .mt-8-tb-pc {
    margin-top: 64px;
  }
}
@media (min-width: 1000px) {
  .mt-0-pc {
    margin-top: 0;
  }
  .mt-1-pc {
    margin-top: 8px;
  }
  .mt-2-pc {
    margin-top: 16px;
  }
  .mt-3-pc {
    margin-top: 24px;
  }
  .mt-4-pc {
    margin-top: 32px;
  }
  .mt-5-pc {
    margin-top: 40px;
  }
  .mt-6-pc {
    margin-top: 48px;
  }
  .mt-7-pc {
    margin-top: 56px;
  }
  .mt-8-pc {
    margin-top: 64px;
  }
}
/* ネガティブマージン(上の要素に近づける) */
.mt-n1 {
  margin-top: -8px;
}
.mt-n2 {
  margin-top: -16px;
}
.mt-n3 {
  margin-top: -24px;
}
.mt-n4 {
  margin-top: -32px;
}
.mt-n5 {
  margin-top: -40px;
}
.mt-n6 {
  margin-top: -48px;
}
.mt-n7 {
  margin-top: -56px;
}
.mt-n8 {
  margin-top: -64px;
}

.ta-c {
  text-align: center;
}

.d-flex {
  display: flex;
}
.flex-grow {
  flex-grow: 1;
}
.flex-grow-0 {
  flex-grow: 0;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.flex-wrap {
  flex-wrap: wrap;
}
.align-items-center {
  align-items: center;
}
.aline-self-start {
  align-self: flex-start;
}
.aline-self-start-sp {
  @media (max-width: 639px) {
    align-self: flex-start;
  }
}
.aline-self-end {
  align-self: flex-end;
}
.aline-self-end-tb {
  @media (min-width: 640px) {
    align-self: flex-end;
  }
}
.aline-self-end-pc {
  @media (min-width: 1000px) {
    align-self: flex-end;
  }
}
.flex-column {
  flex-direction: column;
}
.flex-column-sp {
  @media (max-width: 639px) {
    flex-direction: column;
  }
}
.gap-1 {
  gap: 8px;
}
.gap-2 {
  gap: 16px;
}
.gap-3 {
  gap: 24px;
}
.gap-4 {
  gap: 32px;
}
.gap-5 {
  gap: 40px;
}
.gap-6 {
  gap: 48px;
}
.gap-7 {
  gap: 56px;
}
.gap-8 {
  gap: 64px;
}
.row-gap-1 {
  row-gap: 8px;
}
.row-gap-2 {
  row-gap: 16px;
}
.row-gap-3 {
  row-gap: 24px;
}
.row-gap-4 {
  row-gap: 32px;
}
.row-gap-5 {
  row-gap: 40px;
}
.row-gap-6 {
  row-gap: 48px;
}
.row-gap-7 {
  row-gap: 56px;
}
.row-gap-8 {
  row-gap: 64px;
}
.column-gap-1 {
  column-gap: 8px;
}
.column-gap-2 {
  column-gap: 16px;
}
.column-gap-3 {
  column-gap: 24px;
}
.column-gap-4 {
  column-gap: 32px;
}
.column-gap-5 {
  column-gap: 40px;
}
.column-gap-6 {
  column-gap: 48px;
}
.column-gap-7 {
  column-gap: 56px;
}
.column-gap-8 {
  column-gap: 64px;
}

@media (max-width: 639px) {
  .only-sp {
    display: inherit;
  }
}
@media (min-width: 640px) {
  .only-sp {
    display: none;
  }
}
@media (max-width: 999px) {
  .only-pc {
    display: none;
  }
}
@media (min-width: 1000px) {
  .only-sp-tablet {
    display: none;
  }
}
}