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

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
body article{
 padding-top:0;}

#main{}

#main .inner{
 font-size: 1.4rem ;}

#main #sec01{
 background-image: url("/migration/jp/assets/img/special/contest/train2022/collaboration/main.jpg") ;
 background-position: center center ;
 background-repeat: no-repeat ;
 background-size: cover ;
 margin: 0 auto ;}

#main #sec01 .inner{
 max-width: 100% ;
 padding: 0 ;
 position: relative ;
 z-index: 100 ;}

#main #sec01 .obi{
 background: rgba(0,0,18,0.52) ;
 box-sizing: border-box ;
 margin: 0 auto 70px auto ;}

#main #sec01 .obi .obi_inner{
 position: relative ;
 max-width: 1200px ;
 padding: 15px 0 ;
 margin: 0 auto ;}

#main #sec01 .obi p{
 color: #ffffff ;
 font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif" ;
 font-size: 1.8rem ;}

#main #sec01 .rogo{
 position: absolute ;
 top: 0 ;
 right: 0 ;
 background: #ffffff ;
 padding: 15px ;
 box-sizing: border-box ;}

#main #sec01 .rogo img{
 max-width: 100% ;}
 
#main #sec01 .catch{
 text-align: center ;
 margin: 0 auto 70px auto ;}

#main #sec01 .catch img{
 max-width: 100% ;}

#main #sec01 .limit{
 text-align: center ;
 margin: 0 auto 0 auto ;}

#main #sec01 .limit img{
 max-width: 100% ;}

#main #sec02{
 z-index: 10 ;
 background: #E70012 ;
 margin: -20px auto 0;
 padding: 50px 0 50px;}

#main #sec02 .inner{
 max-width: 900px ;}

#main #sec02 p{
 color: #ffffff ;
 font-size: 2rem ;
 line-height: 2 ;}

#main #sec03{
 background-image: url("/migration/jp/assets/img/special/contest/train2022/collaboration/main2.jpg") ;
 background-position: center center ;
 background-repeat: no-repeat ;
 background-size: cover ;
 padding: 140px 0 ;}

#main #sec03 .inner{
 max-width: 900px ;}

#main #sec03 p{
 color: #ffffff ;
 font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif" ;
 text-align: center ;
 font-size: 5.2rem ;}

#main .sec_block.body{
 padding: 50px 0 ;
 margin: 0 auto ;}

#main .sec_block.body.bg2{
 background: rgba(196,175,150,0.2);}

#main .sec_block.body.contact.active{
 background: rgba(196,175,150,0.2);}

#main .sec_block.body .inner{
 max-width: 900px ;}

#main .sec_block.body .inner .title{
 color: #005bac ;
 font-size: 2.1rem ;
 font-weight: bold ;
 padding: 0 0 10px 0 ;
 margin: 0 auto 15px auto ;
 border-bottom: 2px solid #000000 ;}

#main .sec_block.body .inner .body{
 font-size: 1.7rem ;
line-height: 1.6 ;}

#main .sec_block.body .inner .body p{
 word-break: break-all ;
 margin: 0 auto 15px auto ;}

#main .sec_block.body .inner .body a{
 text-decoration: underline ;
 color: #0071FF ;}

#main .sec_block.body .inner .body strong{
 text-decoration: underline ;
 color: #FF0000 ;}

#main .sec_block.body .inner .body ul{
 margin: 0 auto 15px auto ;}

#main .sec_block.body .inner .body ul li{
 word-break: break-all ;
 position: relative ;
 padding: 0 0 0 2rem ;
 margin: 0 auto 5px auto ;}

#main .sec_block.body .inner .body ul li:before{
 position: absolute ;
 top: -1px ;
 left:  0;
 content: '・';}

#main .sec_block.body .inner .body ul.subli li:before{
 display: none ;}

#main .sec_block.body .inner .body ul.subli li{
 text-indent: -2rem ;}

#main .sec_block.body .inner .body dl{
 display: flex ;
 justify-content: space-between ;}

#main .sec_block.body .inner .body dl dt{
 flex-basis: 140px ;}

#main .sec_block.body .inner .body dl dd{
 flex-basis: calc(100% - 150px) ;}

#main .sec_block.body .inner .btn{}

#main .sec_block.body .inner .btn a{
 position: relative ;
 display: block ;
 width:100% ;
 padding: 30px 0 ;
 text-align: center ;
 border: 2px solid #000000 ;
 background: #ffffff ;
 font-size: 2rem ;
 font-weight: bold ;
 color: #000000 ;}

#main .sec_block.body .inner .btn a::before{
 position: absolute ;
 content: '' ;
 display: block ;
 right: 30px;
 top: 30% ;
 width: 25px;
 height: 25px;
 border-top: 1px solid #000000;
 border-right: 1px solid #000000;
 -webkit-transform: rotate(135deg);
 transform: rotate(135deg);}

#main .sec_block.body .inner .btn a.active::before{
 top: 40% ;
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);}


#main .box{
 display: none ;}

#main .box.active{
 display: block ;}

@media screen and (max-width: 790px) {
 #main #sec01 .obi .obi_inner{
  max-width: 90% ;}

 #main #sec01 .obi p:first-child{
  width: 73% ;
  line-height: 1.5 ;
  margin: 0 0 0 0;
  font-size: 1.5rem ;}

 #main #sec01 .rogo{
  width: 25% ;
  padding: 10px ;}

 #main #sec01 .catch{
  width: 95% ;
  margin: 0 auto 50px auto ;}

 #main #sec01 .limit{
  width: 95% ;}

 #main #sec02{
  z-index: 10 ;
  background: #E70012 ;
  margin: -20px auto 0;
  padding: 50px 0 50px;}

 #main #sec02 .inner{
  max-width: 95% ;}

 #main #sec02 p{
  font-size: 1.5rem ;}

 #main #sec03{
  padding: 70px 0 ;}

 #main #sec03 .inner{
  max-width: 95% ;}

 #main #sec03 p{
  font-size: 3rem ;}

 #main .sec_block.body .inner{
  max-width: 95% ;}

 #main .sec_block.body .inner .title{
  font-size: 1.6rem ;}

 #main .sec_block.body .inner .body{
  font-size: 1.3rem ;}

 #main .sec_block.body .inner .body a,
 #main .sec_block.body .inner .body .blue{
  word-break: break-all ;}

 #main .sec_block.body .inner .btn a{
  padding: 30px 40px 30px 10px;
  box-sizing: border-box ;
  font-size: 1.5rem ;}

 #main .sec_block.body .inner .btn a::before{
  top: 35% ;
  width: 15px;
  height: 15px;}

 #main .sec_block.body .inner .btn a.active::before{
  top: 45% ;}
}