@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: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_area { width: 100vw; display: block; margin: 0 auto; position: absolute; top: 10.5%; left: 8.5vw; z-index: 1; }
#hero .txt_area .title { width: 33.19%; }
#hero .txt_area p { font-size: .9vw; line-height: 1.86; margin: 2vw 0 0; }
#hero .txt_area small { display: block; font-size: 1.2rem; margin-top: 14vw; }
@media only screen and (max-width:1240px) {
    #hero img { width: 100%; }
}
@media screen and (max-width:1240px) {
    #hero .txt_area { left: 4vw; }
}
@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: 5.8vw 0 0; }
    #hero .txt_area small { font-size: 3.2vw; margin-top: 5.3vw; }
}

/* =========================================================
  #select
========================================================= */
#select { width: 100vw; }
#select .inner { margin: 0px auto; max-width: 940px; padding: 50px 0 0; display: flex; align-items: center; justify-content: center; }
#select .inner ul { display: flex; align-items: center; justify-content: space-between; max-width: 940px; width: 100%; }
#select .select_item { width: 50%; }
#select .select_item .img_area { width: 420px; height: 420px; border-radius: 50%; margin: 0 auto; }
#select .select_item .img_area.kodomo { background-color: #fdf7fb; border: 1px solid #fdf7fb; }
#select .select_item .img_area.otona { background-color: #fff9db; border: 1px solid #fff9db; }
#select .select_item .title { display: block; padding: 48px 0 0 0; margin: 0 auto; }
#select .select_item .select_img { display: block; }
#select .select_item .img_area.kodomo .select_img { margin: 50px auto 0; display: block; }
#select .select_item .img_area.otona .select_img { margin: 25px auto 0; 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:1280px) {
    #select .inner { width: 97vw; max-width: 1200px; }
    #select .inner ul { max-width: inherit; }
    #select .select_item .img_area { width: 40vw; height: 40vw; }
    #select .select_item .title { padding: 50px 0 0 0; width: 18vw; }
    #select .select_item .img_area.kodomo .select_img { margin: 50px auto 0; width: 14.22vw; }
    #select .select_item .img_area.otona .select_img { margin: 25px auto 0; width: 14.01vw; }
}
@media only screen and (max-width:768px) {
    #select { margin: 12vw auto 0; }
    #select .inner { width: 92vw; padding: 0 0; }
    #select .inner ul { display: block; }
    #select .select_item { width: 100%; }
    #select .select_item:last-child { margin-top: 16vw; }
    #select .select_item .img_area { width: 92vw; height: 92vw; }
    #select .select_item .title { padding: 10.6vw 0 0 0; width: 42.074vw; }
    #select .select_item .img_area.kodomo .select_img { margin: 11.52vw auto 0; width: 32.06vw; }
    #select .select_item .img_area.otona .select_img { margin: 5.33vw auto 0; width: 31.52vw; }
    #select .select_item p { font-size: 3.73vw; margin-top: 5vw; }
    #select .select_item .btn { width: 53.33vw; margin: 5vw auto 0; font-size: 3.73vw; }
}

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

@media only screen and (max-width:768px) {
    #htcheck {margin: 16vw auto 0; 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; }
}

/* =========================================================
  #banner_area
========================================================= */
#banner_area { background: #FFF; width: 100vw; margin: 80px auto 0; }
#banner_area .inner { margin: 0 auto; max-width: 1200px; }
#banner_area a img { display: block; }
#banner_area ul { display: flex; margin: 0 auto; justify-content: center; align-items: baseline; }
#banner_area ul li:nth-child(n+2) { margin: 0 0 0 20px; }
@media only screen and (max-width:768px) {
    #banner_area { width: 100vw; margin: 12vw auto 0; }
    #banner_area .inner { width: 92vw; max-width: inherit; }
    #banner_area a { display: block; margin: 0 auto; width: 100%; }
    #banner_area a img { display: block; margin: 0 auto; }
    #banner_area ul { display: block; }
    #banner_area ul li { margin: 0 auto; width: 72.53vw; }
    #banner_area ul li:nth-child(n+2) { margin: 5.3vw auto 0; }
}