@charset "utf-8";

/*------------------------------------------------------------------------------
  other
------------------------------------------------------------------------------*/

.campuspc-block {background-color: #fff; padding: 20px 0; overflow: hidden; color: #000;}
.campuspc-block a {color: #000; text-decoration: none; transform: unset;}
.campuspc-block img{width:auto; max-width: 100%; height:auto; max-height: 100%; image-rendering: -webkit-optimize-contrast; vertical-align: bottom; -webkit-backface-visibility: hidden;}
.campuspc-block p{line-height: 220%;}
.campuspc-block .type01{margin: 0 0 40px 0;}
.campuspc-block .type02{margin: 0 0 40px 0; height: auto!important;}
.campuspc-block .type03{margin: 0 0 80px 0;}
.campuspc-block .type04{}
.campuspc-block .type05{
 background: /*linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(231,56,39,0) 100%),*/url(../img/bg_01.jpg); 
 background-repeat:  no-repeat; 
 background-position: 0 250px;}
.campuspc-block .type06{height: 220px;}
.campuspc-block .type07{height: 300px;}
.txt_line {background:linear-gradient(transparent 60%, #ffdfef 0%) ;}
.txt-center{text-align: center;}
.cont-block{padding: 20px;}
.cont-block-inner{position: relative; width: 100%;}
.cont-block-inner_other{position: relative; margin: 0 0 50px; width: 100%;}
.cont-block-top{text-align: center;}
.cont-block-top_rogo{width: 400px; margin: 20px auto;}
.cont-block-top_tit{font-size: 24px; font-weight: 800; margin: 0 0 20px;}
.cont-block-top-inner{
position: relative;
background-image: url(../img/kv.jpg);
background-repeat:  no-repeat; 
background-size:  contain; 
height: 850px;
background-position: center;
}
.cont-block-top-inner_rogo{position: absolute; top: 20px; left: 100px; width: 350px!important;}
.cont-block-top-inner_mn01{position: absolute; top: 260px; left: 100px; width: 80px!important;}
.cont-block-top-inner_mn02{position: absolute; top: 260px; left: 198px; width: 80px!important;}
.cont-block-top-inner_pc{position: absolute; top: 380px; left:0; right:0; margin: auto; }
.cont-block-top-inner_txt{position: absolute; top: 260px; left:300px; font-size: 18px; font-weight: 800; text-align: left; line-height: 150%!important;}

.cont-block-pc{width:100%; background-color: #E8F0FF; margin: 0 0 40px;}
.cont-block-pc-inner{position: relative; margin: 0; padding: 20px;}
.cont-block-pc_boder{border: 1px solid #362ae0; padding: 20px 20px 0 20px; background-color: #fff; margin: 0 0 40px;}

.cont-block-pc-left{width: 50%; float: left; text-align: center;}
.cont-block-pc-right{width: 45%; float: right;}
.cont-block-pc-spec_img{}
.cont-block-pc-spec_img img{width: 350px; margin: 0 0 20px;} 
.cont-block-pc-spec_tit{margin: 0 0 10px; font-size: 22px; font-weight: 800;}
.cont-block-pc-spec dd{margin: 0 0 10px; font-size: 15px; }
.cont-block-pc-spec_price {font-size: 36px; color: #FF0004; margin-top: 20px!important;}
.cont-block-pc-spec_price .plice {font-weight: 800; font-size: 40px;}
.cont-block-pc-spec_10ug{font-weight: 800;}
.cont-block-pc-spec_red{color: #FF0004; font-weight: 800; } 
.cont-block-pc-spec_icon{background: #fff; padding: 10px 10px 0 10px;}
.cont-block-pc-spec_icon img{width: 90%;}
.cont-block-rogo{position: absolute; top: 0; width: 300px; left: 100px;}
.cont-block-badge{position: absolute;  top: -10px; width: 380px; left: 40px;}
.cont-block-ms-intel{text-align: center; margin: 150px 0 0; padding: 40px; background-color: #fff;}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
} 
.clearfix:before {
  content: "";
  display: block;
  clear: both;
} 
.clearfix {
  display: block;
}

.tit_h2{font-size: 30px; text-align: center; margin: 20px 0 20px; color: #004098; clear: both; padding: 0 20px; font-weight: bold;}

.tit_h2:after {
    margin: 30px auto 40px;
    display: block;
    width: 100px;
    height: 2px;
    background: #004098;
    content: "";
}

.p-col{letter-spacing:-0.4em;}
.p-col>li{margin:0 2.12% 2.12% 0;display:inline-block;vertical-align:top;letter-spacing:normal;}
.p-col--02>li{width:48.94%;}
.p-col--03>li{width:31.92%;}
.p-col--04>li{width:23.41%;}
.p-col--05>li{width:18.3%;}
.p-col--06>li{width:14.9%;}
.p-col--02>li:nth-child(even),
.p-col--03>li:nth-child(3n),
.p-col--04>li:nth-child(4n),
.p-col--05>li:nth-child(5n),
.p-col--06>li:nth-child(6n){margin:0 0 2.12%;} 




/*------------------------------------------------------------------------------
  anim
------------------------------------------------------------------------------*/

.animation-block {
  opacity: 0; 
  z-index:1;
  position: relative;
}

/* スライドイン */
.animation-block.slide-in-r.is-animated {
  animation: slide-in-r 2.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  position: absolute;
  top: 0;
  right: 0px;
}
.animation-block.slide-in-r {
  width: 40%;
  height: 270px;
  
}
@keyframes slide-in-r {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
.animation-block.slide-in-l.is-animated {
  animation: slide-in-l 2.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  top: 0;
  position: absolute;
}
.animation-block.slide-in-l {
 width: 40%;  
}
@keyframes slide-in-l {
  0% {
    transform: translateX(-180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}



/* ななめから出てくる */
.animation-block.faded-in-rt.is-animated {
  animation: faded-in-rt 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  position: absolute;
  right: 0px; 
}
.animation-block.faded-in-rt {
  width: 60%;
}
.animation-block.faded-in-rt.none {
  width: 50%;
}
@keyframes faded-in-rt {
  0% {
    transform: translate(180px,-50px);
    opacity: 0;
  }
  100% {
    transform: translate(0,0);
  }
  20%,100% {
    opacity: 1;
  }
}

.animation-block.faded-in-rb.is-animated {
  animation: faded-in-rb 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  position: absolute;
  right: 0px; 
}
.animation-block.faded-in-rb {
  width: 60%;
}
.animation-block.faded-in-rb.none {
  width: 50%;
}
@keyframes faded-in-rb {
  0% {
    transform: translate(180px,50px);
    opacity: 0;
  }
  100% {
    transform: translate(0,0);
  }
  20%,100% {
    opacity: 1;
  }
}

.animation-block.faded-in-lb.is-animated {
  animation: faded-in-lb 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
   position: absolute;
}
.animation-block.faded-in-lb {
  width: 60%;
  height: 400px;
}
.animation-block.faded-in-lb.none {
  width: 50%;
}
@keyframes faded-in-lb {
  0% {
    transform: translate(-180px,50px);
    opacity: 0;
  }
  100% {
    transform: translate(0,0);

  }
  20%,100% {
    opacity: 1;
  }
}
.animation-block.faded-in-lt.is-animated {
  animation: faded-in-lt 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
   position: absolute;
}
.animation-block.faded-in-lt {
  width: 60%;
}
.animation-block.faded-in-lt.none {
  width: 50%;
}
@keyframes faded-in-lt {
  0% {
    transform: translate(-180px,-50px);
    opacity: 0;
  }
  100% {
    transform: translate(0,0);
  }
  20%,100% {
    opacity: 1;
  }
}



/* ボタン */
.animation-block.btn {
  opacity: 1;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: solid 1px #004098;
  background-color: #fff;
  font-size: 16px;
  padding: 15px 30px 10px 30px;
  display: block;
  color: #004098;
  text-decoration: none;
  margin: 0 0 10px;

}
.animation-block.btn .large {
  font-size: 20px;
  font-weight: 800;
  display: inline-block;
  float: right;
  margin: 0 20px 0;
}
.animation-block.btn .iiyama {
  font-size: 27px;
  font-weight: 800;
  line-height: 100%;
}
.animation-block.btn .campus {
  font-size: 16px;
  font-weight: 800;
  display: inline-block;
  margin: -5px 5px 0 5px;
  line-height: 100%;
  background-color:#004098;
  color: #fff;
  padding: 10px 10px 7px 10px;
}
.animation-block.btn::before {
 background-color: #9BA3FF;
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 30px;
  height: 100%;
  opacity: 0;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
}
.animation-block.btn:hover::before {
  animation: btn 0.5s linear 1;
}
@keyframes btn {
  0% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  20% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  40% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  80% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

.animation-block_icon:before {
    margin-left: -8px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.animation-block_icon:before {
    content: ' ';
    position: absolute;
    top: 53%;
    right: 2%;
    margin-top: -6px;
    width: 8px;
    height: 8px;
    border-top: solid #004098 2px;
    border-right: solid #004098 2px;
}




/* 文字がぬるりと現れる */
.matrix-block{
  z-index:1;
  position: relative;
}
.matrix-block .bg-wrap,
.matrix-block .bg-wrap .bg-wrap-inner {
  display: block;
}
.matrix-block .bg-wrap {
  opacity: 0;  
}
.matrix-block .bg-wrap .bg-wrap-inner {
  display: block;  
}
.matrix-block .bg-wrap + .bg-wrap {
  margin-top: 10px;
}
.matrix-block .bg-wrap .bg-wrap-inner .bg-wrap-inner_tit {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 10px 0;
}

.matrix-block .bg-wrap .bg-wrap-inner .bg-wrap-inner_txt {
  font-size: 18px;
  margin: 20px 0 0;
}
.matrix-block .bg-wrap .bg-wrap-inner .bg-wrap-inner_top_txt {
  font-size: 16px;
  margin: 20px 0 0;
  width: 60%;
  float: right;
  background-color: #efeae3; 
  padding: 20px;
 
}
.matrix-block .bg-wrap .bg-wrap-inner .bg-wrap-inner_bg_txt {
  font-size: 14px;
}
.matrix-block .bg-wrap .bg-wrap-inner.left_bg {
float: left;
padding: 20px;
margin: 20px 0 0 70px;
background-color: #efeae3; 
width: 50%;  
}
.matrix-block .bg-wrap .bg-wrap-inner.right_bg {
float: right;
padding: 20px;
margin: 20px 70px 0;
background-color: #efeae3;  
width: 50%; 
}
.matrix-block .bg-wrap .bg-wrap-inner.left {
float: left;
width: 40%; 
margin: 100px 0 0;
}
.matrix-block .bg-wrap .bg-wrap-inner.right {
float: right;
width: 40%; 
margin: 100px 0 0;
}
.bg-wrap-inner-nm {
padding: 50px 0 0;
margin: 0 0 50px;
}
.bg-wrap-inner-mn_txt {
float: left;
width: 60%;
}
.bg-wrap-inner-mn_txt dl {
clear: both;
 }
.bg-wrap-inner-mn_txt dt {
float: left;
width: 150px;
}
.bg-wrap-inner-mn_txt dd {
font-size: 28px;
font-weight: bold;
padding: 45px 0 0;
line-height: 150%;
color: #004098;
}
.bg-wrap-inner-mn_img {
float: right;
width: 35%!important;
}




.matrix-block .bg-wrap .bg-wrap-inner {
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 2.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.matrix-block.is-animated .bg-wrap {
  opacity: 1;
}
.matrix-block.is-animated .bg-wrap .bg-wrap-inner {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}


/* ゆらゆら */
.yurayura {
  animation: yurayura 3s infinite ease-in-out .8s alternate;  
  display: inline-block;
  transition: 1.5s ease-in-out;
}
@keyframes yurayura {
  0% {
    transform:translate(0, 0) rotate(0deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(0deg);
  }
}

.yurayura_kaiten {
  animation: yurayura_kaiten 3s infinite ease-in-out .8s alternate;  
  display: inline-block;
  transition: 1.5s ease-in-out;
}
@keyframes yurayura_kaiten {
  0% {
    transform:translate(0, 0) rotate(0deg);
  }
  50% {
    transform:translate(0, 0px) rotate(5deg);
  }
  100% {
    transform:translate(0, 0) rotate(0deg);
  }
}



/* ボーダー */
.stroke {
  max-width: 100%;
  position: relative;
  padding: 30px;
  margin: 0 auto;
  text-align: left;
}
.stroke_txt {
float: left;
}
.stroke_tit_h2 {
 font-size: 24px; 
 margin:0 0 30px 0;
 font-weight: 800;
}
.stroke_list_ul {
font-size: 18px;
}
.stroke_list_ul li{
margin: 0 0 15px;
}
.stroke_pc{
float: right;
width: 40%!important;
}
.stroke .border {
  content: "";
  position: absolute;
  opacity: 0;
}
.stroke .border.top,
.stroke .border.bottom {
  width: calc(100% - 0px);
}
.stroke .border.top {
  border-top: 1px solid #004098;
  right: 0;
  top: 0;
}
.stroke .border.bottom {
  border-bottom: 1px solid #004098;
  left: 0;
  bottom: 0;
}

.stroke .border.right,
.stroke .border.left {
  height: calc(100% - 0px);
}
.stroke .border.right {
  border-right: 1px solid #004098;
  right: 0;
  top: 0;
}
.stroke .border.left {
  border-left: 1px solid #004098;
  left: 0;
  bottom: 0;
}

.stroke.is-animated .border {
  opacity: 1;
}

.stroke.is-animated .border.top,
.stroke.is-animated .border.bottom {
  animation: stroke-width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.stroke.is-animated .border.right,
.stroke.is-animated .border.left {
  animation: stroke-height 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes stroke-width {
  0% {
    width: 0;
    opacity: 1;
  }
  100% {
    width: calc(100% - 0px);
    opacity: 1;
  }
}

@keyframes stroke-height {
  0% {
    height: 0;
    opacity: 1;
  }
  100% {
    height: calc(100% - 0px);
    opacity: 1;
  }
}




@media screen and (max-width:720px){


.cont-block{overflow: hidden;}
.campuspc-block .type05 {
  background: url(../img/bg_01_sp.jpg);
  background-repeat: no-repeat;
  background-position: 0 220px;
  background-size: auto 82%;
}

.campuspc-block .type06{height: auto;}

.campuspc-block .sakura{
height:300px;
width: 100%;
object-fit:cover;
object-position:100% 60%;
}

.cont-block-top{text-align: center;}
.cont-block-top_rogo{width: 60%; margin: 10px auto;}
.cont-block-top_tit{font-size: 18px; font-weight: 800;}
.cont-block-top-inner{
position: relative;
background-image: url(../img/kv_sp.jpg);
background-repeat:  no-repeat; 
background-size:  contain; 
height: 350px;
background-position: center;
}
.cont-block-top-inner_rogo{position: absolute; top: 3%; left:7%; width: 44%!important;}
.cont-block-top-inner_mn01{position: absolute; top: 23%; left: 9%; width: 18%!important;}
.cont-block-top-inner_mn02{position: absolute; top: 23%; left: 30%; width: 18%!important;}
.cont-block-top-inner_pc{position: absolute; top: 45%; left:0; right: 0; margin: auto; width: 80%!important;}
.cont-block-top-inner_txt{position: absolute; top: 38%; left:7%; font-size: 14px; font-weight: 800;}
.cont-block-top-inner_txt br{display: none;}

.tit_h2{font-size: 20px;}

.cont-block-pc-left{width: auto; float: none;}
.cont-block-pc-right{width: auto; float: none;}
.cont-block-pc-spec_img{text-align: center; margin: 0 0 20px;}
.cont-block-pc-spec_img img{width:70%; margin: 0 0 20px;} 
.cont-block-pc-spec_tit{font-size: 20px;}
.cont-block-pc-spec dd{font-size: 14px; }
.cont-block-pc-spec_icon{margin: 0 0 40px;}
.cont-block-pc-spec_icon img{margin: 10px 0;}
.cont-block-pc-spec_10ug{font-weight: 800; font-size: 16px;}
.cont-block-pc-spec_red{color: #FF0004; font-weight: 800; } 
.cont-block-rogo{position: static; text-align: center; width: auto;}
.cont-block-rogo img{width: 80%;}
.cont-block-badge{position: static; text-align: center; width: auto; margin: 20px 0;}
.cont-block-badge img{width: 80%;}
.cont-block-ms-intel{text-align: center; margin: 0; padding: 40px;}

.p-col>li p{font-size: 12px; margin: 10px 0 0;}
.p-col--02>li{width:100%;}
.p-col--02>li:nth-child(even){margin:0 0 2.12%;}
.p-col--03>li{width:100%;}
.p-col--03>li:nth-child(even){margin:0 0 2.12%;}
.p-col--04>li{width:23.41%; display: inline-block; margin:0 2.12% 2.12% 0;}
.p-col--04>li:nth-child(4n){margin:0 0 2.12%;} 
.p-col--04>li:last-child{border-bottom:none;}
.p-col--04>li h3{font-size: 18px; font-weight: 700; text-align: left; padding: 0; height: auto; cursor:auto; margin-bottom: 10px; border-top:none; background:fixed; color: #fff;}
.p-col--04>li .inner li {position: relative;}
.p-col--04>li .inner li a {padding: 0px; background: fixed; border-bottom: none; color: #fff; display: inline;}
.p-col--04>li .inner li:after {content: none; position: static;}


/* スライドイン */
.animation-block.slide-in-r {
  width: auto; 
  height: auto;
}
.animation-block.slide-in-l {
  width: auto;
  height: auto;
}
.animation-block.slide-in-r.is-animated {
  position: static;
}
.animation-block.slide-in-l.is-animated {
  position: static;
}


/* ななめから出てくる */
.animation-block.faded-in-rt.is-animated {
  position: static;
}
.animation-block.faded-in-rt {
  width: auto;
}
.animation-block.faded-in-rt.none {
   width: auto;
}

.animation-block.faded-in-rb.is-animated {
  position: static;
}
.animation-block.faded-in-rb {
  width: auto;
}
.animation-block.faded-in-rb.none {
  width: auto;
}

.animation-block.faded-in-lb.is-animated {
  position: static;
}
.animation-block.faded-in-lb {
  width: auto;
  height: auto;
}
.animation-block.faded-in-lb.none {
    width: auto;
}

.animation-block.faded-in-lt.is-animated {
  position: static;
}
.animation-block.faded-in-lt {
  width: auto;
}
.animation-block.faded-in-lt.none {
    width: auto;;
}




/* ボタン */
.animation-block.btn {
 margin: 0 0 10px;
 padding: 15px 20px 10px 20px;
}
.animation-block.btn .large {
  font-size: 20px;
  display: block;
  float: none;
  margin: 10px 0 0;
}
.animation-block.btn .iiyama {
  font-size: 18px;
  font-weight: 800;
  line-height: 150%;
}
.animation-block.btn .campus {
  font-size: 14px;
  font-weight: 800;
  display: inline-block;
  margin: -5px 5px 0 5px;
  line-height: 100%;
  background-color:#004098;
  color: #fff;
  padding: 10px 10px 7px 10px;
}
.animation-block.btn::before {
 background-color: #9BA3FF;
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 30px;
  height: 100%;
  opacity: 0;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
}
.animation-block.btn:hover::before {
  animation: btn 0.5s linear 1;
}
@keyframes btn {
  0% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  20% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  40% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  80% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

.animation-block_icon:before {
    margin-left: -8px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.animation-block_icon:before {
    content: ' ';
    position: absolute;
    top: 53%;
    right: 3%;
    margin-top: -6px;
    width: 8px;
    height: 8px;
    border-top: solid #004098 2px;
    border-right: solid #004098 2px;
}




/* 文字がぬるりと現れる */

.matrix-block .bg-wrap .bg-wrap-inner .bg-wrap-inner_tit {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 10px 0;
}

.matrix-block .bg-wrap .bg-wrap-inner .bg-wrap-inner_txt {
  font-size: 18px;
  margin: 20px 0 0;
}
.matrix-block .bg-wrap .bg-wrap-inner .bg-wrap-inner_top_txt {
  font-size: 16px;
  margin: 20px 0 0;
  width: auto;
  float: right;
}
.matrix-block .bg-wrap .bg-wrap-inner .bg-wrap-inner_bg_txt {
  font-size: 14px;
}
.matrix-block .bg-wrap .bg-wrap-inner.left_bg {
padding: 20px;
margin: 20px 0;
width: auto;  
}
.matrix-block .bg-wrap .bg-wrap-inner.right_bg {
padding: 20px;
margin: 20px 0;
width: auto;  
}
.matrix-block .bg-wrap .bg-wrap-inner.left {
float: left;
width: auto; 
margin: 10px 0;
}
.matrix-block .bg-wrap .bg-wrap-inner.right {
float: right;
width: auto; 
margin: 10px 0;
}
.bg-wrap-inner-nm {
padding: 50px 0 0;
margin: 0 0 50px;
text-align: center;
}
.bg-wrap-inner-mn_txt {
float: none;
width: auto;

}
.bg-wrap-inner-mn_txt dl {
clear: both;
 }
.bg-wrap-inner-mn_txt dt {
float: left;
width: 150px;
}
.bg-wrap-inner-mn_txt dd {
font-size: 16px;
padding: 60px 0 0;
}
.bg-wrap-inner-mn_img {
float: none;
width: 80%!important;
margin: 20px auto 0 auto;
}




/* ボーダー */
.stroke {
text-align: left;
}
.stroke_txt {
float: none;
}
.stroke_pc{
float: none;
width: 80%!important;
margin: auto;
}
.stroke_tit_h2 {
 font-size: 16px;
 margin:0 0 10px 0;
}
.stroke_list_ul {
font-size: 14px;
}

}


.series_block01 .series_btn_02 {
  position: absolute;
  top: 59px;
  width: 28%;
  left: 10px;
}