@charset "utf-8";
/* CSS Document */

@media screen and (min-width:480px) { 
  /*　画面サイズが480pxからはここを読み込む　*/
}
@media screen and (min-width:768px) { 
  /*　画面サイズが768pxからはここを読み込む　*/
}
@media screen and (min-width:1024px) { 
  /*　画面サイズが1024pxからはここを読み込む　*/
}


/* 共通 */
h3{
  font-size: 2.4rem;
  margin-top: 16px;
}
.text_box{
  margin: 16px 0;
}


/* -------MV------- */
.mv_wrap{
  width: 100%;
  height: 100vh;
  position: relative;
}
.mv_ttl{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 85%;
}
.mv_wrap p{
  color: #ffffff;
  margin-top: 30px;
  letter-spacing: 0.05em;
}
.mv_slider{
  width: 100%;
  height: 100vh;
  z-index: -1;
  position: fixed;
  overflow: hidden;
}

/*フッターまでスクロールしたらこのクラスがmv_wrapに追加される*/
.is-hidden {
  visibility: hidden;
  opacity: 0;
}

/*　背景画像設定　*/
.slider_item01 {
    background:url(../img/mv_pic_01.jpg);
}
.slider_item02 {
    background:url(../img/mv_pic_02.jpg);
}
.slider_item03 {
    background:url(../img/mv_pic_03.jpg);
}
.slider_item04 {
  background:url(../img/mv_pic_04.jpg);
}

.slider_item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}
.slider_item::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: rgba(72, 72, 72, .35);
}



/* 画像が拡大するアニメーション（jsでタイミング制御している） */
.add-animation{
  animation-name: zoomUp;
    animation-fill-mode: both;
    animation-duration: 10.5s;
    animation-iteration-count:1;
    animation-timing-function:linear;
    animation-delay: 0s;
    animation-direction:normal;
}
@keyframes zoomUp { /* ズームアップで1.15倍させる指定 */
  0% {
  transform: scale(1);
  }
  100% {
  transform: scale(1.1);
  }
  }

@media screen and (min-width:768px) { 
    /*　画面サイズが768pxからはここを読み込む　*/
    .mv_ttl{
      width: auto;
    }
  }

@media screen and (min-width:768px) and ( max-width:1023px)  { 
  /*　画面サイズが768pxから1023pxはここを読み込む　*/
  .mv_wrap{
  height: 70vh;
  }
  .mv_slider{
  height: 70vh;
}
.slider_item {
  height:70vh;
}
}

/*========= スクロールダウンのためのCSS ===============*/
/*=== 丸が動いてスクロールを促す ====*/
/*スクロールダウン全体の場所*/
.scrolldown2{
  /*描画位置※位置は適宜調整してください*/
position:absolute;
bottom:0px;
left:50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
  /*描画位置*/
position: absolute;
left:10px;
bottom:10px;
  /*テキストの形状*/
color: #eee;
font-size: 0.7rem;
letter-spacing: 0.05em;
/*縦書き設定*/
-ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom:0;
  left:-4px;
  /*丸の形状*/
width:10px;
height:10px;
border-radius: 50%;
background:#eee;
  /*丸の動き1.6秒かけて透過し、永遠にループ*/
animation:
  circlemove 1.6s ease-in-out infinite,
  cirlemovehide 1.6s ease-out infinite;
}
/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
    0%{bottom:45px;}
   100%{bottom:-5px;}
}
/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
    0%{opacity:0}
   50%{opacity:1;}
  80%{opacity:0.9;}
100%{opacity:0;}
}
/* 線の描写 */
.scrolldown2:after{
content:"";
  /*描画位置*/
position: absolute;
bottom:0;
left:0;
  /*線の形状*/
width:2px;
height: 50px;
background:#eee;
}




/* -----魅力あふれる旅行体験----- */
.experience_wrap{
  background-color: #ffffff;
  padding: 60px 0;
}
.experience_block{
  width: 90%;
  margin: 0 auto;
}
.sectionttl{
  text-align: center;
}
.sectionttl h2{
  font-size: 3.2rem;
}
.experience_item{
  margin-top: 50px;
}
.btn_wrap{
  text-align: center;
}
@media screen and (min-width:768px){ 
  /*　画面サイズが768pxからはここを読み込む　*/
  .experience_wrap{
    padding: 120px 0;
  }
  .experience_block ul{
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .experience_block ul li{
    width: calc( 100% / 2 - 30px);
  }
  .btn_wrap{
    text-align: right;
    margin-top: auto;
  }
  .experience_item{
    display: flex;
    flex-direction: column;
  }
}
@media screen and (min-width:1024px) { 
  /*　画面サイズが1024pxからはここを読み込む　*/
  .experience_block ul li{
    width: calc( 100% / 2 - 48px);
  }
  .experience_item{
    margin-top: 60px;
  }
  .layer {
    position: relative;
  }
  .layer::after{
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.5s;
  }
  .experience_item:hover .layer::after {
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
    position: absolute;
    top: 0;
    left: 0;
  }
  .experience_item:hover .btn span {
    color: #fff;
  }
  .experience_item:hover .btn::after {
    border-top: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    z-index: 2;
  }

  /*== 背景が流れる（左から右） */
  .bgleft01:before {
    content: '';
    /*絶対配置で位置を指定*/
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    /*色や形状*/
    background: #BEA976;
    /*背景色*/
    width: 100%;
    height: 100%;
    /*アニメーション*/
    transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform: scale(0, 1);
    transform-origin: right top;
  }

  /*hoverした際の形状*/
  .experience_item:hover .bgleft01:before {
    transform-origin: left top;
    transform: scale(1, 1);
  }
}

/* -----ベルモントの歴史----- */
.history_wrap{
  background-color: #FCFAF1;
  padding: 60px 5%;
}
.experience_item p{
  margin-top: 16px;
}
@media screen and (min-width:768px) { 
  /*　画面サイズが768pxからはここを読み込む　*/
  .history_wrap{
    padding: 120px 5%;
  }
  .history_wrap>div{
    display: flex;
    justify-content: space-between;
  }
  .history_img_block{
    width: 45%;
  }
  .text_block{
    flex-shrink: 0;
    width: 50%;
  }
  .text_block h3{
    margin-top: 0;
  }
}
@media screen and (min-width:1024px) { 
  /*　画面サイズが1024pxからはここを読み込む　*/
  .history_wrap>div{
    max-width: 960px;
    margin: 0 auto;
  }
}