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

/* リセットCSSとグローバルCSSの読み込み */
@import url("/common/css/reset.css");
@import url("/common/css/global.css");

body { font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif; font-weight:700; color: #333;}

 body [class*="l_col-"] { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; }
 body [class*="btn-"] a,body [class*="btn-"] button  { padding: 10px;  background: #fff; border-radius: 100px; position: relative; display: inline-block;}

 p { line-height: 1.6; font-size: 16px;}
 a { color: #626939; }

 section { min-height: 300px; }
 section:not(first-child) {  }
 
 .cont_wrap { max-width: 1100px; margin: 0px auto; }

     /* メディアクエリ　*/

    /* 769px 以上*/
    @media screen and (min-width: 769px) {

      body [class*="btn-"] a,body [class*="btn-"] button  {  min-width: 350px; }
    }
      /* 1200pxから769pxまで*/
    @media screen and (max-width: 1200px) and (min-width: 769px) {
  

    }
     /* 768px以下*/
    @media screen and (max-width: 768px) {
      body [class*="btn-"] a,body [class*="btn-"] button  { width: 100%; }
      .cont_wrap { box-sizing: border-box; width: calc(100% - 30px); }
  
  
    }
    /* 480px以下*/
    @media screen and (max-width: 480px) {
  
    }



 /*====== header ======*/ 

header {  }

.l_col-header { padding-top: 10px; }
.logo { width: 214px; }


/* nav */
#nav_global li { list-style: none; font-weight: normal; }
#nav_global li a { color: #fff; text-decoration: none; transition-property: all; transition: 0.3s linear; font-family: 'Roboto', sans-serif;}
#nav_global li a:hover { opacity: 0.8; }
#nav_global li.btn-contact a { color: #626939; font-family: 'M PLUS 2', sans-serif; font-weight: bold; position: relative; padding: 10px 20px 10px 50px; min-width: auto;}
#nav_global li.btn-contact a::before { content: ''; width: 25px; height: 25px; display: block; background-image: url(../images/icon_mail.svg); position: absolute; top: 50%;
left: 15px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}

    /* メディアクエリ　*/

    /* 769px 以上*/
    @media screen and (min-width: 769px) {
      #nav_global li:not(:first-child) { margin-left: 30px; }
      #nav_global .l_col-nav { -webkit-align-items: center; align-items: center; }
    }
      /* 1200pxから769pxまで*/
    @media screen and (max-width: 1200px) and (min-width: 769px) {
  

    }
     /* 768px以下*/
    @media screen and (max-width: 768px) {
      
      .l_col-header { position: static; }
      #nav_global  { width: 100%; }
      #nav_global .l_col-nav { display: none; width: 100%; padding: 50px; position: absolute; top:0px; left: 0px; text-align: center; background: #626939; z-index: 999; margin: 0px; height: 100vh; transform: translateX(180px); animation: slideOut 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}

      #nav_global.active .l_col-nav { display: block; animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards; }
      #nav_global li {padding: 15px; }

      /* global_nav_anim */
      @keyframes slideIn {
        0% {
          transform: translateX(180px);
          opacity: 0;
        }
        100% {
          transform: translateX(0);
        }
        40%,100% {
          opacity: 1;
        }
      }

      @keyframes slideOut {
        0% {
          transform: translateX(0);
          opacity: 1;
        }
        100% {
          transform: translateX(180px);
        }
        40%,100% {
          opacity: 0;
        }
      }
  
  
    }
    /* 480px以下*/
    @media screen and (max-width: 480px) {
  
    }


/*　ハンバーガーメニュー　*/

.openbtn1{ position: absolute; background:#626939; cursor: pointer; width: 50px; height:50px; border-radius: 5px; z-index: 1000;  right: 20px; top: 15px;}

/*ボタン内側*/
.openbtn1 span{ display: inline-block; transition: all .4s; position: absolute; left: 14px; height: 3px; border-radius: 2px; background: #fff; width: 45%; }

.openbtn1 span:nth-of-type(1) { top:15px; }
.openbtn1 span:nth-of-type(2) { top:23px; }
.openbtn1 span:nth-of-type(3) { top:31px; }

/*activeクラスが付与されると線が回転して×に*/
.openbtn1.active span:nth-of-type(1) { top: 18px; left: 18px;  transform: translateY(6px) rotate(-45deg);  width: 30%; }
.openbtn1.active span:nth-of-type(2) { opacity: 0;/*真ん中の線は透過*/ }
.openbtn1.active span:nth-of-type(3){ top: 30px; left: 18px; transform: translateY(-6px) rotate(45deg); width: 30%; }


/*=========footer========*/

footer { background: #626939; text-align: center; font-size: 14px; color: #fff; padding: 15px; }
footer .l_col-footnav { -webkit-justify-content: center; justify-content: center; padding-bottom: 20px; border-bottom: 1px solid #fff; margin-bottom: 20px;}
footer .l_col-footnav a { color: #fff; text-decoration: none; font-weight: normal; }
footer .l_col-footnav li:not(:first-child){ margin-left: 30px; }
footer p {  font-weight: normal; font-size: 14px; } 

#page_top { position: fixed; bottom: 50px; right: 50px; display: none; width: 80px; height: 80px; border-radius: 100px; background: #626939; color: #fff; border: 1px solid #fff; z-index: 998;}
#page_top p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); font-size: 14px;}


    /* メディアクエリ　*/

    /* 769px 以上*/
    @media screen and (min-width: 769px) {

        section:not(first-child) { padding-top: 150px; }

      }
        /* 1200pxから769pxまで*/
      @media screen and (max-width: 1200px) and (min-width: 769px) {
    
  
      }
       /* 768px以下*/
      @media screen and (max-width: 768px) {
    
        section:not(first-child) { padding-top: 50px; }

        footer .l_col-footnav { display: inline-block; text-align: center; width: 100%; padding: 0px;}
        footer .l_col-footnav li { padding: 5px; margin-bottom: 10px; list-style-type: none;}
        footer .l_col-footnav li a { width: 100%; height: 100%; display: block; }
        footer .l_col-footnav li:not(:first-child) { margin-left: 0px; }

        #page_top {  bottom: 10px; right: 10px; }
    

      }
      /* 480px以下*/
      @media screen and (max-width: 480px) {
    
      }

/*========= cont_pages ========*/

      .cont_pages header { background: #626939; padding-bottom: 10px; }
      .page_head { width: 100%; background-color: #F1F3EA; text-align: center; padding: 60px; margin-bottom: 20px; }
      .cont_heading_1 { max-width: 900px; font-size: 30px; color: #626939; padding: 10px; margin: 0px auto; }
      .breadcrumb { font-size: 14px; margin-bottom: 80px; }
      .cont_pages main { min-height: 800px; }

      .cont_heading_2 { width: 100%; padding: 10px; border-bottom: 5px solid #626939; background: #F1F3EA; font-size: 24px; margin-bottom: 30px;}
      .cont_heading_3 { font-size: 20px; color: #626939; margin-bottom: 20px; }




/*========= Animation ========*/
/* 下からふわっと現れる */
.fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;    /*アニメーションの名前*/
  -webkit-animation-duration: 2s;
          animation-duration: 2s;         /*アニメーションの実行時間*/
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;  /*アニメーション後、要素が表示されたままにする*/
}
@-webkit-keyframes fadeUpAnime {
  0% {
    opacity: 0;                   /*非表示*/
    -webkit-transform: translateY(100px);
            transform: translateY(100px); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1;                   /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0);     /*元の位置*/
  }
}
@keyframes fadeUpAnime {
  0% {
    opacity: 0;                   /*非表示*/
    -webkit-transform: translateY(100px);
            transform: translateY(100px); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1;                   /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0);     /*元の位置*/
  }
}
.fadeUpTrigger {
  opacity: 0;                     /*非表示*/
}


.obake_anim{
  animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
}

@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
}
}