@charset "utf-8";

@media screen and ( min-width:760px ) { /* PC === */
  #content-wapper{
    padding:80px 0 0 0;
  }
}
@media screen and ( max-width:759.98px ) { /* SP  === */
  #content-wapper{
    padding:40px 0 0 0;
  }
}

@media screen and ( min-width:760px ) { /* PC === */
  .mov01{
    padding-top:100px;
  }
  .mov02{
    padding-top:40px;
  }
}
@media screen and ( max-width:759.98px ) { /* SP  === */
  .mov01{
    padding-top:50px;
  }
  .mov02{
    padding-top:20px;
  }
}

.prologue-tit{
  width:270px;
}
@media screen and ( min-width:760px ) { /* PC === */
  .prologue-tit{
    margin:100px auto 20px;
  }
}
@media screen and ( max-width:759.98px ) { /* SP  === */
  .prologue-tit{
    margin:50px auto 10px;
  }
}

.arrow-open{
  width:80px;
  margin:0 auto;
}

.title {
  position: relative;
  cursor: pointer;
  transition: all .5s ease;
}
.title::before,
.title::after {
  position: absolute;
  content: '';
}
.box {
  display: none;
}

.content-body h2{
  line-height:1.2;
  color:#b70000;
  padding:0;
  font-weight:normal;
}
@media screen and ( min-width:760px ) { /* PC === */
  .content-body h2{
    margin-top:140px;
  }
}
@media screen and ( max-width:759.98px ) { /* SP  === */
  .content-body h2{
    margin-top:70px;
  }
}
.content-body h2 span{
  font-family:"octin-college", sans-serif;
  font-weight:700;
  font-style:normal;
  color:#fff;
  display:block;
  padding:0;
}
@media screen and ( min-width:760px ) { /* PC === */
  .content-body h2 span{
    font-size:50px;    
  }
}
@media screen and ( max-width:759.98px ) { /* SP  === */
  .content-body h2 span{
    font-size:30px;    
  }
}

@media screen and ( min-width:760px ) { /* PC === */
  .prologue{
    width:580px;
  }
}
@media screen and ( max-width:759.98px ) { /* SP  === */
  .prologue{
  }
}
@media screen and ( min-width:760px ) { /* PC === */
  .prologue{
    margin:60px auto 0;
  }
}
@media screen and ( max-width:759.98px ) { /* SP  === */
  .prologue{
    margin:30px auto 0;
  }
}
@media screen and ( min-width:760px ) { /* PC === */
  .prologue_txt{
    margin-top:60px;
  }
  .prologue_txt p{
    margin-bottom:40px;
  }
}
@media screen and ( max-width:759.98px ) { /* SP  === */
  .prologue_txt{
    margin-top:30px;
  }
  .prologue_txt p{
    margin-bottom:20px;
  }
}

@media screen and ( min-width:760px ) { /* PC === */
  .lineup{
    margin-top:40px;
  }
}
@media screen and ( max-width:759.98px ) { /* SP  === */
  .lineup{
    margin-top:20px;
  }
}
.lineup ul{
  max-width:860px;
  margin:0 auto;
}
.lineup ul li{
  float: left;
  line-height:1.2;
}
@media screen and ( min-width:760px ) { /* PC === */
  .lineup ul li img{
    margin-bottom:15px;
  }
}
@media screen and ( max-width:759.98px ) { /* SP  === */
  .lineup ul li img{
    margin-bottom:10px;
  }
}
@media screen and ( min-width:760px ) { /* PC === */
  .lineup ul li{
    margin:10px 0;
    width: calc(33.33% - 20px);
  }
  .lineup ul li:nth-child(3n+1){
    margin-right:30px;
  }
  .lineup ul li:nth-child(3n){
    float:right;
  }
}
@media screen and ( max-width:759.98px ) { /* SP  === */
  .lineup ul li{
    margin:10px 0;
    width: calc(50% - 10px);
  }
  .lineup ul li:nth-child(2n){
    float:right;
  }
}

@media screen and ( min-width:760px ) { /* PC === */
  .CorrelationDiagram{
    margin:40px 0 140px 0;
  }
}
@media screen and ( max-width:759.98px ) { /* SP  === */
  .CorrelationDiagram{
    margin:20px 0 70px 0;
  }
}