@charset "utf-8";

/* ---------------------------------------------

トップメインイメージ 

--------------------------------------------- */

.sliderbox {
width: 100%;
}


.slider {
width: 100%;
}
.slick-slide {
margin: 0;
}

.slick-slide img {
    width: 100%;
}

.sliderbox div.slick-prev:before,
.sliderbox div.slick-next:before {
color: #FFF;
}

.slick-active button {
opacity: .5;
}

.slick-current {
opacity: 1;
}


/* ----------------------------------------------------

NEWS / EVENT

----------------------------------------------------- */
#news {
width: 90%;
padding: 5em 0 4em 0;
margin-left: 10%;
margin-bottom: 5em;
background-color: #F3F3F3;
border-bottom-left-radius: 30px;
}

.newsbox {
width: 80%;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}

.newsbox_l {
width: 30%;
margin-right: 4%;
border-right: 1px solid #CBCBCB;
}

.newsbox_l h2 {
font-size: 2.0rem;
font-weight: 500;
color: #021A3C;
letter-spacing: 0.1em;
}

.newsbox_r {
width: 64%;
text-align: left;
}


.newsbox_r dl {
width: 100%;
display: flex;
letter-spacing: 0.1em;
margin-bottom: 0.8em;
}

.newsbox_r dl dt {
width: 240px;
}

.newsbox_r dl dt span {
width: 80px;
display: inline-block;
font-size: 12px;
line-height: 1.0;
color :#FFF;
padding: 0.1em 1em;
margin-left: 1.5em;
text-align: center;
background-color: #444;
}

.newsbox_r dl dt span.news {
background-color: #021A3C;
}

.newsbox_r dl dt span.event {
background-color: #009EE7;
}

.newsbox_r dl dd {
flex: 1;
text-align: left;
}

@media screen and (max-width: 768px) {
    /*　スライダー */
    .sliderbox {
    padding-bottom: 2em;
    background-color: #021A3C;
    }
    .slick-dots {
    bottom: -1.5em;
    margin: 0;
z-index:10;
    }
    .slick-dots li {
    width: 40px;
    }
    .slick-dots li button {
    width: 40px;
    }

    /* ニュース */
    
    #news {
    width: 100%;
    padding: 2em 0 2em 0;
    margin-left: 0;
    margin-bottom: 1em;
    border-bottom-left-radius: 0;
    }
    .newsbox {
    width: 90%;
    margin: 0 auto;
    }
    .newsbox_l {
	width: 100%;
    margin: 0;
    text-align: center;
    border-right: none;
	}
    .newsbox_l h2 {
    font-size: 1.8rem;
    font-weight: 500;
    padding: 0;
    margin: 0 0 2em 0;
    }
    .newsbox_r {
	width: 100%;
	}
    .newsbox_r dl {
    display: block;
    padding: 0 0 0.8em 0;
    margin: 0 0 0.8em 0;
    border-bottom: 1px dotted #666;
    }
    .newsbox_r dl dt {
	width: 100%;
    margin: 0;
    font-size: 1.5rem;
    }
    .newsbox_r dl dd {
    flex: auto;
	width: 100%;
    font-size: 1.5rem;
    letter-spacing: 0;
    }
}

.newsbox_r dl dd a {
color: #282828;
text-decoration: none;
}

.newsbox_r dl dd a:hover {
color: #009EE7;
}

/* ----------------------------------------------------

program

----------------------------------------------------- */
#program {
width: 96%;
height: auto;
margin: 0 auto ;
}

#program div.img {
float: right;
width: 50%;
position: relative;
top: -2em;
}

.programbox {
float: left;
width: 50%;
display: inline-block;
text-align:left;
position: relative;
}

.programbox_txt {
width : 900px;
height: 500px;
position: absolute;
top: 0;
left: 0;
margin-top: 10%;
padding: 5em 10%;
background:rgba(201,238,248,0.5);
border-radius: 30px;
}

.programbox h3 {
font-size: 2.0rem;
font-weight: 500;
color: #021A3C;
line-height: 3em;
letter-spacing: 0.2em;
margin-bottom: 1em;
}

.programbox h3 span {
display: block;
font-size: 7.0rem;
font-weight: 700;
letter-spacing: 0.1em;
}

.programbox h4 {
font-size: 2.0rem;
letter-spacing: 0.2em;
margin: 0 0 1em 0;
}

.programbox ul {
width: 100%;
margin-top: 4em;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}

.programbox ul li {
width: 32%;
margin: 0 2% 1em 0;
text-align: center;
}

.programbox ul li:nth-of-type(3n) {
margin: 0 0 1em 0;
}

.programbox ul li a {
display: block;
font-size: 1.5rem;
color: #FFF;
padding: 0.2em 0;
background-color: #021A3C;
text-decoration: none;
transition: 0.6s;
background-image:url(../images/arrow_white.svg);
background-repeat: no-repeat;
background-position: 97% center;
background-size: 18px 10px;
}

.programbox ul li a:hover {
background-color: #009EE7;
}

@media screen and (max-width: 768px) {
    #program {
    width : 100%;
    margin-bottom: 3em;
    }
    #program div.img {
    float: none;
    width: 90%;
    margin: 0 auto;
    top:0
    }
    .programbox {
    float: left;
    float: none;
	width: 100%;
    position: inherit;
    font-size: 1.5rem;
    }
    .programbox:before {
    display: none;
    }
   .programbox_txt {
   width: 90%;
   height: auto;
   position:static;
   top: 0;
   left: 0;
   margin: 0 auto;
   padding: 0 1em;
   border-radius: 0;
   background:rgba(255,255,255,0.5);
    }
    .programbox h3 {
    font-size: 1.6rem;
    text-align: center;
    color: #808080;
    line-height: 1.8;
    margin: 0 0 2em 0;
    }
    .programbox h3 span {
    font-size: 3.0rem;
    letter-spacing: 0.1em;
    color: #282828;
    }
    .programbox ul li {
    width: 100%;
    margin: 0 0 0.5em 0;
    text-align: left
    }
    .programbox ul li:nth-of-type(3n) {
    margin: 0 0 0.5em 0;
    }
    .programbox h4 {
    font-size: 1.8rem;
    letter-spacing: 0;
    margin: 0 0 1em 0;
    }
    .programbox ul {
    margin-top : 2em;
    }
    .programbox ul li a {
    padding: 0.2em 1em;
    }
}

/* ----------------------------------------------------

カリキュラム

----------------------------------------------------- */
#curriculum {
width: 96%;
height: auto;
margin: 0 auto 5em auto;
position: relative;
}

#curriculum:before {
    content: "";
    display: block;
    padding-top: 50%; /* 1:1 */
}

.curriculm_photo {
width: 60%;
height: 100%;
padding-bottom: 20%;
text-align: left;
position:absolute;
top: 0;
left: 0;
}

.curriculm_photo div.img2 {
width: 60%;
position: absolute;
bottom :0;
left: 44%;
}

.curriculm_photo div.img1 img,
.curriculm_photo div.img2 img {
border-radius: 30px;
vertical-align: bottom;
}

.curriculumbox{
width: 900px;
height: auto;
position: absolute;
top: 6%;
right: 0;
}

.curriculumbox_txt {
width: 100%;
font-weight: 500;
padding: 4em 10em;
background:rgba(241,246,195,0.5);
border-radius: 30px;
text-align: left;
line-height: 2.0;
z-index: 2;
}

.curriculumbox h3 {
font-size: 2.0rem;
font-weight: 500;
color :#021A3C;
line-height: 3em;
letter-spacing: 0.2em;
margin-bottom: 1em;
}

.curriculumbox h3 span {
display: block;
font-size: 7.0rem;
font-weight: 700;
letter-spacing: 0.1em;
}

.curriculumbox ul {
width: 100%;
margin-top: 4em;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}

.curriculumbox ul li {
width: 32%;
margin: 0 2% 1em 0;
text-align: center;
}

.curriculumbox ul li:nth-of-type(3n) {
margin: 0 0 1em 0;
}

.curriculumbox ul li a {
display: block;
font-size: 1.5rem;
color: #FFF;
padding: 0.2em 0;
background-color: #021A3C;
text-decoration: none;
transition: 0.6s;
background-image:url(../images/arrow_white.svg);
background-repeat: no-repeat;
background-position: 97% center;
background-size: 18px 10px;
}

.curriculumbox ul li a:hover {
background-color: #009EE7;
}

@media screen and (max-width: 768px) {
    #curriculumb {
    width: 96%;
    margin-bottom: 3em;
    position: static;
    }
    #curriculum:before {
    display: none;
    }
	.curriculm_photo {
	width: 100%;
	height: auto;
	padding-bottom: 0;
	position:static;
    overflow: hidden;
    }
    .curriculm_photo div.img1,
    .curriculm_photo div.img2 {
    width: 50%;
    float: left;
    position:static;
    }
    .curriculm_photo div.img1 img,
    .curriculm_photo div.img2 img {
    border-radius: 0;
    vertical-align: bottom;
    }
	.curriculumbox {
	width: 100%;
    font-size: 1.5rem;
    position: static;
	}
    .curriculumbox_txt {
    width: 90%;
font-weight: 500;
    padding: 1em 0 0 0;
    margin: 0 auto;
    background:rgba(255,255,255,0.5);
    border-radius: 0;
text-align: left;
line-height: 2.0;
z-index: 2;
}


    .curriculumbox h3 {
    font-size: 1.6rem;
    text-align: center;
    color: #808080;
    line-height: 1.8;
    margin: 0 0 2em 0;
    }
    .curriculumbox h3 span {
    font-size: 3.0rem;
    letter-spacing: 0.1em;
    color: #282828;
    }
    .curriculumbox ul {
    margin-top : 2em;
    }
    .curriculumbox ul li {
    width: 100%;
    margin: 0 0 0.5em 0;
    text-align: left
    }
    .curriculumbox ul li a {
    padding: 0.2em 1em;
    }
}


/* ----------------------------------------------------

学生募集 / 学生支援

----------------------------------------------------- */

#student {
width: 90%;
margin: 0 auto 5em auto;
}

.studentbox {
width: 100%;
display: -webkit-flex;
display: flex;
}

.studentbox_l {
width: 49%;
margin-right: 1%;
background-color: #F4F4F4;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}

.studentbox_lbox {
position: relative;
}

.studentbox_lbox dl {
width: 100%;
overflow: hidden;
}

.studentbox_lbox dl dt {
width: 50%;
float: right;
overflow: hidden;
}

.studentbox_lbox dl dt img {
vertical-align: bottom;
max-width:inherit;
height: 100%;
}


.studentbox_lbox dl dd {
width: 50%;
float: left;
font-size: 1.5rem;
padding: 3em 3em 2em 3em;
text-align: left;
}

.studentbox_lbox dl dd h4 {
font-size: 3.0rem;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.2em;
margin-bottom: 1em;
padding-left: 60px;
background-image:url(../images/i_student.svg);
background-repeat: no-repeat;
background-position: 0 -5px;
background-size: 50px 50px;
}

.studentbox_lbox dl dd h4 span {
font-size: 1.2rem;
display: block;
padding-left:0.3em;
letter-spacing: 0.1em;
}

.studentbox_lbox dl dd h5 {
font-size: 1.6rem;
margin:0 0 0.5em 0;
}

.studentbox_l p.more {
position: absolute;
width: 200px;
bottom: 1em;
right: 50%;
}

.studentbox_r {
width: 49%;
margin-left: 1%;
background-color: #F4F4F4;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}

.studentbox_rbox {
position: relative;
}

.studentbox_rbox dl {
width: 100%;
overflow: hidden;
position: relative;
}

.studentbox_rbox dl dt {
width: 50%;
float: left;
overflow: hidden;
}

.studentbox_rbox dl dt img {
vertical-align: bottom;
max-width:inherit;
height: 100%;
}

.studentbox_rbox dl dd {
width: 50%;
float: right;
font-size: 1.5rem;
padding: 3em 3em 2em 3em;
text-align: left;
}

.studentbox_rbox dl dd h4 {
font-size: 3.0rem;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.2em;
margin-bottom: 1em;
padding-left: 60px;
background-image:url(../images/i_heart.svg);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 46px 46px;
}

.studentbox_rbox dl dd h4 span {
font-size: 1.2rem;
display: block;
padding-left:0.3em;
letter-spacing: 0.1em;
}

.studentbox_rbox dl dd h5 {
font-size: 1.8rem;
margin-bottom: 0.5em;
}

.studentbox_rbox p.more {
position: absolute;
width: 200px;
bottom: 1em;
right: 2em;
}


@media screen and (max-width: 768px) {
    #student {
    width: 100%;
    margin: 0 auto 2em auto;
    }
    .studentbox {
    display: -webkit-block;
    display:block;
	}
	.studentbox_l {
	width: 100%;
    background-color: #FFF;
    margin: 0;
	}
    .studentbox_lbox {
    }
    .studentbox_lbox dl {
    position: relative;
    height: auto;
    }
    .studentbox_lbox dl.inner:before {
    content: "";
    display: block;
    padding-top: 170%;
    }
    .studentbox_lbox dl dt {
    width: 80%;
    float: none;
    position: absolute;
    top:0;
    left: 40%;
    }
    .studentbox_lbox dl dd {
    width: 80%;
    height: 100%;
    float: none;
    font-size: 1.5rem;
    padding: 3em 3em 2em 3em;
    text-align: left;
    background:rgba(255,255,255,0.8);
    border-radius: 30px;
    position: absolute;
    top: 10em;
    }
    .studentbox_lbox dl dd h4 {
    font-size: 2.0rem;
    }
    .studentbox_lbox dl dd h4 span {
    font-size: 2.0rem;
    letter-spacing: 0.1em;
    }
    .studentbox_l p.more {
    position: absolute;
    width: auto;
    bottom: 2em;
    right: 0;
    left: 13%;
    text-align: left;
    }
	.studentbox_r {
	width: 100%;
    background-color: #FFF;
    margin: 0;
	}
    .studentbox_rbox {
    }
    .studentbox_rbox dl {
    position: relative;
    height: auto;
    }
    .studentbox_rbox dl.inner:before {
    content: "";
    display: block;
    padding-top: 146%; /* 1:1 */
    }
    .studentbox_rbox dl dt {
    width: 80%;
    float: none;
    position: absolute;
    top:0;
    left: -10%;
    }
    .studentbox_rbox dl dd {
    width: 80%;
    height: 100%;
    float: none;
    font-size: 1.5rem;
    padding: 3em 3em 2em 3em;
    text-align: left;
    background:rgba(255,255,255,0.8);
    border-radius: 30px;
    position: absolute;
    top: 10em;
    right: 0;
    }
    .studentbox_rbox dl dd h4 {
    font-size: 2.0rem;
    }
    .studentbox_rbox dl dd h4 span {
    font-size: 2.0rem;
    letter-spacing: 0.1em;
    }
    .studentbox_r p.more {
    position: absolute;
    width: auto;
    bottom: 2em;
    right: 0;
    text-align: left;
    }
}
/* -----------------------------------------------------

海洋AIコンソーシアム（企業・連携機関の方）

----------------------------------------------------- */

#consortium {
width: 100%;
padding: 4em 0;
background-color: #000;
background-image: url("../images/consortium_bg.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}

#consortium01 {
width: 100%;
padding: 4em 0;
background-color: #000;
background-image: url("../images/consortium_photo02.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}

#consortium02 {
width: 100%;
padding: 4em 0;
background-color: #000;
background-image: url("../images/consortium_photo03.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}

.consortiumbox {
width: 80%;
padding: 3em ;
margin: 0 auto;
text-align: left;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
background:rgba(255,255,255,0.9);
}

.consortiumbox_l {
width: 80%;
}

.consortiumbox h3 {
font-size: 2.8rem;
line-height: 1.6;
margin-bottom: 1em;
}

.consortiumbox h3 span {
font-size: 4.8rem;
display: block;
}


.consortiumbox_r {
width: 20%;
position: relative;
}

.consortiumbox_r ul {
position: absolute;
top:50%;
left:0;
right:0;
transform: translateY(-50%);
}

.consortiumbox_r ul li a {
color: #FFF;
display: block;
text-align: center;
padding: 1em ;
background-color: #021A3C;
background-image:url(../images/arrow_white.svg);
background-repeat: no-repeat;
background-position: 94% center;
background-size: 32px 20px;
text-decoration: none;
transition: 0.6s;
}

.consortiumbox_r ul li a:hover {
background-color: #666;
}


@media screen and (max-width: 768px) {
    #consortium {
    padding: 2em 0;
    }
	.consortiumbox {
	width: 100%;
    padding: 1.5em 1.5em 1em 1.5em;
    font-size: 1.5rem;
	}
    .consortiumbox_l {
    width:100%;
    }
    .consortiumbox_r {
    width:100%;
    position:static;
    }
    .consortiumbox_r ul {
    position:static;
    top:0;
transform: translateY(0);
    }
    .consortiumbox h3 {
    font-size: 1.6rem;
    text-align: center;
    }
    .consortiumbox h3 span {
    font-size: 2.4rem;
    }
}


/* -----------------------------------------------------

特集

----------------------------------------------------- */

#special {
width: 80%;
padding: 4em 0 0 0;
margin: 0 auto 5em auto;
}

#special h3 {
font-size: 3.4rem;
font-weight: 500;
letter-spacing: 0.6em;
line-height: 1.6;
margin: 0 0 1em 0;
}

#special h3 span {
font-size: 6.0rem;
font-weight: 500;
padding-left: 0.3em;
letter-spacing: 0.1em;
display: block;
}

.specialbox {
width: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
background-color: #FFF;
}

.specialbox1 {
width: 48%;
margin: 0 2% 0 0;
}

.specialbox1:nth-of-type(2) {
width: 48%;
margin: 0 0 0 2%;
}

.specialbox1 dl dt {
margin-bottom: 1em;
}

.specialbox1 dl dt img {
vertical-align: bottom;
}

.specialbox1 dl dd {
font-size: 2.2rem;
font-weight: 500;
text-align: left;
letter-spacing: 0.1em;
}

.specialbox1 dl dd h4 {
font-size: 1.8rem;
font-weight: 500;
padding: 1em 0;
margin-bottom: 1em;
position: relative;
}

.specialbox1 dl dd h4::before {
content: "";
position: absolute;
top:0;
left: 0;
width: 50%;
border-top: 1px solid #CBCBCB
}

.specialbox1 dl dd span {
font-size: 1.5rem;
color: #C0272D;
}

.specialbox1 dl dd h4::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 50%;
border-bottom: 1px solid #CBCBCB
}

@media screen and (max-width: 768px) {
	#special {
	width: 100%;
    margin: 0 ;
	}
    #special h3 {
    font-size: 2.0rem;
    text-align: center;
    }
    #special h3 span {
    font-size: 2.4rem;
    letter-spacing: 0.1em;
    padding-left: 0.1em;
    }
    .specialbox1,
    .specialbox1:nth-of-type(2) {
    width: 96%;
    margin: 0 auto 2em auto;
    }
    .specialbox1:nth-of-type(2) {
    margin: 0 auto 2em auto;
    }
    .specialbox1 dl dd {
    font-size: 1.6rem;
    }
    .specialbox1 dl dd h4 {
    font-size: 1.4rem;
    padding: 0;
    margin:0;
    color: #999;
    letter-spacing: 0;
    }
    .specialbox1 dl dd h4::before,
    .specialbox1 dl dd h4::after {
    display: none;
    }
    .specialbox1 dl dd p {
    font-size: 1.5rem;
    letter-spacing: 0;
    }
}

/* -----------------------------------------------------

FEATURED CONTENT

----------------------------------------------------- */

#featured {
width: 100%;
padding: 4em 0 5em 0;
margin: 0 auto;
background-image: url("../images/featured_bg.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}

#featured h3 {
font-size: 2.4rem;
font-weight: 500;
letter-spacing: 0.1em;
padding: 0 0 3em 0;
color :#FFF;
}

.featuredbox ul {
width: 90%;
margin: 0 auto;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}

.featuredbox li {
width: 23%;
margin: 0 1%;
position: relative;
}


.featuredbox li a {
display: block;
padding: 2em 2em;
border-radius: 20px;
color: #282828;
text-decoration: none;
background:rgba(255,255,255,1.0);
transition: 0.6s;
}

.featuredbox li a:hover {
background:rgba(255,255,255,0.5);
}

.featuredbox li span {
display: block;
}

.featuredbox li span.title {
font-size: 2.4rem;
font-weight: 500;
letter-spacing: 0.2em;
margin-bottom: 0.8em;
}

.featuredbox li span.img {
height: 44px;
margin-bottom: 1em;
position: relative;
}

.featuredbox li span.img img {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
transform: translateY(-50%);
vertical-align: bottom;
}

li.featured_activity span.img img {
width: 56px;
height: 30px;
}

li.featured_publication span.img img {
width: 41px;
height: 42px;
}

li.featured_faq span.img img {
width: 48px;
height: 31px;
}

li.featured_contact span.img img {
width: 28px;
height: 30px;
}
.featuredbox li span.more {
letter-spacing: 0.2em;
}

@media screen and (max-width: 768px) {
    #featured {
    padding: 2em 0 0 0;
    background-image: none;
    background-color: #021A3C;
    }
    #featured h3 {
    font-size: 2.0rem;
    letter-spacing: 0.1em;
    padding: 0 0 2em 0;
    }
    .featuredbox ul {
    width: 90%;
    }
	.featuredbox li {
	width: 48%;
    margin: 0 2% 1em 0;
	}
	.featuredbox li:nth-of-type(even) {
    margin: 0 0 1em 2%;
    }
    .featuredbox li a {
    padding: 1em;
    height: 100%;
    }
    .featuredbox li span.title {
    font-size: 1.8rem;
    }
    .featuredbox li.featured_contact span.title {
    letter-spacing: 0em;
    }
    .featuredbox li span.more {
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    }
}


/* -----------------------------------------------------

リンク

----------------------------------------------------- */

#link {
width: 1200px;
margin: 5em auto;
background-color: #FFF;
}

@media screen and (max-width: 768px) {
	#link {
	width: 70%;
    margin: 0 auto 3em auto;
	}
}


.linkbox li {
display: inline-block;
margin: 0 5px;
}

.linkbox li a {
display: block;
padding: 1em 1.5em;
text-align: center;
border: 1px solid #CCC;
}

.linkbox li img {
max-width: 100%;
vertical-align: bottom;
}

#link .slick-next {
right: -30px;
}

#link .slick-prev {
left: -30px;
}

#link .slick-prev:before,
#link .slick-next:before
{
color: #000;
}