@charset "UTF-8";

/* common */
* { box-sizing:border-box; }
a { text-decoration:none; transition:all ease-out .4s; }
a:hover { opacity:.6; }
video { display:block; width:100%; height:auto; }

.grn1 { background:#3f9877; }
.grn2 { background:#43a07e; }

/* common parts */
.ribon {
  width:100%;
  position:relative;
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding: 7px 0;
  margin:0 auto;
  font-size: 18px;
  background: #43a07e;
  color: #FFF; 
  box-sizing: border-box;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}
.ribon:before,.ribon:after{
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}
.ribon:before{
  top: -2px;
  left: -2px;
  border-width: 32px 0px 32px 15px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}
.ribon:after {
  top: -2px;
  right: -2px;
  border-width: 32px 15px 32px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}
.ribon h2 {
  margin: 0;
  padding: 0 1em;
  border-top: dashed 2px rgba(255, 255, 255, 0.5);
  border-bottom: dashed 2px rgba(255, 255, 255, 0.5);
  line-height: 42px;
  font-weight: bold;
  letter-spacing:0.1em;
  font-size:24px;
}
.ribon h2 span { display:inline-block; margin-right:1em; }
.m-stripe.-bg-green { background-image:url(../img/bg_title_green_pc.jpg); background-color:#3f9877; }
.m-stripe.-has-triangle.-bg-green:after { border-color:#3F9877 transparent transparent transparent; }
.m-stripe.-bg-green h2 { color:#fff; }
.catchTx { text-align:center; margin:20px 0; font-size:16px; }
.catchTx .bold { font-weight:bold; }

.DL { display:flex; justify-content:center; width:100%; margin:30px auto; }
.DL li { height:60px; margin-right:30px; }
.DL li:last-child { margin-right:0; }
.DL li a {}
.DL li a img { height:100%; width:auto; }

.sp-only { display:none; }

/* header */
#gelp_h { position:fixed; top:0; left:50%; transform:translateX(-50%); background:#fff; z-index:9999; }
#gelp_h .spText,#gelp_h .spMenu { display:none; }
#gelp_h .headerWrap { display:flex; justify-content:space-between; width:100%; margin:8px 0 0; }
#gelp_h .headerWrap .logo { margin-right:auto; }
#gelp_h .headerWrap .gtecgelp_logo { display:block; margin-top:12px; }
#gelp_h .headerWrap .gtecgelp_logo img { display:block; max-width:340px; width:100%; }
#gelp_h ul { display:flex; flex-wrap:wrap; justify-content:flex-end; max-width:60%; }
#gelp_h ul li { font-size:14px; border-radius:8px; margin-right:10px; display:flex; justify-content:center; align-items:center; }
#gelp_h ul li a { color:#fff; display:block; text-align:center; line-height:1.2; font-weight:bold; padding:3px 2em; letter-spacing:1px; font-size:13px; }
#gelp_h .school { margin-right:24px; width:100%; justify-content:flex-end; }
#gelp_h .school a { font-weight:bold; color:#005fa4; position:relative; padding:0 1em 0 0; display:block; }
#gelp_h .school a:before {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  content: '\f105';
  font-family: FontAwesome;
}
#gelp_h .school a span { display:block; font-size:80%; }
/*
#gelp_h ul li.app { background:#007aff; }
#gelp_h ul li.google { background:#34A853; }
*/
#gelp_h ul li.app { margin-right:0; }
#gelp_h ul li.google { margin:15px; }
#gelp_h ul li.app a,#gelp_h ul li.google a { padding:0; }
#gelp_h ul li.app img ,#gelp_h ul li.google img { min-height:60px; height:100%; display:block; }
#gelp_h ul li.pcBtn { margin:15px 0 15px 0; }
#gelp_h ul li.pcBtn a {
  border:solid 2px #005fa4;
  color:#005fa4;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:8px;
}
#gelp_h ul li.pcBtn a:hover { background:#005fa4; color:#fff; }
#gelp_h ul li:last-child { margin-right:0; }

/* sp menu */
.spMenuBtn {
  display: none;
  width: 30px;
  cursor: pointer;
  z-index: 1001;
}
.spMenuBtn span {
  display: block;
  height: 3px;
  background: #005fa4;
  margin: 5px 0;
  transition: 0.3s;
}
.spMenuBtn.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.spMenuBtn.open span:nth-child(2) {
  opacity: 0;
}
.spMenuBtn.open span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

#mv { margin-top:130px; margin-bottom:50px; }
#mv .mvCap { text-align:right; font-size:12px; color:#999; margin:8px 0; line-height:1; }
#mv .mvWrap ,#lastcont .mvWrap{ position:relative; }
#mv .mvWrap .mvOver,#lastcont .mvWrap .mvOver {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:30%;
}
#mv .mvWrap .mvOver ul,#lastcont .mvWrap .mvOver ul {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  height:calc(100% - 40px);
  margin:20px 0;
}
#mv .mvWrap .mvOver .mvLogo,#lastcont .mvWrap .mvOver .mvLogo { order:2; width:55%; margin:-10px 0; }
#mv .mvWrap .mvOver .mvText,#lastcont .mvWrap .mvOver .mvText { order:1; color:#22ac38; font-size:28px; font-weight:bold; line-height:1.2; text-align:center;}
#mv .mvWrap .mvBtn,#lastcont .mvWrap .mvBtn { order:3; max-width:200px; width:100%; }
#mv .mvWrap .mvBtn a,#lastcont .mvWrap .mvBtn a {
  display:block;
  border:solid 2px #005fa4;
  color:#005fa4;
  border-radius:8px;
  padding:10px;
  text-align:center;
  font-weight: bold;
  letter-spacing:0.2em;
}
#mv .mvWrap .mvBtn a:hover,#lastcont .mvWrap .mvBtn a:hover { background:#005fa4; color:#fff; }

/* Not pcLogin */
#mv .mvWrap .mvOver .notLogin,#lastcont .mvWrap .mvOver .notLogin { justify-content:center; }
#mv .mvWrap .mvOver .notLogin .mvText,#lastcont .mvWrap .mvOver .notLogin .mvText { margin-bottom:20px; }

#point01 {  }
#point02,#point03,#point04,#teacher { margin-top:50px; }

#point02 .slider .slick-slide { margin-right:20px; }
#point02 .slider .slick-slide:last-child { margin-right:0; }
/*#point02 .slider video { width:100%; height:100%; object-fit:cover; pointer-events:none; }*/

#teacher {  }
#teacher .catchTx { margin-top:40px; }
#teacher .btn { margin:20px auto; max-width:200px; }
#teacher .btn a {
  display:block;
  padding:15px 0;
  background:#3F9877;
  color:#fff;
  text-align:center;
  height:100%;
  font-size:18px;
  letter-spacing:2px;
  border-radius:8px;
  position:relative;
}
#teacher .btn a:before{
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  content: '\f105';
  font-family: FontAwesome;
}

#teacher ul li a:before{
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  content: '\f105';
  font-family: FontAwesome;
}


#lastcont { margin-top:50px; }
#lastcont .capArea { margin:20px; }
#lastcont .capArea p { color:#999; font-size:12px; }

footer .o-footer-list { display:none; }

@media screen and (max-width:768px){
  
  /* header */
  #gelp_h { width:100%; padding:10px; height:50px; }
  #gelp_h .headerWrap { margin:0; }
  #gelp_h .logoArea { width:100%; display:flex; justify-content:space-between; }
  #gelp_h .logoArea .logo { display:flex; align-items:center; justify-content:space-between; width:80%; }
  #gelp_h .headerWrap .gtecgelp_logo { margin-top:0; max-width:185px; }
  #gelp_h ul li.app { margin:0; }
  #gelp_h ul li.google { margin:15px 0; }
  #gelp_h ul li.app a,#gelp_h ul li.google a { height:auto; }
  #gelp_h ul li.app img,#gelp_h ul li.google img{ width:200px; height:auto; }
  
  /* sp menu */
  #gelp_h .spMenuBtn { display:block; }
  #gelp_h .navMenu {
    flex-direction:column;
    background: #fff;
    padding: 15px;
    position: absolute;
    top:49px;
    left: 0;
    width: 100%;
    z-index: 1000;
    opacity:0;
    transform:translateY(-10px);
    pointer-events:none;
    transition:all .6s ease;
    max-width:100%;
  }
  #gelp_h .navMenu.active { opacity:1; transform:translateY(0); pointer-events:auto; }
  #gelp_h .navMenu li { width:100%; }
  #gelp_h .navMenu li:nth-of-type(n+2) { margin-top:10px; }
  #gelp_h ul li a,#gelp_h ul li.pcBtn a { width:100%; height:45px; padding:0; display:flex; justify-content:center; align-items:center; line-height:1.4; }
  #gelp_h .school a { padding:0; display:block; height:auto; text-align:left; }
  #gelp_h .school a span { display:inline-block;}
  
  #mv { margin-top:50px; }
  
  #mv .mvWrap .loginBtn,#lastcont .mvWrap .loginBtn { left:5%; }
  
}
@media screen and (max-width:767px){
  .m-stripe.-bg-green { background-image:url(../img/bg_title_green_sp.jpg); background-size:12px auto; }
}
@media screen and (max-width:600px){
  
  /* common parts */
  .ribon { height:104px; line-height:normal; width:95%; }
  .ribon h2 { font-size:16px; line-height:29px; }
  .ribon h2 span { display:block; margin-right:0; }
  .ribon:before { border-width:56px 0px 56px 15px; }
  .ribon:after { border-width:56px 15px 56px 0px; }
  
  .DL { margin:24px auto; }
  .DL li { height:48px; margin-right:24px; }
  .catchTx { margin:20px; font-size:14px; }
  
  .sp-only { display:block; }
  
  /* mv */
  #mv .mvWrap .mvOver { width:100%; height:auto; top:auto; right:0; }
  #mv .mvWrap .mvOver ul,#lastcont .mvWrap .mvOver ul { flex-direction:row; width:90%; margin:0 auto; }
  #mv .mvWrap .mvOver .mvLogo,#lastcont .mvWrap .mvOver .mvLogo { order:1; width:40%; }
  #mv .mvWrap .mvOver .mvText,#lastcont .mvWrap .mvOver .mvText { width:55%; }
  #mv .mvWrap .mvOver .mvText p,#lastcont .mvWrap .mvOver .mvText p { font-size:24px; }
  #mv .mvWrap .mvOver .mvText .mvBtn,#lastcont .mvWrap .mvOver .mvText .mvBtn { font-size:14px; margin-top:20px; }
  #mv .mvWrap .mvOver li.mvBtn,#lastcont .mvWrap .mvOver li.mvBtn { display:none; }
  
  /* Not pcLogin */
  #mv .mvWrap .mvOver .notLogin .mvText,#lastcont .mvWrap .mvOver .notLogin .mvText { margin-bottom:0; }
  
  #lastcont .mvWrap .mvOver { width:100%; height:auto; bottom:auto; right:0; }
  
  /* teacher */
  #teacher ul { display:block; width:90%; }
  #teacher ul li { width:100%!important; }
  #teacher ul li:first-child { margin-bottom:10px; }
  #teacher ul li:first-child a { padding:10px 0; }
  #teacher .teacherImg img { padding:0 10px; }
  
  #lastcont .capArea p { font-size:9px; }
  
}