@charset "utf-8";
/* CSS Document */


#fv { position: relative;}

/* メインビジュアルスライド
=================================================================== */
#fv .logo { position: absolute; height: 75px; width: 410px; top:30px; left:25px; padding: 0; z-index: 88888;}

@media screen and (max-width: 1120px) {
    #fv .logo { width: 200px; top:10px; left:15px;}
}

#fv #kv {
  position: relative; width: calc(100% - 130px); height: 88vh; background-color: #fff;
  display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex;
  -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center;
  -webkit-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; -moz-align-items: flex-end; align-items: flex-end;
}

@media screen and (max-width: 1120px) {
    #fv #kv { height: 66vh;}
}

@media screen and (max-width: 959px) {
     #fv #kv { height: 480px; width:100%;}
}

@media screen and (max-width: 640px) {
     #fv #kv { height: 360px;}
}

@media screen and (max-width:420px){
    #fv #kv { height: 280px;}
}

/* #side-nav
============================================================== */
#fv #side-nav { position: absolute; right: 0; top: 0; width: 130px; height: calc(88vh - 100px); padding:15px 0; background-color: #fff; text-align: center; z-index: 5;}
#fv #side-nav ul {margin: 10px auto 0 auto;}
#fv #side-nav ul li { position: relative; text-align: center;}
#fv #side-nav ul li:before { content: ''; position: absolute; bottom: 0; display: inline-block; width: 30px; height: 1px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #AAA;}
#fv #side-nav ul li:last-child:before { display: none;}
#fv #side-nav ul li a {display: block; padding:22px 0; font-size: 14px;}
#fv #side-nav ul li a:hover { background: #EEE; text-decoration: none; color: #000;}

@media screen and (max-width: 1120px) {
    #fv #side-nav { height: calc(66vh - 100px)}
    #fv #side-nav ul li a {display: block; padding:12px 0; font-size: 13px;}
}

@media screen and (max-width: 959px) {
    #fv #side-nav {display: none;}
}

header { position: fixed; z-index: 10000; width: 100%; top: 0; animation: FadeIn 0.3s ease 0.1s backwards; background: #fff; text-align: center;}

@media screen and (max-width: 959px) {
  header {top: 0;}
}


@keyframes FadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-content { width: 100%; text-align: center;}

#top-about { width: 100%; margin: 0 auto; padding:20px 0 80px 0; text-align: center;}
#top-about .txt { width:52.6%; padding:0 3%; text-align: center;}
#top-about .txt p{ text-align:left;}
#top-about .btn { margin-top:50px;}
#top-about .photo { width:47.4%; position: relative; height:490px; margin-bottom:30px; overflow: hidden;}
#top-about .photo img { width:100%; height:490px; object-fit: cover; position: absolute; top: 0; left: 0;}
#top-measure {margin-bottom: 20px;}
#top-about .txt {padding-top: 20px;}

@media only screen and (min-width: 960px) {
    #top-about .title { width:100%; margin-bottom:50px; padding:0 0 0 16.5%; font-size:32px; font-weight: bold; position: relative; display: inline-block; text-align: right; line-height: 1.2;}
    #top-about .title:before { content: ''; position: absolute; top: 50%; display: inline-block; width: 16%; height: 1px; background-color: #000; left:0;}
    #top-about #top-consortium .title{ padding:0 0 0 26.5%;}
    #top-about #top-consortium .title:before {width: 26%;}
}

@media only screen and (max-width: 959px) {
    #top-about { padding:0 0 40px 0;}
    #top-about .title { width:100%; margin-bottom:50px; padding:0; font-size:25px; font-weight: bold; position: relative; text-align: center; line-height: 1.2;}
    #top-about .title:before { content: ''; position: absolute; bottom: -15px; display: inline-block; width: 60px; height: 1px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #000;}
    #top-about .txt { width:100%; margin-bottom: 30px;}
    #top-about .btn { margin-top:20px;}
    #top-about .photo { width:100%; height:320px; margin-bottom:0px;}
    #top-about .photo img { height:320px;}
}

#top-how { width: 100%; margin: 0 auto; padding: 85px 0 80px 0; background: url("../images/top_how_bg.jpg") repeat center bottom;}
#top-how .title { position: relative; display: inline-block; width: 100%; margin: 0 auto; font-size: 25px; text-align: center; color: #fff; margin-bottom:80px; letter-spacing: 0.1em; line-height: 1.3;}
#top-how .title span { font-size: 160%;}
#top-how .title:before { content: ''; position: absolute; top: -40px; display: inline-block; width: 60px; height: 1px; left: calc(50% - 30px); background-color:#BFCCD9; -webkit-transform: rotate(-90deg); transform: rotate(-90deg);}
#top-how .flex { width: 94%; max-width: 1400px; margin: 0 auto; align-items: stretch;}
#top-how .item { position: relative; width: 22.86%; max-width: 320px; background: #fff; margin: 0; padding:15px 20px 70px 20px; }
#top-how .item .cat{ position: absolute; top: -1.1em; left: 0; font-size: 27px; font-weight: bold; color: #AFBFCF;}
#top-how .item .num{ width: 100%; height: 250px; padding:12px;}
#top-how .item .num img { float: left; width: 134px; max-width: 60%; padding-top: 20px;}
#top-how .item h3 { float: right; width: 1em; writing-mode: vertical-rl; font-size: 28px; font-weight: bold; letter-spacing: 0.05em;}
#top-how .item p {clear: both; text-align: left;}
#top-how .item a { position: absolute; left: 0; right: 0; bottom: 15px; display: inline-block; width:90%; height: 50px; margin: 0 auto; padding: 0; font-weight: bold; background-color: #00103F; color: #FFF; text-align: center; text-decoration: none; transition: all .3s; line-height:50px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);}
#top-how .item a:after { position: absolute; right: 10px; font-family: "Font Awesome 5 Free"; content: "\f054"; font-size:16px; font-weight: 900; color: #AFBFCF; transition: all .3s;}
#top-how .item a:hover { background-color: #008CC8; color: #FFF;}
#top-how .item a:hover:after { color: #FFF;}

@media only screen and (max-width: 959px) {
    #top-how { padding: 85px 0 40px 0;}
    #top-how .flex { max-width: 700px; margin: 0 auto;}
    #top-how .item { width: 48%; margin-bottom: 35px;}
    #top-how .item .num{  height: 200px;}
    #top-how .item h3 {font-size: 21px;}
}

@media only screen and (max-width:640px) {
    #top-how .title { font-size: 16px;}
}

@media only screen and (max-width: 480px) {
    #top-how .item { width: 100%; margin-right:auto; margin-left: auto;}
}

#top-topics { width: 100%; margin: 0 auto; padding: 85px 0 80px 0; background: #F4F4F4;}
#top-topics .title { position: relative; display: inline-block; width: 100%; margin: 0 auto; font-size: 21px; text-align: center; color: #000; margin-bottom: 50px; letter-spacing: 0.1em; line-height: 1.3;}
#top-topics .title span { font-size: 182%;}
#top-topics .title:before { content: ''; position: absolute; top: -40px; display: inline-block; width: 60px; height: 1px; left: calc(50% - 30px); background-color:#0086C1; -webkit-transform: rotate(-90deg); transform: rotate(-90deg);}
#top-topics #news-list { width: 94%; max-width: 1400px; margin: 0 auto 40px auto;}
#top-topics #news-list:after { content:" "; display:block; clear:both;}
#top-topics .post { width: 31.5%; max-width: 430px; background: #fff; margin: 0; padding:30px; }
#top-topics .thumbnail { position: relative; width:100%; height:214px; margin-bottom:15px; overflow: hidden;}
#top-topics .thumbnail img { width:100%; height:100%; object-fit: cover; position: absolute; top: 0; left: 0;}
#top-topics .entry-meta{ width: 100%; margin-bottom: 20px;}
#top-topics .cat { float: left; width: 100px; height: 30px; margin-bottom: 10px;}
#top-topics .cat a { width: 100px; height: 30px; font-size: 14px; font-weight: bold; color: #fff; text-align: center; background: #00B0F0; line-height: 30px; display: block;}
#top-topics .entry-date { float: right; width: 120px; padding:0; text-align: right; font-size: 13px; color: #002134; line-height: 30px;}
#top-topics h2.entry-title { clear: both; text-align: left;}
#top-topics h2.entry-title a { text-decoration: none;}
#top-topics h2.entry-title a:hover { text-decoration: underline;}

@media only screen and (max-width: 959px) {
    #top-topics { padding: 85px 0 40px 0;}
    #top-topics .thumbnail {height: 140px;}
}

@media only screen and (max-width:640px) {
    #top-topics #news-list { margin: 0 auto 20px auto;}
    #top-topics .title { font-size: 16px;}
    #top-topics .post { width: 100%; margin-bottom: 20px; }
    #top-topics .thumbnail {height: 214px;}
}

#top-relation { width: 100%; margin: 0 auto; padding: 80px 0 80px 0;}
#top-relation .title{ position: relative; display: inline-block; width: 100%; text-align: center; margin-bottom:70px; font-size: 30px; letter-spacing: 0.1em; line-height: 1;}
#top-relation .title:before { content: ''; position: absolute; bottom: -15px; display: inline-block; width: 60px; height: 1px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #0086C1;}
#top-relation .flex { width: 94%; max-width: 1000px; margin: 0 auto; text-align: center; }
#top-relation .flex a {max-width: 30%;}

@media only screen and (max-width: 959px) {
    #top-relation { padding: 40px 0;}
}

@media only screen and (max-width: 480px) {
    #top-relation .flex a { max-width:100%; margin:0 auto 20px;}
}