@charset "UTF-8";
/*矢印ボタン用*/
/* -------------------------------- 

Primary style




*, *::after, *::before {
box-sizing: border-box;
}

-------------------------------- */
/*******************************************

設定　PC・SPだしわけ、テキスト配置など

*******************************************/

body{
  background-image: url(../images/hakariya_app/bg_img.jpg);
  overflow-x: hidden;
  margin: 0;
}

/*ページ上部_キービジュアル*/

/* .hakariya-key {
  width: 100%;
  height: 500px;
  position: relative;
  background-color: #000000;
  background-image: url(../images/hakariya_app/key_color.png);
  background-repeat: no-repeat;
  background-size: cover;

 } */
    @media only screen and (max-width: 979px) { }

@media only screen and (max-width: 649px) {
  .nejimaru-key {
    margin-top: 56px;
    height: auto; }}


/*ページ内ナビゲーション*/

.local-nav {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  background: #001801;
  position: relative;
  top: 0;
  z-index: 998; }
  .local-nav-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 7px 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center; }
    .local-nav-inner > * {
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 auto;
      -moz-box-flex: 0;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto; }
    .local-nav-inner a {
      color: #FFF;
      font-weight: bold;
      display: block;
      font-size: 0.9rem;
      padding: 7px 15px; }
      .local-nav-inner a:hover {
        -webkit-transition: all 0.25s cubic-bezier(0, 0, 0.58, 1) 0s;
        -o-transition: all 0.25s cubic-bezier(0, 0, 0.58, 1) 0s;
        transition: all 0.25s cubic-bezier(0, 0, 0.58, 1) 0s;
        opacity: 0.6; }
  @media only screen and (max-width: 979px) {
    .local-nav {
      display: none; } }

.local-nav.fixed {
  position: fixed;
  -o-transition: top 0.65s ease-in;
  transition: top 0.65s ease-in;
  -webkit-transition: top 0.65s ease-in;
  -moz-transition: top 0.65s ease-in;
  -webkit-box-shadow: 2px 1px 8px rgba(0, 0, 0, 0.1);
  box-shadow: 2px 1px 8px rgba(0, 0, 0, 0.1);
  top: 78px;
  left: 0;
  padding-top: 5px; }

.swiper-container {
  width: 100%;
  height: auto; }
          

  img.yane_Img {
    width: 854px;
    height: auto;
    margin: 15px auto; }

    @media only screen and (max-width: 979px) {
      img.yane_Img {
        width: 100%;
        height: auto; }
    }
    @media only screen and (max-width: 649px) {
      img.yane_Img {
        width: 100%;
        height: auto; }}

  img.diImg-3 {
    width: 854px;
    height: auto;
    margin: -30px auto; }

    @media only screen and (max-width: 979px) {
      img.diImg-3 {
        width: 100%;
        height: auto; }
    }
    @media only screen and (max-width: 649px) {
      img.diImg-3 {
        width: 100%;
        height: auto;
        margin: -10px auto;  }
      }



/*キービジュアル*/
  
.key_v{
  background: url(../images/hakariya_app/key_color.png);
  background-size: cover;
  width: 100%;
  height: 900px;
  background-color: aqua;
  text-align: center;
}

@media only screen and (max-width: 979px) {
  .key_v{
    background: url(../images/hakariya_app/key_color.png);
    background-size: cover;
    width: 100%;
    height: 50%;
    background-color: aqua;
    text-align: center;
  }}

@media only screen and (max-width: 649px) {
  .key_v{
    background: url(../images/hakariya_app/key_color.png);
    background-size: cover;
    width: 100%;
    height: 40%;
    background-color: aqua;
    text-align: center;
  }}

.yane_Img{
  text-align: center;
}

.Img_shadow{
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}

/*アプリタイトル画像*/
.yaneapp_title{
  width: 70%;
  padding-top: 20px;
} 

@media only screen and (max-width: 649px) {
  .yaneapp_title{
    padding-top: 5rem;
  } 
  }

/*キービジュアル内の画面イメージ*/
.key_v_img{
  width: 100%;
}


/*本文センタリング*/

.textbox {
  width: 854px;
  margin: 0 auto;
  text-align: left; 
  padding: 2% 2%;
  line-height: 2;
}

  @media only screen and (max-width: 979px) {
    .textbox {
      width: auto;
      height: auto;
      text-align: left;
      padding: 5% 8%; } }

  @media only screen and (max-width: 649px) {
.textbox {
  width: auto;
  height: auto;
  text-align: left;
  padding: 3% 8%;
  font-size: 0.8em; }}


  /*測屋平兵衛とは？*/
.whats_hakariya{
  background-color: #002b01;
  text-align: center;
}

.whats_img{
  max-width: 35%;
}
@media only screen and (max-width: 979px) {
  .whats_img{
    max-width: 50%;
  }}

@media only screen and (max-width: 649px) {
  .whats_img{
    max-width: 80%;
  }}

    /*測屋平兵衛とは？の文章*/
  .whats_txt_bg{
    background: url(../images/hakariya_app/hakariya_icon.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: #FFFAEC;
    line-height: 2;
    padding: 4%;
  }

  /*巻物について*/
  .makimono_bg{
    background: url(../images/hakariya_app/bg_img_makimono.jpg);
    padding: 30px 0;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
    position: relative;
  }

  .makimono_bg2{
    background: url(../images/hakariya_app/bg_img_makimono2.jpg);
    padding: 30px 0;
    margin-bottom: 40px;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
    position: relative;
  }

  .makimono_txtbg{
    background-color: #FFFAEC;
  }

  .makimono_txtbg2{
    background: url(../images/hakariya_app/key_color.png);
    background-repeat: no-repeat;
    background-size: cover;
  }

/*お問い合わせ*/
.contact{
  background: url(../images/hakariya_app/hakariya_icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: #FFFAEC;
}

  /*アプリリンクボタン*/
.app_link_btn{
  width: 600px;
  border-radius: 25px;
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}

@media only screen and (max-width: 649px) {
  .app_link_btn{
    width: 100%;
    border-radius: 15px;
  }
  }

  .app_link{
    text-align: center;
    padding: 30px;
  }
  
  .app_link:hover{
    transform: scale(1.1,1.1);
    transition-duration: 0.5s;
  
  }

  /*アプリの強み説明文章*/
  .app_txt_bg{
    background-color: black;
    padding: 20px;
    margin: 10px;
    border-radius: 20px;
    background:rgba(0,0,0,0.55);
    line-height: 2;
    margin: 20px;
  }

  .app_txt{
    color: #FFF;
  }

  /*飾りの雲（キービジュアル）*/

  .key_kazari_img1{
    width: 100%;
    position: absolute;
    top: 70%;
    left: 0;
    animation: fuwafuwa 6s infinite;
  }

  @media only screen and (max-width: 649px) {
    .key_kazari_img1{
      width: 90%;
      position: absolute;
      top: 55%;
      left: 0%;
    }
    }

  .key_kazari_img2{
    width: 100%;
    position: absolute;
    top: 30%;
    left: 80%;
    animation: fuwafuwa 7s infinite;
  }

  @media only screen and (max-width: 649px) {
    .key_kazari_img2{
      width: 70%;
      position: absolute;
      top: 15%;
      left: 70%;
    }
    }


  /*飾りの雲（お悩みエリア・ご利用料金エリア）*/

  .kazari_img1{
    width: 100%;
    position: absolute;
    top: 90%;
    left: 0;
    animation: fuwafuwa 6s infinite;
  }

  .kazari_img2{
    width: 100%;
    position: absolute;
    top: 0%;
    left: 80%;
    animation: fuwafuwa 7s infinite;
  }

  @media only screen and (max-width: 649px) {
    .kazari_img2{
      width: 100%;
      position: absolute;
      top: -5%;
      left: 60%;
    }
    }


/*飾り猫（お悩みエリア）*/
  .kazari_img3{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 82%;
    animation: yurayura 3s infinite;
  }

    
  @media only screen and (max-width: 649px) {
    .kazari_img3{
      visibility: hidden;
    }
    }

    .kazari_img4{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation: yurayura 3s infinite;
  }

    
  @media only screen and (max-width: 649px) {
    .kazari_img4{
      visibility: hidden;
    }
    }
    

  @keyframes fuwafuwa {
    0% { transform:translateX(0px); }
    50% { transform:translateX(50px); }
    100% { transform:translateX(  0px); }
  }

  @keyframes yurayura {
    0% { transform:translatey(0px); }
    50% { transform:translatey(5px); }
    100% { transform:translatey(  0px); }
  }

  .kumo_Img1{
    width: 20%;
  }

  .neko_Img{
    width: 25%;
  }
  @media only screen and (max-width: 649px) {
    .kumo_Img1{
      width: 40%;
    }
    }


/*サブタイトル*/
.sub_title{
  color: #fff;
  font-size: 25px;
  font-weight: 800;
  padding: 20px;
}