@charset "utf-8";

/* ------- INDEX ---------------------------------------------- */
.view-section-wrap{
  counter-reset: number 0;
}
.view-section .image{
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.view-section .video-box{
  overflow: hidden;
  position: relative;
}
.view-section .video-box > video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}
.view-section .image .catch,
.view-section .video-box .catch{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
}
.view-section .view-section-heading > p{
  color: #0CB4ED;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
}
.view-section .view-section-heading > p:after{
  counter-increment: number 1;
  content: counter(number,decimal-leading-zero);
}
.view-section .view-section-heading > h2{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  line-height: 1.66;
}
.view-section .view-section-heading > h2 > span{
  display: inline-block;
}
.view-section .view-section-heading > h2 b{
  color: #0CB4ED;
  font-weight: 700;
}
.view-data > p{
  font-weight: 400;
}
.view-data a{
  color: #3681A0;
  text-decoration: underline;
}

#view-section1 .image{
  background-image: url("../img/section01.jpg");
}
#view-section2 .video-box .catch{
  width: 33.89%;
}
#view-section3 .image{
  background-image: url("../img/section03.jpg");
}
#view-section3 .image .catch{
  width: 55.85%;
}
#view-section4 .image{
  background-image: url("../img/section04.jpg");
}
#view-section4 .image .catch{
  width: 50.8%;
}
#view-section5 .image{
  background-image: url("../img/section05.jpg");
}
#view-section5 .image .catch{
  width: 28.11%;
}
#view-section6 .image{
  background-image: url("../img/section06.jpg");
}
#view-section6 .image .catch{
  width: 44.73%;
}
#view-section7 .image{
  background-image: url("../img/section07.jpg");
}
#view-section7 .image .catch{
  width: 17.2%;
}
@media print, screen and (min-width:781px) {
  .view-section-wrap{
    margin-top: 120px;
  }
  .view-section .image,
  .view-section .video-box{
    padding-bottom: 50.36%;
  }
  .view-section .image .catch,
  .view-section .video-box .catch{
    transform: translate(-50%,-57.9%);
  }
  .view-section .video-box > video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
  }
  .view-data{
    background-color: #FFF;
    margin-left: auto;
    margin-right: auto;
    margin-top: -55px;
    padding: 30px 80px 100px;
    width: 80%;
    max-width: 1080px;
    position: relative;
  }
  .view-section .view-section-heading{
    text-align: center;
  }
  .view-section .view-section-heading > p{
    font-size: 1.6rem;
  }
  .view-section .view-section-heading > h2{
    font-size: 3.8rem;
    margin-top: 10px;
  }
  .view-data > p{
    font-size: 2.0rem;
    margin-top: 50px;
  }
  .view-data .note-list{
    margin-top: 20px;
  }
  .view-data .note-list > li{
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 780px) {
  .view-section-wrap{
    margin-top: 60px;
  }
  .view-section{
    padding-bottom: 60px;
  }
  .view-section:last-child{
    padding-bottom: 0;
  }
  .view-section .image,
  .view-section .video-box{
    padding-bottom: 50.25%;
    order: 1;
  }
  .view-section .image .catch,
  .view-section .video-box .catch{
    transform: translate(-50%,-50%);
  }
  .view-section .video-box > video {
    width: 100%;
  }
  .view-data{
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 30px;
    position: relative;
  }
  .view-section .view-section-heading > p{
    font-size: 1.4rem;
  }
  .view-section .view-section-heading > h2{
    font-size: 2.2rem;
    margin-top: 10px;
  }
  .view-data > p{
    margin-top: 25px;
  }
  .view-data .note-list{
    margin-top: 20px;
  }
  .view-data .note-list > li{
    font-size: 1.3rem;
  }
}
@media (hover: hover) and (pointer: fine){
  .view-data a:hover{
    text-decoration: none;
  }
}