#mainvisual{
  position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
}
/*
#mainvisual .video-area{
  overflow: hidden;
}
#mainvisual .video {
  width: 100%;
  height:min(50vw , 100%);
}
#mainvisual #sound-button{
  width:70px;
  position:absolute;
  color:#FFFFFF;
  background:#00000033;
  top:5px;
  left:5px;
  text-align:center;
  padding:0 5px;
}
#mainvisual #sound-button::before{
  content: "";
  display: block;
  margin: 5px auto 5px;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#mainvisual .sound-on::before{
  background: url("../img/common/icon-soundon.svg");
}
#mainvisual .sound-off::before{
  background: url("../img/common/icon-soundoff.svg");
}
@media (min-width: 768px){
  #mainvisual #sound-button{
    width:80px;
  }
  #mainvisual #sound-button::before{
    width: 40px;
    height: 40px;
  }
}
#mainvisual .visual-area{
  overflow: hidden;
}
*/
#mainvisual .visual{
  width: 100%;
  height:min(50vw , 100%);
}
#mainvisual .visual img{
  width: 100%;
}

#mainvisual .banner{
  width:37.5%;
  max-width:375px;
  position:absolute;
  bottom:20px;
  right:20px;
  margin:0;
}
#mainvisual .visual-pc{
  display:none;
}
@media (min-width: 554px){
  #mainvisual .visual-pc{
    display:block;
  }  
  #mainvisual .visual-sp{
    display:none;
  }
  
  #mainvisual .banner{
    width:20%;
  }
}



#topics .inner{
  max-width:100%;
  padding-right:0;
  padding-left:0;
}
#topics .slider{
  opacity: 0;
  transition: opacity .3s linear;
}
#topics .slider.slick-initialized{
  opacity: 1
}
#topics .slick-slide{
  margin: 0 20px;
  overflow: hidden;
}
#topics .slick-slide img{
}
#topics .slick-slide img:hover{
  -webkit-transition:all 0.3s ease 0s;
  -moz-transition:all 0.3s ease 0s;
  -o-transition:all 0.3s ease 0s;
  transition:all 0.3s ease 0s;
  transform:scale(1.05);
}
@media (min-width: 992px){
  #topics .inner{
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
  }
}


#features .wrapper{
  background: url("../img/home/bg-features.jpg");
  background-color:#FFFFFFAA;
  background-blend-mode:lighten;
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  overflow-x: hidden;
  padding:5% 0 2.5%;
}
#features .about .lead{
  position:relative;
  display: inline-block;
  font-size:clamp(2.2rem , 3.9712vw, 6.4rem);
  color:#FFFFFF;
  border-left:1px solid #002F7C;
  border-right:1px solid #002F7C;
	background: #002F7C;
  line-height:1;
  padding:0.25em 0;
}

#features .about .lead::before,
#features .about .lead::after{
  position: absolute;
  top: 0;
  bottom: 0;
  content: "";
  width: 100vw;
  background: #002F7C;
}
#features .about .lead small{
  font-size:40%;
}
#features .about .content-item:nth-child(1) .lead{
  margin-bottom:0.5em;
  padding:0.15em 0.5em 0.15em 1em;
}
#features .about .content-item:nth-child(1) .lead::before{
  left:auto;
  right:100%;
}
#features .about .content-item:nth-child(1) .lead::after{
  content:none;
}
#features .about .content-item:nth-child(2) .lead{
  margin-bottom:1em;
  padding:0.15em 0.5em 0.15em 1em;
}
#features .about .content-item:nth-child(2) .lead::before{
  left:auto;
  right:100%;
}
#features .about .content-item:nth-child(2) .lead::after{
  content:none;
}
#features .about .content-item:nth-child(3){
  text-align:right;
}
#features .about .content-item:nth-child(3) .lead{
  margin-left:3em;
  margin-bottom:1em;
  padding:0.15em 1em 0.15em 0.5em;
}
#features .about .content-item:nth-child(3) .lead::before{
  content:none;
}
#features .about .content-item:nth-child(3) .lead::after{
  left:100%;
  right:auto;
}
@media (min-width: 768px){
  #features .wrapper{
    background-position: bottom center;
    background-color:inherit;
    background-blend-mode:normal;
  
  }
}
@media (min-width: 992px){
  #topics .slider{
    margin:0;
  }
}
@media (min-width: 1400px){
  #features .about .content-item:nth-child(1) .lead{
    padding:0.15em 1em 0.15em 0;
  }
  #features .about .content-item:nth-child(2) .lead{
    padding:0.15em 1em 0.15em 0;
  }
  #features .about .content-item:nth-child(3) .lead{
    padding:0.15em 0 0.15em 1em;
  }
}


#features .k3{
  position:relative;
}
#features .k3 .content-item{
  width:100%;
  max-width:480px;
  margin:100px auto 0;
  padding:5% 0 5%;
}
#features .k3 .content-item::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:-100px;
  width:95px;
  height:105px;
  background:url(../img/common/icon-k3.svg);
  background-repeat: no-repeat;
  background-size:95px 105px;
  margin:auto;
}
#features .section-title{
  display: block;
  font-weight:700;
  color:#002F7C;
  margin-bottom:0.5em;
}
#features .section-title span{
  letter-spacing:-0.1em;
}
#features .section-title::after{
  content:none;
}
#features .textarea{
  max-width:440px;
  margin:auto;
}
#features figure{
  margin:5%;
}
#features .text{
  font-size:clamp(1.6rem , 2.0833vw , 2.4rem);
  text-align:center;
}
#features .link{
  max-width:75vw;
  margin:2.5% auto;
}
#features .link-features{
  position:relative;
  margin:0.5em 0;
  padding:0.5em 0;
}
#features .link-features::before{
  position:absolute;
  left:-1.5em;
  top:0;
  bottom:0;
  width:3em;
  height:2px;
  content:"";
  background-color:#565656;
  margin:auto;
}
#features .icon-question::after{
  content:'';
  display: inline-block;
  vertical-align: top;
  width:1em;
  height:1em;
  background:url(../img/home/icon-question.svg);
  background-repeat: no-repeat;
  background-size:contain;
  margin-left:0.25em;
}
#features .icon-exclamation::after{
  content:'';
  display: inline-block;
  vertical-align: top;
  width:1em;
  height:1em;
  background:url(../img/home/icon-exclamation.svg);
  background-repeat: no-repeat;
  background-size:contain;
  margin-left:0.25em;
}

@media (min-width: 768px){
  #features .k3 .content-item{
    background-color:#FFFFFF;
    position:relative;
    margin:0 0 5% auto;
    padding:5% 0;
  }
  #features .k3 .content-item::before{
    left:-24.572vw;
    right:auto;
    top:0;
    bottom:0;
    max-width:420px;
    max-height:450px;
    width:20.572vw;
    height:22.447vw;
    background-size:cover;
  }
  #features .text{
    width:17em;
    text-align:left;
    margin:auto;
  }
}
@media (min-width: 992px){
  #features .k3 .content-item{
    max-width:560px;
  }
}

#performance .wrapper{
  background: url("../img/home/bg-performance.jpg");
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  padding-top:40vw;
}
#performance .content-block{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width:100%;
  max-width:400px;
  background-color:#49B1B2E0;
  margin-left:auto;
  margin-right:auto;
  padding:5% 5% 2.5%;
}
#performance .section-title{
  color:#FFFFFF;
  font-weight:700;
  height:auto;
  line-height:1.4;
  margin-bottom:0.4em;
}
#performance .section-title::after{
  content:none;
}
#performance .text{
  font-size:clamp(1.8rem , 3.2491vw , 2.4rem);
  font-weight:700;
  line-height:1.4;
  letter-spacing:0.1em;
  color:#FFFFFF;
}
#performance .link-campusmap{
  position:relative;
  font-size:clamp(1.6rem , 2.0833vw , 2.0rem);
  max-width:72.5vw;
  margin:1em auto 0;
  padding:0.5em 0;
}
#performance .link-campusmap::before{
  position:absolute;
  left:-1.5em;
  top:0;
  bottom:0;
  width:3em;
  height:2px;
  content:"";
  background-color:#565656;
  margin:auto;
}
@media (min-width: 768px){
  #performance .wrapper{
    background-size: cover;
    background-position: center left;
    height:380px;
    margin-left:0;
    padding-right:0;
    padding-top:0;
  }
  #performance .inner{
    position:relative;
    height:100%;
  }
  #performance .content-block{
    position:absolute;
    top:-15px;
    left:15px;
    height:410px;
    margin-left:0;
  }
  #performance .text{
    line-height:1.8;
  }
}
@media (min-width: 1200px){
  #performance .wrapper{
    margin-left:7.5vw;
    padding-right:7.5vw;
  }
}

#campusmap .wrapper{
  background: url("../img/home/bg-campusmap.jpg");
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  padding-top:40vw;
}
#campusmap .content-block{
  position:relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width:100%;
  max-width:400px;
  background-color:#49B1B2E0;
  margin-left:auto;
  margin-right:auto;
  padding:5% 5% 2.5%;
}
#campusmap .content-block::before{
  position:absolute;
  top:1rem;
  left:1rem;
  display:flex;
  justify-content:center;
  align-items:center;
  content:'NEW!';
  width:6rem;
  height:6rem;
  background-color:#CEC136;
  border-radius:50%;
  font-size:2rem;
  font-family: "din-2014-narrow", sans-serif;
}
#campusmap .section-title{
  color:#FFFFFF;
  font-weight:700;
  height:auto;
  line-height:1.4;
  margin-bottom:0.4em;
}
#campusmap .section-title::after{
  content:none;
}
#campusmap .text{
  font-size:clamp(1.8rem , 3.2491vw , 2.4rem);
  font-weight:700;
  line-height:1.4;
  letter-spacing:0.1em;
  color:#FFFFFF;
}
#campusmap .link-campusmap{
  position:relative;
  font-size:clamp(1.6rem , 2.0833vw , 2.0rem);
  max-width:72.5vw;
  margin:1em auto 0;
  padding:0.5em 0;
}
#campusmap .link-campusmap::before{
  position:absolute;
  left:-1.5em;
  top:0;
  bottom:0;
  width:3em;
  height:2px;
  content:"";
  background-color:#565656;
  margin:auto;
}
@media (min-width: 768px){
  #campusmap .wrapper{
    background-size: cover;
    background-position: center right;
    height:415px;
    margin-right:0;
    padding-left:0;
    padding-top:0;
  }
  #campusmap .inner{
    position:relative;
    height:100%;
  }
  #campusmap .content-block{
    position:absolute;
    bottom:-15px;
    right:15px;
    height:400px;
    margin-right:0;
  }
  #campusmap .content-block::before{
    width:9rem;
    height:9rem;
    font-size:3.0rem;
  }
  #campusmap .text{
    line-height:1.8;
  }
}
@media (min-width: 1200px){
  #campusmap .wrapper{
    margin-right:7.5vw;
    padding-left:7.5vw;
    padding-top:0;
  }
}


#news .tab{
  max-width:100%;
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
  margin:0 auto 30px;
}
#news .tab li{
  width:calc(100% / 5);
}
#news .tab li a{
  display: block;
  font-size:clamp(1.0rem , 1.8051vw , 1.6rem);
  text-align:center;
  color: #002F7C;
  border:1px solid #002F7C;
  border-right:none;
  background:#FFFFFF;
  transition: .3s;
  padding:1.25em 0;
}
#news .tab li a:hover {
  color: #fff;
  background: #666;
}
#news .tab li:last-child a{
  border-right:1px solid #002F7C;
}
#news .tab li.active a{
  color:#FFFFFF;
  background: #002F7C;
}
#news .area {
  display: none;
  opacity: 0;
}
#news .area.is-active {
  display: block;
  animation-name: displayAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@keyframes displayAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#news .slider{
  margin: auto;
  opacity: 0;
  transition: opacity .3s linear;
}
#news .slider.slick-initialized{
  opacity: 1
}
#news .slick-track {
  display: flex;
}
#news .slick-slide {
  height: auto !important;
}
#news .slick-slide > a{
  display: flex;
  justify-content: center;
  height:100%;
}

#news .wrapper{
  background-color:#EAEAEA;
  padding:2.5% 0 20px;
}
#news .news-item{
  display: flex;
  flex-direction: column;
  background:#FFFFFF;
  box-shadow:rgba(0, 0, 0, 0.15) 4.8px 4.8px 6.4px;
  margin:2.5%;
}
#news .thumbnail img{
  width:100%;
  height:calc((100vw - 50px) / 1 * 0.66);
  object-fit:contain;
  object-position:top;
  margin:auto;
}
#news .news-title{
  font-size:1.6rem;
  line-height:1.4;
  margin-bottom:20px;
}
#news .news-bottom{
  display: flex;
  flex:auto;
  flex-direction: column;
  padding:4%;
}
#news .news-bottom{
}
#news .news-bottom .excerpt{
  line-height:1.4;
  margin:0 0.75em 1.25em;
}
#news .news-bottom .news-date{
  font-size:1.2rem;
  margin-top:auto;
}
#news .link{
  max-width:420px;
  margin:5% auto 0;
}
#news .link-news{
  position:relative;
  font-size:clamp(1.6rem , 2.0833vw , 2.0rem);
  color:#333333;
  background-color:#CEC136;
  max-width: 72.5vw;
  margin:1em auto 0;
  padding:0.5em 0;
}
#news .link-news::before{
  position:absolute;
  left:-2.25em;
  top:0;
  bottom:0;
  width:4em;
  height:2px;
  content:"";
  background-color:#565656;
  margin:auto;
}
@media (min-width: 554px){
  #news .thumbnail img{
    height:calc((100vw - 50px) / 2 * 0.66);
  }
}
@media (min-width: 768px){
  #news .tab li a{
    padding:0.25em 0;
  }
  #news .tab li a{
    min-width:8em;
    padding:0.5em 1.75em;
  }
  #news .thumbnail img{
    height:calc((100vw - 75px) / 3 * 0.66);
  }
}
@media (min-width: 992px){
  #news .thumbnail img{
    height:calc((100vw - 75px - 130px) / 3 * 0.66);
  }
}
@media (min-width: 1200px){
  #news .thumbnail img{
    height:175px;
  }
}

#guide .section-title{
  font-weight:700;
}
#guide .content-block{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
#guide .content-item{
  position:relative;
  width:48.875%;
  margin:1.125% 0;
  line-height:0;
}
#guide .content-item:first-child{
  width:100%;
}
#guide .content-item .title{
  display: flex;
  justify-content: center;
  align-items:center;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  font-size:clamp(1.6rem , 2.8881vw , 3.2rem);
  letter-spacing:0.2rem;
  color:#FFFFFF;
  background-color:#00000033;
  text-decoration: underline;
  text-underline-offset:0.25em;
  margin:auto;
}
@media (min-width: 768px){
  #guide .content-item .title{
    letter-spacing:0.5rem;
    font-weight:600;
  }
}


#click{
  border-top:25px solid #002F7C;
  margin:0;
  padding:25px 0;
}
#click .sns{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:1em auto;
}
#click .sns img{
  width:40px;
  margin:0 10px;
  height:auto;
}
#click .lead{
  font-size:clamp(1.8rem , 3.2491vw , 2.8rem);
  letter-spacing:0.2rem;
  color:#49B1B2;
}
#click .section-title::after{
  content:none;
}
#click .box1{
  display: inline-block;
  position: relative;
  padding: 0 0.5em;
}
#click .box1:before {
  position: absolute;
  left: 0;
  bottom: -2px;
  content: "";
  width: 2px;
  height: 50%;
  background: #000000;
  border-radius: 3px;
  transform: rotate(-45deg);
}
#click .box1:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: -2px;
  width: 2px;
  height: 50%;
  background: #000000;
  border-radius: 3px;
  transform: rotate(45deg);
}
#click .box2{
  display: inline-block;
  position: relative;
  padding: 0 1em;
}
#click .box2:before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 2px;
  height: 100%;
  background: #000000;
  border-radius: 3px;
  transform: rotate(-25deg);
}
#click .box2:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: #000000;
  border-radius: 3px;
  transform: rotate(25deg);
}
#click .underline{
  border-bottom:5px solid #CEC136;
}
@media (min-width: 768px){
  #click .sns{
    max-width:215px;
    justify-content:space-between;
  }
  #click .sns img{
    width:45px;
    margin:0;
  }
  #click .lead{
    letter-spacing:0.5rem;
  }
}