/* uguisu portfolio TOP CSS*/
@charset "UTF-8";

.img_wrap { max-width: 1400px; display: block; width: 100%; margin: 0px auto; text-align: center; } 
.img_wrap img { width: 100%; }

@media screen and (max-width: 1200px) and (min-width: 769px) {
  #top section .cont_wrap { padding-left:20px; padding-right: 20px; }
}

@media screen and (max-width: 768px) {
  #top section .cont_wrap { width: calc( 100% - 30px ); }


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

}

/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash { /*fixedで全面に固定*/
  position: fixed; width: 100%; height: 100%; z-index: 999; background:#626939; text-align:center; color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Loading アイコンの大きさ設定　*/
#splash_logo img { width:260px; }

/* fadeUpをするアイコンの動き */

.fadeUp{ animation-name: fadeUpAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity: 0; }

@keyframes fadeUpAnime{
  from { opacity: 0; transform: translateY(100px); }
  to { opacity: 1; transform: translateY(0); }
}

/*========= TOP用ヘッダーCSS ===============*/





/*========= main_visual関連 ===============*/

/* 動画の前面表示 */
#container { position: relative; }
#main_visual.video-box { position: relative; overflow: hidden; width: 100%;  }
#main_visual .video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }

/* overlay */

#main_visual.overlay::after { content: ''; display: block; position: absolute; top: 0; right: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.2); background-image: radial-gradient(#111 10%, transparent 31%), radial-gradient(#111 10%, transparent 31%); background-size: 4px 4px; background-position: 0 0, 2px 2px;}

/* text */

#main_visual .text-box { max-width: 1100px; height: 100%; margin: 0px auto;  position: absolute; top: 50%; left: 50%; width: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 20;}
#main_visual .text-box .catchcopy { letter-spacing: 0.5rem;  line-height: 80px; position: absolute; bottom: 50px; font-family: 'M PLUS 2', sans-serif;  font-weight: bold; line-height: 1.2;  text-align: left; color: #fff; }
#main_visual .text-box .english { letter-spacing: normal; margin-top: 15px; font-family: 'Roboto', sans-serif; display: block; font-size: 20px; font-weight: normal;}


    /* メディアクエリ　*/

    /* 769px 以上*/
    @media screen and (min-width: 769px) {
      #main_visual.video-box {  height: 100vh; }
      #main_visual .text-box .catchcopy { font-size: 45px;  }

    }
      /* 1200pxから769pxまで*/
    @media screen and (max-width: 1200px) and (min-width: 769px) {
      #main_visual .text-box .catchcopy { left: 20px; }

    }
     /* 768px以下*/
    @media screen and (max-width: 768px) {
      #main_visual .text-box .catchcopy { font-size: 30px;  text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); width: calc( 100% - 30px) ;}
  
    }
    /* 480px以下*/
    @media screen and (max-width: 480px) {
  
    }


/* h2ベース */
#main_contents {  }

h2 { position: relative; font-size: 30px; letter-spacing: 0.15em; font-kerning: normal; z-index: 2; font-feature-settings: "palt";}
h2 span { display: block; font-size: 20px;  }
h2::before { content: ""; width: 155px; height: 155px; background: #E1EAAE; position: absolute; left: -73px; top: -40px; z-index: -1; border-radius: 50%; } 

@media screen and (max-width: 1200px) and (min-width: 769px) {

}

@media screen and (max-width: 768px) {
  h2::before { width: 100px; height: 100px; top: -13px;  left: calc(50% - 50px);} 

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

}




/*========= about ===============*/

#about { border-top: 10px solid #626939; border-bottom: 10px solid #626939; padding: 120px 0px; position: relative; background-image: url(../top/img_bg_about.png); background-size: contain;  background-repeat: repeat-y;  background-position: center center;}
#about h2 { margin-bottom: 70px; }

#about .img_wrap  { }
#about .text_wrap { max-width: 480px; line-height: 1.5; } 
#about .img_wrap img { }

#about .max_width_box { max-width: 1400px; margin: 0px auto; position: relative;}

#about .btn-booth {  }
#about .btn-booth a { background: #3F4C88; border: 1px solid #3F4C88;  color: #fff; text-decoration: none; transition-property: all; transition: 0.3s linear; box-sizing: border-box; }

#about .btn-booth a:hover { background:#fff; color: #3F4C88; }

#about strong { background: linear-gradient(transparent 55%, #CCDDFF 0%); display: inline; font-size: 20px; }
 
  @media screen and (min-width: 769px) {
    #about .img_wrap  { width: 650px; height: 490px; width: 50%; }
    #about .img_wrap img { position: absolute; right: 0px; max-width: 650px; max-height: 490px; width: 50%; }
    #about .btn-booth { margin-top: 50px; }
    #about .btn-booth a { padding: 18px 0px; display: inline-block; width: 350px; text-align: center; }
  }

  @media screen and (max-width: 1200px) and (min-width: 769px) {
    #about .img_wrap  { width: 40%; }
    #about .text_wrap { padding-left: 80px; } 
    #about .text_wrap { max-width: 370px; } 
  }
  
  @media screen and (max-width: 768px) {
    #about { padding: 80px 30px; }
    #about h2 { text-align: center; margin-left: auto; margin-right: auto; }
    #about .l_col-about { display: block; }
    #about .text_wrap { margin: 0px auto; width: 100%; padding-left: 0px; }

    #about .btn-booth { margin: 30px auto 50px auto; text-align: center; }

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

  }


  /*========= works ===============*/

  #works { background-image: url(../top/img_stripe.jpg); padding-bottom: 150px; }
  #works .cont_wrap { background: #fff;  border-radius: 20px; position: relative;}

  #works h2 {   }
  #works h2:before {  }

  #works p { text-align: center;  margin-bottom: 40px; }
  #works .l_col-works { -webkit-flex-wrap: wrap; flex-wrap: wrap; padding-left: 0px; margin-bottom: 40px; }
  #works li { list-style-type: none; max-width: 500px; }
  #works li a { width: 100%; height: 100%; }

  #works .btn-more { text-align: center; }

  #works .btn-more a { background: #3F4C88; border: 1px solid #3F4C88;  color: #fff; text-decoration: none; transition-property: all; transition: 0.3s linear; box-sizing: border-box; width: 240px; text-align: center; display: inline-block; }

  #works .btn-more a:hover { background:#fff; color: #3F4C88; }


  @media screen and (min-width: 769px) {
    #works { padding-bottom: 150px; }
    #works .cont_wrap{ padding: 100px 40px;  }
    #works h2 { position: absolute; right: 0px; top: -43px; text-align: right;  }
    #works h2:before { left: 51px; top: -44px; }
    #works li { margin-bottom: 15px; width: calc(100% - 40px); }


  }

  @media screen and (max-width: 1200px) and (min-width: 769px) {

    #works h2 { right: 63px; }
    #works .cont_wrap { width: calc(100% - 40px);}
    #works li { width: calc(50% - 10px); }


  }
  
  @media screen and (max-width: 768px) {
    #works { padding-bottom: 50px; }
    #works .cont_wrap{ padding: 50px 20px; }
    #works h2 { display: block; text-align: center; margin-bottom: 40px; }
    #works h2:before { left: calc(50% - 50px); }
    #works li { margin:0px auto 15px auto;  }


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

  }


    /*========= service ===============*/

    #service { background: #626939; color: #fff; background-image: url(../top/img_bg_service.png);  background-size: contain;  background-repeat: repeat-y;  background-position: center center; }
    #service h2 { position: relative; }
    #service h2::before { background: #333;}

    #service .l_col-h2 { margin-bottom: 120px; -webkit-justify-content: flex-start;
      justify-content: flex-start; }

    #service .l_col-h2 span { }

    #service .l_col-h2 p {  } 


    #service .l_col-service { -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 0px 30px; margin-bottom: 30px;}
    #service .l_col-service .inner { width: 500px; }

    #service .l_col-service h3 { border-bottom: 1px solid #fff; border-left: 10px solid #fff; padding-left: 10px; padding-bottom: 5px; margin-bottom: 20px; font-size: 26px;}

    #service .l_col-service img { margin-bottom: 20px; }

    #service .l_col-service p { margin-bottom: 40px; font-weight: normal; }

    #service .btn-detail { text-align: center; }
    #service .btn-detail a { color: #626939; text-decoration: none;}

    /* メディアクエリ　*/

    /* 769px 以上*/
    @media screen and (min-width: 769px) {
      #service { padding-bottom: 150px;}
      #service h2 { padding-right: 195px;}
      #service h2::before { top: -58px; }
      #service .l_col-h2 p { border-left: 1px solid #fff; padding-left: 50px; }
      #service .l_col-h2 span { margin-right: 50px; display: inline-block; position: absolute; top: 21px; right: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}


    }
      /* 1200pxから769pxまで*/
    @media screen and (max-width: 1200px) and (min-width: 769px) {
      
      #service .l_col-h2 { padding-left: 80px; }
      #service .l_col-service .inner { width: calc(50% - 20px); }
  
    }
     /* 768px以下*/
    @media screen and (max-width: 768px) {
      #service { padding-bottom: 80px;}
      #service h2 { margin-bottom: 50px;}
      #service .l_col-h2 { display: block; text-align: center; margin-bottom: 60px; }
      #service .l_col-service .inner { margin: 0px auto 15px auto; }
  
  
    }
    /* 480px以下*/
    @media screen and (max-width: 480px) {
  
    }


     /*========= profile ===============*/

    #profile { padding-bottom: 135px; }
    #profile .cont_wrap { position: relative; }
    #profile h2 { position: absolute; right: 0px; top: -43px; text-align: right; }
    #profile h2:before { }

    #profile .text_wrap {  padding: 50px 30px; background: #F1F3EA; border-radius: 20px; position: relative;}
    

    #profile .img_wrap {  }


        /* メディアクエリ　*/

    /* 769px 以上*/
    @media screen and (min-width: 769px) {
      #profile h2:before { left: 51px; top: -44px; }
      #profile .text_wrap { margin-right: 190px; max-width: 600px; }
      #profile .text_wrap::before { content: ""; width: 51px; height: 42px; background-image: url(../top/img_arrow.png); display: block; position: absolute; top: 50%; left: 0%; transform: translateY(-50%); -webkit-transform: translateY(-50%);-ms-transform: translateY(-50%); left: -40px;}

      #profile .img_wrap { margin-right: 40px;  max-width: 260px; }


    }
      /* 1200pxから769pxまで*/
    @media screen and (max-width: 1200px) and (min-width: 769px) {
      #profile h2:before { left: 40px; top: -44px; }
      #profile .l_col-profile {-webkit-align-items: center;align-items: center;}
      #profile .text_wrap { margin-right: 0px; max-width: none;  width: 100%; padding-right: 60px;} 
      #profile .img_wrap { width: 30%; }

  
    }
     /* 768px以下*/
    @media screen and (max-width: 768px) {
      #profile h2 { position: static; width: 100%; text-align: center; }
      #profile .l_col-profile {display: block;}
      #profile .img_wrap { max-width: 170px; }
  
  
    }
    /* 480px以下*/
    @media screen and (max-width: 480px) {
  
    }


    /*========= Contact ===============*/

    #contact { border-top: 10px solid #626939;}
    #contact h2 { position: relative; }
    #contact .l_col-h2 { margin-bottom: 120px; -webkit-justify-content: flex-start;
      justify-content: flex-start; }

    #contact .c-form { max-width: 910px; margin: 0px auto; border: 1px solid #333; }
    #contact label { display: none; }

    #contact .ttl_form { text-align: center;  }

    #contact textarea { width: 100%; border: none; border-bottom: 1px solid #333; min-height: 220px; margin-bottom: 50px;}

    #contact .l_col-form { margin-bottom: 80px; }
    #contact .l_col-form > div { width: calc( 50% - 15px ); }
    #contact .l_col-form > div input { width: 100%; border: none; border-bottom: 1px solid #333; }

    #contact .btn-submit { text-align: center; }
    #contact .btn-submit button { border: none; background: #333; color: #fff; border: 1px solid #333; transition-property: all; transition: 0.3s linear;}
    #contact .btn-submit button:hover { background: #fff; color: #333; }
    

    /* メディアクエリ　*/

    /* 769px 以上*/
    @media screen and (min-width: 769px) {
      #contact  { padding-bottom: 150px;}
      #contact  h2 { padding-right: 230px;}
      #contact  h2::before { top: -58px; }
      #contact  .l_col-h2 p { border-left: 1px solid #333; padding-left: 50px; }
      #contact  .l_col-h2 span { margin-right: 50px; display: inline-block; position: absolute; top: 21px; right: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}

      #contact .c-form {  padding: 75px ; }
      #contact .ttl_form {  font-size: 28px;  padding-bottom: 150px ; }


    }
      /* 1200pxから769pxまで*/
    @media screen and (max-width: 1200px) and (min-width: 769px) {
      
      #contact  .l_col-h2 { padding-left: 80px; }
      #contact  .l_col-service .inner { width: calc(50% - 20px); }
  
    }
     /* 768px以下*/
    @media screen and (max-width: 768px) {
      #contact  { padding-bottom: 80px;}
      #contact  h2 { margin-bottom: 50px;}
      #contact  .l_col-h2 { display: block; text-align: center; margin-bottom: 60px; }
      #contact .c-form {  padding: 30px 15px ; }
      #contact .ttl_form {  font-size: 24px;  padding-bottom: 80px ; }
  
  
    }
    /* 480px以下*/
    @media screen and (max-width: 480px) {
  
    }