@charset "UTF-8";

/*************************************************
intro*/
.scrollBtn img {
  width: 50px;
}

.scrollBtn img:hover {
  cursor: pointer;
}

.introTxt01 .introText img {
  width: 110px;
}

section#intro {
  /*display:none;*/
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background-color: #fff;
}

section#intro #upperLayer {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: table;
}

section#intro #upperLayerInner {
  width: 100%;
  height: 100%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

section#intro h2 {
  opacity: 0.9;
}

section#intro .spOnly {
  display: none;
}

section#intro .introTxt p {
  /*margin-left: 2em;*/
}

section#intro .introTxt p {
  line-height: 1.5;
}

.introText {
  opacity: 0;
  display: block;
  max-width: 110px;
}

.introTxt01 .introText:nth-child(1) {}

/*
.introTxt01 .introText:nth-child(2) {
	-webkit-animation: example 1s ease 2s 1 forwards;
	animation: example 1s ease 2s 1 forwards;
}
*/
@keyframes float {
  50% {
    transform: translateY(-10px);
  }
}






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

  PC

********************************************************/
@media screen and (min-width: 769px),
print {
  section#intro #underLayer {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /*　パッケージ写真　*/
    background-image: url(https://www.miwayama.co.jp/wp-content/themes/original_child/common/img/intro/2504_intro02c.jpg);
    /* ゆうやけ */
    /* background-image: url(https://www.miwayama.co.jp/wp-content/themes/original_child/common/img/intro/2310_intro02.jpg?date=230224); */
    
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom;
    background-size: cover;
    /*		background-attachment: fixed;*/
    opacity: 0;
  }

  .introLogo {
    position: absolute;
    max-width: 284px;
    top: 60px;
    left: 60px;
    opacity: 0;
  }

  /* パッケージ写真の時はロゴを非表示 */
  section#intro.introType2 .introLogo {
    display: none;
  }


  .introLogo img {
    height: 100px;
  }

  section#intro .scrollBtn {
    position: absolute;
    bottom: 8%;
    width: 100%;
    text-align: center;
    opacity: 0;
    animation-name: float;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;
  }

  /*************************************************
	intro*/
  .introTxt {
    position: absolute;
    bottom: 40px;
    right: 50px;
  }

  .introTxt.tx_bk {
    right: 9vw;
    bottom: 6vh;
  }

  .introTxt p {
    max-width: 100%;
  }

  .introTxt p img {
    width: 100%;
  }
}





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

  タブレット

********************************************************/
@media screen and (max-width: 768px) {
  section#intro #underLayer {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /*　お食事処　*/
    background-image: url(https://www.miwayama.co.jp/wp-content/themes/original_child/common/img/intro/2504_intro02c.jpg);
    background-repeat: no-repeat;
    background-position: right 50% bottom 0;
    background-size: cover;
    /*		background-attachment: fixed;*/
    opacity: 0;
  }
  /*  */
  section#intro.introType1 #underLayer {
    background-position-y: top;
  }

  section#intro.introType1 #underLayer {
    background-position: 56% -14vw;
    transform: rotate(-1deg);
    width: 120%;
    top: -6.5vw;
    left: -2vw;
    background-size: 284vw 103.5vh;
    height: 110%
  }

  /* この画像はロゴを非表示 */
  section#intro.introType2 .introLogo {
    display: none !important;
  }

  /* 湖から眺める古墳　2310_intro01_sp.jpg*/
  /* section#intro.introType2.kofun #underLayer{
		background-position: right 74% bottom 100px;
	} */
  .introLogo {
    max-width: 284px;
    position: absolute;
    top: 40px;
    left: 40px;
    opacity: 0;
  }

  .introLogo img {
    height: 120px;
    width: 120px;
  }

  section#intro .scrollBtn {
    position: absolute;
    bottom: 10%;
    bottom: 60px;
    width: 100%;
    text-align: center;
    opacity: 0;
    animation-name: float;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;
  }

  html.android section#intro .scrollBtn {
    position: absolute;
    bottom: 10%;
    bottom: 60px;
    width: 100%;
    text-align: center;
    opacity: 0;
    animation-name: float;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;
  }

  section#intro .scrollBtn img {
    width: 50px;
    margin: 0 auto;
  }

  /*************************************************
	intro*/


  .introTxt {
    position: absolute;
    bottom: 60px;
    right: 50px;
  }

  section#intro .spOnly {
    display: block;
  }

  section#intro .pcOnly {
    display: none;
  }

  .introTxt p {}

  .introTxt p img {
    width: 100%;
  }

  .introText {
    max-width: 110px;
  }
}






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

  スマートフォン

********************************************************/
@media screen and (max-width: 479px) {
  section#intro {
    padding-bottom: env(safe-area-inset-bottom);
  }

  section#intro #underLayer {
    position: absolute;
    top: 0;
    width: 110%;
    height: 100vh;
    /* width: 110%;
    height: 110%; */

    z-index: 1;
    /*　パッケージ　*/
    background-image: url(https://www.miwayama.co.jp/wp-content/themes/original_child/common/img/intro/2504_intro02_spa.jpg?v);
    background-repeat: no-repeat;
    /*background-position: right 48% bottom 100px;
    background-size: cover;*/
    background-position: left 39% top -71px;
    background-size: 205%;
    padding-bottom: env(safe-area-inset-bottom);
    /*		background-attachment: fixed;*/
    opacity: 0;

  }

  .introLogo {
    width: 90px;
    position: absolute;
    top: 30px;
    left: 30px;
    opacity: 0;
  }

  .introLogo img {
    height: 90px;
    width: 90px;
  }

  section#intro .scrollBtn {
    position: absolute;
    bottom: 8%;
    width: 100%;
    text-align: center;
    opacity: 0;
    animation-name: float;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;
  }

  html.android section#intro .scrollBtn {
    position: absolute;
    bottom: 18%;
    width: 100%;
    text-align: center;
    opacity: 0;
    animation-name: float;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;
  }

  section#intro .scrollBtn img {
    width: 10%;
    margin: 0 auto;
  }

  /*************************************************
	intro*/
  .introText {
    list-style: none;
    text-align: center;
    opacity: 0;
    font-size: 1.4rem;
  }

  .introTxt {
    position: absolute;
    width: 100px;
    bottom: 19%;
    right: 10px;
  }



  .introTxt p img {
    width: 100%;
  }

  .introTxt01 .introText img {
    width: 82%;
  }
}

@media screen and (max-width: 400px) {
  section#intro #underLayer {

    background-position: left 39% top -121px;
    background-size: 190%;
    opacity: 0;

  }
}

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

  keyframe

********************************************************/
@-webkit-keyframes example {
  100% {
    opacity: 1;
  }
}

@keyframes example {
  100% {
    opacity: 1;
  }
}