@charset "utf-8";
/*===========
map_inview
===========*/

.fadeIn {
    opacity: 0;
    transition: 2s;
}
.fadeIn.is-show {
    opacity: 1;
}

/*===========
.map_imgBox
===========*/

.imgBox {
    text-align: center;
    margin: 0 auto;
}
.imgBox img {
    max-width: 90%;
    height: auto;
    vertical-align: top;
}

/*===========
inview
===========*/

.fadeIn_left {
    opacity: 0;
    transform: translate(-50%, 0);
    transition: 2s;
  }
  .fadeIn_left.is-show {
    transform: translate(0, 0);
    opacity: 1;
  }
  
  /*===========
  .photo_imgBox_left
  ===========*/
  
  .imgBox {
    text-align: center;
    margin: 50px 0;
  }
  .imgBox img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
  }
  
  /*===========
  .photo_txtBox_left
  ===========*/
  
  .txtBox {
    text-align: center;
  }
  .txtBox p {
    font-size: 60px;
    font-weight: bold;
    padding: 2em 0;
    margin: 0;
  }
  
/*===========
photo_inview_right
===========*/

.fadeIn_right {
    opacity: 0;
    transform: translate(50%, 0);
    transition: 2s;
  }
  .fadeIn_right.is-show {
    transform: translate(0, 0);
    opacity: 1;
  }
  
  /*===========
  photo_imgBox
  ===========*/
  
  .imgBox {
    text-align: center;
    margin: 50px 0;
  }
  .imgBox img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
  }
  

/*===========
Instagram coler
===========*/
a {
    color: #564c4c;
    text-decoration: none;
}
.text {
    /* 文字色は透明にして背景が見えるようにする */
    color: transparent;
    font-size: 20px;

    /* オレンジと黒が50%の位置で切り替わるグラデーション */
    background: linear-gradient(to right, #BFC579 50%,  #f29e3b 50%) 100%;
    /* 背景をテキストで切り抜く */
    background-clip: text;

    /* 横幅は200%にしてグラデーションの青部分は見えないようにする */
    background-size: 200% 100%;

    transition: background-position 0.3s;
}

.text:hover {
    /* グラデーションの位置を移動して、オレンジ部分を見せる */
    background-position: 0 100%;
}



/***********  レスポンシブ *******************/
@media screen and (max-width: 850px) {
/*===========
Instagram coler
===========*/
.text {
    /* 文字色は透明にして背景が見えるようにする */
    color: transparent;
    font-size: 18px;
    }   
} /*********** ↑↑　850px　↑↑   ************/

@media screen and (max-width: 550px) {
    
}
/*********** ↑↑　550px　↑↑   **************/
@media screen and (max-width: 390px) {
.text {
    /* 文字色は透明にして背景が見えるようにする */
    font-size: 15px;
}    
} /*********** ↑↑　390px　↑↑   ************/