/* brとかの表示・非表示 */
.none-pc {
  display: block;
}

.none-tl {
  display: block;
}

.none-sp {
  display: none;
}

@media (width <= 1080px) {
  .none-tl {
    display: none;
  }
}

@media (width <= 520px) {
  .none-pc {
    display: none;
  }

  .none-sp {
    display: block;
  }
}

/* cursorのポインター */
.cursor-df {
  cursor: default;
}

/* flex基礎 */
.display-flex {
  display: flex;
}

.display-flex.flex-row {
  flex-direction: row; /* 横並び */
}

.display-flex.flex-column {
  flex-direction: column; /* 縦並び */
}

.display-flex.flex-wrap {
  flex-wrap: wrap; /* 回り込む */
}

.display-flex.flex-nowrap {
  flex-wrap: nowrap; /* 回り込まない */
}

.display-flex.flex-jc-sb {
  justify-content: space-between;
}

.display-flex.flex-jc-l {
  justify-content: flex-start;
}

.display-flex.flex-jc-c {
  justify-content: center;
}

.display-flex.flex-jc-r {
  justify-content: flex-end;
}

.display-flex.flex-ai-l {
  align-items: flex-start;
}

.display-flex.flex-ai-c {
  align-items: center;
}

.display-flex.flex-ai-r {
  align-items: flex-end;
}

/* flex＆grid gap設定（gapとは溝 ≒ margin） */
.gap-04 {
  gap: var(--plus-number-04);
}

.gap-08 {
  gap: var(--plus-number-08);
}

.gap-16 {
  gap: var(--plus-number-16);
}

.gap-24 {
  gap: var(--plus-number-24);
}

.gap-32 {
  gap: var(--plus-number-32);
}

.gap-40 {
  gap: var(--plus-number-40);
}

/* margin設定（margin-bottomのみ） */
.mb-04 {
  margin-bottom: var(--plus-number-04);
}

.mb-08 {
  margin-bottom: var(--plus-number-08);
}

.mb-16 {
  margin-bottom: var(--plus-number-16);
}

.mb-24 {
  margin-bottom: var(--plus-number-24);
}

.mb-32 {
  margin-bottom: var(--plus-number-32);
}

.mb-40 {
  margin-bottom: var(--plus-number-40);
}

.mb-48 {
  margin-bottom: var(--plus-number-48);
}

.mb-56 {
  margin-bottom: var(--plus-number-56);
}

.mb-64 {
  margin-bottom: var(--plus-number-64);
}

.mb-72 {
  margin-bottom: var(--plus-number-72);
}

.mb-80 {
  margin-bottom: var(--plus-number-80);
}

.mb-160 {
  margin-bottom: calc(var(--plus-number-80) * 2);
}

/* sectionのwidth設定 */
.section-width {
  width: calc(var(--percentage-100) - calc(var(--plus-number-64) * 2));
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
}

@media (width <= 520px) {
  .section-width {
    width: calc(var(--percentage-100) - calc(var(--plus-number-32) * 2));
  }
}

/* sectionのmargin設定 */
.section-margin {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-40);
  margin-bottom: calc(var(--plus-number-80) * 2);
}

@media (width <= 1080px) {
  .section-margin {
    gap: var(--plus-number-32);
    margin-bottom: var(--plus-number-80);
  }
}

@media (width <= 810px) {
  .section-margin {
    margin-bottom: var(--plus-number-64);
  }
}

/* sectionのcontent設定 */
.section-content {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-16);
  align-items: center;
}

/* sectionのgrid設定 */
.section-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--plus-number-32);
}

@media (width <= 1080px) {
  .section-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (width <= 520px) {
  .section-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--plus-number-24);
  }
}

.grid-c-12-6-4 {
  grid-column: span 12;
}

.grid-c-10-4-3 {
  grid-column: span 10;
}

.grid-c-8-3-4,
.grid-c-8-6-4,
.grid-c-8-4-6-4 {
  grid-column: span 8;
}

.grid-c-6-3-2,
.grid-c-6-3-4,
.grid-c-6-3-6-4 {
  grid-column: span 6;
}

.grid-c-4-2-4,
.grid-c-4-3-4,
.grid-c-4-6-4,
.grid-c-4-2-6-4,
.grid-c-4-3-6-4 {
  grid-column: span 4;
}

.grid-c-3-2-4 {
  grid-column: span 3;
}

.grid-c-2-1,
.grid-c-2-1-2-4 {
  grid-column: span 2;
}

.grid-c-1-6-4 {
  grid-column: span 1;
}

@media (width <= 1080px) {
  .grid-c-4-6-4,
  .grid-c-8-6-4,
  .grid-c-12-6-4 {
    grid-column: span 6;
  }

  .grid-c-4-2-4,
  .grid-c-10-4-3,
  .grid-c-8-4-6-4 {
    grid-column: span 4;
  }

  .grid-c-4-3-4,
  .grid-c-6-3-2,
  .grid-c-6-3-4,
  .grid-c-8-3-4,
  .grid-c-4-3-6-4,
  .grid-c-6-3-6-4 {
    grid-column: span 3;
  }

  .grid-c-3-2-4,
  .grid-c-4-2-4,
  .grid-c-4-2-6-4 {
    grid-column: span 2;
  }

  .grid-c-2-1-2-4 {
    grid-column: span 1;
  }
}

@media (width <= 810px) {
  .grid-c-1-6-4,
  .grid-c-8-6-4,
  .grid-c-4-2-6-4,
  .grid-c-4-3-6-4,
  .grid-c-6-3-6-4,
  .grid-c-8-4-6-4 {
    grid-column: span 6;
  }

  .grid-c-4-2-4,
  .grid-c-8-3-4 {
    grid-column: span 4;
  }

  .grid-c-2-1-2-4 {
    grid-column: span 2;
  }
}

@media (width <= 520px) {
  .grid-c-1-6-4,
  .grid-c-3-2-4,
  .grid-c-4-3-4,
  .grid-c-4-6-4,
  .grid-c-6-3-4,
  .grid-c-8-6-4,
  .grid-c-12-6-4,
  .grid-c-2-1-2-4,
  .grid-c-4-2-6-4,
  .grid-c-4-3-6-4,
  .grid-c-6-3-6-4,
  .grid-c-8-4-6-4 {
    grid-column: span 4;
  }

  .grid-c-10-4-3 {
    grid-column: span 3;
  }

  .grid-c-6-3-2 {
    grid-column: span 2;
  }

  .grid-c-2-1 {
    grid-column: span 1;
  }
}

/* スクール名 */
.school-name-logo {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--plus-number-08);
  align-items: center;
}

.school-logo {
  width: 120px;
  height: 64px;
}

h1.school-name,
p.school-name {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-04);
  font-weight: var(--jp-bold);
  line-height: var(--lh-100);
  color: var(--text-brand);
  letter-spacing: var(--ls-m);
}

h1.school-name {
  font-size: var(--fs-20);
}

p.school-name {
  font-size: var(--fs-24);
}

.school-name > span {
  font-size: var(--fs-10);
  font-weight: var(--jp-medium);
  color: var(--aircraft-10);
  letter-spacing: var(--ls-s);
}

@media (width <= 810px) {
  h1.school-name {
    font-size: var(--fs-18);
  }
}

@media (width <= 520px) {
  p.school-name {
    font-size: var(--fs-18);
  }
}

/* hタグ基礎 */

/* h1 */
h1.page-title {
  position: absolute;
  bottom: var(--plus-number-40);
  left: var(--percentage-50);
  width: calc(var(--percentage-100) - calc(var(--plus-number-64) * 2));
  max-width: 1280px;
  font-size: var(--fs-55);
  font-weight: var(--jp-medium);
  color: var(--color-white);
  letter-spacing: var(--ls-m);
  filter: drop-shadow(0 8px 16px rgb(0 0 0 / 16%)) drop-shadow(0 4px 4px rgb(0 0 0 / 32%));
  transform: translate(-50%, 0);
}

@media (width <= 810px) {
  h1.page-title {
    font-size: var(--fs-35);
  }
}

@media (width <= 520px) {
  h1.page-title {
    bottom: var(--plus-number-24);
    width: calc(var(--percentage-100) - calc(var(--plus-number-32) * 2));
    font-size: var(--fs-28);
  }
}

/* h2 */

/* main-title */
.main-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--percentage-100);
  overflow: hidden;
  cursor: default;
}

h2.deco01 {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-24);
  align-items: center;
  justify-content: center;
  padding-top: var(--plus-number-16);
  padding-bottom: var(--plus-number-32);
  font-size: var(--fs-55);
  font-weight: var(--jp-medium);
  line-height: var(--lh-100);
  color: var(--text-description);
  text-align: center;
  letter-spacing: var(--ls-m);
}

h2.deco01::before {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-20);
  line-height: var(--lh-100);
  color: var(--text-brand);
  letter-spacing: var(--ls-s);
  content: attr(data-en);
}

h2.deco01::after {
  position: absolute;
  top: var(--plus-number-40);
  width: var(--plus-number-01);
  height: var(--plus-number-16);
  content: "";
  background-color: var(--bg-brand);
}

.h2-animation {
  position: absolute;
  top: 50%;
  z-index: -1;
  font-family: var(--font-en);
  font-size: calc(var(--fs-55) * 3);
  font-weight: var(--en-extrabold);
  line-height: var(--lh-100);
  color: var(--text-decoration);
  white-space: nowrap;
  opacity: 0.5;
  transform: translateY(-50%);
}

.h2-animation span {
  display: inline-block;
}

@media (width <= 1080px) {
  h2.deco01 {
    padding-bottom: var(--plus-number-24);
    font-size: var(--fs-44);
  }

  h2.deco01::before {
    font-size: var(--fs-18);
  }

  .h2-animation {
    font-size: calc(var(--fs-55) * 2);
  }
}

@media (width <= 520px) {
  h2.deco01 {
    padding-bottom: 0;
    font-size: var(--fs-35);
  }

  h2.deco01::before {
    font-size: var(--fs-16);
  }

  .h2-animation {
    font-size: var(--fs-55);
  }
}

/* h3 */

/* deco01 */
h3.deco01 {
  position: relative;
  padding-top: var(--plus-number-32);
  padding-left: var(--plus-number-32);
  font-size: var(--fs-24);
  font-weight: var(--jp-medium);
  color: var(--text-thesky);
}

h3.deco01::before {
  position: absolute;
  top: var(--mins-number-08);
  left: var(--mins-number-08);
  z-index: -1;
  display: block;
  font-size: var(--fs-55);
  font-weight: var(--en-extralight);
  line-height: var(--lh-100);
  content: attr(data-number);
  opacity: 0.5;
}

h3.deco01::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  display: block;
  width: var(--plus-number-64);
  height: var(--plus-number-64);
  content: "";
  background: var(--gd-close-thesky);
  border-radius: var(--percentage-50);
}

/* deco02 */
h3.deco02 {
  position: relative;
  padding-left: var(--plus-number-16);
  font-size: var(--fs-28);
  font-weight: var(--jp-bold);
  color: var(--text-brand);
}

h3.deco02::after,
h3.deco02::before {
  position: absolute;
  content: "";
  background-color: var(--bg-brand);
}

h3.deco02::after {
  top: 0;
  left: var(--plus-number-02);
  width: var(--plus-number-01);
  height: var(--percentage-100);
}

h3.deco02::before {
  bottom: 0;
  left: 0;
  width: var(--plus-number-04);
  height: var(--plus-number-04);
  border-radius: var(--percentage-50);
}

@media (width <= 830px) {
  h3.deco02 {
    font-size: var(--fs-24);
    font-weight: var(--jp-medium);
  }
}

/* deco03 */
h3.deco03 {
  position: relative;
  padding-bottom: var(--plus-number-16);
  font-weight: var(--jp-bold);
  color: var(--text-item);
  text-align: center;
}

h3.deco03::after {
  position: absolute;
  bottom: 0;
  left: var(--percentage-50);
  width: var(--plus-number-40);
  content: "";
  border-bottom: var(--bg-far-nature) dotted var(--plus-number-08);
  transform: translateX(-50%);
}

@media (width <= 830px) {
  h3.deco03 {
    font-weight: var(--jp-bold);
    text-align: center;
  }
}

/* h4 */

/* deco01 */
h4.deco01 {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--plus-number-08);
  align-items: center;
  font-size: var(--fs-24);
  font-weight: var(--jp-medium);
  line-height: var(--lh-120);
  color: var(--text-brand);
}

h4.deco01::before {
  position: relative;
  display: block;
  font-family: var(--font-en);
  font-weight: var(--en-bold);
  content: attr(data-mark);
}

/* dt */

/* deco01 */
dt.deco01 {
  padding: var(--plus-number-04) var(--plus-number-24);
  font-weight: var(--jp-medium);
  background-color: var(--bg-tertiary);
}

/* deco02 */
dt.deco02 {
  padding: var(--plus-number-08) var(--plus-number-16);
  font-size: var(--fs-20);
  font-weight: var(--jp-medium);
  text-align: center;
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-corners);
}

/* リスト基礎 */

/* ●印 */
.list-type01 > li {
  position: relative;
  padding-left: calc(var(--plus-number-16) - var(--plus-number-04));
}

.list-type01 > li::after {
  position: absolute;
  top: var(--percentage-50);
  left: 0;
  width: var(--plus-number-08);
  height: var(--plus-number-08);
  content: "";
  background-color: var(--bg-item);
  border-radius: var(--percentage-50);
  transform: translate(0, -40%);
}

/* ※印 */
.list-type02 > li {
  position: relative;
  padding-left: calc(var(--plus-number-16) + var(--plus-number-04));
  font-size: var(--fs-14);
  color: var(--text-description);
  letter-spacing: var(--ls-s);
}

.list-type02 > li::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "※";
}

/* 料金テキストのフォーマット */
.fee-text {
  font-size: var(--fs-18);
  font-weight: var(--jp-medium);
}

.fee-text > span {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding-right: var(--plus-number-48);
}

.fee-text > .tax::after {
  position: absolute;
  right: var(--plus-number-04);
  bottom: var(--plus-number-02);
  background-color: var(--bg-onfill);
}

.fee-text > span span {
  font-family: var(--font-en);
  font-size: var(--fs-28);
  font-weight: var(--en-bold);
}

/* 強調 */
.emphasis {
  color: var(--text-alert);
  text-decoration: underline wavy var(--text-alert);
}

/* 線吹き出し */
.line-bubble {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--plus-number-16);
  align-items: center;
  justify-content: center;
  font-size: var(--fs-16);
  font-weight: var(--jp-medium);
}

.line-bubble::before,
.line-bubble::after {
  width: var(--plus-number-02);
  height: var(--plus-number-24);
  content: "";
  background-color: var(--aircraft-10);
  border-radius: var(--radius-01);
}

.line-bubble::before {
  transform: rotate(-35deg);
}

.line-bubble::after {
  transform: rotate(35deg);
}

/* コンテンツ要素の隠し */
.hidden-button {
  display: flex;
  gap: var(--plus-number-08);
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--plus-number-16);
  font-size: var(--fs-20);
  font-weight: var(--jp-medium);
  line-height: var(--lh-100);
  color: var(--text-onfill);
  background: var(--gd-thesky);
  background-size: 200% auto;
  border-radius: var(--radius-04);
  transition: all 0.4s ease-in-out;
  transition-timing-function: ease-in;
}

.hidden-button.pull::after {
  background-color: var(--bg-primary);
}

.hidden-button:hover,
.hidden-button:active {
  background-position: right center;
}

.hidden-box {
  display: none;
}

.open-box {
  display: grid;
}