@charset "UTF-8";
.ttl-top-style {
 margin-bottom: 20px;
 font-size: 1.8rem;
}

@media print, screen and (min-width: 768px) {
.ttl-top-style {
 font-size: 2.2rem;
 margin-bottom: 40px;
}
}
/* =====================================================================

topHero

====================================================================== */
#topHero {
 height: 100vh;
 background: #000;
 text-align: center;
 position: relative;
}
.hero-cts {
 position: absolute;
 top: 50%;
 left: 0;
 right: 0;
 color: #fff;
 transform: translateY(-50%)
}
.txt-hero {
 width: 200px;
 height: auto;
}
.lead-hero {
 font-size: 1.8rem;
 font-weight: bold;
 margin-top: 0.5em;
 letter-spacing: 0.15em;
 text-shadow: 1px 1px 2px #000;
}
.arrow-hero {
 position: absolute;
 bottom: 100px;
 left: 0;
 right: 0;
}

@media print, screen and (min-width: 768px) {
.txt-hero {
 width: auto;
 height: auto;
}
.lead-hero {
 font-size: 1.8rem;
 margin-top: 2em;
}
.arrow-hero {
 position: absolute;
 bottom: 10px;
 left: 0;
 right: 0;
}
}
/* =====================================================================

sec-top-greeting

====================================================================== */
.sec-top-greeting {
 text-align: center;
}
.subtxt-greeting {
 display: block;
 font-size: 16px;
 padding: 0.5em 0 0.79em;
}
.icon-deco {
 margin-bottom: 1.79em;
}
.icon-deco i {
 font-size: 2em;
 color: #007adf;
}
/* =====================================================================

sec-top-student

====================================================================== */
.sec-top-student {
 text-align: center;
 background: url(../image/top/bg_for_students.png);
}
.box-student-info {
 padding: 30px 20px;
 text-align: center;
 background: #fff;
 margin-bottom: 20px;
}
.sec-top-student a {
 text-decoration: none;
 color: #3f3f3f;
}
.sec-top-student .l-col-wrap {
 max-width: 470px;
 margin: 0 auto;
}
.box-student-info .ttl-student-info {
 font-size: 1.8rem;
}
.sec-top-student .box-student-info.num-01 {
 border: 1px solid #f3374d;
 border-bottom: 8px solid #f3374d;
}
.box-student-info.num-01 .ttl-student-info {
 color: #f3374d;
}
.sec-top-student .box-student-info.num-02 {
 border: 1px solid #f6a210;
 border-bottom: 8px solid #f6a210;
}
.box-student-info.num-02 .ttl-student-info {
 color: #f6a210;
}
.sec-top-student .box-student-info.num-03 {
 border: 1px solid #0da9d8;
 border-bottom: 8px solid #0da9d8;
}
.box-student-info.num-03 .ttl-student-info {
 color: #0da9d8;
}
.box-student-info .txt-student-info {
 border-radius: 4em;
 padding: 0.63em 1.3em;
 color: #fff;
 margin: 0.57em auto 0.3em;
 max-width: 200px;
}
.box-student-info.num-01 .txt-student-info {
 border: 1px solid #f3374d;
 background: #f3374d;
}
.box-student-info.num-02 .txt-student-info {
 border: 1px solid #f6a210;
 background: #f6a210;
}
.box-student-info.num-03 .txt-student-info {
 border: 1px solid #0da9d8;
 background: #0da9d8;
}
.sec-top-student .txt-student-info i {
 margin-right: 5px;
 font-size: 1.3em;
 vertical-align: bottom;
}

@media print, screen and (min-width: 768px) {
.sec-top-student .l-col-wrap {
 max-width: none;
}
.box-student-info {
 margin-bottom: 0;
 padding: 45px 20px;
}
.box-student-info:hover {
 color: #fff;
}
.box-student-info:hover .ttl-student-info {
 color: #fff;
}
.box-student-info:hover .txt-student-info {
 border: 1px solid #fff;
 background: #fff;
}
.box-student-info.num-01:hover {
 background: #f3374d;
}
.box-student-info.num-01:hover .txt-student-info {
 color: #f3374d;
}
.box-student-info.num-02:hover {
 background: #f6a210;
}
.box-student-info.num-02:hover .txt-student-info {
 color: #f6a210;
}
.box-student-info.num-03:hover {
 background: #0da9d8;
}
.box-student-info.num-03:hover .txt-student-info {
 color: #0da9d8;
}
.box-student-info .ttl-student-info {
 font-size: 2.2rem;
}
}
/* =====================================================================

type-guide

====================================================================== */
.type-guide {
 position: relative;
}
.l-wrap-type {
 width: 100%;
 min-height: 310px;
 position: relative;
}
.type-box {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 right: 0;
 transition: all 0.93s ease;
}

.type-01 .type-box {
 background: url(../image/top/bg_school.jpg) 50% 50% no-repeat;
 background-size: cover;
}
.type-02 .type-box {
 background: url(../image/top/bg_course.jpg) 50% 50% no-repeat;
 background-size: cover;
}
.type-03 .type-box {
 background: url(../image/top/bg_plan.jpg) 50% 50% no-repeat;
 background-size: cover;
}
.type-04 .type-box {
 background: url(../image/top/bg_entering.jpg)50% 50% no-repeat;
 background-size: cover;
}
.type-05 .type-box {
 background: url(../image/top/bg_students.jpg) 50% 50% no-repeat;
 background-size: cover;
}
.l-type-txt {
 background: rgba(15,113,28,0.75);
 color: #fff;
 /*text-shadow: 1px 1px 1px #0799ab;*/
 text-align: center;
 position: absolute;
 bottom: 0;
 right: 0;
 left: 0;
 padding: 20px;
}
.box-type-cts {
}
.box-type-cts h2.ttl-type {
 margin-bottom: 0.3em;
}
.box-type-cts h2.ttl-type:after {
 content: "";
 display: block;
 margin: 5px auto 0;
 border-bottom: 5px solid #fff;
 width: 50px;
}
.box-type-cts span.ttl-type-subtxt {
 font-size: 2.0rem;
 display: block;
}

@media print, screen and (min-width: 576px) {
.l-wrap-type {
 min-height: 330px;
 text-align: left;
}
.l-type-txt {
 width: 40%;
 text-align: right;
 height: 330px;
 display: flex;
 align-items: center;
}
.type-guide .l-wrap-type:nth-child(even) {
 text-align: right;
}
.type-guide .l-wrap-type:nth-child(even) .l-type-txt {
 text-align: left;
 margin: 0 0 0 auto;
}
.box-type-cts {
 width: 300px;
 margin: 0 0 0 auto;
 text-align: center;
}
.type-guide .l-wrap-type:nth-child(even) .box-type-cts {
 margin: 0 auto 0 0;
}
.box-type-cts h2.ttl-type {
 margin-bottom: 10px;
}
.box-type-cts h2.ttl-type span.ttl-type-subtxt {
 font-size: 3.0rem;
}
}

@media print, screen and (min-width: 768px) {
.box-type-cts h2.ttl-type {
 margin-bottom: 20px;
}
}
@media print, screen and (min-width: 992px) {
 .type-box {
  filter: grayscale(100%);
 }
 .l-wrap-type:hover .type-box {
  filter: none;
 }
}
/*------------------------------
btn-style-01
-------------------------------*/
.btn-style-01 {
 text-align: center;
 margin-top: 0.5em;
 border-radius: 4em;
}
.btn-style-01 .button {
 position: relative;
 z-index: 99;
 display: block;
 padding: 1em 1.3em;
 border: 1px solid #FFF;
 color: #FFF;
 text-align: center;
 text-decoration: none;
 transition: .3s;
 border-radius: 4em;
 overflow: hidden;
}
.btn-style-01 .button:hover {
 color: #0799ab;
 border-radius: 4em;
}
.btn-style-01 .button::before {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: -1;
 content: '';
 background: #FFF;
 border-radius: 4em;
 transform-origin: right top;
 transform: scale(0, 1);
 transition: transform .3s;
}
.btn-style-01 .button:hover::before {
 transform-origin: left top;
 transform: scale(1, 1);
 border-radius: 4em;
}

@media print, screen and (min-width: 768px) {
.btn-style-01 .button {
 padding: 0.6em 1.3em;
}
}
/* =====================================================================

sec-top-news

====================================================================== */
.sec-top-news {
 text-align: left;
}
.list-news li+li {
 margin-top: 1em;
}
.list-news time {
 font-size: 1.3rem;
}
.list-news .ttl-news {
 font-weight: normal;
 font-size: 1.4rem;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.list-news .ttl-news a {
 color: #000;
}

@media print, screen and (min-width: 768px) {
.list-news li {
 margin-bottom: 3em;
}
 .list-news time {
  float: left;
 }
.list-news .ttl-news {
 padding-left: 1.753em;
}
}

@media print, screen and (min-width: 992px) {
.list-news .ttl-news a:hover {
 color: #999;
}
}