@charset "UTF-8";
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, p, blockquote, th, td, main, figure {
  margin: 0;
  padding: 0;
}

table {
  font-size: 100%;
  font-family: inherit;
}

fieldset, img {
  border: 0;
}

img, svg, video {
  vertical-align: middle;
}

address, caption, cite, code, dfn, em, th, var {
  font-style: normal;
  font-weight: 400;
}

ol, ul {
  list-style: none;
}

caption, th {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
}

q:before, q:after {
  content: "";
}

abbr, acronym {
  border: 0;
}

select, input, textarea {
  font-size: 100%;
}

header, footer, nav, main, section, article, figure, aside, picture {
  display: block;
}

/* 変数
============================================================================================================ */
:root {
  --color-white: #ffffff;
  --color-base: #403633;
  --color-orange: #f26c25;
  --color-yellow: #ffe948;
  --bg-orange: #ff9d03;
  --bg-blue: #2cb7ec;
  --pc-width: 570px;
  --base-padding: 1.5rem;
  --font-family-jp: "Noto Sans JP", sans-serif;
  --font-family-en: "Lato", var(--font-family-jp);
  --font-weight: 500;
  --font-weight-bold: 700;
  --transition-duration: .3s;
  --transition: var(--transition-duration) ease-in-out;
}

/* ========================================================
	template.css => テンプレート用CSS
======================================================== */
html {
  font-size: min(2.6666666667vw, var(--pc-width) / 375 * 10);
  scroll-behavior: smooth;
}

html.no-scroll-behavior {
  scroll-behavior: auto;
}

body {
  background-color: #fff;
  font-size: 1.4rem;
  line-height: 1.8571428571;
  color: var(--color-base);
  word-wrap: break-word;
  overflow-wrap: break-word;
  letter-spacing: 0.1em;
  font-family: var(--font-family-jp);
  font-weight: var(--font-weight);
  font-feature-settings: "palt";
  font-style: normal;
  text-size-adjust: none;
}

.text_center {
  text-align: center;
}

.text_right {
  text-align: right;
}

.mb {
  margin-bottom: 1rem;
}

.mb_2 {
  margin-bottom: 2rem;
}

.mb_3 {
  margin-bottom: 3rem;
}

.arrow_link {
  position: relative;
  padding-left: 30px;
  color: var(--color-orange);
}
.arrow_link:before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 10px);
  width: 20px;
  height: 20px;
  background: url(../img/btn-arrow-orange.svg) no-repeat 50%;
  background-size: 100%;
  z-index: 2;
}

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

:where(address, caption, cite, code, dfn, em, th, var) {
  font-style: normal;
  font-weight: var(--font-weight);
}

:where(img) {
  max-width: 100%;
  width: 100%;
  height: auto;
}

:where(iframe) {
  max-width: 100%;
  vertical-align: middle;
}

:where(sup) {
  vertical-align: super;
  font-size: 60%;
}

:where(table) {
  border-collapse: collapse;
  border-spacing: 0;
  line-height: inherit;
}

:where(a[href]) {
  color: var(--color-base);
  text-decoration: underline;
  outline: none;
}

:where(a[href]._a_reverse, ._a_reverse a[href]) {
  text-decoration: none;
}

@media (hover) {
  :where(a[href]:hover) {
    text-decoration: none;
  }
  :where(a[href]._a_reverse, ._a_reverse a[href]):hover {
    text-decoration: underline;
  }
}
:where(label) {
  cursor: pointer;
}

:where(input, select, textarea, button) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  vertical-align: middle;
  font-family: inherit;
  font-feature-settings: inherit;
  outline: none;
  font-size: 100%;
}

::placeholder {
  color: #ccc;
}

:where(button) {
  cursor: pointer;
}

.hidden {
  display: none;
}

.slick-slider * {
  outline: none;
}

#top {
  display: block;
}

/* transition
============================================================================================================ */
@media (hover) {
  :where(a, button, ._basic_trs),
  :where(a, button, ._basic_trs)::before,
  :where(a, button, ._basic_trs)::after {
    transition: color var(--transition), background var(--transition), border var(--transition), opacity var(--transition), text-decoration-color 0.2s ease-in-out;
  }
  :where(a svg) {
    transition: fill var(--transition);
  }
}
/* color
============================================================================================================ */
._c_black {
  color: #000 !important;
}

._c_base {
  color: var(--color-base) !important;
}

._c_orange {
  color: var(--color-orange) !important;
}

._c_white {
  color: #fff !important;
}

._bg_white {
  background-color: #fff !important;
}

._bg_square {
  background: url(../img/bg-square.png) 50% 0;
  background-size: 1.6rem;
}

/* font
============================================================================================================ */
._ff_en {
  font-family: var(--font-family-en);
  font-weight: 400;
  letter-spacing: 0.05em;
}

._fwn {
  font-weight: var(--font-weight);
}

._fwr {
  font-weight: 400;
}

._fwm {
  font-weight: 500;
}

._fwb {
  font-weight: var(--font-weight);
}

._wsnw {
  white-space: nowrap;
}

/* display
============================================================================================================ */
._db {
  display: block;
}

._dib {
  display: inline-block;
}

._dfcc {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

/* object-fit
============================================================================================================ */
img._of {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img._of.-abs {
  position: absolute;
  top: 0;
  left: 0;
}

img._of.-bg {
  pointer-events: none;
  user-select: none;
  z-index: -1;
}

img._of.-top {
  object-position: 50% 0;
}

img._of.-bottom {
  object-position: 50% 100%;
}

img._of.-right {
  object-position: 100%;
}

img._of.-left {
  object-position: 0;
}

/* hover
============================================================================================================ */
@media (hover) {
  body.init a ._hv_op {
    transition: opacity var(--transition);
  }
  a._hv_op:hover,
  a:hover ._hv_op,
  button._hv_op:hover,
  ._hv_op a:hover {
    opacity: 0.7;
  }
  a._hv_op.-a20:hover,
  a:hover ._hv_op.-a20,
  ._hv_op.-a20 a:hover {
    opacity: 0.8;
  }
  a._hv_op.-a10:hover,
  a:hover ._hv_op.-a10,
  ._hv_op.-a10 a:hover {
    opacity: 0.9;
  }
  a._hv_op.-a50:hover,
  a:hover ._hv_op.-a50,
  ._hv_op.-a50 a:hover {
    opacity: 0.5;
  }
}
/* target
============================================================================================================ */
a._target {
  display: block;
  position: relative;
  width: 1px;
  top: 0;
}

a._target.-pt {
  top: -3rem;
}

a._target.-abs {
  position: absolute;
}

/* footer
============================================================================================================ */
footer small {
  display: block;
  padding: 2rem;
  text-align: center;
  background-color: #f3f3f3;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* pagetop
============================================================================================================ */
#pagetop {
  position: fixed;
  overflow: hidden;
  bottom: 1rem;
  right: max(1rem, (100% - var(--pc-width)) / 2 + 1rem);
  width: 4rem;
  height: 0;
  padding-top: 4rem;
  background-color: rgba(64, 54, 51, 0.4);
  border-radius: 100%;
  pointer-events: none;
  opacity: 0;
  z-index: 98;
}

#pagetop::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8rem;
  height: 0.8rem;
  margin-top: -0.4rem;
  border-top: 0.2rem solid #fff;
  border-left: 0.2rem solid #fff;
  transform-origin: 0 0;
  transform: rotate(45deg);
}

#pagetop.show {
  opacity: 1;
  pointer-events: auto;
}

@media print {
  #pagetop {
    display: none;
  }
}
@media (hover) {
  #pagetop:hover {
    background-color: rgb(64, 54, 51);
  }
}
/* contents
============================================================================================================ */
#contents {
  position: relative;
  max-width: var(--pc-width);
  margin-inline: auto;
  background-color: #fff;
  z-index: 2;
}

@media screen and (min-width: 570px), print {
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f3f8fe url(../img/bg.jpg) no-repeat 50%;
    background-size: cover;
    z-index: -1;
  }
  #contents {
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.15);
  }
  body#for_juniorhigh::before {
    background: #f3f8fe url(../img/juniorhigh/bg.webp) no-repeat center top;
    background-size: cover;
  }
  body#for_elementary::before {
    background: #f3f8fe url(../img/elementary/bg.webp) no-repeat center bottom;
    background-size: cover;
  }
  body#for_elementary::after {
    content: "";
    position: fixed;
    width: 100vw;
    height: 75vw;
    top: 0;
    right: 0;
    background: transparent url(../img/elementary/bg-plane_cb.webp) no-repeat top right;
    background-size: contain;
  }
}
@media screen and (min-width: 1150px), print {
  body#for_elementary::after {
    width: 50vw;
    height: 30vw;
  }
}
/* ===================================================================================================================

	パーツ

=================================================================================================================== */
/* main_title
============================================================================================================ */
#main_title {
  position: relative;
  overflow: hidden;
}

#main_title p {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

/*
@media screen {
	#main_title .base {
		opacity: 0;
	}
	#main_title p {
		opacity: 0;
	}
	#main_title.start .base {
		transition: opacity .5s linear;
		opacity: 1;
	}
	#main_title.start .bottom {
		transition: opacity .5s linear;
		opacity: 1;
	}
	#main_title .img {
		transform: translateY(50px);
	}
	#main_title.start .img {
		transition: opacity .5s .3s linear, transform .5s .3s cubic-bezier(0.33, 1, 0.68, 1);
		opacity: 1;
		transform: translateY(0);
	}
	#main_title .title {
		transform: scale(.5);
	}
	#main_title.start .title {
		transition: opacity .5s .7s linear, transform .5s .7s cubic-bezier(0.34, 1.56, 0.64, 1);
		opacity: 1;
		transform: scale(1);
	}
	#main_title .txt {
		opacity: 1;
		clip-path: inset(0 100% 0 0);
	}
	#main_title.start .txt {
		transition: clip-path .5s 1.3s cubic-bezier(0.33, 1, 0.68, 1);
		clip-path: inset(0);
	}
}
*/
.main_cover {
  position: relative;
}

.main_cover::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  right: 0;
  left: 0;
  height: 1rem;
  background-color: #fff;
}

/* title
============================================================================================================ */
.en_title {
  position: relative;
  margin-bottom: 3rem;
  padding-top: 2.8rem;
  font-size: 3rem;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.06em;
  z-index: 2;
}

.en_title .en {
  /* position: absolute;
  top: 0;
  right: 0;
  left: 0;
  white-space: nowrap;
  font-size: 5.5rem;
  line-height: 1; */
  /* opacity: 0.15;
  z-index: -1; */
  color: var(--bg-orange);
}

/* _marker
============================================================================================================ */
._marker {
  background: linear-gradient(to bottom, rgba(255, 233, 72, 0) 70%, rgb(255, 233, 72) 70%);
}

._marker_h {
  background: linear-gradient(to bottom, rgba(255, 233, 72, 0) 12%, rgb(255, 233, 72) 12%, rgb(255, 233, 72) 94%, rgba(255, 233, 72, 0) 94%);
}

/* box_btn
============================================================================================================ */
.box_btn {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 31.5rem;
  height: 7rem;
  border-radius: 0.5rem;
  box-shadow: inset 0 -0.4rem 0 rgba(0, 0, 0, 0.16);
  color: #fff;
  font-size: 1.5rem;
  text-decoration: none;
  line-height: 1.3;
}

.box_btn::before {
  content: "";
  position: absolute;
  left: 2rem;
  top: calc(50% - 1.3rem);
  width: 2.6rem;
  height: 2.6rem;
  background: no-repeat 50%;
  background-size: 100%;
}

.box_btn::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  top: calc(50% - 1rem);
  width: 2rem;
  height: 2rem;
  background: url(../img/btn-arrow.svg) no-repeat 50%;
  background-size: 100%;
}

.box_btn b {
  font-size: 1.8rem;
}

.box_btn.-counseling {
  background-color: #2cb7ec;
}

.box_btn.-counseling::before {
  background-image: url(../img/btn-ico-counseling.svg);
}

.box_btn.-search {
  background-color: var(--bg-orange);
}

.box_btn.-search::before {
  background-image: url(../img/btn-ico-search.svg);
}

.box_btn.-search::after {
  transform: rotate(90deg);
}

.box_btn.-link {
  background-color: #e66fb3;
}

.box_btn.-link::before {
  background-image: url(../img/common/btn-ico-doc.svg);
}

@media (hover) {
  .banner_link[href]:hover,
  .box_btn[href]:hover {
    opacity: 0.7;
  }
}
/* btn_list
============================================================================================================ */
.btn_list {
  width: 34.5rem;
  margin-inline: auto;
  padding-block: 2rem;
  background-color: #fff;
}

.btn_list li + li {
  margin-top: 1.6rem;
}

/* conversion_block
============================================================================================================ */
.conversion_block {
  position: relative;
  padding: 4rem var(--base-padding) 3rem;
  text-align: center;
  color: #fff;
  z-index: 2;
}

.conversion_block p {
  margin-bottom: 2rem;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.5;
}

.conversion_block h2 {
  margin-bottom: 0.7rem;
  font-size: 2.6rem;
  line-height: 1.2307692308;
}

/* .swiper
============================================================================================================ */
#contents .swiper-pagination-bullets {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

#contents .swiper-pagination-bullet {
  width: 1rem;
  height: 1rem;
  margin: 0 0.8rem;
  background-color: var(--color-base);
  opacity: 0.2;
}

#contents .swiper-pagination-bullet-active {
  background-color: var(--bg-orange);
  opacity: 1;
}

.slide_arrow {
  position: absolute;
  top: calc(50% - 1.5rem);
  width: 3rem;
  height: 3rem;
  background-color: rgba(64, 54, 51, 0.4);
  border-radius: 100%;
  cursor: pointer;
  z-index: 5;
}

.slide_arrow.-l {
  left: 0;
  transform: scaleX(-1);
}

.slide_arrow.-r {
  right: 0;
}

.slide_arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.1rem;
  width: 0.8rem;
  height: 0.8rem;
  border-top: 0.2rem solid #fff;
  border-right: 0.2rem solid #fff;
  transform-origin: 100% 0;
  transform: rotate(45deg);
}

/* main_btn
============================================================================================================ */
.main_btn {
  margin-block: 1rem 2rem;
}

/* renewal_block
============================================================================================================ */
.renewal_block {
  /*padding-top: 3rem;*/
  background-color: #fefae2;
}

.renewal_block header {
  text-align: center;
}

.renewal_block header p {
  position: relative;
  width: fit-content;
  margin: 0 auto 1.5rem;
  padding-bottom: 0.2rem;
  border-bottom: 0.2rem solid;
  font-size: 1.3rem;
  font-weight: 700;
  z-index: 1;
}

.renewal_block header p::after {
  content: "";
  position: absolute;
  top: calc(100% + 0.2rem);
  right: 50%;
  width: 1rem;
  height: 1rem;
  background-color: #fefae2;
  border-right: 0.2rem solid;
  border-bottom: 0.2rem solid;
  transform-origin: 100% 0;
  transform: translateX(50%) rotate(45deg);
  z-index: -1;
}

.renewal_block header h2 {
  font-size: 4rem;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-shadow: 0.3rem 0.3rem 0 #fff, 0.3rem 0.3rem 0 #fff;
}

.renewal_block header h2 .num {
  font-size: 6.4rem;
  line-height: 1;
  vertical-align: -0.05em;
}

.renewal_block .school {
  margin: 1.5rem var(--base-padding);
  padding: 0.6rem 0;
  background-color: var(--color-yellow);
  border-radius: 10rem;
  text-align: center;
  line-height: 1.3333333333;
  font-weight: 700;
}

.renewal_block .benefits {
  position: relative;
  margin-top: 5.5rem;
  padding: 5rem var(--base-padding) 2rem;
  background-color: var(--color-yellow);
}

.renewal_block .benefits h3 {
  position: absolute;
  right: 0;
  left: 0;
  top: -3rem;
  width: 29rem;
  height: 7rem;
  margin-inline: auto;
  background: url(../img/benefits-ribbon.svg) no-repeat 50%;
  background-size: 100%;
  text-align: center;
  color: #fff;
  font-size: 2.8rem;
  line-height: 1.6;
  font-weight: 700;
}

.renewal_block .benefits .flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
}

.renewal_block .benefits .flex p {
  width: 10.2rem;
  height: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 0.5rem;
  background: url(../img/benefits-star.svg) no-repeat 50%;
  background-size: 100%;
  color: #fff;
  font-size: 1.9rem;
  line-height: 1.2;
}

.renewal_block .benefits .flex p .s {
  margin-bottom: 0.4rem;
  color: var(--color-yellow);
  font-size: 1.2rem;
}

.renewal_block .benefits .flex p .m {
  font-size: 1.6rem;
}

.renewal_block .benefits .flex dt {
  margin-bottom: 0.6rem;
  background-color: #fff;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.6;
}

.renewal_block .benefits .flex dd {
  font-size: 4.4rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.renewal_block .slide_arrow,
.renewal_side_block .slide_arrow {
  position: absolute;
  top: calc(50% - 1rem);
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.5);
  z-index: 5;
}

.renewal_block .slide_arrow.-l,
.renewal_side_block .slide_arrow.-l {
  left: 0;
  transform: scaleX(-1);
}

.renewal_block .slide_arrow.-r,
.renewal_side_block .slide_arrow.-r {
  right: 0;
}

.renewal_block .slide_arrow::after,
.renewal_side_block .slide_arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.7rem;
  width: 0.6rem;
  height: 0.6rem;
  border-top: 0.2rem solid #fd6e18;
  border-right: 0.2rem solid #fd6e18;
  transform-origin: 100% 0;
  transform: rotate(45deg);
}

/* results_block
============================================================================================================ */
.results_block {
  position: relative;
  padding: 3rem var(--base-padding);
  text-align: center;
  z-index: 2;
}

.results_block h2 {
  display: inline-block;
  padding: 0 1rem;
  background-color: var(--color-yellow);
  border-radius: 10rem;
  font-size: 1.5rem;
  line-height: 1.5;
}

.results_block .lead {
  margin-top: 1rem;
  font-size: 2.7rem;
  line-height: 1.2857142857;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.results_block .lead .marker {
  background: linear-gradient(to bottom, rgba(255, 233, 72, 0) 80%, rgb(255, 233, 72) 80%);
}

.results_block .results {
  margin-top: 2rem;
  padding: 2rem 0;
  background-color: #fff;
  font-size: 1rem;
}

.results_block .results dl {
  position: relative;
  height: 6.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-inline: 1.5rem;
  padding-inline: 4rem;
  font-weight: 700;
  text-align: left;
  font-size: 2.6rem;
  line-height: 1.0769230769;
}

.results_block .results dl::before,
.results_block .results dl::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3.2rem;
  background: url(../img/results_point.svg) no-repeat 50% 100%;
  background-size: 100%;
}

.results_block .results dl::before {
  left: 0;
}

.results_block .results dl::after {
  right: 0;
  transform: scaleX(-1);
}

.results_block .results dl .num {
  font-size: 3.8rem;
  color: var(--color-orange);
}

.results_block .results dl ~ dl {
  margin-top: 2rem;
}

.results_block .notes {
  margin-top: 1rem;
  font-size: 0.65rem;
  text-align: left;
  font-weight: 400;
}

.results_block .results_2col2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 2rem 0 0;
  gap: 2rem;
}
.results_block .results_2col2 dl {
  width: calc(40% - 1em);
  padding-inline: 0;
  padding: 0 30px;
  margin: 0 0 0.25rem;
  height: auto;
  font-size: inherit;
  background: var(--color-yellow);
  height: 50px;
}
.results_block .results_2col2 dl dt {
  text-align: left;
}
.results_block .results_2col2 dl dd {
  text-align: right;
}
.results_block .results_2col2 dl ~ dl {
  margin-top: 0;
}
.results_block .results_2col2 dl:before, .results_block .results_2col2 dl:after {
  position: absolute;
  content: "";
  width: 0px;
  height: 0px;
  z-index: 1;
  border-color: #fff transparent;
  border-style: solid;
}
.results_block .results_2col2 dl:before {
  top: 0;
  left: 0;
  border-width: 25px 0px 25px 15px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}
.results_block .results_2col2 dl:after {
  top: 0;
  right: 0;
  border-width: 25px 15px 25px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
  transform: rotate(0deg);
}

/* contents_nav
============================================================================================================ */
.contents_nav {
  padding: 4rem var(--base-padding);
  background-color: #fefae2;
}
.contents_nav .lookup {
  position: relative;
}
.contents_nav .lookup a {
  border-color: var(--bg-blue);
}
.contents_nav .lookup:before, .contents_nav .lookup:after {
  position: absolute;
}
.contents_nav .lookup:before {
  content: "注目!";
  z-index: 10;
  font-size: 0.8rem;
  font-weight: bold;
  transform: rotate(-45deg) translateZ(0);
  color: white;
  opacity: 1;
  left: 1vw;
  top: 2vw;
}
@media screen and (min-width: 570px) {
  .contents_nav .lookup:before {
    left: 0;
    top: 0.4rem;
  }
}
.contents_nav .lookup:after {
  position: absolute;
  display: blcok;
  content: "";
  left: 0;
  top: 0;
  z-index: 5;
  left: -0.2rem;
  top: -0.2rem;
  max-height: 60px;
  height: 12vw;
  aspect-ratio: 1;
  clip-path: polygon(0 0, 100% 0%, 0 100%);
  background: var(--bg-blue);
}

.contents_nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.contents_nav li {
  width: calc((100% - 0.5rem) / 2);
}

.contents_nav a {
  position: relative;
  display: flex;
  align-items: center;
  height: 6.6rem;
  padding-left: 1.4rem;
  padding-right: 3rem;
  background-color: #fff;
  border: 0.15rem solid rgba(64, 54, 51, 0.3);
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.3571428571;
  text-decoration: none;
  color: var(--color-base);
  box-shadow: inset 0 -0.3rem 0 rgba(0, 0, 0, 0.16);
}

.contents_nav a::after {
  content: "";
  position: absolute;
  right: 0.8rem;
  top: calc(50% - 1rem);
  width: 2rem;
  height: 2rem;
  background: url(../img/btn-arrow-orange.svg) no-repeat 50%;
  background-size: 100%;
  transform: rotate(90deg);
}

@media (hover) {
  .contents_nav a[href]:hover {
    opacity: 0.7;
  }
}
/* strategy_block
============================================================================================================ */
.strategy_block {
  padding-bottom: 4rem;
  background-color: var(--color-yellow);
}
.strategy_block header .en {
  position: relative;
  display: inline-block;
  padding: 0 65px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
}
.strategy_block header .en:before, .strategy_block header .en:after {
  position: absolute;
  top: calc(50% - 1px);
  width: 50px;
  height: 6px;
  content: "";
  border-top: solid 2px var(--bg-orange);
}
.strategy_block header .en:before {
  left: 0;
}
.strategy_block header .en:after {
  right: 0;
}
.strategy_block .notes {
  margin-top: 1.7rem;
  font-size: 1.2rem;
  line-height: 1.6666666667;
  font-weight: 400;
}

.strategy_header {
  position: relative;
  padding: 4rem 0 4rem;
  background-color: var(--bg-orange);
  text-align: center;
  color: #fff;
  font-size: 3.4rem;
  line-height: 1.2941176471;
}

.strategy_header p {
  width: fit-content;
  margin: 0 auto 1rem;
  padding: 0 1rem;
  background-color: var(--color-yellow);
  border-radius: 10rem;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--color-base);
  font-weight: 700;
}

.features_block .worries {
  position: relative;
  padding: 2rem 0 3rem;
  background-color: #f3f3f3;
}

.features_block .worries::before,
.features_block .worries::after {
  content: "";
  position: absolute;
  top: -2rem;
  width: 50%;
  height: 3rem;
  background-color: #f3f3f3;
}

.features_block .worries::before {
  left: 0;
  border-radius: 0 2rem 0 0;
}

.features_block .worries::after {
  right: 0;
  border-radius: 2rem 0 0 0;
}

.features_block .worries .lead {
  text-align: center;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

.features_block .worries .lead b {
  display: block;
  font-size: 2.2rem;
}

.features_block .worries .lead span {
  background: linear-gradient(to bottom, rgba(255, 233, 0, 0) 10%, rgb(255, 233, 0) 10%, rgb(255, 233, 0) 90%, rgba(255, 233, 0, 0) 90%);
}

.features_block .worries .content {
  position: relative;
  margin-top: 2rem;
  z-index: 3;
}

.features_block .worries .img {
  width: 20rem;
  margin: 2rem auto -51px;
}

.features_block .worries ul {
  position: relative;
  margin: 0 2rem 0;
}
.features_block .worries ul::before, .features_block .worries ul::after {
  position: relative;
  display: block;
  content: "";
  width: 100%;
  left: 0;
}
.features_block .worries ul::before {
  aspect-ratio: 347/60;
  background: transparent url(../img/common/worries-frame-top.svg) no-repeat center center;
  background-size: cover;
}
.features_block .worries ul::after {
  aspect-ratio: 347/30;
  bottom: 15px;
  background: transparent url(../img/common/worries-frame-bottom.svg) no-repeat center center;
}

.features_block .worries2 ul::before {
  background-image: url(../img/common/worries-frame-top2.svg);
}

.features_block .worries li {
  position: relative;
  margin: 0 auto;
  padding: 1.4rem 0 1.4rem 5rem;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  background: transparent url(../img/common/worries-frame-middle.svg) repeat-y center center;
}

.features_block .worries li:nth-child(1) {
  background: transparent url(../img/common/worries-frame-middle-cut.svg) repeat-y top center;
  background-size: cover;
}

.features_block .worries li::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: calc(50% - 1rem);
  width: 2rem;
  height: 2rem;
  background-color: var(--color-yellow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0.3rem;
}

.features_block .worries li + li::before {
  position: absolute;
  display: block;
  content: "";
  width: calc(100% - 3rem);
  left: 1.5rem;
  top: -0.2rem;
  height: 0.2rem;
  background-color: #dcdcdc;
}

.features_block .result {
  position: relative;
  padding: 2rem var(--base-padding);
  z-index: 1;
}
.features_block .result .result-title-text {
  font-size: 2.5rem;
  line-height: 1.5;
  display: inline-block;
}

.features_block .result::before,
.features_block .result::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 10rem;
  background-color: var(--color-yellow);
  z-index: -1;
}

.features_block .result::before {
  left: 0;
  transform-origin: 100% 0;
  transform: skewY(15deg);
}

.features_block .result::after {
  right: 0;
  transform-origin: 0 0;
  transform: skewY(-15deg);
}

.features_block .result p {
  position: relative;
  padding: 2rem 0 1rem;
  font-size: 3.8rem;
  line-height: 1.5;
  text-align: center;
  font-weight: 700;
}

.features_block .result p::before,
.features_block .result p::after {
  content: "";
  position: absolute;
  width: 4rem;
  height: 4rem;
  border-left: 0.5rem solid #ffcb2c;
  border-top: 0.5rem solid #ffcb2c;
  pointer-events: none;
}

.features_block .result p::before {
  left: 0;
  top: 0;
}

.features_block .result p::after {
  right: 0;
  bottom: 0;
  transform: rotate(180deg);
}

.features_block .result img {
  width: 27rem;
  margin-right: 1rem;
  margin-bottom: 0.5rem;
  vertical-align: bottom;
}

.strategy_block .strategy {
  background-color: #fff;
  margin: 0 var(--base-padding);
  padding: 3rem var(--base-padding);
}

.strategy_block .strategy section {
  margin-top: 4rem;
}

.strategy_block .strategy section h4 {
  margin-bottom: 2rem;
  border-left: 0.4rem solid var(--bg-orange);
  padding-left: 1.2rem;
  font-size: 2rem;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.strategy_block .strategy section .img {
  position: relative;
  margin-top: 2rem;
}

.strategy_block .strategy section .img.-border::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0.1rem solid #e3e3e3;
  pointer-events: none;
}

/* corse_block
============================================================================================================ */
.corse_block {
  padding: 4rem var(--base-padding) 3rem;
}
.corse_block header {
  padding: 2rem 1rem;
}
.corse_block header:before, .corse_block header:after {
  position: absolute;
  content: "";
  width: 4rem;
  height: 4rem;
}
.corse_block header:after {
  top: 0;
  left: 0;
  border-left: 0.5rem solid #ffcb2c;
  border-top: 0.5rem solid #ffcb2c;
}
.corse_block header:before {
  right: 0;
  bottom: 0;
  border-right: 0.5rem solid #ffcb2c;
  border-bottom: 0.5rem solid #ffcb2c;
}
.corse_block dl dt {
  background-color: #b2ab9c;
  padding: 0.25rem 1rem;
  color: white;
}
.corse_block .fee {
  display: block;
  margin-top: 1rem;
  font-weight: 700;
  font-size: 1.8rem;
}
.corse_block .fee .num {
  font-size: 3.2rem;
  line-height: 1;
}
.corse_block .fee.with_label label {
  display: inline-block;
  width: 7rem;
}

.corse_block .lead {
  margin: 3rem 0 2rem;
  text-align: center;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.3181818182;
}

.corse_block .img {
  position: relative;
}

.corse_block .img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0.1rem solid #e3e3e3;
  pointer-events: none;
}

.corse_block .enrollmentfee {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.corse_block .enrollmentfee dt {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 8.7rem;
  height: 3.7rem;
  margin-right: 1rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-orange);
  border: 1px solid;
}

.corse_block .enrollmentfee dd {
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
}

.corse_block .enrollmentfee dd .num {
  font-size: 3.8rem;
}

.corse_block .enrollmentfee dd .tax {
  font-size: 1.4rem;
}

.corse_block .enrollmentfee_notes {
  margin-top: 1rem;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 400;
}

.corse_block .tuitionfee {
  margin-top: 1.5rem;
}

.corse_block .tuitionfee h3 {
  padding: 1rem;
  background-color: var(--bg-orange);
  color: #fff;
  text-align: center;
  font-size: 2rem;
  line-height: 1.4;
}

.corse_block .tuitionfee h3 span {
  display: block;
  font-size: 1.5rem;
}

.corse_block .tuitionfee .corse {
  padding: 2rem;
  background-color: #fefae2;
  font-size: 1.3rem;
}

.corse_block .tuitionfee .corse dl + dl {
  margin-top: 2rem;
  padding-top: 2.5rem;
  border-top: 0.2rem solid #e1dfd3;
}

.corse_block .tuitionfee .corse dt {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
  font-size: 2rem;
  line-height: 1.5;
  font-weight: 700;
}

.corse_block .tuitionfee .corse dt span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8.3rem;
  height: 2.5rem;
  margin-right: 1rem;
  font-size: 1.4rem;
  color: #fff;
  line-height: 1.2;
}

.corse_block .tuitionfee .corse dt .y1 {
  background-color: #b2ab9c;
}

.corse_block .tuitionfee .corse dt .y2 {
  background-color: #8b8478;
}

.corse_block .tuitionfee .corse dt .y3 {
  background-color: #403633;
}

.corse_block .notes {
  margin-top: 1.7rem;
  font-size: 1.2rem;
  line-height: 1.6666666667;
  font-weight: 400;
}

/* features_block
============================================================================================================ */
.features_block .features_title {
  position: relative;
  padding: 2.5rem 0 4rem;
  text-align: center;
  color: #fff;
  font-size: 3.4rem;
  line-height: 1.2941176471;
  background-color: var(--bg-orange);
}
.features_block .features_title h2 span {
  font-size: 4rem;
  display: inline-block;
  position: relative;
}
.features_block .features_title h2 span::after {
  display: block;
  content: "";
  width: 100%;
  height: 10px;
  background-color: var(--color-yellow);
}
.features_block .features_title p {
  width: fit-content;
  margin: 0 auto 1rem;
  padding: 0 1rem;
  background-color: var(--color-yellow);
  border-radius: 10rem;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--color-base);
  font-weight: 700;
}

.point_block {
  padding: 4rem var(--base-padding);
}
.point_block a {
  color: var(--color-orange);
}
.point_block .banner_free_2week {
  display: block;
  padding: 2rem;
  background: #fff9ba url(../img/common/sect_cheer_pc_bg01@2x.png) no-repeat center center;
  background-size: cover;
  border: 1px solid var(--color-orange);
  transition: opacity 0.5s;
}
.point_block .point_lead h3 {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}
.point_block .point_lead h3 span {
  position: relative;
  display: inline-block;
  font-size: 2.4rem;
  padding: 0.25rem 1rem;
  background-color: var(--color-yellow);
  text-align: center;
}
.point_block .point_lead h3 span::before, .point_block .point_lead h3 span::after {
  content: "";
  position: absolute;
  bottom: -50px;
  left: 50%;
  width: 5px;
  height: 30px;
  background: var(--color-base);
}
.point_block .point_lead h3 span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.point_block .point_lead h3 span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.point_block .point_lead h3 span:last-child::before, .point_block .point_lead h3 span:last-child::after {
  display: none;
}
.point_block .point_fig {
  margin-bottom: 6rem;
}
.point_block .point_fig .flow {
  display: flex;
  align-items: stretch;
  font-weight: bold;
  color: #333;
  margin-bottom: 1rem;
  padding-left: var(--base-padding);
  /* 最初の要素だけ左端と右端をまっすぐにする */
}
.point_block .point_fig .flow .flow-item {
  flex: 1;
  display: grid;
  align-items: center;
  padding: 40px 20px;
  /* 基本の形：左が凹み、右が凸 */
  clip-path: polygon(calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%, 20px 50%, 0% 0%);
  /* 重なりを調整 */
  margin-left: -19px;
  line-height: 1.3;
  text-align: center;
  color: var(--color-white);
}
.point_block .point_fig .flow .flow-item::before {
  display: block;
  content: "";
  width: 5rem;
  height: 5rem;
  background-color: white;
  border-radius: 50%;
  margin: 0 auto 1rem;
  background-size: 3rem;
  background-repeat: no-repeat;
  background-position: center center;
}
.point_block .point_fig .flow .is-orange {
  background-color: var(--bg-orange);
}
.point_block .point_fig .flow .is-orange::before {
  background-image: url(../img/common/icon-pen-clip.svg);
}
.point_block .point_fig .flow .is-blue {
  background-color: var(--bg-blue);
}
.point_block .point_fig .flow .is-blue::before {
  background-image: url(../img/common/icon-running.svg);
}
.point_block .point_fig .flow .is-green {
  background-color: #56d02a;
}
.point_block .point_fig .flow .is-green::before {
  background-image: url(../img/common/icon-up.svg);
  transform: rotate(45deg);
}
.point_block .point_fig p {
  font-size: 2.6rem;
  text-align: center;
}
.point_block .img {
  position: relative;
  margin-bottom: 3rem;
}
.point_block .img .balloon {
  position: absolute;
  display: block;
  bottom: -1.5rem;
  right: -1rem;
  padding: 0.5rem 1rem 0.5rem 3rem;
  background-color: var(--color-yellow);
  z-index: 10;
}
.point_block .img .balloon::before {
  position: absolute;
  display: block;
  content: "";
  width: 1.5rem;
  height: 100%;
  left: 1rem;
  top: 0;
  background: transparent url(../img/common/icon-cursor-finger-click.svg) no-repeat center center;
  z-index: 5;
}
.point_block .logo-9subj {
  position: relative;
  padding-right: 35%;
}
.point_block .logo-9subj:after {
  position: absolute;
  display: block;
  content: "";
  width: 35%;
  height: 100%;
  right: 0;
  top: 0;
  background: transparent url(../img/juniorhigh/logo-9subj-webtest.svg) right center no-repeat;
  background-size: contain;
}

.point_block.pt-0 {
  padding-top: 0;
}

.point_block section + section {
  margin-top: 4rem;
}

.point_block header {
  margin-bottom: 2rem;
  font-weight: 700;
  font-size: 1.6rem;
}

.point_block header h3 {
  margin-top: 0.3rem;
  font-size: 2.6rem;
  line-height: 1.4615384615;
  color: var(--color-orange);
}

.point_block header .point {
  margin-bottom: 1.5rem;
  color: var(--color-orange);
  display: flex;
  align-items: center;
}

.point_block header .point .p {
  margin-right: 0.5em;
  font-size: 1.8rem;
  border-bottom: 0.2rem solid;
  line-height: 1.4;
}

.point_block header .point .num {
  font-size: 4rem;
  line-height: 1;
  font-weight: 900;
  -webkit-text-stroke: 0.1rem var(--color-orange);
  -webkit-text-fill-color: transparent;
}

.point_block_top header {
  position: relative;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  padding: 2rem 3rem;
  background-color: var(--bg-orange);
  text-align: center;
}
.point_block_top header h3 {
  color: var(--color-white);
  margin-top: 0;
}
.point_block_top header p {
  color: var(--color-base);
  opacity: 0.7;
}
.point_block_top header::before, .point_block_top header::after {
  position: absolute;
  width: 50px;
  height: 50px;
  content: "";
}
.point_block_top header::before {
  border-left: var(--color-yellow) solid 6px;
  border-top: var(--color-yellow) solid 6px;
  top: 1.5rem;
  left: 1.5rem;
}
.point_block_top header::after {
  border-right: var(--color-yellow) solid 6px;
  border-bottom: var(--color-yellow) solid 6px;
  bottom: 1.5rem;
  right: 1.5rem;
}

.point_block .img.-border::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0.1rem solid #e3e3e3;
  pointer-events: none;
}

.features_block .more_block {
  position: relative;
  margin: 1rem var(--base-padding) 0;
  background-color: #fefae2;
}

.features_block .movie {
  position: relative;
  padding: 3.5rem 0 0;
}

.features_block .movie h3 {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: fit-content;
  margin: 0 auto;
  padding: 0.2rem 1rem;
  background-color: var(--color-yellow);
  border-radius: 10rem;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--color-base);
  font-weight: 700;
  transform: translateY(-50%);
}

.features_block .movie h3::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - 0.6rem);
  width: 1.2rem;
  height: 1rem;
  background-color: var(--color-yellow);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.features_block .movies {
  text-align: center;
}

.features_block .movies iframe {
  width: 28rem;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 0.8rem;
}

.features_block .movies_wrap {
  position: relative;
}

.features_block .movie .slide_arrow.-l {
  left: -0.5rem;
}

.features_block .movie .slide_arrow.-r {
  right: -0.5rem;
}

.features_block .differences {
  margin-top: 3rem;
  padding: 0 1.5rem 2rem;
}

.features_block .differences h3 {
  margin-bottom: 2rem;
  border-left: 0.4rem solid var(--bg-orange);
  padding-left: 1.2rem;
  font-size: 2rem;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.features_block .differences table {
  width: 100%;
  table-layout: fixed;
}

.features_block .differences table th,
.features_block .differences table td {
  text-align: center;
}

.features_block .differences table th:first-child {
  width: 6.5rem;
}

.features_block .differences thead th {
  height: 6rem;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.3333333333;
  font-weight: 700;
}

.features_block .differences thead th:nth-child(2) {
  background-color: var(--color-orange);
}

.features_block .differences thead th:nth-child(2) ~ * {
  border-left: 0.1rem solid #fff;
}

.features_block .differences thead th:nth-child(3) {
  background-color: #a7a7a7;
}

.features_block .differences thead th:nth-child(4) {
  background-color: #c3c3c3;
}

.features_block .differences tbody th {
  height: 5.3rem;
  border: 0.1rem solid #c3c3c3;
  border-right-width: 0;
  font-size: 1.3rem;
  line-height: 1.3846153846;
  background-color: #f3f3f3;
  letter-spacing: 0;
}

.features_block .differences tbody td {
  background-color: #fff;
  border-right: 0.1rem solid #c3c3c3;
  border-bottom: 0.1rem solid #c3c3c3;
}

.features_block .differences tbody td:nth-child(2) {
  border-right: 0.1rem solid var(--color-orange);
  border-left: 0.1rem solid var(--color-orange);
}

.features_block .differences tbody tr:last-child td:nth-child(2) {
  border-bottom-color: var(--color-orange);
}

.features_block .differences tbody td span {
  display: block;
  overflow: hidden;
  width: 2.6rem;
  height: 0;
  padding-top: 2.6rem;
  margin: 0 auto;
  background: no-repeat 50%;
  background-size: 100%;
  color: #fff;
}

.features_block .differences tbody td .maru2 {
  background-image: url(../img/ico-table-maru2.svg);
}

.features_block .differences tbody td .maru {
  background-image: url(../img/ico-table-maru.svg);
}

.features_block .differences tbody td .batsu {
  background-image: url(../img/ico-table-batsu.svg);
}

.features_block .differences tbody td .sankaku {
  background-image: url(../img/ico-table-sankaku.svg);
}

/* flow_block
============================================================================================================ */
.flow_block {
  padding: 4rem var(--base-padding);
  background-color: #fefae2;
}

.flow_block .steps section {
  position: relative;
  padding: 2.3rem;
  background-color: #fff;
  border: 0.2rem solid;
}

.flow_block .steps section + section {
  margin-top: 3.2rem;
}

.flow_block .steps h3 {
  margin: 1.5rem 0 0.6rem;
  text-align: center;
  font-size: 2rem;
  line-height: 1.6;
  color: var(--color-orange);
}

.flow_block .steps .step {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 5.6rem;
  height: 5.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 2;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1;
}

.flow_block .steps .step span {
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 900;
  -webkit-text-stroke: 0.1rem var(--color-base);
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0.2rem 0 #fff;
}

.flow_block .steps .step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-yellow);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: -1;
}

.flow_block .steps .notes {
  margin-top: 1rem;
  font-size: 1.2rem;
  font-weight: 400;
}

.flow_block .steps .arrow {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 2.2rem;
  overflow: hidden;
}

.flow_block .steps .arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 10rem;
  height: 10rem;
  background-color: #fff;
  border-bottom: 0.2rem solid;
  border-left: 0.2rem solid;
  transform-origin: 0 100%;
  transform: scaleY(0.6) rotate(-45deg);
}

/* experiences_block
============================================================================================================ */
.experiences_block {
  position: relative;
  padding: 5rem 0;
  z-index: 2;
}

.experiences_block header {
  margin-bottom: 1.5rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.6rem;
}

.experiences_block header h2 {
  width: 29.5rem;
  margin: 0.5rem auto 0;
}

.experiences_block .experiences_wrap {
  position: relative;
}

.experiences_block .swiper-slide {
  text-align: center;
}

.experiences_block .swiper-slide img {
  width: 33.1rem;
}

.experiences_block .slide_arrow.-l {
  left: 1.5rem;
}

.experiences_block .slide_arrow.-r {
  right: 1.5rem;
}

/* interview_block
============================================================================================================ */
.interview_block {
  position: relative;
  padding: 4rem var(--base-padding) 5rem;
  z-index: 2;
}

.interview_block iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 0.8rem;
}

.interview_block section {
  text-align: center;
  margin-top: 4rem;
}

.interview_block .name {
  width: fit-content;
  margin: 2em auto 0;
  font-size: 1.4rem;
  font-weight: 400;
  padding: 0 1em;
  background-color: #fefae2;
}

.interview_block h3 {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.3rem;
  font-size: 1.6rem;
  border-bottom: 0.2rem solid;
}

.interview_block h3 span {
  font-size: 2.4rem;
}

/* search_block
============================================================================================================ */
.search_block {
  position: relative;
  padding: 4rem var(--base-padding) 5rem;
  background-color: var(--color-yellow);
}

.search_block h2 {
  margin-bottom: 3rem;
  font-size: 3rem;
  line-height: 1.5;
  text-align: center;
}

.search_block h2::before {
  content: "";
  display: block;
  width: 2.6rem;
  height: 3rem;
  margin: 0 auto 0.5rem;
  background: url(../img/search_ico.svg) no-repeat 50%;
  background-size: 100%;
}

.search_block dl {
  margin-top: 2rem;
  background-color: #fff;
}

.search_block dt {
  padding: 0.5rem;
  background-color: #f7f7f7;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

.search_block dd h3 {
  text-align: center;
  padding-bottom: 0.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
  border-bottom: 1px solid var(--color-base);
}

.search_block dd h3:nth-child(1) {
  margin-top: 2rem;
}

.search_block ul {
  padding: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}

.search_block ul li {
  width: calc((100% - 1rem) / 2);
}

.search_block ul a {
  position: relative;
  display: block;
  padding: 0.8rem 0 0.8rem 2.5rem;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.5rem;
  white-space: nowrap;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.search_block ul a::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 1rem);
  width: 2rem;
  height: 2rem;
  background: url(../img/btn-arrow-orange.svg) no-repeat 50%;
  background-size: 100%;
}

/* faq_block
============================================================================================================ */
.faq_block {
  position: relative;
  padding: 4rem var(--base-padding) 5rem;
}

.faq_block h2 {
  margin-bottom: 3rem;
  font-size: 3rem;
  line-height: 1.5;
  text-align: center;
}

.faq_block h2::before {
  content: "";
  display: block;
  width: 4.8rem;
  height: 3.4rem;
  margin: 0 auto 0.5rem;
  background: url(../img/faq_ico.svg) no-repeat 50%;
  background-size: 100%;
}

.faq_block .faq + .faq {
  margin-top: 3.5rem;
}

.faq_block .faq h3 {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 4.6rem;
  margin-bottom: 1rem;
  padding-left: 6rem;
  font-size: 1.6rem;
  line-height: 1.375;
}

.faq_block .faq h3::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4.6rem;
  height: 4.6rem;
  background-color: var(--bg-orange);
  border-radius: 100%;
  font-family: var(--font-family-en);
  font-size: 2.2rem;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0;
}

.faq_block .faq .a {
  position: relative;
  padding-left: 6rem;
}

.faq_block .faq .a::before {
  content: "A";
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4.6rem;
  height: 4.6rem;
  padding-bottom: 0.8%;
  border: 0.15rem solid var(--bg-orange);
  border-radius: 100%;
  font-family: var(--font-family-en);
  font-size: 2.2rem;
  color: var(--bg-orange);
  font-weight: 700;
  letter-spacing: 0;
}

.faq_block .faq .a p {
  padding: 1rem 1.5rem;
  background-color: #fefae2;
  font-size: 1.4rem;
  line-height: 1.8571428571;
}

/* case_block
============================================================================================================ */
.case_block {
  position: relative;
  background-color: #fefae2;
}
.case_block header {
  position: relative;
  padding: 4rem var(--base-padding) 5rem;
  background-color: var(--bg-orange);
  overflow: hidden;
}
.case_block header .en {
  display: inline-block;
  position: relative;
  z-index: 1;
  color: var(--color-white);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--color-base);
  padding: 0.5rem 2rem;
  background-color: var(--color-yellow);
  border-radius: 10rem;
}
.case_block header h2 {
  position: relative;
  z-index: 1;
  padding: 1rem;
  color: var(--color-white);
  border: 2px solid var(--color-white);
}
.case_block header svg {
  display: block;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  aspect-ratio: 1400/975;
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.case_block header .arrow-group path {
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: scaleY(0);
}
.case_block header.showed .arrow-group path {
  animation: growArrow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.case_block header.showed .arrow-group.arrow-left path {
  animation-delay: 0.5s;
}
.case_block header.showed .arrow-group.arrow-middle path {
  animation-delay: 0.7s;
}
.case_block header.showed .arrow-group.arrow-right path {
  animation-delay: 0.9s;
}
@keyframes growArrow {
  to {
    transform: scaleY(1);
  }
}
.case_block .content {
  padding: 1rem var(--base-padding) 3rem;
}
.case_block .content article:not(:last-child) {
  margin-bottom: 4rem;
}
.case_block .content h3 {
  margin-bottom: 2.5rem;
}
.case_block .content p {
  margin-bottom: 2rem;
}
.case_block .content .name {
  display: inline-block;
  position: relative;
  padding: 1rem 2rem;
  background: var(--color-yellow);
  margin-bottom: 0;
}
.case_block .content .name:after {
  position: absolute;
  bottom: -9px;
  right: calc(50% - 10px);
  width: 0;
  height: 0;
  content: "";
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: var(--color-yellow) transparent transparent transparent;
}
.case_block .content h3.case_1 {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 1rem;
}
.case_block .content h3.case_1 span:nth-child(2) {
  color: var(--color-orange);
  font-size: 6rem;
  line-height: 1;
  background: linear-gradient(to bottom, rgba(255, 233, 72, 0) 90%, rgb(255, 233, 72) 70%);
}
.case_block .content h3.case_1 span:nth-child(2) small {
  font-size: 3rem;
}
.case_block .content h3.case_2 {
  text-align: center;
}
.case_block .content h3.case_2 span {
  display: block;
}
.case_block .content h3.case_2 span.up {
  display: inline-block;
  color: var(--color-orange);
  font-size: 6rem;
  line-height: 1;
  margin: 0 1rem;
  background: linear-gradient(to bottom, rgba(255, 233, 72, 0) 90%, rgb(255, 233, 72) 70%);
}
.case_block .content h3.case_2 span.up small {
  font-size: 3rem;
}
.case_block .comment {
  position: relative;
  display: flex;
  align-items: center;
  padding: 2rem 1.5rem 2rem 1rem;
  background-color: var(--color-white);
  margin: 0 0 2rem;
}
.case_block .comment dt {
  flex: 0 0 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}
.case_block .comment dt img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
.case_block .comment dt span {
  margin-top: 8px;
  font-size: 1.1rem;
}
.case_block .comment dd {
  flex: 1;
  margin: 0;
  line-height: 1.6;
  font-size: 1rem;
}
.case_block .comment dd strong {
  display: block;
  font-size: 1.4rem;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.case_block .notes {
  margin-top: 1.7rem;
  font-size: 1.2rem;
  line-height: 1.6666666667;
  font-weight: 400;
}

/* page_container
============================================================================================================ */
.page_container {
  position: relative;
  z-index: 10;
}

.pc_nav,
.pc_bnr {
  display: none;
}

@media screen and (min-width: 1180px) {
  .pc_nav,
  .pc_bnr {
    position: fixed;
    display: block;
    width: calc((100% - var(--pc-width)) / 2);
  }
  .pc_nav {
    top: 6%;
    bottom: 6%;
    left: 0;
  }
  .pc_nav > * {
    max-width: 334px;
    width: 90%;
    margin: 0 auto;
  }
  .pc_nav ul {
    width: fit-content;
    position: absolute;
    right: 0;
    left: 0;
    top: 50%;
    margin: 0 auto;
    transform: translateY(-50%);
  }
  .pc_nav ul a {
    position: relative;
    display: block;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 0 8px 25px;
    text-decoration: none;
    letter-spacing: 0.05em;
  }
  .pc_nav ul a::after {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 10px);
    width: 20px;
    height: 20px;
    background: url(../img/btn-arrow-orange.svg) no-repeat 50%;
    background-size: 100%;
    transform: rotate(90deg);
    z-index: 2;
  }
  .pc_nav ul a::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 10px);
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    z-index: 1;
  }
}
@media screen and (min-width: 1180px) and (hover) {
  .pc_nav ul a:hover {
    text-decoration: underline;
  }
}
@media screen and (min-width: 1180px) {
  .pc_bnr {
    top: 50%;
    transform: translateY(-50%);
    right: 0;
  }
}
@media screen and (min-width: 1180px) {
  .pc_bnr > * {
    max-width: 280px;
    width: 90%;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1180px) {
  .pc_bnr .btn {
    margin-top: 20px;
  }
}
@media screen and (min-width: 1180px) {
  .pc_bnr .btn li {
    margin-top: 15px;
  }
}
@media screen and (min-width: 1180px) {
  .pc_bnr .box_btn {
    width: 100%;
    height: 60px;
    border-radius: 5px;
    font-size: 15px;
    padding-bottom: 5px;
  }
}
@media screen and (min-width: 1180px) {
  .pc_bnr .box_btn::before {
    left: 20px;
    top: calc(50% - 15px);
    width: 26px;
    height: 26px;
  }
}
@media screen and (min-width: 1180px) {
  .pc_bnr .box_btn::after {
    right: 15px;
    top: calc(50% - 13px);
    width: 20px;
    height: 20px;
  }
}
@media screen and (min-width: 1180px) {
  .pc_bnr .box_btn b {
    font-size: 16px;
  }
}
@media screen and (min-width: 1180px) {
  .sp_fix_bnr {
    display: none;
  }
}
@media screen and (max-width: 1179px) {
  .sp_fix_bnr {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: var(--pc-width);
    margin: 0 auto;
    transform: translateY(11rem);
    transition: transform 0.4s ease-out;
    z-index: 10;
  }
  #pagetop.show + .sp_fix_bnr {
    transform: translateY(0);
  }
  .sp_fix_bnr a {
    position: relative;
    display: block;
    height: 9rem;
    background-color: #2cb7ec;
    border-radius: 0.5rem 0.5rem 0 0;
    color: #fff;
    padding-left: 3rem;
    padding-top: 1rem;
    text-align: center;
    text-decoration: none;
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: bold;
  }
  .sp_fix_bnr a::after {
    content: "";
    position: absolute;
    right: 2rem;
    top: calc(50% - 1rem);
    width: 2rem;
    height: 2rem;
    background: url(../img/btn-arrow.svg) no-repeat 50%;
    background-size: 100%;
  }
  .sp_fix_bnr a span {
    display: block;
  }
  .sp_fix_bnr a .fukidashi {
    position: absolute;
    left: 1rem;
    top: -1.5rem;
    width: 8.6rem;
    pointer-events: none;
  }
  .sp_fix_bnr a .box {
    width: fit-content;
    margin: 0 auto 0.5rem;
    padding: 0.2em 1em;
    background-color: #fff;
    border-radius: 10rem;
    color: #2CB7EC;
    font-size: 1.2rem;
    letter-spacing: 0;
  }
  .sp_fix_bnr a strong {
    display: block;
    font-size: 2rem;
  }
  #contents {
    padding-bottom: 9rem;
  }
  #pagetop {
    bottom: 10rem;
  }
}
/* modal_contents
============================================================================================================ */
.modal_contents {
  position: fixed;
  top: 0;
  left: -9999em;
  width: 100%;
  bottom: 0;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  opacity: 0;
  padding: 7rem 0 4rem;
  transition: opacity 0.5s;
  pointer-events: none;
  z-index: 1500;
}

.modal_contents .modal_contents_in {
  position: relative;
  transform: translateY(100px);
  z-index: 3;
}

.modal_contents.show {
  pointer-events: auto;
  opacity: 1;
  left: 0;
}

.modal_contents.show .modal_contents_in {
  transition: transform 0.3s;
  transform: translateY(0);
}

.modal_contents .modal_contents_in {
  width: 34.5rem;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 0.5rem;
}

.modal_contents .contents {
  padding: 3rem var(--base-padding);
}

.modal_contents h3 {
  margin-bottom: 2rem;
  border-left: 0.4rem solid var(--bg-orange);
  padding-left: 1.2rem;
  font-size: 2rem;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.modal_contents dl {
  margin-top: 2.5rem;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5714285714;
}

.modal_contents dl dt {
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.modal_contents .more {
  margin: 2.5rem 0 1rem;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 400;
}

.modal_contents dl a,
.modal_contents .more a {
  color: var(--color-orange);
}

.modal_contents .close {
  position: absolute;
  top: -5rem;
  right: 0;
  width: 4rem;
  height: 4rem;
  background-color: rgba(64, 54, 51, 0.4);
  border-radius: 100%;
  cursor: pointer;
}

.modal_contents .close::before,
.modal_contents .close::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  left: 1rem;
  margin-top: -0.1rem;
  border-top: 0.2rem solid #fff;
  transform: rotate(45deg);
}

.modal_contents .close::after {
  transform: rotate(-45deg);
}

#overlay {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition: opacity 0.5s;
  opacity: 0;
  z-index: 1010;
}

#overlay.show {
  opacity: 1;
}

#overlay.showed {
  bottom: 0;
}

.powered-by-zoshindo {
  text-align: right;
  font-size: 1rem;
  margin-top: 1rem;
}
.powered-by-zoshindo img {
  max-width: min(50vw, 200px);
}

/* mov_show
============================================================================================================ */
@media screen {
  .mov_show.fadeup {
    opacity: 0;
    transform: translateY(50px);
  }
  .mov_show.fadeup.showed {
    transition: transform 0.6s cubic-bezier(0.5, 1, 0.89, 1), opacity 0.6s linear;
    opacity: 1;
    transform: translateY(0);
  }
}
/* new_open_202601 谷町天満橋校
============================================================================================================ */
.new_open_202601 {
  background-color: #026EB7;
}

.new_open_202601 .container {
  text-align: center;
  padding: 2rem var(--base-padding) 3rem;
}

.new_open_202601 .container a.tel {
  position: relative;
  display: block;
}

.new_open_202601 .container a.tel:before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent url(../img/new_open_202601_tel_number.webp) no-repeat center center;
  background-size: contain;
  transition: opacity var(--transition);
  opacity: 1;
}

@media (hover) {
  .new_open_202601 .container a.tel:hover:before {
    opacity: 0.7;
  }
}
.new_open_202601 .main_btn {
  background-color: transparent;
  margin: 0;
  padding-top: 0;
}

/* .new_open_202601 ul.notice {
	list-style-type: "※";
	padding-left: 1.5em;
	font-size: 1rem;
} */
/* ページ固有：高校
============================================================================================================ */
@media screen {
  #for_juniorhigh #main_title {
    opacity: 0;
    transition: opacity 0.5s linear;
  }
  #for_juniorhigh #main_title .back {
    z-index: 1;
  }
  #for_juniorhigh #main_title .back #line-1 > g,
  #for_juniorhigh #main_title .back #line-2 > g,
  #for_juniorhigh #main_title .back #line-3 > g,
  #for_juniorhigh #main_title .back #line-4 > g {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: 0 0;
    transition: transform 0.25s 1s cubic-bezier(0.33, 1, 0.68, 1);
  }
  #for_juniorhigh #main_title .back #line-1 > g {
    transform: translate(-300vw, 0);
  }
  #for_juniorhigh #main_title .back #line-2 > g {
    transform: translate(300vw, 0);
  }
  #for_juniorhigh #main_title .back #line-3 > g {
    transform: translate(-300vw, 0);
  }
  #for_juniorhigh #main_title .back #line-4 > g {
    transform: translate(300vw, 0);
  }
  #for_juniorhigh #main_title .back #arrow path {
    transform-box: fill-box;
    transform-origin: center bottom;
    transform: scaleY(0);
  }
  #for_juniorhigh #main_title .girl {
    position: relative;
    z-index: 5;
  }
  #for_juniorhigh #main_title .front {
    z-index: 10;
    height: 100%;
  }
  #for_juniorhigh #main_title .front #panel {
    opacity: 0;
    transform-box: fill-box;
  }
  #for_juniorhigh #main_title .front #panel {
    transform-origin: center bottom;
    transform: translateY(100px);
    transition: opacity 0.5s 0.6s linear, transform 0.5s 0.6s cubic-bezier(0.33, 1, 0.68, 1);
  }
  #for_juniorhigh #main_title .front #pencil > g {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center left;
    transform: translateX(-100vw);
    transition: opacity 0.25s 1.25s linear, transform 0.25s 1.25s cubic-bezier(0.33, 1, 0.68, 1);
  }
  #for_juniorhigh #main_title.start {
    opacity: 1;
  }
  #for_juniorhigh #main_title.start .back #line-1 > g,
  #for_juniorhigh #main_title.start .back #line-2 > g,
  #for_juniorhigh #main_title.start .back #line-3 > g,
  #for_juniorhigh #main_title.start .back #line-4 > g {
    animation: slideText 0.25s 1s cubic-bezier(0.33, 1, 0.68, 1) both;
  }
  #for_juniorhigh #main_title.start .back #arrow path {
    animation: growArrow 0.6s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
  #for_juniorhigh #main_title.start .front #panel {
    animation: slideInPanel 0.25s 1s cubic-bezier(0.33, 1, 0.68, 1) both;
  }
  #for_juniorhigh #main_title.start .front #pencil > g {
    opacity: 1;
    transform: translate(0, 0);
  }
  @keyframes slideText {
    to {
      opacity: 1;
      transform: translate(0, 0);
    }
  }
  @keyframes slideInPanel {
    to {
      opacity: 1;
      transform: translate(0, 0);
    }
  }
}

/* ページ固有：小学校
============================================================================================================ */
@media screen {
  #for_elementary #main_title {
    opacity: 0;
    transition: opacity 0.5s linear;
  }
  #for_elementary #main_title .balloon #if, #for_elementary #main_title .balloon #what, #for_elementary #main_title .balloon #lines, #for_elementary #main_title .balloon #question, #for_elementary #main_title .balloon #interest {
    opacity: 0;
  }
  #for_elementary #main_title .balloon #what {
    transform: translate(-40px, 15px);
  }
  #for_elementary #main_title .balloon #if {
    transform: translate(40px, -15px);
    transition-delay: 2s;
  }
  #for_elementary #main_title .balloon #interest {
    transform-origin: center;
    transform-box: fill-box;
    transform: scale(1.2);
  }
  #for_elementary #main_title .ribbon-orange {
    opacity: 0;
    transform: translate(-50vw, 0);
  }
  #for_elementary #main_title .ribbon-blue {
    opacity: 0;
    transform: translate(50vw, 0);
  }
  #for_elementary #main_title.start {
    opacity: 1;
  }
  #for_elementary #main_title.start .balloon #what {
    opacity: 1;
    transform: translate(0, 0);
    transition: opacity 0.5s 0.3s linear, transform 0.5s 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  }
  #for_elementary #main_title.start .balloon #lines {
    opacity: 1;
    transition: opacity 0.5s 0.6s linear;
  }
  #for_elementary #main_title.start .balloon #if {
    opacity: 1;
    transform: translate(0, 0);
    transition: opacity 0.5s 0.6s linear, transform 0.5s 0.6s cubic-bezier(0.33, 1, 0.68, 1);
  }
  #for_elementary #main_title.start .balloon #question {
    opacity: 1;
    transition: opacity 0.5s 0.9s linear;
  }
  #for_elementary #main_title.start .balloon #interest {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s 1.2s linear, transform 0.5s 1.2s cubic-bezier(0.33, 1, 0.68, 1);
  }
  #for_elementary #main_title.start .ribbon-orange,
  #for_elementary #main_title.start .ribbon-blue {
    opacity: 1;
    transform: translate(0, 0);
    transition: opacity 0.5s 1.2s linear, transform 0.5s 1.2s cubic-bezier(0.33, 1, 0.68, 1);
  }
}

/*# sourceMappingURL=style.css.map */