/*---------コンテンツページごとに変更 sp ---------*/
.foot_banner{
  /*background-color: rgba(17,68,153,.7);*/
}

/*---お問い合わせバナーの背景色を変える sp---*/
.foot_contact_wrap{
  background: linear-gradient(0deg, rgba(17,68,153,.7) 0%, rgba(17,68,153,.7) 35%, rgba(17,68,153,.7) 35%, transparent 100%);
} 
/*---動画 sp---*/
.video_container{
	margin: 0 auto;
	width: 100%;
	position: fixed;
  z-index: -1;

  .video_wrap{
    position: relative;
      overflow: hidden;
      width: 100%;
      height: 100vh;
      background: url(../images/top/poster.jpg) no-repeat center center/cover;
  }
  .video_gradation{
    min-width: 100%;
    min-height: 100vh;
    position: absolute;
    /*background-color: rgba(17,68,153,.3);*/
    background: linear-gradient(0deg, rgba(17,68,153,.5) 0%, rgba(17,68,153,.5) 35%, rgba(17,68,153,.5) 35%, transparent 100%);
  }
  .video_wrap video{
    min-width: 100%;
    min-height: 100vh;
    position: absolute;	
  }
}
@media  (min-aspect-ratio: 16/9) {
.video_wrap video {
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
  }
}
@media (max-aspect-ratio: 16/9) {
.video_wrap video {
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (aspect-ratio: 16/9) {
.video_wrap video {
    height: 100%;
    left: -10px;
    transform: translateY(-50%);
  }
}

.video_layer{
  width: 100%; 
	height: max(100vh,0px);
  /*mix-blend-mode:overlay;*//*overlay/difference/soft-light*/
  transition: .5s;
  overflow: hidden;
  
  img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
}
.video_layer2{
  position: absolute;
  top: 45vh;
  left: calc((100% - 4em) / 2);
  font-size: clamp(4.4rem,7vw,12.0rem);
  font-weight: var(--Medium);
  color: rgba(255,255,255,.8);
  line-height: .8;
  z-index: 2;
  text-align: center;
  
  span{
    font-size: var(--font-size36);
  }
}
/*---お知らせ sp---*/
.news{
  padding: var(--px50) 0;
  background-color: #fff;
  
  .inner{
    width: min(90%,1100px);
    margin: 0 auto;
    
    .news_box{
      width: 180px;
      margin: 0 auto;
      background-color: var(--main-color);
      padding: 50px 10px 15px;
      aspect-ratio: 1 / 1;
      border-radius: 5px;
      color: #fff;
      display: flex;
      flex-flow: column;
      
      h1{
        font-weight: var(--ExtraBold);
        font-size: var(--font-size48);
        text-align: center;
        line-height: .9;
        
        span{
          font-size: var(--font-size18);
        }
      }
      p{
        text-align: right;
        border-top: 1px solid #fff;
        margin-top: auto;
        padding-top: 10px;
        font-size: 1.4rem;
        
        a{
          color: #fff;
          position: relative;
          padding-right: 55px;
          
          &:after{
            position: absolute;
            content: '';
            display: inline-block;
            width: 40px;
            height: 17px;
            background-image: url("../images/top/png_03.png");
            top:2px;
            right: 8px;
            transition: .3s;
          }
          &:hover{
            &:after{
              right: 3px;
            }
          }
        }
      }
    }
    
    .info_box{
      padding: 40px 0 0;
      
      a{
        position: relative;
        display: block;
        width: 100%;
        
          &:after{
            position: absolute;
            content: "";
            right: 10px;
            bottom: 18px;
            /*ボーダー矢印*/
            display: inline-block;
            width: 11px;
            height: 11px;
            border-top: 1px solid #333;
            border-right: 1px solid #333;
            transform: rotate(45deg);
            transition: .3s;
          }  
          &:hover{
            &:after{
              right: 2px;
            }
          }
        }
      
      li{
        /*ドットを調整*/
        background-image : linear-gradient(to right, #333 4px, transparent 1px);
        background-size: 6px 1px;
        background-repeat: repeat-x;
        background-position: left bottom;
        padding: 10px 0;         
      }
      
      .date{
        color: #999;
        font-size: 1.4rem;
        margin: 2px 0;
      }
      .text{
        padding: 0 16px 0 0px;
        color: var(--font-color);
        margin: 2px 0;
        /*テキスト・・・*/
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        
        span{
          color: #fff;
          background-color: var(--main-color);
          font-size: 12px;
          padding: 2px 4px;
          line-height: 1;
          margin-left: 6px;
        }
      }
    }
  }
}

/*---COMPANY sp---*/
.company{ 
  position: relative; 
  overflow: hidden;
  
  .company_layer{
      position: absolute;
      top: 0;
      left: -2%;
      width: min(50%,379px);
    }
  
  .company_wrap{
    background-color: rgba(1,11,68,.75);
       
    padding: var(--px60) 0;    
  }
  
  .inner{
    width: min(90%,1740px);
    margin: 0 auto;
    
    .company_tx{
      color: #fff;
      
      .title_en{
        font-size: var(--font-size60);
        font-weight: var(--ExtraBold);
        text-align: center;
        transition: .5s;
      }
      .title_jp{
        font-size: var(--font-size18);	
        text-align: center;
        font-weight: var(--Bold);
        position: relative;

        &:after{/*アンダーライン*/
          position: absolute;
          content: '';
          display: inline-block;
          width: 5em;
          bottom: -20px;
          right:  calc((100% - 5em) / 2);
          border-bottom: solid 2px #fff;
        }      
      }
      h3{
        padding-top: var(--px100);
        font-size: var(--font-size48);
        font-weight: var(--ExtraBold);
        text-shadow: 1px 1px 5px #999; 
      }
      p{
        padding-top: var(--px50);
        line-height: 1.7;
      }
      .link_btn{
        padding-top: var(--px50);
        
        li{
          padding: 10px 0;
          font-size: 1.6rem;
          font-weight: var(--Bold);
        }
        
        a{
          color: #fff;
          position: relative;
          display: block;
          width: 222px;
          
          &:before{/*----○丸----*/
            position: absolute;
            content: "";
            right: 0;
            bottom: -2px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid #fff;
            transition: .3s;
          }
          &:after{/*----矢印----*/
            position: absolute;
            content: "";
            right: 13px;
            bottom: 9px;
            display: inline-block;
            width: 8px;
            height: 8px;
            border-top: 1px solid #fff;
            border-right: 1px solid #fff;
            transform: rotate(45deg);
          }
          span{/*リンクテキストの横のライン*/
            display: block;
            position: relative;
            
            &:before{
              position: absolute;
              content: '';
              display: inline-block;
              width: 100px;
              bottom: 12px;
              left: 5em;
              border-bottom: solid 1px #fff;
            }
          }
          &:hover{
            opacity: 1;
            &:before{/*----○丸----*/
              background-color: #fff;
            }
            &:after{/*----矢印----*/
              border-top: 1px solid #10397E;
              border-right: 1px solid #10397E;
            }
          }
        }
      }
    }
    .company_img{
      padding-top: var(--px50);
      overflow: hidden;
      transition: .5s;
      
      img{
        border-radius: 20px;
        width: 100%;
        height: 250px;
        object-fit: cover;
        object-position: 50% 25%;
      }      
    }
  }
  
  
}

/*---BUSINESS sp---*/
.business{
  background-image: url("../images/top/img_07.jpg");
  background-position: top center;
  background-size: cover;
  
  .business_wrap{
    padding: var(--px60) 0;
    background-color: rgba(255,255,255,.3);
  }
  
  .inner{
    width: min(94%,1846px);
    margin: 0 auto;
    
    .title_en{
      color: var(--main-color);
      font-size: var(--font-size60);
      font-weight: var(--ExtraBold);
      text-align: center;
      transition: .5s;
    }
    .title_jp{
      font-size: var(--font-size18);	
      text-align: center;
      font-weight: var(--Bold);
      position: relative;

      &:after{/*アンダーライン*/
        position: absolute;
        content: '';
        display: inline-block;
        width: 5em;
        bottom: -20px;
        right:  calc((100% - 5em) / 2);
        border-bottom: solid 2px var(--font-color);
      }      
    } 
    h3{
      padding-top: var(--px100);
      font-size: var(--font-size48);
      font-weight: var(--ExtraBold);
      text-align: center;      
      line-height: 1.5;
    }
  }
  .grid_wrap{
    width: min(90%,360px);
    margin: 0 auto;
    border-bottom: 1px solid #fff;
    
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-gap: 22px;
    padding-top: var(--px60);
    padding-bottom: var(--px40);
    
      .g_item{
        overflow: hidden;
        border-radius: 10px;
        position: relative;
        
        a{
          &:hover{
            opacity: .9;
          }
        }

        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: 50% 50%;
        }
        .cover{
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          background: linear-gradient(0deg, #000 0%, #000 3%, #000 3%, transparent 100%);
          padding: 0 25px 25px var(--px50);
          color: #fff;
          display: flex;
          flex-flow: column;

          h4{
            font-size: var(--font-size28);
            font-weight: var(--ExtraBold); 
            margin-top: auto;
          }
          p{
            padding-top: var(--px20);
          }
          .btn{
            text-align: right;
            padding-right: 40px;
            padding-top: var(--px30);
            position: relative;

            &:before{/*----○丸----*/
              position: absolute;
              content: "";
              right: 0;
              bottom: -4px;
              width: 30px;
              height: 30px;
              border-radius: 50%;
              border: 1px solid #fff;
              transition: .3s;
            }
            &:after{/*----矢印----*/
              position: absolute;
              content: "";
              right: 13px;
              bottom: 7px;
              display: inline-block;
              width: 8px;
              height: 8px;
              border-top: 1px solid #fff;
              border-right: 1px solid #fff;
              transform: rotate(45deg);
            }
          }
        }  
      }
  }
  
  .company_banner{
    width: min(90%,360px);
    margin: var(--px40) auto 0;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    height: 200px;
    
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 50%;
    }
    
    .inner{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      padding: 20px;
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      
      .in_img{
        width: 100px;
        position: relative;
        
        .in_logo{
          position: absolute;
          top: 0;
          left: -30px;
          width: 60px;
        }
      }
      .in_tx{
        position: absolute;
        top: 35px;
        right: 0;
        width: 100%;
        padding: 20px;
        
          h4{
            font-size: var(--font-size28);
            font-weight: var(--Bold); 
            margin-top: auto;
          }
          p{
            padding-top: var(--px20);
            font-weight: var(--Bold); 
          }
          .btn{
            text-align: right;
            padding-right: 40px;
            padding-top: 25px;
            position: relative;
            color: #fff;

            &:before{/*----○丸----*/
              position: absolute;
              content: "";
              right: 0;
              bottom: -4px;
              width: 30px;
              height: 30px;
              border-radius: 50%;
              border: 1px solid #fff;
              transition: .3s;
            }
            &:after{/*----矢印----*/
              position: absolute;
              content: "";
              right: 13px;
              bottom: 7px;
              display: inline-block;
              width: 8px;
              height: 8px;
              border-top: 1px solid #fff;
              border-right: 1px solid #fff;
              transform: rotate(45deg);
            }
          }
      }
    }
  }
}

@media (min-width:768px){
.video_layer2{
  top: calc(100vh - 2.0em);
  left: .5em; 
  text-align: left;
  line-height: .6;
}
/*---お知らせ tab---*/
.news{
  .inner{
    .info_box{
      a{
          &:after{/*ボーダー矢印*/
            bottom: 19px;
          }
        }
      li{
        display: flex;
        justify-content: flex-start;
      }  
        .date{
          width: 110px;
          padding-left: 15px;
        }
        .text{
          border-left: 1px solid #000;
          width: calc(100% - 120px);
          padding: 0 20px 0 15px;
        }
      
    }
    
  }
}

/*---COMPANY tab---*/
.company{
  
  .inner{
    
    .company_tx{
      
      .title_jp{

        &:after{/*アンダーライン*/
          bottom: -40px;
        }      
      }
      h3{
        padding-top: 100px; 
      }
      .link_btn{
        
        li{
          padding: 14px 0;
          font-size: 2.0rem;
        }
        
        a{
          width: 360px;
          
          &:before{/*----○丸----*/
            bottom: -5px;
            width: 42px;
            height:42px;
            border: 2px solid #fff;
          }
          &:after{/*----矢印----*/
            right: 17px;
            bottom: 10px;
            width: 11px;
            height: 11px;
            border-top: 2px solid #fff;
            border-right: 2px solid #fff;
          }
          span{/*リンクテキストの横のライン*/            
            &:before{
              width: 200px;
              bottom: 14px;
              border-bottom: solid 2px #fff;
            }
          }
          &:hover{
            &:after{/*----矢印----*/
              border-top: 2px solid #10397E;
              border-right: 2px solid #10397E;
            }
          }
        }
      }
    }
    .company_img{
      padding-top: 50px;
      overflow: hidden;
      
      img{
        border-radius: 40px;
        height: 350px;
        object-position: 50% 25%;
      }      
    }
  }
  
  
}  

/*---BUSINESS tab---*/
.business{
  
  .inner{
    
    .title_jp{

      &:after{/*アンダーライン*/
        bottom: -40px;
      }      
    }
  }
  .grid_wrap{
    width: min(90%,1864px);
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    
      .g_item{
        border-radius: 20px;

        .cover{

          .btn{
            padding-right: 50px;

            &:before{/*----○丸----*/
              bottom: -9px;
              width: 42px;
              height: 42px;
              border: 2px solid #fff;
            }
            &:after{/*----矢印----*/
              right: 18px;
              bottom: 7px;
              width: 11px;
              height: 11px;
              border-top: 2px solid #fff;
              border-right: 2px solid #fff;
            }
          }
        }  
      }
  }
  
  .company_banner{
    width: min(90%,900px);
    border-radius: 20px;
    height: 300px;
    
    .inner{
      justify-content: flex-start;
      
      .in_img{
        width: 43%;
        
        .in_logo{
          top: 5px;
          left: auto;
          right: -55px;
          width: 110px;
        }
      }
      .in_tx{
        top: 70px;
        right: 0;
        width: 47%;
        padding: 0 20px 20px 0;
        
          h4{
            font-size: 2.6rem;
          }
          p{
            padding-top: 20px;
            font-size: 1.8rem;
          }
        
          .btn{
            padding-right: 60px;
            padding-top: 60px;

            &:before{/*----○丸----*/
              bottom: -9px;
              width: 42px;
              height: 42px;
              border: 2px solid #fff;
            }
            &:after{/*----矢印----*/
              right: 18px;
              bottom: 7px;
              width: 11px;
              height: 11px;
              border-top: 2px solid #fff;
              border-right: 2px solid #fff;
            }
          }
      }
    }
  }
}
  
}




@media (min-width:1024px){
/*---お知らせ pc---*/
.news{
  .inner{
    display: flex;
    justify-content: space-between;
    
    .news_box{
      width: 220px;
      margin: 0;
    }
    
    .info_box{
      padding-top: 0;
      width: calc(100% - 260px);
      
      a{
          &:after{/*ボーダー矢印*/
            bottom: 26px;
            right: 30px; 
            width: 14px;
            height: 14px;
            border-top: 2px solid #333;
            border-right: 2px solid #333;
          }
          &:hover{
            &:after{
              right: 22px;
            }
          }
         }
      li{
        padding: 18px 0;
      }
        .text{
          padding: 0 35px 0 20px;
        }
    }
    
  }
}
    
/*---COMPANY pc---*/
.company{
  position: relative;
  
  .inner{
    display: flex;    
    
    .company_tx{
      width: min(100%,864px);
      position: relative;
      z-index: 1;
      
      .title_en{
        text-align: left;
      }
      .title_jp{
        text-align: left;

        &:after{/*アンダーライン*/
          left: 0;
        }      
      }
      h3{
        padding-top: 100px; 
      }
      p{
        width: min(72%,860px);
      }
      .link_btn{
        
        li{
          padding: 14px 0;
          font-size: 2.0rem;
        }
        
        a{
          width: 360px;
          
          &:before{/*----○丸----*/
            bottom: -5px;
            width: 42px;
            height:42px;
            border: 2px solid #fff;
          }
          &:after{/*----矢印----*/
            right: 17px;
            bottom: 10px;
            width: 11px;
            height: 11px;
            border-top: 2px solid #fff;
            border-right: 2px solid #fff;
          }
          span{/*リンクテキストの横のライン*/            
            &:before{
              width: 200px;
              bottom: 14px;
              border-bottom: solid 2px #fff;
            }
          }
          &:hover{
            &:after{/*----矢印----*/
              border-top: 2px solid #10397E;
              border-right: 2px solid #10397E;
            }
          }
        }
      }
    }
    .company_img{
      width: min(35%,960px);
      position: absolute;
      top: 0;
      right: 0;
      padding-top: 0;
      
      img{
        border-radius: 0;
        border-bottom-left-radius: 40px;
        height: 800px;
        object-position: 50% 25%;
      }      
    }
  }
  
  
}  

/*---BUSINESS pc---*/
.business{
  .grid_wrap{
    width: min(90%,1864px);
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, auto);
    
      .g_item{

        .cover{
          padding: 0 25px 25px 25px;          
        }  
      }
  }
  .company_banner{
    width: 900px;
    
    .inner{
      padding: 23px;
      
      .in_img{
        width: 379px;
        
        .in_logo{
          top: 11px;
          right: -87px;
          width: 174px;
        }
      }
      .in_tx{
        top: 65px;
        width: 42%;
        
          h4{
            font-size: 2.8rem;
          }
          p{
            padding-top: 20px;
            font-size: 2.0rem;
          }
        
          .btn{
            padding-top: 55px;
          }
      }
    }
  }
}

  
  
}

@media (min-width:1280px){
/*---COMPANY 1280---*/
.company{
  
  .inner{    
    


  }
}  

  
}

@media (min-width:1480px){
/*---COMPANY 1480---*/
.company{
.company_wrap{
    padding-bottom: 80px;
  }  
  .inner{    
    

    .company_img{
      width: min(38%,960px);
      
      img{
        height: 900px;
      }      
    }
  }
}

/*---BUSINESS 1480---*/
.business{
  .grid_wrap{
    
      .g_item{

        .cover{
          padding: 0 25px 25px 50px;          
        }  
      }
  }
}
  
  
}


@media (min-width:1780px){
/*---COMPANY 1680---*/
.company{  
  .inner{        
    .company_img{
      width: min(45%,960px);           
    }
  }
}
	
}