@charset "utf-8";

#app {display: flex; flex-direction: column; flex-wrap: nowrap; min-height: 100vh; padding-bottom:4vh; }
#header { position:relative; z-index:10; top:0; width:100%; }
#container { width:100%; height:auto; background:#fff;  }

.wrap { width:100%; margin:0 auto; padding:2vw; }
#header .wrap { display: flex; flex-direction: row; align-items: center; padding-top:0; }
@media (max-width: 1024px) and (orientation: portrait) {
    .wrap { padding:3vw; }
    #header .wrap { padding-top:1vw; }
}
h1.logo { width: 16vw; }
h1.logo .logo_img { width: 100%; }
h1.logo .logo_img img { width: 100%; }
.user_stat { display: flex; flex-direction: row; align-items:center; margin-left: auto; }
.user_stat .info { display: inline-block; font-size: 1vw}
.user_stat button { display: inline-block; margin-left:0.5rem; }
.user_stat button.btn_login,
.user_stat button.btn_logout { padding:0.5vw 1vw; background:#3492d8; color:#fff; font-size:1vw; border-radius:0.2rem;}

section.s1 { margin-bottom: 7vw; text-align: center; }
section.s1 .top_slogan {}
section.s1 .top_slogan p { font-weight: 600;  font-size: 4vw; }
section.s1 .top_slogan p.small { font-weight: 100; font-size: 2.5vw; }
.btn_home { background:#226e9d; color:#fff; font-size: 1.5vw;  font-weight: 600; padding:1vw 2.5vw; margin-top:1.5vw; box-shadow: 1vw 1vw 0 rgba(0,0,0,0.1)}
.btn_home:hover { background: #125D8C }
@media (max-width: 1024px) and (orientation: portrait) {
    section.s1 { margin-bottom:14vw;}
    section.s1 .top_slogan {}
    section.s1 .top_slogan p { font-size:7vw; }
    section.s1 .top_slogan p.small { font-size:4vw; }
    .btn_home {font-size: 2.5vw; padding:2vw 4vw; margin-top:3vw; }
}

section.s2 { display: flex; flex-direction: row; justify-content: space-around;}
section.s2 > .redi_article { position:relative; flex:1; background:#efefef; padding:2.5vw; color:#fff; display: flex; flex-direction: column; box-shadow:5px 5px 5px rgba(0,0,0,0.1); }
section.s2 > .redi_article div.top { position: relative; z-index: 1; margin-bottom: 1.5vw;}
section.s2 > .redi_article div.top > a { position: relative; display: block; font-size: 1.2vw; color:#fff;  font-weight: 100; }
section.s2 > .redi_article+.redi_article { margin-left: 1vw; }
section.s2 > .redi_article.a1 { background-color:#359dce; }
section.s2 > .redi_article.a2 { background-color:#3e8be2; }
section.s2 > .redi_article.a3 { background-color:#357dce; }
section.s2 > .redi_article.a4 { background-color:#1766be; }
section.s2 > .redi_article.a5 { background-color:#1390cb; }
section.s2 > .redi_article::before { content: ''; position: absolute; right:0; bottom: 10%; width: 50%; height:50%; background: url('/resources/images/front/intro/ic_flower.svg') no-repeat center center; background-size:contain; opacity: .1}
section.s2 > .redi_article.a1::before {}
section.s2 > .redi_article.a2::before {background: url('/resources/images/front/intro/ic_comm.svg') no-repeat center center; }
section.s2 > .redi_article.a3::before {background: url('/resources/images/front/intro/ic_house.svg') no-repeat center center; }
section.s2 > .redi_article.a4::before {background: url('/resources/images/front/intro/ic_book.svg') no-repeat center center; }
.redi_article h1 > p { font-size:2.5vw;  margin-bottom: 0.5vw }
.redi_article h1 > p.big { font-weight: 100; line-height: 3vw;}
.redi_article h1 > p.big span { display: block; font-weight: 600; }
.redi_article h1 > p.small { font-size: 0.6vw; color:rgba(0,0,0,0.3)}
.redi_article h1 > p.small span { display: block; }

.select_program { margin-top:auto;}
.btn_select_submit { position:relative; width: 100%; background: rgba(0,0,0,0.3); color:#fff; font-size: 1vw;  padding:0.5vw 1vw; margin-top:1vw; border-radius: 1vw; z-index: 1; font-weight: 300;}
section.s2 .redi_article.a1 .btn_select_submit { background-color:#256E90; }
section.s2 .redi_article.a2 .btn_select_submit { background-color:#2B619E; }
section.s2 .redi_article.a3 .btn_select_submit { background-color:#255790; }
section.s2 .redi_article.a4 .btn_select_submit { background-color:#104785; }

@media (max-width: 1024px) and (orientation: portrait) {
     h1.logo { width: 10rem;}
    section.s2 { flex-wrap: wrap}
    section.s2 > .redi_article {flex: inherit; flex-basis: calc(50% - 1vw); margin-bottom: 1vw; padding: 4vw; }
    section.s2 > .redi_article div.top {margin-bottom: 3vw; }
    section.s2 > .redi_article div.top > a { font-size: 2.5vw;  }
    section.s2 > .redi_article+.redi_article { margin-left:inherit; }
    .redi_article h1 > p { font-size:5vw; margin-bottom:1.5vw;}
    .redi_article h1 > p.big { line-height:5.5vw; }
    .redi_article h1 > p.small { font-size: 1.5vw; }
    .btn_select_submit { font-size:2vw;  padding:1vw 2vw; margin-top:2vw; border-radius: 2vw; }
}
@media (max-width: 480px) {  
    h1.logo { width: 8rem;}
    .user_stat .info { font-size: 0.7rem}
    .user_stat button { margin-left:0.5rem; }
    .user_stat button.btn_login,
    .user_stat button.btn_logout { padding:0.2rem 0.4rem; font-size:0.7rem; }
    section.s2 > .redi_article { flex-direction: row;  flex-basis: 100%; margin-bottom: 3vw; overflow: hidden; }
    section.s2 > .redi_article::before {bottom:inherit; top:10%; right:-10%;}
    .select_program {  margin-left:auto;} 
}

@media (min-width: 1400px) {
    .wrap { max-width: 1551px; margin:0 auto; padding:2rem; }
    #header .wrap { padding-top:0.5rem; }
    h1.logo { width: 16rem;}
    .user_stat .info { font-size: 1rem}
    .user_stat button { margin-left:1rem; }
    .user_stat button.btn_login,
    .user_stat button.btn_logout { padding:0.5rem 1rem;font-size:1rem; border-radius:0.2rem;}
    section.s1 { margin-bottom: 7rem;}
    section.s1 .top_slogan p { font-size: 4rem; }
    section.s1 .top_slogan p.small { font-size: 2.5rem; }
    .btn_home { font-size: 1.5rem;  padding:1rem 2.5rem; margin-top:1.5rem; box-shadow: 1rem 1rem 0 rgba(0,0,0,0.1)}
    section.s2 .redi_article {padding:2.5rem;}
    section.s2 > .redi_article div.top {margin-bottom: 1.5rem;}
    section.s2 > .redi_article div.top > a { font-size: 1.2rem; }
    .redi_article h1 > p { font-size:2.3rem;  margin-bottom: 0.5Rem }
    .redi_article h1 > p.big { line-height: 2.7rem;}
    .redi_article h1 > p.small { font-size: 0.7rem;  margin-bottom:0; }
    .btn_select_submit { font-size:1rem;  padding:0.5rem 1rem; margin-top:1rem; border-radius: 1rem; }
}