@charset 'utf-8';

/* reset
------------------------------------------------ */
body,div,pre,p,a,img,form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,table,th,td,embed,object,
figure,figcaption {
  margin: 0;
  padding: 0;
}
html { height: 100vh; font-size: 62.5%; }
body {
  width: 100%;
  height: 100%;
  background: #fff;
  -webkit-text-size-adjust: 100%;
  font-family: 'ヒラギノ角ゴ ProN', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS P Gothic', Osaka, Arial, Helvetica, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: #333;
}

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

ul,ol { list-style: none; }
img { width: auto; height: auto; max-width: 100%; border: none; vertical-align: top; }
picture { display: block; position: relative; width: 100%; }
a { text-decoration: underline; color: #333; }
.device-click a { transition: opacity 0.4s ease; }
.device-click a:hover { text-decoration: none; opacity: 0.8; }

.u-c-red { color: #E90000; }

@media screen and (max-width: 768px) {
  .u-d-mobile { display: inherit !important; }
  .u-d-desktop { display: none !important; }
}

@media screen and (min-width: 769px) {
  .u-d-mobile { display: none !important; }
  .u-d-desktop { display: inherit !important; }
}

/* container
------------------------------------------------ */
.l-container { position: relative; }
.l-wrap { position: relative; }

@media screen and (max-width: 768px) {
  .l-wrap { padding: 0 15px; }
}

@media screen and (min-width: 769px) {
  .l-wrap { margin: 0 auto; padding: 0 20px; max-width: 1248px; }
}

/* main
------------------------------------------------ */
.l-main { display: block; position: relative; width: 100%; }

/* lp
------------------------------------------------ */
/* common */
.lp-title-1 { position: relative; margin-bottom: 30px; text-align: center; font-size: 2rem; font-weight: bold; line-height: 1.5; }
.lp-title-1 span { display: inline-block; padding: 10px; background-color: #24355C; border-radius: 80px; vertical-align: top; color: #fff; }

@media screen and (max-width: 768px) {
  .lp-title-1 span { width: 100%; }
}

@media screen and (min-width: 769px) {
  .lp-title-1 { margin-bottom: 40px; font-size: 2.8rem; }
  .lp-title-1 span { padding: 8px 60px; min-width: 360px; }
}

/* visual */
.lp-visual { margin-bottom: 60px; }
.lp-visual img { width: 100%; max-width: inherit; }

@media screen and (max-width: 768px) {
}

@media screen and (min-width: 769px) {
  .lp-visual { margin: 0 auto 80px; max-width: 1248px; }
}

/* fee */
.lp-fee { padding: 30px 0 40px; background-color: #FFFADF; }
.lp-fee-box { display: grid; row-gap: 2px; column-gap: 3px; grid-template-columns: 110px calc(100% - (110px + 3px)); }
.lp-fee-box__title,
.lp-fee-box__content { display: grid; align-content: center; padding: 10px; min-height: 80px; background-color: #fff; text-align: center; }
.lp-fee-box__title { font-size: 1.4rem; font-weight: bold; line-height: 1.7142857142; }
.lp-fee-box__price { display: flex; justify-content: center; align-items: baseline; text-align: center; }
.lp-fee-box__price .is-num { font-size: 2.4rem; font-weight: bold; line-height: 1.7083333333; color: #DE0101; }
.lp-fee-box__price .is-currency { font-size: 1.4rem; font-weight: bold; line-height: 1.7142857142; color: #DE0101; }
.lp-fee-box__price .is-tax { margin-left: 0.4em; font-size: 1.2rem; line-height: 1.6666666666; }
.lp-fee-box__limit { color: #DE0101; }
.lp-fee-box__limit strong { display: flex; justify-content: center; align-items: baseline; font-size: 2.4rem; font-weight: bold; line-height: 1.2; }
.lp-fee-box__limit strong span { font-size: 1.4rem; }
.lp-fee-box__note { margin-top: 8px; font-size: 0.8rem; line-height: 1.75; }

@media screen and (max-width: 768px) {
  .lp-fee-frame > .l-wrap { padding: 0 10px; }
}

@media screen and (min-width: 769px) {
  .lp-fee { padding: 40px 0 60px; }
  .lp-fee-frame > .l-wrap { max-width: 885px; }
  .lp-fee-box { gap: 5px; grid-template-columns: repeat(2,calc(50% - 5px)); }
  .lp-fee-box__title,
  .lp-fee-box__content { padding: 10px; min-height: 80px; }
  .lp-fee-box__title { font-size: 2rem; line-height: 1.7; }
  .lp-fee-box__price .is-num { font-size: 2.6rem; }
  .lp-fee-box__price .is-currency { font-size: 1.6rem; }
  .lp-fee-box__price .is-tax { font-size: 1.6rem; }
  .lp-fee-box__limit strong { font-size: 2.6rem; }
  .lp-fee-box__limit strong span { font-size: 2rem; }
  .lp-fee-box__note { margin-top: 6px; font-size: 1.4rem; }
}

/* school */
.lp-school { padding: 40px 0 60px; }
.lp-school-lead { margin-bottom: 40px; font-size: 1.4rem; line-height: 1.8571428571; }
.lp-school-btn { text-align: center; font-size: 2rem; font-weight: bold; line-height: 2; }
.lp-school-btn > a { display: inline-flex; align-items: center; justify-content: center; position: relative; padding: 0 10px; width: 100%; height: 52px; max-width: 400px; background-color: #005ec2; border-radius: 60px; box-shadow: 3px 3px 0 #00356e; text-decoration: none; vertical-align: top; color: #fff; }
.lp-school-btn > a::after { content: ''; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 0; height: 0; border: 6px solid transparent; border-right: none; border-left: 6px solid #fff; }
.lp-school-lists { display: grid; gap: 20px; margin-top: 40px; }
.lp-school-lists__item > a { display: block; padding: 20px; height: 100%; border-radius: 20px; text-decoration: none; color: #fff; }
.lp-school-lists__info { text-align: center; }
.lp-school-lists__title { font-size: 1.6rem; font-weight: bold; line-height: 1.4; }
.lp-school-lists__target { margin: 10px 0; padding: 6px 0; border-top: 1px solid #fff; border-bottom: 1px solid #fff; font-size: 1.4rem; line-height: 1.4; }
.lp-school-lists__text { font-size: 1.4rem; line-height: 1.6; }

.lp-school-lists__item:nth-of-type(1) > a { background-color: #3aa70a; }
.lp-school-lists__item:nth-of-type(2) > a { background-color: #005ec2; }
.lp-school-lists__item:nth-of-type(3) > a { background-color: #f49600; }
.lp-school-lists__item:nth-of-type(4) > a { background-color: #e7372f; }
.lp-school-lists__item:nth-of-type(5) > a { background-color: #6b318d; }
.lp-school-lists__item:nth-of-type(6) > a { background-color: #00adb2; }
.lp-school-lists__item:nth-of-type(7) > a { background-color: #00aeeb; }
.lp-school-lists__item:nth-of-type(8) > a { background-color: #f7b515; }

@media screen and (max-width: 768px) {
  .lp-school-lists__item > a { display: grid; align-items: center; gap: 10px; grid-template-columns: 40% calc(60% - 10px); }
  .lp-school-lists__text { text-align: left; }
}

@media screen and (min-width: 769px) {
  .lp-school { padding: 60px 0 80px; }
  .lp-school-lead { margin-bottom: 70px; text-align: center; font-size: 1.8rem; }
  .lp-school-btn { font-size: 2.4rem; }
  .lp-school-btn > a { height: 62px; }
  .lp-school-lists { gap: 20px; grid-template-columns: repeat(4,calc((100% / 4) - (20px / (4 / 3)))); margin-top: 60px; }
  .lp-school-lists__item > a { padding: 20px; }
  .lp-school-lists__logo { margin: 0 auto 20px; width: 80%; }
}

/* provider */
.lp-provider { padding: 40px 0 60px; }
.lp-provider .lp-title-1 { margin-bottom: 20px; }
.lp-provider-lead { margin-bottom: 40px; font-size: 1.4rem; line-height: 1.8571428571; text-align: center; }
.lp-provider-lists { display: grid; gap: 20px; }
.lp-provider-lists__trigger { display: grid; align-items: center; gap: 10px; grid-template-columns: 70px calc(100% - (70px + 10px + 35px)); position: relative; appearance: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; padding: 22px 17px; width: 100%; background-color: #fff; border: 3px solid #24355C; border-radius: 0; box-shadow: none; text-align: left; font-family: inherit; color: #24355C; cursor: pointer; }
.lp-provider-lists__trigger::before,
.lp-provider-lists__trigger::after { content: ''; position: absolute; top: 50%; }
.lp-provider-lists__trigger::before { right: 17px; transform: translateY(-50%); width: 35px; height: 35px; border: 1px solid #24355C; border-radius: 50%; }
.lp-provider-lists__trigger::after { right: 27px; transition: transform 0.4s ease; transform: translateY(calc(-50% + 1px)); width: 0; height: 0; border: 7px solid transparent; border-top: 9px solid #24355C; border-bottom: none; }
.lp-provider-lists__trigger[aria-expanded=true]::after { transform: translateY(calc(-50% - 1px)) rotate(180deg); }
.lp-provider-lists__name { word-break: break-all; font-size: 2rem; font-weight: bold; line-height: 1.4; }
.lp-provider-lists__target { display: none; position: relative; padding: 16px 20px 20px; background-color: #FFFADF; border-top: 3px solid #fff; color: #2B2A58; }
.lp-provider-lists__apply { margin-bottom: 22px; text-align: center; font-size: 2rem; font-weight: bold; line-height: 1.4; }
.lp-provider-lists__apply > span { display: inline-block; padding: 0 10px 8px; border-bottom: 1px solid #24355C; vertical-align: top; }
.lp-provider-lists__box__title { margin-bottom: 6px; text-align: center; font-size: 2rem; font-weight: bold; line-height: 1.3; }
.lp-provider-lists__box__title:not(:first-child) { margin-top: 20px; }
.lp-provider-lists__btn { text-align: center; font-size: 2rem; font-weight: bold; line-height: 2; }
.lp-provider-lists__btn > a { display: inline-flex; align-items: center; justify-content: center; position: relative; padding: 0 10px; height: 46px; min-width: 260px; border-radius: 60px; text-decoration: none; vertical-align: top; }
.lp-provider-lists__btn.is-tel > a { gap: 10px; background-color: #011A49; box-shadow: 3px 3px 0 #E6F4FF; color: #fff; }
.lp-provider-lists__btn.is-tel > a::before { content: ''; width: 23px; height: 23px; background: url(../img/icon_tel1.png) no-repeat center center; background-size: 100%; }
.lp-provider-lists__btn.is-form > a { background-color: #FF9924; box-shadow: 2px 2px 0 #E67C03; color: #fff; }
.lp-provider-lists__btn.is-form > a::after { content: ''; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 0; height: 0; border: 5px solid transparent; border-right: none; border-left: 6px solid #fff; }
.lp-provider-lists__time { margin-top: 8px; text-align: center; font-size: 1.2rem; line-height: 1.4; }
.lp-provider-lists__close { position: absolute; top: 10px; right: 8px; appearance: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; width: 40px; height: 40px; background-color: #DCDCDD; border: none; border-radius: 50%; box-shadow: none; text-indent: -9999px; white-space: nowrap; overflow: hidden; cursor: pointer; }
.lp-provider-lists__close::before,
.lp-provider-lists__close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; background-color: #333; border-radius: 6px; }
.lp-provider-lists__close::before { transform: translateX(-50%) rotate(45deg); }
.lp-provider-lists__close::after { transform: translateX(-50%) rotate(-45deg); }

@media screen and (max-width: 768px) {
}

@media screen and (min-width: 769px) {
  .lp-provider { padding: 60px 0 80px; }
  .lp-provider .lp-title-1 { margin-bottom: 40px; }
  .lp-provider-lead { margin-bottom: 60px; font-size: 1.8rem; }
  .lp-provider-lists { row-gap: 32px; column-gap: 20px; grid-template-columns: repeat(3,calc((100% / 3) - (20px / (3 / 2)))); }
  .lp-provider-lists__trigger { gap: 10px; grid-template-columns: 110px calc(100% - (110px + 10px + 40px)); padding: 15px; border-width: 5px; }
  .lp-provider-lists__trigger::before { right: 15px; width: 40px; height: 40px; }
  .lp-provider-lists__trigger::after { right: 28px; }
  .lp-provider-lists__name { font-size: 2rem; line-height: 1.7; }
  .lp-provider-lists__target { padding: 16px 20px 20px; border-top-width: 3px; }
  .lp-provider-lists__apply { margin-bottom: 20px; font-size: 2rem; }
  .lp-provider-lists__apply > span { padding: 0 10px 8px; }
  .lp-provider-lists__box__title { margin-bottom: 6px; font-size: 2rem; }
  .lp-provider-lists__box__title:not(:first-child) { margin-top: 20px; }
  .lp-provider-lists__btn { font-size: 2rem; }
  .lp-provider-lists__btn > a { height: 46px; min-width: 270px; }
  .lp-provider-lists__time { margin-top: 8px; font-size: 1.2rem; }
  .lp-provider-lists__close { top: 15px; right: 15px; width: 40px; height: 40px; }
}