@charset "utf-8";

/*------------------------------------------------*/
/*  template ver1.01  */
/*------------------------------------------------*/
/*  templatename [--]  */
/*  update []  */
/*  ID [NT]  */
/*------------------------------------------------*/

/* ===================================
   Base Reset (Stable Edition)
=================================== */

/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Margin reset */
html, body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, li,
figure, figcaption,
blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

/* Root setup */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Body base */
body {
  min-height: 100%;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Media reset */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Form reset */
input, button, textarea, select {
  font: inherit;
  border: none;
  outline: none;
  background: none;
}

/* Button cursor */
button {
  cursor: pointer;
}

/* List style */
ul, ol {
  list-style: none;
}

/* Link reset */
a {
  text-decoration: none;
  color: inherit;
}

/* Table reset */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Prevent iOS bounce glitch inside fixed containers */
html, body {
  overscroll-behavior-y: none;
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* iOS 100vh 問題対策 */
:root {
  --vh: 1vh;
}

/* Safe area support */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Scrollbar jump防止 */
html {
  scrollbar-gutter: stable;
}

body {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  line-height: 1.3;
}

/* =========================
   Modal Scroll Lock
========================= */
html.is-modal-open {
  overflow: hidden;
}

/* ===============================
   firstview base
================================ */
.firstview {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  overflow: hidden;
}

.firstview .copyset {
  width: 80%;
  max-width: 300px;
  position: absolute;

  /* 中央基準 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  text-align: center;
  transition: top var(--rc-op-slide-dur, 900ms) ease,
              left var(--rc-op-slide-dur, 900ms) ease;
}

.firstview .copyset .top {
  font-size: clamp(14px, 1.3vw, 16px);
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-ideograph;
}

.firstview .copyset .bottom {
  font-size: clamp(12px, 1.0vw, 15px);
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-ideograph;
  line-height: 2.0;
}

.firstview .copyset .logo {
  margin: 50px 0;
  text-align: center;
}

.firstview .copyset .logo img {
  width: 95%;
}

.firstview .categoryslide {
  width: 55%;
  height: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: inline-block;
  background-color: rgba(0,0,0,0.05);
  position: absolute;
  top: 0px;
  right: 0px;

  transform: translate(120%, 0%);
  transition: transform var(--rc-op-slide-dur, 900ms) ease;
  will-change: transform;
}
.firstview .categoryslide .slideset {
  position: relative;   /* absoluteスライドの基準 */
  width: 100%;
  height: 100%;         /* ← 親(.categoryslide)を参照 */
  overflow: hidden;     /* スライドはみ出し防止 */
}

.firstview .categoryslide .slideset .logolead {
/*
width: calc(100% - 200px);
height: calc(100% - 200px);
*/
margin: auto;
width: 100%;
height: 100%;
position: relative;
}
.firstview .categoryslide .slideset .logolead .leadinner {
width: 100%;
height: 40%;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 0px 30px;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.6) 0%,
rgba(0, 0, 0, 0.4) 40%,
rgba(0, 0, 0, 0.15) 70%,
rgba(0, 0, 0, 0.0) 100%
);
position: absolute;
bottom: 0px;
left: 0px;
}
.firstview .categoryslide .slideset .logolead .leadinner p.logo {
margin-bottom: 42px;
width: 20%;
text-align: center;
}
.firstview .categoryslide .slideset .slide_block.thailandgolfresorts .logolead .leadinner p.logo {
margin-bottom: 52px;
}
.firstview .categoryslide .slideset .slide_block.tokyo .logolead .leadinner p.logo {
margin-bottom: 42px;
}
.firstview .categoryslide .slideset .slide_block.jocale .logolead .leadinner p.logo {
margin-bottom: 37px;
}
.firstview .categoryslide .slideset .slide_block.golfapparel .logolead .leadinner p.logo {
margin-bottom: 67px;
}
.firstview .categoryslide .slideset .logolead .leadinner p.logo img {
max-height: 90px;
}
.firstview .categoryslide .slideset .slide_block.tokyo .logolead .leadinner p.logo img {
margin-left: 20px;
}
.firstview .categoryslide .slideset .logolead .leadinner p.text {
margin-bottom: 50px;
width: 50%;
}
.firstview .categoryslide .slideset .logolead .leadinner p.text span {
display: block;
color: rgb(255,255,255,1.0);
font-size: 13px;
line-height: 2.0;
letter-spacing: 0.5px;
}
.firstview .categoryslide .slideset .logolead .leadinner p.link {
margin-bottom: 65px;
width: 60px;
text-align: right;
}
.circlearrow {
display:inline-grid;
place-items:center;
width:44px;              /* タップしやすい最小サイズ */
height:44px;
border:1px solid rgba(255,255,255,0.7); /* 細い線の円 */
border-radius:999px;
text-decoration:none;
cursor: pointer;
color:transparent;       /* "↓" は見せない（保険） */
position:relative;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.circlearrow::before{
content:"";
width:1px;
height:16px;
background:rgba(255,255,255,0.85);
display:block;
transform:translateY(12px);
}
.circlearrow::after{
content:"";
width:8px;
height:8px;
border-right:1px solid rgba(255,255,255,0.85);
border-bottom:1px solid rgba(255,255,255,0.85);
transform:translateY(-17px) rotate(45deg);
display:block;
}
.circlearrow:hover{
border-color:rgba(255,255,255,0.95);
}
.circlearrow:focus-visible{
outline:2px solid rgba(255,255,255,0.55);
outline-offset:3px;
}
.circlearrow:active{
transform:scale(0.98);
}


/* ===============================
   Opening Animation
================================ */

/* 初期：中身だけ非表示 */
.firstview .copyset .top,
.firstview .copyset .logo,
.firstview .copyset .bottom {
  opacity: 0;
}

/* JS制御開始 */
[data-rcp="opening"].rc-opening-ready .copyset .top,
[data-rcp="opening"].rc-opening-ready .copyset .logo,
[data-rcp="opening"].rc-opening-ready .copyset .bottom {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  transition:
    opacity var(--rc-op-fade, 700ms) ease,
    filter  var(--rc-op-fade, 700ms) ease,
    transform var(--rc-op-move, 700ms) ease;
}

/* 表示状態 */
[data-rcp="opening"].rc-opening-ready .copyset .top.is-in,
[data-rcp="opening"].rc-opening-ready .copyset .logo.is-in,
[data-rcp="opening"].rc-opening-ready .copyset .bottom.is-in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* =========================================
   RCP Fade Slideshow (stable)
========================================= */

[data-rcp="fadeSlideshow"]{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* スライド要素：クロスフェード用 */
[data-rcp="fadeSlideshow"] .slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition-property: opacity;
  transition-timing-function: ease;
  z-index: 0;

  /* 追加：フェードをより安定させる */
  will-change: opacity;
  backface-visibility: hidden;
}

/* ★ 追加：入場準備（必ず opacity:0 から始める） */
[data-rcp="fadeSlideshow"] .slide.is-entering{
  opacity: 0;
  pointer-events: none;
  z-index: 1; /* 入場は下 */
}

/* 表示中（フェードイン側） */
[data-rcp="fadeSlideshow"] .slide.is-active{
  opacity: 1;
  pointer-events: auto;
  z-index: 1; /* 入場＆表示は下（退場が上） */
}

/* ★ 変更：退場（フェードアウト）は上に重ねて消す = 完全クロスフェード */
[data-rcp="fadeSlideshow"] .slide.is-leaving{
  opacity: 0;
  pointer-events: none;
  z-index: 2; /* 退場は上 */
}

/* 画像エリア：中心基準で最大トリミング */
[data-rcp="fadeSlideshow"] .image{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

[data-rcp="fadeSlideshow"] .image img,
[data-rcp="fadeSlideshow"] .image video{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(1.06); /* 少し拡大から */
  object-fit: cover;
  will-change: transform;
}

/* 初回の点滅防止：動画は再生開始（playing）まで隠す */
[data-rcp="fadeSlideshow"] .slide .image video{
  opacity: 0;
  transition: opacity 220ms ease;
}

/* 再生が始まったら表示 */
[data-rcp="fadeSlideshow"] .slide.is-video-ready .image video{
  opacity: 1;
}

/* 表示直後に“スッと縮小”（画像と動画で着地点を分ける） */
[data-rcp="fadeSlideshow"] .slide.is-active .image img{
  animation: rcpFsZoomOutImg 1400ms ease-out both;
}

[data-rcp="fadeSlideshow"] .slide.is-active .image video{
  animation: rcpFsZoomOutVideo 1400ms ease-out both;
}

/* 画像：1.00でOK */
@keyframes rcpFsZoomOutImg{
  from { transform: translate(-50%, -50%) scale(1.06); }
  to   { transform: translate(-50%, -50%) scale(1.00); }
}

/* 動画：黒い隙間対策で少しだけ大きめに止める（iOS対策） */
@keyframes rcpFsZoomOutVideo{
  from { transform: translate(-50%, -50%) scale(1.06); }
  to   { transform: translate(-50%, -50%) scale(1.02); }
}

/* logolead：0.5秒遅延で下からふわっと */
[data-rcp="fadeSlideshow"] .logolead{
  position: relative;
  z-index: 2;
  /*pointer-events: none; /* もしリンクをクリックさせるなら none を外す */
}

/* 中身がある場合だけ効く（無ければ無視される） */
[data-rcp="fadeSlideshow"] .logolead .leadinner{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease, transform 700ms ease;
}

[data-rcp="fadeSlideshow"] .slide.is-active .logolead .leadinner{
  opacity: 1;
  transform: translateY(0);
  transition-delay: 500ms;
}

/* 進行バー（高さ2px、白 50% / 進行部 100%） */
[data-rcp="fadeSlideshow"] .fadeslide_bar{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255,255,255,0.5);
  z-index: 5;
  pointer-events: none;
}

[data-rcp="fadeSlideshow"] .fadeslide_bar .rcp-fs-barfill{
  width: 0%;
  height: 100%;
  background: rgba(255,255,255,1);
  transform-origin: left center;
  will-change: width;
}

/* motion軽減 */
@media (prefers-reduced-motion: reduce){
  [data-rcp="fadeSlideshow"] .slide{
    transition: none !important;
  }
  [data-rcp="fadeSlideshow"] .slide.is-active .image img,
  [data-rcp="fadeSlideshow"] .slide.is-active .image video{
    animation: none !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
  [data-rcp="fadeSlideshow"] .logolead .leadinner{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.slide_block video{
  opacity:0;
  transition:opacity .3s ease;
}

.slide_block.is-video-ready video{
  opacity:1;
}

/* =========================================
   RCP Infinite Slideshow (horizontal, loop)
========================================= */

.infiniteSlideshow[data-rcp="infiniteSlideshow"]{
  margin-top: 70px;
  position: relative;
  width: 100%;
  overflow: hidden;
  /* 高さは任意。必要に応じて上書きしてOK */
  height: 220px;
}

.infiniteSlideshow[data-rcp="infiniteSlideshow"] .is-viewport{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.infiniteSlideshow[data-rcp="infiniteSlideshow"] .is-track{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: stretch;
  gap: var(--is-gap, 20px);
  will-change: transform;
  transform: translate3d(0,0,0);
}

.infiniteSlideshow[data-rcp="infiniteSlideshow"] .is-item{
  flex: 0 0 auto;
  width: var(--is-item-w, 240px);
  height: 100%;
}

.infiniteSlideshow[data-rcp="infiniteSlideshow"] .is-item > a,
.infiniteSlideshow[data-rcp="infiniteSlideshow"] .is-item > span{
  display: block;
  width: 100%;
  height: 100%;
}

.infiniteSlideshow[data-rcp="infiniteSlideshow"] .is-item img,
.infiniteSlideshow[data-rcp="infiniteSlideshow"] .is-item video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* ★トリミング */
}

/* 任意：ポインタ周り */
.infiniteSlideshow[data-rcp="infiniteSlideshow"] a{
  text-decoration: none;
}

/* motion軽減 */
@media (prefers-reduced-motion: reduce){
  .infiniteSlideshow[data-rcp="infiniteSlideshow"] .is-track{
    transform: translate3d(0,0,0) !important;
    transition: none !important;
  }
}

/* ===============================
   scrollfixcontents layout
================================ */

.scrollfixcontents {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  display: flex;
  flex-wrap: wrap;
  isolation: isolate; /* ★親を独立したスタッキングコンテキストにする（確定勝利） */
}
.scrollfixcontents.black {
  background-color: rgb(0,0,0,1.0);
}
.scrollfixcontents.black.luxury {
  background-color: rgb(35,35,35,1.0);
}
.scrollfixcontents.black.tree {
  background-color: rgb(33,12,0,1.0);
}
.scrollfixcontents.white {
  background-color: rgb(255,255,255,1.0);
}
.scrollfixcontents.white.beige {
  background-color: rgb(232,223,214,1.0);
}

.scrollfixcontents .slideblock {
  width: 45%;
  height: 100%;
  position: sticky;
  top: 0;
  height: 100svh;
  z-index: 1;
}

.scrollfixcontents .slideblock .slideset {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.scrollfixcontents .categorynav {
  padding: 50px 50px 0px 50px;
  width: 100vw;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0px 50px;
  position: sticky;
  bottom: 0px;
  box-sizing: border-box;
  z-index: 5;
  isolation: isolate; /* ★これ重要：疑似要素を内側に閉じ込める */
  transform: translateZ(0); /* ★合成レイヤー化してbackdropを安定させる */
}

/* ▼ 背景専用レイヤー */
.scrollfixcontents .categorynav::before{
  content:"";
  position:absolute;
  inset:0;

  background: rgba(255, 255, 255, 0.18); /* ★少し濃く（お好みで） */
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);

  mask-image: linear-gradient(
    to top,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 65%,
    rgba(0,0,0,0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 65%,
    rgba(0,0,0,0) 100%
  );

  z-index: 0;         /* ★-1をやめる */
  pointer-events:none;
}

/* 中身は背景より上に */
.scrollfixcontents .categorynav > *{
  position: relative;
  z-index: 1;
}

/* 黒バージョン */
.scrollfixcontents .categorynav.black::before{
  background: rgba(0, 0, 0, 0.7); /* ★少し濃く（お好みで） */
  mask-image: linear-gradient(
    to top,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 40%,
    rgba(0,0,0,0.85) 60%,
    rgba(0,0,0,0.45) 75%,
    rgba(0,0,0,0.15) 88%,
    rgba(0,0,0,0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 40%,
    rgba(0,0,0,0.85) 60%,
    rgba(0,0,0,0.45) 75%,
    rgba(0,0,0,0.15) 88%,
    rgba(0,0,0,0) 100%
  );
}

.scrollfixcontents .categorynav .logo {
width: 180px;
text-align: center;
}
.scrollfixcontents .categorynav .logo img {
height: 65px;
display: inline-block;
}
.scrollfixcontents#sec-thailandgolfresorts .categorynav .logo img {
height: 65px;
}
.scrollfixcontents#sec-tokyo .categorynav .logo img {
height: 110px;
}
.scrollfixcontents#sec-jocale .categorynav .logo img {
height: 105px;
}
.scrollfixcontents#sec-jocale .categorynav .logo img.sp {
display: none;
}
.scrollfixcontents .categorynav .info {
width: calc(100% - 480px);
}
.scrollfixcontents .categorynav .info p {
color: rgb(255,255,255,1.0);
font-size: clamp(12px, 0.85vw, 13px);
line-height: 1.7;
letter-spacing: 0.5px;
}
.scrollfixcontents .categorynav .link {
width: 200px;
}
.scrollfixcontents .categorynav .link p a {
padding-right: 20px;
display: block;
color: rgb(255,255,255,1.0);
font-size: clamp(11px, 0.75vw, 12px);
letter-spacing: 1.8px;
line-height: 40px;
text-align: center;
text-decoration: none;
border: rgb(255,255,255,1.0) solid 1px;
box-sizing: border-box;
border-radius: 20px;
position: relative;
}
.scrollfixcontents .categorynav .link p a::after{
content:"";
width:6px;
height:6px;
border-right:1px solid rgba(255,255,255,0.85);
border-bottom:1px solid rgba(255,255,255,0.85);
transform:translateY(-2.5px) rotate(-45deg);
display:block;
position: absolute;
top: 50%;
right: 20px;
}

/* =========================================
   categorynav reveal animation
========================================= */

/* 初期は隠す（JSが is-catnav-init を付けたセクションだけ） */
.scrollfixcontents.is-catnav-init .categorynav{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;
}

/* しきい値超えで表示（フェードアップ） */
.scrollfixcontents.is-catnav-shown .categorynav{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .scrollfixcontents.is-catnav-init .categorynav{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.scrollfixcontents .contents {
  width: 55%;
  text-align: center;
  position: relative; /* ★ */
  z-index: 2;        /* ★中段 */
}

.scrollfixcontents .backimage {
  position: sticky;
  top: 0;
  width: 55vw;               /* ← ブラウザ幅55% */
  height: 100svh;            /* 画面高さ */
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.2;
}

.scrollfixcontents .backimage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 右カラムの内側を “固定背景の器” にする */
.scrollfixcontents .contents .inner {
  margin-top: -100svh;
  margin-left: auto;
  margin-right: auto;
  padding: 130px 0px 50px 0px;
  box-sizing: border-box;
  width: 80%;
  max-width: 450px;
}

.scrollfixcontents .contents .copy {
  padding: 50px 0px;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 2.0;
  letter-spacing: 1.0px;
}
.scrollfixcontents .contents .copy strong {
  display: inline-block;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 2.0;
  letter-spacing: 1.0px;
  font-weight: 500;
}
.scrollfixcontents .contents .copy span {
  display: inline-block;
  font-size: clamp(12px, 1.1vw, 13px);
  line-height: 1.8;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.scrollfixcontents .contents .lead {
  padding: 10px 0px;
  font-size: clamp(13px, 1.2vw, 14px);
  line-height: 2.0;
}
.scrollfixcontents .contents .image {
  padding: 50px 0px;
  text-align: center;
}
.scrollfixcontents .contents .image.space {
  padding: 70px 0px;
}
.scrollfixcontents .contents .image.topclear {
  padding: 0px 0px 50px 0px;
}
.scrollfixcontents .contents .image img {
  display: inline-block;
}
.scrollfixcontents .contents .image.narrow img {
  width: 60%;
}
.scrollfixcontents.black .contents p {
  color: rgb(255,255,255,1.0);
  word-break: keep-all;
}

/* =========================================
   Jump FX Overlay (iOS stable / luxe)
========================================= */
.sfc-jumpfx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 99999;

  /* ★ 一瞬白フラッシュ対策：常に“薄い幕”を持つ */
  background: rgba(255,255,255,0.06);

  /* ★ iOS安定：-webkit-を必ず併用 */
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);

  /* ★ 合成レイヤー化（チラつき対策） */
  transform: translateZ(0);
  will-change: opacity, backdrop-filter, -webkit-backdrop-filter;
  backface-visibility: hidden;
}

/* 画面ズーム演出（main を軽く拡大→戻す） */
body.sfc-jump-zoom main {
  will-change: transform;
  transform: translateZ(0) scale(var(--sfc-zoom, 1.03));
}
body.sfc-jump-zoom {
  --sfc-zoom: 1.03;
}

.sfc-jumpfx.is-out {
  opacity: 1;
  backdrop-filter: blur(10px);
}

/* ===============================
   Logo (pseudo-blur fade)
================================ */

.scrollfixcontents .slideblock .rcp-sfc-logo{
  position: absolute;
  left: var(--rcp-logo-x, 10%);
  top: var(--rcp-logo-y, 10%);
  width: var(--rcp-logo-size, 30%);
  z-index: 6;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 520ms ease, transform 520ms ease;
  will-change: opacity, transform;
  pointer-events: none;
}

.scrollfixcontents .slideblock .rcp-sfc-logo svg,
.scrollfixcontents .slideblock .rcp-sfc-logo img{
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.18));
  opacity: 0.92;
}

.scrollfixcontents .slideblock .rcp-sfc-logo.gradation svg,
.scrollfixcontents .slideblock .rcp-sfc-logo.gradation img{
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.92;
  filter:
    drop-shadow(0 2px 6px rgba(0,0,0,0.28))   /* 近距離（輪郭） */
    drop-shadow(0 0 12px rgba(0,0,0,0.24))    /* 中距離 */
    drop-shadow(0 0 30px rgba(0,0,0,0.20))    /* 広め */
    drop-shadow(0 0 60px rgba(0,0,0,0.16))    /* かなり広範囲 */
    drop-shadow(0 0 100px rgba(0,0,0,0.12));  /* 空気感 */
}

.scrollfixcontents .slideblock .rcp-sfc-logo.is-in{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* motion軽減 */
@media (prefers-reduced-motion: reduce){
  .scrollfixcontents .slideblock .rcp-sfc-logo{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===============================
   Fade/Zoom (lightweight)
================================ */

/* 可視化前の初期状態 */
.zoomimage,
.fadeblurup{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--rcp-dur, 650ms) ease,
              transform var(--rcp-dur, 650ms) ease;
  will-change: opacity, transform;
}

/* 可視化で表示 */
.is-rcp-in.zoomimage,
.is-rcp-in.fadeblurup{
  opacity: 1;
  transform: translateY(0);
}

/* zoomimage 内のメディアは幅100%（必要に応じて） */
.zoomimage img,
.zoomimage video{
  width: 100%;
  height: auto;
  display: block;
}

/* zoomimage target wrapper（JSが自動で作る） */
.zoomimage .rcp-zoom-target{
  display: block;
  transform-origin: center center;
  will-change: transform;
}

/* ===============================
   Zoom behavior by mode
================================ */

/* 1) once：入ったら「拡大状態 → 通常へ縮小」(1回だけ) */
.zoomimage[data-zi-mode="once"] .rcp-zoom-target{
  transform: scale(var(--rcp-zoom-from, 1.06));
  transition: transform var(--rcp-zoom-dur, 900ms) ease-out;
}

.is-rcp-in.zoomimage[data-zi-mode="once"] .rcp-zoom-target{
  transform: scale(var(--rcp-zoom-to, 1.0));
}

/* 2) track：スクロール追従（JSが毎フレームtransformを書くのでtransitionは切る） */
.zoomimage[data-zi-mode="track"] .rcp-zoom-target{
  transition: none !important;
}

/* 3) mode無し：ズームなし（表示だけ） */
/* 何もしない（.rcp-zoom-targetにはtransformを与えない） */

/* motion軽減 */
@media (prefers-reduced-motion: reduce){
  .zoomimage,
  .fadeblurup{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .zoomimage[data-zi-mode="once"] .rcp-zoom-target{
    transition: none !important;
    transform: scale(1) !important;
  }
  .zoomimage[data-zi-mode="track"] .rcp-zoom-target{
    transform: scale(1) !important;
  }
}


/* =========================
   Modal Button
========================= */
.modalbtn{
  position: fixed;
  top: 30px;
  right: 50px;
  width: 56px;
  height: 44px;
  z-index: 9999;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.modalbtn p{
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  align-items: flex-end; /* 右揃え */
}

.modalbtn span{
  display: block;
  height: 2px;
  border-radius: 999px;
  background: var(--menu-line, #000);
  transform-origin: right center;
  transition: transform 420ms ease, width 420ms ease, opacity 420ms ease, background-color 200ms ease;
}

/* 上：長め / 下：短め（右揃え） */
.modalbtn span:nth-child(1){ width: 38px; }
.modalbtn span:nth-child(2){ width: 24px; opacity: 0.95; }

/* =========================
   modalbtn line animation
   - in:  上→下 で左→右にスッ
   - out: 下→上 で右へスッと消える
========================= */

.modalbtn span{
  /* 既存の指定は維持したまま、transform-originだけ上書き */
  transform-origin: left center;
  will-change: transform, opacity;
}

/* ループ（開いてない時のみ） */
.modalbtn:not(.is-open) span:nth-child(1){
  animation: menuLineFlowTop 1.55s ease-in-out infinite;
}
.modalbtn:not(.is-open) span:nth-child(2){
  animation: menuLineFlowBottom 1.55s ease-in-out infinite;
}

/* 上ライン：先に入って→最後に消える */
@keyframes menuLineFlowTop{
  /* 初期：左側で見えない */
  0%   { opacity: 0; transform: translateX(-18px); }

  /* 左→右に入ってくる */
  10%  { opacity: 1; transform: translateX(0); }

  /* 少し滞在 */
  52%  { opacity: 1; transform: translateX(0); }

  /* 下が先に消えるので、上は少し遅れて消す */
  70%  { opacity: 1; transform: translateX(0); }

  /* 右へスッと消える */
  82%  { opacity: 0; transform: translateX(18px); }

  /* 余韻 */
  100% { opacity: 0; transform: translateX(18px); }
}

/* 下ライン：少し遅れて入って→先に消える */
@keyframes menuLineFlowBottom{
  0%   { opacity: 0; transform: translateX(-18px); }

  /* 上より遅れて入る */
  18%  { opacity: 1; transform: translateX(0); }

  /* 滞在 */
  56%  { opacity: 1; transform: translateX(0); }

  /* 下→上で消えるため、下が先に消える */
  68%  { opacity: 0; transform: translateX(18px); }

  100% { opacity: 0; transform: translateX(18px); }
}

/* open時はアニメ停止（既存の矢印変形を優先） */
.modalbtn.is-open span{
  animation: none !important;
}

/* 開いた時：右向き矢印 “>” に変形 */
.modalbtn.is-open span{
  animation: none;
}

/* =========================
   OPEN時：即時「→」へ切替（アニメなし）
========================= */

.modalbtn.is-open{
  --menu-line: #000; /* 黒固定 */
}

/* アニメ＆transitionを完全停止 */
.modalbtn.is-open span{
  animation: none !important;
  transition: none !important;
  transform-origin: right center;
}

/* 上ライン＝横棒 */
.modalbtn.is-open span:nth-child(1){
  width: 34px;
  transform: rotate(0deg);
}

/* 下ライン＝矢尻（1本目） */
.modalbtn.is-open span:nth-child(2){
  width: 10px;
  position: relative;
  transform: rotate(45deg);
  top: -12px;
  right: -2px;
}

/* 矢尻2本目 */
.modalbtn.is-open span:nth-child(2)::before{
  content: "";
  position: absolute;
  right: 0;
  top: -1px;
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: var(--menu-line, #000);
  transform-origin: right center;
  transform: rotate(-90deg);
}

/* =========================
   Modal Menu
========================= */
.modalmenu{
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: block;

  /* 最初は閉じている */
  opacity: 0;
  pointer-events: none;

  /* すりガラス */
  background: rgba(255,255,255,0.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  /* じゅわっとフェード（ぼかし感も少し） */
  transition: opacity 420ms ease, backdrop-filter 420ms ease, -webkit-backdrop-filter 420ms ease;
}

/* =========================
   Modal inner layout
========================= */

.modalmenu {
  display: flex;
  justify-content: center;
  align-items: center; /* 中央配置 */
}

.modalmenu .inner {
  position: relative;

  /* 幅指定 */
  width: 80%;
  max-width: 1000px;

  /* 高さ：スマホでも安定 */
  height: 100dvh;              /* 新仕様 */
  max-height: 100dvh;

  /* iOS古い端末対策 */
  height: 100vh;
  max-height: 100vh;

  /* スクロール安定 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  margin: 0 auto;
}

/* =========================
   Modal inner scroll safe
========================= */

.modalmenu{
  overflow: hidden; /* 背景はスクロールさせない */
}

.modalmenu .inner{
  position: relative;

  /* 画面内に収める */
  max-height: 100vh;

  /* ここが重要 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* iOS bounce対策 */
  overscroll-behavior: contain;
}

/* open */
.modalmenu.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .modalbtn span,
  .modalmenu{
    transition: none !important;
    animation: none !important;
  }
}

.modalmenu .inner .categoryblock {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 50px 50px;
  margin: 0 auto;
  align-content: center;
  justify-content: space-between;
}

.modalmenu .category {
  width: calc((100% - 50px) / 2);
}

.modalmenu .category a {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 20px 20px;
}

.modalmenu .category .logo {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modalmenu .category .logo img {
  max-width: 200px;
  max-height: 100px;
  width: auto;
  height: auto;
  display: block;
}

.modalmenu .category .image {
  width: calc((100% - 20px) * 0.3);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.modalmenu .category .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.modalmenu .category .info {
  width: calc((100% - 20px) * 0.7);
  font-size: clamp(13px, 1.0vw, 14px);
  line-height: 1.7;
  letter-spacing: 0.5px;
}


/* ===================================
   Breakpoints
=================================== */

/* bp3 : 1024〜 */
@media (min-width: 1024px) {}

/* bp2 : 768〜1023 */
@media (min-width: 768px) and (max-width: 1023px) {

/* =========================================
   RCP Infinite Slideshow (horizontal, loop)
========================================= */

.infiniteSlideshow[data-rcp="infiniteSlideshow"]{
  margin-top: 50px;
}

/* ===============================
   firstview base
================================ */

.firstview .copyset .logo {
  margin: 30px 0;
}

.firstview .categoryslide {
  width: 100%;
  height: 50%;
  min-height: 50vh;
  min-height: 50svh;
  top: inherit;
  bottom: 0px;
  transform: translate(0%, 120%);
}
.firstview .categoryslide .slideset .logolead .leadinner {
gap: 0px 20px;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0.6) 40%,
rgba(0, 0, 0, 0.3) 70%,
rgba(0, 0, 0, 0.0) 100%
);
}

/* ===============================
   scrollfixcontents layout
================================ */

.scrollfixcontents {
  box-sizing: border-box;
}

.scrollfixcontents:before {
content: "";
width: 100%;
height: 100px;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 1.0) 0%,
rgba(0, 0, 0, 0.5) 40%,
rgba(0, 0, 0, 0.2) 70%,
rgba(0, 0, 0, 0.0) 100%
);
position: sticky;
top: 0px;
left: 0px;
z-index: 40;
}
.scrollfixcontents.white:before {
content: "";
width: 100%;
height: 100px;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 1.0) 0%,
rgba(255, 255, 255, 0.5) 40%,
rgba(255, 255, 255, 0.2) 70%,
rgba(255, 255, 255, 0.0) 100%
);
position: sticky;
top: 0px;
left: 0px;
z-index: 40;
}
.scrollfixcontents.white.beige:before {
content: "";
width: 100%;
height: 100px;
background: linear-gradient(
to bottom,
rgba(232, 223, 214, 1.0) 0%,
rgba(232, 223, 214, 0.5) 40%,
rgba(232, 223, 214, 0.2) 70%,
rgba(232, 223, 214, 0.0) 100%
);
position: sticky;
top: 0px;
left: 0px;
z-index: 40;
}

.scrollfixcontents .slideblock {
  padding-top: 180px;
  width: 100%;
  height: auto;
  position: absolute;
  top: 100px;
  z-index: 5;
}

.scrollfixcontents .slideblock .slideset {
  margin: 0px auto;
  width: 60vw;
  height: auto;
  aspect-ratio: 16 / 9;
}

.scrollfixcontents .slideblock .fadeslide_bar {
  display: none;
}

.scrollfixcontents .slideblock .rcp-sfc-logo {
  width: 30%;
  top: 0%;
  left: 50%;
  transform: translateX(-50%) !important;
}
.scrollfixcontents#sec-thailandgolfresorts .slideblock .rcp-sfc-logo {
  width: 27%;
}
.scrollfixcontents#sec-tokyo .slideblock .rcp-sfc-logo {
  width: 17%;
}
.scrollfixcontents#sec-jocale .slideblock .rcp-sfc-logo {
  width: 20%;
}

.scrollfixcontents .categorynav {
  padding: 30px 30px 0px 30px;
  height: 150px;
  gap: 0px 20px;
}

.scrollfixcontents#sec-jocale .categorynav.black::before{
  background: rgba(232,223,214, 0.9); /* ★少し濃く（お好みで） */
  mask-image: linear-gradient(
    to top,
    rgba(232,223,214,1) 0%,
    rgba(232,223,214,1) 40%,
    rgba(232,223,214,0.85) 60%,
    rgba(232,223,214,0.45) 75%,
    rgba(232,223,214,0.15) 88%,
    rgba(232,223,214,0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    rgba(232,223,214,1) 0%,
    rgba(232,223,214,1) 40%,
    rgba(232,223,214,0.85) 60%,
    rgba(232,223,214,0.45) 75%,
    rgba(232,223,214,0.15) 88%,
    rgba(232,223,214,0) 100%
  );
}

.scrollfixcontents .categorynav .logo {
width: 180px;
text-align: center;
}
.scrollfixcontents .categorynav .logo img {
height: 65px;
display: inline-block;
}
.scrollfixcontents#sec-thailandgolfresorts .categorynav .logo img {
height: 65px;
}
.scrollfixcontents#sec-tokyo .categorynav .logo img {
height: 110px;
}
.scrollfixcontents#sec-jocale .categorynav .logo img {
height: 105px;
}
.scrollfixcontents#sec-jocale .categorynav .logo img.pc {
display: none;
}
.scrollfixcontents#sec-jocale .categorynav .logo img.sp {
display: inline-block;
}
.scrollfixcontents .categorynav .info {
width: calc(100% - 480px);
}
.scrollfixcontents .categorynav .info p {
color: rgb(255,255,255,1.0);
font-size: clamp(12px, 0.85vw, 13px);
line-height: 1.7;
letter-spacing: 0.5px;
}
.scrollfixcontents#sec-jocale .categorynav .info p {
color: rgb(0,0,0,1.0);
}
.scrollfixcontents .categorynav .link {
width: 200px;
}
.scrollfixcontents .categorynav .link p a {
padding-right: 20px;
display: block;
color: rgb(255,255,255,1.0);
font-size: clamp(11px, 0.75vw, 12px);
letter-spacing: 1.8px;
line-height: 40px;
text-align: center;
text-decoration: none;
border: rgb(255,255,255,1.0) solid 1px;
box-sizing: border-box;
border-radius: 20px;
position: relative;
}
.scrollfixcontents .categorynav .link p a::after{
content:"";
width:6px;
height:6px;
border-right:1px solid rgba(255,255,255,0.85);
border-bottom:1px solid rgba(255,255,255,0.85);
transform:translateY(-2.5px) rotate(-45deg);
display:block;
position: absolute;
top: 50%;
right: 20px;
}
.scrollfixcontents#sec-jocale .categorynav .link p a {
color: rgb(0,0,0,1.0);
border: rgb(0,0,0,1.0) solid 1px;
}
.scrollfixcontents#sec-jocale .categorynav .link p a::after{
border-right:1px solid rgba(0,0,0,0.85);
border-bottom:1px solid rgba(0,0,0,0.85);
}

.scrollfixcontents .contents {
  width: 100%;
}

.scrollfixcontents .backimage {
  margin-top: -100px;
  width: 100vw;               /* ← ブラウザ幅55% */
}

/* 右カラムの内側を “固定背景の器” にする */
.scrollfixcontents .contents .inner {
  padding: 0px 0px 30px 0px;
  width: 80%;
}

.scrollfixcontents .contents .inner:before {
  content: "";
  display: block;
  width: 60vw;
  height: calc((60vw * 9 / 16) + 330px);
}

.scrollfixcontents .contents .copy {
  padding: 30px 0px;
  font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: 0.5px;
}
.scrollfixcontents .contents .copy strong {
  font-size: clamp(15px, 1.7vw, 20px);
}
.scrollfixcontents .contents .copy span {
  font-size: clamp(12px, 1.1vw, 13px);
}
.scrollfixcontents .contents .lead {
  padding: 7px 0px;
}
.scrollfixcontents .contents .image {
  padding: 30px 0px;
}
.scrollfixcontents .contents .image.space {
  padding: 50px 0px;
}
.scrollfixcontents .contents .image.topclear {
  padding: 0px 0px 30px 0px;
}
.scrollfixcontents .contents .image.narrow img {
  width: 60%;
}

/* =========================
   Modal inner layout
========================= */

.modalmenu {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.modalmenu .inner {
  padding: 0px 50px;
  width: 80%;
  max-width: 600px;

  /* 高さを画面の80% */
  height: 80dvh;
  max-height: 80dvh;

  /* 上に10%余白 */
  margin: 10dvh auto 0;
  box-sizing: border-box;
}

.modalmenu .categoryblock {
  gap: 30px 30px;
  align-content: flex-start !important;
}

.modalmenu .category {
  width: calc(100%);
}

.modalmenu .category a {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 20px 20px;
}

.modalmenu .category .logo {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modalmenu .category .logo img {
  max-width: 200px;
  max-height: 100px;
  width: auto;
  height: auto;
  display: block;
}

.modalmenu .category .image {
  width: calc((100% - 20px) * 0.3);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.modalmenu .category .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.modalmenu .category .info {
  width: calc((100% - 20px) * 0.7);
  font-size: clamp(13px, 1.0vw, 14px);
  line-height: 1.7;
  letter-spacing: 0.5px;
}

}

/* bp1 : 480〜767 */
@media (min-width: 480px) and (max-width: 767px) {

/* =========================================
   RCP Infinite Slideshow (horizontal, loop)
========================================= */

.infiniteSlideshow[data-rcp="infiniteSlideshow"]{
  margin-top: 50px;
}

/* ===============================
   firstview base
================================ */

.firstview .copyset .logo {
  margin: 30px 0;
}

.firstview .categoryslide {
  width: 100%;
  height: 50%;
  min-height: 50vh;
  min-height: 50svh;
  top: inherit;
  bottom: 0px;
  transform: translate(0%, 120%);
}
.firstview .categoryslide .slideset .logolead .leadinner {
gap: 0px 20px;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0.6) 40%,
rgba(0, 0, 0, 0.3) 70%,
rgba(0, 0, 0, 0.0) 100%
);
}

/* ===============================
   scrollfixcontents layout
================================ */

.scrollfixcontents {
  box-sizing: border-box;
}

.scrollfixcontents:before {
content: "";
width: 100%;
height: 100px;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 1.0) 0%,
rgba(0, 0, 0, 0.5) 40%,
rgba(0, 0, 0, 0.2) 70%,
rgba(0, 0, 0, 0.0) 100%
);
position: sticky;
top: 0px;
left: 0px;
z-index: 40;
}
.scrollfixcontents.white:before {
content: "";
width: 100%;
height: 100px;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 1.0) 0%,
rgba(255, 255, 255, 0.5) 40%,
rgba(255, 255, 255, 0.2) 70%,
rgba(255, 255, 255, 0.0) 100%
);
position: sticky;
top: 0px;
left: 0px;
z-index: 40;
}
.scrollfixcontents.white.beige:before {
content: "";
width: 100%;
height: 100px;
background: linear-gradient(
to bottom,
rgba(232, 223, 214, 1.0) 0%,
rgba(232, 223, 214, 0.5) 40%,
rgba(232, 223, 214, 0.2) 70%,
rgba(232, 223, 214, 0.0) 100%
);
position: sticky;
top: 0px;
left: 0px;
z-index: 40;
}

.scrollfixcontents .slideblock {
  padding-top: 150px;
  width: 100%;
  height: auto;
  position: absolute;
  top: 100px;
  z-index: 5;
}

.scrollfixcontents .slideblock .slideset {
  margin: 0px auto;
  width: 60vw;
  height: auto;
  aspect-ratio: 16 / 9;
}

.scrollfixcontents .slideblock .fadeslide_bar {
  display: none;
}

.scrollfixcontents .slideblock .rcp-sfc-logo {
  width: 30%;
  top: 0%;
  left: 50%;
  transform: translateX(-50%) !important;
}
.scrollfixcontents#sec-tokyo .slideblock .rcp-sfc-logo {
  width: 20%;
}
.scrollfixcontents#sec-jocale .slideblock .rcp-sfc-logo {
  width: 25%;
}

.scrollfixcontents .categorynav {
  padding: 30px 30px 0px 30px;
  height: 150px;
  gap: 0px 20px;
}

.scrollfixcontents#sec-jocale .categorynav.black::before{
  background: rgba(232,223,214, 0.9); /* ★少し濃く（お好みで） */
  mask-image: linear-gradient(
    to top,
    rgba(232,223,214,1) 0%,
    rgba(232,223,214,1) 40%,
    rgba(232,223,214,0.85) 60%,
    rgba(232,223,214,0.45) 75%,
    rgba(232,223,214,0.15) 88%,
    rgba(232,223,214,0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    rgba(232,223,214,1) 0%,
    rgba(232,223,214,1) 40%,
    rgba(232,223,214,0.85) 60%,
    rgba(232,223,214,0.45) 75%,
    rgba(232,223,214,0.15) 88%,
    rgba(232,223,214,0) 100%
  );
}

.scrollfixcontents .categorynav .logo {
width: 180px;
text-align: center;
}
.scrollfixcontents .categorynav .logo img {
height: 65px;
display: inline-block;
}
.scrollfixcontents#sec-thailandgolfresorts .categorynav .logo img {
height: 65px;
}
.scrollfixcontents#sec-tokyo .categorynav .logo img {
height: 90px;
}
.scrollfixcontents#sec-jocale .categorynav .logo img {
height: 90px;
}
.scrollfixcontents#sec-jocale .categorynav .logo img.pc {
display: none;
}
.scrollfixcontents#sec-jocale .categorynav .logo img.sp {
display: inline-block;
}
.scrollfixcontents .categorynav .info {
display: none;
}
.scrollfixcontents .categorynav .info p {
color: rgb(255,255,255,1.0);
font-size: clamp(12px, 0.85vw, 13px);
line-height: 1.7;
letter-spacing: 0.5px;
}
.scrollfixcontents#sec-jocale .categorynav .info p {
color: rgb(0,0,0,1.0);
}
.scrollfixcontents .categorynav .link {
width: 200px;
}
.scrollfixcontents .categorynav .link p a {
padding-right: 20px;
display: block;
color: rgb(255,255,255,1.0);
font-size: clamp(11px, 0.75vw, 12px);
letter-spacing: 1.8px;
line-height: 40px;
text-align: center;
text-decoration: none;
border: rgb(255,255,255,1.0) solid 1px;
box-sizing: border-box;
border-radius: 20px;
position: relative;
}
.scrollfixcontents .categorynav .link p a::after{
content:"";
width:6px;
height:6px;
border-right:1px solid rgba(255,255,255,0.85);
border-bottom:1px solid rgba(255,255,255,0.85);
transform:translateY(-2.5px) rotate(-45deg);
display:block;
position: absolute;
top: 50%;
right: 20px;
}
.scrollfixcontents#sec-jocale .categorynav .link p a {
color: rgb(0,0,0,1.0);
border: rgb(0,0,0,1.0) solid 1px;
}
.scrollfixcontents#sec-jocale .categorynav .link p a::after{
border-right:1px solid rgba(0,0,0,0.85);
border-bottom:1px solid rgba(0,0,0,0.85);
}

.scrollfixcontents .contents {
  padding-bottom: 50px;
  width: 100%;
}

.scrollfixcontents .backimage {
  margin-top: -100px;
  width: 100vw;               /* ← ブラウザ幅55% */
}

/* 右カラムの内側を “固定背景の器” にする */
.scrollfixcontents .contents .inner {
  padding: 0px 0px 30px 0px;
  width: 80%;
}

.scrollfixcontents .contents .inner:before {
  content: "";
  display: block;
  width: 60vw;
  height: calc((60vw * 9 / 16) + 300px);
}

.scrollfixcontents .contents .copy {
  padding: 30px 0px;
  font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: 0.5px;
}
.scrollfixcontents .contents .copy strong {
  font-size: clamp(15px, 1.7vw, 20px);
}
.scrollfixcontents .contents .copy span {
  font-size: clamp(12px, 1.1vw, 13px);
}
.scrollfixcontents .contents .lead {
  padding: 7px 0px;
}
.scrollfixcontents .contents .image {
  padding: 30px 0px;
}
.scrollfixcontents .contents .image.space {
  padding: 50px 0px;
}
.scrollfixcontents .contents .image.topclear {
  padding: 0px 0px 30px 0px;
}
.scrollfixcontents .contents .image.narrow img {
  width: 60%;
}

/* =========================
   Modal inner layout
========================= */

.modalmenu {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.modalmenu .inner {
  padding: 0px 50px;
  width: 80%;
  max-width: 600px;

  /* 高さを画面の80% */
  height: 80dvh;
  max-height: 80dvh;

  /* 上に10%余白 */
  margin: 10dvh auto 0;
  box-sizing: border-box;
}

.modalmenu .categoryblock {
  gap: 30px 30px;
  align-content: flex-start !important;
}

.modalmenu .category {
  width: calc(100%);
}

.modalmenu .category a {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 20px 20px;
}

.modalmenu .category .logo {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modalmenu .category .logo img {
  max-width: 200px;
  max-height: 100px;
  width: auto;
  height: auto;
  display: block;
}

.modalmenu .category .image {
  width: calc((100% - 20px) * 0.3);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
}

.modalmenu .category .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.modalmenu .category .info {
  width: calc((100% - 20px) * 0.7);
  font-size: clamp(13px, 1.0vw, 14px);
  line-height: 1.7;
  letter-spacing: 0.5px;
}

}

/* bp0 : 〜479 */
@media (max-width: 479px) {

/* =========================================
   RCP Infinite Slideshow (horizontal, loop)
========================================= */

.infiniteSlideshow[data-rcp="infiniteSlideshow"]{
  margin-top: 30px;
}

/* ===============================
   firstview base
================================ */

.firstview .copyset {
  width: 63vw;
}
.firstview .copyset .top {
  text-align: center;
  text-align-last: auto;
  text-justify: auto;
  letter-spacing: 2px;
}
.firstview .copyset .bottom {
  line-height: 1.8;
}
.firstview .copyset .logo {
  margin: 20px 0;
  text-align: center;
}
.firstview .copyset .logo img {
  margin-left: -15px;
  width: 90%;
  display: inline-block;
}

.firstview .categoryslide {
  width: 100%;
  height: 50%;
  min-height: 50vh;
  min-height: 50svh;
  top: inherit;
  bottom: 0px;
  transform: translate(0%, 120%);
}
.firstview .categoryslide .slideset .logolead .leadinner {
gap: 0px 20px;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0.6) 40%,
rgba(0, 0, 0, 0.3) 70%,
rgba(0, 0, 0, 0.0) 100%
);
flex-wrap: wrap;
align-content: center;
height: 100%;
}
.firstview .categoryslide .slideset .logolead .leadinner p.logo {
margin-bottom: 20px;
width: 40%;
text-align: center;
}
.firstview .categoryslide .slideset .slide_block.thailandgolfresorts .logolead .leadinner p.logo {
margin-bottom: 20px;
}
.firstview .categoryslide .slideset .slide_block.tokyo .logolead .leadinner p.logo {
margin-bottom: 20px;
}
.firstview .categoryslide .slideset .slide_block.jocale .logolead .leadinner p.logo {
margin-bottom: 20px;
}
.firstview .categoryslide .slideset .slide_block.golfapparel .logolead .leadinner p.logo {
margin-bottom: 20px;
}
.firstview .categoryslide .slideset .logolead .leadinner p.logo img {
max-height: 90px;
display: inline-block;
}
.firstview .categoryslide .slideset .slide_block.tokyo .logolead .leadinner p.logo img {
margin-left: 0px;
}
.firstview .categoryslide .slideset .logolead .leadinner p.text {
margin-bottom: 20px;
padding: 0px 50px;
width: 1000%;
box-sizing: border-box;
}
.firstview .categoryslide .slideset .logolead .leadinner p.text span {
line-height: 1.8;
}
.firstview .categoryslide .slideset .logolead .leadinner p.link {
margin-bottom: 0px;
width: 60px;
text-align: right;
}

/* ===============================
   scrollfixcontents layout
================================ */

.scrollfixcontents {
  box-sizing: border-box;
}

.scrollfixcontents:before {
content: "";
width: 100%;
height: 100px;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 1.0) 0%,
rgba(0, 0, 0, 0.5) 40%,
rgba(0, 0, 0, 0.2) 70%,
rgba(0, 0, 0, 0.0) 100%
);
position: sticky;
top: 0px;
left: 0px;
z-index: 40;
}
.scrollfixcontents.white:before {
content: "";
width: 100%;
height: 100px;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 1.0) 0%,
rgba(255, 255, 255, 0.5) 40%,
rgba(255, 255, 255, 0.2) 70%,
rgba(255, 255, 255, 0.0) 100%
);
position: sticky;
top: 0px;
left: 0px;
z-index: 40;
}
.scrollfixcontents.white.beige:before {
content: "";
width: 100%;
height: 100px;
background: linear-gradient(
to bottom,
rgba(232, 223, 214, 1.0) 0%,
rgba(232, 223, 214, 0.5) 40%,
rgba(232, 223, 214, 0.2) 70%,
rgba(232, 223, 214, 0.0) 100%
);
position: sticky;
top: 0px;
left: 0px;
z-index: 40;
}

.scrollfixcontents .slideblock {
  padding-top: 150px;
  width: 100%;
  height: auto;
  position: absolute;
  top: 100px;
  z-index: 5;
}

.scrollfixcontents .slideblock .slideset {
  margin: 0px auto;
  width: 70vw;
  height: auto;
  aspect-ratio: 16 / 9;
}

.scrollfixcontents .slideblock .fadeslide_bar {
  display: none;
}

.scrollfixcontents .slideblock .rcp-sfc-logo {
  width: 50%;
  top: 0%;
  left: 50%;
  transform: translateX(-50%) !important;
}
.scrollfixcontents#sec-tokyo .slideblock .rcp-sfc-logo {
  width: 30%;
}
.scrollfixcontents#sec-jocale .slideblock .rcp-sfc-logo {
  width: 40%;
}

.scrollfixcontents .categorynav {
  padding: 0px 30px 0px 30px;
  height: 150px;
  gap: 0px 20px;
}

.scrollfixcontents#sec-jocale .categorynav.black::before{
  background: rgba(232,223,214, 0.9); /* ★少し濃く（お好みで） */
  mask-image: linear-gradient(
    to top,
    rgba(232,223,214,1) 0%,
    rgba(232,223,214,1) 40%,
    rgba(232,223,214,0.85) 60%,
    rgba(232,223,214,0.45) 75%,
    rgba(232,223,214,0.15) 88%,
    rgba(232,223,214,0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    rgba(232,223,214,1) 0%,
    rgba(232,223,214,1) 40%,
    rgba(232,223,214,0.85) 60%,
    rgba(232,223,214,0.45) 75%,
    rgba(232,223,214,0.15) 88%,
    rgba(232,223,214,0) 100%
  );
}

.scrollfixcontents .categorynav .logo {
width: 160px;
text-align: left;
}
.scrollfixcontents .categorynav .logo img {
height: 65px;
display: inline-block;
}
.scrollfixcontents#sec-thailandgolfresorts .categorynav .logo img {
height: 45px;
}
.scrollfixcontents#sec-tokyo .categorynav .logo img {
height: 70px;
}
.scrollfixcontents#sec-jocale .categorynav .logo img {
height: 70px;
}
.scrollfixcontents#sec-jocale .categorynav .logo img.pc {
display: none;
}
.scrollfixcontents#sec-jocale .categorynav .logo img.sp {
display: inline-block;
}
.scrollfixcontents .categorynav .info {
display: none;
}
.scrollfixcontents .categorynav .info p {
color: rgb(255,255,255,1.0);
font-size: clamp(12px, 0.85vw, 13px);
line-height: 1.7;
letter-spacing: 0.5px;
}
.scrollfixcontents#sec-jocale .categorynav .info p {
color: rgb(0,0,0,1.0);
}
.scrollfixcontents .categorynav .link {
width: 200px;
}
.scrollfixcontents .categorynav .link p a {
padding-right: 20px;
display: block;
color: rgb(255,255,255,1.0);
font-size: clamp(11px, 0.75vw, 12px);
letter-spacing: 1.8px;
line-height: 40px;
text-align: center;
text-decoration: none;
border: rgb(255,255,255,1.0) solid 1px;
box-sizing: border-box;
border-radius: 20px;
position: relative;
}
.scrollfixcontents .categorynav .link p a::after{
content:"";
width:6px;
height:6px;
border-right:1px solid rgba(255,255,255,0.85);
border-bottom:1px solid rgba(255,255,255,0.85);
transform:translateY(-2.5px) rotate(-45deg);
display:block;
position: absolute;
top: 50%;
right: 20px;
}
.scrollfixcontents#sec-jocale .categorynav .link p a {
color: rgb(0,0,0,1.0);
border: rgb(0,0,0,1.0) solid 1px;
}
.scrollfixcontents#sec-jocale .categorynav .link p a::after{
border-right:1px solid rgba(0,0,0,0.85);
border-bottom:1px solid rgba(0,0,0,0.85);
}

.scrollfixcontents .contents {
  padding-bottom: 30px;
  width: 100%;
}

.scrollfixcontents .backimage {
  margin-top: -100px;
  width: 100vw;               /* ← ブラウザ幅55% */
}

/* 右カラムの内側を “固定背景の器” にする */
.scrollfixcontents .contents .inner {
  padding: 0px 0px 30px 0px;
  width: 70vw;
}

.scrollfixcontents .contents .inner:before {
  content: "";
  display: block;
  width: 60vw;
  height: calc((60vw * 9 / 16) + 300px);
}

.scrollfixcontents .contents .copy {
  padding: 30px 0px;
  font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: 0.5px;
}
.scrollfixcontents .contents .copy strong {
  font-size: 18px;
}
.scrollfixcontents .contents .copy span {
  font-size: clamp(12px, 1.1vw, 13px);
}
.scrollfixcontents .contents .lead {
  padding: 7px 0px;
}
.scrollfixcontents .contents .image {
  padding: 30px 0px;
}
.scrollfixcontents .contents .image.space {
  padding: 50px 0px;
}
.scrollfixcontents .contents .image.topclear {
  padding: 0px 0px 30px 0px;
}
.scrollfixcontents .contents .image.narrow img {
  width: 60%;
}

/* =========================
   Modal Button
========================= */
.modalbtn{
  top: 10px;
  right: 20px;
  width: 56px;
  height: 44px;
}

/* =========================
   Modal inner layout
========================= */

.modalmenu {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.modalmenu .inner {
  padding: 0px 30px;
  width: 85%;
  max-width: 600px;

  /* 高さを画面の80% */
  height: 80dvh;
  max-height: 80dvh;

  /* 上に10%余白 */
  margin: 10dvh auto 0;
  box-sizing: border-box;
}

.modalmenu .categoryblock {
  gap: 30px 30px;
  align-content: flex-start !important;
}

.modalmenu .category {
  width: calc(100%);
}

.modalmenu .category a {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 20px 20px;
}

.modalmenu .category .logo {
  width: 100%;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modalmenu .category .logo img {
  max-width: 170px;
  max-height: 90px;
  width: auto;
  height: auto;
  display: block;
}

.modalmenu .category .image {
  width: calc((100% - 20px) * 0.3);
  aspect-ratio: 2 / 3;
  overflow: hidden;
  position: relative;
}

.modalmenu .category .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.modalmenu .category .info {
  width: calc((100% - 20px) * 0.7);
  font-size: clamp(13px, 1.0vw, 14px);
  line-height: 1.7;
  letter-spacing: 0.5px;
}

}