@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* 
  font-family: "Montserrat", sans-serif;
  font-weight: <weight>;
} */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
/* 
※DIN代替
  font-family: "Oswald", sans-serif;
*/

/* 
【注意】
疑似要素に入れ子でメディアクエリは
Safariで無効になる

*/

:root {
  --color-main: #ffe64f;
  --color-cream: #fdf2d4;
  --color-sub-sky: #00a3e4;

  --color-cat-green: #009a67;

  --ls-medium: .1em;
  --ls-large: .2em;

  --lh-large: 1.8;


  --header-nav-height: 80px;
}

@media (max-width: 767px) {

  :root {
    --header-nav-height: 64.883px;
  }
}

.black {
  color: #231815;
}

.white {
  color: #fff;
}

.yellow {
  color: #ffe64f;
}

.green {
  color: #33a465;
}

.green2 {
  color: #96b120;
}

.green3 {
  color: #82c7a1;
}

.blue {
  color: #0085d0;
}

.red {
  color: #db0a17;
}


.bg-black {
  background-color: #231815;
}

.bg-white {
  background-color: #fff;
}

.bg-yellow {
  background-color: #ffe64f;
}

.bg-green {
  background-color: #33a465;
}

.bg-green2 {
  background-color: #96b120;
}

.bg-green3 {
  background-color: #82c7a1;
}

.bg-blue {
  background-color: #0085d0;
}

.bg-red {
  background-color: #db0a17;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-nav-height);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  color: #000;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: #000;
}

header {
  background-color: var(--color-main);
  width: 100%;
  height: var(--header-nav-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;

}

.header-inner {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;


}

.header-left {
  font-size: 12px;
  letter-spacing: .1em;
  transition: .3s;
  opacity: 1;

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

  &.is-hidden {
    opacity: 0;
  }
}

/* header-leftの初期状態（トップページ用） */
.top-page-header .header-left {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* スクロール後のheader-leftの表示 */
.scrolled-header .header-left {
  opacity: 1;
  visibility: visible;
}

.header-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  a {
    width: 200px;
    display: inline-block;
    height: auto;

    @media (max-width: 767px) {
      min-width: 141px;
      width: 37%;
      height: auto;
    }
  }
}

.top-page-header .header-logo {
  a {
    width: 221.478px;
    height: 19.6001px;
    vertical-align: bottom;

    @media (max-width: 767px) {
      min-width: 117.9189px;
      width: 31%;
      height: auto;
      vertical-align: middle;
    }
  }
}

.header-right {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.instagram-icon {
  margin-right: 36px;
  width: 38px;
  height: 38px;

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

.menu-button {
  width: 53px;
  height: auto;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

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

  &.active .menu-text {
    margin-bottom: 20px;
  }

  &.active .menu-line:nth-child(2) {
    transform: rotate(45deg) translate(3px, 3px);

    @media (max-width: 767px) {
      transform: rotate(45deg) translate(2px, 2px);
    }
  }

  &.active .menu-line:nth-child(3) {
    transform: rotate(-45deg) translate(3px, -3px);
  }
}

/* トップページ用スタイル */
.top-page-header {
  position: relative;
  /* 最初は固定しない */
  top: 0;
  left: 0;
  transition: all 0.3s ease;
  height: 103px;

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

/* スクロール後に適用されるクラス */
.scrolled-header {
  position: fixed;
  height: var(--header-nav-height);
}

/* ロゴの切り替え */
.top-logo {
  display: block;
}

.lower-logo {
  display: none;
}

.scrolled-header .header-logo {
  a {
    width: 200px;
    display: inline-block;
    height: auto;
    vertical-align: unset;

    @media (max-width: 767px) {
      min-width: 141px;
      width: 37%;
      height: auto;
    }
  }
}

/* スクロール後のロゴ表示切り替え */
.scrolled-header .top-logo {
  display: none;


}

.scrolled-header .lower-logo {
  display: block;


}

/* トップページのためのメインコンテンツマージン調整 */
.top-page .main-content {
  margin-top: 0;
  /* ヘッダーが最初は固定されないので、マージンは不要 */

  padding-top: 90px;

  @media (max-width: 767px) {
    padding-top: 20px;
  }
}

.menu-text {
  font-size: 14px;
  margin-bottom: 8px;
  font-family: "Jost", sans-serif;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .05em;
  color: #000;

  @media (max-width: 767px) {
    margin-bottom: 6px;
  }
}

.menu-line {
  width: 100%;
  height: 1.5px;
  background-color: #000;
  margin-bottom: 6px;
  transition: transform 0.3s ease;

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

.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  background-color: transparent;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 98;
}

.drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}


/* Drawerメニュー */
.drawer {
  position: fixed;
  top: 0;
  right: -496px;
  width: 496px;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  background-color: var(--color-main);
  transition: right 0.3s ease;
  z-index: 101;
  overflow-y: auto;

  &.open {
    transform: translateY(0);
  }


}

@media (max-width: 767px) {
  .drawer {
    width: 100%;
    right: -100%;

    top: var(--header-nav-height);
    /* デザイン変更でスクロール後と同じになる */
  }

}

/* .top-page .drawer {
  position: absolute;
} */

.drawer.open {
  right: 0;
}

/* トップページでスクロール後、固定に切り替え */
.top-page .drawer.scrolled-drawer {
  position: fixed;
  top: var(--header-nav-height);


}


.drawer-nav {
  padding: 144px 80px 60px;
  position: relative;
}

.scrolled-drawer .drawer-nav {
  padding-top: 44px;
}


@media (max-width: 767px) {
  .drawer-nav {
    padding: 30px 40px 280px;
    /* 下部は長めに取らないとスクロールで最後までメニューが見れない（いつもの挙動） */
  }

  .scrolled-drawer .drawer-nav {
    padding-top: 30px;
  }
}

/* メニュー内の閉じるボタン */
.drawer-close {
  position: absolute;
  top: 40px;
  right: 60px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1002;
  height: 50px;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .drawer-close {
    right: 40px;
    display: none;
  }
}

.scrolled-drawer .drawer-close {
  display: none;
}

.drawer-close .menu-line {
  display: block;
  width: 33px;
  height: 1.5px;
  background-color: #333;
}

.drawer-close .menu-line:nth-child(2) {
  transform: rotate(45deg) translate(3px, 4px)
}

.drawer-close .menu-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -7px)
}



.drawer-nav-inner>a,
.drawer-nav-inner>.drawer-ul {
  display: block;
  border-bottom: 1.5px solid #000;
  text-decoration: none;
  color: #000;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: var(--ls-medium);
  position: relative;
  transition: all 0.3s ease;
}

.drawer-nav-inner>a {
  padding: 20px 0;
}

.drawer-nav-inner>a:first-of-type {
  border-top: 1.5px solid #000;
}

.drawer-nav-inner>a::after {
  content: '→';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  transition: transform 0.3s ease;
}

.drawer-nav-inner>a:not(.out_link):hover::after {
  transform: translateY(-50%) translateX(5px);
}

.drawer-ul {
  list-style: none;
  padding-left: 0;
  border-bottom: 2px solid #000;
  padding-bottom: 0;
}

.drawer-ul>li:first-child {
  font-weight: 500;
  font-size: 18px;
  color: #333;
  padding: 20px 0;
  letter-spacing: var(--ls-medium);
}

.drawer-ul>li:not(:first-child) {
  border-top: 1.5px dashed #000;
  position: relative;
}

.drawer-ul>li:not(:first-child)::after {
  content: '→';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  transition: transform 0.3s ease;
}

.drawer-ul>li:hover::after {
  transform: translateY(-50%) translateX(5px);
}

.drawer-ul>li>a {
  color: #000;
  display: block;
  text-decoration: none;
  font-size: 16px;
  padding: 20px 0;
  letter-spacing: var(--ls-medium);
  font-weight: 400;
  transition: all 0.3s ease;
}


.drawer-nav-inner {
  display: flex;
  flex-direction: column;

  a,
  li {
    font-size: 18px;
  }

  a:not(:first-of-type) {
    font-size: 18px;

  }

  a:hover {
    opacity: .5;
  }

  a.out_link::after {
    content: "";
    display: inline-block;
    background-image: url("../img/icon-out_link.svg");
    width: 15px;
    height: 15px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
  }
}

.drawer-ul {
  list-style: none;


}

/* メインコンテンツ */
.main-content {
  margin-top: var(--header-nav-height);
  /*ヘッダーメニュー分*/
  padding: 23px 0 0;
  flex: 1;

  @media (max-width: 767px) {
    margin-top: var(--header-nav-height);
    padding: 38px 0 0;

  }
}

.container {
  margin: 0 auto;

  @media (max-width: 900px) {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }

  @media (max-width: 767px) {
    width: 84%;
    margin: 0 auto;
    padding: 0;
  }
}

.container--1000 {
  max-width: 1000px;
  margin: 0 auto;

  @media (max-width: 767px) {
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }
}

.container--900 {
  max-width: 900px;
  margin: 0 auto;

  @media (max-width: 767px) {
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }
}

.container--640 {
  max-width: 640px;
  margin: 0 auto;

  @media (max-width: 767px) {
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }
}


/* フッター */
footer {
  border-top: 1.5px solid #000;
  background-color: #fff;
}

.footer-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 44px 0;

  @media (max-width: 1000px) {
    padding-left: 1em;
    padding-right: 1em;
  }

  @media (max-width: 767px) {
    width: 84%;
    margin: 0 auto;
    padding: 33px 0;
  }

  .footer-content-h {
    font-size: 14px;
    font-weight: normal;
    letter-spacing: var(--ls-medium);

    @media (max-width: 767px) {
      font-size: 12px;
    }
  }
}

.footer-contant__address {
  margin-top: 21px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px 0;
}

.footer-contant__address-ttl {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: var(--ls-medium);

  @media (max-width: 767px) {
    font-size: 12px;
  }

  span {
    @media (max-width: 767px) {
      display: inline-block;
    }
  }
}

.footer-contant__address-info {
  font-size: 14px;
  letter-spacing: var(--ls-medium);

  @media (max-width: 767px) {
    margin-top: 12px;
    font-size: 12px;
  }
}


.copyright {
  background-color: var(--color-main);
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  letter-spacing: var(--ls-large);

  br {
    display: none;
  }

  @media (max-width: 767px) {
    font-size: 10px;

    p {
      width: 84%;
      margin: 0 auto;
      text-align: center;
      line-height: 2;

      br {
        display: block;
      }
    }
  }
}


.breadcrumb {
  ul {
    list-style-type: none;
    font-size: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;

    li {
      color: #666666;
      display: flex;
      align-items: center;

      &:not(:last-child)::after {
        content: ">";
        margin: 0 5px;
        color: #666666;
      }

      a {
        color: #666666;
        text-decoration: underline;
      }
    }
  }

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

.breadcrumb+section {
  margin-top: 42px;

  @media (max-width: 767px) {
    margin-top: 0;

  }
}


.h-main {
  text-align: center;

  .h-main-eng {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;

    font-size: 43px;
    letter-spacing: .1em;

    @media (max-width: 767px) {
      font-size: 28px;

    }

    &.is-jp {
      font-size: 30px;

      @media (max-width: 767px) {
        font-size: 26px;
      }
    }
  }

  .h-main-eng-jp {
    font-size: 17px;
    letter-spacing: .1em;
    font-weight: bold;
    margin-top: 11px;

    @media (max-width: 767px) {
      font-size: 10px;
      margin-top: 0px;

    }
  }

  &.h-main--voice,
  &.h-main--access {
    position: relative;
  }

  &.h-main--voice::after {
    content: "";
    background-image: url("../img/h-main--voice.png");
    width: 269.7381px;
    height: 139.4764px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: -15px;
    top: -15px;


  }

  &.h-main--access::after {
    content: "";
    background-image: url("../img/h-main--access.png");
    width: 146.1434px;
    height: 91.6983px;
    display: inline-block;
    background-size: contain;
    position: absolute;
    right: -15px;
    top: -25px;

  }


}

@media (max-width: 767px) {

  .h-main.h-main--access::after,
  .h-main.h-main--voice::after {
    display: none;
  }
}


.h-main+* {
  margin-top: 60px;

  @media (max-width: 767px) {
    margin-top: 35px;
  }
}

.top-page .h-main+* {
  margin-top: 40px;

  @media (max-width: 767px) {
    margin-top: 26px;
  }
}


.read {
  font-size: 17px;
  letter-spacing: var(--ls-medium);

  @media (max-width: 767px) {
    font-size: 16px;

  }

  &.is-center {
    text-align: center;

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

    &.is-center_sp {
      @media (max-width: 767px) {
        text-align: center;
      }
    }
  }

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

  &.is-large {
    font-size: 30px;

    @media (max-width: 767px) {
      font-size: 20px;
    }
  }
}

.index-about-block .read br {
  display: none;

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

.access-block {
  margin-top: 45px;

  display: grid;
  grid-template-columns: 1fr calc(27.6%);
  grid-template-areas:
    "title image"
    "address image"
    "map map";
  gap: 30px;

  @media (max-width: 767px) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "address"
      "image"
      "map";

    gap: 18px;
  }

}

.access-block+.access-block {
  margin-top: 77px;

  @media (max-width: 767px) {
    margin-top: 38px;
  }
}

.circle-ttl,
.is-style-circle-ttl {
  font-size: 20px;
  font-weight: bold;
  position: relative;
  letter-spacing: .2em;

  grid-area: title;

  padding-left: 32.5px;
  line-height: 1.5;

  @media (max-width: 767px) {
    font-size: 18px;
    padding-left: 27.5px;

  }

  .circle-ttl-sp_note {
    display: none;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: normal;

    @media (max-width: 767px) {
      display: inline-block;
    }
  }
}

.circle-ttl::before,
.is-style-circle-ttl::before {
  content: "";
  background-image: url("../img/circle-point.svg");
  width: 24px;
  height: 24px;
  background-size: 100% 100%;
  /* ← ここでフィットを強制 */

  background-repeat: no-repeat;
  display: inline-block;
  background-position: center;


  position: absolute;
  top: .2em;
  left: 0;

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

.circle-ttl--add {
  letter-spacing: .05em;
  font-size: 18px;

  @media (max-width: 767px) {
    font-size: 14px;
  }

  .fw-normal {
    font-weight: normal;
  }

  a {
    text-decoration: underline;
  }
}

.circle-ttl+*:not(.access-block__address, .voice-block__container) {
  margin-top: 20px;
}

.circle-ttl+.simple-dl {
  margin-top: 40px;

  @media (max-width: 767px) {
    margin-top: 15px;
  }
}

.circle-bottom-p {
  font-weight: bold;
  letter-spacing: var(--ls-medium);
  padding-left: 32.5px;
}

.circle-bottom-p+* {
  margin-top: 38px;
}

.access-block__address {
  grid-area: address;


  p {
    font-size: 18px;
    letter-spacing: var(--ls-medium);
    line-height: var(--lh-large);

    @media (max-width: 767px) {
      font-size: 16px;
    }
  }

  .list {
    margin-top: 14px;
  }
}




.access-block__img {
  grid-area: image;


  img {
    width: 100%;
    height: auto;
    display: block;
  }
}

.access-block__map {
  grid-area: map;

  iframe {
    width: 100%;
    height: 393px;
    display: block;

    @media (max-width: 767px) {
      height: auto;
      aspect-ratio: 315 / 221.6667;
    }
  }
}

.list {
  list-style: none;
  list-style-position: outside;
  /* バレットを外側に配置 */

  letter-spacing: var(--ls-medium);

  li {
    font-size: 16px;
    padding-left: 1em;
    /* 各項目のテキスト左余白 */
    text-indent: -1em;
    /* 最初の行を左に1em引っ込める（ぶら下げインデント） */

    @media (max-width: 767px) {
      font-size: 14px;
    }
  }

  li:not(:first-of-type) {
    margin-top: .3em;
  }

  li:before {
    content: "・";

  }
}


.visit-block {
  margin-top: 97px;
  background-color: var(--color-main);
  border-radius: 1em;

  @media (max-width: 767px) {
    margin-top: 63px;
  }

}

.visit-block-inner {
  padding: 48px;
  position: relative;

  display: grid;
  grid-template-columns: 3fr 2.5fr;
  /* 左右均等に2列 */
  gap: 35px;
  /* 指定された左右のgap */

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

.visit-block-deco {
  position: absolute;
  top: -45px;
  left: 48px;

  @media (max-width: 767px) {
    top: -25px;
    left: 30px;
  }

  span {
    display: grid;
    place-content: center;
    background-color: var(--color-main);
    width: 136px;
    height: 136px;
    border-radius: 50%;
    font-size: 23px;
    font-weight: bold;
    text-align: center;
    letter-spacing: var(--ls-medium);
    text-indent: var(--ls-medium);

    @media (max-width: 767px) {
      width: 87px;
      height: 87px;
      font-size: 14px;
    }
  }

  span:after {
    content: "";
    display: inline-block;
    width: 136px;
    height: 68px;
    border: 1px solid #000;
    border-top: none;
    border-radius: 0 0 100px 100px;
    /* 半径を大きくする */
    background-color: transparent;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;

  }
}

@media (max-width: 767px) {
  .visit-block-deco span:after {
    width: 87px;
    height: 43.5px;
  }
}


.visit-block__text {
  position: relative;
  z-index: 2;
  margin-top: 60px;
  padding-left: 36px;

  @media (max-width: 767px) {
    margin-top: 53px;
    padding-left: 16px;
    text-align: center;
  }

  p {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: var(--ls-medium);
    line-height: 1.5;

    @media (max-width: 767px) {
      font-size: 20px;
      width: max-content;
      margin: 0 auto;
      text-align: left;
    }
  }

  .link-arrow {
    margin-top: 26px;
    display: block;
    font-size: 20px;
    font-weight: normal;
    letter-spacing: var(--ls-medium);

    @media (max-width: 767px) {
      font-size: 13px;
      display: inline-block;
      font-weight: bold;
      padding-right: 40px;


    }
  }
}

.link-arrow {
  position: relative;
  transition: all 0.3s;
  padding-right: 60px;
  /* 右側に矢印用のスペースを確保 */



  &:hover {
    opacity: .5;
  }

}

.link-arrow::before {
  display: inline-block;
  content: "";
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #000;

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  transition: all 0.3s ease;

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

.link-arrow::after {
  display: grid;
  place-content: center;
  content: "→";
  width: 50px;
  height: 50px;

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  transition: all 0.3s ease;


  @media (max-width: 767px) {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }
}

.visit-block__text .link-arrow::after,
.visit-block__text .link-arrow::before {
  @media (max-width: 767px) {
    font-size: 12px;
    width: 30px;
    height: 30px;
  }
}

/* ホバー時の効果 */
.link-arrow:hover::after {
  transform: translateY(-50%) scale(1.2);
  /* 右に5px移動 */
}

/* オプション：ホバー時に円も少し大きくする場合 */
.link-arrow:hover::before {
  transform: translateY(-50%) scale(1.05);
}


.visit-block__img {
  img {
    width: 100%;
    height: auto;
  }
}


#scrollBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: var(--color-main);
  color: #000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  /* 最初は非表示 */
  visibility: hidden;
  /* 最初は非表示 */
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 98;

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

  &.visible {
    opacity: 1;
    visibility: visible;
  }

  .arrow-up {
    width: 8px;
    height: 8px;
    border-left: 1px solid black;
    border-top: 1px solid black;
    transform: rotate(45deg);
    margin-top: 4px;
  }
}

#scrollBtn:hover {
  opacity: .5;
}


.price-table.is-pc {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  letter-spacing: var(--ls-medium);
  text-indent: var(--ls-medium);
  display: table !important;

  @media (max-width: 767px) {
    display: none !important;
  }

  th,
  td {
    border: 1px solid black;
    padding: 0.6em;
    font-weight: bold;
  }

  th {
    background-color: var(--color-main);

  }

  .is-small {
    font-size: 13.5px;
  }
}

.price-table.is-sp {
  display: none !important;
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: var(--ls-medium);
  text-indent: var(--ls-medium);

  @media (max-width: 767px) {
    display: table !important;
  }

  th,
  td {
    border: 1px solid black;
    padding: 0.8em;
  }

  .header {
    background-color: var(--color-main);

    text-align: left;
  }

  .price {
    font-weight: bold;
    text-align: left;
  }

  .left-cell {
    text-align: center;
    vertical-align: middle;
  }

  .is-small {
    font-size: 10.5px;
  }
}

.price-block {
  margin-top: 45px;
}

.price-block+* {
  margin-top: 85px;

  @media (max-width: 767px) {
    margin-top: 32px;
  }
}

.price-table-comment {
  margin-top: 27px;
}

.note-p {
  font-size: 16px;
  position: relative;
  padding-left: 1em;
  letter-spacing: var(--ls-medium);
  text-indent: -.5em;

  &::before {
    content: "※";
    display: inline-block;
  }

  &.is-large {
    font-size: 18px;

    @media (max-width: 767px) {
      font-size: 16px;
    }
  }
}

.flow-block+.visit-block {
  margin-top: 132px;

  @media (max-width: 767px) {
    margin-top: 60px;
  }
}

.flow-block-step {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0 25px;
  margin-top: 78px;

  grid-template-areas:
    "step-left step-right"
    "step-left step-center";

  @media (max-width: 767px) {
    grid-template-areas:
      "step-left step-right"
      "step-center step-center";
    gap: 0 15px;

    margin-top: 28px;
  }

  &.flow-block-step--mtS {
    margin-top: 60px;

    @media (max-width: 767px) {
      margin-top: 30px;
    }
  }
}

.flow-block-step.flow-block-step--large {
  grid-template-columns: 106px 1fr;
  margin-top: 0;

  grid-template-areas:
    "step-left step-right"
    "step-center step-center";

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

.flow-block-step__left {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  justify-items: center;
  align-content: flex-start;

  grid-area: step-left;
}

.flow-block-step.flow-block-step--large .flow-block-step__left {
  gap: 10px;
}

.flow-block-step__deco {
  font-family: "Oswald", sans-serif;


  span {
    position: relative;
    display: grid;
    place-content: center;
    background-color: var(--color-main);
    width: 85px;
    height: 85px;
    border-radius: 50%;
    font-size: 19px;
    text-align: center;
    letter-spacing: var(--ls-medium);
    text-indent: var(--ls-medium);
    font-weight: 400;

    @media (max-width: 767px) {
      width: 63.75px;
      height: 63.75px;
      font-size: 14.25px;
    }
  }

  span:after {
    content: "";
    display: inline-block;
    width: 96px;
    height: 48px;
    border: 1px solid #000;
    border-top: none;
    border-radius: 0 0 100px 100px;
    /* 半径を大きくする */
    background-color: transparent;
    box-sizing: border-box;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);

  }
}

@media (max-width: 767px) {
  .flow-block-step__deco span:after {
    width: 72.25px;
    height: 36.125px;

  }

}

.flow-block-step.flow-block-step--large .flow-block-step__deco {
  span {
    width: 93px;
    height: 93px;
  }

  span:after {
    width: 106px;
    height: 53px;
    border-width: 1.5px;

  }
}

.flow-block-step__num {
  font-size: 55px;
  font-weight: 400;
  font-family: "Oswald", sans-serif;
  line-height: 1;
}

.flow-block-step.flow-block-step--large .flow-block-step__num {
  @media (max-width: 767px) {
    font-size: 41.25px;
  }
}

.flow-block-step__right {
  grid-area: step-right;
}

.flow-block-step--point-wrap {
  display: grid;
  grid-template-columns: 66% auto;
  gap: 0 30px;
  align-items: anchor-center;

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

}

.flow-block-step--point-img img {
  width: 100%;
  height: auto;
}

.flow-block-step--large .flow-block-step--point--right {
  @media (max-width: 767px) {
    display: none;
  }

}

.flow-block-step--point--right:has(.flow-block-step--point-img02, .flow-block-step--point-img03) {
  text-align: center;
  align-self: center;
}

.flow-block-step--point--right:has(.flow-block-step--point-img04) {
  align-self: center;
}

.flow-block-step--point-img img.flow-block-step--point-img01 {
  width: 110%;
  height: auto;
}

.flow-block-step--point-img img.flow-block-step--point-img02 {
  width: 55%;
  height: auto;
}

.flow-block-step--point-img img.flow-block-step--point-img03 {
  width: 62%;
  height: auto;
}

.flow-block-step--point-img img.flow-block-step--point-img04 {
  width: 130%;
  height: auto;
}

.flow-block-step-ttl {
  font-size: 24px;
  padding: 25px 0;
  letter-spacing: var(--ls-medium);

  @media (max-width: 767px) {
    font-size: 18px;
    padding: 19.5px 0;
  }
}

.flow-block-step--large .flow-block-step-ttl {
  @media (max-width: 767px) {
    padding-bottom: 0;
  }
}

.flow-block-step-p {
  font-size: 18px;
  letter-spacing: var(--ls-medium);
  line-height: var(--lh-large);

  @media (max-width: 767px) {
    font-size: 16px;
  }
}

.flow-block-step--large .flow-block-step-p {
  @media (max-width: 767px) {
    display: none;
  }
}

.flow-block-step__center {
  grid-area: step-center;
  margin-top: 35px;

  @media (max-width: 767px) {
    margin-top: 25px;
  }
}

.link-btn {
  min-width: 390px;
  text-align: center;
  display: inline-block;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: var(--ls-medium);
  background-color: var(--color-main);
  border-radius: 3em;
  padding: 1.5em calc(2.5em + 50px) 1.5em 4em;

  @media (max-width: 767px) {
    width: 100%;
    font-size: 14px;
    min-width: 0;
    padding: 2em calc(2em + 50px) 2em 1.5em;
  }

  &.link-arrow::before,
  &.link-arrow::after {
    right: 1rem;
  }
}

.link-btn--full {
  width: 100%;
}

.link-btn--square {
  border-radius: .8em;
  font-size: 25px;
  padding: 1em calc(2.5em + 50px) 1em 4em;

  &.link-arrow::before,
  &.link-arrow::after {
    right: 1.5rem;
  }
}

@media (max-width: 767px) {
  .link-btn--square {
    font-size: 18px;
    padding: 1.3em calc(1em + 50px) 1.3em 2em;
  }

  .link-btn--square.link-arrow::before,
  .link-btn--square.link-arrow::after {
    right: 1rem;
  }
}

.link-btn--square.link-arrow::after {
  font-size: 18px;
}

.schedule-details-table-block+.link-btn {
  margin-top: 100px;

  @media (max-width: 767px) {
    margin-top: 40px;
  }
}

.flow-block-step-tel {
  margin-top: 42px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;

  @media (max-width: 767px) {
    margin-top: 20px;
    text-align: center;
  }
}

.link-btn+.class-details-item:not(:first-of-type) {
  margin-top: 100px;

  @media (max-width: 767px) {
    margin-top: 45px;
  }
}

.flow-block-step-tel__txt {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: var(--ls-medium);

  @media (max-width: 767px) {
    font-size: 14px;
  }

  span {
    display: none;
    font-weight: normal;
    font-size: 12px;

    @media (max-width: 767px) {
      display: inline-block;
    }
  }
}

.flow-block-step-tel__tel {
  font-family: "Montserrat", sans-serif;
  font-size: 41px;
  font-weight: 600;
  letter-spacing: var(--ls-medium);
  transition: .3s;

  @media (max-width: 767px) {
    font-size: 37px;
  }

  &:hover {
    opacity: .5;
  }
}


.contact-block {
  margin-top: 45px;

  @media (max-width: 767px) {
    margin-top: 30px;
  }

}

.contact-block-inner+.contact-block-inner {
  margin-top: 60px;

  @media (max-width: 767px) {
    margin-top: 35px;
  }
}

.contact-block+.visit-block {
  margin-top: 105px;

  @media (max-width: 767px) {
    margin-top: 50px;
  }
}

.tel-link {
  display: inline-block;
  font-size: 41px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: var(--ls-medium);
  transition: .3s;

  @media (max-width: 767px) {
    font-size: 37px;
  }

  &:hover {
    opacity: .5;
  }
}

.tel-link-note {
  font-size: 18px;
  letter-spacing: var(--ls-medium);

  @media (max-width: 767px) {
    font-size: 14px;
    display: inline-block;
  }
}

.contact-block-inner {
  .tel-link {
    margin-top: 30px;

    @media (max-width: 767px) {
      margin-top: 5px;
    }
  }

  .note-p {
    margin-top: 20px;
    letter-spacing: .05em;
  }
}

.simple-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px 30px;
  font-size: 18px;
  letter-spacing: var(--ls-medium);

  @media (max-width: 767px) {
    font-size: 16px;
    gap: 20px 15px;

  }

  dt {
    font-weight: bold;
  }
}

.contact-block-sp-note {
  display: none;
  font-size: 12px;

  @media (max-width: 767px) {
    display: block;
    text-align: center;
    margin-top: 15px;
  }
}


.archive__list {
  list-style-type: none;
}

.archive__item {
  border-top: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
  padding: 20px 0;
  margin-bottom: -1px;
}

.archive__link {
  display: grid;
  grid-template-columns: auto 110px 1fr;
  text-decoration: none;
  color: #000;
  transition: opacity 0.3s;

  justify-content: flex-start;
  align-items: baseline;

  @media (max-width: 767px) {
    grid-template-columns: min-content 90px 1fr;
    grid-template-rows: auto auto;
    justify-content: stretch;
    /* グリッド全体を左寄せ */

    width: 100%;
  }
}

.archive__link:hover {
  opacity: 0.6;
}

.archive__date {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  margin-right: 8px;
  letter-spacing: var(--ls-medium);

  @media (max-width: 767px) {
    font-size: 12px;
    margin-bottom: 5px;

    grid-column: 1;
    /* 1列目 */
    grid-row: 1;
    /* 1行目 */
  }
}

.archive__cat {
  font-size: 12px;
  color: #fff;
  background-color: var(--color-cat-green);
  border-radius: 1em;
  line-height: 1.6;
  text-align: center;
  margin-right: 20px;
  letter-spacing: 0;
  display: inline-block;


  @media (max-width: 767px) {
    grid-column: 2;
    /* 2列目 */
    grid-row: 1;
    /* 1行目 */
    margin-right: 0;
  }
}

.archive__title {
  display: inline-block;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: var(--ls-medium);
  text-align: justify;

  @media (max-width: 767px) {
    font-size: 14px;
    width: 100%;
    display: block;

    grid-column: 1 / 4;
    /* 1列目から4列目まで（3列分） */
    grid-row: 2;
    /* 2行目 */
  }
}

.pagination {
  display: flex;
  justify-content: flex-start;
  margin-top: 40px;
  gap: 10px;
}

.pagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #000;
  border: 1px solid var(--color-main);
  transition: .2s;
  ;

  @media (max-width: 767px) {
    width: 46px;
    height: 46px;
    font-size: 12.6px;
  }

  &:hover {
    background-color: var(--color-main);

  }
}

.pagination__item--active {
  background-color: var(--color-main);
  pointer-events: none;
  cursor: none;
}


.news-block {
  margin-top: 65px;

  @media (max-width: 767px) {
    margin-top: 35px;
  }
}

.category-select-wrapper+.news-block {
  @media (max-width: 767px) {
    margin-top: 40px;
  }
}

.mt-news-block-bottom {
  .visit-block {
    margin-top: 120px;

    @media (max-width: 767px) {
      margin-top: 65px;
    }
  }
}

.voice-block {
  margin-top: 55px;

  @media (max-width: 767px) {
    margin-top: 30px;
  }
}

.voice-block__container {
  border-bottom: 1px dashed #ccc;
  padding: 50px 0;
  display: flex;
  flex-wrap: wrap;

  @media (max-width: 767px) {
    display: grid;
    grid-template-columns: 95px 1fr;
    grid-template-areas:
      "image title"
      "subtitle subtitle"
      "text text";
    grid-column-gap: 15px;
    grid-row-gap: 10px;
  }
}

.circle-ttl+.voice-block__container {
  padding-top: 30px;
}

.voice-block__image-container {
  width: 200px;
  margin-right: 20px;

  @media (max-width: 767px) {
    width: 95px;
    margin-right: 0;
    grid-area: image;
  }
}

.voice-block__image {
  width: 195px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-top: 10px;

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

.voice-block__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice-block__content {
  flex: 1;
  min-width: 300px;

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

.voice-block__title {
  font-size: 23px;
  font-weight: bold;
  margin-bottom: 15px;
  line-height: 1.8;
  letter-spacing: var(--ls-medium);

  @media (max-width: 767px) {
    font-size: 18px;
    margin-bottom: 0;
    grid-area: title;
    align-self: center;
  }
}

.voice-block__subtitle {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 30px;
  letter-spacing: var(--ls-medium);

  @media (max-width: 767px) {
    font-size: 14px;
    margin-bottom: 5px;
    grid-area: subtitle;
    padding-top: 5px;
  }
}

.voice-block__text {
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: var(--ls-medium);

  @media (max-width: 767px) {
    font-size: 16px;
    line-height: 1.7;
    grid-area: text;
  }
}


.index-visual {
  background-color: var(--color-main);
  height: 555px;
  position: relative;
  overflow: hidden;

  @media (max-width: 1000px) {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }

  @media (max-width: 767px) {
    padding: 0;
    height: 120vw;
  }


}




.index-visual__text {
  font-size: 35px;
  font-weight: bold;
  letter-spacing: var(--ls-large);
  line-height: 2;
  position: relative;

  @media (max-width: 767px) {
    font-size: 19px;
    width: 84%;
    margin: 0 auto;
    padding: 0;
  }

}

.index-visual__row {
  overflow: hidden;
  height: 1.8em;
}

.index-visual__content {
  display: inline-block;
  transform: translateX(-100%);
}

@keyframes slideIn {
  to {
    transform: translateX(0);
  }
}


.index-visual__svg {
  position: absolute;
  top: 0px;

  @media (max-width: 767px) {
    height: auto;

    svg {
      height: auto;
    }
  }
}

.index-visual__svg.is-pc {
  img {
    width: 1003.7434px;
    height: 100%;
    object-fit: contain;
  }
}

.index-visual__svg.is-pc {

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

.swiper-slide--1 .index-visual__svg.is-sp {
  transform: translateX(-10px);

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

  img {
    width: 115.4%;
  }
}

.swiper-slide--2 .index-visual__svg.is-sp {
  transform: translateX(-4.79px);

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

  img {
    width: 117.5%;
  }
}


.index-visual__svg.is-sp {
  display: none;
  width: 100%;

  @media (max-width: 767px) {
    display: block;
    transform: translateX(-3px);
  }
}


.index-visual__logo.is-pc {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);

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

.index-visual__logo.is-pc {
  /***************************************************
 * Generated by SVG Artista on 6/1/2025, 2:50:47 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

  svg .svg-elem-1 {
    stroke-dashoffset: 129.51671600341797px;
    stroke-dasharray: 129.51671600341797px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0s;
  }

  svg.active .svg-elem-1 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-2 {
    stroke-dashoffset: 154.7145233154297px;
    stroke-dasharray: 154.7145233154297px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.03s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.03s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.03s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.03s;
  }

  svg.active .svg-elem-2 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-3 {
    stroke-dashoffset: 163.12879943847656px;
    stroke-dasharray: 163.12879943847656px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.06s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.06s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.06s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.06s;
  }

  svg.active .svg-elem-3 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-4 {
    stroke-dashoffset: 153.8354034423828px;
    stroke-dasharray: 153.8354034423828px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.09s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.09s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.09s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.09s;
  }

  svg.active .svg-elem-4 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-5 {
    stroke-dashoffset: 154.39453125px;
    stroke-dasharray: 154.39453125px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.12s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.12s;
  }

  svg.active .svg-elem-5 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-6 {
    stroke-dashoffset: 109.01213836669922px;
    stroke-dasharray: 109.01213836669922px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.15s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.15s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.15s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.15s;
  }

  svg.active .svg-elem-6 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-7 {
    stroke-dashoffset: 67.27477264404297px;
    stroke-dasharray: 67.27477264404297px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.18s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.18s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.18s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.18s;
  }

  svg.active .svg-elem-7 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-8 {
    stroke-dashoffset: 93.24402618408203px;
    stroke-dasharray: 93.24402618408203px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.21s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.21s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.21s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.21s;
  }

  svg.active .svg-elem-8 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-9 {
    stroke-dashoffset: 77.87802124023438px;
    stroke-dasharray: 77.87802124023438px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.24s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.24s;
  }

  svg.active .svg-elem-9 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-10 {
    stroke-dashoffset: 68.7000503540039px;
    stroke-dasharray: 68.7000503540039px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.27s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.27s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.27s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.27s;
  }

  svg.active .svg-elem-10 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-11 {
    stroke-dashoffset: 118.45819091796875px;
    stroke-dasharray: 118.45819091796875px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.3s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.3s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.3s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.3s;
  }

  svg.active .svg-elem-11 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-12 {
    stroke-dashoffset: 98.11458587646484px;
    stroke-dasharray: 98.11458587646484px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.32999999999999996s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.32999999999999996s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.32999999999999996s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.32999999999999996s;
  }

  svg.active .svg-elem-12 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-13 {
    stroke-dashoffset: 74.54129028320312px;
    stroke-dasharray: 74.54129028320312px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.36s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.36s;
  }

  svg.active .svg-elem-13 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-14 {
    stroke-dashoffset: 64.73426055908203px;
    stroke-dasharray: 64.73426055908203px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.39s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.39s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.39s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.39s;
  }

  svg.active .svg-elem-14 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-15 {
    stroke-dashoffset: 143.90679931640625px;
    stroke-dasharray: 143.90679931640625px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.42s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.42s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.42s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.42s;
  }

  svg.active .svg-elem-15 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-16 {
    stroke-dashoffset: 133.66940307617188px;
    stroke-dasharray: 133.66940307617188px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.44999999999999996s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.44999999999999996s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.44999999999999996s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.44999999999999996s;
  }

  svg.active .svg-elem-16 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-17 {
    stroke-dashoffset: 98.11473083496094px;
    stroke-dasharray: 98.11473083496094px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.48s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.48s;
  }

  svg.active .svg-elem-17 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-18 {
    stroke-dashoffset: 73.81373596191406px;
    stroke-dasharray: 73.81373596191406px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.51s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.51s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.51s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.51s;
  }

  svg.active .svg-elem-18 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-19 {
    stroke-dashoffset: 151.8893585205078px;
    stroke-dasharray: 151.8893585205078px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.54s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.54s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.54s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.54s;
  }

  svg.active .svg-elem-19 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-20 {
    stroke-dashoffset: 124.2420883178711px;
    stroke-dasharray: 124.2420883178711px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.57s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.57s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.57s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.57s;
  }

  svg.active .svg-elem-20 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-21 {
    stroke-dashoffset: 118.47740936279297px;
    stroke-dasharray: 118.47740936279297px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.6s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.6s;
  }

  svg.active .svg-elem-21 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-22 {
    stroke-dashoffset: 154.34019470214844px;
    stroke-dasharray: 154.34019470214844px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.63s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.63s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.63s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.63s;
  }

  svg.active .svg-elem-22 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-23 {
    stroke-dashoffset: 98.27222442626953px;
    stroke-dasharray: 98.27222442626953px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6599999999999999s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.6599999999999999s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6599999999999999s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.6599999999999999s;
  }

  svg.active .svg-elem-23 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-24 {
    stroke-dashoffset: 165.3204803466797px;
    stroke-dasharray: 165.3204803466797px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.69s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.69s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.69s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.69s;
  }

  svg.active .svg-elem-24 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-25 {
    stroke-dashoffset: 180.81349182128906px;
    stroke-dasharray: 180.81349182128906px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.72s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.72s;
  }

  svg.active .svg-elem-25 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-26 {
    stroke-dashoffset: 57.992706298828125px;
    stroke-dasharray: 57.992706298828125px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.75s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.75s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.75s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.75s;
  }

  svg.active .svg-elem-26 {
    stroke-dashoffset: 0;
    fill: rgb(114, 199, 218);
  }

  svg .svg-elem-27 {
    stroke-dashoffset: 97.498291015625px;
    stroke-dasharray: 97.498291015625px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.78s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.78s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.78s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.78s;
  }

  svg.active .svg-elem-27 {
    stroke-dashoffset: 0;
    fill: rgb(245, 221, 84);
  }

  svg .svg-elem-28 {
    stroke-dashoffset: 97.49827575683594px;
    stroke-dasharray: 97.49827575683594px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8099999999999999s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.8099999999999999s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8099999999999999s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.8099999999999999s;
  }

  svg.active .svg-elem-28 {
    stroke-dashoffset: 0;
    fill: rgb(0, 154, 103);
  }

  svg .svg-elem-29 {
    stroke-dashoffset: 97.50132751464844px;
    stroke-dasharray: 97.50132751464844px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.84s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.84s;
  }

  svg.active .svg-elem-29 {
    stroke-dashoffset: 0;
    fill: rgb(224, 65, 57);
  }

  svg .svg-elem-30 {
    stroke-dashoffset: 97.49829864501953px;
    stroke-dasharray: 97.49829864501953px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.87s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.87s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.87s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.87s;
  }

  svg.active .svg-elem-30 {
    stroke-dashoffset: 0;
    fill: rgb(229, 121, 66);
  }

  svg .svg-elem-31 {
    stroke-dashoffset: 13.670013427734375px;
    stroke-dasharray: 13.670013427734375px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8999999999999999s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.8999999999999999s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8999999999999999s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.8999999999999999s;
  }

  svg.active .svg-elem-31 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-32 {
    stroke-dashoffset: 70.79761505126953px;
    stroke-dasharray: 70.79761505126953px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9299999999999999s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.9299999999999999s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9299999999999999s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.9299999999999999s;
  }

  svg.active .svg-elem-32 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-33 {
    stroke-dashoffset: 15.1300048828125px;
    stroke-dasharray: 15.1300048828125px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.96s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.96s;
  }

  svg.active .svg-elem-33 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-34 {
    stroke-dashoffset: 12.94000244140625px;
    stroke-dasharray: 12.94000244140625px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.99s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.99s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.99s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.99s;
  }

  svg.active .svg-elem-34 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-35 {
    stroke-dashoffset: 31.428186416625977px;
    stroke-dasharray: 31.428186416625977px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.02s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.02s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.02s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.02s;
  }

  svg.active .svg-elem-35 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-36 {
    stroke-dashoffset: 19.579998016357422px;
    stroke-dasharray: 19.579998016357422px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.05s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.05s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.05s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.05s;
  }

  svg.active .svg-elem-36 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-37 {
    stroke-dashoffset: 23.10261344909668px;
    stroke-dasharray: 23.10261344909668px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.08s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.08s;
  }

  svg.active .svg-elem-37 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-38 {
    stroke-dashoffset: 23.100055694580078px;
    stroke-dasharray: 23.100055694580078px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1099999999999999s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.1099999999999999s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1099999999999999s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.1099999999999999s;
  }

  svg.active .svg-elem-38 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-39 {
    stroke-dashoffset: 18.3900146484375px;
    stroke-dasharray: 18.3900146484375px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.14s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.14s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.14s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.14s;
  }

  svg.active .svg-elem-39 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-40 {
    stroke-dashoffset: 39.41064453125px;
    stroke-dasharray: 39.41064453125px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.17s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.17s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.17s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.17s;
  }

  svg.active .svg-elem-40 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-41 {
    stroke-dashoffset: 39.41064453125px;
    stroke-dasharray: 39.41064453125px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.2s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.2s;
  }

  svg.active .svg-elem-41 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-42 {
    stroke-dashoffset: 39.41064453125px;
    stroke-dasharray: 39.41064453125px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.23s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.23s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.23s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.23s;
  }

  svg.active .svg-elem-42 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-43 {
    stroke-dashoffset: 39.41066360473633px;
    stroke-dasharray: 39.41066360473633px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.26s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.26s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.26s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.26s;
  }

  svg.active .svg-elem-43 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-44 {
    stroke-dashoffset: 39.41765213012695px;
    stroke-dasharray: 39.41765213012695px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.29s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.29s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.29s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.29s;
  }

  svg.active .svg-elem-44 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-45 {
    stroke-dashoffset: 39.41068649291992px;
    stroke-dasharray: 39.41068649291992px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.3199999999999998s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.3199999999999998s;
  }

  svg.active .svg-elem-45 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-46 {
    stroke-dashoffset: 39.41761016845703px;
    stroke-dasharray: 39.41761016845703px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3499999999999999s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.3499999999999999s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3499999999999999s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.3499999999999999s;
  }

  svg.active .svg-elem-46 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-47 {
    stroke-dashoffset: 17.25792407989502px;
    stroke-dasharray: 17.25792407989502px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.38s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.38s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.38s,
      fill 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.38s;
  }

  svg.active .svg-elem-47 {
    stroke-dashoffset: 0;
  }

}

.index-visual__logo.is-sp {
  display: none;
  position: absolute;
  bottom: 10vw;
  left: 50%;
  transform: translateX(-50%);

  @media (max-width: 767px) {
    display: block;

  }

  svg {
    width: 74vw;
    height: auto;
  }
}

.index-visual__logo.is-sp {
  /***************************************************
 * Generated by SVG Artista on 6/1/2025, 7:23:41 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

  svg .svg-elem-1 {
    stroke-dashoffset: 95.5249252319336px;
    stroke-dasharray: 95.5249252319336px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
  }

  svg.active .svg-elem-1 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-2 {
    stroke-dashoffset: 114.03689575195312px;
    stroke-dasharray: 114.03689575195312px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.04s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8200000000000001s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.04s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8200000000000001s;
  }

  svg.active .svg-elem-2 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-3 {
    stroke-dashoffset: 120.13921356201172px;
    stroke-dasharray: 120.13921356201172px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.08s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8400000000000001s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.08s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8400000000000001s;
  }

  svg.active .svg-elem-3 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-4 {
    stroke-dashoffset: 113.28321838378906px;
    stroke-dasharray: 113.28321838378906px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8600000000000001s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8600000000000001s;
  }

  svg.active .svg-elem-4 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-5 {
    stroke-dashoffset: 113.898193359375px;
    stroke-dasharray: 113.898193359375px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.16s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.88s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.16s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.88s;
  }

  svg.active .svg-elem-5 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-6 {
    stroke-dashoffset: 80.5011978149414px;
    stroke-dasharray: 80.5011978149414px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
  }

  svg.active .svg-elem-6 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-7 {
    stroke-dashoffset: 49.9296875px;
    stroke-dasharray: 49.9296875px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.92s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.92s;
  }

  svg.active .svg-elem-7 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-8 {
    stroke-dashoffset: 68.95294952392578px;
    stroke-dasharray: 68.95294952392578px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.28s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9400000000000001s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.28s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9400000000000001s;
  }

  svg.active .svg-elem-8 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-9 {
    stroke-dashoffset: 57.67362976074219px;
    stroke-dasharray: 57.67362976074219px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.32s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9600000000000001s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.32s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9600000000000001s;
  }

  svg.active .svg-elem-9 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-10 {
    stroke-dashoffset: 50.9599609375px;
    stroke-dasharray: 50.9599609375px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.98s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.98s;
  }

  svg.active .svg-elem-10 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-11 {
    stroke-dashoffset: 87.38109588623047px;
    stroke-dasharray: 87.38109588623047px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }

  svg.active .svg-elem-11 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-12 {
    stroke-dashoffset: 72.48609161376953px;
    stroke-dasharray: 72.48609161376953px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.44s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.02s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.44s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.02s;
  }

  svg.active .svg-elem-12 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-13 {
    stroke-dashoffset: 55.20249557495117px;
    stroke-dasharray: 55.20249557495117px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.04s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.04s;
  }

  svg.active .svg-elem-13 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-14 {
    stroke-dashoffset: 48.0023078918457px;
    stroke-dasharray: 48.0023078918457px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.52s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.06s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.52s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.06s;
  }

  svg.active .svg-elem-14 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-15 {
    stroke-dashoffset: 106.04822540283203px;
    stroke-dasharray: 106.04822540283203px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.56s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.56s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s;
  }

  svg.active .svg-elem-15 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-16 {
    stroke-dashoffset: 98.60455322265625px;
    stroke-dasharray: 98.60455322265625px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
  }

  svg.active .svg-elem-16 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-17 {
    stroke-dashoffset: 72.48611450195312px;
    stroke-dasharray: 72.48611450195312px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.64s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.12s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.64s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.12s;
  }

  svg.active .svg-elem-17 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-18 {
    stroke-dashoffset: 54.685176849365234px;
    stroke-dasharray: 54.685176849365234px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.68s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1400000000000001s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.68s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1400000000000001s;
  }

  svg.active .svg-elem-18 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-19 {
    stroke-dashoffset: 111.99801635742188px;
    stroke-dasharray: 111.99801635742188px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1600000000000001s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1600000000000001s;
  }

  svg.active .svg-elem-19 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-20 {
    stroke-dashoffset: 91.69993591308594px;
    stroke-dasharray: 91.69993591308594px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.76s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1800000000000002s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.76s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1800000000000002s;
  }

  svg.active .svg-elem-20 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-21 {
    stroke-dashoffset: 87.37604522705078px;
    stroke-dasharray: 87.37604522705078px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
  }

  svg.active .svg-elem-21 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-22 {
    stroke-dashoffset: 113.73706817626953px;
    stroke-dasharray: 113.73706817626953px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.22s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.22s;
  }

  svg.active .svg-elem-22 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-23 {
    stroke-dashoffset: 72.58556365966797px;
    stroke-dasharray: 72.58556365966797px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.88s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.24s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.88s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.24s;
  }

  svg.active .svg-elem-23 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-24 {
    stroke-dashoffset: 121.8482437133789px;
    stroke-dasharray: 121.8482437133789px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.92s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.26s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.92s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.26s;
  }

  svg.active .svg-elem-24 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-25 {
    stroke-dashoffset: 133.0607452392578px;
    stroke-dasharray: 133.0607452392578px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.28s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.28s;
  }

  svg.active .svg-elem-25 {
    stroke-dashoffset: 0;
    fill: rgb(35, 24, 21);
  }

  svg .svg-elem-26 {
    stroke-dashoffset: 42.06330490112305px;
    stroke-dasharray: 42.06330490112305px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
  }

  svg.active .svg-elem-26 {
    stroke-dashoffset: 0;
    fill: rgb(114, 199, 218);
  }

  svg .svg-elem-27 {
    stroke-dashoffset: 70.34886169433594px;
    stroke-dasharray: 70.34886169433594px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.04s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.32s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.04s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.32s;
  }

  svg.active .svg-elem-27 {
    stroke-dashoffset: 0;
    fill: rgb(245, 221, 84);
  }

  svg .svg-elem-28 {
    stroke-dashoffset: 70.3318862915039px;
    stroke-dasharray: 70.3318862915039px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.34s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.34s;
  }

  svg.active .svg-elem-28 {
    stroke-dashoffset: 0;
    fill: rgb(0, 154, 103);
  }

  svg .svg-elem-29 {
    stroke-dashoffset: 70.33190155029297px;
    stroke-dasharray: 70.33190155029297px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.12s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.36s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.12s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.36s;
  }

  svg.active .svg-elem-29 {
    stroke-dashoffset: 0;
    fill: rgb(224, 65, 57);
  }

  svg .svg-elem-30 {
    stroke-dashoffset: 70.34884643554688px;
    stroke-dasharray: 70.34884643554688px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.16s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.38s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.16s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.38s;
  }

  svg.active .svg-elem-30 {
    stroke-dashoffset: 0;
    fill: rgb(229, 121, 66);
  }

  svg .svg-elem-31 {
    stroke-dashoffset: 10.349998474121094px;
    stroke-dasharray: 10.349998474121094px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s;
  }

  svg.active .svg-elem-31 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-32 {
    stroke-dashoffset: 51.22443389892578px;
    stroke-dasharray: 51.22443389892578px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.24s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.42s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.24s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.42s;
  }

  svg.active .svg-elem-32 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-33 {
    stroke-dashoffset: 11.400001525878906px;
    stroke-dasharray: 11.400001525878906px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.28s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.28s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s;
  }

  svg.active .svg-elem-33 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-34 {
    stroke-dashoffset: 9.829994201660156px;
    stroke-dasharray: 9.829994201660156px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.32s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.46s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.32s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.46s;
  }

  svg.active .svg-elem-34 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-35 {
    stroke-dashoffset: 23.057191848754883px;
    stroke-dasharray: 23.057191848754883px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.36s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.48s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.36s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.48s;
  }

  svg.active .svg-elem-35 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-36 {
    stroke-dashoffset: 14.569999694824219px;
    stroke-dasharray: 14.569999694824219px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
  }

  svg.active .svg-elem-36 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-37 {
    stroke-dashoffset: 17.10164451599121px;
    stroke-dasharray: 17.10164451599121px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.52s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.52s;
  }

  svg.active .svg-elem-37 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-38 {
    stroke-dashoffset: 17.10164451599121px;
    stroke-dasharray: 17.10164451599121px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.48s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.54s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.48s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.54s;
  }

  svg.active .svg-elem-38 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-39 {
    stroke-dashoffset: 13.729995727539062px;
    stroke-dasharray: 13.729995727539062px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.52s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.52s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s;
  }

  svg.active .svg-elem-39 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-40 {
    stroke-dashoffset: 28.76746368408203px;
    stroke-dasharray: 28.76746368408203px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.58s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.58s;
  }

  svg.active .svg-elem-40 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-41 {
    stroke-dashoffset: 28.77442741394043px;
    stroke-dasharray: 28.77442741394043px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
  }

  svg.active .svg-elem-41 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-42 {
    stroke-dashoffset: 28.77442741394043px;
    stroke-dasharray: 28.77442741394043px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6400000000000001s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.62s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6400000000000001s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.62s;
  }

  svg.active .svg-elem-42 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-43 {
    stroke-dashoffset: 28.77442741394043px;
    stroke-dasharray: 28.77442741394043px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6400000000000001s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6400000000000001s;
  }

  svg.active .svg-elem-43 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-44 {
    stroke-dashoffset: 28.77442169189453px;
    stroke-dasharray: 28.77442169189453px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.72s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6600000000000001s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.72s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6600000000000001s;
  }

  svg.active .svg-elem-44 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-45 {
    stroke-dashoffset: 28.76746368408203px;
    stroke-dasharray: 28.76746368408203px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.76s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6800000000000002s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.76s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6800000000000002s;
  }

  svg.active .svg-elem-45 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-46 {
    stroke-dashoffset: 28.774415969848633px;
    stroke-dasharray: 28.774415969848633px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
  }

  svg.active .svg-elem-46 {
    stroke-dashoffset: 0;
  }

  svg .svg-elem-47 {
    stroke-dashoffset: 12.910329818725586px;
    stroke-dasharray: 12.910329818725586px;
    -webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.84s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7200000000000002s;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 1.84s,
      fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7200000000000002s;
  }

  svg.active .svg-elem-47 {
    stroke-dashoffset: 0;
  }

}



.index-news-block {
  width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: 150px 1fr 140px;
  grid-template-areas: "title list more";
  gap: 30px;
  align-items: start;

  @media (max-width: 767px) {
    grid-template-columns: auto auto;
    grid-template-areas:
      "title more"
      "list list";
    gap: 0 20px;
  }
}

.index-news-block__title {
  grid-area: title;
  font-size: 31px;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: var(--ls-medium);

  @media (max-width: 767px) {
    font-size: 20px;
    align-self: center;
  }
}

.index-news-block__list {
  grid-area: list;
  list-style: none;
  padding: 0;
  margin: 0;

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

.index-news-block__item {

  display: flex;
  align-items: baseline;

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

  &:not(:last-of-type) {
    margin-bottom: 15px;

    @media (max-width: 767px) {
      margin-bottom: 25px;

    }
  }
}

.index-news-block__date {
  font-size: 14px;
  font-weight: bold;
  margin-right: 8px;
  flex-shrink: 0;
  width: 100px;
  letter-spacing: var(--ls-medium);

  @media (max-width: 767px) {
    font-size: 12px;
    display: inline-block;
    margin-bottom: 5px;
    width: auto;
    margin-right: 0;
  }
}

.index-news-block__cat {
  font-size: 12px;
  display: grid;
  place-content: center;
  width: 79px;
  background-color: var(--color-cat-green);
  border-radius: 1em;
  color: #fff;
  margin-right: 20px;
}

@media (max-width: 767px) {
  .index-news-block__cat {
    display: inline-block;
    text-align: center;
  }
}

.index-news-block__text {
  font-size: 16px;
  margin: 0;
  text-decoration: none;
  letter-spacing: var(--ls-medium);
  width: 65%;

  &:hover {
    opacity: .5;
  }

  @media (max-width: 767px) {
    font-size: 14px;
    display: block;
    width: 100%;
  }
}

.index-news-block__more.link-more {
  grid-area: more;

  &:hover {
    opacity: .5;
  }

  @media (max-width: 767px) {
    justify-self: end;
    width: 66px;
    height: 66px;
    font-size: 10px;
  }
}

.link-more {
  font-size: 15px;
  text-decoration: none;
  color: #333;
  background-color: var(--color-main);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: var(--ls-medium);
  transition: .2s;

  &.is-center {
    margin: 0 auto;
  }

  &:hover {
    opacity: .5;
  }

  @media (max-width: 767px) {
    font-size: 14px;
    width: 108px;
    height: 108px;
  }
}

.index-about-block {
  margin-top: 85px;

  @media (max-width: 767px) {
    margin-top: 53px;
  }

  .link-more {
    margin-top: 40px;

    @media (max-width: 767px) {
      margin-top: 10px;
    }
  }
}


.index-about-block__text {
  margin-top: 45px;

  @media (max-width: 767px) {
    margin-top: 25px;
  }
}

.index-about-block__text p {
  font-size: 18px;
  line-height: var(--lh-large);
  letter-spacing: var(--ls-medium);

  @media (max-width: 767px) {
    font-size: 16px;
  }
}

.index-course-block {
  margin-top: 68px;

  @media (max-width: 767px) {
    margin-top: 50px;
  }
}

.index-course-block-bnr {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;

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

.index-course-block-bnr__img {
  a {
    display: block;
  }

  a img {
    border-radius: 1em;
  }

  a:hover {
    opacity: .7;
  }

  .is-pc {
    @media (max-width: 767px) {
      display: none;
    }
  }

  .is-sp {
    display: none;

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

.index-staff-block {
  margin-top: 100px;

  @media (max-width: 767px) {
    margin-top: 45px;
  }
}

.index-staff-block__inner {
  display: grid;
  grid-template-columns: 7fr 2.67fr;
  grid-gap: 30px;
  position: relative;

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

.index-staff-block__text {
  font-size: 18px;
  letter-spacing: var(--ls-medium);
  line-height: var(--lh-large);

  @media (max-width: 767px) {
    font-size: 16px;
    order: 2;
  }
}

.index-staff-block__img {
  position: relative;
  width: 100%;
  overflow: visible;
  height: 250px;
  /* min-height と max-height の代わりに固定高さを使用 */

  @media (max-width: 767px) {
    height: 60vw;
    margin-left: calc((-100vw + 100%) / 2);
    width: 100vw;
    min-height: 0;
    order: 1;
  }

  img {
    width: 100%;
    height: 100%;
    /* auto から 100% に変更 */
    display: block;
    object-fit: cover;
    /* 画像が切り取られても全体を覆うようにする */
    object-position: top center;
    /* 中央に配置 */

    @media (min-width: 901px) {
      width: calc(100% + ((100vw - 900px) / 2));
      max-width: none;
      position: absolute;
      left: 0;
    }

    @media (max-width: 900px) {
      width: calc(100% + 30px);
      position: absolute;
      right: -30px;
    }

    @media (max-width: 767px) {
      margin-left: calc((-100vw + 100%) / 2);
      width: 100vw;
      right: auto;
      left: auto;
      height: 60vw;
      position: relative;
    }
  }
}

.index-staff-block .link-more {
  transform: translateY(-25px);

  @media (max-width: 767px) {
    transform: unset;
    margin-top: 20px;
  }
}

.index-link-block {
  margin-top: 45px;

  @media (max-width: 767px) {
    margin-top: 30px;
  }
}

.index-link-block__lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  list-style: none;

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

  }

  img {
    border-radius: 1em;

    &.is-pc {
      @media (max-width: 767px) {
        display: none;
      }
    }

    &.is-sp {
      display: none;

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

  a {
    display: block;
  }

  a:hover {
    opacity: .7;
  }
}

.index-management-block {
  margin-top: 60px;

  @media (max-width: 767px) {
    margin-top: 40px;
  }
}

.index-management-block__text {
  font-size: 18px;
  letter-spacing: var(--ls-medium);
  line-height: var(--lh-large);

  @media (max-width: 767px) {
    font-size: 16px;
  }

  a {
    color: var(--color-sub-sky);
    text-decoration: underline;
  }

  a:hover {
    opacity: .5;
  }
}

.index-management-block__text p+p {
  margin-top: 30px;
}

.news-detail-block {
  margin-top: 40px;

  @media (max-width: 767px) {
    margin-top: 35px;
  }
}

.news-detail-block__meta-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
}

.news-detail-block__cat {
  font-size: 12px;
  color: #fff;
  background-color: #009a67;
  padding: .35em 1.5em;
  line-height: 1;
  border-radius: 1em;
}

.news-detail-block__date {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: var(--ls-medium);

  @media (max-width: 767px) {
    font-size: 12px;
  }
}

.news-detail-block__title {
  margin-top: 25px;
  font-size: 34px;
  font-weight: bold;
  letter-spacing: var(--ls-medium);


  @media (max-width: 767px) {
    margin-top: 30px;
    font-size: 24px;
  }
}

.news-detail-block__contents {
  margin-top: 40px;
  font-size: 18px;
  letter-spacing: var(--ls-medium);
  line-height: var(--lh-large);

  @media (max-width: 767px) {
    margin-top: 30px;
    font-size: 16px;
  }

  p+* {
    margin-top: 30px;

    @media (max-width: 767px) {
      margin-top: 20px;
    }
  }
}


.is-style-left_line {
  font-size: 26px;
  border-left: 3px solid var(--color-main);
  padding-left: 12px;

  @media (max-width: 767px) {
    font-size: 18px;
    border-left: 1.6px solid var(--color-main);
    padding-left: 7px;

  }

  &+* {
    margin-top: 30px;

    @media (max-width: 767px) {
      margin-top: 15px;
    }
  }
}

.is-style-circle-ttl+* {
  margin-top: 30px;

  @media (max-width: 767px) {
    margin-top: 15px;
  }
}

.is-style-btn-arrow .wp-block-button__link {
  background-color: var(--color-main);
  color: #333;
  font-size: 14px;
  font-weight: bold;
  padding: 1em 2em;
  min-width: 185px;

  @media (max-width: 767px) {
    font-size: 12px;
    min-width: 160px;
  }

  &:hover {
    opacity: .7;
  }
}


.post-navigation {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.post-navigation-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 800px;
}

.nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--color-main);
  color: #333;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;


  @media (max-width: 767px) {
    width: 46px;
    height: 46px;

  }
}

.nav-button:hover {
  background-color: var(--color-main);
}

.nav-button.disabled {
  opacity: 0.5;
  cursor: default;
}

.archive-button {
  background-color: var(--color-main);
  border-radius: 30px;
  padding: 0 40px;
  width: auto;
  min-width: 184px;

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

.archive-text {
  font-size: 14px;

  @media (max-width: 767px) {
    font-size: 12px;
  }
}

.nav-arrow {
  font-size: 12px;
}

.banner-block {
  border-top: 1.5px solid #000;
  margin-top: 65px;
  padding-top: 53px;
  padding-bottom: 53px;
}

@media (max-width: 767px) {
  .banner-block {
    padding-top: 43px;
    padding-bottom: 43px;
    margin-top: 50px;
    margin: 50px calc(50% - 50vw) 0;
    width: 100vw;
  }

  .banner-block .container--900 {
    width: 80%;
    margin: 0 auto;
  }
}

.banner-block-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 18px 170px;

  list-style: none;

  img {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .banner-block-list {
    grid-template-columns: 1fr 1fr;
    gap: 20px 46px;

  }
}

.banner-block-list__item {
  place-content: center;

  a {
    display: inline-block;
  }

  a:hover {
    img {
      opacity: .5;
    }
  }
}


.page-select {
  width: 100%;
  height: 32px;
  font-size: 14px;
  border: 1.5px solid #000;
  background-color: white;
  padding: 0 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8"><polyline points="2,2 6,6 10,2" fill="none" stroke="%23000" stroke-width="1.5"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 8px;
  padding-right: 50px;
  box-sizing: border-box;

  text-align: center;
  text-align: -webkit-center;
}

.category-select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-top: 12px;
}

.category-select-wrapper .page-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

.category-select-wrapper::after {
  content: '';
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5px;
  height: 100%;
  background-color: #000;
  pointer-events: none;
}

.page-select:hover {
  background-color: #ffffff;
}

.page-select:focus {
  outline: none;
  border-color: #000;
}

.category-select-block {
  margin-top: 65px;
}

.category-select-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 25px;
  justify-content: center;
  align-items: center;
  list-style: none;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: var(--ls-large);
  line-height: 1.1;
}

.category-select-list li:not(:first-of-type)::before {
  content: "";
  width: 1px;
  height: 1em;
  background-color: #000;
  display: inline-block;
  margin-right: 25px;
}

.category-select-list li a:hover {
  opacity: .5;
}

.category-select-list .is-active a {
  position: relative;
}

.category-select-list .is-active a:after {
  content: "";
  width: 100%;
  height: 3px;
  background-color: var(--color-main);
  display: inline-block;
  bottom: -12px;
  position: absolute;
  right: 0;
}


/* 出し分け */
.is-pc {
  display: block !important;
}

@media (max-width: 767px) {
  .is-pc {
    display: none !important;
  }
}

.is-sp {
  display: none !important;
}

@media (max-width: 767px) {
  .is-sp {
    display: block !important;
  }
}

.about-block__flow {
  margin-top: 60px;

  @media (max-width: 767px) {
    margin-top: 40px;
  }
}

/* aboutページのポイントフロー */
.flowlist-block {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  gap: 0 6%;
}

.flowlist-block__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  position: relative;
}

.flowlist-block__item--num {
  font-family: 'Oswald', 'Montserrat', sans-serif;
  font-size: 19px;
  letter-spacing: 0.1em;
  font-weight: 400;
  margin-bottom: 23px;
  border-bottom: 3px solid #000;
  padding-bottom: 4px;
  align-self: self-start;
}

.flowlist-block__item--txt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-main);
  border-radius: 50%;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: var(--lh-large);
  letter-spacing: var(--ls-medium);

  position: relative;

}

.flowlist-block__item--txt br {
  @media (max-width: 767px) {
    display: none;
  }
}


.flowlist-block__item:not(:last-child) .flowlist-block__item--txt::after {
  content: "";
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 42px;
  background: url('data:image/svg+xml;utf8,<svg width="22" height="42" viewBox="0 0 22 42" fill="none" xmlns="http://www.w3.org/2000/svg"><polyline points="2,2 20,21 2,40" stroke="%23000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
  display: block;
}

/* スマホ対応 */
@media (max-width: 900px) {
  .flowlist-block__item--txt {
    width: 140px;
    height: 140px;
    font-size: 18px;
  }

  .flowlist-block__item--num {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .flowlist-block__item:not(:last-child)::after {
    right: -24px;
    font-size: 32px;
  }
}

@media (max-width: 767px) {
  .flowlist-block {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4つのアイテムを等幅で */
    gap: 10%;
    align-items: normal;
  }

  .flowlist-block__item--txt {
    width: 100%;
    height: auto;
    font-size: 14px;
    aspect-ratio: unset;
    padding: 1em .5em;
    border-radius: 2em;
    flex: 1;
    /* 余った空間を埋めて高さを揃える */
    display: flex;
    align-items: center;
    /* テキストを中央揃えにしたい場合 */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    /* 必要に応じて */
    justify-self: center;
    /* 中央揃え */
    align-self: stretch;
    /* 高さを揃える */
    display: flex;
    align-items: center;
    /* 縦書きテキストを中央配置 */
  }

  .flowlist-block__item:not(:last-child) .flowlist-block__item--txt::after {
    right: unset;
    left: calc(100% + 6vw);
  }


  .flowlist-block__item {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0;
    flex: 1;

    display: grid;
    grid-template-rows: auto 1fr;
  }

  .flowlist-block__item--num {
    font-size: 14px;
    margin-bottom: 18px;
    padding-bottom: 0;
    align-self: center;
  }

}

@media (max-width: 500px) {

  .flowlist-block__item:not(:last-child) .flowlist-block__item--txt::after {
    left: calc(100% + 3.5vw);
  }
}


.highlight {
  background: linear-gradient(transparent 60%, var(--color-main) 60%);
  display: inline;
  padding: 0 1px 0px;

  @media (max-width: 767px) {
    font-size: 16px;
  }
}

.highlight.highlight--bold {
  background: linear-gradient(transparent 23%,
      var(--color-main) 23%,
      var(--color-main) 77%,
      transparent 77%);
  display: inline-block;




}

.highlight.highlight--bold:has(.highlight--bold__inline) {
  @media (max-width: 767px) {
    background: none;
  }
}

.highlight--bold__inline {
  @media (max-width: 767px) {
    background: linear-gradient(transparent 15%,
        var(--color-main) 15%,
        var(--color-main) 85%,
        transparent 85%);
  }
}


@media (max-width: 767px) {
  .highlight:has(.inline) {
    background: none;

  }

  .highlight .inline {
    display: inline;
    background: linear-gradient(transparent 5%,
        var(--color-main) 5%,
        var(--color-main) 95%,
        transparent 95%);
  }
}


.about-block {
  margin-top: 60px;
  padding-bottom: 50px;

  @media (max-width: 767px) {
    margin-top: 35px;
    padding-bottom: 55px;
  }
}

.about-block-inner {
  position: relative;
}

.about-block-inner::after {
  content: "";
  background-image: url(../img/about-block-img.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 300px;
  height: 286.6px;
  object-fit: cover;
  position: absolute;
  display: inline-block;
  bottom: 0;
  right: -63px;
  z-index: -1;


}

@media (max-width: 767px) {
  .about-block-inner::after {
    display: none;
  }
}


.about-block__read .highlight {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: var(--ls-medium);
  line-height: var(--lh-medium);

  @media (max-width: 767px) {
    font-size: 18px;
  }
}

.about-block-img {
  display: none;
  text-align: center;
  margin-top: 20px;

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

.about-block-img img {
  width: 56%;
  min-width: 211px;
  height: 100%;
  object-fit: contain;
}

.about-block__read--main {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: var(--ls-medium);
  line-height: var(--lh-medium);
  margin-top: 40px;

  @media (max-width: 767px) {
    font-size: 20px;
    margin-top: 20px;
  }
}

.about-block__txt {
  font-size: 18px;
  margin-top: 35px;
  letter-spacing: var(--ls-medium);
  line-height: var(--lh-large);
  text-align: justify;

  @media (max-width: 767px) {
    font-size: 16px;
    margin-top: 40px;
  }
}

.bg-cream {
  background-color: var(--color-cream);
  padding: 90px 0 90px;

  @media (max-width: 900px) {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 60px 1.5em 60px;
  }

  @media (max-width: 767px) {
    padding-left: 0;
    padding-right: 0;
    padding-top: 40px;
    padding-bottom: 62px;
  }
}

.bg-cream .container--900 {
  @media (max-width: 767px) {
    width: 84%;
  }
}

.bg-cream .flow-block-step {
  margin-top: 0;
}


.wave-line {
  position: relative;
  font-size: 16px;
  font-weight: bold;
  padding: 0 .5em;
  margin-left: .3em;
  margin-bottom: 50px;
  letter-spacing: var(--ls-medium);
  display: inline-block;

  @media (max-width: 767px) {
    margin-bottom: 35px;
  }
}

.wave-line::after {
  content: "";
  display: block;
  position: absolute;
  right: 50%;
  transform: translateX(50%);
  bottom: -20px;
  height: 10px;
  width: 120px;
  background-image: url(../img/wave-line.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}


.flow-block-step__center .highlight--bold {
  font-size: 20px;
  letter-spacing: var(--ls-medium);

  @media (max-width: 767px) {
    font-size: 18px;
  }
}

.flow-block-step__abouttxt {
  margin-top: 30px;
  font-size: 18px;
  letter-spacing: var(--ls-medium);
  line-height: var(--lh-large);
  text-align: justify;

  @media (max-width: 767px) {
    margin-top: 22px;
    font-size: 16px;
  }
}

.flow-block-step__abouttxt+.highlight.highlight--bold {
  margin-top: 50px;

  @media (max-width: 767px) {
    margin-top: 35px;
  }
}



.flow-block-step--point-txt {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: var(--ls-medium);
  line-height: 1;
  padding: .8em 1em .5em;
  min-width: 257px;
  display: inline-block;
  border-radius: 2em;
  text-align: center;
  text-indent: .1em;


  background-color: var(--color-main);

  @media (max-width: 767px) {
    width: 100%;
    font-size: 14px;

    min-width: 0px;
  }
}


.flow-block-step.flow-block-step--large .flow-block-step__deco {
  span {
    @media (max-width: 767px) {
      width: 63.75px;
      height: 63.75px;
      font-size: 14.25px;
    }
  }
}



@media (max-width: 767px) {
  .flow-block-step.flow-block-step--large .flow-block-step__deco span::after {
    width: 72.25px;
    height: 36.125px;
  }
}


.wrap-yellow {
  background-color: var(--color-main);
  padding: 50px 55px 55px;
  border-radius: 1em;

  @media (max-width: 767px) {
    padding: 35px 20px 55px;
  }

  h4 {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: var(--ls-medium);

    @media (max-width: 767px) {
      font-size: 18px;
    }

  }

  .is-center {
    text-align: center;

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

  h5 {
    font-size: 18px;
    font-weight: bold;
    margin-top: 30px;
    letter-spacing: var(--ls-medium);

    @media (max-width: 767px) {
      margin-top: 20px;
      font-size: 16px;
    }
  }

  .list {
    margin-top: 30px;

    @media (max-width: 767px) {
      margin-top: 20px;
    }

    li {
      font-size: 18px;

      @media (max-width: 767px) {
        font-size: 16px;
      }
    }
  }

  p {
    margin-top: 40px;
    font-size: 18px;
    letter-spacing: var(--ls-medium);
    line-height: var(--lh-large);
    text-align: justify;

    @media (max-width: 767px) {
      font-size: 16px;
    }
  }

  p:first-child {
    margin-top: 0;
  }
}

.wrap-yellow:not(:first-of-type) {
  margin-top: 40px;

  @media (max-width: 767px) {
    margin-top: 30px;
  }
}

.wrap-yellow+.highlight.highlight--bold {
  margin-top: 50px;

  @media (max-width: 767px) {
    margin-top: 44px;
  }
}

.about-point:not(:has(.bg-cream)) {
  padding-top: 90px;
  padding-bottom: 90px;

  @media (max-width: 767px) {
    padding-top: 50px;
    padding-bottom: 55px;
  }
}

.staff-block {
  padding-top: 60px;

  @media (max-width: 767px) {
    padding-top: 40px;
  }
}

.staff-block__title {
  font-size: 23px;
  line-height: 1.8;
  letter-spacing: var(--ls-medium);

  @media (max-width: 767px) {
    br {
      display: none;
    }

    font-size: 20px;
  }
}

.staff-block__title+.staff-block-profile {
  margin-top: 60px;

  @media (max-width: 767px) {
    margin-top: 25px;
  }
}

.staff-block-profile-item-name--name {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: var(--ls-medium);

  @media (max-width: 767px) {
    font-size: 16px;
  }

  br.is-sp {
    display: none;

    @media (max-width: 767px) {
      display: block;

    }
  }
}

.staff-block-profile-item-name--ttl {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: var(--ls-medium);
  line-height: 2;
  margin-top: 20px;

  @media (max-width: 767px) {
    font-size: 14px;
    margin-top: 15px;
  }
}

.staff-block-profile-item {
  display: grid;
  grid-template-columns: auto 200px;
  grid-template-rows: auto auto;
  grid-template-areas: "staff-name staff-img"
    "staff-text staff-img";
  gap: 25px 38px;

  @media (max-width: 767px) {
    grid-template-columns: auto 43%;
    grid-template-areas: "staff-name staff-img"
      "staff-text staff-text";
    gap: 25px 6%;
  }
}

.staff-block-profile-item+.staff-block-profile-item {
  margin-top: 75px;

  @media (max-width: 767px) {
    margin-top: 42px;
  }
}

.staff-block-profile-item-name {
  grid-area: staff-name;

  @media (max-width: 767px) {
    place-content: center;
  }
}

.staff-block-profile-item-img {
  grid-area: staff-img;


  img {
    width: 100%;
    height: auto;
  }
}

.staff-block-profile-item-text {
  grid-area: staff-text;
  font-size: 18px;
  letter-spacing: var(--ls-medium);
  line-height: var(--lh-large);
  text-align: justify;

  @media (max-width: 767px) {
    font-size: 16px;
  }
}


.expert-block {
  padding-top: 100px;

  @media (max-width: 767px) {
    padding-top: 40px;
  }
}

.expert-block-read {
  font-size: 18px;
  letter-spacing: var(--ls-medium);
  line-height: var(--lh-large);
  text-align: justify;
  margin-bottom: 86px;

  @media (max-width: 767px) {
    font-size: 16px;
    margin-bottom: 35px;
  }
}


.flow-block-step--sp {
  display: none;

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

  p {
    font-size: 16px;
    letter-spacing: var(--ls-medium);
    line-height: var(--lh-large);
    text-align: justify;
  }

  .flow-block-step--sp-img {
    display: block;
    margin-top: 20px;
    text-align: center;

    img {
      width: 100%;
      height: auto;
    }

    .flow-block-step--sp-img01 {
      width: 65%;
    }

    .flow-block-step--sp-img02 {
      width: 47.5%;
    }

    .flow-block-step--sp-img03 {
      width: 47.5%;
    }

    .flow-block-step--sp-img04 {
      width: 90%;
    }
  }


  .flow-block-step--sp-img:has(.flow-block-step--sp-img04) {
    margin-top: 30px;
  }
}

.flow-block-step--sp+.wave-line-wrap {
  @media (max-width: 767px) {
    margin-top: 25px;
  }
}


.course-button-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  list-style: none;

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

.course-button-list__item {
  font-size: 21px;
  font-weight: bold;
  letter-spacing: var(--ls-medium);
  text-align: center;

  @media (max-width: 767px) {
    font-size: 14px;
  }

  a {
    display: grid;
    place-content: center;
    border: 2px solid var(--color-main);
    border-radius: 2em;
    padding: .8em .5em;
    grid-template-columns: auto auto;

    @media (max-width: 767px) {
      padding: .5em .5em;
      grid-template-columns: auto;

    }
  }

  a:hover {
    background-color: var(--color-main);
  }
}

.course-button-list__item.is-active a {
  background-color: var(--color-main);
  pointer-events: none;
}

.h-main+.course-button-block {
  margin-top: 40px;

  @media (max-width: 767px) {
    margin-top: 30px;
  }
}

.course-button-list__course {
  @media (max-width: 767px) {
    font-size: 10.5px;

  }
}

.course-intro {
  padding-top: 45px;

  @media (max-width: 767px) {
    padding-top: 25px;
  }
}

.course-intro__header {

  height: 140px;
  /* 画像の高さと同じ */
  display: grid;
  place-content: center;

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

.course-intro__header-ttl {
  display: grid;
  place-content: center;
  text-align: center;
  letter-spacing: var(--ls-medium);
}

.course-intro__header-ttl-grader {
  font-size: 30px;

  @media (max-width: 767px) {
    font-size: 24px;
  }
}

.course-intro__header-ttl-course {
  font-size: 16px;

  @media (max-width: 767px) {
    font-size: 14px;
  }
}

.course-intro__header-img {
  position: absolute;
  left: calc(50% + 180px);
  transform: translateX(-50%);
  /* 中央基準で水平方向に配置 */

  @media (max-width: 767px) {
    left: calc(50% + 100px);

  }

  img {
    height: 140px;
    object-fit: contain;
    width: 100%;

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

}

.course-intro__read {
  margin-top: 50px;

  font-size: 18px;
  letter-spacing: var(--ls-medium);
  line-height: var(--lh-large);
  text-align: justify;

  @media (max-width: 767px) {
    font-size: 16px;

    margin-top: 28px;
  }
}

.course-intro__list-wrap {
  margin-top: 70px;

  @media (max-width: 767px) {
    margin-top: 40px;
  }
}

.course-intro__list-header {
  overflow: visible;
  padding: .8em 0;
  /* spanのpaddingと同じ値 */

  line-height: 1;

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

.course-intro__list-header>span {
  letter-spacing: var(--ls-medium);
  background: var(--color-main);
  padding: .5em 1em;

  @media (max-width: 767px) {
    font-size: 16px;
    background-color: transparent;
    padding: 0;
  }
}

.course-intro__list-header>span.is-pc {
  display: inline !important;

  @media (max-width: 767px) {
    display: none !important;
  }
}

.course-intro__list-header span.ib {
  background: var(--color-main);
  padding: .6em;

  @media (max-width: 767px) {
    display: inline-block !important;
    white-space: nowrap;
  }
}

.course-intro__list-header span.ib:not(:first-of-type) {
  margin-top: 6px;
}

.course-intro__list {
  list-style: none;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: repeat(3, 1fr);
  gap: 0;

  border-left: 2px solid var(--color-main);
  margin-top: 25px;

  list-style-position: outside;


  @media (max-width: 767px) {
    margin-top: 20px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

.course-intro__list-item {
  place-content: center;
  margin-left: 30px;
  font-weight: bold;
  font-size: 17px;
  padding-top: .5em;
  padding-bottom: .5em;
  padding-left: 1em;
  /* 各項目のテキスト左余白 */
  text-indent: -1em;
  /* 最初の行を左に1em引っ込める（ぶら下げインデント） */

  @media (max-width: 767px) {
    grid-column: 1 !important;
    grid-row: auto !important;
    font-size: 16px;
    margin-left: .5em;
    padding-top: .3em;
    padding-bottom: .3em;
  }
}

.course-intro__list-item.is-right {
  text-align: right;
}

.course-intro__list-item.is-right::before {
  content: none;
}

.course-intro__list-item::before {
  content: "・";
  margin-right: -0.3em;
}

.course-intro__list-item:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.course-intro__list-item:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

.course-intro__list-item:nth-child(3) {
  grid-column: 1;
  grid-row: 3;
}

.course-intro__list-item:nth-child(4) {
  grid-column: 2;
  grid-row: 1;
}

.course-intro__list-item:nth-child(5) {
  grid-column: 2;
  grid-row: 2;
}

.course-intro__list-item:nth-child(6) {
  grid-column: 2;
  grid-row: 3;
}

.course-intro__list-item:nth-child(7) {
  grid-column: 3;
  grid-row: 1;
}

.course-intro__list-item:nth-child(8) {
  grid-column: 3;
  grid-row: 2;
}

.course-intro__list-item:nth-child(9) {
  grid-column: 3;
  grid-row: 3;
}

.course-intro__list.is-3_2 {
  grid-template-rows: repeat(2, 1fr);

}

.course-intro__list.is-3_2 .course-intro__list-item:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.course-intro__list.is-3_2 .course-intro__list-item:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  margin-left: 20px;

  @media (max-width: 767px) {
    margin-left: .5em;
  }
}

.course-intro__list.is-3_2 .course-intro__list-item:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
}

.course-intro__list.is-3_2 .course-intro__list-item:nth-child(4) {
  grid-column: 1;
  grid-row: 2;
}

.course-intro__list.is-3_2 .course-intro__list-item:nth-child(5) {
  grid-column: 2;
  grid-row: 2;
  margin-left: 20px;

  @media (max-width: 767px) {
    margin-left: .5em;
  }
}

.course-intro__list.is-3_2 .course-intro__list-item:nth-child(6) {
  grid-column: 3;
  grid-row: 2;
}


.course-intro__point {
  margin-top: 100px;
  background-color: #fff7bf;
  position: relative;
  padding: 40px 18px 42px 36px;

  @media (max-width: 767px) {
    margin-top: 55px;
    padding: 45px 20px 34px 37px;
    /* ズレてるのでcourse-intro__point-ttlに調整いれてます */
  }

  .flow-block-step__deco {
    position: absolute;
    left: 28px;
    top: -44px;

    @media (max-width: 767px) {
      left: 14px;
      top: -30px;
    }

    span {
      width: 93px;
      height: 93px;

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

    span:after {
      width: 106px;
      height: 53px;
      border-width: 2px;
    }
  }
}


@media (max-width: 767px) {
  .course-intro__point .flow-block-step__deco span::after {
    width: 72.25px;
    height: 36.125px;
    border-width: 1px;
  }
}


.course-intro__point-ttl {
  font-size: 18px;
  text-align: center;
  letter-spacing: var(--ls-medium);

  @media (max-width: 767px) {
    font-size: 15px;
    margin-right: 14px;
    /* ズレてるので調整 */
  }

  .highlight {
    background: var(--color-main);
    display: inline-block;
    padding: .3em .8em;
    line-height: 1;
  }
}

.course-intro__point-txt {
  margin-top: 25px;
  letter-spacing: var(--ls-medium);
  line-height: var(--lh-large);
  text-align: justify;
  font-size: 18px;

  @media (max-width: 767px) {
    margin-top: 20px;
    font-size: 16px;
  }
}


.lower-ttl {
  font-size: 30px;
  font-weight: bold;
  letter-spacing: var(--ls-medium);
  text-align: center;

  @media (max-width: 767px) {
    font-size: 24px;
  }
}


.course-details {
  margin-top: 75px;


  @media (max-width: 767px) {
    margin-top: 50px;
  }
}

.lower-ttl+.course-note {
  margin-top: 40px;


  @media (max-width: 767px) {
    margin-top: 35px;
  }
}

.course-note {
  padding-bottom: 48px;

  @media (max-width: 767px) {
    padding-bottom: 37px;
  }
}

.course-note+.course-note {
  padding-top: 48px;
  border-top: 1.5px dashed #231815;

  @media (max-width: 767px) {
    padding-top: 38px;
    border-color: #999999;
  }
}

.course-note__ttl {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 22px;

  @media (max-width: 767px) {
    gap: 20px;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
  }
}

.course-note__ttl-book {
  font-family: "Oswald", sans-serif;
  letter-spacing: var(--ls-medium);
  font-size: 18px;
  display: grid;
  place-content: center;
  position: relative;
  width: 136.3979px;
  height: 84.1983px;
  padding-bottom: .5em;

  @media (max-width: 767px) {
    font-size: 13.3px;

    width: 95.4785px;
    height: 58.9388px;
  }

}

.course-note__ttl-book::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 136.3979px;
  height: 76.0928px;
  background-image: url(../img/course-note__ttl-book--base.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
}

@media (max-width: 767px) {
  .course-note__ttl-book::before {
    width: 95.4785px;
    height: 53.2649px;
  }
}


.course-note__ttl-book::after {
  content: "";
  display: block;
  position: absolute;
  left: 7px;
  top: 0;
  width: 122.7174px;
  height: 81.4895px;
  background-image: url(../img/course-note__ttl-book--body.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
}

@media (max-width: 767px) {
  .course-note__ttl-book::after {
    width: 85.9022px;
    height: 57.0426px;
    left: 5px;
  }
}


.is-green .course-note__ttl-book::after {
  background-image: url(../img/course-note__ttl-book--body--green.svg);
}

.is-pink .course-note__ttl-book::after {
  background-image: url(../img/course-note__ttl-book--body--pink.svg);
}

.course-note__ttl-h4 {
  font-size: 24px;
  letter-spacing: var(--ls-medium);

  @media (max-width: 767px) {
    font-size: 18px;
  }
}

.course-note__content {
  margin-top: 18px;
  font-size: 18px;
  letter-spacing: var(--ls-medium);
  line-height: var(--lh-large);

  @media (max-width: 767px) {
    font-size: 16px;
  }
}

.course-note__explain {
  margin-top: 40px;

  @media (max-width: 767px) {
    margin-top: 30px;
  }
}

.course-note__explain-ttl {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 17px;

  span {
    font-size: 11px;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    display: inline-block;
    background-color: var(--color-main);
    padding: .7em 2em .5em;
  }

  h4 {
    font-size: 20px;
    letter-spacing: var(--ls-medium);
  }
}

.is-green .course-note__explain-ttl span {
  background-color: #5ab272;
}

.is-pink .course-note__explain-ttl span {
  background-color: #f19ebe;
}

.course-note__explain.is-orange .course-note__explain-ttl span {
  background-color: #eb9f49;
}

@media (max-width: 767px) {
  .course-note__explain-ttl {
    gap: 12px;

    span {
      font-size: 8.8px;
      padding: .7em 1.5em .5em;

    }

    h4 {
      font-size: 18px;
    }
  }
}

.course-note__explain-content {
  margin-top: 27px;
  font-size: 18px;
  letter-spacing: var(--ls-medium);
  line-height: var(--lh-large);
  text-align: justify;
  border-left: 2px solid var(--color-main);
  padding-left: 18px;
  padding-bottom: .5em;

  @media (max-width: 767px) {
    margin-top: 20px;
    font-size: 16px;
    padding-left: 14px;
    padding-bottom: 0;
  }
}

.course-note__explain-content.is-no-border {
  border-left: none;
  padding-left: 0;
}

.is-green .course-note__explain-content {
  border-color: #5ab272;
}

.is-pink .course-note__explain-content {
  border-color: #f19ebe;
}

.course-note__explain.is-orange .course-note__explain-content {
  border-color: #eb9f49;
}


.course-note__img {
  margin-top: 55px;

  @media (max-width: 767px) {
    margin-top: 30px;
  }

  img {
    width: 100%;
    height: auto;
  }
}


.class-details {
  padding-top: 32px;

  @media (max-width: 767px) {
    padding-top: 22px;
  }
}

.class-details-read {
  margin-top: 60px;

  @media (max-width: 767px) {
    margin-top: 36px;
  }

  h4 {
    font-size: 27px;
    font-weight: bold;
    letter-spacing: var(--ls-medium);

    @media (max-width: 767px) {
      font-size: 20px;
    }
  }

  p {
    font-size: 18px;
    letter-spacing: var(--ls-medium);
    line-height: var(--lh-large);
    text-align: justify;
    margin-top: 35px;

    @media (max-width: 767px) {
      margin-top: 30px;
      font-size: 16px;
    }
  }
}


.class-details-item:not(:first-of-type) {
  margin-top: 60px;

  @media (max-width: 767px) {
    margin-top: 35px;
  }
}

.class-details-item {

  p,
  ol li {
    font-size: 18px;
    letter-spacing: var(--ls-medium);
    line-height: var(--lh-large);
    text-align: justify;

    @media (max-width: 767px) {
      font-size: 16px;
    }
  }

  ol {
    list-style-type: none;
    counter-reset: item;

    @media (max-width: 767px) {
      margin-top: 17px;
      margin-bottom: 30px;
    }

    li {
      counter-increment: item;
      position: relative;
      padding-left: 1.3em;
    }
  }
}

.class-details-item ol li::before {
  content: "①";
  position: absolute;
  left: 0;
  top: 0;
}

.class-details-item ol li:nth-child(1)::before {
  content: "①";
}

.class-details-item ol li:nth-child(2)::before {
  content: "②";
}

.class-details-item ol li:nth-child(3)::before {
  content: "③";
}

.class-details-item ol li:nth-child(4)::before {
  content: "④";
}

.class-details-item ol li:nth-child(5)::before {
  content: "⑤";
}

.class-details-item ol li:nth-child(6)::before {
  content: "⑥";
}

.class-details-item ol li:nth-child(7)::before {
  content: "⑦";
}

.class-details-item ol li:nth-child(8)::before {
  content: "⑧";
}

.class-details-item ol li:nth-child(9)::before {
  content: "⑨";
}

.class-details-item ol li:nth-child(10)::before {
  content: "⑩";
}


.time-table {
  display: grid;
  grid-template-columns: 241px 1fr;

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

.time-table:first-of-type .time-table__content {
  border-top: 1px solid var(--color-main);

  @media (max-width: 767px) {
    border-top: 0;
  }
}

@media (max-width: 767px) {
  .time-table:last-of-type {
    border-bottom: 1px solid var(--color-main);

  }

  .time-table:last-of-type .time-table__content {
    padding-bottom: 25px;
  }
}


.time-table__time {
  background-color: var(--color-main);
  padding: 40px 35px 35px;
  font-size: 18px;
  font-weight: bold;

  @media (max-width: 767px) {
    font-size: 16px;
    padding: 15px 10px;
  }
}

.time-table:not(:last-of-type) .time-table__time {
  border-bottom: 1px solid #fff;

  @media (max-width: 767px) {
    margin-bottom: 0;
  }
}

.time-table:last-of-type .time-table__time {
  border-bottom: 1px solid var(--color-main);

  @media (max-width: 767px) {
    border-bottom: 0;
  }
}

.time-table__content {
  padding: 35px 30px 47px 35px;
  border-bottom: 1px solid var(--color-main);

  @media (max-width: 767px) {
    border-bottom: 0;
    padding: 25px 0 35px;
  }

  h5 {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: var(--ls-medium);

    @media (max-width: 767px) {
      font-size: 16px;
    }
  }

  p {
    font-size: 18px;

    @media (max-width: 767px) {
      font-size: 16px;
    }
  }
}

.time-table__content p:not(:first-child) {
  margin-top: 22px;

  @media (max-width: 767px) {
    margin-top: 20px;
  }
}


.time-table__time-hour+.time-table__time-ttl {
  margin-top: 20px;
  line-height: var(--lh-medium);

  @media (max-width: 767px) {
    margin-top: 0;
  }
}

.class-details-item--lr {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 55px;

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

  }
}

.class-details-item__left {
  padding-top: 20px;

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

.class-details-item__right-img img {
  width: 181.8502px;
  height: auto;

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

.class-details-item__right-img {
  @media (max-width: 767px) {
    text-align: center;
  }
}

.class-details-item:has(.time-table)+.class-details-item {
  @media (max-width: 767px) {
    margin-top: 40px;
  }
}

.schedule-details {
  margin-top: 75px;

  @media (max-width: 767px) {
    margin-top: 55px;
  }
}

.schedule-details-read {
  margin-top: 50px;
  font-size: 20px;
  letter-spacing: var(--ls-medium);
  line-height: var(--lh-large);
  text-align: justify;

  @media (max-width: 767px) {
    font-size: 16px;
    margin-top: 35px;
  }
}


.schedule-details-table.is-pc {
  display: table !important;
  font-size: 18px;

  @media (max-width: 767px) {
    width: 900px;
    font-size: 16px;
  }


}

.schedule-details-table-block {
  margin-top: 42px;

  @media (max-width: 767px) {
    margin-top: 25px;
  }
}

@media (max-width: 767px) {
  .schedule-details-table-block {
    width: calc(100vw - (100vw - 100%) / 2);
    margin-right: calc((100vw - 100%) / -2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* iOS でスムーズスクロール */
    scrollbar-width: thin;
    /* Firefox */
  }

  .schedule-details-table-block::-webkit-scrollbar {
    height: 6px;
  }

  .schedule-details-table-block::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
  }
}

.basic-ttl {
  font-size: 23px;
  font-weight: bold;
  letter-spacing: var(--ls-medium);
  margin-top: 20px;

  @media (max-width: 767px) {
    margin-top: 25px;
    font-size: 16px;
  }

  .is-small {
    font-size: 18px;

    @media (max-width: 767px) {
      font-size: 16px;
    }
  }
}

.basic-ttl+p {
  margin-top: 12px;

  @media (max-width: 767px) {
    margin-top: 10px;
  }
}

.class-details-item a {
  color: var(--color-sub-sky);
  text-decoration: underline;
}

.class-details-item p+p {
  margin-top: 22px;

  @media (max-width: 767px) {
    margin-top: 30px;
  }
}

.swiper-slide--2 .index-visual__text {
  margin-top: 70px;

  @media (max-width: 767px) {
    margin-top: 0;
  }
}

.archive__item--notice {
  letter-spacing: var(--ls-medium);
  line-height: var(--lh-large);
}

.news-detail-block a {
  color: var(--color-sub-sky);
  text-decoration: underline;
}

.wp-block-buttons a {
  text-decoration: none;
}


.post-navigation-container .nav-button:not(.disabled):hover {
  opacity: .6;
}