@charset "UTF-8";
/* Scss Document */
/* 
---------------------------------------
reset
---------------------------------------
*/
body, header, footer, section, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, figure {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  overflow-y: scroll;
  box-sizing: border-box; }

*, *::before, *::after {
  box-sizing: inherit; }

table {
  border-collapse: collapse;
  border-spacing: 0;
  vertical-align: top; }

th {
  text-align: left; }

li {
  list-style: none; }

a {
  outline: none;
  text-decoration: none;
  color: inherit;
  transition: all 0.6s; }

address {
  font-style: normal; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1.5;
  font-weight: 400; }

em {
  font-style: normal; }

a:link, a:visited, a:hover, a:active {
  text-decoration: none; }

a:hover {
  opacity: 0.7;
  transition: all 0.6s; }

img {
  display: block;
  max-width: 100%;
  -webkit-backface-visibility: hidden; }

/* 
---------------------------------------
表示切替
---------------------------------------
*/
@media screen and (max-width: 999px) {
  .pcView {
    display: none !important; } }
@media screen and (min-width: 1000px) {
  .spView {
    display: none !important; } }
@media (min-width: 999px) {
  a[href^="tel:"] {
    pointer-events: none; } }
/* フォーム要素のリセット */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  outline: none;
  appearance: none; }

button {
  cursor: pointer; }

button:disabled {
  cursor: default; }

/* 
---------------------------------------
コンテンツ幅
---------------------------------------
*/
.inner18 {
  max-width: 180rem;
  width: 89.33%;
  margin: 0 auto; }
  @media (max-width: 999px) {
    .inner18 {
      width: 89.33%;
      max-width: 536px; } }

.inner16 {
  max-width: 160rem;
  width: 89.33%;
  margin: 0 auto; }
  @media (max-width: 999px) {
    .inner16 {
      width: 89.33%;
      max-width: 536px; } }

.inner14 {
  max-width: 140rem;
  width: 89.33%;
  margin: 0 auto; }
  @media (max-width: 999px) {
    .inner14 {
      width: 89.33%;
      max-width: 536px; } }

.inner12 {
  max-width: 120rem;
  width: 89.33%;
  margin: 0 auto; }
  @media (max-width: 999px) {
    .inner12 {
      width: 89.33%;
      max-width: 536px; } }

.inner10 {
  max-width: 100rem;
  width: 89.33%;
  margin: 0 auto; }
  @media (max-width: 999px) {
    .inner10 {
      width: 89.33%;
      max-width: 536px; } }

.inner8 {
  max-width: 80rem;
  width: 89.33%;
  margin: 0 auto; }
  @media (max-width: 999px) {
    .inner8 {
      width: 89.33%;
      max-width: 536px; } }

/* 
---------------------------------------
余白
---------------------------------------
*/
body .mb20 {
  margin-bottom: clamp(120px, 16vw, 200px); }

body .mb18 {
  margin-bottom: clamp(100px, 14vw, 180px); }

body .mb16 {
  margin-bottom: clamp(80px, 12vw, 160px); }

body .mb14 {
  margin-bottom: clamp(70px, 10vw, 140px); }

body .mb12 {
  margin-bottom: clamp(60px, 10vw, 120px); }

body .mbTen {
  margin-bottom: clamp(50px, 8vw, 100px); }

body .mbten {
  margin-bottom: clamp(50px, 8vw, 100px); }

body .mb10 {
  margin-bottom: clamp(50px, 8vw, 100px); }

body .mb8 {
  margin-bottom: 8rem; }
  @media (max-width: 999px) {
    body .mb8 {
      margin-bottom: 4rem; } }

body .mb6 {
  margin-bottom: 6rem; }
  @media (max-width: 999px) {
    body .mb6 {
      margin-bottom: 3rem; } }

body .mb5 {
  margin-bottom: 5rem; }
  @media (max-width: 999px) {
    body .mb5 {
      margin-bottom: 2.5rem; } }

body .mb4 {
  margin-bottom: 4rem; }
  @media (max-width: 999px) {
    body .mb4 {
      margin-bottom: 2rem; } }

body .mb3 {
  margin-bottom: 3rem; }
  @media (max-width: 999px) {
    body .mb3 {
      margin-bottom: 1.5rem; } }

body .mb2 {
  margin-bottom: 2rem; }
  @media (max-width: 999px) {
    body .mb2 {
      margin-bottom: 1rem; } }

body .mb1 {
  margin-bottom: 1rem; }
  @media (max-width: 999px) {
    body .mb1 {
      margin-bottom: .5rem; } }

body .pt20 {
  padding-top: clamp(120px, 16vw, 200px); }

body .pt18 {
  padding-top: clamp(100px, 14vw, 180px); }

body .pt16 {
  padding-top: clamp(80px, 12vw, 160px); }

body .pt14 {
  padding-top: clamp(70px, 10vw, 140px); }

body .pt12 {
  padding-top: clamp(60px, 10vw, 120px); }

body .ptTen {
  padding-top: clamp(50px, 8vw, 100px); }

body .ptten {
  padding-top: clamp(50px, 8vw, 100px); }

body .pt10 {
  padding-top: clamp(50px, 8vw, 100px); }

body .pt8 {
  padding-top: 8rem; }
  @media (max-width: 999px) {
    body .pt8 {
      padding-top: 4rem; } }

body .pt6 {
  padding-top: 6rem; }
  @media (max-width: 999px) {
    body .pt6 {
      padding-top: 3rem; } }

body .pt5 {
  padding-top: 5rem; }
  @media (max-width: 999px) {
    body .pt5 {
      padding-top: 2.5rem; } }

body .pt4 {
  padding-top: 4rem; }
  @media (max-width: 999px) {
    body .pt4 {
      padding-top: 2rem; } }

body .pt3 {
  padding-top: 3rem; }
  @media (max-width: 999px) {
    body .pt3 {
      padding-top: 1.5rem; } }

body .pt2 {
  padding-top: 2rem; }
  @media (max-width: 999px) {
    body .pt2 {
      padding-top: 1rem; } }

body .pt1 {
  padding-top: 1rem; }
  @media (max-width: 999px) {
    body .pt1 {
      padding-top: .5rem; } }

body .pb20 {
  padding-bottom: clamp(120px, 16vw, 200px); }

body .pb18 {
  padding-bottom: clamp(100px, 14vw, 180px); }

body .pb16 {
  padding-bottom: clamp(80px, 12vw, 160px); }

body .pb14 {
  padding-bottom: clamp(70px, 10vw, 140px); }

body .pb12 {
  padding-bottom: clamp(60px, 10vw, 120px); }

body .pbTen {
  padding-bottom: clamp(50px, 8vw, 100px); }

body .pbten {
  padding-bottom: clamp(50px, 8vw, 100px); }

body .pb10 {
  padding-bottom: clamp(50px, 8vw, 100px); }

body .pb8 {
  padding-bottom: 8rem; }
  @media (max-width: 999px) {
    body .pb8 {
      padding-bottom: 4rem; } }

body .pb6 {
  padding-bottom: 6rem; }
  @media (max-width: 999px) {
    body .pb6 {
      padding-bottom: 3rem; } }

body .pb5 {
  padding-bottom: 5rem; }
  @media (max-width: 999px) {
    body .pb5 {
      padding-bottom: 2.5rem; } }

body .pb4 {
  padding-bottom: 4rem; }
  @media (max-width: 999px) {
    body .pb4 {
      padding-bottom: 2rem; } }

body .pb3 {
  padding-bottom: 3rem; }
  @media (max-width: 999px) {
    body .pb3 {
      padding-bottom: 1.5rem; } }

body .pb2 {
  padding-bottom: 2rem; }
  @media (max-width: 999px) {
    body .pb2 {
      padding-bottom: 1rem; } }

body .pb1 {
  padding-bottom: 1rem; }
  @media (max-width: 999px) {
    body .pb1 {
      padding-bottom: .5rem; } }

html {
  font-size: clamp(8px, calc(8px + (2 * ((100vw - 1000px) / 920))), 10px); }
  @media (max-width: 999px) {
    html {
      font-size: 62.5% !important; } }

body {
  font-size: 1.8rem;
  letter-spacing: 0;
  line-height: 2;
  -webkit-text-size-adjust: 100%;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-optical-sizing: auto;
  font-style: normal;
  color: #373737; }
  @media (max-width: 999px) {
    body {
      font-size: 1.4rem; } }

.bold {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased; }

.en {
  font-family: "Sora", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  -webkit-font-smoothing: antialiased; }

.br4 {
  border-radius: 4rem; }

.br20 {
  border-radius: clamp(10rem, calc(10.8695652174vw + -0.8695652174rem), 20rem); }
  @media (max-width: 999px) {
    .br20 {
      border-radius: 4rem; } }

/* ---------------------------------------
共通
--------------------------------------- */
/*body.home {
    background: url("../img/bg_kimidori.jpg") repeat 0 0;
        background-position: center top;
        background-size: 100% auto;
        background-repeat: repeat-y;
}*/
body .bgKimidori {
  background: url("../img/bg_kimidori.jpg") repeat 0 0;
  background-position: center top;
  background-size: 100% auto;
  background-repeat: repeat-y;
  position: relative;
  z-index: 0; }

body .bgGreen {
  background: url("../img/bg_green.jpg") repeat 0 0;
  background-size: cover;
  background-position: center top;
  background-size: 100% auto;
  background-repeat: repeat-y; }

body .bgBlue {
  background: url("../img/bg_blue.jpg") repeat 0 0;
  background-size: cover;
  background-position: center top;
  background-size: 100% auto;
  background-repeat: repeat-y; }

body .bgWhite {
  background: url("../img/bg_white.jpg") repeat 0 0;
  background-size: cover;
  background-position: center top;
  background-size: 100% auto;
  background-repeat: repeat-y; }

body .bgYellow {
  background: url("../img/bg_yellow.jpg") repeat 0 0;
  background-size: cover;
  background-position: center top;
  background-size: 100% auto;
  background-repeat: repeat-y; }

body .bgDecoMori {
  position: relative;
  background-image: url("../img/bg_deco_mori.png");
  background-position: center top;
  background-size: 100% auto;
  background-repeat: repeat-y; }
  @media (max-width: 999px) {
    body .bgDecoMori {
      background-image: url("../img/bg_deco_mori_sp.png");
      background-position: center top;
      background-size: 100% auto;
      background-repeat: repeat-y; } }
body .bgDecoKimidori {
  position: relative;
  background-image: url("../img/bg_deco_kimidori.png");
  background-position: center top;
  background-size: 100% auto;
  background-repeat: repeat-y; }

.txtWhite {
  color: white; }

.txtCenter {
  text-align: center; }

.txtRight {
  text-align: right; }

.imgCenter {
  margin: 0 auto;
  text-align: center; }

/*  
---------------------------------------
ヘッダー
---------------------------------------
*/
#header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1004;
  width: 100%;
  pointer-events: none; }
  #header .logo {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 20rem;
    height: 14.5rem;
    margin: 0;
    background: #fff;
    border-radius: 0 0 1.5rem 0;
    pointer-events: auto;
    transition: opacity .3s, visibility .3s; }
    #header .logo a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%; }
    #header .logo img {
      display: block;
      height: auto; }
  #header .headerRight {
    position: absolute;
    top: 3rem;
    right: 14rem;
    pointer-events: auto; }
  #header .entryStatus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    min-width: 34rem;
    height: 6.2rem;
    padding: 0 3rem;
    background: #FBC313;
    border-radius: 1.2rem;
    color: #222;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: all .3s; }
    #header .entryStatus i {
      flex-shrink: 0;
      font-size: 2rem; }
    #header .entryStatus:hover {
      opacity: 1;
      background: #fff;
      color: #2DA338;
      transition: all 0.3s; }
      #header .entryStatus:hover i {
        color: #2DA338; }
  @media (max-width: 999px) {
    #header .logo {
      width: 12.8rem;
      height: 8.5rem;
      border-radius: 0 0 1.5rem 0; }
      #header .logo img {
        width: 11.5rem;
        height: auto; }
    #header .headerRight {
      top: 1.8rem;
      right: 2rem; }
    #header .entryStatus {
      gap: .8rem;
      width: 16rem;
      min-width: 0;
      height: 5rem;
      padding: 0 1.2rem;
      border-radius: 1.2rem;
      font-size: 1.2rem;
      line-height: 1.35; }
      #header .entryStatus i {
        font-size: 1.6rem; }
      #header .entryStatus span {
        display: block;
        width: auto; } }

/*  
---------------------------------------
ハンバーガー
---------------------------------------
*/
.navToggle {
  position: fixed;
  top: 3rem;
  right: 3rem;
  z-index: 1005;
  display: block;
  width: 8rem;
  height: 8rem;
  padding: 0;
  border: 0;
  border-radius: 2rem;
  background: #333;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s; }
  .navToggle:hover {
    background: #2DA338;
    transition: all 0.3s; }
  .navToggle span {
    position: absolute;
    left: 50%;
    display: block;
    width: 3.5rem;
    height: 2px;
    background: #fff;
    transform: translateX(-50%);
    transition: top .35s, transform .35s, opacity .35s; }
  .navToggle span:nth-child(1) {
    top: 2.9rem; }
  .navToggle span:nth-child(2) {
    top: 3.9rem; }
  .navToggle span:nth-child(3) {
    top: 4.9rem; }
  .navToggle.active span:nth-child(1) {
    top: 3.9rem;
    transform: translateX(-50%) rotate(45deg); }
  .navToggle.active span:nth-child(2) {
    opacity: 0; }
  .navToggle.active span:nth-child(3) {
    top: 3.9rem;
    transform: translateX(-50%) rotate(-45deg); }
  @media (max-width: 999px) {
    .navToggle {
      top: auto;
      right: 2rem;
      bottom: 1.5rem;
      left: 2rem;
      width: auto;
      height: 4.4rem;
      border: 2px solid #333;
      border-radius: 999px;
      background: #fff;
      color: #333;
      max-width: 42rem;
      margin: 0 auto; }
      .navToggle::before {
        content: "MENU";
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 1.8rem;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        transform: translate(-50%, -50%);
        font-family: "Sora", sans-serif; }
      .navToggle:hover {
        background: #fff;
        transition: all 0.3s; }
      .navToggle span {
        display: none; }
      .navToggle.active {
        background: #fff; }
        .navToggle.active::before {
          content: "× CLOSE"; } }

/* スマホ時のMENUボタン表示制御 */
@media screen and (max-width: 767px) {
  .navToggle {
    transition: opacity .4s ease, visibility .4s ease; }

  /* 初期状態は非表示 */
  .navToggle.is-menu-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; } }
/*  
---------------------------------------
メニュー
---------------------------------------
*/
.globalMenu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: visibility .4s, opacity .4s; }
  .globalMenu.active {
    visibility: visible;
    opacity: 1; }
    .globalMenu.active .globalMenu__overlay {
      opacity: 1; }
    .globalMenu.active .globalMenu__panel {
      transform: translateX(0); }
  .globalMenu__overlay {
    position: absolute;
    inset: 0;
    background: rgba(33, 169, 52, 0.52);
    opacity: 0;
    transition: opacity .4s;
    cursor: pointer; }
  .globalMenu__panel {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: min(70rem, 42vw);
    height: 100vh;
    padding: 13rem 5rem 4rem;
    background: url("../img/nav_bg.jpg") center/cover no-repeat;
    border-radius: 0 0 0 14rem;
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
  .globalMenu__inner {
    position: relative;
    z-index: 2;
    width: calc(100% + 5rem);
    max-width: 59rem;
    height: 100%;
    margin: 0 -5rem 0 auto;
    padding-right: 5rem;
    box-sizing: border-box;
    overflow-y: auto; }
  .globalMenu__deco {
    position: absolute;
    z-index: 1;
    display: block;
    height: auto;
    pointer-events: none; }
  .globalMenu__deco01 {
    top: 0;
    left: -13rem;
    width: 56rem; }
  .globalMenu__deco02 {
    right: 0;
    bottom: 0;
    width: 34rem; }
  .globalMenu__top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 5rem;
    padding: 0 2rem;
    margin-bottom: 1rem;
    border: 2px solid #333;
    border-radius: 999px;
    background: #fff;
    color: #222;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none; }
  .globalMenu .dot {
    display: inline-block;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: currentColor; }
    .globalMenu .dot.green {
      color: #21A934; }
  .globalMenu__main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 3rem; }
  .globalMenu__left {
    display: flex;
    flex-direction: column;
    gap: 1rem; }
  .globalMenu__box {
    padding: 1.5rem 2rem;
    border: 2px solid #333;
    border-radius: 2rem;
    background: #fff; }
    .globalMenu__box.blue .dot {
      color: #4E82CA; }
    .globalMenu__box.yellow .dot {
      color: #FBC313; }
    .globalMenu__box ul {
      padding: 0 0 0 2rem; }
    .globalMenu__box a {
      font-size: 1.4rem;
      line-height: 1.5;
      text-decoration: none;
      transition: opacity .3s; }
      .globalMenu__box a:hover {
        opacity: .5; }
  .globalMenu__ttl {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.5rem;
    font-weight: 700; }
  .globalMenu__single {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 5rem;
    padding: 0 2rem;
    border: 2px solid #333;
    border-radius: 999px;
    background: #fff;
    color: #222;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none; }
    .globalMenu__single.orange .dot {
      color: #F39800; }
    .globalMenu__single.purple .dot {
      color: #A95BB5; }
  .globalMenu__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    margin-top: 3rem; }
  .globalMenu__linksCol {
    display: flex;
    flex-direction: column; }
    .globalMenu__linksCol a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 4.8rem;
      border-bottom: 1px solid #ccc;
      color: #222;
      font-size: 1.4rem;
      font-weight: 700;
      line-height: 1.5;
      text-decoration: none;
      transition: opacity .3s; }
      .globalMenu__linksCol a i {
        margin-left: 1rem;
        font-size: 1rem; }
      .globalMenu__linksCol a:hover {
        opacity: .5; }
  .globalMenu__bottom {
    margin-top: 4rem;
    text-align: center; }
  .globalMenu__tel {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1rem;
    color: #222;
    text-decoration: none; }
    .globalMenu__tel span {
      font-size: 1.6rem;
      font-weight: 700; }
    .globalMenu__tel strong {
      color: #21A934;
      font-size: 3.6rem;
      line-height: 1; }
  .globalMenu__sns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    margin-top: 1rem; }
    .globalMenu__sns a {
      color: #333;
      font-size: 2.4rem;
      text-decoration: none;
      transition: opacity .3s; }
      .globalMenu__sns a:hover {
        opacity: .5; }
  @media (max-width: 999px) {
    .globalMenu {
      z-index: 1002; }
      .globalMenu.active .globalMenu__panel {
        transform: translateY(0); }
      .globalMenu__overlay {
        background: rgba(33, 169, 52, 0.3); }
      .globalMenu__panel {
        top: 3rem;
        right: 1rem;
        width: calc(100% - 2rem);
        height: calc(100vh - 3rem);
        height: calc(100dvh - 3rem);
        padding: 3rem 2rem 8rem;
        border-radius: 2rem 2rem 0 0;
        transform: translateY(100%);
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: none; }
        .globalMenu__panel::-webkit-scrollbar {
          display: none; }
      .globalMenu__inner {
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow: visible; }
      .globalMenu__deco {
        display: none; }
      .globalMenu__top {
        min-height: 3.6rem;
        padding: 0 1.2rem;
        margin-bottom: .7rem;
        font-size: 1.2rem; }
      .globalMenu .dot {
        width: .8rem;
        height: .8rem; }
      .globalMenu__main {
        grid-template-columns: 1fr 1fr;
        gap: .7rem;
        margin-bottom: 1.8rem; }
      .globalMenu__left {
        gap: .7rem; }
      .globalMenu__box {
        padding: 1rem 1rem;
        border-radius: 1.6rem; }
        .globalMenu__box ul {
          margin: .6rem 0 0;
          padding-left: 1.6rem; }
        .globalMenu__box li {
          margin-bottom: .4rem; }
        .globalMenu__box a {
          font-size: 1.2rem;
          line-height: 1.5; }
      .globalMenu__ttl {
        gap: .7rem;
        font-size: 1.2rem; }
      .globalMenu__single {
        gap: .7rem;
        min-height: 3.6rem;
        padding: 0 1.3rem;
        font-size: 1.2rem; }
      .globalMenu__links {
        gap: 1.5rem;
        margin-top: 0; }
      .globalMenu__linksCol a {
        min-height: 4.2rem;
        font-size: 1.2rem; }
      .globalMenu__bottom {
        margin-top: 3rem; }
      .globalMenu__tel {
        gap: .6rem; }
        .globalMenu__tel span {
          font-size: 1.3rem; }
        .globalMenu__tel strong {
          font-size: 2.8rem; }
      .globalMenu__sns {
        gap: 2rem;
        margin-top: 1.8rem; }
        .globalMenu__sns a {
          font-size: 2rem; } }

/*  
---------------------------------------
メニュー開閉時
---------------------------------------
*/
body.menu-open #header .logo,
body.menu-open #header .logo img,
body.menu-open #header .entryStatus {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
  display: none; }
body.menu-open #header .navToggle {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; }

/* 
---------------------------------------
ボタン種類 
---------------------------------------
*/
.btn {
  width: 100%;
  max-width: 41rem; }
  .btn a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 7.6rem;
    padding: 1.2rem 1.4rem 1.2rem 4rem;
    background: #373737;
    border: 2px solid #373737;
    border-radius: 10rem;
    color: #fff;
    text-decoration: none;
    transition: background .4s ease, color .4s ease, border-color .4s ease; }
    @media (max-width: 999px) {
      .btn a {
        padding: 0.2rem 1.4rem 0.2rem 3rem;
        min-height: 6rem; } }
    .btn a .txt {
      font-weight: 700;
      transition: color .4s ease;
      line-height: 1.5; }
    .btn a .circle {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 5.2rem;
      height: 5.2rem;
      flex-shrink: 0;
      background: #fff;
      border-radius: 50%;
      overflow: hidden;
      color: #373737;
      transition: background .4s ease, color .4s ease; }
      @media (max-width: 999px) {
        .btn a .circle {
          width: 4rem;
          height: 4rem; } }
    .btn a .arrow {
      position: relative;
      display: block;
      width: 2rem;
      height: 2rem; }
      @media (max-width: 999px) {
        .btn a .arrow {
          width: 1.6rem;
          height: 1.6rem; } }
      .btn a .arrow i {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 1.8rem;
        line-height: 1;
        transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1); }
        @media (max-width: 999px) {
          .btn a .arrow i {
            font-size: 1.4rem; } }
        .btn a .arrow i:first-child {
          transform: translate(-50%, -50%); }
        .btn a .arrow i:last-child {
          transform: translate(calc(-50% - 4rem), -50%); }
    .btn a:hover {
      opacity: 1;
      background: #fff;
      color: #373737; }
      .btn a:hover .circle {
        background: #373737;
        color: #fff; }
      .btn a:hover .arrow i:first-child {
        transform: translate(calc(-50% + 4rem), -50%); }
      .btn a:hover .arrow i:last-child {
        transform: translate(-50%, -50%); }
  .btn.white a {
    background: #fff;
    border-color: #373737;
    color: #373737; }
    .btn.white a .circle {
      background: #373737;
      color: #fff; }
    .btn.white a:hover {
      background: #373737;
      color: #fff; }
      .btn.white a:hover .circle {
        background: #fff;
        color: #373737; }
  .btn.green a {
    background: #fff;
    border-color: #2DA338;
    color: #373737; }
    .btn.green a .circle {
      background: #2DA338;
      color: #fff; }
    .btn.green a:hover {
      background: #2DA338;
      color: #fff; }
      .btn.green a:hover .circle {
        background: #fff;
        color: #2DA338; }
  .btn.btnCenter {
    margin: 0 auto; }

/*  
---------------------------------------
右下固定ナビ
---------------------------------------
*/
.fixedNav {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: 18rem; }
  @media (max-width: 999px) {
    .fixedNav {
      display: none; } }
  .fixedNav__item {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    min-height: 3.8rem;
    padding: 0 1.5rem;
    background: #fff;
    border: 2px solid #333;
    border-radius: 999px;
    color: #222;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: transform .3s ease, color .3s ease, border-color .3s ease; }
    .fixedNav__item:hover {
      opacity: 1;
      transform: translateX(-1rem); }
    .fixedNav__item.green .fixedNav__dot {
      background: #2DA338; }
    .fixedNav__item.green:hover {
      color: #2DA338;
      border-color: #2DA338; }
    .fixedNav__item.blue .fixedNav__dot {
      background: #4A7CC9; }
    .fixedNav__item.blue:hover {
      color: #4A7CC9;
      border-color: #4A7CC9; }
    .fixedNav__item.orange .fixedNav__dot {
      background: #FB9B00; }
    .fixedNav__item.orange:hover {
      color: #FB9B00;
      border-color: #FB9B00; }
    .fixedNav__item.purple .fixedNav__dot {
      background: #A65EB0; }
    .fixedNav__item.purple:hover {
      color: #A65EB0;
      border-color: #A65EB0; }
    .fixedNav__item.yellow .fixedNav__dot {
      background: #F4BF12; }
    .fixedNav__item.yellow:hover {
      color: #F4BF12;
      border-color: #F4BF12; }
  .fixedNav__item--learn {
    display: block;
    padding: 1.2rem 1.5rem;
    border-radius: 1.8rem; }
    .fixedNav__item--learn:hover {
      opacity: 1;
      transform: translateX(-1rem); }
    .fixedNav__item--learn ul {
      margin: .8rem 0 0;
      padding: 0 0 0 1.8rem;
      list-style: none; }
    .fixedNav__item--learn li {
      margin-bottom: .5rem; }
      .fixedNav__item--learn li:last-child {
        margin-bottom: 0; }
    .fixedNav__item--learn a {
      display: block;
      color: #222;
      font-size: 1.4rem;
      font-weight: 700;
      line-height: 1.5;
      text-decoration: none;
      transition: color .3s ease, transform .3s ease; }
      .fixedNav__item--learn a:hover {
        color: #4A7CC9;
        transform: translateX(0.3rem);
        opacity: 1; }
  .fixedNav__ttl {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700; }
  .fixedNav__dot {
    display: block;
    flex-shrink: 0;
    width: .9rem;
    height: .9rem;
    border-radius: 50%; }

/* 
---------------------------------------
フッター
---------------------------------------
*/
#footer {
  position: relative;
  z-index: 3; }
  @media (max-width: 999px) {
    #footer {
      padding: 0 0; } }
  #footer .illust1 {
    display: none; }
  #footer .bg {
    background: #373737;
    color: #fff;
    padding: clamp(16rem, calc(0.435vw + 11.652rem), 20rem) 0 clamp(6rem, calc(2.174vw + 3.826rem), 8rem);
    border-radius: clamp(10rem, calc(10.87vw - 0.87rem), 20rem) clamp(10rem, calc(10.87vw - 0.87rem), 20rem) 0 0;
    position: relative;
    z-index: 1; }
    @media (max-width: 999px) {
      #footer .bg {
        padding: 6rem 0;
        border-radius: 3rem 3rem 0 0; } }
  #footer .bgDeco {
    position: absolute;
    top: -10vw;
    width: 100%;
    height: auto;
    z-index: 0; }
    @media (max-width: 999px) {
      #footer .bgDeco {
        top: -14vw; } }
  #footer .boxs {
    display: flex;
    justify-content: space-between;
    gap: clamp(4rem, 2vw, 6rem);
    padding-bottom: clamp(8rem, calc(4.348vw + 3.652rem), 12rem); }
    @media (max-width: 999px) {
      #footer .boxs {
        display: block;
        padding-bottom: 0; } }
  #footer .box {
    width: clamp(24rem, calc(8.696vw + 15.304rem), 32rem);
    flex-shrink: 0; }
    @media (max-width: 999px) {
      #footer .box {
        width: 100%;
        max-width: none;
        margin-bottom: 5rem; } }
  #footer .logo {
    margin-bottom: 4rem; }
    @media (max-width: 999px) {
      #footer .logo {
        margin-bottom: 2rem; } }
    #footer .logo a {
      display: block;
      width: fit-content; }
      @media (max-width: 999px) {
        #footer .logo a {
          margin: 0 auto; } }
    #footer .logo img {
      display: block;
      width: 100%;
      max-width: clamp(24rem, calc(13.043vw + 10.957rem), 36rem);
      height: auto; }
      @media (max-width: 999px) {
        #footer .logo img {
          width: min(100%, 24rem);
          margin: 0 auto; } }
  #footer .address,
  #footer .tel {
    color: #fff;
    font-size: 1.6rem; }
    @media (max-width: 999px) {
      #footer .address,
      #footer .tel {
        font-size: 1.4rem;
        text-align: left;
        width: max-content;
        margin: 0 auto 0rem; } }
  @media (max-width: 999px) {
    #footer .tel {
      margin: 0 auto 4rem; } }
  #footer .sns {
    display: flex;
    align-items: center;
    gap: 2.5rem; }
    @media (max-width: 999px) {
      #footer .sns {
        gap: 2rem;
        justify-content: center; } }
    #footer .sns li {
      line-height: 1; }
    #footer .sns a {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 3.2rem;
      line-height: 1;
      text-decoration: none;
      transition: 0.3s; }
      @media (max-width: 999px) {
        #footer .sns a {
          font-size: 3.2rem; } }
      #footer .sns a:hover {
        opacity: 1;
        color: #2DA338; }
  #footer .fNav {
    display: grid;
    grid-template-columns: repeat(5, auto);
    gap: clamp(2rem, calc(4.348vw - 2.848rem), 6rem); }
    @media (max-width: 999px) {
      #footer .fNav {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        padding-top: 0; }
        #footer .fNav > ul:first-child {
          grid-column: 1 / -1; } }
    #footer .fNav ul {
      margin: 0;
      padding: 0; }
      @media (max-width: 999px) {
        #footer .fNav ul {
          margin-bottom: 3rem; } }
    #footer .fNav li {
      margin-bottom: 3rem;
      line-height: 1; }
      @media (max-width: 999px) {
        #footer .fNav li {
          margin-bottom: 1rem; } }
      #footer .fNav li:last-child {
        margin-bottom: 0; }
      #footer .fNav li.child {
        margin-bottom: 2rem; }
        @media (max-width: 999px) {
          #footer .fNav li.child {
            margin-bottom: 1rem;
            margin-left: 1rem; } }
        #footer .fNav li.child a {
          padding-left: 2rem;
          font-size: 1.2rem; }
          @media (max-width: 999px) {
            #footer .fNav li.child a {
              padding-left: 1rem;
              font-size: 1.3rem; } }
          #footer .fNav li.child a::before {
            display: none; }
    #footer .fNav a {
      position: relative;
      display: inline-block;
      padding-left: 1.5rem;
      color: #fff;
      font-size: clamp(1.4rem, calc(0.2174vw + 1.1826rem), 1.6rem);
      line-height: 1.5;
      text-decoration: none;
      transition: 0.3s; }
      @media (max-width: 999px) {
        #footer .fNav a {
          font-size: 1.4rem; } }
      #footer .fNav a::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 1rem;
        height: 1rem;
        background: url("../img/ico_dot_white.svg") no-repeat center/contain;
        transform: translateY(-50%);
        transform-origin: center center;
        transition: transform 0.3s; }
      #footer .fNav a:hover {
        opacity: 1;
        color: #2DA338; }
    #footer .fNav .child a {
      transition: opacity 0.3s; }
      #footer .fNav .child a::before {
        display: none; }
      #footer .fNav .child a:hover {
        opacity: 0.5;
        color: #fff; }
  #footer .copy {
    color: #9B9B9B;
    font-size: 1.2rem;
    text-align: center; }
    @media (max-width: 999px) {
      #footer .copy {
        font-size: 1rem;
        margin-bottom: 3rem; } }

#footer .pageTop {
  position: absolute;
  right: 8vw;
  top: -27%;
  z-index: 2;
  display: block;
  width: clamp(12rem, calc(4.347826087vw + 7.652173913rem), 16rem);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer; }
  #footer .pageTop__board {
    display: block;
    width: 100%;
    height: auto; }
  #footer .pageTop__arrow {
    position: absolute;
    top: -8%;
    left: 56%;
    width: 22%;
    height: auto;
    translate: -50% 0;
    pointer-events: none; }
  @media (hover: hover) {
    #footer .pageTop:hover .pageTop__arrow {
      animation: pageTopArrowPyon 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } }
  @media (max-width: 999px) {
    #footer .pageTop {
      width: 6rem;
      top: -7rem; }
      #footer .pageTop__arrow {
        top: -8%;
        left: 56%;
        width: 22%; } }

@keyframes pageTopArrowPyon {
  0% {
    translate: -50% 0; }
  30% {
    translate: -50% -1.5rem; }
  50% {
    translate: -50% -.3rem; }
  70% {
    translate: -50% -1rem; }
  85% {
    translate: -50% -.2rem; }
  100% {
    translate: -50% 0; } }
/* ---------------------------------------
sub KV
--------------------------------------- */
#subKv {
  position: relative;
  width: 100%;
  height: clamp(72rem, calc(15.2173913043vw + 56.7826086957rem), 86rem);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: visible; }
  #subKv .hidden {
    position: relative;
    height: 100%;
    overflow: hidden; }
  #subKv .deco {
    position: absolute;
    display: block;
    height: auto;
    pointer-events: none; }
    #subKv .deco.top {
      top: 0;
      left: 0;
      z-index: 2;
      width: 100%; }
    #subKv .deco.bottom {
      left: 0;
      bottom: -11rem;
      z-index: 4;
      width: 51.9rem; }
  #subKv .kvInner {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 100%;
    transform: translate(-50%, -50%);
    text-align: center; }
  #subKv .ttl {
    color: #fff;
    font-size: clamp(3.6rem, calc(1.7391304348vw + 1.8608695652rem), 5.2rem);
    font-weight: 700; }
    #subKv .ttl span {
      font-size: clamp(2.4rem, calc(1.3043478261vw + 1.0956521739rem), 3.6rem); }
  #subKv .ttlDeco {
    position: absolute;
    right: 5vw;
    bottom: 0;
    z-index: 5;
    color: #4A7CC9;
    font-size: clamp(12rem, calc(6.5217391304vw + 5.4782608696rem), 18rem);
    line-height: 0.66; }
    #subKv .ttlDeco.yellow {
      color: #F4BF12; }
    #subKv .ttlDeco.green {
      color: #2DA338; }
    #subKv .ttlDeco.orange {
      color: #FB9B00; }
  @media (max-width: 999px) {
    #subKv {
      height: 48rem;
      background-position: center top; }
      #subKv::before {
        background: rgba(0, 0, 0, 0.18); }
      #subKv .hidden {
        width: 100%;
        max-width: 89.33%; }
      #subKv .deco.top {
        top: 0;
        right: 0;
        left: inherit;
        width: 100%;
        height: auto;
        max-width: none;
        transform: none;
        max-width: 42rem;
        margin: 0 0 0 auto; }
      #subKv .deco.bottom {
        left: -1rem;
        bottom: -2.5rem;
        width: clamp(14rem, calc(9.6153846154vw + 10.3942307692rem), 20rem);
        height: auto; }
      #subKv .kvInner {
        top: 50%;
        width: 100%; }
      #subKv .ttl {
        font-size: clamp(2rem, calc(2.5641025641vw + 1.0384615385rem), 3.6rem); }
        #subKv .ttl span {
          font-size: clamp(1.4rem, calc(0.9615384615vw + 1.0394230769rem), 2rem); }
      #subKv .ttlDeco {
        right: 0;
        bottom: 0;
        font-size: clamp(4.2rem, calc(6.0897435897vw + 1.9163461538rem), 8rem); } }

.subHigh65#subKv {
  height: clamp(56rem, calc(10.8695652174vw + 45.1304347826rem), 66rem); }
  @media (max-width: 999px) {
    .subHigh65#subKv {
      height: 42rem; } }

.subHigh40#subKv {
  height: clamp(36rem, calc(4.347826087vw + 31.652173913rem), 40rem); }
  @media (max-width: 999px) {
    .subHigh40#subKv {
      height: 32rem; } }

@media (max-width: 999px) {
  .lessonSub .pb20 {
    padding-bottom: 4rem; } }
.lessonSub #subKv {
  height: clamp(56rem, calc(10.8695652174vw + 45.1304347826rem), 66rem); }
  @media (max-width: 999px) {
    .lessonSub #subKv {
      height: 42rem; } }
.lessonSub .teacherList {
  width: 100%; }
.lessonSub .teacherItem {
  display: grid;
  grid-template-columns: clamp(22rem, calc(8.6956521739vw + 13.3043478261rem), 30rem) 1fr;
  align-items: start;
  gap: clamp(5rem, calc(3.2608695652vw + 1.7391304348rem), 8rem);
  padding: clamp(7rem, calc(3.2608695652vw + 3.7391304348rem), 10rem) clamp(7rem, calc(3.2608695652vw + 3.7391304348rem), 10rem) clamp(8rem, calc(2.1739130435vw + 5.8260869565rem), 10rem);
  background: #fff;
  border-radius: clamp(8rem, calc(6.5217391304vw + 1.4782608696rem), 14rem); }
  .lessonSub .teacherItem__person {
    text-align: center; }
  .lessonSub .teacherItem__pic {
    display: block;
    width: clamp(22rem, calc(8.6956521739vw + 13.3043478261rem), 30rem);
    height: clamp(22rem, calc(8.6956521739vw + 13.3043478261rem), 30rem);
    margin: 0 auto 1.5rem;
    object-fit: cover;
    border-radius: 4rem; }
  .lessonSub .teacherItem__category {
    margin: 0 0 1.5rem;
    padding: .6rem 1rem;
    border: 0.2rem solid #4A7CC9;
    border-radius: 10rem;
    color: #4A7CC9;
    font-weight: 700;
    line-height: 1.4;
    text-align: center; }
  .lessonSub .teacherItem__name {
    margin: 0;
    font-size: clamp(2rem, calc(0.4347826087vw + 1.5652173913rem), 2.4rem);
    line-height: 1.5;
    text-align: center; }
  .lessonSub .teacherItem__content {
    min-width: 0;
    padding-top: 1rem; }
  .lessonSub .teacherItem__txt {
    margin: 0 0 clamp(2.5rem, calc(0.5434782609vw + 1.9565217391rem), 3rem);
    line-height: 2; }
  .lessonSub .teacherItem__profile {
    display: grid;
    grid-template-columns: clamp(10rem, calc(3.2608695652vw + 6.7391304348rem), 13rem) 1fr;
    align-items: center;
    gap: clamp(2rem, calc(1.0869565217vw + 0.9130434783rem), 3rem);
    padding: clamp(2rem, calc(1.0869565217vw + 0.9130434783rem), 3rem);
    background: #F1F5FC;
    border-radius: 2rem; }
  .lessonSub .teacherItem__profileTtl {
    margin: 0;
    color: #4A7CC9;
    font-weight: 700;
    line-height: 1.6; }
  .lessonSub .teacherItem__profileTxt {
    font-size: 1.6rem;
    line-height: 1.8; }
  @media (max-width: 999px) {
    .lessonSub .teacherItem {
      display: block;
      padding: 4rem 2rem;
      border-radius: 4rem; }
      .lessonSub .teacherItem__person {
        margin-bottom: 3rem; }
      .lessonSub .teacherItem__pic {
        width: 100%;
        height: auto;
        margin-bottom: 1.5rem;
        border-radius: 2rem; }
      .lessonSub .teacherItem__category {
        margin-bottom: 1rem; }
      .lessonSub .teacherItem__name {
        font-size: clamp(1.8rem, calc(0.9615384615vw + 1.4394230769rem), 2.4rem); }
      .lessonSub .teacherItem__content {
        padding-top: 0; }
      .lessonSub .teacherItem__txt {
        margin-bottom: 2rem; }
      .lessonSub .teacherItem__profile {
        display: block;
        padding: 2rem;
        border-radius: 1.5rem; }
      .lessonSub .teacherItem__profileTtl {
        margin-bottom: 1rem; }
      .lessonSub .teacherItem__profileTxt {
        font-size: clamp(1.4rem, calc(0.3205128205vw + 1.2798076923rem), 1.6rem); } }
.lessonSub .lessonInfo {
  width: 100%;
  margin: 0 auto;
  max-width: 66rem; }
  .lessonSub .lessonInfo__row {
    display: grid;
    grid-template-columns: clamp(16rem, calc(4.347826087vw + 11.652173913rem), 20rem) 1fr;
    gap: clamp(3rem, calc(1.0869565217vw + 1.9130434783rem), 4rem);
    padding: clamp(2.5rem, calc(0.5434782609vw + 1.9565217391rem), 3rem) 0;
    border-bottom: 2px solid #ddd; }
  .lessonSub .lessonInfo__ttl {
    margin: 0;
    color: #4A7CC9;
    font-weight: 700;
    line-height: 1.8; }
  .lessonSub .lessonInfo__txt {
    line-height: 1.8; }
    .lessonSub .lessonInfo__txt p {
      margin: 0; }
      .lessonSub .lessonInfo__txt p:not(:last-child) {
        margin-bottom: 1rem; }
  @media (max-width: 999px) {
    .lessonSub .lessonInfo__row {
      grid-template-columns: 1fr;
      gap: 1rem;
      padding: 2rem 0; } }
.lessonSub .lessonInfoBox {
  width: 90%;
  margin: 0 auto;
  max-width: 66rem; }
.lessonSub .lessonSub01 .inner14 {
  position: relative; }
.lessonSub .lessonSub01 .illust {
  position: absolute;
  bottom: -20rem; }
  @media (max-width: 999px) {
    .lessonSub .lessonSub01 .illust {
      bottom: -12rem; } }
.lessonSub .lessonSub01 .illust1 {
  left: 0;
  width: 22rem;
  height: auto; }
  @media (max-width: 999px) {
    .lessonSub .lessonSub01 .illust1 {
      width: 8rem; } }
.lessonSub .lessonSub01 .illust2 {
  right: 0;
  width: 15rem;
  height: auto; }
  @media (max-width: 999px) {
    .lessonSub .lessonSub01 .illust2 {
      width: 6rem; } }
@media (max-width: 999px) {
  .lessonSub #programming01 .txt {
    text-align: left; } }

/* ---------------------------------------
breadcrumbs
--------------------------------------- */
.breadcrumbs {
  position: relative;
  z-index: 3;
  text-align: right;
  font-size: 1.4rem;
  display: flex;
  align-items: baseline;
  justify-content: flex-end; }
  .breadcrumbs .separator {
    display: inline-block;
    width: 0.9rem;
    height: 0.8rem;
    background: url("../img/breadcrumbs_arrow.png") center/contain no-repeat;
    vertical-align: middle; }
  .breadcrumbs a {
    color: #333;
    text-decoration: underline; }
    .breadcrumbs a:hover {
      opacity: .6; }
  @media (max-width: 999px) {
    .breadcrumbs {
      font-size: 1rem;
      margin-top: 8rem;
      line-height: 1.6;
      justify-content: flex-start;
      margin-top: 4rem;
      flex-wrap: wrap;
      text-align: left;
      margin-bottom: 4rem !important; } }

/* 
---------------------------------------
動き　アニメーション
---------------------------------------
*/
.anim-box.fadeup {
  opacity: 0;
  transform: translateY(30px); }

.anim-box.fadeup.is-animated {
  animation: fadeup 0.9s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: var(--delay, 0s); }

@keyframes fadeup {
  0% {
    transform: translateY(30px);
    opacity: 0; }
  80% {
    opacity: 1; }
  100% {
    transform: translateY(0);
    opacity: 1; } }
.matrix .bg-wrap,
.matrix .bg-wrap .inn {
  display: block; }

.matrix .bg-wrap {
  overflow: hidden;
  opacity: 0; }

.matrix .bg-wrap + .bg-wrap {
  margin-top: 0.8rem; }

.matrix .bg-wrap .inn.large {
  font-size: inherit;
  font-weight: inherit; }

.matrix .bg-wrap .inn.small {
  font-size: inherit; }

.matrix .bg-wrap .inn {
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease; }

.matrix.is-animated .bg-wrap {
  opacity: 1; }

.matrix.is-animated .bg-wrap .inn {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0); }

.anim-box.fadein {
  opacity: 0; }

.anim-box.fadein.is-animated {
  animation: fadein 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: var(--delay, 0s); }

@keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.anim-box.slidein-left {
  opacity: 0;
  transform: translateX(-8rem); }
  .anim-box.slidein-left.is-animated {
    animation: slideInLeftPoyon 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.anim-box.slidein-right {
  opacity: 0;
  transform: translateX(8rem); }
  .anim-box.slidein-right.is-animated {
    animation: slideInRightPoyon 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

@keyframes slideInLeftPoyon {
  0% {
    opacity: 0;
    transform: translateX(-8rem); }
  65% {
    opacity: 1;
    transform: translateX(1rem); }
  82% {
    transform: translateX(-0.4rem); }
  100% {
    opacity: 1;
    transform: translateX(0); } }
@keyframes slideInRightPoyon {
  0% {
    opacity: 0;
    transform: translateX(8rem); }
  65% {
    opacity: 1;
    transform: translateX(-1rem); }
  82% {
    transform: translateX(0.4rem); }
  100% {
    opacity: 1;
    transform: translateX(0); } }
/* 
---------------------------------------
contact02
---------------------------------------
*/
#contact02 {
  position: relative;
  overflow: hidden;
  padding: 26rem 0 16rem;
  background: url(../img/contact/recruit_bg.jpg) center center/cover no-repeat;
  margin: 0 5vw 16rem; }
  @media (max-width: 999px) {
    #contact02 {
      padding: 8rem 0 6rem;
      margin: 0 5vw 9rem; } }
  #contact02 .recruitDeco {
    position: absolute;
    top: 7.5rem;
    left: 50%;
    z-index: 2;
    color: transparent;
    font-size: clamp(12rem, 10vw, 16rem);
    line-height: 1;
    white-space: nowrap;
    -webkit-text-stroke: 0.1rem rgba(255, 255, 255, 0.25);
    transform: translateX(-50%);
    pointer-events: none; }
    @media (max-width: 999px) {
      #contact02 .recruitDeco {
        top: 2rem;
        font-size: 9rem;
        -webkit-text-stroke-width: 0.08rem; } }
  #contact02 .inner14 {
    position: relative;
    z-index: 3; }
  #contact02 .contact02Heading {
    margin-bottom: 6rem;
    color: #fff;
    text-align: center; }
    @media (max-width: 999px) {
      #contact02 .contact02Heading {
        margin-bottom: 4rem; } }
    #contact02 .contact02Heading .ttl {
      margin-bottom: 2.5rem;
      font-size: clamp(3.6rem, 3.2vw, 4.8rem);
      line-height: 1.4;
      font-weight: bold; }
      @media (max-width: 999px) {
        #contact02 .contact02Heading .ttl {
          margin-bottom: 2rem;
          font-size: 2.8rem; } }
    #contact02 .contact02Heading .text {
      margin-bottom: 1rem;
      font-size: 2rem; }
      @media (max-width: 999px) {
        #contact02 .contact02Heading .text {
          font-size: 1.4rem; } }
    #contact02 .contact02Heading .lead {
      font-size: 2.8rem;
      font-weight: bold; }
      @media (max-width: 999px) {
        #contact02 .contact02Heading .lead {
          font-size: 1.6rem; } }
  #contact02 .contactList {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem; }
    @media (max-width: 999px) {
      #contact02 .contactList {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem; } }
  #contact02 .contactBox {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    color: #000;
    background: #fff;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s, transform 0.3s; }
    @media (min-width: 1000px) {
      #contact02 .contactBox:hover {
        opacity: 0.85;
        transform: translateY(-0.5rem); } }
    @media (max-width: 999px) {
      #contact02 .contactBox {
        min-height: 0; } }
  #contact02 .contactBoxTtl {
    display: flex;
    min-height: 7.5rem;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    color: #fff;
    background: #ef3300;
    font-size: clamp(2.3rem, 2vw, 3.2rem);
    line-height: 1.4;
    font-weight: 700;
    text-align: center; }
    @media (max-width: 999px) {
      #contact02 .contactBoxTtl {
        min-height: auto;
        padding: 1rem 0;
        font-size: clamp(1.3rem, 4vw, 1.6rem);
        white-space: nowrap; } }
  #contact02 .contactBoxBody {
    position: relative;
    display: flex;
    min-height: 30.5rem;
    align-items: center;
    justify-content: center;
    flex: 1;
    flex-direction: column;
    padding: 4rem 2rem 3rem; }
    @media (max-width: 999px) {
      #contact02 .contactBoxBody {
        min-height: auto;
        padding: 2rem 0; } }
  #contact02 .contactCatch {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    line-height: 1.5;
    font-weight: 700;
    text-align: center;
    white-space: nowrap; }
    @media (max-width: 999px) {
      #contact02 .contactCatch {
        margin-bottom: 1.2rem;
        font-size: clamp(1rem, 3vw, 1.4rem); } }
    #contact02 .contactCatch::before, #contact02 .contactCatch::after {
      content: "";
      width: 0.2rem;
      height: 2.7rem;
      flex-shrink: 0;
      background: #000; }
      @media (max-width: 999px) {
        #contact02 .contactCatch::before, #contact02 .contactCatch::after {
          width: 0.1rem;
          height: 1rem; } }
    #contact02 .contactCatch::before {
      margin-right: 1.2rem;
      transform: rotate(-25deg); }
      @media (max-width: 999px) {
        #contact02 .contactCatch::before {
          margin-right: 0.6rem; } }
    #contact02 .contactCatch::after {
      margin-left: 1.2rem;
      transform: rotate(25deg); }
      @media (max-width: 999px) {
        #contact02 .contactCatch::after {
          margin-left: 0.6rem; } }
  #contact02 .contactIcon {
    line-height: 0; }
    #contact02 .contactIcon img {
      display: block;
      width: 100%;
      height: auto; }
  #contact02 .contactQr {
    width: 15rem; }
    @media (max-width: 999px) {
      #contact02 .contactQr {
        width: 5rem; } }
  #contact02 .contactSnsIcon {
    line-height: 1; }
    #contact02 .contactSnsIcon i {
      display: block; }
  #contact02 .contactLine {
    color: #06c755;
    font-size: 7rem; }
    @media (max-width: 999px) {
      #contact02 .contactLine {
        font-size: 5rem; } }
  #contact02 .contactTiktok {
    color: #000;
    font-size: 6.5rem; }
    @media (max-width: 999px) {
      #contact02 .contactTiktok {
        font-size: 5rem; } }
  #contact02 .tiktokId {
    font-size: 2.6rem;
    font-weight: bold;
    margin: 1rem auto 0; }
  #contact02 .tiktokNote {
    font-size: 1.6rem; }
  #contact02 .contactBoxTel .contactBoxBody {
    padding-right: 1.5rem;
    padding-left: 1.5rem; }
  @media (max-width: 999px) {
    #contact02 .contactBoxTel {
      grid-column: 1 / -1;
      width: calc((100% - 1rem) / 1);
      margin-top: 0;
      justify-self: center; }
      #contact02 .contactBoxTel .contactBoxBody {
        min-height: auto;
        padding: 2rem 1rem 2rem; } }
  #contact02 .telMain {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 1rem; }
    #contact02 .telMain i {
      flex-shrink: 0;
      font-size: clamp(3rem, 2.6vw, 4rem); }
      @media (max-width: 999px) {
        #contact02 .telMain i {
          font-size: 2.3rem; } }
  #contact02 .telNumber {
    min-width: 0;
    white-space: nowrap;
    font-size: clamp(3.5rem, 3.7vw, 5.5rem);
    line-height: 1;
    letter-spacing: 0.01em; }
    @media (max-width: 999px) {
      #contact02 .telNumber {
        font-size: clamp(3rem, 7vw, 4rem); } }
  #contact02 .businessHours {
    margin-top: 1.8rem;
    font-size: 1.8rem;
    line-height: 1.5;
    font-weight: 700;
    text-align: center;
    white-space: nowrap; }
    @media (max-width: 999px) {
      #contact02 .businessHours {
        margin-top: 1.2rem;
        font-size: clamp(1.1rem, 3.2vw, 1.4rem); } }
  #contact02 .telNote {
    position: absolute;
    right: 2rem;
    bottom: 2.5rem;
    left: 2rem;
    font-size: 1.3rem;
    line-height: 1.6;
    text-align: center; }
    @media (max-width: 999px) {
      #contact02 .telNote {
        position: static;
        margin-top: 0;
        font-size: 1rem;
        white-space: nowrap; } }

body {
  overflow-x: clip; }

.schoolIntro {
  display: flex;
  align-items: center;
  gap: clamp(6rem, calc(3.2608695652vw + 2.7391304348rem), 9rem); }
  .schoolIntro__txt {
    flex: 0 0 clamp(50rem, calc(18.4782608696vw + 31.5217391304rem), 67rem);
    width: clamp(50rem, calc(18.4782608696vw + 31.5217391304rem), 67rem); }
  .schoolIntro .ttl {
    margin-bottom: clamp(3rem, calc(1.0869565217vw + 1.9130434783rem), 4rem);
    font-size: clamp(3.2rem, calc(1.0869565217vw + 2.1130434783rem), 4.2rem);
    font-weight: 700; }
  .schoolIntro .txt {
    font-size: clamp(1.6rem, calc(0.4347826087vw + 1.1652173913rem), 2rem);
    font-weight: 700;
    line-height: 2; }
  .schoolIntro__pic {
    flex: 0 0 clamp(60rem, calc(32.6086956522vw + 27.3913043478rem), 90rem);
    width: clamp(60rem, calc(32.6086956522vw + 27.3913043478rem), 90rem);
    margin-right: calc((100vw - 100%) / -2); }
    .schoolIntro__pic img {
      display: block;
      width: 100%;
      aspect-ratio: 900 / 640;
      object-fit: cover;
      object-position: center center;
      border-radius: 4rem 0 0 4rem; }
  @media (max-width: 999px) {
    .schoolIntro {
      display: block; }
      .schoolIntro__txt {
        width: 100%; }
      .schoolIntro .ttl {
        margin-bottom: 2.5rem;
        font-size: clamp(2.1rem, calc(1.1217948718vw + 1.6793269231rem), 2.8rem); }
      .schoolIntro .txt {
        font-size: clamp(1.4rem, calc(0.4807692308vw + 1.2197115385rem), 1.7rem);
        line-height: 2; }
      .schoolIntro__pic {
        width: calc(100% + 2rem);
        margin: 4rem -2rem 0 0; }
        .schoolIntro__pic img {
          width: 100%;
          aspect-ratio: 900 / 640;
          border-radius: 2rem 0 0 2rem; } }

.schoolIntro--reverse .schoolIntro__pic {
  order: 1;
  flex: 1;
  width: auto;
  min-width: 0;
  height: clamp(45rem, calc(20.652173913vw + 24.347826087rem), 64rem);
  margin-right: 0;
  margin-left: calc((100vw - 100%) / -2);
  overflow: hidden; }
  .schoolIntro--reverse .schoolIntro__pic img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center center;
    border-radius: 0 4rem 4rem 0; }
.schoolIntro--reverse .schoolIntro__txt {
  order: 2;
  flex: 0 0 clamp(50rem, calc(18.4782608696vw + 31.5217391304rem), 67rem);
  width: clamp(50rem, calc(18.4782608696vw + 31.5217391304rem), 67rem); }
@media (max-width: 999px) {
  .schoolIntro--reverse {
    display: flex;
    flex-direction: column; }
    .schoolIntro--reverse .schoolIntro__pic {
      order: 1;
      width: calc(100% + 2rem);
      height: auto;
      margin: 0 0 4rem -2rem; }
      .schoolIntro--reverse .schoolIntro__pic img {
        width: 100%;
        height: auto;
        aspect-ratio: 900 / 640;
        object-fit: cover;
        border-radius: 0 2rem 2rem 0; }
    .schoolIntro--reverse .schoolIntro__txt {
      order: 2;
      width: 100%; } }

.lineBox {
  text-align: center; }
  .lineBox .ttl {
    font-size: clamp(3.2rem, calc(1.3043478261vw + 1.8956521739rem), 4.4rem);
    font-weight: 700; }
  .lineBox .decoLine {
    display: block;
    width: clamp(16rem, calc(4.347826087vw + 11.652173913rem), 20rem);
    height: auto;
    margin: 2.5rem auto 0; }
  .lineBox.white .ttl {
    color: #fff; }
  @media (max-width: 999px) {
    .lineBox .ttl {
      font-size: clamp(2rem, calc(1.2820512821vw + 1.5192307692rem), 2.8rem); }
    .lineBox .decoLine {
      width: clamp(10rem, calc(9.6153846154vw + 6.3942307692rem), 16rem);
      margin-top: 1.4rem; } }

.dottoBox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, calc(0.5434782609vw + 1.4565217391rem), 2.5rem); }
  .dottoBox::before, .dottoBox::after {
    content: "";
    flex-shrink: 0;
    width: 10.9rem;
    height: 1.4rem;
    background: url("../img/decoDot_blue.png") center/contain no-repeat; }
  .dottoBox .ttl {
    margin: 0;
    color: #222;
    font-size: clamp(3.2rem, calc(1.0869565217vw + 2.1130434783rem), 4.2rem);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap; }
  @media (max-width: 999px) {
    .dottoBox {
      gap: 1rem; }
      .dottoBox::before, .dottoBox::after {
        width: 5.5rem;
        height: .7rem; }
      .dottoBox .ttl {
        font-size: clamp(1.8rem, calc(1.2820512821vw + 1.3192307692rem), 2.6rem);
        white-space: normal; } }

.whiteBox {
  background: #fff;
  overflow: hidden; }
  .whiteBox > .inner10 > .ttl {
    margin: 0;
    padding: 2.2rem 0;
    text-align: center;
    font-size: clamp(2.4rem, calc(1.3043478261vw + 1.0956521739rem), 3.6rem);
    font-weight: 700;
    border-radius: 0 0 10rem 10rem; }
  .whiteBox__inner {
    padding: clamp(5rem, calc(3.2608695652vw + 1.7391304348rem), 8rem); }
  .whiteBox.blue > .inner10 > .ttl {
    background: #4A7CC9;
    color: #fff; }
  .whiteBox.green > .inner10 > .ttl {
    background: #2DA338;
    color: #fff; }
  @media (max-width: 999px) {
    .whiteBox {
      border-radius: 3rem; }
      .whiteBox > .inner10 > .ttl {
        padding: .8rem 0;
        font-size: clamp(2rem, calc(0.9615384615vw + 1.6394230769rem), 2.6rem); }
      .whiteBox__inner {
        padding: 3rem 2rem; } }

/* ---------------------------------------
aside
--------------------------------------- */
#aside {
  position: relative;
  padding-top: clamp(12rem, calc(13.0434782609vw + -1.0434782609rem), 24rem);
  padding-bottom: clamp(16rem, calc(8.6956521739vw + 7.3043478261rem), 24rem);
  color: #fff;
  z-index: 2; }
  #aside .bgDeco {
    position: absolute;
    top: -14rem;
    left: 50%;
    width: 100%;
    height: auto;
    transform: translateX(-50%); }
  #aside .illust {
    position: absolute;
    z-index: 1;
    width: clamp(32rem, calc(6.5217391304vw + 25.4782608696rem), 38rem);
    height: auto; }
  #aside .illust1 {
    top: -7vw;
    left: -9vw; }
  #aside .asideTtl {
    text-align: center; }
    #aside .asideTtl .ttl {
      color: #fff;
      font-size: clamp(2.8rem, calc(0.8695652174vw + 1.9304347826rem), 3.6rem);
      line-height: 1.4; }
    #aside .asideTtl .deco {
      color: #fff;
      font-size: clamp(8rem, calc(2.1739130435vw + 5.8260869565rem), 10rem);
      line-height: 1; }
    #aside .asideTtl .sub.ttl {
      font-size: clamp(3.6rem, calc(0.8695652174vw + 2.7304347826rem), 4.4rem);
      text-align: center;
      color: #fff; }
      @media (max-width: 999px) {
        #aside .asideTtl .sub.ttl {
          font-size: clamp(2.2rem, calc(0.652173913vw + 1.547826087rem), 2.8rem); } }
  #aside .lead {
    line-height: 2; }
  #aside .contactBoxs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(4rem, calc(2.1739130435vw + 1.8260869565rem), 6rem); }
  #aside .contactBox .contactTtl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    color: #fff;
    font-size: clamp(1.6rem, calc(0.2173913043vw + 1.3826086957rem), 1.8rem); }
    #aside .contactBox .contactTtl i {
      font-size: clamp(2rem, calc(0.4347826087vw + 1.5652173913rem), 2.4rem); }
  #aside .contactBox .btn {
    width: 100%; }
    #aside .contactBox .btn a {
      height: clamp(8rem, calc(2.1739130435vw + 5.8260869565rem), 10rem); }
  #aside .telBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: clamp(8rem, calc(2.1739130435vw + 5.8260869565rem), 10rem);
    padding: 1rem 3rem;
    background: #fff;
    border: 2px solid #fff;
    border-radius: 10rem;
    color: #373737; }
    #aside .telBtn .telInner {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 1rem;
      line-height: 1; }
      #aside .telBtn .telInner > span {
        font-size: clamp(1.8rem, calc(0.2173913043vw + 1.5826086957rem), 2rem);
        font-weight: 700; }
      #aside .telBtn .telInner strong {
        color: #2DA338;
        font-size: clamp(3.6rem, calc(0.8695652174vw + 2.7304347826rem), 4.4rem);
        line-height: 1; }
    #aside .telBtn:hover {
      opacity: 1;
      background: #2DA338;
      color: #fff; }
      #aside .telBtn:hover .telInner strong {
        color: #fff; }
  #aside .access {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: fit-content;
    margin: 0 auto;
    color: #fff;
    font-size: clamp(1.6rem, calc(0.2173913043vw + 1.3826086957rem), 1.8rem); }
    #aside .access i {
      font-size: clamp(2rem, calc(0.4347826087vw + 1.5652173913rem), 2.4rem);
      text-decoration: none; }
    #aside .access span {
      text-decoration: underline;
      text-decoration-color: #fff;
      text-underline-offset: .2rem;
      transition: all 0.3s; }
    #aside .access:hover {
      opacity: 1; }
      #aside .access:hover span {
        color: #373737;
        transition: all 0.3s; }
  @media (max-width: 999px) {
    #aside {
      z-index: 2;
      padding: clamp(6rem, calc(4.8076923077vw + 4.1971153846rem), 9rem) 0 16vw; }
      #aside .bgDeco {
        top: -16vw;
        z-index: 2; }
      #aside .asideTtl .ttl {
        font-size: 1.6rem; }
      #aside .asideTtl .deco {
        font-size: 5rem; }
      #aside .lead {
        text-align: center;
        margin-bottom: 2rem; }
      #aside .contactBoxs {
        grid-template-columns: 1fr;
        gap: 4rem; }
      #aside .contactBox .contactTtl {
        justify-content: center;
        font-size: 1.5rem;
        margin-bottom: 0.5rem; }
        #aside .contactBox .contactTtl i {
          font-size: 2rem; }
      #aside .contactBox .btn {
        margin: 0 auto; }
        #aside .contactBox .btn a {
          height: 7rem; }
      #aside .telBtn {
        height: 7rem;
        max-width: 41rem;
        margin: 0 auto; }
        #aside .telBtn .telInner > span {
          font-size: 1.6rem; }
        #aside .telBtn .telInner strong {
          font-size: 2.4rem; }
      #aside .access {
        font-size: 1.5rem; } }

#aside {
  position: relative;
  overflow: visible;
  z-index: 2; }
  #aside .inner10 {
    position: relative;
    z-index: 3; }
  #aside .illustArea {
    --spread: clamp(0px, calc(208.696px - 10.87vw), 100px);
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--spread) * -1);
    right: calc(var(--spread) * -1);
    z-index: 2;
    pointer-events: none; }
  #aside .illust {
    position: absolute;
    display: block;
    height: auto; }
  #aside .illust1 {
    top: 24%;
    left: 7%;
    width: clamp(10rem, calc(4.347826087vw + 5.652173913rem), 14rem); }
  #aside .illust2 {
    top: 18%;
    left: 21%;
    width: clamp(6rem, calc(2.1739130435vw + 3.8260869565rem), 8rem); }
  #aside .illust3 {
    top: 13%;
    left: 36%;
    width: clamp(8rem, calc(5.4347826087vw + 2.5652173913rem), 13rem); }
  #aside .illust4 {
    top: 8%;
    left: 40%;
    width: clamp(64rem, calc(21.7391304348vw + 42.2608695652rem), 84rem); }
  #aside .illust5 {
    top: 27%;
    right: 8%;
    width: clamp(8rem, calc(4.347826087vw + 3.652173913rem), 12rem); }
  #aside .illust6 {
    top: 42%;
    right: 4%;
    width: clamp(7rem, calc(3.2608695652vw + 3.7391304348rem), 10rem); }
  #aside .illust7 {
    top: 57%;
    right: 12%;
    width: clamp(5rem, calc(1.0869565217vw + 3.9130434783rem), 6rem); }
  #aside .illust8 {
    top: 43%;
    left: 13%;
    width: clamp(7rem, calc(3.2608695652vw + 3.7391304348rem), 10rem); }
  #aside .illust9 {
    top: 61%;
    left: 7%;
    width: clamp(12rem, calc(2.1739130435vw + 9.8260869565rem), 14rem); }
  @media (max-width: 999px) {
    #aside .illustArea {
      width: 100%;
      max-width: 42rem;
      margin: 0 auto; }
    #aside .illust1 {
      top: -3rem;
      left: 6rem;
      width: 6.5rem; }
    #aside .illust2 {
      top: 4.5rem;
      left: auto;
      right: 1rem;
      width: 3.5rem; }
    #aside .illust3 {
      top: 0;
      left: 13.5rem;
      width: 5rem; }
    #aside .illust4 {
      top: -2.5rem;
      left: auto;
      right: 4.5rem;
      width: 28rem; }
    #aside .illust5 {
      top: 26rem;
      right: 1.5rem;
      width: 4.5rem; }
    #aside .illust6 {
      top: 23rem;
      right: auto;
      left: 2rem;
      width: 4rem; }
    #aside .illust7 {
      top: 18rem;
      right: 1.5rem;
      width: 2.5rem; }
    #aside .illust8 {
      top: 1.5rem;
      left: 2rem;
      width: 4rem; }
    #aside .illust9 {
      top: 10rem;
      left: .5rem;
      width: 5rem; } }

#aside .asidePoyon {
  opacity: 0;
  translate: 0 -5rem;
  scale: .9; }
  #aside .asidePoyon.is-show {
    animation: asidePoyon 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: var(--delay, 0s); }

@keyframes asidePoyon {
  0% {
    opacity: 0;
    translate: 0 -5rem;
    scale: .9; }
  38% {
    opacity: 1;
    translate: 0 .8rem;
    scale: 1.04 .96; }
  58% {
    translate: 0 -.8rem;
    scale: .98 1.03; }
  74% {
    translate: 0 .3rem;
    scale: 1.02 .99; }
  88% {
    translate: 0 -.15rem;
    scale: .99 1.01; }
  100% {
    opacity: 1;
    translate: 0 0;
    scale: 1; } }
#aside01 {
  border-radius: 20rem 20rem 0 0;
  position: relative; }
  @media (max-width: 999px) {
    #aside01 {
      border-radius: 4rem 4rem 0 0;
      padding: 6rem 0 8rem; } }
  #aside01 .ttl {
    font-size: clamp(3.6rem, calc(0.8695652174vw + 2.7304347826rem), 4.4rem);
    text-align: center;
    color: #fff; }
    @media (max-width: 999px) {
      #aside01 .ttl {
        font-size: clamp(2.2rem, calc(0.652173913vw + 1.547826087rem), 2.8rem); } }
  #aside01 .inner14 > .txt {
    color: #fff;
    text-align: center; }
  #aside01 .Clouds {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1; }
    #aside01 .Clouds img {
      position: absolute;
      display: block;
      height: auto; }
  #aside01 .cloud01 {
    top: 22%;
    left: 13%;
    width: 5.5%; }
    @media (max-width: 999px) {
      #aside01 .cloud01 {
        top: 13%;
        left: 8%;
        width: 9.5%; } }
  #aside01 .cloud02 {
    top: 11%;
    left: 24%;
    width: 4.5%; }
    @media (max-width: 999px) {
      #aside01 .cloud02 {
        top: 7%;
        left: 23%;
        width: 7.5%; } }
  #aside01 .cloud03 {
    top: 15%;
    right: 13%;
    width: 7%; }
    @media (max-width: 999px) {
      #aside01 .cloud03 {
        top: 13%;
        right: 6%;
        width: 8%; } }

.sub #aside .illustArea {
  top: clamp(-10rem, calc(6.5217391304vw + -16.5217391304rem), -4rem); }
  @media (max-width: 999px) {
    .sub #aside .illustArea {
      top: 0; } }