@charset "utf-8";

body{background:#192e5f;
font-family: 'Noto Serif JP', serif; color: #333333;
font-size:1rem; line-height:1.85;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%; 
word-wrap: break-word;
}

body.appear{background:#ffffff;}
*{box-sizing: border-box;}
#container{overflow-x: hidden;}

/* header */
#header{background:#efefef;}
#header h1{font-size: 1.3rem; letter-spacing: 0.1em;
position: absolute;
top: 25px;
left:50%;
transform: translateX(-50%);
color:#333333;
}

#g-nav ul{display: flex; padding: 0 0 0 5%;}
#g-nav ul li{letter-spacing: 0.1em; white-space: nowrap;}
/*#g-nav ul li:last-child{display: none;}*/
#g-nav ul li a{display: block; padding:5px 15px;}

#header ul#utility-navi{position: fixed;
top:0;
right:0;
z-index: 999;
display: flex;
font-size: 0.8rem;
}

#header ul#utility-navi li{text-align: center;}
#header ul#utility-navi li span{display: block;}
#header ul#utility-navi li a{color: #ffffff; padding: 15px 0;
display: block;
width:100px;
transition: all .5s;
}

#header ul#utility-navi li img{width:35%;}
#header ul#utility-navi li:first-child a{background:#666666;}
#header ul#utility-navi li:first-child a:hover{background:#888888;}
#header ul#utility-navi li:last-child a{background:#192e5f;}
#header ul#utility-navi li:last-child a:hover{background:#888888;}

/* lead */
#lead{position: relative; padding: 100px 0 0 0; height:100vh;}
#slider-area{width:100%; height: 80vh; position: relative; top: 0; left:0; z-index: -1;}
#slider-area #slider{width:100%; height:80vh;}

#lead h1.heading{position: absolute; top:300px; right: 5%; font-size: 8rem; font-weight: bold; color: #192e5f; animation-delay: 0.1s; line-height: 1; text-shadow: 2px 1px 1px rgba(174, 170, 170, 1);}
#lead h1 rt{font-size: 2rem; font-weight: bold; color: #333333; animation-delay: 0.1s; line-height: 1; text-shadow:none;/* 2px 1px 1px rgba(174, 170, 170, 1);*/}
#lead h2.heading{position: absolute; top:250px; right: 5%; font-size: 2rem; font-weight: bolder; color: #1d2a60; animation-delay: 0.2s; line-height: 1; text-shadow: 2px 1px 1px rgba(174, 170, 170, 1);}
#lead h2.heading span{font-size: 3rem;}
#lead h2 br{display:none;}

#lead h3.lead{position: absolute; top:450px; right:4%; font-size: 8rem; font-weight: bold; color: #1e2b68; animation-delay: 0.2s; letter-spacing: -0.1em; line-height: 1.6; white-space: nowrap;
/*text-shadow: 2px 2px 0px rgba(174, 170, 170, 1);*/
text-shadow: 2px 1px 1px rgba(174, 170, 170, 1);
}
#lead h3.lead span{padding: 0; font-size: 2rem; font-weight: bold; color: #888888;}

/* new */
#news{position: absolute; left: 0; bottom: 0; background:#f7f7f7; width:50%; z-index: 2; padding: 20px; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.4);}
#news h2{position: relative; font-size:1.3rem; margin: 0 0 20px 0; border-bottom: 3px solid #eeeeee;}
#news h2::before{
content:'';
position: absolute;
width:20%;
height: 3px;
left:0;
bottom:-3px;
z-index: 2; background-color: #192e5f;
}
#news li{margin:0 0 10px 0;}
#news li a{transition: all .3s;}
#news li a:hover{background:#eeeeee;}
#news li time{display: inline-block; padding:0 20px 0 0; font-size:0.8rem; color: #999999;}

/* concept ****************************************/
#concept{position: relative; text-align: left; padding: 88px 18px;}
#concept p{font-size:1.08em;}
#concept h2{font-size:1.5em; margin: 8px auto; /*text-align: center;*/}
#concept h3{font-size:1.3em; margin: 48px auto 8px; /*text-align: center;*/}
#concept h3 br{display: none;}

/* concept-sub ************************************/
#concept-sub{position: relative; text-align: left; padding: 88px 18px;}
#concept-sub p{font-size:1.08em;}
#concept-sub h2{font-size:1.5em; margin: 8px auto; /*text-align: center;*/}
#concept-sub h3{font-size:1.3em; margin: 48px auto 8px; /*text-align: center;*/}
#concept-sub h3 br{display: none;}

/* service ***************************************/
#service{position: relative; text-align: center; padding: 100px 0 0 0;}
#service header{background:#192e5f; color: #ffffff; width:90%; padding: 50px 0 100px 0; z-index: 1;}
#service header h2{font-size:1.5em; font-weight: bolder; margin: 0 0 20px 0; letter-spacing: 0.1em;}
#service header h2 span{font-size: 0.7em; font-weight: normal;}
#service header p{margin: 0 5% 18px;}
#service header p br{/*display: none;*/}
#service .service-area{background:#ffffff; padding: 70px; width:80%; position: relative; top:-50px; left: 5%; z-index: 2;}
#service .service-area ul{display: flex; flex-wrap: wrap;
justify-content:space-around;
/* スマホ表示用。flipDownを指定している親要素に指定しないとうまく動かない*/
transform:  translate3d(0, 0, 0);
}
#service .service-area ul li{opacity: 0; width:28%; padding: 0 0 50px 0;}
#service .service-area ul li span{display: block; width:100%; padding: 0;}
#service .service-area ul li a{display: block;}

/* history-sub001***************************************/
#history-sub001{position: relative; padding:70px 70px; margin: 0 auto; background:#ffffff; border-top:solid 1px #cccccc;}
#history-sub001 h2{z-index: 2; font-size:1.5em; font-weight: bolder; color: #1e2b68; margin: 0 auto 30px; background: linear-gradient(transparent 55%, #ffff66 55%);}
#history-sub001 h2 span{font-size: 0.8em; font-weight: normal; color: #333333; margin: auto 18px;}
.history-sub001-area{display: flex; justify-content: space-around;/*justify-content: space-between;*/ flex-wrap: wrap;}
.history-sub001-img{width:60%; padding: 0 1%; animation-delay: 0.3s;}
.history-sub001-content{width:35%; padding: 0 1%; animation-delay: 0.3s;}
.history-sub001-content h3,
.history-sub001-content p,
.history-sub001-content .history-sub-btn{letter-spacing: 0.1em;}
.history-sub001-content h3{font-size:1.3em; line-height: 2.5; padding: 0 0 18px 0; color: #ff0000;}
.history-sub001-content p{margin: 0 auto 38px;}

/* history-sub002***************************************/
#history-sub002{position: relative; padding:70px 70px; margin: 0 auto; background:#ffffff; border-top:solid 1px #cccccc;}
#history-sub002 h2{z-index: 2; font-size:1.5em; font-weight: bolder; color: #1e2b68; margin: 0 auto 30px; background: linear-gradient(transparent 55%, #ffff66 55%);}
#history-sub002 h2 span{font-size: 0.8em; font-weight: normal; color: #333333; margin: auto 18px;}
.history-sub002-area{display: flex; justify-content: space-around;/*justify-content: space-between;*/ flex-wrap: wrap;}
.history-sub002-img{width:60%; padding: 0 1%; animation-delay: 0.3s;}
.history-sub002-content{width:35%; padding: 0 1%; animation-delay: 0.3s;}
.history-sub002-content h3,
.history-sub002-content p,
.history-sub002-content .history-sub-btn{letter-spacing: 0.1em;}
.history-sub002-content h3{font-size:1.3em; line-height: 2.5; padding: 0 0 18px 0; color: #ff0000;}
.history-sub002-content p{margin: 0 auto 38px;}


/* history-sub003***************************************/
#history-sub003{position: relative; padding:70px 70px; margin: 0 auto; background:#ffffff; border-top:solid 1px #cccccc;}
#history-sub003 h2{z-index: 2; font-size:1.5em; font-weight: bolder; color: #1e2b68; margin: 0 auto 30px; background: linear-gradient(transparent 55%, #ffff66 55%);}
#history-sub003 h2 span{font-size: 0.8em; font-weight: normal; color: #333333; margin: auto 18px;}
.history-sub003-area{display: flex; justify-content: space-around;/*justify-content: space-between;*/ flex-wrap: wrap;}
.history-sub003-img{width:60%; padding: 0 1%; animation-delay: 0.3s;}
.history-sub003-content{width:35%; padding: 0 1%; animation-delay: 0.3s;}
.history-sub003-content h3,
.history-sub003-content p,
.history-sub003-content .history-sub-btn{letter-spacing: 0.1em;}
.history-sub003-content h3{font-size:1.3em; line-height: 2.5; padding: 0 0 18px 0; color: #ff0000;}
.history-sub003-content p{margin: 0 auto 38px;}


/* history-sub004***************************************/
#history-sub004{position: relative; padding:70px 70px; margin: 0 auto; background:#ffffff; border-top:solid 1px #cccccc;}
#history-sub004 h2{z-index: 2; font-size:1.5em; font-weight: bolder; color: #1e2b68; margin: 0 auto 30px; background: linear-gradient(transparent 55%, #ffff66 55%);}
#history-sub004 h2 span{font-size: 0.8em; font-weight: normal; color: #333333; margin: auto 18px;}
.history-sub004-area{display: flex; justify-content: space-around;/*justify-content: space-between;*/ flex-wrap: wrap;}
.history-sub004-img{width:60%; padding: 0 1%; animation-delay: 0.3s;}
.history-sub004-content{width:35%; padding: 0 1%; animation-delay: 0.3s;}
.history-sub004-content h3,
.history-sub004-content p,
.history-sub004-content .history-sub-btn{letter-spacing: 0.1em;}
.history-sub004-content h3{font-size:1.3em; line-height: 2.5; padding: 0 0 18px 0; color: #ff0000;}
.history-sub004-content p{margin: 0 auto 38px;}


/* history-sub005***************************************/
#history-sub005{position: relative; padding:70px 70px; margin: 0 auto; background:#ffffff; border-top:solid 1px #cccccc;}
#history-sub005 h2{z-index: 2; font-size:1.5em; font-weight: bolder; color: #1e2b68; margin: 0 auto 30px; background: linear-gradient(transparent 55%, #ffff66 55%);}
#history-sub005 h2 span{font-size: 0.8em; font-weight: normal; color: #333333; margin: auto 18px;}
.history-sub005-area{display: flex; justify-content: space-around;/*justify-content: space-between;*/ flex-wrap: wrap;}
.history-sub005-img{width:60%; padding: 0 1%; animation-delay: 0.3s;}
.history-sub005-content{width:35%; padding: 0 1%; animation-delay: 0.3s;}
.history-sub005-content h3,
.history-sub005-content p,
.history-sub005-content .history-sub-btn{letter-spacing: 0.1em;}
.history-sub005-content h3{font-size:1.3em; line-height: 2.5; padding: 0 0 18px 0; color: #ff0000;}
.history-sub005-content p{margin: 0 auto 38px;}


/* history-sub006***************************************/
#history-sub006{position: relative; padding:70px 70px; margin: 0 auto; background:#ffffff; border-top:solid 1px #cccccc;}
#history-sub006 h2{z-index: 2; font-size:1.5em; font-weight: bolder; color: #1e2b68; margin: 0 auto 30px; background: linear-gradient(transparent 55%, #ffff66 55%);}
#history-sub006 h2 span{font-size: 0.8em; font-weight: normal; color: #333333; margin: auto 18px;}
.history-sub006-area{display: flex; justify-content: space-around;/*justify-content: space-between;*/ flex-wrap: wrap;}
.history-sub006-img{width:60%; padding: 0 1%; animation-delay: 0.3s;}
.history-sub006-content{width:35%; padding: 0 1%; animation-delay: 0.3s;}
.history-sub006-content h3,
.history-sub006-content p,
.history-sub006-content .history-sub-btn{letter-spacing: 0.1em;}
.history-sub006-content h3{font-size:1.3em; line-height: 2.5; padding: 0 0 18px 0; color: #ff0000;}
.history-sub006-content p{margin: 0 auto 38px;}


/* message ***************************************/
#message{position: relative; padding:70px 70px 10px; margin: 100px auto 0; background:#fcfcfe; border-top:dotted 2px #cccccc;}
#message h2{z-index: 2; font-size:1.7em; font-weight: bolder; color: #192e5f; animation-delay: 0.3s; text-shadow: 0 0 0.5em rgba(255,255,255,1);}
#message h2 span{font-size: 0.7em; font-weight: normal; color: #555555; margin: auto 8px;}
.message-area{display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row;}
.message-img{ width:50%; padding: 0 1%; animation-delay: 0.3s;}
.message-content{width:50%; padding: 0 1%;  animation-delay: 0.3s;}
.message-box{margin: 0 auto 48px;}
.message-content h3,
.message-content p,
.message-content .message-btn{letter-spacing: 0.1em;}
.message-content h3{font-size:1.5em; line-height: 2.5;}
.message-content p{margin: 0 auto 38px;}

/* history***************************************/
#history{position: relative; padding:0 0 70px; margin: 0 auto 0px; background:#fcfcfe; border-bottom:dotted 2px #cccccc;}
/*= 6-1-8 ===================================*/
#history .slider img {width:100%; height:auto;}
#history .slider .slick-slide {margin:0 10px;}

/*==========================================
 contentCSS
===========================================*/
/* related-title ---------------------------------------*/
.related-title {text-align:center; margin:122px auto 0; padding:0;}
.related-title h4 {font-size: 1.3em; font-weight: normal; margin:18px auto; color: #333333; letter-spacing:2px; line-height: 1.2em; position: relative;text-align: center;}
.related-title h4 span {position: relative; z-index: 2; display: inline-block; margin: 0 4em; padding: 0 1em; background-color: #ffffff; text-align: center;}
.related-title h4::before {position: absolute; top: 50%; z-index: 1; content: ''; display: block; width: 100%; height: 1px; background: #dddddd;
background: -webkit-linear-gradient(-45deg, transparent, #bbb 10%, #bbb 90%, transparent);
background: linear-gradient(-45deg, transparent, #bbb 10%, #bbb 90%, transparent);}

/* related_stage-contents ---------------------------------------*/
.related_stage-contents {text-align:left; margin: 48px auto;}
.related_stage-contents p{margin:0 auto 8px;}
.related_stage-contents section {width: 100%;}
.related_stage-contents article {width: 100%; margin:88px auto; padding:0;}
.related_stage-contents aside {width: 100%; margin:88px auto; padding:88px 0;}
.related_stage-contents h3 {font-size: 1.4em; font-weight:normal; color: #192e5f; margin:48px auto 4px; border-bottom: 1px solid #cccccc;}
.related_stage-contents h3 span {font-size: 0.8em; font-weight:normal; color: #888888; margin:auto 18px;}
.related_stage-contents .course-list{display: flex; justify-content: space-around; flex-wrap: wrap; align-items: stretch;}
.related_stage-contents .course-list aside{width:48%; position: relative; margin:1%; padding:20px 20px 50px 20px; border:solid 1px #cccccc;}



/* footer ************************************/
#footer{position: relative; display: flex; justify-content: space-between; flex-wrap:wrap; flex-direction: row-reverse;}
#footer address {font-size: 1em;}
#footer .footer-r{width:50%; padding: 88px 20px 0; background:#ededed; /*color: #333333;*/}
#footer .footer-r h2{font-size: 1.5em; font-weight:normal; /*color: #ffffff;*/}
#footer .footer-r h2 span{font-size: 1em; margin:4px; /*color:#ffffff;*/}
#footer .footer-r p{margin:8px auto 18px; padding:0;}

    #footer .footer-r_con{width:100%; padding: 80px 80px; background:#ebe8df; /*color: #ffffff;*/}
    #footer .footer-r_con a,
    #footer .footer-r_con a:link, 
    #footer .footer-r_con a:visited {color: #888888; text-decoration: none;}
    #footer .footer-r_con a:hover {color: #888888; text-decoration: none;}

#footer .footer-link {font-size: 1em; margin: 8px auto; padding: 0;}
#footer .footer-link li{display: inline-block;}
#footer .footer-link a,
#footer .footer-link a:link,
#footer .footer-link a:visited {color: #192e5f; text-decoration: none;}

#footer .footer-link a::after{content:'/'; padding: 0 10px;}
#footer .footer-link li:last-child a::after{content:''; padding: 0;}
#footer .footer-link a:hover,
#footer .footer-link a:active {color: #888888; text-decoration: none;}


    #footer .footer-r .map-address address{}
    #footer .footer-r .map-area{}
    #footer .footer-r .map-area h2{}
    #footer .footer-r .map-address{}
    #footer .footer-r .map-block{}
    #footer .footer-r .iframe-area {}
    #footer .footer-r .iframe-area iframe,
    #footer .footer-r .iframe-area object,
    #footer .footer-r .iframe-area embed {}

#footer .footer-l{width:50%; background:#ededed;}
#footer .footer-l .footer-contact{display: flex; justify-content: space-evenly;
/*justify-content: center;*/
align-items: center;
text-align: center;
/*background: #ffffff cccccc;*/
height: 48vh;
}

#footer .footer-l .footer-contact-area h2{font-size: 2rem; font-weight:normal; margin: 22px 0 18px 0; letter-spacing: 0.1em; line-height:1.5; color:#000000;}
#footer .footer-l .footer-contact-area h2 span{font-size: 1rem; font-weight:normal; margin:2px; display: block;}
#footer .footer-l .footer-contact-area a:link,
#footer .footer-l .footer-contact-area a:visited {color: #192e5f; text-decoration: none;}
#footer .footer-l .footer-contact-area a:hover,
#footer .footer-l .footer-contact-area a:active {color: #888888; text-decoration: none;}

#footer #page-top{
position: absolute;
bottom:0;
right: 0;
width:80px;
height:80px;
background:#ffffff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}

#footer #page-top span{
display: inline-block;
width: 13px;
height: 13px;
border-top:2px solid #192e5f;
border-left: 2px solid #192e5f;
transform: rotate(45deg);
}


/*==========================================
 footer
===========================================*/
#footermenu {width: 100vw; margin:0 auto 0; padding: 88px 33px; background-color:#192e5f; color: #ffffff;}
#footermenu a:link,
#footermenu a:visited {color: #ffffff; text-decoration: none;}
#footermenu a:hover,
#footermenu a:active {color: #888888; text-decoration: none;}
.company_nav {overflow: hidden; float: left; font-size:0.8em;}
.company_nav ul{margin: 0; padding: 0; list-style: none}
.company_nav li {float: left; margin: 0 8px; padding: 0;}
.company_nav li a:before {color:#ffffff; margin:0 4px; font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f105";}
.company_nav li.none {display: none;}
#footermenu address {overflow: hidden; font-size: 0.7em; float: right;}


/*==========================================
 footer_fixedarea PC Tbios off
===========================================*/
#footer_fixedarea {z-index: 8888; margin:0 auto; padding: 8px 0; text-align: center;}