@charset "UTF-8";

/* =========================================================
    body
========================================================= */
main { width: 100vw; font-family: "ヒラギノ角ゴ Pro W7", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; position: relative; z-index: 1; }
.body__home { background: #FFF; }
#wrap { display: block; position: relative; overflow: hidden; padding: 100px 0 0; }
@media only screen and (max-width:1280px) {
    #wrap { padding: 60px 0 0 0; }
}
@media only screen and (max-width:768px) {
    #wrap { padding: 60px 0 0 0; }
}

/* =========================================================
 #content
========================================================= */
#content { width: 100vw; line-height: 1.6; margin: 0 auto 0; padding: 100px 0; background: #FFF; }
#content .inner { margin: 0 auto; overflow: hidden; max-width: 1240px; }
@media only screen and (max-width:1240px) {
    #content { width: 100vw; }
    #content .inner { width: 95%; }
}
@media only screen and (max-width:768px) {
    #content { margin: 0 auto 0; padding: 10.6vw 0 13vw; }
    #content .inner { width: 90%; }
}

/* =========================================================
    #hero
========================================================= */
#hero { padding-top: 0; position: relative; }
#hero .kv { width: 100%; }
#hero .txt_banner_inner{position: absolute; width: 83vw; margin: 3vw auto 0; top: 0; left: 50%; transform: translateY(0) translateX(-50%);display: flex;}
#hero .txt_area { width: 100vw; display: block; margin: 0 auto;z-index: 1; }
#hero .txt_area .title { width:27.846vw; }
#hero .txt_area p { font-size: .9vw; line-height: 1.86; margin: 2vw 0 0;text-align: justify; }
#hero .txt_area small { display: block; font-size: 1.2rem; margin-top: 14vw; }
.banner_area li + li{margin: 10px 0 0 0;}
.banner_area a {width: 15vw; display: block; }
.banner_area a img{width: 100%; display: block;}

@media only screen and (max-width:1240px) {
    #hero img { width: 100%; }
}
@media screen and (max-width:1240px) {
    #hero .txt_area { left: 4vw; }
}
@media screen and (max-width:1280px) {
#hero .txt_banner_inner {margin: 2.5vw auto 0;}
}

@media only screen and (max-width:768px) {
    #hero { padding-top: 0; }
    #hero .txt_area { width: 92vw; top: 8vw; left: 0; right: 0; }
    #hero .txt_area .title { width: 82.84vw; }
    #hero .txt_area p { font-size: 3.4vw; margin:4.8vw 0 0; line-height: 1.6;}
    #hero .txt_area p.kansyuu{margin: 3vw 0 0;}
    #hero .txt_area small { font-size: 3.2vw; margin-top: 5.3vw;line-height:1.5; }
    #hero .txt_banner_inner{ width: 100%; margin: 8vw auto 0; top: 0; left: 50%; transform: translateY(0) translateX(-50%);display: block;}
    .banner_area li + li{margin: 0 0 0 0;}
    .banner_area a {width: 100%; display: block; }
    .banner_area a img{width: 100%;}
    .banner_area{width: 92vw; margin: 62.33vw auto 0; }
    .banner_area ul{ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2.666vw;grid-column-gap: 2.666vw; grid-row-gap: 0px; }    
    .banner_area li:nth-last-of-type(1){ grid-area: 2 / 3 / 3 / 4; }
    .banner_area li:nth-last-of-type(2){ grid-area: 2 / 2 / 3 / 3; }
    .banner_area li:nth-last-of-type(3){ grid-area: 2 / 1 / 3 / 2; }
    .banner_area li:nth-last-of-type(4){ grid-area: 1 / 1 / 2 / 4; }
}

/* =========================================================
  #select
========================================================= */
#select { width: 100vw; }
#select .inner { margin: 0px auto; padding: 0; display: flex; align-items: center; justify-content: center; }
#select .inner ul { display: flex; align-items: center; justify-content: space-between; width: 100%;align-items: stretch; }
#select .select_item { width: 50%;border: none; }
#select .select_item.kodomo { background-color: #fdf7fb; }
#select .select_item.otona { background-color: #fff9db; }
#select .select_item .txt_box{margin:0 35px 30px 35px;}
#select .select_item .title { display: block; padding: 48px 0 0 0; margin: 0 auto; }
#select .select_item .select_img { display: block; }
#select .select_item p { margin-top: 20px; text-align: center; line-height: 1.86; font-size: 1.4rem; }
#select .select_item .btn { width: 200px; border-radius: 50px; background-color: #fff; display: flex; align-items: center; margin: 20px auto 0; font-size: 1.4rem; }
#select .select_item .btn.kodomo { border: solid 1px #ff7a67; color: #ff7a67; }
#select .select_item .btn.otona { border: solid 1px #f09b27; color: #f09b27; }
#select .select_item .btn.kodomo:hover{ border: solid 1px #ff7a67; color: #ff7a67; background:#fdf7fb;}
#select .select_item .btn.otona:hover{ border: solid 1px #f09b27; color: #f09b27; background: #fff9db;}
@media screen and (max-width:1024px) {
    #select .select_item.kodomo .title{width: 28.125vw;}
    #select .select_item.otona .title{width: 25.78vw;}
    #select .select_item .inner{padding: 0 20px;} 
    #select .select_item.kodomo img.pict:nth-of-type(1){width: 4.875vw;}
    #select .select_item.kodomo img.pict:nth-of-type(2){width: 5.91vw;}
    #select .select_item.otona img.pict:nth-of-type(1){width: 4.94vw;}
    #select .select_item.otona img.pict:nth-of-type(2){width: 3.75vw;}
}
@media only screen and (max-width:768px) {
    #select { margin: 0 auto 0; }
    #select .inner { width: 100%; padding: 0 0;display: block; }
    #select .select_item .inner{width: 92vw; display: flex;align-items: center;justify-content: space-between;padding: 0;}
    #select .inner ul { display: block; }
    #select .select_item .txt_box{margin:0 0;}
    #select .select_item { width: 100%; }
    #select .select_item .title { padding: 8vw 0 0 0; width: 42.074vw; }
    #select .select_item p { font-size: 3.2vw; margin-top: 5vw; }
    #select .select_item .btn { width: 53.33vw; margin: 5vw auto 8vw; font-size: 3.73vw; }
    #select .select_item.kodomo .title{width: 57.6vw;}
    #select .select_item.otona .title{width: 52.8vw;}
    #select .select_item.kodomo img.pict:nth-of-type(1){width: 10.67vw;margin-top: 7.93vw;}
    #select .select_item.kodomo img.pict:nth-of-type(2){width: 12.944vw;margin-top: 7.93vw;}
    #select .select_item.otona img.pict:nth-of-type(1){width: 11.56vw;margin-top: 1.33vw;}
    #select .select_item.otona img.pict:nth-of-type(2){width: 8.77vw;margin-top: 1.33vw;}
    #select .select_item .btn.kodomo:hover{ border: solid 1px #ff7a67; color: #ff7a67; background:#fff;}
    #select .select_item .btn.otona:hover{ border: solid 1px #f09b27; color: #f09b27; background: #fff;}
}

/* =========================================================
  #grow_curve iframe
========================================================= */
#grow_curve { margin: 40px auto 0; position: relative; scroll-margin-top: 100px; }
#grow_curve iframe { width: 100%; height: 1140px; overflow-y:scroll;}
@media only screen and (max-width:768px) {
    #grow_curve { margin: 0 auto 0; }
   #grow_curve .inner { width: 100%; margin-top: 24vw; }
   #grow_curve iframe { height: 226vw; }
}

/* =========================================================
  #htcheck
========================================================= */
#htcheck { position:relative; margin: 40px auto 0; scroll-margin-top: 100px;}
#htcheck iframe { width: 100%; overflow-y:scroll;}

@media only screen and (max-width:768px) {
    #htcheck {margin: 0 auto -1px; scroll-margin-top: 16vw; }
}

/* =========================================================
  #news
========================================================= */
#news { width: 100vw; margin: 80px auto 0; }
#news .inner { margin: 0px auto; max-width: 1000px; display: flex; align-items: flex-start; justify-content: space-between; }
#news .title { background-color: #EBF9FE; border-radius: 10px; width: 200px; height: 100px; display: flex; align-items: center; justify-content: center; }
#news ul { width: calc(100% - 270px); }
#news ul li + li { border-top: 1px solid #e5e5e5; padding-top: 20px; margin-top: 20px }
#news ul li a { color: #000; font-size: 1.4rem; line-height: 1; display: flex; align-items: baseline; justify-content: center; }
#news ul li time { display: block; width: 90px; }
#news ul li p { margin: 0 0 0 20px; width: 650px; line-height: 1.7; display: block; }
@media screen and (max-width:1240px) {
    #news .inner { width: 97vw; }
}
@media only screen and (max-width:768px) {
    #news { width: 100vw; margin: 16vw auto 0; }
    #news .inner { width: 92vw; padding: 0 0; display: block; }
    #news .title { background-color: #FFF; border-radius: 0; width: auto; height: auto; }
    #news .title img { width: 24.96vw; }
    #news ul { width: 100%; margin-top: 10.66vw; }
    #news ul li + li { padding-top: 4vw; margin-top: 2.66vw }
    #news ul li a { display: block; }
    #news ul li time { display: block; width: auto; font-size: 3.44vw; }
    #news ul li p { margin: 0 auto; width: auto; font-size: 3.73vw; margin-top: 2vw; line-height: 1.86; }
}