@charset "UTF-8";
/* CSS Document */
*, *:before, *:after{margin:0;padding:0;border: 0;vertical-align:baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
html{
}
body {
font-family: "Noto Serif JP", serif;
font-size:16px;
font-weight:400;
line-height:1.7;
color:#000000;
letter-spacing:0.03em;
width:100%;
max-width: 1920px;
margin: 0 auto;
overflow-wrap: anywhere;
word-break: normal;
line-break: strict;
}
.loading {width: 100vw;height: 100vh;transition: all 1.4s;background-color: #FFF;position: fixed;top: 0;left: 0;z-index: 9999;opacity: 1;visibility: visible;}
.loading.is-active {opacity: 0;visibility: hidden;}
.loading-animation {width: 100vw;height: 100vh;transition: all .4s;background-color: #fff;z-index: 9999;display: flex;align-items:center;justify-content: center;opacity: 0;visibility: hidden;padding: 0 0 60px;}
.loading-animation img {width: 30vw;max-width: 120px;}
.loading-animation.is-active {opacity: 1;visibility: visible;}

.contents-wrap{opacity: 0;position: relative;z-index: 5;}
.wf-active .contents-wrap{opacity: 1;transition:.5s opacity;}

.for-sp{
display: none;
}
ol, ul {
list-style: none;
list-style-type: none;
}
a:focus, *:focus { outline:none; }
a{
text-decoration: none;
color:#555555;
}
a.link-ul{
text-decoration: underline;
color: #0000ff;
}
@media screen and (min-width: 768px) {
a.op07:hover{
opacity:0.7;
 transition: .4s opacity;
}
a:hover{
opacity:0.7;
transition: .4s opacity;
cursor: pointer;
}
}
@media screen and (max-width: 768px) {
a:hover{
opacity:1;
}
}
img{
vertical-align:bottom;
}
img.w100{
width: 100%;
}
main{
overflow: hidden;
}
.contents-wrap{
max-width: 1400px;
margin: 0 auto;
}
.front-kv-wrap{
padding: 0 2%;
}
#kv-slide{
max-width: 1400px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#kv-ttl{
position: absolute;
bottom: -1px;
left: 0;
right: 0;
width: 47%;
max-width: 660px;
margin: 0 auto;
}
.message .contents-wrap{
margin: 0 auto 9%;
padding: 8% 0 5%;
position: relative;
}
.message .contents-wrap h2{
position: absolute;
left: 1%;
top: 0;
width: 52px;
z-index: 10;
}
.message-cont{
text-align: center;
margin: auto;
position: relative;
}
.message-cont h3{
font-size: 32px;
font-weight: 500;
line-height: 2.2;
margin: 0 0 4.5%;
}
.message-cont p{
font-size: 18px;
font-weight: 500;
line-height: 2.9;
}
.message-right-img{
width: 28.5%;
position: absolute;
top:0;
right: -2%;
}
.message-left-img{
width: 26.5%;
position: absolute;
top: 0;
left: -2%;
}
.keyword .contents-wrap{
background: url("../images/keyword-bg.jpg") repeat center top;
background-size: 10px auto;
border-bottom: 1px solid #000;
margin: 0 auto 8%;
padding: 5% 2% 1%;
position: relative;
}
.keyword .contents-wrap::before{
position: absolute;
content: '';
top: 0;
left: 0;
width: calc(50% - 270px);
height: 1px;
background: #000;
}
.keyword .contents-wrap::after{
position: absolute;
content: '';
top: 0;
right: 0;
width: calc(50% - 270px);
height: 1px;
background: #000;
}
.keyword-ttl{
position: absolute;
top: -22px;
left: 0;
right: 0;
width: 390px;
margin: auto;
}
.keyword h3{
text-align: center;
font-size: 24px;
font-weight: 600;
margin: 0 0 1%;
}
.keyword .anchor-box{
text-align: center;
padding: 0 0 4%;
}
.keyword .anchor-box.type01 a{
background: #45bca0;
}
.keyword .anchor-box.type02 a{
background: #42a6e5;
}
.keyword .anchor-box.type03 a{
background: #ffc566;
color: #000;
}
.keyword .anchor-box a{
font-family: "Noto Sans JP", sans-serif;
font-size: 17px;
font-weight: 500;
min-width: 98px;
display: inline-block;
margin: 4px 3px;
padding: 6px 24px;
text-align: center;
color: #fff;border-radius: 100px;
}

.department{
max-width: 1400px;
margin: 0 auto;
position: relative;
}
.department-bg01{
position: absolute;
top: 41px;
left: 0;
width: 66%;
height: 30%;
z-index: -1;
}
.department-bg02{
position: absolute;
bottom: 0;
right: 0;
width: 34%;
height: 100%;
z-index: -1;
}
.department-main{
position: absolute;
top: 100px;
right: 0;
width: 54%;
z-index: 10;
}
.department h2{
width: 430px;
text-align: center;
font-size: 43px;
font-weight: 600;
line-height: 82px;
background: #fff;
display: inline-block;
margin: 0 30px 5% 0;
}
.course-sub-ttl{
display: inline-block;
line-height: 74px;
vertical-align: top;
}
.course-sub-ttl img{
width: auto;
height: 25px;
vertical-align: middle;
}
.dep-cont-head{
position: relative;
padding: 0 4%;
}
.dep-cont01,
.dep-cont03{
position: relative;
padding: 0 4% 4%;
}
.dep-cont{
width: 100%;
margin: 0 auto;
padding: 5% 5% 0;
background: #fff;
position: relative;
}
.dep-cont03 .dep-cont{
padding: 8% 5%;
}
.dep-cont02 .dep-cont{
width: 100%;
}
.dep-cont01 .upper-box{
padding: 0 0 38%;
}
.dep-cont01 .lead-box{
position: absolute;
top: 5%;
left: 5%;
width: 90%;
}
.course02 .dep-cont01 .lead-box{
top: 8%;
}
.dep-cont01 .lead-box p{
width: 40%;
padding: 40px 0;
line-height: 2.3;
font-size: 17px;
position: relative;
}
.dep-cont01 .lead-box p{
width: 40%;
padding: 30px 0;
line-height: 2.3;
font-size: 17px;
position: relative;
}
.course01 .dep-cont01 .lead-box p{
border-bottom: 1px solid #45bca0;
border-top: 1px solid #45bca0;
}
.course02 .dep-cont01 .lead-box p{
border-bottom: 1px solid #0087dc;
border-top: 1px solid #0087dc;
}
.course03 .dep-cont01 .lead-box p{
border-bottom: 1px solid #ff9f00;
border-top: 1px solid #ff9f00;
}
.course01 .dep-cont01 .lead-box p::before,
.course02 .dep-cont01 .lead-box p::before,
.course03 .dep-cont01 .lead-box p::before{
position: absolute;
content: '';
width: 100%;
height: 1px;
background:#45bca0;
left: 0;
top: -6px;
}
.course01 .dep-cont01 .lead-box p::after,
.course02 .dep-cont01 .lead-box p::after,
.course03 .dep-cont01 .lead-box p::after{
position: absolute;
content: '';
width: 100%;
height: 1px;
background:#45bca0;
left: 0;
bottom: -6px;
}
.course02 .dep-cont01 .lead-box p::before,
.course02 .dep-cont01 .lead-box p::after{
background:#0087dc;
}
.course03 .dep-cont01 .lead-box p::before,
.course03 .dep-cont01 .lead-box p::after{
background:#ff9f00;
}
.dep-cont02 .dep-cont{
width: 100%;
padding: 0 5% ;
}
.block-ttl-box{
display: flex;
max-width: 1000px;
margin: 0 auto 3%;
}
.block-ttl-box h3{
width: 240px;
padding: 0 40px 0 0;
display: flex;
align-items: center;
flex-shrink: 0;
}
.block-ttl-box p{
font-weight: 700;
display: flex;
align-items: center;
line-height: 2;
}
.dep-cont01 .block-ttl-box p{
font-size: 19px;
}
.dep-cont02 .block-ttl-box p{
font-size: 23px;
}
.dep-cont03 .block-ttl-box p{
font-size: 22px;
}
.dep-cont02-main{
position: relative;
}
.list-box{
max-width: 1080px;
margin: 0 auto 4%;
text-align: center;
}
.list-box p{
font-size: 20px;
font-weight: 600;
display: inline-block;
margin: 4px 12px;
}
.dep-cont03-img{
max-width: 1200px;
margin: 0 auto 8%;
}
.circles-box{
position: relative;
margin: 0 0 2%;
}
.main-circle{
width: 32%;
max-width: 390px;
margin: 0 auto;
padding: 0 0 12.5%;
}
.cu03-img01{
position: absolute;
width: 15.4%;
left: 14%;
top: 2%;
}
.cu03-img02{
position: absolute;
width: 15%;
left: 0%;
top: 31%;
}
.cu03-img03{
position: absolute;
width: 17.7%;
left: 15%;
bottom: 4%;
}
.cu03-img04{
position: absolute;
width: 16.4%;
right: 12%;
top: 10%;
}
.cu03-img05{
position: absolute;
width: 15%;
right: 20%;
bottom: 0%;
}
.cu03-img06{
position: absolute;
width: 14.3%;
right: -2%;
bottom: 20%;
}
.col-2-box{
max-width: 860px;
display: flex;
justify-content: space-between;
margin: 0 auto 4%;
padding: 0 4%;
}
.course-box01{
width: 44%;
background: #abe1d4;
padding: 0 0 30px;
}
.course-box02{
width: 44%;
background: #afd7da;
padding: 0 0 30px;
}
.course-box-ttl{
font-size: 27px;
font-weight: 600;
line-height: 3;
text-align: center;
}
.course-box-img{
}
.course-box01 h3,
.course-box02 h3{
text-align: center;
font-weight: 600;
font-size: 21px;
padding: 20px 0;
line-height: 1.4;
}
.course-box01 p,
.course-box02 p{
text-align: center;
font-family: "Noto Sans JP", sans-serif;
font-size: 15px;
font-weight: 400;
}
.course-list-box{
display: flex;
margin: 0 auto;
}
.course-a.course-list-box{
margin: 0 auto 2%;
}
.course-b.course-list-box{
margin: 0 auto 4%;
}
.course-list-ttl{
width: 220px;
flex-shrink: 0;
display: flex;
align-items: center;
}
.course-list-ttl h3{
width: 100%;
background: #abe1d4;
font-size: 22px;
font-weight: 600;
border-radius: 100px;
line-height: 2.4;
text-align: center;
}
.course-a .course-list-ttl h3{
background: #abe1d4;
}
.course-b .course-list-ttl h3{
background: #afd7da;
}
.course-list-cont{
padding: 0 0 0 10px;
}
.course-list-cont p{
display: inline-block;
font-size: 20px;
margin: 0 10px;
}
.course-a .course-list-cont p span{
color: #45bca0;
}

.course-b .course-list-cont p span{
color: #afd7da;
}
.col-3-box{
display: flex;
justify-content: space-between;
margin: 0 0 4%;
}
.point-box{
width: 30%;
background: #d9edfa;
text-align: center;
padding: 0 0 30px;
}
.point-box-num{
background: #fff;
text-align: center;
font-size: 27px;
font-weight: 500;
color: #0087dc;
line-height: 2.2;
}
.point-box-img{
}
.point-box h3{
font-family: "Noto Sans JP", sans-serif;
font-size: 20px;
font-weight: 600;
color: #0087dc;
padding: 18px 3% 14px;
}
.point-box p{
font-family: "Noto Sans JP", sans-serif;
font-size: 15px;
font-weight: 400;
}
.dep-cont02-ex-p2{
width: 40%;
width: 580px;
height: 360px;
position: absolute;
top: 0;
bottom: 0;
background: #fff;
border-radius: 50px;
overflow: hidden;
margin: auto;
padding: 0 0 4%;
}
.dep-cont02-ex-p2-icon{
width: 60px;
margin: 0 auto;
padding: 20px 0 14px;
}
.dep-cont02-ex-p2-icon img{
width: 100%!important;
left: 0!important;
}
.course02 .dep-cont02-ex-p2{
left: 10%;
}
.dep-cont02-ex-p2 p{
text-align: center;
font-size: 18px;
line-height: 2;
font-weight: 600;
}
.dep-cont02-ex-p2 p span{
font-size: 14px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 300;
position: relative;
top: -8px;
}
.dep-cont02-ex-p2 p.att-small{
font-size: 14px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 300;
position: relative;
top: -4px;
line-height: 1.5;
padding: 0 0 8px;
}

.course02 .dep-cont02-ex-p2 .colored-inner{
background: #36a0e3;
padding: 18px 0 ;
}
.course02 .dep-cont02-ex-p2 p{
color: #fff;
}
.course03 .dep-cont02-ex-p2{
right: 10%;
}
.course03 .dep-cont02-ex-p2 .colored-inner{
background: #ffb233;
padding: 18px 0 ;
}
.course03 .dep-cont02-ex-p2 p{
}
.circle-ex-box{
position: absolute;
height: 360px;
left: 37%;
top: 0;
bottom: 0;
margin: auto;
display: flex;
}
.circle-ex01,
.circle-ex02{
background: #fff;
border-radius: 900px;
padding: 0 0 4%;
overflow: hidden;
width: 360px;
height: 360px;
}
.circle-ex01{
margin: 0 22px 0 0;
}
.circle-ex-ttl{
font-size: 26px;
font-weight: 600;
text-align: center;
padding: 0 0 8px;
}
.circle-ex-box p{
color: #fff;
font-size: 19px;
font-weight: 600;
text-align: center;
}
.circle-ex-box .circle-ex02 p{
line-height: 1.3;
}
.circle-ex-box .circle-ex01 .colored-inner{
background: #45bca0;
padding: 18px 0;
}
.circle-ex-box .circle-ex02 .colored-inner{
background: #349aa2;
}
.circle-ex-box .circle-ex02 .colored-inner p{
padding: 18px 0 18px;
}
.circle-ex-box .circle-ex02 p.att-text{
background: #fff;
font-size: 10px;
font-weight: 400;
color: #111;
padding: 12px 0;
}
.course01 h2{border:1px solid #45bca0;}
.course02 h2{border:1px solid #339fe3;}
.course03 h2{border:1px solid #ff9f00;}
.course01 .department-bg01,.course01 .department-bg02{background:#45bca0;}
.course02 .department-bg01,.course02 .department-bg02{background:#339fe3;}
.course03 .department-bg01,.course03 .department-bg02{background:#ff9f00;}
.course02 .list-box span{color: #0087dc;}
.course03 .list-box span{color: #ff9f00;}
.course01 .btn a{background:#257664;}
.course02 .btn a{background:#005f9c;}
.course03 .btn a{background:#f57900;}

.btn{
max-width: 440px;
margin: 0 auto;
}
.btn a{
background: #ccc;
line-height: 74px;
font-size: 24px;
font-weight: 600;
display: block;
color: #fff;
padding: 0 20px 0 0;
text-align: center;
position: relative;
}
.btn a::after{
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 20px;
width: 34px;
height: 21px;
margin: auto;
background: url("../images/btn-arrow.svg");
background-size: 100% auto;
}
.ending .btn a{
background: #0a578f;
}
.ending{
}
.ending .contents-wrap{
position: relative;
}
.ending-img{
width: 100%;
}
.ending-cont{
position: absolute;
top: 10%;
left: 0;
width: 100%;
text-align: center;
}
.ending-msg{
width: 90%;
max-width: 660px;
margin: 0 auto 40px;
}

.ending-msg-text{
text-align: center;
}
.ending-msg-text p.line01{
font-size: 46px;
}
.ending-msg-text p.line02{
font-size: 53px;
}
/*////////////////////////ヘッダー////////////////////////*/
header{
background: #fff;
height: 74px;
padding: 2px 0 0;
}
header .logo{
width: 220px;
margin: 0 auto;
line-height: 64px;
}
header .logo img{
vertical-align: middle;
}

/*////////////////////////フッター////////////////////////*/

footer{
position:relative;
max-width: 1400px;
margin: 0 auto;
padding: 0 0 20px;
border-top: 1px solid #000;
}
footer .logo{
width: 204px;
margin: 0 auto;
line-height: 82px;
}
footer .logo img{
vertical-align: middle;
}
footer .copy-r{
position: absolute;
bottom: 20px;
right: 2%;
font-family: "Noto Sans JP", sans-serif;
font-size: 12px;
}

/*////////////////////////////////*/

.page-top{
position: fixed;
width: 50px;
height: 50px;
bottom: 120px;
right: 3%;
border-radius: 50%;
cursor: pointer;
display: none;
z-index: 1000;
}

/* =============================ADD============================= */
.add-mgb160{margin-bottom: 160px;}
.add-mgb140{margin-bottom: 140px;}
.add-mgb120{margin-bottom: 120px;}
.add-mgb100{margin-bottom: 100px;}
.add-mgb80{margin-bottom: 80px;}
.add-mgb60{margin-bottom: 60px;}
.add-mgb50{margin-bottom: 50px;}
.add-mgb40{margin-bottom: 40px;}
.add-mgb30{margin-bottom: 30px;}
.add-mgb20{margin-bottom: 20px;}
.add-mgb10{margin-bottom: 10px;}
.add-mgauto{margin-left: auto;margin-right: auto;}

@media print {
body {width:1100px;}
}