@charset 'UTF8' ;
/*
Theme Name: overage
Description: overage
Version: 1.0.1
Author: overage
*/
#back-slide {

  width: 100%;  
  height: 380px;  
  background-image: url(../images/slideimg01.jpg) ;
  background-position: 0;  
  animation: hdlback-slide 80s linear infinite; 
  margin-top: -380px;
  animation-direction:reverse;
  opacity: 0.15;/*itemDの不透明度を15％に指定*/
  
}
/*==========ループ画像の装飾02==========*/
@-webkit-keyframes hdlback-slide {

  /*==========11/01　無効にしてもサイト変化なし　そのまま無効に======
  from {
      background-position: 0  0;
  }
  ====*/
  to {
      background-position: -3000px 0;/*==========数値を低くするとループ早くなる==========*/
  }
}

.border-text{  
    font-size: 30px;
    margin: 50px 0 5px ;
    text-align: center; 
  }
  .border-text p{  
    font-size: 15px;
    margin-top: -15px;
    margin-bottom: 3px;
    text-align: center; 
    color: #fff;

  }
.border-frame-b{ 
    width: 100%;
    background-color: #0182fa;
    margin: 5px auto -5px;
    animation-name: border-frame-b;
    animation-duration: 2s;
  }
  @keyframes border-frame-b {
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}
.about-magazine{

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 50px 0 30px;
}

.web-img-left{
  width: 300px;
  margin: 0 10px 10px 0;
}
.web-img-left:hover{
	transform:scale(1.1);
	transition:0.3s;
  opacity:0.5;
}
.web-img-shodo{
  width: 450px;
  margin: 0 0 10px 30px;

}
.web-img-shodo:hover{
	transform:scale(1.1);
	transition:0.3s;
  opacity:0.5;
}
.web-img-right{
  width: 120px;
  margin: 0 0 10px 10px;
  height: 100%;
}

.magazine-right{
  width: 300px;
  margin: 0 0 10px 10px;
}
.magazine-left{
  width: 300px;
  margin: 0 10px 10px 0;
}

#pageimg {
  margin-bottom: 30px;
  margin: -70px auto 0;
  z-index: -2;

}
#pageimgsub {
  margin-bottom: 30px;
  margin: 70px auto 0;
  z-index: -2;

}
.pageimg {
  margin-bottom: 30px;
  height: 100%;
  width: 100%;
  max-width: 2500px;
  z-index: 2;
}


.about-Title{
  font-family: "游明朝","Yu Mincho",YuMincho,"Hiragino Mincho Pro",serif ;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  margin-top: -1200px;
}
.company-Title{
  font-family: "游明朝","Yu Mincho",YuMincho,"Hiragino Mincho Pro",serif ;
  font-size: 28px;
  font-weight: bolder;
  line-height: 1.4;
  text-align: center;
  margin-top: -30px;
  font-feature-settings: "palt";/*文字詰め*/
}
.fadein-text {
  animation-name: fadeInAnime;
  animation-fill-mode:both;
  animation-duration:3s;
  animation-iteration-count:1;
  animation-timing-function:ease;
  animation-delay: 0.5s;
  animation-direction:normal;
  }
  .front-text{
    display: block;
    max-width: 600px;
    z-index: 12;
  }
  .about-text{
    display: block;
    width: 80%;
    margin: 0 auto 10px;
    font-feature-settings: "palt";/*文字詰め*/

  }
  .about-catch{
    font-size: 18px;
    font-weight: bolder;
    line-height: 1.4;
    margin: 55px 10px 0;
    font-feature-settings: "palt";/*文字詰め*/
  }
  .about-copy{
    font-size: 16px;
    line-height: 1.8;
    margin: 30px 10px 20px;
    text-align: justify;
    font-feature-settings: "palt";/*文字詰め*/
  }

body {
  max-width: 2500px;
  margin: 0;  
  padding: 0;
  background-color: #fff;
  color: #333333;
  font-size: 16px;
  line-height: 2;
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}

#index {
  margin-top: 0px;
  width:100%;
}

p,h1,h2,h3,h4,h5,h6 {
  margin-top: 0;
}

.main-center{
  width: 100%;
}

/*1002*/
#pagetop{
  width: 40px; 
  height: 40px; 
  position: fixed;
  left: 3%;
  bottom: 0;
  opacity: 0.6;
  z-index: 200;
}
#pagetop a{
  position: relative;
  display: block;
  width: 25px;
  height: 15px;
  text-decoration: none;
}
#pagetop a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 800;
  content: '\f102';
  font-size: 40px; 
  color: #0bad05 ; 
  position: absolute;
  width: 25px; 
  height: 25px; 
  top: -100px; 
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#pagetop a::after{
  content: 'TOP';
  font-size: 16px; 
  position: absolute;
  top: -5px;
  bottom: 0;
  right: 0;
  left: -2.5px;
  margin: auto;
  text-align: center;
  color: #0bad05 ; 
}
/*↑1002*/

.content-23{ 
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px; /
}   
.illustrationa-content-2{
  float: left;    
}
.illustrationa-content-2{
  float: left;    
}
.illustrationa img{
  display: block;
  width: 380px;
  margin-top: 20px;
}



.i-button{
  width: 250px;
  height: 100px;
  display: flex;
  justify-content: center;
  text-align: center;
  background-color: #057727;
  color: #fff;
}

.target {
  padding: 10px;
  transition: opacity 300ms;
}
.target.is-hidden {
  opacity: 0;
  display: none;
}

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

  .about-Title{
  
    margin-top: -1050px;
  
  }%
  }

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

  .about-Title{
  
    margin-top: -980px;
  
  }%
  }

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

    .about-Title{
    
      margin-top: -880px;
    
    }%
    }
    @media screen and (max-width:1750px){

      .about-Title{
      
        margin-top: -780px;
      
      }
    
      }
      @media screen and (max-width:1550px){

        .about-Title{
        
          margin-top: -680px;
        
        }
      }
        @media screen and (max-width:1350px){

          .about-Title{
          
            margin-top: -580px;
          
          }
      
        }
        @media screen and (max-width:1250px){

          .about-Title{
          
            margin-top: -480px;
          
          }
      
        }

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


          .about-Title{
          
            margin-top: -380px;
          
          }

}

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

.content-23{  
  margin: 0 auto;
}
.illustrationa-content-2{
  float: none;    
}

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

  .about-Title{
    margin-top: -350px;
    font-size: 23px;
  }
  .company-Title{
    font-size: 23px;
  }
  .about-text{
    width: 93%;
  }
}
@media screen and (max-width:750px){

  .about-Title{
  
    margin-top: -300px;
  
  }

}

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

  .about-Title{
  
    margin-top: -250px;
  }
}

@media screen and (max-width:510px){
  .about-copy{
    font-size: 15px;
  }
  .about-catch{
    font-size: 17px;
  }
  .about-Title{
    margin-top: -200px;
    font-size: 20px;
  }
  .company-Title{
    margin-top: -10px;
    font-size: 20px;
  }
  .web-img-right{
  margin: -200px 0 0 300px;
}

.web-img-left{
  margin: 10px auto 10px;
}

.magazine-right{
  margin: 10px auto -90px;
}
.magazine-left{
  margin: 10px auto 20px;
}
.about-text{
  width: 98%;
}
.web-img-shodo{
  width: 350px;
}
}
@media screen and (max-width:450px){

.about-Title{
  margin-top: -160px;
  }
    }
@media screen and (max-width:375px){

.about-Title{
  margin-top: -110px;
}
.about-catch{
  font-size: 16px;
}

  }