/* 共通 */
p{
  text-align: left;
  color: #191919;
  /* PC/Noto Sans JP_p */
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 170%; 
}
main video,main img{
  width: 100%;
}
section{
  padding: 70px 0;
}
._flex{
  display: flex;
  align-items: center;
  gap: 2%;
}
._flex._reverse{
  flex-direction: row-reverse;
}
._inner{
  width: 80%;
  max-width: 1080px;
  margin: 0 auto;
}
._title{
  text-align: center;
  margin: 0 auto 40px;
}
._title h2{
  color:#020E1D;
  text-align: center;
  /* PC/NotoSansJP_H2 */
  font-family: "Noto Sans JP";
  font-size: clamp(1.5rem, 1.379rem + 0.52vw, 2rem);
  font-style: normal;
  font-weight: 700;
  line-height: 170%;
}
._title span{
  color:#020E1D;
  text-align: center;
  /* PC/Montserrat_H3 */
  font-family: Montserrat;
  font-size: clamp(1.125rem, 1.095rem + 0.13vw, 1.25rem);
  font-style: normal;
  font-weight: 700;
  line-height: 170%;
}
._title p{
  color: #020E1D;
  text-align: center;
  /* PC/NotoSansJP_H3 */
  font-family: "Noto Sans JP";
  font-size: clamp(1rem, 0.939rem + 0.26vw, 1.25rem);
  font-style: normal;
  font-weight: 700;
  line-height: 170%;
  margin-top: 16px;
}
._btn{
  width: 100%;
  max-width: 380px;
  height: 90px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5%;
}
._gradation{
  font-family: "Noto Sans JP";
  font-size: clamp(1.5rem, 1.379rem + 0.52vw, 2rem);
  font-style: normal;
  font-weight: 700;
  line-height: 170%;
  background: linear-gradient(90deg, #020E1D 0%, #093F83 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
}
.mv-flex{
  margin-top: 100px;
}
._btn.white-btn{
  position: relative;
  height: 90px;
  border-radius: 100px;
  background-color: #FFF;
  color: #000;
  border-radius: 100px;
  border: 3px solid #093F83;
  background:#FFF;
}
._btn.white-btn p{
  white-space: nowrap;
  color:#093F83;
  /* PC/NotoSansJP_H2 */
  font-family: "Noto Sans JP";
  font-size: clamp(1.375rem, 1.223rem + 0.65vw, 2rem);
  font-style: normal;
  font-weight: 700;
  line-height: 110%; 
}
._btn.white-btn p span{
  font-size: 16px;
}
._btn.white-btn::before{
  content: '';
  background-image: url(../img/golf/tel.webp);
  width: 40px;
  aspect-ratio: 40/43;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
._btn.white-btn::after{
  content: '';
  background-image: url(../img/golf/tel-comment.webp);
  width: 50%;
  aspect-ratio: 223/61;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -75%);
}
._btn.blue-btn{
  position: relative;
  height: 90px;
  border-radius: 100px;
  background-color: #FFF;
  color: #000;
  border-radius: 100px;
  border: 3px solid #FFF;
  background: #093F83;
}
._btn.blue-btn p{
  white-space: nowrap;
  color:#fff;
  /* PC/NotoSansJP_H2 */
  font-family: "Noto Sans JP";
  font-size: clamp(1.375rem, 1.223rem + 0.65vw, 2rem);
  font-style: normal;
  font-weight: 700;
  line-height: 110%; 
}
._btn.blue-btn::before{
  content: '';
  background-image: url(../img/golf/pc.webp);
  width: 40px;
  aspect-ratio: 40/33;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* mv */
.mv{
  position: relative;
  background-image: url(../img/golf/mv-bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: left;
  text-align: left;
  padding: 0;
  overflow: hidden;
}

.mv-txt{
  position: relative;
  z-index: 3;
  width: 60%;
  max-width: 1200px;
  margin-left: 5%;

    & h1{
      color: #FFF;
      text-align: left;
      font-family: "Noto Sans JP";
      font-size: clamp(2rem, 1.029rem + 4.14vw, 6rem);
      font-style: normal;
      font-weight: 700;
      line-height: 170%; 
      font-style: italic;
      text-align: left;
    }

    & h2{
      color: #FFF;
      text-align: left;
      font-family: "Noto Sans JP";
      font-size: clamp(1.5rem, 1.136rem + 1.55vw, 3rem);
      font-style: normal;
      font-weight: 700;
      line-height: 170%;
      font-style: italic;
    }

    & > p{
      color: #FFF;
      text-align: center;
      /* PC/NotoSansJP_H2 */
      font-family: "Noto Sans JP";
      font-size: clamp(1.125rem, 0.913rem + 0.91vw, 2rem);
      font-style: normal;
      font-weight: 700;
      line-height: 170%;
      text-align: left;
    }
}




.mv-mov{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40%;
  height: 100%;
  border-radius: 50% 0 0 50%;
  overflow: hidden;

}



/* about */
.about{
  padding: 0;
}

.about-inner{
  position: relative;
  padding: 120px 0 ;
}
.about-inner::before{
  content: '';
  background-image: url(../img/golf/about-dec1.webp);
  width: 18%;
  aspect-ratio: 1/1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 5%;
  left: 0;
  transform: translateX(-25%);
}
.about-inner::after{
  content: '';
  background-image: url(../img/golf/about-dec2.webp);
  width: 15%;
  aspect-ratio: 1/1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 5%;
  right: 0;
}
.about-txt{
  text-align: center;
  width: 80%;
  margin: 0 auto;
}
.about-txt p{
  text-align: center;
}


/* charm */
.charm{
  position: relative;
  padding-top: 40px;
}
.charm::before{
  content: '';
  background-image: url(../img/golf/charm-dec.webp);
  width: 10%;
  aspect-ratio: 241/384;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  left: 10%;
  transform: translateX(-100%);
  z-index: 3;
}
.charm-item{
  position: relative;
  align-items: start;
  z-index: 2;
  background: #EAF2F2;
  margin-bottom: 140px;
}
.charm-title{
  margin-bottom: 80px;
}
.charm-item:last-child{
  margin-bottom: 0;
}
.charm-item::before{
  content: '';
  background: #EAF2F2;
  width: calc(50vw - 50%);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
}
.charm-item::after{
  content: '';
  background: #EAF2F2;
  width: 5%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%);
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(100%);
}
._reverse.charm-item::before{
  left: auto;
  right: 0;
  transform: translateX(100%);
}
._reverse.charm-item::after{
  left: 0;
  right: auto;
  transform: translateX(-100%);
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%);
}
.charm-txt{
  position: relative;
  width: 50%;
  top: -40px;
}
.charm-absolute p{
  color: #957110;
  /* PC/Montserrat_H3 */
  font-family: Montserrat;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 170%;
}
.charm-absolute p span{
  /* 塗り透明＋枠線のみ表示 */
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #957110;
  text-shadow: none;
  font-family: Montserrat;
  font-size: clamp(1.75rem, 1.265rem + 2.07vw, 3.75rem);
  font-style: normal;
  font-weight: 700;
  line-height: 170%;
}

.charm-img{
  position: relative;
  width: 50%;
  top: -40px;
}
.charm-btn{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 280px;
  height: 70px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 2px solid #FFF;
  background: #020E1D;
  margin-top: 24px;
}
.charm-btn p{
  color: #FFF;
  text-align: center;
  /* PC/Montserrat_H3 */
  font-family: Montserrat;
  font-size: clamp(1rem, 0.939rem + 0.26vw, 1.25rem);
  font-style: normal;
  font-weight: 700;
  line-height: 170%;
}
.charm-btn::after{
  content: '';
  background-image: url(../img/golf/arrow.png);
  width: 10px;
  height: 21px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* Charm slider layout (vanilla, golf namespace) */
.golf-slider {
  width: 50%;
  overflow: hidden;
  position: relative;
  top: -40px;
}

.golf-slider .golf-slider-track {
  display: flex;
  will-change: transform;
  transform: translateX(0%);
}

.golf-slider .golf-slide {
  flex: 0 0 100%;
}

.golf-slider .golf-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 8px;
}

.golf-slider .golf-slider-dots {
  position: relative;
  margin-top: 12px;
  text-align: center;
}

.golf-slider .golf-slider-dot {
  width: 8px;
  height: 8px;
  background: #cfd8dc;
  border: none;
  border-radius: 50%;
  margin: 0 6px;
  padding: 0;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.golf-slider .golf-slider-dot.is-active {
  background-color: #957110;
  transform: scale(1.4);
}



/* feature */
.feature{
  background-image: url(../img/golf/feature-bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
}
.feature-title {
  margin-bottom: 80px;
}
.feature-title h2{
  color: #FFF;
}
.feature-title h3{
  color: #FFF;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 170%;
  margin-bottom: 0;
  margin-top: 24px;
  margin-bottom: 8px;
  text-align: center;
}
.feature-title span{
  color: #FFF;
}
.feature-title p{
  color: #FFF;
  margin-top: 0;
  font-size: 16px;
}
.feature-item{
  position: relative;
  box-sizing: border-box;
  border-radius: 8px;
  background: #FFF;
  padding: 40px;
}
.feature-item::before{
  content: '取り扱い機種: OK ON GOLF';
  color: #FFF;
  text-align: center;
  /* PC/Noto Sans JP_p */
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 170%;
  position: absolute;
  bottom: -16px;
  right: 0;
  transform: translateY(100%);
}
.feature-flex{
  margin-bottom: 64px;
}
.feature-flex:last-child{
  margin-bottom: 0;
}
.feature-txt {
  width: 50%;
}
.feature-txt h3{
  width: fit-content;
  color:#020E1D;
  /* PC/NotoSansJP_H2 */
  font-family: "Noto Sans JP";
  font-size: clamp(1rem, 0.939rem + 0.26vw, 1.25rem);
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  padding-right: 16px;
  border-bottom: 1px solid #020E1D;
  margin-bottom: 8px;
}
.feature-txt h2{
  color:#020E1D;
  /* PC/NotoSansJP_H2 */
  font-family: "Noto Sans JP";
  font-size: clamp(1.5rem, 1.379rem + 0.52vw, 2rem);
  font-style: normal;
  font-weight: 700;
  line-height: 170%;
}
.feature-txt h2 span{
  color: #957110;
}
.feature-img {
  width: 50%;
}
/* Price table */
.price {
  position: relative;
  background: #EAF2F2;
}
.price::before{
  content: '';
  background-image: url(../img/golf/price-dec.webp);
  width: 10%;
  aspect-ratio: 195/326.5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  right: 8%;
  transform: translate(50%,10%);
}
.price table{
  background: #FFF;
}
.price-table-wrap {
  margin-top: 32px;
}
.price-table-wrap > p{
  width: fit-content;
  margin: 24px auto 0;
  text-align: left;
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.price-table-scroll,
.cancel-table-scroll{
  overflow-x: auto;
}

.price-table th,
.price-table td {
  border-bottom: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  padding: 16px 12px;
  text-align: center;
}

.price-table thead th {
  background-color: #0b2133;
  color: #fff;
  font-weight: 700;
  
}

.price-table thead th.is-member {
  background-color: #b7942a; /* ゴールド系 */
}

.price-table tbody th {
  color: #0b2133;
  font-weight: 700;
  font-family: Montserrat,sans-serif , "Noto Sans JP";
  border-right: 2px solid #020E1D;
}

.price-table .note {
  display: block;
  font-size: 16px;
  color: #0b2133;
  margin-top: 2px;
}

.price-table td {
  color: #0b2133;
  font-weight: 700;
}

.price-table .rental td.is-member {
  border-left: none;
}

.price-table .member-price {
  display: inline-block;
  text-align: center;
}
.member-price .price{
  padding-bottom: 0;
}
.member-price .price{
  background: none;
}
.member-price .price::before{
  background: none;
}
.price-table .member-price .price {
  color: #b08700;
  font-size: 24px;
  font-weight: 800;
}

.price-table .member-price .label {
  color: #b08700;
  font-size: 16px;
}

.price-table .inquiry {
  color: #0b2133;
  font-weight: 600;
}
.pc-only{ display: block; }
.price-cards{ display: none; }
.cancel-cards{ display: none; }

/* SP price cards */
.price-cards,
.cancel-cards{
  gap: 16px;
}
.price-card,
.cancel-card{
  background: #FFF;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  margin-bottom: 32px;
}
.price-card .card-head,
.cancel-card .card-head{
  background: #0b2133;
  color: #fff;
  text-align: center;
  font-weight: 700;
  padding: 18px 12px;
}
.price-card.is-member .card-head{ background: #b7942a; }
.price-card table,
.cancel-card table{
  width: 100%;
  border-collapse: collapse;
}
.price-card th,
.price-card td,
.cancel-card th,
.cancel-card td{
  border-top: 1px solid #e0e0e0;
  padding: 14px 12px;
  text-align: center;
  font-weight: 700;
}
.price-card th, .price-card td{
  border-left: 1px solid #020E1D;
  border-bottom: 1px solid #020E1D; }
.price-card th:first-child, .price-card td:first-child{ 
  width: 30%;
  border-left: none;
}
.price-card .price-cell{ vertical-align: middle; }
.price-card .member-price .price{ color:#b08700; font-size:24px; font-weight:800; }
.price-card .member-price .label{ color:#b08700; font-size:16px; }
.price-card .note{ display:block; font-size:14px; color:#0b2133; margin-top:2px; }
.price-card td.inquiry{ position: relative; }
.price-card tr:last-of-type th, .price-card tr:last-of-type td{ border-bottom: none; }
.cancel-card th{
  border: 0.5px solid #020E1D;
  width: 40%;
  font-family: Montserrat,sans-serif , "Noto Sans JP";
}
.cancel-card td{
  border: 0.5px solid #020E1D;
}
.cancel-card .is-danger{ color: #780709; font-weight: 700; }
.attention-title p{
  text-align: left;
}

.feature-br{
  display: none;
}
@media (max-width: 1350px) {
  .feature-br{
    display: block;
  }
}
@media (max-width: 768px) {
  .pc-only{ display: none; }
  .price-table th,
  .price-table td {
    padding: 12px 8px;
  }
  .price-table .member-price .price {
    font-size: 20px;
  }
  .price-cards{ display: grid; }
  .cancel-cards{ display: grid; }
  .price-table-wrap{
    margin-bottom: 120px;
  }
}

/* Cancel table */
.cancel-table-wrap {
  overflow-x: auto;
  margin-top: 32px;
}
.cancel-table-wrap > h3{
  color: #020E1D;
  text-align: center;
  /* PC/NotoSansJP_H3 */
  font-family: "Noto Sans JP";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 170%; 
  margin-bottom: 16px;
}

.cancel-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cancel-table th,
.cancel-table td {
  border-bottom: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  padding: 14px 12px;
  text-align: center;
  font-weight: 700;
  font-family: Montserrat,sans-serif , "Noto Sans JP";
}

.cancel-table thead th {
  background-color: #0b2133;
  color: #fff;
}

.cancel-table tbody th {
  color: #0b2133;
  font-weight: 700;
  border-right: 2px solid #020E1D;
}

.cancel-table .is-danger {
  color: #b00020; /* 赤系 */
  font-weight: 800;
}


.cta {
  background-image: url(../img/golf/cta-bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 0;
}
.cta-inner{
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}
.cta-inner > p{
  color: #FFF;
  text-align: center;
  margin-bottom: 64px;
}
.cta-inner ._flex{
  justify-content: center;
  width: 100%;
}

/* floating side nav */
.golf-side-nav{
  position: fixed;
  right: 0;
  top: 35%;
  transform: translate(120%, -50%); /* 右外に退避 */
  z-index: 1000;
  width: 180px;
  background: #0b3b7a;
  border-radius: 8px 0 0 8px;
  padding: 16px ;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  transition: transform .4s ease, opacity .25s ease;
  will-change: transform, opacity;
}
.golf-side-nav.is-visible{ 
  transform: translate(0, -50%); 
  opacity: 1; 
  pointer-events: auto; 
}
.golf-side-nav h3{
  color: #FFF;
  font-family: Montserrat;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 170%;
}
.golf-side-nav-list{ 
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none; 
  margin: 0 0 12px; 
  padding: 0; 
}
.golf-side-nav-list li{ 
  margin: 8px 0;
}
.golf-side-nav-list a{ display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.golf-side-nav-list a img{ width: 10px; height: auto; }
.golf-side-nav-buttons{ 
  width: 90%;
  margin: 0 auto;
  display: grid;
  gap: 12px; 
}


@media (max-width: 1024px) {
  .golf-side-nav{ right: 8px; width: 170px; }
}
@media (max-width: 768px) {
  .golf-side-nav{ display: none !important; }
}
.sp-only{
  display: none;
}

/* Responsive */
@media (max-width: 1024px) {
  ._inner { width: 88%; }
  .mv-flex{
    gap: 60px;
  }
  .mv-txt { width: 70%; margin-left: 6%; }
  .mv-mov { width: 45%; }
  .charm-txt, .charm-img { top: -24px; }
  .golf-slider { width: 60%; }
  .feature-txt, .feature-img { width: 50%; }
}

@media (max-width: 768px) {
  .pc-only{ display: none; }
  .sp-only{
    display: block;
  }
  section { padding: 48px 0; }
  ._inner { width: 92%; }
  ._flex { gap: 12px;
    flex-direction: column-reverse; }
  ._flex._reverse { flex-direction: column-reverse;}
  ._title p{
    text-align: left;
  }

  .mv { height: auto; padding-bottom: 40px;}
  .mv-flex{
    gap: 50px;
  }
  .mv-txt { width: 90%; margin: 320px auto 0 ; }
  .mv-mov { 
    height: 250px; 
    top: 0; 
    right: 50%; 
    transform: translate(50%, 20%); 
    width: 100%; 
    border-radius:  0 0 50% 50%; }

  .about-inner { padding: 72px 0; }
  .about-inner::before, .about-inner::after { display: none; }
  .about-txt{
    width: 100%;
  }
  .about-txt p{
    text-align: left;
  }

  .charm{
    padding-bottom: 132px;
  }
  .charm::before {
    width: 20%;
    max-width: 75px;
    left: auto;
    right: 20%;
    transform: translateX(0);
  } 
  .charm-title{
    margin-bottom: 54px;
  }
  .charm-item { margin-bottom: 80px; background: none;}
  .charm-item::before, .charm-item::after, ._reverse.charm-item::before, ._reverse.charm-item::after { display: none; }
  .charm-item ._flex { flex-direction: column; }
  .charm-txt, .charm-img { width: 100%; top: 0; }
  .charm-btn{
    width: 100%;
    max-width: 400px;
  }
  .golf-slider { width: 100%; 
  top: 0;
  }

  .feature-title p{
    text-align: left;
  }
  .feature-item { padding: 24px; }
  .feature-flex { 
    margin-bottom: 40px;
    flex-direction: column;
  }
  .feature-flex._flex, .feature-flex._flex._reverse{ flex-direction: column; }
  .feature-txt, .feature-img { width: 100%; }

  .price{
    padding-bottom: 132px;
  }
  .price::before {
    width: 20%;
    max-width: 75px;
    right: auto;
    left: 20%;
    transform: translateX(0);
  }
  .price-table-wrap, .cancel-table-wrap { margin-top: 24px; }
  .price-table-wrap > p{
    text-align: left;
  }

  .cta-inner > p { margin-bottom: 60px; }
  .cta-inner ._flex{
    gap: 40px;
    flex-direction: column;
  }
  .mv-flex { margin-top: 40px; }
  .bottom-fixed a img.sp-show{
    width: auto;
  }
}