@charset "UTF-8";

/*---------------------------
  全体設定
---------------------------*/
h2 span { padding: 0; }
.en { font-family: "EB Garamond", serif; font-weight: 400; }
.kids_class { font-family: "Kiwi Maru", serif; font-weight: 400; }

.num {
  margin: 0 5px;
  font-size: 260%;
  vertical-align: sub; 
}

/*---------------------------
  トップビジュアル
---------------------------*/
.intro {
  margin: 0 auto;
  padding: 5em 0;
  text-align: center;
  background-color: hsla(205.10869565217394, 90%, 60%, 1);
  background-image: radial-gradient(circle at 5% 10%, hsla(220.38461538461536, 83%, 48%, 1) 7%, transparent 84%), radial-gradient(circle at 6% 91%, hsla(205.05494505494508, 90%, 60%, 1) 6.900642140302066%, transparent 68%), radial-gradient(circle at 94% 10%, hsla(205.05494505494508, 90%, 60%, 1) 7.18531813063063%, transparent 74%), radial-gradient(circle at 93% 90%, hsla(220.38461538461536, 83%, 48%, 1) 7.1575973664381305%, transparent 85%);
  background-blend-mode: normal, normal, normal, normal;
}

.heading p {
  display: block;
  font-size: 3.6rem;
  font-weight: bold;
  text-align: center;
  color: #FFF;
}

.heading p span {
  padding-bottom: 10px;
  border-bottom: #FFF 3px solid;
}

.heading img {
  width: 100%;
  max-width: 980px;
}

/*---------------------------
  学年選択
---------------------------*/
select { appearance: none; }

.grade_select p {
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  color: #FFF;
}

.select-box {
  position: relative;
  width: 260px;
  margin: 20px auto 0 auto;
  background-color: #FFF;
}

.grade_list {
  position: relative;
  width: 100%;
  padding: 15px;
  font-size: 1.8rem;
  text-align: center;
  border: none;
  z-index: 0;
  color: #1458e4;
}

.select-box::before {
  position: absolute;
  top: 50%;
  right: 10px;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 5px 0 5px;
  border-color: #1458e4 transparent transparent transparent;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

/*---------------------------
  各学年エリア
---------------------------*/
.stepup {
  position: relative;
  padding: 0 0 250px 0;
  background-image: linear-gradient(to bottom, #FFF 20%, #e0e0e0);
  z-index: 0;
}

.stepup.sho6 { padding-top: 80px; }

.stepup::after {
  position: absolute;
  content: '';
  left: 50%;
  bottom: 0;
  display: block;
  width: 100%;
  height: 0;
  margin: 0 auto;
  padding-top: 250px;
  background:url(../../images/grade/steps.png) no-repeat center bottom;
  background-size: cover;
  object-fit: contain;
  transform: translateX(-50%);
  z-index: 1;
}

.stepup .grade h2 {
  font-size: 3.6rem;
  text-align: center;
  color: #b3b3b3;
}

.stepup.kids .grade h2 { margin-bottom: 60px; }

.stepup .grade h2 .kids_class {
  margin: 0 5px;
  font-size: 4.2rem;
  text-align: center;
  color: #f7931e;
}

.stepup .grade {
  max-width: 1100px;
  margin: 0 auto;
}

/* 4カラム設定 */
.stepup .outline {
  position: relative;
  display: grid;
  grid-template-columns: 330px 200px 270px;
  grid-template-rows: auto;
  column-gap: 40px;
  margin-top: 20px;
  justify-content: center;
}

.stepup .outline h3 {
  font-size: 2.4rem;
  margin-bottom: 20px;
}

/* ポイント */
.stepup .point::before,
.stepup .point::after {
  position: absolute;
  content: '';
  width: 30%;
  display: inline-block;
  top: 50%;
  border-top: #b3b3b3 1px solid;
  vertical-align: middle;
  transform: translateY(-50%);
}

.stepup .point::before { left: 0; }
.stepup .point::after { right: 0; }

.stepup .point {
  position: relative;
  margin: 10px auto 0 auto;
  font-size: 3.2rem;
  text-align: center;
  color: #b3b3b3;
}

.stepup .point_list li::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  vertical-align: sub;
}

.stepup.sho6 .point_list li::before {
  background:url(../../images/grade/icon_check01.png) no-repeat;
  background-size: contain;
}

.stepup.sho5 .point_list li::before {
  background:url(../../images/grade/icon_check02.png) no-repeat;
  background-size: contain;
}

.stepup .point_list li {
  margin-top: 5px;
  font-weight: bold;
}

/* 詳細を見る */
.stepup .outline .more {
  grid-column-start: 1;
  grid-row-start: 2;
}

.stepup .outline .more a {
  display: block;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  background-color: #FFF;
  border-radius: 100vh;
  box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.1);
}

.stepup .outline .more a:hover { opacity: 1; }

/* 人物画像 */
.stepup .outline img {
  position: relative;
  width: 100%;
  margin: 0 auto;
  top: 110px;
  z-index: 5;
  grid-row: span 2 / span 2;
  grid-column-start: 2;
  grid-row-start: 1;
}

/* アイコン設定 */
.stepup .item_list {
  display: grid;
  align-items: end;
  margin-bottom: 40px;
  grid-row: span 2 / span 2;
  grid-column-start: 3;
  grid-row-start: 1;
}

.stepup .item_list ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.stepup .item_list ul li.juken::before { background-image: url(../../images/grade/icon_juken.png);}
.stepup .item_list ul li.ssst::before { background-image: url(../../images/grade/icon_ssst.png);}
.stepup .item_list ul li.tf::before { background-image: url(../../images/grade/icon_tf.png);}
.stepup .item_list ul li.sainankan::before { background-image: url(../../images/grade/icon_sainankan_course.png);}
.stepup .item_list ul li.test::before { background-image: url(../../images/grade/icon_test.png);}
.stepup .item_list ul li.subject::before { background-image: url(../../images/grade/icon_subject.png);}
.stepup .item_list ul li.course::before { background-image: url(../../images/grade/icon_course.png);}
.stepup .item_list ul li.kids::before { background-image: url(../../images/grade/icon_kids_class.png);}
.stepup .item_list ul li.nensho::before { background-image: url(../../images/grade/icon_kids_nensho.png);}
.stepup .item_list ul li.nenchu::before { background-image: url(../../images/grade/icon_kids_nenchu.png);}
.stepup .item_list ul li.nencho::before { background-image: url(../../images/grade/icon_kids_nencho.png);}

.stepup .item_list ul li.icon::before {
  content: '';
  display: block;
  width: 70px;
  height: 70px;
  margin: 0 auto 10px auto;
  border-radius: 100vh;
  background-size: contain;
}

.stepup .item_list ul li {
  margin-bottom: 20px;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
}

/* カラー設定 */
.stepup.sho6 .grade h2 .num, .stepup.sho6 .outline .more a { color: #957aac; }
.stepup.sho5 .grade h2 .num, .stepup.sho5 .outline .more a { color: #8cc63f; }
.stepup.sho4 .grade h2 .num, .stepup.sho4 .outline .more a { color: #ff6633; }
.stepup.sho3 .grade h2 .num, .stepup.sho3 .outline .more a { color: #c7a97e; }
.stepup.sho2 .grade h2 .num, .stepup.sho2 .outline .more a { color: #35a1ca; }
.stepup.sho1 .grade h2 .num, .stepup.sho1 .outline .more a { color: #ec809b; }
.stepup.kids .grade h2 .num, .stepup.kids .outline .more a { color: #f7931e; }

.stepup.sho4 .outline h3 { color: #ff6633; }
.stepup.sho3 .outline h3 { color: #c7a97e; }
.stepup.sho2 .outline h3 { color: #35a1ca; }
.stepup.sho1 .outline h3 { color: #ec809b; }
.stepup.kids .outline h3 { color: #f7931e; }

.stepup.sho6  .outline .more a:hover { box-shadow: 0 0 0 2px #957aac; }
.stepup.sho5 .outline .more a:hover { box-shadow: 0 0 0 2px #8cc63f; }
.stepup.sho4 .outline .more a:hover { box-shadow: 0 0 0 2px #ff6633; }
.stepup.sho3 .outline .more a:hover { box-shadow: 0 0 0 2px #c7a97e; }
.stepup.sho2 .outline .more a:hover { box-shadow: 0 0 0 2px #35a1ca; }
.stepup.sho1 .outline .more a:hover { box-shadow: 0 0 0 2px #ec809b; }
.stepup.kids .outline .more a:hover { box-shadow: 0 0 0 2px #f7931e; }

.stepup.sho6 .item_list ul li::before { background-color: #957aac; }
.stepup.sho5 .item_list ul li::before { background-color: #8cc63f; }
.stepup.sho4 .item_list ul li::before { background-color: #ff6633; }
.stepup.sho3 .item_list ul li::before { background-color: #c7a97e; }
.stepup.sho2 .item_list ul li::before { background-color: #35a1ca; }
.stepup.sho1 .item_list ul li::before { background-color: #ec809b; }
.stepup.kids .item_list ul li::before { background-color: #f7931e; }

/*---------------------------------------------*/
@media screen and (max-width: 1100px) {
/*---------------------------------------------*/
body { width: 1100px;}
}

/*---------------------------------------------*/
@media screen and (max-width: 768px) {
/*---------------------------------------------*/
body { width: 100%;}
.pc_only { display: block!important; }
.sp_only { display: none!important; }

/* トップビジュアル */
.intro { padding: 4em 0; }
.heading p { font-size: 2.8rem; padding-bottom: 20px;  }
.heading img { max-width: 90%; }

/* 学年選択 */
.grade_select { margin-top: 1em; }

.select-box {
  width: 50%;
  margin: 1em auto 0 auto;
}

/* 各学年エリア */
.stepup {
  display: block;
  padding: 0 5% 120px 5%;
  background-image: linear-gradient(to bottom, #FFF 5%, #e0e0e0);
}

.stepup::after { padding-top: 220px; }
.stepup .grade { margin-top: -50px; }
.stepup.kids .grade { margin-top: -30px; }
.stepup.sho6 .grade { margin-top: 0; }
.stepup.sho6 { padding-top: 20px; }
.stepup .grade h2 { font-size: 2.8rem; }
.stepup.kids .grade h2 { margin-bottom: 30px; }
.stepup .grade h2 .kids_class { font-size: 3.6rem; }
.stepup .point { margin-top: 1em; }

/* 4カラム設定 */
.stepup .outline {
  column-gap: 20px;
  margin-top: 0;
  order: 1;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: auto;
}

.stepup .outline h3 {
  font-size: 2.2rem;
  text-align: center;
}

/* ポイント */
.stepup .point_list {
  display: table;
  margin: 0 auto;
  text-align: center;
}

.stepup .point_list li { margin-top: 0.4em; }

/* 詳細を見る */
.stepup .outline .more {
  grid-column-start: 1;
  grid-row-start: 3;
}

.stepup .outline .more a {
  width: 50%;
  margin: 2em auto 3em auto;
  padding: 10px;
}

.stepup .outline .more a { margin: 0 auto 3em auto; }

/* 人物画像 */
.stepup .outline img {
  width: 40%;
  top: 0;
  grid-row: 1;
  grid-column-start: 1;
  grid-row-start: 4;
}

.stepup.sho4 .outline img { top: -40px; }
.stepup.sho4 { padding-bottom: 80px; }
.stepup.sho3 .outline img { top: -20px; }
.stepup.sho3 { padding-bottom: 90px; }
.stepup.sho2 .outline img, .stepup.sho1 .outline img, .stepup.kids .outline img { top: -70px; }
.stepup.sho2, .stepup.sho1, .stepup.kids { padding-bottom: 50px; }

/* アイコン設定 */
.stepup .item_list {
  width: 100%;
  margin: 2em auto;
  border-radius: 1em;
  grid-row: 1;
  grid-column-start: 1;
  grid-row-start: 2;
}

.stepup .item_list ul { grid-template-columns: repeat(auto-fit, minmax(min(100%, 70px), 1fr)); }
.stepup .item_list ul li { margin-bottom: 0; }

.stepup.sho6 .outline .more a { box-shadow: 0 0 0 2px #957aac; }
.stepup.sho5 .outline .more a { box-shadow: 0 0 0 2px #8cc63f; }
.stepup.sho4 .outline .more a { box-shadow: 0 0 0 2px #ff6633; }
.stepup.sho3 .outline .more a { box-shadow: 0 0 0 2px #c7a97e; }
.stepup.sho2 .outline .more a { box-shadow: 0 0 0 2px #35a1ca; }
.stepup.sho1 .outline .more a { box-shadow: 0 0 0 2px #ec809b; }
.stepup.kids .outline .more a { box-shadow: 0 0 0 2px #f7931e; }

}

/*---------------------------------------------*/
@media screen and (max-width: 640px) {
/*---------------------------------------------*/
.pc_only { display: none!important; }
.sp_only { display: block!important; }

/* トップビジュアル */
.heading img { max-width: 100%; }

/* 学年選択 */
.grade_select { margin-top: 0; }
.select-box { width: 80%; }

/* 各学年エリア */
.stepup .outline .more a { width: 60%; }
.stepup .item_list ul { grid-template-columns: repeat(auto-fit, minmax(min(100%, 50px), 1fr)); }

.stepup .item_list ul li.icon::before {
  width: 50px;
  height: 50px;
}

}