@charset "UTF-8";
/* Vars
----------------------------------------- */
:root {
  --pcWidth: 1200px;
  --tabWidth: 1200px;
  --spWidth: 780px;
  --spBase: 390px;
  --space-lv1: .5rem;
  --space-lv2: 1rem;
  --space-lv3: 1.5rem;
  --space-lv4: 2rem;
  --space-lv5: 2.5rem;
  --space-lv6: 3rem;
  --space-lv7: 3.5rem;
  --space-lv8: 4rem;
  --space-lv9: 4.5rem;
  --space-lv10: 5rem;
  --row-gap-lv1: .4rem;
  --row-gap-lv2: var(--space-lv1);
  --row-gap-lv3: var(--space-lv2);
  --row-gap-lv4: var(--space-lv3);
  --row-gap-lv5: var(--space-lv4);
  --row-gap-lv6: var(--space-lv5);
  --row-gap-lv7: var(--space-lv6);
  --row-gap-lv8: var(--space-lv7);
  --row-gap-lv9: var(--space-lv8);
  --row-gap-lv10: var(--space-lv9);
  --column-gap-lv1: var(--space-lv1);
  --column-gap-lv2: var(--space-lv2);
  --column-gap-lv3: var(--space-lv3);
  --column-gap-lv4: var(--space-lv4);
  --column-gap-lv5: var(--space-lv5);
  --column-gap-lv6: var(--space-lv6);
  --column-gap-lv7: var(--space-lv7);
  --column-gap-lv8: var(--space-lv8);
  --column-gap-lv9: var(--space-lv9);
  --column-gap-lv10: var(--space-lv10);
  --gap-lv1: var(--row-gap-lv1) var(--column-gap-lv1);
  --gap-lv2: var(--row-gap-lv2) var(--column-gap-lv2);
  --gap-lv3: var(--row-gap-lv3) var(--column-gap-lv3);
  --gap-lv4: var(--row-gap-lv4) var(--column-gap-lv4);
  --gap-lv5: var(--row-gap-lv5) var(--column-gap-lv5);
  --gap-lv6: var(--row-gap-lv6) var(--column-gap-lv6);
  --gap-lv7: var(--row-gap-lv7) var(--column-gap-lv7);
  --gap-lv8: var(--row-gap-lv8) var(--column-gap-lv8);
  --gap-lv9: var(--row-gap-lv9) var(--column-gap-lv9);
  --gap-lv10: var(--row-gap-lv10) var(--column-gap-lv10);
  --content-base-width: 1200px;
  --content-base-width-pd: 1240px;
  --content-inner-base-width: 850px;
  --content-inner-base-width-pd: 890px;
  --content-block: var(--space-lv8);
  --content-space: 2rem;
  --base-padding-in: 2rem;
  --wrap-inline: 124rem;
  --lower-wrap-inline: 89rem;
  --block-space-block-start: var(--space-lv7);
  --block-space-block-end: var(--space-lv7);
}
@media screen and (min-width: 780px) {
  :root {
    --space-lv1: 1rem;
    --space-lv2: 1.5rem;
    --space-lv3: 2rem;
    --space-lv4: 3rem;
    --space-lv5: 3.5rem;
    --space-lv6: 4rem;
    --space-lv7: 5rem;
    --space-lv8: 6rem;
    --space-lv9: 7rem;
    --space-lv10: 8rem;
    --content-space: 3rem;
    --block-space-block-start: var(--space-lv9);
    --block-space-block-end: var(--space-lv9);
  }
}

/* Base
----------------------------------------- */
/* Color
----------------------------------------- */
:root {
  --color-main: #235AA4;
  --color-sub: #61880A;
  --white: #fff;
  --black: #323232;
  --transparent: rgba(0, 0, 0, 0);
  --text-body: var(--black);
  --c-blue: #2841a4;
  --c-blue-dark: #004d8e;
  --c-blue-dark2: #240b80;
  --c-red: #e01c1c;
  --c-red-dark: #800000;
  --c-green: #167d38;
  --c-green-light: #dbf7dc;
  --c-yellow: #f9c700;
  --c-yellow-light: #fffbc2;
  --bg-liner-yellow: #fffc00;
  --color-main-light: color-mix(in srgb, var(--color-main) 40%, #fff);
  --color-sub-light: color-mix(in srgb, var(--color-sub) 30%, #fff);
  --black-light: color-mix(in srgb, var(--black) 30%, var(--white));
  --error-color: #b00000;
  --color-red: #b00000;
  --color-silver: #808791;
  --placeholder-color: #888;
  --bg-white: var(--white);
  --bg-sand: #F7F5EF;
  --bg-blue: var(--color-main);
  --bg-blue-light: #67c8ff;
  --bg-green: #167d38;
  --bg-green-light: #E8F3D8;
  --bg-yellow-light: #F8F6F2;
  --bg-yellow-dark: #f2e5c2;
  --bg-red-light: #fb765c;
  --bg-orange-light: #fd9b75;
  --bg-body: var(--white);
  --bg-section: var(--bg-sand);
  --button-color: var(--color-main);
  --border-color: #707070;
  /* @Utility .u-box-shadow
  ----------------------------------------- */
  --box-shadow-color: #CCC6AA;
  --footer-nav-bg: #E3E1DA;
  --footer-copy-bg: var(--black);
  --result-bg-color: rgba(251, 251, 253, .7);
  --error-color: #ff2a2a;
  --cta-bd-color: #323232;
  --cta-bg-color: #fefddb;
  --form-arrow-color: #7b818c;
  --form-red: #7e0000;
  --form-radio-bd-color: #BABABA;
  --form-radio-bg-color: #E9E9E9;
}

body {
  color: var(--text-body);
  background-color: var(--bg-body);
}

/* ----------------------------------------- */
/* ----------------------------------------- */
/* ----------------------------------------- */
/**
 * メディアクエリ
 * @param $breakpoint - ブレイクポイント
 * @param $type - タイプ(min)
 * @return - @media screen and (min-width: width) { ... }
 */
/* ----------------------------------------- */
/* ----------------------------------------- */
/**
 * メディアクエリ - スマホ
 * @return - @media screen and (min-width: 780px) { ... }
 */
/* ----------------------------------------- */
/* ----------------------------------------- */
/**
 * メディアクエリ - PC
 * @return - @media not screen and (min-width: 1200px) { ... }
 */
/* ----------------------------------------- */
/* ----------------------------------------- */
/**
 * 単位削除
 * @param $number - 削除する単位
 * @return - 削除後の数値
 */
/* ----------------------------------------- */
/* ----------------------------------------- */
/**
 * Rem変換
 * @param $size - 変換するサイズ
 * @param $base - ベース指定(16)
 * @return - 変換後のサイズ(rem)
 */
/* ----------------------------------------- */
/* ----------------------------------------- */
/**
 * Vw変換
 * @param $size - 変換するサイズ
 * @param $viewport - ビューポートの幅
 * @return - 変換後のサイズ(vw)
 */
/* ----------------------------------------- */
/* ----------------------------------------- */
/**
 * min出力
 * @param $autoSize - 可変値
 * @param $maxSize - 最大値
 * @param $baseSize - ベース指定(16)
 * @return - min(可変値, 最大値)
 */
/* ----------------------------------------- */
/* ----------------------------------------- */
/**
 * max出力
 * @param $autoSize - 可変値
 * @param $minSize - 最小値
 * @param $baseSize - ベース指定(16)
 * @return - max(可変値, 最小値)
 */
/* ----------------------------------------- */
/* ----------------------------------------- */
/**
 * clamp出力
 * @param $minSize - 最小値
 * @param $autoSize - 可変値
 * @param $maxSize - 最大値
 * @param $baseSize - ベース指定(16)
 * @return - clamp(最小値, 可変値, 最大値)
 */
/* ----------------------------------------- */
/* Base
----------------------------------------- */
:root {
  --fz-text-lv1: 12px;
  --fz-text-lv2: 14px;
  --fz-text-lv3: 16px;
  --fz-text-lv4: 18px;
  --fz-text-lv5: 20px;
  --fz-text-lv6: 21px;
  --fz-text-lv7: 22px;
  --fz-title-lv1: 1.8rem;
  --fz-title-lv2: 2.2rem;
  --fz-title-lv3: 1.8rem;
  --fz-title-lv4: 2.2rem;
  --fz-title-lv5: 2.4rem;
  --fz-title-lv6: 2.8rem;
  --fz-title-lv7: 3.2rem;
  --fz-h1: var(--fz-title-lv6);
  --fz-h2: var(--fz-title-lv4);
  --fz-h3: var(--fz-title-lv3);
  --fz-h4: var(--fz-title-lv2);
  --fz-h5: var(--fz-title-lv1);
  --fz-button: var(--fz-text-lv4);
  --fz-body: var(--fz-text-lv3);
  --fw-normal: normal;
  --fw-bold: bold;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;
  --fw-medium: var(--fw-500);
  --fw-semi-bold: var(--fw-600);
  --fw-heavy: var(--fw-800);
  --fw-black: var(--fw-900);
  --lh-lv1: 1;
  --lh-lv2: 1.2;
  --lh-lv3: 1.4;
  --lh-lv4: 1.5;
  --lh-lv5: 1.6;
  --lh-lv6: 1.8;
  --lh-lv7: 2;
  --font-family: YakuHanJP, "Hiragino Kaku Gothic ProN", "Hiragino Sans", hiragino-kaku-gothic-pron, "Noto Sans", "Noto Sans JP", "He lvetica Neue", "Helvetica", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  --ff-sans: var(--font-family);
  --ff-sans-en: "futura-pt", "Jost", "Futura PT", "Futura", var(--ff-sans);
  --ff-sans-num: futura-pt-bold, var(--ff-sans-en);
  --ff-icon: "Material Symbols Outlined";
  --ls-lv1: .02em;
  --ls-lv2: .04em;
  --ls-lv3: .08em;
  --ls-lv4: .1em;
  --ls-lv5: .2em;
  --ls-lv6: .4em;
  --ls-lv7: .5em;
}
@media screen and (min-width: 780px) {
  :root {
    --fz-title-lv2: 2rem;
    --fz-title-lv3: 2.2rem;
    --fz-title-lv4: 2.8rem;
    --fz-title-lv5: 3.6rem;
    --fz-title-lv6: 5rem;
    --fz-title-lv7: 6.2rem;
    --fz-button: 2.5rem;
  }
}

/* Font
----------------------------------------- */
.style-text, body {
  font: var(--fw-normal) var(--fz-body)/var(--lh-lv5) var(--font-family);
}

html {
  font-size: 62.5%;
}
@media not screen and (min-width: 780px) {
  html {
    font-size: 2.5641025641vw;
  }
}

body {
  letter-spacing: var(--ls-lv2);
}

h1, h2, h3, h4, h5 {
  text-align: center;
  font-weight: var(--fw-bold);
  line-height: var(--lh-lv3);
  word-break: auto-phrase;
}

h1 {
  font-size: var(--fz-h1);
}

h2 {
  color: var(--color-main);
  font-size: var(--fz-h2);
}

h3 {
  font-size: var(--fz-h3);
}

h4 {
  font-size: var(--fz-h4);
}

h5 {
  font-size: var(--fz-h5);
}

em {
  font-style: normal;
  font-weight: var(--fw-bold);
}

/* ----------------------------------------- */
/**
 * border-image Value
 * @param $color - 設定色
 * @param $minSize - 最小値
 * @param $baseSize - ベース指定(16)
 * @return - max(可変値, 最小値)
 */
/* ----------------------------------------- */
/* ----------------------------------------- */
/**
 * font-feature-settings Value
 * @param $style - 設定値
 * @return - フォント設定
 */
/* ----------------------------------------- */
/* ----------------------------------------- */
/**
 * background - ストライプの背景
 * @param $color - 設定色
 * @return - ボーダー設定
 */
/* ----------------------------------------- */
/* ----------------------------------------- */
/**
 * Hover or Touch
 * @param $style - 設定値
 * @return - フォント設定
 */
/* ----------------------------------------- */
* {
  margin: 0;
  padding: 0;
}

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

*:where(:not(fieldset, progress, meter)) {
  border-width: 0;
  /* border-style: solid; */
  background-origin: border-box;
  background-repeat: no-repeat;
}

html {
  min-block-size: 100%;
  block-size: auto;
  -webkit-text-size-adjust: none;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}
body {
  text-rendering: optimizeSpeed;
  min-block-size: 100%;
}

:where(img, svg, video, canvas, audio, iframe, embed, object, picture) {
  display: block;
}

:where(img, svg, video) {
  block-size: auto;
  max-inline-size: 100%;
}

:where(svg) {
  stroke: none;
  fill: currentColor;
}

:where(svg):where(:not([fill])) {
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:where(svg):where(:not([width])) {
  inline-size: 5rem;
}

:where(input, button, textarea, select),
:where(input[type=file])::-webkit-file-upload-button {
  color: inherit;
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
}

:where(textarea) {
  resize: vertical;
}

@supports (resize: block) {
  :where(textarea) {
    resize: block;
  }
}
:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

h1 {
  font-size: 2em;
}

:where(ul, ol) {
  list-style-position: inside;
}

:where(ul, ol)[role=list] {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
  cursor: pointer;
  touch-action: manipulation;
}

:where(input[type=file]) {
  cursor: auto;
}

:where(input[type=file])::-webkit-file-upload-button,
:where(input[type=file])::file-selector-button {
  cursor: pointer;
}

:where(button, button[type], input[type=button], input[type=submit], input[type=reset]),
:where(input[type=file])::-webkit-file-upload-button,
:where(input[type=file])::file-selector-button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  text-align: center;
}

:where(button, button[type], input[type=button], input[type=submit], input[type=reset])[disabled] {
  cursor: not-allowed;
}

:where(button, input, input:focus, textarea) {
  border: none;
  outline: none;
  background: none;
}

/* Clickable
----------------------------------------- */
.c-breadcrumbs a, :where(a):not([class]) {
  transition: opacity 0.1s;
  cursor: pointer;
}
@media (any-hover: hover) {
  .c-breadcrumbs a:hover, :hover:where(a):not([class]) {
    opacity: 0.75;
  }
}
@media (any-hover: none) {
  .c-breadcrumbs a:active, :active:where(a):not([class]) {
    opacity: 0.75;
  }
}
.c-button, :where(a)[class], :where(a) {
  transition: filter 0.2s;
  cursor: pointer;
}
@media (any-hover: hover) {
  .c-button:hover, :hover:where(a) {
    -webkit-filter: brightness(1.2);
    filter: brightness(1.2);
  }
}
@media (any-hover: none) {
  .c-button:active, :active:where(a) {
    -webkit-filter: brightness(1.2);
    filter: brightness(1.2);
  }
}

/* Clickable
----------------------------------------- */
.l-footer-nav__link:not(:first-child), .c-article-list__item:not(:last-child), .l-footer-nav__link:not(:last-child) {
  position: relative;
}
.l-footer-nav__link:not(:first-child)::before, .c-article-list__item:not(:last-child)::before, .l-footer-nav__link:not(:last-child)::before, .l-footer-nav__link:not(:first-child)::after, .c-article-list__item:not(:last-child)::after, .l-footer-nav__link:not(:last-child)::after {
  position: absolute;
  background: var(--border-color);
}
.c-article-list__item:not(:last-child)::after, .l-footer-nav__link:not(:last-child)::after {
  inset-inline: 0;
  block-size: 2px;
  scale: 1 0.5;
}
.l-footer-nav__link:not(:first-child)::before {
  inset-block: 0;
  inline-size: 2px;
  scale: 0.5 1;
}
.c-article-list__item:not(:last-child)::after, .l-footer-nav__link:not(:last-child)::after {
  content: "";
  translate: 0 50%;
  inset-block-end: 0;
}
@media screen and (min-width: 780px) {
  .l-footer-nav__link:not(:last-child)::after {
    content: none;
  }
}
.l-footer-nav__link:not(:first-child)::before {
  content: "";
  translate: -50% 0;
  inset-inline-start: 0;
}
@media not screen and (min-width: 780px) {
  .l-footer-nav__link:not(:first-child)::before {
    content: none;
  }
}
/* Base
----------------------------------------- */
body {
  position: relative;
}

:where([id]) {
  scroll-margin-top: var(--header-block-size, 0);
}

:where(a) {
  color: var(--color-main);
}
:where(a)[class] {
  text-decoration: none;
}

/* Gap
----------------------------------------- */
.gap, .grid, .p-top-fv, .p-top-fv__upper, .c-lower-fv, .c-result-list, .c-service, .c-about__img-cap, .c-about__books, .c-merit-list, .c-merit-list__item, .c-article-list__item a, .c-button, .c-breadcrumb__list, .l-footer-copyright, .l-header__nav, .l-wrap, .l-wrap-inner, .l-section, .l-section-inner, .c-service__item, .c-about__upper, .c-about__bottom, .c-about__text, .c-about, .column, .row, .flex, .c-about__img2, .c-breadcrumbs span {
  gap: var(--gap-lv4, 0);
}
.gap-lv0 {
  gap: 0;
}
.gap-lv1 {
  gap: var(--gap-lv1, 0);
}
.gap-lv2 {
  gap: var(--gap-lv2, 0);
}
.gap-lv3 {
  gap: var(--gap-lv3, 0);
}
.gap-lv4 {
  gap: var(--gap-lv4, 0);
}
.gap-lv5 {
  gap: var(--gap-lv5, 0);
}
.gap-lv6 {
  gap: var(--gap-lv6, 0);
}
.gap-lv7 {
  gap: var(--gap-lv7, 0);
}
.gap-lv8 {
  gap: var(--gap-lv8, 0);
}

/* Flex
----------------------------------------- */
.flex, .c-about__img2, .c-breadcrumbs span {
  display: flex;
}
.flex-start {
  justify-content: start;
  align-items: start;
}
.flex-start-y {
  align-items: start;
}
.flex-start-x, .c-breadcrumbs span {
  justify-content: start;
}
.flex-center {
  justify-content: center;
  align-items: center;
}
.flex-center-y {
  align-items: center;
}
.flex-center-x {
  justify-content: center;
}
@media not screen and (min-width: 780px) {
  .flex-sp {
    display: flex;
    gap: var(--gap-lv4);
  }
}
@media screen and (min-width: 780px) {
  .flex-pc {
    display: flex;
    gap: var(--gap-lv4);
  }
}

/* Grid
----------------------------------------- */
.grid, .p-top-fv, .p-top-fv__upper, .c-lower-fv, .c-result-list, .c-service, .c-about__img-cap, .c-about__books, .c-merit-list, .c-merit-list__item, .c-article-list__item a, .c-button, .c-breadcrumb__list, .l-footer-copyright, .l-header__nav, .l-wrap, .l-wrap-inner, .l-section, .l-section-inner, .c-service__item, .c-about__upper, .c-about__bottom, .c-about__text, .c-about, .column, .row {
  display: grid;
  align-content: start;
  grid-auto-columns: minmax(0, auto);
}
.grid-center, .p-top-fv__upper, .c-lower-fv, .c-button, .l-footer-copyright {
  place-content: center;
  place-items: center;
}
.grid-center-x, .c-result-list, .c-merit-list__item {
  justify-content: center;
  justify-items: center;
}
.grid-center-y, .p-top-fv, .c-breadcrumb__list, .l-header__wrap {
  align-content: center;
  align-items: center;
}
.grid-start {
  place-content: start;
  place-items: start;
}
.grid-start-x {
  justify-content: start;
  justify-items: start;
}
.grid-start-y, .c-merit-list__item {
  align-content: start;
  align-items: start;
}
.grid-end {
  place-content: end;
  place-items: end;
}
.grid-end-x {
  justify-content: end;
  justify-items: end;
}
.grid-end-y {
  align-content: end;
  align-items: end;
}

/* Row
----------------------------------------- */
.row-center {
  justify-content: center;
}
.row-gap {
  row-gap: var(--row-gap-lv4, 0);
}
.row-gap-lv0 {
  row-gap: 0;
}
.row-gap-lv1 {
  row-gap: var(--row-gap-lv1, 0);
}
.row-gap-lv2, .c-about__img-cap {
  row-gap: var(--row-gap-lv2, 0);
}
.row-gap-lv3, .c-article-list__item a {
  row-gap: var(--row-gap-lv3, 0);
}
.row-gap-lv4, .c-about__books, .c-merit-list__item {
  row-gap: var(--row-gap-lv4, 0);
}
.row-gap-lv5 {
  row-gap: var(--row-gap-lv5, 0);
}
.row-gap-lv6 {
  row-gap: var(--row-gap-lv6, 0);
}
.row-gap-lv7 {
  row-gap: var(--row-gap-lv7, 0);
}
.row-gap-lv8, .c-service, .c-merit-list {
  row-gap: var(--row-gap-lv8, 0);
}
.row-gap-lv9 {
  row-gap: var(--row-gap-lv9, 0);
}
.row-gap-lv10 {
  row-gap: var(--row-gap-lv10, 0);
}

/* Column
----------------------------------------- */
.column-2 {
  grid-template-columns: repeat(2, var(--column-size, 1fr));
}
.column-3 {
  grid-template-columns: repeat(3, var(--column-size, 1fr));
}
.column-4 {
  grid-template-columns: repeat(4, var(--column-size, 1fr));
}
.column-5 {
  grid-template-columns: repeat(5, var(--column-size, 1fr));
}
.column-6 {
  grid-template-columns: repeat(6, var(--column-size, 1fr));
}
.column-7 {
  grid-template-columns: repeat(7, var(--column-size, 1fr));
}
.column-8 {
  grid-template-columns: repeat(8, var(--column-size, 1fr));
}
.column-9 {
  grid-template-columns: repeat(9, var(--column-size, 1fr));
}
.column-10 {
  grid-template-columns: repeat(10, var(--column-size, 1fr));
}
.column-11 {
  grid-template-columns: repeat(11, var(--column-size, 1fr));
}
.column-12 {
  grid-template-columns: repeat(12, var(--column-size, 1fr));
}
@media not screen and (min-width: 780px) {
  .column-sp-2 {
    grid-template-columns: repeat(2, var(--column-size, 1fr));
  }
  .column-sp-3 {
    grid-template-columns: repeat(3, var(--column-size, 1fr));
  }
  .column-sp-4 {
    grid-template-columns: repeat(4, var(--column-size, 1fr));
  }
  .column-sp-5 {
    grid-template-columns: repeat(5, var(--column-size, 1fr));
  }
  .column-sp-6 {
    grid-template-columns: repeat(6, var(--column-size, 1fr));
  }
  .column-sp-7 {
    grid-template-columns: repeat(7, var(--column-size, 1fr));
  }
  .column-sp-8 {
    grid-template-columns: repeat(8, var(--column-size, 1fr));
  }
  .column-sp-9 {
    grid-template-columns: repeat(9, var(--column-size, 1fr));
  }
  .column-sp-10 {
    grid-template-columns: repeat(10, var(--column-size, 1fr));
  }
  .column-sp-11 {
    grid-template-columns: repeat(11, var(--column-size, 1fr));
  }
  .column-sp-12 {
    grid-template-columns: repeat(12, var(--column-size, 1fr));
  }
}
@media screen and (min-width: 960px) {
  .column-tab-2 {
    grid-template-columns: repeat(2, var(--column-size, 1fr));
  }
  .column-tab-3 {
    grid-template-columns: repeat(3, var(--column-size, 1fr));
  }
  .column-tab-4 {
    grid-template-columns: repeat(4, var(--column-size, 1fr));
  }
  .column-tab-5 {
    grid-template-columns: repeat(5, var(--column-size, 1fr));
  }
  .column-tab-6 {
    grid-template-columns: repeat(6, var(--column-size, 1fr));
  }
  .column-tab-7 {
    grid-template-columns: repeat(7, var(--column-size, 1fr));
  }
  .column-tab-8 {
    grid-template-columns: repeat(8, var(--column-size, 1fr));
  }
  .column-tab-9 {
    grid-template-columns: repeat(9, var(--column-size, 1fr));
  }
  .column-tab-10 {
    grid-template-columns: repeat(10, var(--column-size, 1fr));
  }
  .column-tab-11 {
    grid-template-columns: repeat(11, var(--column-size, 1fr));
  }
  .column-tab-12 {
    grid-template-columns: repeat(12, var(--column-size, 1fr));
  }
}
@media screen and (min-width: 780px) {
  .column-pc-2 {
    grid-template-columns: repeat(2, var(--column-size, 1fr));
  }
  .column-pc-3 {
    grid-template-columns: repeat(3, var(--column-size, 1fr));
  }
  .column-pc-4 {
    grid-template-columns: repeat(4, var(--column-size, 1fr));
  }
  .column-pc-5 {
    grid-template-columns: repeat(5, var(--column-size, 1fr));
  }
  .column-pc-6 {
    grid-template-columns: repeat(6, var(--column-size, 1fr));
  }
  .column-pc-7 {
    grid-template-columns: repeat(7, var(--column-size, 1fr));
  }
  .column-pc-8 {
    grid-template-columns: repeat(8, var(--column-size, 1fr));
  }
  .column-pc-9 {
    grid-template-columns: repeat(9, var(--column-size, 1fr));
  }
  .column-pc-10 {
    grid-template-columns: repeat(10, var(--column-size, 1fr));
  }
  .column-pc-11 {
    grid-template-columns: repeat(11, var(--column-size, 1fr));
  }
  .column-pc-12 {
    grid-template-columns: repeat(12, var(--column-size, 1fr));
  }
}
.column-gap {
  column-gap: var(--column-gap-lv4, 0);
}
.column-gap-lv0 {
  column-gap: 0;
}
.column-gap-lv1 {
  column-gap: var(--column-gap-lv1, 0);
}
.column-gap-lv2, .c-about__books {
  column-gap: var(--column-gap-lv2, 0);
}
.column-gap-lv3 {
  column-gap: var(--column-gap-lv3, 0);
}
.column-gap-lv4, .c-merit-list, .c-article-list__item a {
  column-gap: var(--column-gap-lv4, 0);
}
.column-gap-lv5 {
  column-gap: var(--column-gap-lv5, 0);
}
.column-gap-lv6 {
  column-gap: var(--column-gap-lv6, 0);
}
.column-gap-lv7 {
  column-gap: var(--column-gap-lv7, 0);
}
.column-gap-lv8 {
  column-gap: var(--column-gap-lv8, 0);
}
.column-gap-lv9 {
  column-gap: var(--column-gap-lv9, 0);
}
.column-gap-lv10 {
  column-gap: var(--column-gap-lv10, 0);
}

/* Position
----------------------------------------- */
.position-center {
  position: absolute;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
}
.position-center-x {
  position: absolute;
  translate: -50% 0;
  left: 50%;
}
.position-center-y {
  position: absolute;
  translate: 0 -50%;
  top: 50%;
}

/* Wrap
----------------------------------------- */
.l-wrap, .l-wrap-inner {
  margin-inline: auto;
  padding-inline: var(--base-padding-in);
  max-inline-size: var(--content-base-width-pd);
  inline-size: 100%;
}
.l-wrap-inner {
  max-inline-size: var(--content-inner-base-width-pd);
}
@media not screen and (min-width: 780px) {
  .l-wrap .l-wrap-inner, .l-wrap-inner .l-wrap-inner {
    max-inline-size: var(--content-inner-base-width);
    padding-inline: 0;
  }
}

/* Block
----------------------------------------- */
.l-block {
  inline-size: 100%;
  block-size: 100%;
  padding-block: var(--block-space-block-start) var(--block-space-block-end);
}
.l-block__inner {
  margin-inline: auto;
}

/* Section
----------------------------------------- */
.l-section, .c-about {
  gap: var(--row-gap-lv7) var(--column-gap-lv4);
}
.l-section:nth-of-type(2n), .c-about:nth-of-type(2n) {
  border-image: linear-gradient(#d9f0ff 0 100%) 0 fill / auto / 0 100vw;
}
.l-section-inner, .c-service__item, .c-about__upper, .c-about__bottom, .c-about__text {
  gap: var(--row-gap-lv5) var(--column-gap-lv2);
}

/* Main
----------------------------------------- */
.l-main img {
  inline-size: 100%;
  block-size: auto;
}
.l-main img.l-img-fit {
  margin-inline: auto;
  inline-size: max-content;
}

/* ヘッダーの高さ
----------------------------------------- */
/* Header
----------------------------------------- */
:root {
  --header-block-size: 6.5rem;
}
@media screen and (min-width: 780px) {
  :root {
    --header-block-size: 10rem;
  }
}

.l-header {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-inline: auto;
  inline-size: 100%;
  color: var(--color-main);
  block-size: var(--header-block-size);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  background: var(--white);
}
.l-header.is-fixed {
  position: fixed;
}
.l-header img {
  inline-size: 100%;
}
.l-header__wrap {
  justify-content: space-between;
  grid-auto-flow: column;
  column-gap: 1rem;
  inline-size: 100%;
  block-size: 100%;
}
@media screen and (min-width: 780px) {
  .l-header__wrap {
    grid-template-columns: auto auto;
  }
}
body:has(.l-header__wrap.is-open) {
  overflow: hidden;
}
.l-header__logo {
  inline-size: min(25.641025641vw, 15.7rem);
}
.l-header__sp {
  position: relative;
  z-index: 10001;
  aspect-ratio: 70/47;
  cursor: pointer;
}
@media not screen and (min-width: 780px) {
  .l-header__sp {
    inline-size: min(3rem, 50px);
    block-size: min(2rem, 30px);
  }
}
@media screen and (min-width: 960px) {
  .l-header__sp {
    display: none !important;
  }
}
.l-header__sp span, .l-header__sp::before, .l-header__sp::after {
  position: absolute;
  inset-inline: 0;
  z-index: 1;
  block-size: 2px;
  background-color: var(--color-main);
}
.l-header__sp::before, .l-header__sp::after {
  content: "";
  translate: 0 0;
  transition: all 0.4s;
  transition-property: translate, rotate, top, bottom;
}
.l-header__sp span {
  translate: 0 -50%;
  top: 50%;
  transition: inset 0.6s;
}
.l-header__sp::before {
  top: 0;
}
.l-header__sp::after {
  bottom: 0;
}
.is-open .l-header__sp span, .is-open .l-header__sp::before, .is-open .l-header__sp::after {
  background-color: var(--white);
}
.is-open .l-header__sp span {
  inset-inline-end: 100%;
}
.is-open .l-header__sp::before, .is-open .l-header__sp::after {
  translate: 0 -50%;
  top: 50%;
}
.is-open .l-header__sp::before {
  rotate: 45deg;
}
.is-open .l-header__sp::after {
  rotate: -45deg;
}
.l-header__nav {
  gap: 0 2em;
  block-size: 100%;
  font-weight: var(--fw-bold);
  line-height: var(--lh-lv1);
}
@media not screen and (min-width: 960px) {
  .l-header__nav {
    position: fixed;
    align-content: center;
    gap: 0;
    z-index: -10000;
    inset: 0 0 0 100%;
    background-color: color-mix(in srgb, var(--color-main), var(--transparent) 3%);
    transition: inset 0.2s, opacity 0s 0.2s;
  }
  .l-header__wrap:not(.is-open) .l-header__nav > * {
    display: none;
  }
  .is-open .l-header__nav {
    z-index: 10000;
    padding: var(--header-block-size) var(--base-padding-in) var(--space-lv9);
    inset-inline-start: 10%;
    transition: inset 0.2s;
  }
}
@media screen and (min-width: 780px) {
  .l-header__nav {
    position: relative;
    display: flex;
    align-items: center;
    font-size: var(--fz-text-lv5);
  }
}
.l-header__link {
  padding-block: 2rem;
  line-height: var(--lh-lv1);
}
@media screen and (min-width: 780px) {
  .l-header__link {
    position: relative;
    padding-block: 0;
    cursor: pointer;
  }
}
@media screen and (min-width: 780px) and (any-hover: hover) {
  .l-header__link:hover {
    color: color-mix(in srgb, var(--color-main), var(--transparent) 20%);
    -webkit-filter: none;
    filter: none;
  }
}
@media screen and (min-width: 780px) and (any-hover: none) {
  .l-header__link:active {
    color: color-mix(in srgb, var(--color-main), var(--transparent) 20%);
    -webkit-filter: none;
    filter: none;
  }
}
@media screen and (min-width: 780px) {
  .l-header__link:not(:last-child)::after {
    content: "";
    position: absolute;
    translate: 1em -50%;
    inset-block-start: 50%;
    inset-inline-start: 100%;
    inline-size: 1px;
    block-size: 2.25em;
    background-color: var(--color-main);
  }
}
@media not screen and (min-width: 960px) {
  .l-header__link {
    color: var(--white);
    cursor: pointer;
  }
  .l-header__link:not(:last-child) {
    border-block-end: 1px solid var(--white);
  }
  @media (any-hover: hover) {
    .l-header__link:hover {
      color: color-mix(in srgb, var(--white), var(--transparent) 20%);
    }
  }
  @media (any-hover: none) {
    .l-header__link:active {
      color: color-mix(in srgb, var(--white), var(--transparent) 20%);
    }
  }
}
.l-header__link__sub {
  font-size: var(--fz-ss);
}
@media screen and (min-width: 780px) {
  .l-header__link__sub {
    font-size: var(--fz-xs);
  }
}
.l-header__text {
  font-size: var(--fz-s);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-s);
  line-height: var(--lh-xs);
}
@media screen and (min-width: 780px) {
  .l-header__text {
    font-size: 2.4rem;
  }
}

@media not screen and (min-width: 780px) {
  .is-pc {
    display: none !important;
  }
}

@media screen and (min-width: 780px) {
  .is-sp {
    display: none !important;
  }
}

/* Box Shadow
----------------------------------------- */
.u-box-shadow {
  box-shadow: var(--box-shadow-pos-x) var(--box-shadow-pos-y) var(--box-shadow-blur) var(--box-shadow-spread) var(--box-shadow-color);
}

/* Content Width
----------------------------------------- */
.u-w600, .u-w780, .u-w800 {
  margin-inline: auto;
  max-inline-size: var(--mx-inSize, 100%);
  inline-size: 100%;
}

.u-w800 {
  --mx-inSize: 800px;
}
.u-w780 {
  --mx-inSize: 780px;
}
.u-w600 {
  --mx-inSize: 600px;
}

/* Padding
----------------------------------------- */
.u-pd-t0 {
  padding-block-start: 0 !important;
}
.u-pd-b0 {
  padding-block-end: 0 !important;
}

/* Text
----------------------------------------- */
.u-liner {
  background: var(--bg-liner-yellow);
}

.u-c-blue {
  color: var(--c-blue);
}
.u-c-blue-dark {
  color: var(--c-blue-dark);
}
.u-c-red {
  color: var(--c-red);
}

/* @Utility .u-bg
----------------------------------------- */
/* Background
----------------------------------------- */
.u-bg-blur, .c-result-list {
  -webkit-backdrop-filter: blur(1.3rem) saturate(180%);
  backdrop-filter: blur(1.3rem) saturate(180%);
}
.u-bg-white {
  background-color: var(--bg-white);
}
.u-bg-sand {
  background-color: var(--bg-sand);
}
.u-bg-blue {
  background-color: var(--bg-blue);
}
.u-bg-blue-light {
  background-color: var(--bg-blue-light);
}
.u-bg-green {
  background-color: var(--bg-green);
}
.u-bg-green-light {
  background-color: var(--bg-green-light);
}
.u-bg-yellow {
  background-color: var(--bg-yellow);
}
.u-bg-yellow-light {
  background-color: var(--bg-yellow-light);
}
.u-bg-yellow-dark {
  background-color: var(--bg-yellow-dark);
}
.u-bg-red {
  background-color: var(--bg-red);
}
.u-bg-red-light {
  background-color: var(--bg-red-light);
}
.u-bg-dot {
  background-image: url(../images/bg-dot.svg);
  background-position: center;
  background-size: 1.8rem;
  background-repeat: repeat;
}
@media screen and (min-width: 780px) {
  .u-bg-dot {
    background-size: 2.05rem;
  }
}
.u-bg-linear {
  background-image: url(../images/bg-liner.svg);
  background-position: center;
  background-size: 2rem;
  background-repeat: repeat;
}
.u-bg-gradient {
  position: relative;
  z-index: 0;
}
.u-bg-gradient::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  block-size: 700px;
  background: linear-gradient(to bottom, var(--bg-orange-light), var(--transparent));
}

/* Variables
----------------------------------------- */
/* インプットの高さ
----------------------------------------- */
/* Button Animation
----------------------------------------- */
@keyframes ctaBtn {
  0%, 100% {
    translate: 0 0;
  }
  30% {
    translate: 0 1rem;
  }
  70% {
    translate: 0 -1rem;
  }
}
/* Cta
----------------------------------------- */
.l-cta {
  max-inline-size: 65rem;
  text-align: center;
  --cta-icon-size: 9.39428571%;
  --cta-icon-pos-x: 4.28571429%;
  --error-fz: min(3.2rem, 28px);
}
@media screen and (min-width: 780px) {
  .l-cta__inner {
    display: grid;
    row-gap: 2.5rem;
  }
}
.l-cta__input {
  position: relative;
  inline-size: 100%;
}
@media not screen and (min-width: 780px) {
  .l-cta__input {
    margin-block-end: var(--space-lv2);
  }
  .l-cta__input:not(.is-error) {
    margin-block-start: var(--space-lv6);
  }
}
@media screen and (min-width: 780px) {
  .l-cta__input {
    font-size: var(--fz-title-lv2);
  }
  .l-cta__input:not(.is-error) {
    margin-block-start: var(--space-lv2);
  }
}
.l-cta__input input {
  padding-block: 0.7em;
  padding-inline-start: 5.8rem;
  inline-size: 100%;
  min-block-size: max(6rem, 60px);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: url(../images/form_icon@2x.png) var(--cta-icon-pos-x) 50%/var(--cta-icon-size) no-repeat, var(--white);
}
@media not screen and (min-width: 780px) {
  .l-cta__input input {
    font-size: var(--fz-text-lv3);
  }
}
@media screen and (min-width: 780px) {
  .l-cta__input input {
    padding-inline-start: 10.4rem;
    min-block-size: 8.6rem;
  }
}
@media not screen and (min-width: 780px) {
  .l-cta__input input::placeholder {
    font-size: var(--fz-text-lv2);
  }
}
.l-cta__input.is-error input {
  border-color: var(--error-color);
  border-width: 2px;
}
.l-cta .is-error {
  position: relative;
}
.l-cta .is-error .l-error {
  margin-block: 0.9rem var(--space-lv1);
  text-align: center;
  color: var(--error-color);
  line-height: var(--lh-lv2);
}
@media not screen and (min-width: 780px) {
  .l-cta .is-error .l-error {
    font-size: var(--fz-text-lv2);
  }
}
@media screen and (min-width: 780px) {
  .l-cta .is-error .l-error {
    margin-block-start: 0;
  }
}
.l-cta .has-autoComplete {
  position: relative;
}
@media not screen and (min-width: 780px) {
  .l-cta__cap {
    margin-block-start: var(--space-lv4);
  }
}

/* ヘッダーの高さ
----------------------------------------- */
/* Footer
----------------------------------------- */
.l-footer {
  line-height: var(--line-height-lv2);
  overflow: hidden;
}
.l-footer-nav {
  padding-block: 1em;
  border-image: linear-gradient(var(--footer-nav-bg) 0 100%) 0 fill/auto/0 100vw;
}
@media screen and (min-width: 780px) {
  .l-footer-nav {
    display: flex;
    gap: 2rem 3rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding-block: 2.5rem;
  }
}
.l-footer-nav__link {
  display: block;
  color: inherit;
  cursor: pointer;
}
@media not screen and (min-width: 780px) {
  .l-footer-nav__link {
    padding-block: 1.5rem;
  }
}
@media screen and (min-width: 780px) {
  .l-footer-nav__link:not(:first-child)::before {
    translate: -50% -50%;
    inset-block-start: 50%;
    inset-inline-start: -1.5rem;
    block-size: 3rem;
  }
}
@media (any-hover: hover) {
  .l-footer-nav__link:hover {
    color: color-mix(in srgb, currentColor, var(--transparent) 35%);
  }
}
@media (any-hover: none) {
  .l-footer-nav__link:active {
    color: color-mix(in srgb, currentColor, var(--transparent) 35%);
  }
}
.l-footer-copyright {
  block-size: 70px;
  text-align: center;
  color: var(--white);
  font-size: var(--fz-text-lv2);
  border-image: linear-gradient(var(--footer-copy-bg) 0 100%) 0 fill/auto/0 100vw;
}

/* Breadcrumb
----------------------------------------- */
@media not screen and (min-width: 780px) {
  .c-breadcrumb {
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .c-breadcrumb::-webkit-scrollbar {
    display: none;
  }
}
.c-breadcrumb__list {
  grid-auto-flow: column;
  justify-content: start;
  column-gap: 1em;
  font-size: var(--fz-ss);
  line-height: var(--lh-ss);
}
@media not screen and (min-width: 780px) {
  .c-breadcrumb__item {
    white-space: nowrap;
  }
}
.c-breadcrumb__item a {
  display: block;
}
.c-breadcrumb__item--arrow {
  inline-size: 1em;
  block-size: auto;
  aspect-ratio: 1;
  background: url(../images/breadcrumb-arrow.svg) 50% 50%/contain no-repeat;
}

/* ボタンの諸々の設定
----------------------------------------- */
/* Button
----------------------------------------- */
.c-button::after {
  content: "";
  position: absolute;
  translate: 0 -50%;
  top: 50%;
  right: 2rem;
  aspect-ratio: 12/21;
  inline-size: auto;
  block-size: 0.8333em;
  -webkit-mask: url(../images/btn_arrow.svg) 50% 50%/200% 100%;
  mask: url(../images/btn_arrow.svg) 50% 50%/200% 100%;
  background-color: currentColor;
}
@media screen and (min-width: 780px) {
  .c-button::after {
    right: 2.4rem;
  }
}

.c-button {
  position: relative;
  margin: 0 auto;
  padding: 0.3em 2rem;
  inline-size: 100%;
  block-size: auto;
  max-inline-size: 650px;
  min-block-size: 7rem;
  text-align: center;
  color: var(--white);
  font-size: var(--fz-button);
  font-weight: var(--fw-bold);
  line-height: var(--lh-lv2);
  border-radius: 10px;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: #ff9915;
}
@media screen and (min-width: 780px) {
  .c-button {
    padding-inline: 2.4rem;
    min-block-size: 10rem;
  }
}
.c-cap {
  font-size: var(--fz-text-lv1);
  line-height: var(--lh-lv2);
}
.c-cap:has(p) {
  display: grid;
  row-gap: 0.6em;
}

/* Breadcrumbs
----------------------------------------- */
.c-breadcrumbs {
  padding-block: 20px;
  line-height: var(--lh-lv1);
  border-image: linear-gradient(#BABABA 0 100%) 0 fill/auto/0 100vw;
  border-image-slice: 1 0 0;
}
@media not screen and (min-width: 780px) {
  .c-breadcrumbs {
    font-size: var(--fz-text-lv2);
  }
}
.c-breadcrumbs span {
  column-gap: var(--space-lv2);
}
.c-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

/* Article List
----------------------------------------- */
.c-article-list__item {
  line-height: var(--lh-lv5);
}
.c-article-list__item a {
  position: relative;
  padding-block: var(--base-padding-in);
  color: inherit;
  text-decoration: none;
}
@media screen and (min-width: 780px) {
  .c-article-list__item a {
    align-items: start;
    grid-template-columns: auto 1fr;
  }
}
.c-article-list__date {
  color: var(--color-sub);
  font-weight: var(--fw-bold);
}
@media not screen and (min-width: 780px) {
  .c-article-list__date {
    line-height: var(--lh-lv1);
  }
}

/* Merit List
----------------------------------------- */
.c-merit-list {
  padding-block-start: 1.4rem;
}
@media screen and (min-width: 780px) {
  .c-merit-list {
    display: flex;
    justify-content: center;
  }
  @media not screen and (min-width: 1240px) {
    .c-merit-list {
      flex-wrap: wrap;
    }
  }
}
.c-merit-list__item {
  position: relative;
  padding: var(--content-space);
  padding-block-start: var(--space-lv7);
  border: 3px solid var(--border-color);
  border-radius: 15px;
  background-color: #F9FAFC;
  counter-increment: merit-num;
}
@media screen and (min-width: 780px) {
  .c-merit-list__item {
    flex-basis: 38rem;
    row-gap: var(--row-gap-lv2);
    padding-block-start: var(--space-lv4);
  }
}
@media screen and (min-width: 1240px) {
  .c-merit-list__item {
    grid-column-end: span 2;
  }
  .c-merit-list__item:first-child {
    grid-column-start: 2;
  }
  .c-merit-list__item:last-child {
    grid-column-start: 2;
  }
}
.c-merit-list__num {
  position: absolute;
  translate: -50% -50%;
  inset-block-start: 0;
  inset-inline-start: 50%;
  padding: 0.5556em 1.3889em;
  color: var(--white);
  font-size: var(--fz-text-lv4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-lv1);
  border-radius: 10000px;
  background-color: #35a9dc;
}
@media screen and (min-width: 780px) {
  .c-merit-list__num {
    translate: -1.5rem -50%;
    inset-inline-start: 0;
    padding: 0.75em 1em;
    font-size: var(--fz-text-lv5);
  }
}
.c-merit-list__num::after {
  content: counter(merit-num);
}
.c-merit-list__title {
  color: #2091c3;
}
.c-merit-list__img {
  inline-size: 100%;
  max-width: 100%;
}

.c-merit-list__img img {
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (min-width: 780px) {
  .c-merit-list__img {
  inline-size: 100%;
  max-width: 100%;
  }
.c-merit-list__img img {
  width: 100%;
  height: auto;
  display: block;
}
  
}

@media (max-width: 780px){
  .c-merit-list__img {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
}


@media screen and (min-width: 780px) {
  .c-merit-list__text {
    margin-block-start: 0.5rem;
  }
}

/* Merit List
----------------------------------------- */
@media screen and (min-width: 780px) {
  .c-about__upper, .c-about__bottom {
    row-gap: var(--row-gap-lv4);
  }
}
@media screen and (min-width: 780px) {
  .c-about__upper {
    grid-template-columns: auto 1fr;
  }
  .c-about__upper .c-about__title {
    grid-column: span 2;
  }
}
.c-about__title {
  padding: 0.6333em 1em;
  color: var(--white);
  background-color: var(--black);
}
@media screen and (min-width: 780px) {
  .c-about__title {
    padding-block: 0.4818em;
  }
}
.c-about__teacher {
  justify-self: center;
  inline-size: 20rem;
}
@media screen and (min-width: 780px) {
  .c-about__teacher {
    grid-row: span 2;
    inline-size: 29.6rem;
  }
  .c-about__teacher picture {
    inline-size: 100%;
    block-size: 100%;
  }
  .c-about__teacher img {
    max-inline-size: none;
    block-size: 100%;
    object-fit: cover;
  }
}
@media screen and (min-width: 780px) {
  .c-about__text {
    row-gap: var(--row-gap-lv4);
    margin-block-start: calc((1lh - 1em) / 2 * -1);
  }
}
.c-about__img2 {
  column-gap: var(--column-gap-lv2);
}
.c-about__img-cap {
  flex-basis: 100%;
}
.c-about__img-cap p {
  line-height: var(--lh-lv1);
}
@media not screen and (min-width: 780px) {
  .c-about__img-cap p {
    font-size: var(--fz-text-lv1);
  }
}
.c-about__books {
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (min-width: 780px) {
  .c-about__books {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Service List
----------------------------------------- */
.c-service {
  padding-block-start: 1.4rem;
}
@media screen and (min-width: 780px) {
  .c-service {
    padding-block-start: 3rem;
  }
}
.c-service__item {
  position: relative;
  padding: var(--space-lv3);
  padding-block-start: var(--space-lv7);
  background: linear-gradient(to bottom, var(--black) 3px, #ffffff 0);
}
@media not screen and (min-width: 780px) {
  .c-service__item:not(:has(.c-service__movie)) {
    padding-block-end: var(--space-lv5);
  }
}
@media screen and (min-width: 780px) {
  .c-service__item {
    padding-inline: 4.5rem;
    padding-block-end: 4.5rem;
  }
}
.c-service__num {
  position: absolute;
  translate: -50% -50%;
  inset-block-start: 0;
  inset-inline-start: 50%;
  padding: 0.5em 0.75em;
  color: var(--white);
  font-size: var(--fz-h3);
  line-height: var(--lh-lv1);
  background-color: var(--black);
}

/* Result List
----------------------------------------- */
.c-result-list {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  z-index: 100;
  row-gap: 1.2lh;
  padding: 1em;
  line-height: var(--lh-lv1);
  background-color: var(--result-bg-color);
  list-style: none;
}
@media screen and (min-width: 780px) {
  .c-result-list {
    padding-block: 1.5em;
  }
}
.c-result-list[hidden] {
  opacity: 0;
  padding: 0;
  pointer-events: none;
}
.c-result-list-item {
  position: relative;
  inline-size: fit-content;
}
.c-result-list-item::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  inline-size: 0;
  block-size: 1px;
  background-color: #424242;
  transition: width 0.2s;
}
.c-result-list-item.is-active::before {
  inline-size: 100%;
}

/* 高さ
----------------------------------------- */
/* Lower FV
----------------------------------------- */
.c-lower-fv {
  position: relative;
  z-index: 0;
  block-size: 25rem;
}
@media screen and (min-width: 780px) {
  .c-lower-fv {
    padding-block-end: 1rem;
    block-size: 35rem;
  }
}
.c-lower-fv__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.c-lower-fv__bg :is(picture, img) {
  inline-size: 100%;
  block-size: 100%;
}
.c-lower-fv__bg img {
  object-fit: cover;
  max-inline-size: none;
}
.c-lower-fv__text {
  color: var(--white);
  line-height: var(--lh-lv2);
}

/* @Javascript
----------------------------------------- */
.move-on[data-move-type=list].js-ready > *, .move-on:where(:not([data-move-type=list])).js-ready {
  opacity: 0;
  translate: var(--move-on-x, 0) var(--move-on-y, 0);
  transition: opacity 0.4s ease-out, translate 0.5s ease-out;
}

.move-on[data-move-type=list].js-ready.js-active > *, .move-on.js-ready.js-active {
  opacity: 1;
  --move-on-x: 0;
  --move-on-y: 0;
}

.move-on {
  --js-move-size: 4rem;
  --move-on-x: 0;
  --move-on-y: 0;
}
.move-on[data-move-on=top] {
  --move-on-y: var(--js-move-size);
}
.move-on[data-move-on=bottom] {
  --move-on-y: calc(var(--js-move-size) * -1);
}
.move-on[data-move-on=left] {
  --move-on-x: calc(var(--js-move-size) * -1);
}
.move-on[data-move-on=right] {
  --move-on-x: var(--js-move-size);
}
.move-on[data-move-type=list] {
  --js-move-span: 0.4s;
}
/* FV
----------------------------------------- */

.fv-hero-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.fv-hero-wrapper img {
  display: block;
  max-width: 55%;
  height: auto;
  margin: 0 auto;
}

/* PCのみ表示 */
.fv-hero-pc {
  display: block;
}
.fv-hero-sp {
  display: none;
}

@media screen and (max-width: 767px) {
  /* SPのみ表示 */
  .fv-hero-pc {
    display: none;
  }
  .fv-hero-sp {
    display: block;
  }

  .fv-hero-wrapper img {
    max-width: 92%;
  }
}


.video-pc {
  display: block;
}
.video-sp {
  display: none;
}


.p-top-fv {
  position: relative;
  row-gap: 3.5rem;
  z-index: 0;
  padding: 2rem var(--base-padding-in) 0;
  block-size: 45rem;
}

.p-top-fv__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2; 
}

.p-top-fv__bg {
  position: relative;
}

.p-top-fv__overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(45deg, rgb(0 0 0) 50%, rgb(34 175 204 / 50%) 50%);
  z-index: 1;
    background-size: 2px 2px;
  pointer-events: none;
}


@media (min-width: 1025px) {
  .p-top-fv {
    block-size: 75vh !important; 
  }
}

@media screen and (max-width: 767px) {
  .video-pc {
    display: none;
  }
  .video-sp {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .p-top-fv {
    min-height: 62vh; 
    padding-bottom: 4rem; 
	padding-top: 4rem; 
  }
}

/* 生徒数
----------------------------------------- */
.p-top-count-simple {
  background: #2867ad;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 2.2rem;
  letter-spacing: 0.02em;
  padding: 2rem 0;
  margin: 0;
}


@media screen and (min-width: 780px) {
  .p-top-fv {
    justify-content: center;
    row-gap: 6.8rem;
    block-size: 50rem;
  }
}
.p-top-fv__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.p-top-fv__bg :is(picture, img) {
  inline-size: 100%;
  block-size: 100%;
}
.p-top-fv__bg img {
  object-fit: cover;
  max-inline-size: none;
}
.p-top-fv__upper {
  place-content: center;
  place-items: center;
  gap: 2.4rem 3.9rem;
  -webkit-filter: drop-shadow(4px 4px 5px rgba(12, 11, 43, 0.161));
  filter: drop-shadow(4px 4px 5px rgba(12, 11, 43, 0.161));
}
@media screen and (min-width: 780px) {
  .p-top-fv__upper {
    grid-template-columns: repeat(2, auto);
  }
}
.p-top-fv__logo {
  inline-size: 11.1rem;
  block-size: auto;
  aspect-ratio: 111/130;
}
@media screen and (min-width: 780px) {
  .p-top-fv__logo {
    inline-size: 13.1rem;
  }
}
.p-top-fv__text {
  color: var(--white);
  font-size: var(--fz-title-lv5);
  line-height: var(--lh-lv4);
}
@media screen and (min-width: 780px) {
  .p-top-fv__text {
    text-align: left;
  }

}

/** お客様の声に関する調整です **/

.voices-section {
  padding: 60px 20px;
  background-color: #fff;
}

.voices-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px 30px;
  max-width: 1400px;
  margin: 0 auto;
}

.voice-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background-color: #ccc;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.voice-text {
  margin-top: 15px;
  padding-left: 12px;
  border-left: 4px solid #0070c0; /* 青系縦棒 */
}

.voice-comment {
  font-weight: bold;
  line-height: 1.7;
  color: #333;
}

.letter_link{
  padding-top:5rem;
}

/*TOPページのお客様の声*/
/* 背景グラデーション */
.readvoices-bg {
  background: linear-gradient(to bottom right, #00a8ff, #73d196); /* 仮の青緑系グラデーション */
  padding: 60px 20px;
}

/* 白い中央ボックス */
.readvoices-box {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 16px;
  padding: 60px 60px;
  border: 3px solid #707070;
}

/* 中身 */
.readvoices-inner {
  text-align: center;
}

.readvoices-title {
  font-size: 2.8rem;
  color: #004e92;
  font-weight: bold;
  margin-bottom: 1rem;
}

.readvoices-lead {
font-weight: bold;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #004e92;
  margin-bottom: 3rem;
}

/* グリッドレイアウト */
.readvoices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px 30px;
  margin-bottom: 3rem;
}

/* 各動画カード */
.readvoice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.readvoice-video-wrapper {
  width: 100%;
  position: relative;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 12px;
  overflow: hidden;
  background: #ccc;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.readvoice-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.readvoice-text {
  margin-top: 15px;
  text-align: left;
  padding: 0 8px;
}

.readvoice-comment {
  color: #333;
  line-height: 1.6;
}

/* ボタン */
.readvoices-button-wrapper {
  text-align: center;
}

.readvoices-button {
  display: inline-block;
  background-color: #004e91;
  color: #fff;
  font-weight: bold;
  font-size: 1.6rem;
  padding: 1.5rem 4rem;
  min-width: 300px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease;

}

.readvoices-button:hover {
  background-color: #0e3ca0;
}

@media (max-width: 767px) {
  .readvoices-box {
    padding: 40px 20px;
  }

  .readvoices-title {
    font-size: 2.2rem;
  }

  .readvoices-lead {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 2rem;
  }

  .readvoices-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .readvoice-card {
    width: 100%;
    max-width: 320px;
  }

  .readvoice-video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
  }

  .readvoice-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  .readvoice-text {
    text-align: center;
    padding: 0 10px;
    font-size: 1.4rem;
  }

  .readvoice-comment {
    font-size: 1.4rem;
    line-height: 1.6;
  }

  .readvoices-button {
    font-size: 1.6rem;
    padding: 1rem 2rem;
    border-radius: 10px;
    width: 100%;
    max-width: 340px;
  }
}

/* News
----------------------------------------- */
.p-top-news .c-article-list {
  padding-inline: var(--content-space);
  border-radius: 2rem;
  background-color: var(--white);
}

/* Logo
----------------------------------------- */
.p-top-logo__img {
  justify-self: center;
  max-inline-size: 50rem;
  inline-size: 80%;
}