@charset "utf-8";
/* CSS Document */

/* =============================================
text-download
================================================ */

:root {
  --width: min(1400px, 100%);
  --size--base: 8px;
  --size--ss: calc(var(--size--base) + 4px ); /* 12px; */
  --size--s: calc(var(--size--base) * 1.75 ); /* 14px; */
  --size--m: calc(var(--size--base) * 2); /* 16px; */
  --size--l: calc(var(--size--base) * 3); /* 24px; */
  --size--2l: calc(var(--size--base) * 4); /* 32px; */
  --size--3l: calc(var(--size--base) * 5); /* 40px; */
  --size--4l: calc(var(--size--base) * 7); /* 56px; */
  --size--5l: calc(var(--size--base) * 10); /* 80px; */
  --color--bk-01: #222;
  --color--gry-01: #4e4e4e;
  --color--gry-02: #848484;
  --color--gry-03: #d8d8d8;
  --color--gry-04: #f9f9f9;
  --color--rd-01: #ff585f;
  --color--bl-01: #0052af;
  --color--or-01: #ef8a5c;
  --color--grn-01: #19bb85;
  --color--adults: #1397e3;
  --color--kids: #ff9205;
}
html, body {
  min-width: auto !important;
}
body {
  overflow-y: scroll;
  position: relative;
  line-height: 1.75;
  font-size: var(--size--m);
  background: var(--color--gry-04);
}
h1, h2, h3, h4,
p, figure,
ul, ol, li,
dl, dt, dd {
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4 {
  line-height: 1.28;
}
img {
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
}
ul, ol, li {
  list-style: none;
}
.fa-solid {
  display: inline-block;
}

.u-dp--b {
  display: block;
}
.u-dp--ib {
  display: inline-block;
}
.u-fs--s {
  font-size: 85%;
}
.u-ta--c {
  text-align: center;
}
.u-list--dot li,
.u-list--dot--l li {
  margin-left: 1.5em;
}
.u-list--dot li {
  list-style: disc;
}
.u-list--dot--l li::before {
  content: "●";
  display: inline-block;
  margin-left: -1.5em;
}
*[class*="u-icon--"] {
  position: relative;
  padding-left: 1.5rem;
  &::before {
    position: absolute;
    top: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    font-family: "Font Awesome 7 Free";
    text-align: center;
    transform: translateY(-50%);
  }
}
.u-icon--point::before {
  content: "\50";
  left: 0;
  color: #fff;
  font-size: 0.75em;
  background: var(--color--bl-01);
  border-radius: 50%;
}
.u-icon--print::before {
  content: "\f02d";
  left: 0.25em;
  font-weight: 900;
}

.fa-solid,
.fa-regular {
  display: inline-block;
  width: 1em;
  text-align: center;
}

.--point {
  font-size: inherit;
}

.m-link__pagetop {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  color: #fff !important;
  border-radius: 50%;
  background: var(--color--gry-01);
  z-index: 100;
  &.is-fixed {
    position: fixed;
  }
}
.m-button {
  display: block;
  width: fit-content;
  text-align: center;
  color: #fff !important;
  padding: var(--size--base) var(--size--s);
  border: none;
  outline: none;
  border-radius: calc(var(--size--base) / 2);
  &:not(.all) {
    margin-top: var(--size--s);
  }
  &.all {
    margin-left: var(--size--s);
    line-height: 1;
    font-size: var(--size--s);
    background: var(--color--gry-02);
  }
}

.sub-nav__list i {
  display: inline-block;
  margin-left: 0.25em;
}

body.offline-textdownload .is-hidden--offline {
  display: none;
}

/* header / footer
====================================================*/
.l-header,
.l-footer {
  background: var(--color--gry-01);
  & a, & img {
    display: block;
  }
  & .logo {
    width: fit-content;
    & a, & img {
      height: 100%;
    }
    &.header__logo {
      height: 1.8rem;
    }
    &.footer__logo {
      height: 1.4rem;
    }
  }
}
.l-header {
  padding: var(--size--base) var(--size--m);
}
.l-footer {
  padding: 1rem;
  font-size: var(--size--ss);
  & .footer-nav__link,
  & .footer__copyright {
    color: #fff !important;
  }
  & .footer-nav__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0 0 0 -1em;
    padding: 0;
    line-height: 1.2;
    & .footer-nav__item + .footer-nav__item {
      border-left: 1px solid rgba(255, 255, 255, 0.2);
    }
    & .footer-nav__link {
      display: inline-block;
      padding: 0 1em;
    } 
  }
  & .footer__copyright {
    padding: 0;
    font-size: inherit;
    & .footer__logo {
      margin-right: 1em;
    }
  }
}

/* main
====================================================*/
main {
  position: relative;
}
.l-sub {
  font-size: var(--size--s);
}
.l-title__wrap {
  display: flex;
  align-items: center;
  margin-bottom: var(--size--l);
  & .m-title--m {
    margin-bottom: 0;
  }
}
.m-title--s,
.m-title--m,
.m-title--l {
  color: var(--color--bk-01);
  font-weight: 700;
}
.m-title--s {
  margin-bottom: var(--size--m);
  font-size: var(--size--m);
}
.m-title--m {
  margin-bottom: var(--size--l);
  font-size: var(--size--l);
}
.m-title--l {
  margin-bottom: var(--size--l);
  font-size: var(--size--2l);
}
.m-link {
  &:link, &:visited {
    color: var(--color--bl-01);
    text-decoration: underline;
  }
}
.m-text--intro {
  margin-bottom: var(--size--3l);
}

/* switch 表示切り替え
====================================================*/
.m-switch__wrap {
  & .switch__link {
    position: relative;
    display: block;
    margin-top: calc(var(--size--s) / 2);
    line-height: 1.4;
    color: var(--color--gry-02);
    font-weight: 700;
    border: none;
    background: var(--color--gry-03);
    outline: none;
    transition: background-color 0.2s, color 0.2s;
    opacity: 1 !important;
    border-radius: 0.5rem;
    &:hover,
    &.is-active {
      color: #fff;
      &.adults {
        background: var(--color--adults);
      }
      &.kids {
        background: var(--color--kids);
      }
      &.group {
        background: var(--color--grn-01);
      }
    }
    &.is-active {
      pointer-events: none;
    }
    & span {
      display: block;
      font-size: var(--size--ss);
      font-weight: 500;
    }
  }
}

/* search
====================================================*/
.l-section--search {
  margin: var(--size--l) 0;
  & .search-area {
    background: #fff;
    & .search-area__inner {
      padding: var(--size--m);
      & .search-list__name {
        margin-bottom: calc(var(--size--base) / 2);
        font-weight: 700;
      }
      & .search-list__data {
        margin-bottom: var(--size--s);
      }
      & label {
        width: fit-content;
        cursor: pointer;
        &.u-dp--ib {
          margin-right: 1em;
        }
        & input[type="radio"] {
          position: relative;
          top: 0.1em;
          display: inline-block;
          margin-right: 0.25em;
        }
      }
      & .range-wrapper {
        padding: 0.5em 1em 3em;
        & .noUi-connect {
          background: var(--color--bl-01);
        }
        & .noUi-target.noUi-horizontal {
          height: calc(var(--size--base) / 2);
          border: none;
          box-shadow: none;
          background: var(--color--gry-03);
        }
        & .noUi-handle {
          top: -0.6em;
          right: -0.75em;
          width: 1.5em;
          height: 1.5em;
          background: var(--color--bl-01);
          border: none;
          border-radius: 50%;
          box-shadow: none;
          &::before, &::after {
            display: none;
          }
        }
        & .noUi-pips,
        & .noUi-value-sub {
          color: #333;
          font-size: var(--size--ss);
        }
      }
      & .search-button__wrapper {
        display: flex;
        justify-content: space-between;
        & .search-button {
          display: block;
          width: calc(50% - calc(var(--size--base) / 2));
          padding: var(--size--base) 0;
          color: #fff;
          text-align: center;
          border: none;
          outline: none;
          border-radius: calc(var(--size--base) / 2);
          transition: opacity 0.2s;
          &.reset {
            background: var(--color--gry-02);
          }
          &.submit {
            background: var(--color--bl-01);
          }
        }
      }
    }
  }
}


/* book 各カリキュラム
====================================================*/
[data-target] {
  opacity: 1 !important;
  transition: none !important;
  cursor: inherit !important;
}

.l-section--book {
  margin-top: var(--size--2l);
  padding-top: var(--size--2l);
}
.booklist-item {
  position: relative;
  background: #fff;
  & .item__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: var(--size--l);
  }
  & .item__info {
    & .item__info--title {
      font-size: calc(var(--size--m) * 1.1);
      & .--tag {
        position: relative;
        display: block;
        width: fit-content;
        margin-bottom: calc(var(--size--base) / 2);
        line-height: 1;
        padding: 0.25em 0.5em;
        color: #fff;
        font-size: var(--size--ss);
        background: var(--color--rd-01);
      }
      & + .item__label {
        margin-top: var(--size--base);
      }
    }
    & .item__info--overview {
      margin: calc(var(--size--base) / 4) 0 calc(var(--size--base) / 1.5);
      line-height: 1.45;
      color: var(--color--gry-02);
      font-weight: 500;
    }
    & .item__label {
      display: inline-block;
      width: fit-content;
      margin: 0 0.5em 0.1em 0;
      padding: 0.2em 0.5em 0.25em 1.5em;
      line-height: 1;
      font-size: var(--size--ss);
      border: 1px solid;
      &.--point {
        border-color: var(--color--bl-01);
        &::before {
          left: 0.5em;
        }
      }
      &.--required {
        color: var(--color--rd-01);
        border-color: var(--color--rd-01);
      }
      &.--recommend {
        color: var(--color--grn-01);
        border-color: var(--color--grn-01);
      }
    }
  }
  & .item__img {
    aspect-ratio: 1 / 1;
    text-align: center;
  }
  & .item__data {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    line-height: 1.6;
    border-right: 1px solid var(--color--gry-03);
    border-bottom: 1px solid var(--color--gry-03);
    & dt, & dd {
      border-top: 1px solid var(--color--gry-03);
      border-left: 1px solid var(--color--gry-03);
    }
    & dt {
      padding: var(--size--base) 0 var(--size--base) var(--size--base);
      background: var(--color--gry-04);
      & a {
        color: inherit;
      }
      & i {
        display: inline-block;
        margin-left: 0.25em;
      }
    }
    & dd {
      padding: var(--size--base);
      & .item__data--rank {
        position: relative;
        top: -0.1em;
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        line-height: 1.45;
        margin-right: 0.25em;
        font-size: 0.8em;
        text-align: center;
        border-radius: 2px;
      }
    }
  }
  & .item__link {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    & a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 2.5em;
      padding-bottom: 1px;
      font-size: var(--size--s);
      font-weight: 700;
      text-align: center;
      background: var(--color--gry-03);
      &::before {
        content: "\f105";
        display: inline-block;
        margin: 1px var(--size--base) 0 0;
        font-family: "Font Awesome 7 free";
      }
    }
  }
  & .m-link--about {
    display: block;
    width: fit-content;
    margin: var(--size--s) 0 0 auto;
    padding: var(--size--base) var(--size--s) var(--size--base) var(--size--m);
    line-height: 1;
    font-size: var(--size--s);
    background: rgba(0, 82, 175, 0.2);
    border-radius: var(--size--m);
    & i {
      display: inline-block;
      margin-left: 0.5em;
    }
  }
  & .item__download {
    margin-top: var(--size--2l);
    padding: var(--size--l) var(--size--2l);
    background: var(--color--gry-04);
    & .m-title--download {
      margin-bottom: var(--size--l);
    }
    .m-btn__wrap {
      font-size: var(--size--s);
    }
    & div.m-btn__wrap,
    & ul.m-btn__wrap > li > div,
    & ul.m-btn__wrap dl dd {
      display: flex;
      flex-wrap: wrap;
    }
    & div.m-btn__wrap {
      margin-right: calc(var(--size--base) * -1);
    }
    & ul.m-btn__wrap > li {
      & + li {
        margin-top: var(--size--m);
        padding-top: var(--size--m);
        border-top: 1px solid var(--color--gry-03);
      }
      & > div {
        overflow: hidden;
        position: relative;
        margin: 0 calc(var(--size--base) / 2 * -1) calc(var(--size--base) / 2 * -1) 0;
        & .m-btn {
          width: calc(50% - var(--size--base) / 2);
        }
        & dl {
          width: 100%;
          margin-top: var(--size--base);
          & dt {
            margin-bottom: calc(var(--size--base) / 2);
          }
          & dd {
            align-items: center;
          }
        }
      }
      & h4 {
        margin-top: var(--size--base);
      }
    }
    & .m-btn {
      display: block;
      margin: 0 calc(var(--size--base) / 2) calc(var(--size--base) / 2) 0;
      padding: var(--size--base) 0;
      color: #fff;
      font-weight: 700;
      text-align: center;
      border-radius: 4px;
      &.--slide {
        background: var(--color--bl-01);
      }
      &.--pr {
        background: var(--color--grn-01);
      }
      &.--other {
        background: var(--color--gry-01);
      }
      &.--s {
        width: 3em !important;
      }
    }
  }

  & .--thumb,
  & .--modal .item__data {
    font-size: var(--size--s);
  }
  & .--thumb {
    align-items: flex-start;
    & .item__img a {
      display: block;
      height: 100%;
    }
    & .item__info {
      margin-top: var(--size--base);
    }
    & .item__data {
      margin-top: var(--size--m);
    }
  }
  & .--modal {
    & .item__img {
      width: 200px;
      height: 200px;
    }
    & .item__label {
      vertical-align: top;
      & + .item__data {
        margin-top: var(--size--base);
      }
    }
  }
  &.--popular .item__info--title.--tag {
    background: var(--color--rd-01);
  }

  &[data-target="adults"] {
    & .item__data--rank {
      &.--intro {
        background: #dfeeff;
      }
      &.--beginner {
        background: #c7e1ff;
      }
      &.--pre-intermediate,
      &.--intermediate {
        background: #a7d0ff;
      }
      &.--pre-advanced {
        background: #8dc0fb;
      }
      &.--advanced {
        color: #fff;
        background: #07adfa;
      }
    }
  }
  &[data-target="kids"] {
    display: none;
    & .item__data--rank {
      &.--intro {
        background: #fff9dd;
      }
      &.--beginner,
      &.--pre-intermediate {
        background: #fff2b7;
      }
      &.--intermediate,
      &.--pre-advanced {
        background: #fee888;
      }
      &.--advanced {
        background: #f8d525;
      }
    }
  }
}
.is-noresult {
  display: none;
  margin-top: calc(var(--size--m) * -1);
}

/* modal
====================================================*/
.m-modal {
  overflow: visible;
  width: min(800px, 100%);
  max-width: none;
  max-height: none;
  padding: 0;
  color: #333;
  border: none;
  &::backdrop {
    background: rgba(0, 0, 0, 0.8);
  }
  & .m-close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    color: #fff;
    font-size: var(--size--l);
    border: none;
    background: none;
    transition: opacity 0.2s;
    cursor: pointer;
    outline: none;
    z-index: 100;
  }
  & .m-modal__inner {
    position: relative;
    height: 100%;
    & .m-modal__inner__head {
      padding: var(--size--m);
      background: var(--color--bl-01);
      color: #fff;
    }
    & .m-title--m {
      margin-bottom: var(--size--m);
      font-size: calc(var(--size--m) * 1.5);
      &:not(.js-accordion__title) {
        padding-left: var(--size--base);
        border-left: calc(var(--size--base) / 2) solid var(--color--bl-01);
      }
    }
    & .m-title--s {
      margin: var(--size--l) 0 var(--size--base);
      font-size: calc(var(--size--m) * 1.2);
    }
    & h5 {
      margin: 0;
      font-size: var(--size--m);
    }
    & section {
      &:first-of-type {
        margin-top: var(--size--2l);
      }
      &:last-of-type {
        margin-bottom: 0;
      }
    }
    & p + .u-list--dot,
    & p + p {
      margin-top: 1em;
    }
    & .m-list--beginner {
      margin-top: var(--size--m);
      counter-reset: num;
      & li {
        margin-top: calc(var(--size--s) / 2);
        padding: var(--size--m);
        border: 1px solid var(--color--gry-03);
        counter-increment: num;
        &::before {
          position: relative;
          top: -0.15em;
          content: counter(num, decimal);
          display: inline-block;
          width: 2em;
          height: 2em;
          background: var(--color--gry-03);
          line-height: 2em;
          font-size: 80%;
          font-weight: 700;
          text-align: center;
          border-radius: 50%;
          vertical-align: middle;
        }
        & h5 {
          display: inline-block;
        }
      }
    }
  }
}
.m-modal__inner::-webkit-scrollbar {
  width: var(--size--base);
}
.m-modal__inner::-webkit-scrollbar-thumb {
  background: var(--color--gry-02);
}
.m-modal__inner::-webkit-scrollbar-track {
  background: var(--color--gry-04);
}
.m-modal[open],
.m-modal[open]::backdrop {
  animation: fadeIn 0.2s ease normal;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.m-modal.is-hide,
.m-modal.is-hide::backdrop {
  animation: fadeOut 0.2s ease normal;
}
@keyframes fadeOut {
  to { opacity: 0; }
}

body.is-noscroll {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

/* accordion
====================================================*/
.js-accordion {
  &:not(.is-active) .js-accordion__area {
    display: none;
  }
  &.is-active .js-accordion__title::after {
    content: "\f106";
    top: 50%;
  }
  &:nth-of-type(1) {
    margin-top: var(--size--2l);
  }
  & + .js-accordion,
  & .level-table__header {
    margin-top: var(--size--base);
  }
  & .js-accordion__title {
    position: relative;
    margin: 0;
    padding: var(--size--base) var(--size--s);
    background: var(--color--gry-03);
    cursor: pointer;
    &::after {
      content: "\f107";
      display: block;
      position: absolute;
      top: calc(50% + 0.1em);
      right: var(--size--m);
      line-height: 1;
      font-family: "Font Awesome 7 free";
      transform: translateY(-50%);
    }
  }
  & .js-accordion__area {
    padding-bottom: var(--size--l);
    transition: height 0.2s;
  }
}

/* level
====================================================*/
.level-table__header .header__type {
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d3e7ff;
}
.level-table ul {
  line-height: 1.58;
}
.level-table__header.--kids,
.level-table.--kids .level-table__item dl dd {
  grid-template-columns: 1fr 80px;
}

.level-table__header.--kids {
  & .header__qq {
    background: #ffd500;
  }
  & .header__type {
    background: #fff8db;
  }
}
.level-table.--kids {
  & .level-table__item__sub {
    background: #fff8db;
  }
  & .level-table__item:first-child {
    & .level-table__item__body dt,
    & .level-table__item__header,
    & .level-table__item__body dt::after {
      background: #fff9dd;
    }
    & .level-table__item__header::after {
      border-top-color: #fff9dd;
    }
  }
  & .level-table__item:nth-child(2),
  & .level-table__item:nth-child(3) {
    & .level-table__item__body dt,
    & .level-table__item__header {
      background: #fff2b7;
    }
    & .level-table__item__header::after {
      border-top-color: #fff2b7;
    }
  }
  & .level-table__item:nth-child(4),
  & .level-table__item:nth-child(5) {
    & .level-table__item__body dt,
    & .level-table__item__header {
      background: #fee888;
    }
    & .level-table__item__header::after {
      border-top-color: #fee888;
    }
  }
  & .level-table__item:nth-child(6) {
    & .level-table__item__body dt,
    & .level-table__item__header {
      background: #f8d525;
    }
    & .level-table__item__header::after {
      border-top-color: #f8d525;
    }
  }
}



/* レスポンシブ
====================================================*/
@media screen and (min-width: 768px) {
  .is-only--sp {
    display: none !important;
  }

  .m-link:hover {
    opacity: 1 !important;
    text-decoration: none;
  }
  .m-link__pagetop {
    font-size: 1.6rem;
  }
  .l-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    & .footer__copyright {
      display: flex;
      align-items: center;
      margin-left: auto;
    }
  }
  main {
    padding: var(--size--2l) var(--size--3l) var(--size--4l);
  }
  .l-wrapper {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    width: var(--width);
    margin: 0 auto;
  }
  .l-main,
  .l-sub {
    padding-top: var(--size--2l);
  }
  .l-main {
    width: calc(100% - 240px - var(--size--3l));
  }
  .l-sub {
    position: sticky;
    top: 0;
    width: 240px;
  }
  .m-switch__wrap .switch__link {
    padding: var(--size--m) var(--size--s);
    &::after {
      content: "\f105";
      position: absolute;
      top: calc(50% + 0.1em);
      right: 1em;
      display: block;
      width: 1em;
      margin-left: 0.5em;
      font-family: "Font Awesome 7 Free";
      text-align: center;
      transform: translateY(-50%);
    }
  }
  .search-button:hover {
    opacity: 0.6;
  }

  .booklist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .booklist-item {
    width: calc(50% - var(--size--base));
    margin-bottom: var(--size--s);
    padding: var(--size--l) var(--size--l) calc(var(--size--s) * 2.5);
    & .item__inner {
      &.--thumb {
        & .item__img {
          width: 140px;
          height: 140px;
        }
        & .item__info {
          width: calc(100% - var(--size--l) - 140px);
        }
      }
      &.--modal .item__info {
        width: calc(100% - var(--size--l) - 200px);
      }
    }
    & .item__data {
      line-height: 1.658;
      & dt {
        width: 140px;
      }
      & dd {
        width: calc(100% - 140px);
      }
    }
    & .item__download {
      & div.m-btn__wrap .m-btn {
        width: calc(33.33% - 1rem / 3);
      }
      & ul.m-btn__wrap > li {
        display: flex;
        & > div {
          width: calc(75% + var(--size--base) / 2);
        }
        & h4 {
          width: 25%;
        }
      }
    }
    & .m-modal__inner__head .m-link--about {
      position: absolute;
      top: 50%;
      right: var(--size--m);
      transform: translateY(-50%);
    }
  }
  .m-modal {
    height: calc(100dvh - var(--size--2l));
    & .m-modal__inner {
      overflow-y: scroll;
      padding: var(--size--l);
      & section {
        margin: var(--size--4l) var(--size--m) var(--size--2l);
      }
    }
    & .m-close {
      top: -0.25em;
      right: -2em;
      &:hover {
        opacity: 0.7;
      }
    }
  }

  .level-table__item .level-table__item__header {
    font-size: var(--size--s);
  }
}

@media screen and (max-width: 767px) {
  :root {
    --size--m: var(--size--s);
  }
  .is-only--pc {
    display: none !important;
  }

  .m-link__pagetop {
    font-size: 1.2rem;
  }
  .l-footer {
    & .footer-nav__list {
      flex-wrap: wrap;
      margin: 0 0 var(--size--s) 0;
    }
    & .footer-nav__item {
      margin: 0.25em 0;
      border-left: 1px solid rgba(255, 255, 255, 0.2);
      & .footer-nav__link {
        padding: 0.25em 1em;
      }
    }
    & .footer__copyright .footer__logo {
      margin: 0 0 calc(var(--size--base) / 2);
    }
  }

  main {
    padding: var(--size--l) 0  var(--size--4l);
  }
  .l-sub {
    margin-top: var(--size--2l);
  }
  .l-section:not(.l-section--book),
  .l-section--book .l-title__wrap,
  .is-noresult {
    padding-left: var(--size--m);
    padding-right: var(--size--m);
  }
  
  .l-section--switch .m-title--s {
    margin-bottom: var(--size--s);
  }
  .m-switch__wrap {
    display: flex;
    justify-content: space-between;
    .switch__link {
      width: calc(50% - var(--size--base) / 2);
      margin: 0;
      padding: var(--size--s);
      font-size: var(--size--s);
      &:hover {
        background: inherit;
      }
    }
  }

  .l-section--search {
    & .js-accordion__title {
      padding: var(--size--m);
      background: #fff;
    }
    & .search-area {
      border-top: 1px solid var(--color--gry-03);
    }
  }

  .booklist-item {
    margin-bottom: var(--size--s);
    padding: var(--size--m) var(--size--m) calc(var(--size--s) * 2.5);
    & .item__img {
      width: 100px;
    }
    & .item__info--overview {
      font-size: var(--size--ss);
    }
    & .item__download {
      margin: var(--size--2l) calc(var(--size--m) * -1) calc(var(--size--m) * -1) calc(var(--size--m) * -1);
      padding: var(--size--l) var(--size--m);
      & ul.m-btn__wrap > li h4 {
        margin: 0 0 var(--size--s);
      }
      & div.m-btn__wrap .m-btn {
        width: calc(50% - var(--size--base) / 2);
      }
    }
    & .--thumb {
      &.item__inner {
        margin-bottom: var(--size--m);
      }
      & .item__info {
        width: calc(100% - var(--size--m) - 100px);
      }
    }
    & .--modal {
      & .item__info {
        display: block;
      }
      & .item__data {
        margin-bottom: var(--size--m);
      }
      & .item__img {
        margin: 0 auto var(--size--l);
      }
    }
    & .m-modal__inner__head .m-link--about {
      margin-top: var(--size--base);
    }
  }

  .m-modal {
    height: 100dvh;
    & .m-modal__inner {
      overflow-y: auto;
      padding: var(--size--s);
      & .m-modal__inner__head {
        margin: calc(var(--size--m) * -1) calc(var(--size--m) * -1) 0 calc(var(--size--m) * -1);
      }
      & section {
        margin: var(--size--3l) 0 var(--size--l);
      }
    }
    & .m-close {
      top: var(--size--base);
      right: var(--size--base);
      background: var(--color--bl-01);
    }
  }

  .level-table.--adults .level-table__item__header {
    background: var(--color--adults) !important;
  }
  .level-table.--kids .level-table__item__header {
    background: var(--color--kids) !important;
  }

  body.lang--ja {
    .level-table__item__sub::before {
      width: 7em;
    }
    .booklist-item .item__data {
      & dt {
        width: calc(8em + var(--size--base) * 2);
      }
      & dd {
        width: calc(100% - 8em - var(--size--base) * 2);
      }
    }
    
    /* .level-table.--adults .level-table__item:first-of-type .level-table__item__sub[data-title="TOEIC®L&R"],
    .level-table.--adults .level-table__item:nth-of-type(3) dl:first-of-type .level-table__item__sub[data-title="TOEIC®L&R"],
    .level-table.--adults .level-table__item:nth-of-type(4) .level-table__item__sub[data-title="TOEIC®L&R"],
    .level-table.--adults .level-table__item:nth-of-type(5) dl:nth-of-type(2) .level-table__item__sub[data-title="TOEIC®L&R"],
    .level-table.--adults .level-table__item:nth-of-type(6) dl:nth-of-type(2) .level-table__item__sub[data-title="TOEIC®L&R"],
    .level-table.--kids .level-table__item:first-of-type .level-table__item__sub {
      display: none;
    } */
  }
  body.lang--en {
    .level-table__item__sub::before {
      width: 4em;
    }
    .booklist-item .item__data {
      & dt {
        width: calc(9em + var(--size--base) * 2);
      }
      & dd {
        width: calc(100% - 9em - var(--size--base) * 2);
      }
    }
    /* .level-table.--adults .level-table__item .level-table__item__sub[data-title="TOEIC®L&R"] {
      display: none;
    } */
  }
}