@charset "UTF-8";
* {
    box-sizing: border-box;
}
html {
    background-color: #fff;
    font-size: 62.5%;
    /*scroll-behavior: smooth;*/
}
body {
    margin: 0 auto;
    padding: 0;
    animation: fadeIn .8s ease 0s 1 normal;
    background-color: #8d897f;
}
html, body {
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 0;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

a {
    display: block;
    width: 100%;
    transition: 0.5s;
}
a:hover {
    opacity: 0.75;
}

ul{
    list-style: none;
}
.rltv{
  position: relative;
  z-index: 0;
}

img {
  	max-width: 100%;
  	height: auto;
    border: 0;
    display: block;
    vertical-align: bottom;
}
/*
#wrapper::after{
  top: 0;
  left: 0;
  content: "";
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-image: url('../img/execgolf_bg.webp'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -3;
}*/
.fixed-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/execgolf_bg.webp'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -3;
}
header h1{
  position: fixed;
  top: 0;
  left: 0;
  width: calc((100% - 500px)/2);
  max-width: 220px;
  min-width: 160px;
  margin-left: 2%;
  margin-top: 2%;
  filter: drop-shadow(2px 4px 6px #333);
}
header .tel_area{
  position: fixed;
  top: 0;
  right: 0;
  width: calc((100% - 400px)/2);
  max-width: 370px;
}
header .tel_area a:hover{
  opacity: 1;
}
header .menu{
  position: fixed;
  bottom: 20px;
  left: 0;
  margin-left: 50px;
  line-height: 2;
  /*width: calc((100% - 500px)/2);*/
  max-width: 120px;
}
header .menu a{
  font-size: 1.4rem;
  font-family: serif;
  color: #fff;
  text-decoration: none;
  filter: drop-shadow(2px 4px 6px #333);
}

main, footer{
  width: min(100%, 400px);
  margin: 0 auto;
}
.main-wrapper {
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  -webkit-overflow-scrolling: touch; /* iOSで慣性スクロール */
}




/*オファー*/
.offer_btn{
  position: absolute;
  bottom: 10%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(367vw / 4.0, 367px);
  animation: scale 1.4s ease-in-out infinite;
  }

@keyframes scale {
0%   { transform: scale(1); }
50%  { transform: scale(0.96); }
100% { transform: scale(1); }
}


/*関西唯一最先端テクのロー時ゴルフ設備*/
img[class^="eq_icn"]{
  position: absolute;
  margin: 0 auto;
  width: min(182vw / 4.0, 182px);
}
.eq_icn01{
  top: 32.5%;
  left: 0;
  right: 0;
}
.eq_icn02{
  top: 53%;
  left: 2%;
}
.eq_icn03{
  top: 53%;
  right: 2%;
}
/*ゴルフドック*/
.doc{
  overflow: hidden;
}
img[class^="doc_icn"]{
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  z-index: 3;
}
.doc_icn_shadow{
  top: 32.5%;
  left: auto !important;
  right: -13.5% !important;
  width: min(289vw / 4.0, 289px);
}
.doc_icn00{
  top: 22.5%;
}
/*可視化します*/
.kashika{
  background: linear-gradient(to bottom, #000 0%, #000 50%, #1a1a1a 50%, #1a1a1a 100%);
  /*aspect-ratio: 70 / 43;*/
  aspect-ratio: 350 / 167;
}
.kashika_icn{
  position: absolute;
  top: -13%;
  left: 50%;
  transform: translateX(-50%);
}
.kashika_icn.displayed{
  animation: floatUpDown .2s ease-in-out forwards 0.8s;
  opacity: 1;
}
@keyframes floatUpDown {
  0%   { top: -13%; opacity: 1; }
  80%   { top: 5%; opacity: 1; }
  100% { top: 0%; opacity: 1; }
}

/*map*/
.map_icn{
  position: absolute;
  bottom: 17.5%;
  right: 11%;
  width: min(127.5vw / 4.0, 127.5px);
}
/*施設はこちら*/
.shisetsu a{
  position: absolute;
  bottom: 4%;
  right: 5%;
  width: min(179vw / 4.0, 179px);
  height: auto;

}
.shisetsu a:hover::before,
.shisetsu a:hover::after {
  right: 0;
}
.shisetsu a::before, .shisetsu a::after{
  content: "";
  display: block;
  background: #c1960b;
  position: absolute;
  bottom: 0;
  right: .7rem;
  border-radius: 10px;
  transition: .5s;
}
.shisetsu a::before{
  width: min(13.5vw / 4.0, 13.5px);
  height: 1px;
  transform: rotate(45deg);
  transform-origin: right;
}
.shisetsu a::after{
  width: min(55vw / 4.0, 55px);
  height: 1px;
}
/*
.shisetsu_icn{
  position: absolute;
  bottom: 4%;
  right: 5%;
}*/


/*光の線*/
.img-wrap {
  position: relative;
  display: block;
  overflow: hidden;
}
.img-wrap img{
  display: block;
  width: 100%;
  height: auto;
}

.swing-path {
  position: absolute;
  top: 35%;
  width: 286px;
  width: min(327vw / 4.0, 327px);
  height: auto;
  overflow: visible;
}
.swing-path2 {
  position: absolute;
  left: 5%;
  top: 37%;
  width: 240px;
  width: min(274vw / 4.0, 274px);
  height: auto;
  overflow: visible;
}
.swing-path3 {
  position: absolute;
  left: 22%;
  top: 40%;
  width: 166px;
  width: min(190vw / 4.0, 190px);
  height: auto;
  overflow: visible;
}
.swing-path4 {
  position: absolute;
  top: 38.5%;
  width: 124px;
  width: min(142vw / 4.0, 142px);
  height: auto;
  overflow: visible;
  left: 30%;
}
.swing-path5 {
  position: absolute;
  left: 25%;
  top: 43%;
  width: 188px;
  width: min(215vw / 4.0, 215px);
  height: auto;
  overflow: visible;
}
/*
rect {
  animation: fadeOut 1s ease-in forwards;
  opacity: 1;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  1% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
*/
.glowLine {
  visibility: hidden;
  display: block; /* 常にDOM上に存在させる */
}



.shine-line {
  position: absolute;
  top: 67.5%;
  left: -50%;
  width: 60%;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.2) 25%,
    rgba(255,255,255,0.8) 50%,
    rgba(255,255,255,0.2) 75%,
    transparent 100%
  );
  border-radius: 50px;
  filter: blur(2px);
  opacity: 0;
  pointer-events: none;
}
/* スクロールで表示領域に入ったときに付与するクラス */
.shine-line.animate {
  animation: shineMove 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 2.0s;
}
@keyframes shineMove {
  0% {
    left: -50%;
    opacity: 0;
  }
  20% {
    left: 10%;
    opacity: 1;
  }
  23% {
    left: 15%;
    opacity: 0.4;
  }
  30% {
    left: 20%;
    opacity: 0;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.shine-line2 {
  position: absolute;
  top: 78.7%;
  left: -50%;
  width: 60%;
  height: 4px; /* 太さを出す */
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.2) 25%,
    rgba(255,255,255,0.8) 50%,
    rgba(255,255,255,0.2) 75%,
    transparent 100%
  );
  border-radius: 50px;
  filter: blur(2px); /* 尾を引くように見せる */

  opacity: 0;
  pointer-events: none;
}
.shine-line2.animate {
  animation: shineMove2 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 2.2s;
}
@keyframes shineMove2 {
  0% {
    left: -50%;
    opacity: 0;
  }
  20% {
    left: 10%;
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}


/*gekiteki*/
.gekiteki{
  overflow: hidden;
}
.shine-line3 {
  position: absolute;
  top: 79.2%;
  left: 0%;
  width: 60%;
  height: 3.6px; /* 太さを出す */
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.2) 25%,
    rgba(255,255,255,0.8) 50%,
    rgba(255,255,255,0.2) 75%,
    transparent 100%
  );
  border-radius: 50px;
  filter: blur(2px); /* 尾を引くように見せる */
  opacity: 0;
  pointer-events: none;
  transform: rotate(-2.5deg);
}
.shine-line3.animate {
  animation: shineMove3 2.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards .8s;
}
@keyframes shineMove3 {
  0% {
    left: 0%;
    opacity: 0;
  }
  8% {
    left: 8%;
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  100% {
    left: 60%;
    opacity: 0;
  }
}



/*固定ボタン*/
.fixed{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(100%, 335px);
  z-index: 1000;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.fixed.visible {
  opacity: 1;
  pointer-events: auto;
}
.fixed img{
  width: min(335vw / 4.0, 335px);
  margin: 0 auto;
}

.line{
  background: #000;
  padding: 1rem 0;
}
.line img{
  position: relative;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: min(369vw / 4.0, 369px);
}


/*footer*/
footer{
  background: #8B897F;
  color: #fff;
  text-align: center;
  padding: 8rem 0 2rem;
}
footer a{
  color: #fff;
  text-decoration: none;
}
.footer_logo{
  width: fit-content;
  margin: 0 auto 1.6rem;
}
.footer_company{
  font-size: 1.35rem;
  font-family: serif;
  margin-bottom: 5rem;
}
.machine-label{
  font-size: 1.2rem;
  margin-bottom: 5rem;
}
.footer_link{
  font-size: 1.35rem;
  font-family: serif;
  margin-bottom: 1.6rem;
}
footer small{
  font-family: serif;
  margin-bottom: 3rem;
}



/*--------トップへ戻るボタン--------*/
#page-top {
    position: fixed;
    bottom: 2%;
    right: 1%;
}
#page-top a {
    display: table-cell;
    font-size: 10px;
    vertical-align: middle;
    background:rgba(255, 255, 255, 0.25);
    color: #B99A1E;
    width: 50px;
    height: 50px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    /*border: 1px solid #B99A1E;*/
    position: relative;
}
#page-top a::after {
  position: absolute;
  content: "";
  width: 30%;
  height: 30%;
  top: 40%;
  left: 36%;
  border-top: 2px solid;
  border-right: 2px solid;
  transform: rotate(-45deg);
}
/**/


/**スクロールアニメーション**/
.scroll-in{
    opacity: 0;
    display: block;
    font-style: normal;
}
.s_top.displayed{
  animation: fadeInTop 0.15s ease-out forwards 0.4s;
}
.s_top2.displayed {
  animation: fadeInTop 0.15s ease-out forwards 0.5s;
}
.s_top3.displayed {
  animation: fadeInTop 0.15s ease-out forwards 0.6s;
}
@keyframes fadeInTop{
  0%{transform: translateY(-30%); opacity: 0}
100%{transform: translateY(0); opacity: 1}
}

.s_lft.displayed{
  animation: fadeInLeft .2s ease-out forwards 0.3s;
}
@keyframes fadeInLeft{
  0%{transform: translateX(-90%); opacity: 0;}
  100%{transform: translateX(0%); opacity: 1;}
}

.s_rght.displayed{
  animation: fadeInRight .2s forwards .65s;
}
.s_rght2.displayed{
  animation: fadeInRight .2s forwards .8s;
}
.s_rght3.displayed{
  animation: fadeInRight .2s forwards .95s;
}
.s_rght4.displayed{
  animation: fadeInRight .2s forwards 1.1s;
}
@keyframes fadeInRight{
  0%{transform: translateX(90%); opacity: 0}
100%{transform: translateX(0%); opacity: 1}
}




  .s_btm.displayed{
    animation: fadeInBottom 1s forwards 1.0s;
  }

  .s_lft2.displayed{
    animation: fadeInLeft2 0.8s forwards .4s;
  }
  .s_in.displayed{
    animation: fadeIn 1s forwards .4s;
  }


  @keyframes fadeInBottom{
    0%{transform: translate(-50%, 15%); opacity: 0}
  100%{transform: translate(-50%, 0); opacity: 1}
  }
  

  @keyframes fadeIn{
    0%{opacity: 0}
  100%{opacity: 1}
  }



/*---------------------------------------------------
レスポンシブ
----------------------------------------------------*/
@media screen and (max-width:860px) {

}

@media screen and (max-width:768px) {
  header .tel_area{
    display: none;
  }
  main, footer {
    margin-left: auto;
    margin-right: 3rem;
}
}

@media screen and (max-width:610px) {
  main, footer {
    margin: 0 auto;
  }
  header h1, header .menu{
    display: none;
  }
}

@media screen and (max-width:400px) {
  header, main, footer{
    width: 100%;
  }
}