@charset "UTF-8";
/*フェードイン定義*/

* {
    font-family: cursive,serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 0em;
}

a {
    margin: 0;
    padding: 0;
}

/*タイトル「Grin Green」*/
.header-left {
    float:left;
}

.header-left h1 {
    position: absolute;
    top: 30px;
    left: 350px ;
    padding-top: 20px;
    margin: 0;
    color: white;
    transform: translate(-50%,-50%,-);
    font-size: 500%;
    z-index: 90;
}
.header-left p {
    position: absolute;
    top: 100px;
    left: 280px ;
    padding-top: 20px;
    margin: 0;
    color: white;
    transform: translate(-50%,-50%,-);
    font-size: 400%;
    z-index: 90;
}

/*----------ページ遷移----------------*/
/*宿泊*/
.header-right p1 {
    position: absolute;
    top: 700px;
    left: 0px;
    color: white;
    font-size: 30px;
    padding: 20px;
    padding-left: 0;
    border-left: 5px solid white;
    z-index: 70;
    text-align: left;
}

.link-box1 a {
    top: 690px;
    left: 0px;
    height: 60px;
    width: 300px;
    text-align: center;
    opacity: 0.5;
    margin: 0 auto 5%;
    padding: 10px;
    background: white;
    position: absolute;
    z-index: 80;
}

/*ドッグラン*/
.header-right p2 {
    position: absolute;
    top: 700px;
    left: 300px;
    color: white;
    font-size: 30px;
    padding: 20px;
    padding-left: 30px;
    border-left: 5px solid white;
    z-index: 70;
    text-align: left;
}

.link-box2 a {
  top: 690px;
  left: 300px;
  height: 60px;
  width: 300px;
  text-align: center;
  opacity:0.5;
  margin:0 auto 5%;
  padding:10px;
  background: white;
  position: absolute;
  z-index: 80;
}

/*サービス・設備*/
.header-right p3 {
    position: absolute;
    top: 700px;
    line-height: 40px;
    left: 600px;
    color: white;
    font-size: 30px;
    padding-right: 20px;
    border-left: 5px solid white;
    z-index: 70;
    text-align: left;
}

.link-box3 a {
  top: 690px;
  left: 600px;
  height: 60px;
  width: 300px;
  text-align: center;
  opacity:0.5;
  margin:0 auto 5%;
  padding:10px;
  background: white;
  position: absolute;
  z-index: 80;
}

/*営業日*/
.header-right p4 {
    position: absolute;
    top: 700px;
    line-height: 40px;
    left: 900px;
    color: white;
    font-size: 30px;
    padding-left: 30px;
    border-left: 5px solid white;
    display: inline-block; /*テキストサイズに合わせて枠を調整*/
    z-index: 70;
    /*text-align: center;*/
}

.link-box4 a {
  top: 690px;
  left: 900px;
  height: 60px;
  width: 300px;
  text-align: center;
  opacity:0.5;
  margin:0 auto 5%;
  padding:10px;
  background: white;
  position: absolute;
  z-index: 80;
}

/*--------予約・問い合わせ------------*/
.right-box {
    position: fixed;
    top: 0;
    left: 1210px;
    width: 150px;
    height: 1200px;
    background-color: gray;
    z-index: 99;
    
}
.right-box p {
    position: fixed;
    writing-mode: vertical-rl; /* 縦書き（右→左） */
    text-orientation: upright; /* 文字の向きを正立に */
    color: white;
    font-size: 50px;
    left: 1275px;
    top: 30px;
    
}
/*Instagramロゴ*/
.instagram {
    top: 500px;
    left: 1250px;
    height: 60px;
    width: 60px;
    background: transparent;
    position: fixed;
}
/*Instagramロゴ*/
.LINE {
    top: 600px;
    left: 1250px;
    height: 60px;
    width: 60px;
    background: transparent;
    position: fixed;
    color: white;
}
.LINE-box a {
  top: 80px;
  left: 900px;
  height: 60px;
  width: 150px;
  background: transparent;
  position: absolute;
}
.Instagram-box a {
  top: 80px;
    left: 1130px;
    height: 60px;
    width: 300px;
    background: transparent;
    position: absolute;
}
/*--------トップスライドショー------------*/
.hero {
  position: relative;
    width: 1350px;
  height: 100vh;
  overflow: hidden;
}

.slideshow {
  position: absolute;
  width: 1350px;
  height: 1020px;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 1350px;
  height: 1020px;
  background-position: center;
  background-size: cover;
  opacity: 0;
  animation: slideshow 24s linear infinite;
  transform: scale(1);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* スライドごとのディレイ設定 */
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 6s; }
.slide:nth-child(3) { animation-delay: 12s; }
.slide:nth-child(4) { animation-delay: 18s; }

/* オーバーレイ効果 */
.slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1350px;
  height: 1020px;
  background-color: rgba(0, 0, 0, 0.2);
}

/* アニメーションの定義 */
@keyframes slideshow {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  4% {
    opacity: 1;
  }
  25% {
    opacity: 1;
    transform: scale(1);
  }
  29% {
    opacity: 0;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/*---------------------お知らせ-----------------------*/
.oshirase p {
    top: 850px;
    left: 50px;
    font-size: 40px;
    position: absolute;
}

.oshirase-box {
    background-color: white;
    left: 50px;
    top: 900px;
    width: 1150px;
    position: absolute;
    border-top: 4px solid black;
}
.oshirase-box p {
    font-size: 20px;
    top: 30px;
    left: 50px;
    background-color: white;
    width: 1100px;
    height: 35px;
    padding-left: 100px;
    border-bottom: 3px solid black;
    position: absolute;
}
.oshirase-box a {
    top: 0px;
    left: 130px;
    height: 50px;
    width: 300px;
    background: transparent;
    position: absolute;
}

/*---------------------各種案内-----------------------*/
/*宿泊*/
.item1_link {
  display: block;
  width: 1850px;

}
.item1_image {
    top: 1415px;
    width: 1000px;
    height: 500px;
    margin-bottom: 10px;
    margin-left: -200px;
    position: absolute;
    overflow-y: hidden;
    overflow-x: hidden;
    border-top: 5px solid white;
}

.item1_image a img {
  width: inherit;     /* 親要素に合わせる（自由に調整可） */
  height: inherit;    /* 親要素に合わせる（自由に調整可） */
  position: absolute; /* 相対位置に指定 */
  top: -500px;             /* 好きな位置を指定 */
  left: -400px;            /* 好きな位置を指定 */
}
.item1_text {
  margin-top: 10px;
  text-align: center;
}
.item1_box .item1_link:hover {
  opacity: 1;
    width: 1850px;
}

/*黒い部分・文字・リンクBOX*/
p5 {
    position: absolute;
    width: 300px;
    top: 1755px;
    left: 915px;
    color: white;
    font-size: 80px;
    padding: 30px;
}
.black-box1 {
    top: 1420px;
    left: 800px;
    width: 550px;
    height: 495px;
    background-color: black;
    position: absolute;
}
.clean-box1 a {
    top: 1415px;
    width: 1210px;
    height: 500px;
    background-color: transparent;
    position: absolute;
    z-index: 90;
}
/*ドッグラン*/
.item2_link {
  display: block;

}
.item2_image {
    top: 1915px;
    left: 440px;
    width: 950px;
    height: 500px;
    margin-bottom: 10px;
    margin-left: -40px;
    position: absolute;
    overflow-y: hidden;
    overflow-x: hidden;
        border-top: 5px solid white;
}

.item2_image a img {
  width: inherit;
    height: inherit;
    position: absolute;
    top: -100px;
    left: -100px;
}
.item2_text {
  margin-top: 10px;
  text-align: center;
}
.item2_box .item2_link:hover {
  opacity: 1;
}

.item2_image p {
    font-size: 80px;
    top: 400px;
    left: 70px;
    position: absolute;
    color: white;
    z-index: 30;
}
/*黒い部分・文字・リンクBOX*/
p6 {
    position: absolute;
    width: 500px;
    height: 200px;
    top: 2219px;
    left: 50px;
    color: white;
    font-size: 80px;
    padding: 30px;
}
.black-box2 {
    top: 1919px;
    left: 0px;
    width: 550px;
    height: 500px;
    background-color: black;
    position: absolute;
}
.clean-box2 a {
    top: 1915px;
    width: 1210px;
    height: 500px;
    background-color: transparent;
    position: absolute;
    z-index: 90;
}
/*設備・サービス*/
.item3_link {
  display: block;

}
.item3_image {
    top: 2415px;
    width: 1000px;
    height: 500px;
    margin-bottom: 10px;
    margin-left: -40px;
    position: absolute;
    overflow-y: hidden;
    overflow-x: hidden;
    border-top: 5px solid white;
}

.item3_image a img {
  width: inherit;     /* 親要素に合わせる（自由に調整可） */
  height: inherit;    /* 親要素に合わせる（自由に調整可） */
  position: absolute; /* 相対位置に指定 */
  top: -200px;             /* 好きな位置を指定 */
  left: -200px;            /* 好きな位置を指定 */
}
.item3_text {
  margin-top: 10px;
  text-align: center;
}
.item3_box .item3_link:hover {
  opacity: 1;
}
.item3_image p {
    font-size: 80px;
    top: 400px;
    left: 70px;
    position: absolute;
    color: white;
    z-index: 30;
}
/*黒い部分・文字・リンクBOX*/
p7 {
    position: absolute;
    width: 550px;
    height: 200px;
    top: 2650px;
    left: 790px;
    color: white;
    font-size: 80px;
    padding: 30px;
    line-height: 90px;
}
.black-box3 {
    top: 2420px;
    left: 800px;
    width: 550px;
    height: 500px;
    background-color: black;
    position: absolute;
}
.clean-box3 a {
    top: 2415px;
    width: 1210px;
    height: 500px;
    background-color: transparent;
    position: absolute;
    z-index: 90;
}
/*営業日・お問い合わせ*/
.item4_link {
  display: block;

}
.item4_image {
    top: 2915px;
    left: 440px;
    width: 950px;
    height: 500px;
    margin-bottom: 10px;
    margin-left: -40px;
    position: absolute;
    overflow-y: hidden;
    overflow-x: hidden;
        border-top: 5px solid white;
}

.item4_image a img {
  width: inherit;     /* 親要素に合わせる（自由に調整可） */
  height: inherit;    /* 親要素に合わせる（自由に調整可） */
  position: absolute; /* 相対位置に指定 */
  top: -200px;             /* 好きな位置を指定 */
  left: 100px;            /* 好きな位置を指定 */
}
.item4_text {
  margin-top: 10px;
  text-align: center;
}
.item4_box .item4_link:hover {
  opacity: 1;
}
.item4_image p {
    font-size: 80px;
    top: 400px;
    left: 70px;
    position: absolute;
    color: white;
    z-index: 30;
}
/*黒い部分・文字・リンクBOX*/
p8 {
    font-size: 80px;
    width: 300px;
    height: 100px;
    top: 3280px;
    left: 150px;
    position: absolute;
    color: white;
    z-index: 30;
}
.black-box4 {
    top: 2919px;
    left: 0px;
    width: 550px;
    height: 500px;
    background-color: black;
    position: absolute;
}
.clean-box4 a {
    top: 2915px;
    width: 1210px;
    height: 500px;
    background-color: transparent;
    position: absolute;
    z-index: 90;
}

/*----------------------------ページ下--------------------------*/
.under-box1 {
    top: 3415px;
    background-color: #008080;
    height: 600px;
    width: 1350px;
    position: absolute;
}
/*TOP*/
.under-box1 p9 {
    position: absolute;
    top: 40px;
    left: 135px;
    color: white;
    font-size: 40px;
    padding: 30px;
}

.top-box a {
  top: 40px;
  left: 140px;
  height: 60px;
  width: 180px;
  background: transparent;
  position: absolute;
}
/*宿泊*/
.under-box1 p10 {
    position: absolute;
    top: 120px;
    left: 60px;
    color: white;
    font-size: 40px;
    padding: 30px;
}

.shukuhaku-box a {
  top: 120px;
  left: 150px;
  height: 60px;
  width: 140px;
  background: transparent;
  position: absolute;
}

/*ドッグラン*/
.under-box1 p11 {
    position: absolute;
    top: 200px;
    left: 130px;
    color: white;
    font-size: 40px;
    padding: 30px;
}

.dogrun-box a {
  top: 200px;
  left: 140px;
  height: 60px;
  width: 230px;
  background: transparent;
  position: absolute;
}

/*設備・サービス*/
.under-box1 p12 {
    position: absolute;
    top: 280px;
    left: 60px;
    color: white;
    font-size: 40px;
    padding: 30px;
}

.service-box a {
  top: 280px;
  left: 140px;
  height: 60px;
  width: 320px;
  background: transparent;
  position: absolute;
}

/*営業日*/
.under-box1 p13 {
    position: absolute;
    width: 600px;
    top: 360px;
    left: 95px;
    color: white;
    font-size: 40px;
    padding: 30px;
}

.information-box a {
  top: 360px;
  left: 140px;
  height: 60px;
  width: 160px;
  background: transparent;
  position: absolute;
}





/*住所・会社名*/
.footer p {
    top: 60px;
    left: 580px;
    font-size: 30px;
    line-height: 50px;
    color: white;
    height: 100px;
    width: 760px;
    position: absolute;
}
.footer-right {
    top: 480px;
    left: 150px;
    font-size: 40px;
    color: white;
    position: absolute;
    margin-bottom: -90px;
}


.map_image1 {
    top: 3600px;
    left: 600px;
    height: 150px;
    width: 150px;
    position: absolute;
}

.access-box a {
    top: 0px;
    left: 0px;
    height: 300px;
    width: 450px;
    background: transparent;
    position: absolute;
}