@charset "UTF-8";


.floating02 {
    position: fixed !important;
    width: 100%;
    top: 0px;
    margin-top: 0px !important;
    box-sizing: border-box;
    z-index: 100;
    /* transition: .5s; */
    background: #fff;
    box-shadow: 0px 15px 10px rgba(0,0,0,0.4);

}

  
.floating02.hide {
  
  
  transform: translateY(-200%);


}

.floating03 {
    position: fixed !important;
    width: 100%;
    top: 0px;
    margin-top: 0px !important;
    box-sizing: border-box;
    z-index: 100;
    /* transition: .5s;*/ 
    background: #fff;
    box-shadow: 0px 15px 10px rgba(0,0,0,0.4);
    transform: translateY(-200%);

     padding-top: 0px;
}


.floating03.open {
  
    transition: .5s; 
    transform: translateY(0%);
  
  
  }
  .floating03.hide {
  
  
    transform: translateY(-200%);
  
  
  }
  



.topnav_mt {

    /**/  padding-top: 0px !important;
    -webkit-transition: all .5s;
        transition: all .5s;
    }
    
    .ht_mt {
    
    
      padding: 0 120px !important;
      
    
    }
    

 .floating03 .top_head img {

  padding: 10px 0;
  box-sizing: border-box;
  width: 85%;

    }



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


  body .on_sp.hide02 {

    transform: translateY(0) !important;
  height: 10000px !important;
    margin: 0;
  }
  


  body .sp_banner {
    position:  relative !important;
    display: none !important;
  }

 
  body .floating02.hide {

    transform: translateY(-350%);

  }

  body .floating03 .top_head img {
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 0 ;
}


    body .menu-content ul li .sp_pdf01::before  {

        top:40%;
            }

    body .sp_op {

        position: relative !important;
          opacity: 1 !important;
          z-index: 1 !important;
      
      
        }
      
      
    .obf {

        overflow: hidden !important;
      }

      

    .floating02 {
  
        padding: 0 10px !important;
  
  
    }

    /*spmenu*/
.hamburger-menu {
    height: 15px;
  
  }
  
  .menu-btn {
          /*position: fixed;*/
          position:absolute ;
          top: 0px;
          right: 0px;
          display: flex;
          height: 60px;
          width: 60px;
          justify-content: center;
          align-items: center;
          z-index: 90;
          background-color: #066d71;
          cursor: pointer;
          z-index: 999;
      }
      .menu-btn span,
      .menu-btn span:before,
      .menu-btn span:after {
          content: '';
          display: block;
          height: 3px;
          width: 25px;
          border-radius: 3px;
          background-color: #ffffff;
          position: absolute;
          left: 0;
          right: 0;
          margin: 0 auto;
      }
      .menu-btn span:before {
          bottom: 8px;
      }
      .menu-btn span:after {
          top: 8px;
      }
      
      
      .menu-content {
          width: 100%;
          height: 100%;
          position: fixed;
          top: 0;
          left: 100%;
          z-index: 80;
          background-color: #066d71;
          transition: all 0.5s;/*アニメーション設定*/
          z-index: 998;
          
      }
      .menu-content ul {
          padding: 70px 10px 0;
      }
      .menu-content ul li {
          border-bottom: solid 1px #ffffff;
          list-style: none;
      }
      .menu-content ul li a {
          display: block;
          width: 100%;
          font-size: 15px;
          box-sizing: border-box;
          color:#ffffff;
          text-decoration: none;
          padding: 9px 15px 10px 0;
          position: relative;
      }
      .menu-content ul li a::before {
          content: "";
          width: 7px;
          height: 7px;
          border-top: solid 2px #ffffff;
          border-right: solid 2px #ffffff;
          transform: rotate(45deg);
          position: absolute;
          right: 11px;
          top: 16px;
      }
      
      
      #menu-btn-check:checked ~ .menu-content {
          left: 0;/*メニューを画面内へ*/
      }
      
      #menu-btn-check:checked ~ .menu-btn span {
          background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
      }
      #menu-btn-check:checked ~ .menu-btn span::before {
          bottom: 0;
          transform: rotate(45deg);
      }
      #menu-btn-check:checked ~ .menu-btn span::after {
          top: 0;
          transform: rotate(-45deg);
      }
      
      
      #menu-btn-check {
          display: none;
      }
      
  
  /*--spmenu*/
  

}


/**サイドフローティング**/


div#floating-menu {
    position: absolute;
    width: 270px;
    /*width: auto;*/
    top: 150px;
    right: 0.5%;
    border: 1px solid #000000;
    border-radius: 10px; /* 角を丸める */
    /*background: rgba(255, 255, 255, 0.5);  背景色を白に指定して不透明度を0.5に指定 */
  /*background:beige;*/
  /* 影を入れる。指定のピクセルは前から順に横方向のズレ、縦方向のズレ、ぼかし具合、 */
    /* 影の色を指定している。 */
    -moz-box-shadow: 0px 0px 7px #454545; /* Firefox用 */
    -webkit-box-shadow: 0px 0px 7px #454545; /* Google ChromeやSafari用 */
    box-shadow: 0px 0px 7px #454545; /* CSS3対応ブラウザ用 */

    z-index: 1;
    padding:10px;
    transition:opacity 3s,transform 0.1s;
  }
  div#floating-menu p {

      margin-top: 15px;
  }

  div#floating-menu p:nth-child(1) {

  margin-top: 0px;
  }

  .hover_img {
    opacity:1;
  }

  .hover_img:hover {
    opacity:0.5;


  }
  
  div#floating-menu img {
width: 100%;
  }


  .example-button {
    display: inline-block;
    /*width: 270px;
    height: 54px;*/
    width: auto;
    height: auto;
    font-size: 1em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    line-height: 2.1;
    outline: none;
    border-radius: 8px;
  }

  .button4 {
  background-color: #245f30;


  }

  .button4:hover {
  background-color: #59869c;
  }

  .button4::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
  }
  .button4::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
  }

  .Lifefork {
    color: #fff;
    letter-spacing:0.05em;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .Lifefork span {

    display: block;
    padding: 0 5px;
    box-sizing: border-box;
    text-align: center;
  }
  .transition {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .5s;
    transition: all .5s;

  }

  .fork {
    border-bottom:1px solid;

  }
  .op01 {

    opacity: 0;

  }


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

    body div#floating-menu {

        opacity: 0;
        pointer-events: none;
}

  }