/* -------------------------------------------------------------------------- */
/*                                   Colors                                   */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/*                              Default Functions                             */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/*                               Default Mixins                               */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/*                                Custom Layout                               */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/*                                   Header                                   */
/* -------------------------------------------------------------------------- */
@media screen and (width <= 1500px) {
  .header__wrapper-xl::before {
    width: 32.5rem;
  }
  .mainvis__wrapper-xl::before {
    width: 32.5rem;
  }
}
@media screen and (width <= 768px) {
  .header__wrapper-w100 {
    animation-range-end: 485px;
  }
  .header__wrapper-w100--subpage {
    animation-range-end: 285px;
  }
  .header__wrapper-xl {
    padding-inline: 2rem;
  }
  .header__wrapper-xl::before {
    width: clamp(200px, 35vw, 300px);
    height: 100%;
    border-radius: 0;
  }
  .header__wrapper-xl::after {
    content: none;
  }
  .header__logo {
    margin-inline: 0;
  }
  .header__logo a {
    width: 65%;
  }
}
/* --------------------------------- Visual --------------------------------- */
@media screen and (width <= 768px) {
  .mainvis,
  .subvis {
    margin-top: 85px;
  }
  .mainvis__wrapper-xl::before {
    width: 12vw;
    height: 100%;
    border-radius: 0;
  }
  .mainvis__wrapper-xl::after {
    content: none;
  }
  .mainvis__img {
    height: 460px;
  }
  .mainvis__catch {
    width: min(100%, 560px);
  }
  .subvis::after {
    transform: translateY(60px);
  }
  .subvis__img {
    height: 200px;
  }
  .subvis__catch {
    justify-content: center;
    padding-inline: 1.5rem;
  }
  .subvis__catch h2 {
    width: fit-content;
    font-size: 2.8rem;
    padding: 1.5rem 1.2rem;
    text-align: center;
  }
}
/* -------------------------------------------------------------------------- */
/*                                    Main                                    */
/* -------------------------------------------------------------------------- */
@media screen and (width <= 768px) {
  .sec01__box {
    padding: clamp(15px, 2.5vw, 30px) 1.5rem;
  }
  .sec02__wrapper-xl {
    padding-inline: 1.5rem;
    flex-flow: column nowrap;
  }
  .sec02__box {
    margin-inline: auto;
  }
  .sec02__box .cmn-button {
    margin-inline: auto;
  }
  .sec03__box1 {
    justify-content: center;
    flex-flow: row wrap;
    padding-inline: 0;
  }
  .sec03__box1-box {
    margin-inline: auto;
  }
  .sec03__box1-img {
    width: min(100%, 480px);
    margin-inline: auto;
  }
  .sec03__box2 {
    width: fit-content;
    padding: clamp(15px, 2.5vw, 25px);
  }
  .sec04 {
    padding-block: 0 2rem;
  }
  .sec04__list {
    flex-flow: column nowrap;
    gap: 1.5rem;
  }
  .sec04__item {
    height: 18rem;
  }
  .sec04__item-link {
    padding: 2rem 2rem 6rem 2rem;
  }
  .sec04__item-header p {
    font-size: 2.2rem;
  }
  .sec05 .cmn-headbox {
    margin-bottom: 3rem;
  }
  .sec06__wrapper-xl {
    flex-flow: column nowrap;
    padding-inline: 1.5rem;
  }
  .sec06__box {
    margin-inline: auto;
  }
  .sec06__box .cmn-button {
    margin-inline: auto;
  }
  .sec07__subheader {
    width: min(100%, 540px);
    margin-inline: auto;
  }
  .sec07__subheader h4 {
    margin-inline: 0 auto;
  }
  .sec07__box2-list {
    justify-content: center;
    gap: 1rem;
  }
  .sec07__box2-item {
    width: calc(50% - 10px);
  }
  .sec07__box3-list {
    gap: 2rem;
  }
  .sec07__box3-item {
    width: 45%;
  }
  .sec07__box3-img {
    width: 100%;
  }
  .sec08__wrapper-l .cmn-header {
    margin-bottom: 3rem;
  }
  .sec08__box {
    margin: 0;
    justify-content: center;
    flex-flow: column nowrap;
  }
  .sec08__box-box {
    padding: 2.5rem 1.5rem;
    margin-inline: auto;
  }
  .sec08__box-box p {
    font-size: 1.5rem;
    line-height: 2.5rem;
  }
  .sec09__box {
    justify-content: center;
  }
  .sec09__list {
    width: min(100%, 500px);
    margin-inline: auto;
  }
  .sec11__item-img {
    position: relative;
    z-index: -15;
  }
  .sec11__item-box {
    width: min(100%, 460px);
    margin: -7rem auto auto auto;
  }
  .sec12__tabs-item {
    font-size: 1.4rem;
  }
  .sec12__item {
    padding: 2rem 1.5rem;
  }
  .sec12__item-bbox {
    flex-flow: column nowrap;
  }
  .sec12__item-box {
    width: 100%;
  }
  .sec12__box1-img {
    width: 100%;
    height: auto;
    border-radius: 0;
  }
  .sec12__box2-list {
    justify-content: center;
    gap: 1rem;
  }
  .sec12__box2-item {
    width: min(120px, 30%);
  }
  .sec12__box2-img {
    width: 100%;
    height: auto;
    border-radius: 0;
    margin: auto;
  }
  .sec12__box4-img {
    width: 100%;
    height: auto;
    border-radius: 0;
  }
  .sec13 {
    overflow: hidden;
  }
  .sec13__box::before {
    width: 164px;
    height: 69px;
    border-radius: 0;
    margin-bottom: 1rem;
  }
  .sec13__box p {
    font-size: 1.7rem;
    line-height: 3.5rem;
    padding-inline: 2rem;
  }
  .sec13__box p::before, .sec13__box p::after {
    opacity: 0.2;
  }
  .sec13__box p::before {
    transform: translateX(-100%);
  }
  .sec13__box p::after {
    transform: translateX(100%);
  }
  .sec13__box p em {
    font-size: 2.2rem;
  }
  .sec14__img {
    width: 100%;
    height: auto;
    border-radius: 0;
  }
  .sec15__box {
    flex-flow: column nowrap;
  }
  .sec15__lbox {
    width: min(100%, 350px);
    margin-inline: auto;
    background-color: #ffffff;
  }
  .sec15__list {
    width: 100%;
    justify-content: center;
    gap: 3rem;
  }
  .sec16__box2 {
    flex-flow: column nowrap;
    gap: 5rem;
  }
  .sec16__box2::before {
    transform: rotate(0) translateY(10px);
  }
  .sec16__box2-img {
    width: 100%;
    height: auto;
    border-radius: 0;
  }
  .sec17__list {
    margin-inline: auto;
    gap: 3rem;
  }
  .sec19__item {
    width: fit-content;
    padding-inline: 0;
  }
  .sec19__item::before {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 2rem;
    transform: translate(0, 50%);
    inset: 0 0 auto 0;
    margin-inline: auto;
  }
  .sec20__box {
    width: min(100%, 460px);
    margin-inline: auto;
  }
}
/* -------------------------------------------------------------------------- */
/*                                   Footer                                   */
/* -------------------------------------------------------------------------- */
@media screen and (width <= 768px) {
  .footer__wrapper-m {
    flex-flow: column nowrap;
  }
  .footer__lbox, .footer__list {
    justify-content: center;
  }
  .footer__lbox {
    margin-inline: auto;
  }
  .footer__lbox-logo {
    margin-inline: auto;
  }
  .footer__lbox-table {
    border-spacing: 0 1rem;
  }
  .footer__lbox-table th,
  .footer__lbox-table td {
    font-size: 1.2rem;
  }
  .footer__lbox-table th {
    width: 8rem;
  }
  .footer__rbox-box2 {
    width: min(100%, 335px);
    margin-inline: auto;
    justify-content: center;
  }
  .footer__item:last-child .footer__item-link {
    border-right: none;
  }
}