@charset "UTF-8";
/* ==========================================================
   Hips FC ｜ top.css（トップページ専用）
   ========================================================== */

/* ---------- ヒーロー ---------- */
.hero{background:var(--navy-900);color:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:clamp(1rem,3vw,2.4rem);border:1px solid rgba(255,255,255,.10);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.45fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding:clamp(4rem,9vw,7rem) clamp(1.25rem,4vw,2rem)}
.hero-eye{font-family:var(--font-min);font-weight:600;color:var(--brass);font-size:.95rem;letter-spacing:.08em;margin-bottom:1.4rem}
.hero-eye span{font-family:var(--font-lat);letter-spacing:.18em;font-size:.7rem;text-transform:uppercase;display:block;margin-bottom:.5rem;color:rgba(255,255,255,.5)}
.hero h1{font-size:clamp(2rem,4.6vw,3.35rem);font-weight:700;line-height:1.4;letter-spacing:.01em;margin-bottom:1.5rem}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p{color:rgba(255,255,255,.78);font-size:1.02rem;max-width:34em;margin-bottom:2.2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem}

/* 実績レジャー（目論見書風の小表） */
.ledger{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.03)}
.ledger h2{font-family:var(--font-min);font-weight:600;font-size:.82rem;letter-spacing:.12em;color:rgba(255,255,255,.6);padding:1rem 1.4rem;border-bottom:1px solid rgba(255,255,255,.12)}
.ledger dl{display:grid}
.ledger .row{display:flex;justify-content:space-between;align-items:baseline;padding:1.05rem 1.4rem;border-bottom:1px solid rgba(255,255,255,.08)}
.ledger .row:last-child{border-bottom:none}
.ledger dt{font-size:.82rem;color:rgba(255,255,255,.7)}
.ledger dd{font-family:var(--font-num);font-feature-settings:"tnum" 1;font-weight:700;font-size:1.5rem;color:var(--gold);letter-spacing:.01em}
.ledger dd small{font-family:var(--font-jp);font-weight:400;font-size:.78rem;color:rgba(255,255,255,.85);margin-left:.25em}

/* ---------- 選ばれる理由 ---------- */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.card{background:var(--white);border:1px solid var(--line);padding:2.2rem 1.9rem;display:flex;flex-direction:column;gap:1rem;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px -24px rgba(13,24,48,.4)}
.card .no{font-family:var(--font-num);font-feature-settings:"tnum" 1;font-weight:700;font-size:.8rem;letter-spacing:.2em;color:var(--brass)}
.card .ic{font-size:1.7rem;color:var(--navy-800)}
.card h3{font-size:1.18rem;font-weight:700;line-height:1.6}
.card p{font-size:.92rem;color:var(--ink-soft);flex:1}

/* ---------- プロモーション・バナー（Swiper） ---------- */
.promo{background:var(--white);padding:clamp(2.6rem,5vw,4rem) 0}
.promo-eye{display:block;text-align:center;margin-bottom:1.8rem}
.promo-inner{padding-inline:clamp(1rem,4vw,3rem)}
.bannerSwiper{width:100%;padding-bottom:2.6rem}
.bannerSwiper .swiper-slide{height:auto}
.bannerSwiper a{display:block}
.bannerSwiper img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.bannerSwiper .swiper-pagination{bottom:0}
.bannerSwiper .swiper-pagination-bullet{background:var(--ink-soft);opacity:.35;transition:opacity .2s,width .2s}
.bannerSwiper .swiper-pagination-bullet-active{background:var(--brass);opacity:1;width:22px;border-radius:4px}
.bannerSwiper .swiper-button-next,.bannerSwiper .swiper-button-prev{width:42px;height:42px;border-radius:50%;background:rgba(13,24,48,.9);color:#fff;top:calc(50% - 1.3rem)}
.bannerSwiper .swiper-button-next:hover,.bannerSwiper .swiper-button-prev:hover{background:var(--navy-900)}
.bannerSwiper .swiper-button-next::after,.bannerSwiper .swiper-button-prev::after{font-size:1rem;font-weight:700}

/* ---------- 開業までの流れ ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.step{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--brass);padding:1.8rem 1.5rem;position:relative}
.step .no{font-family:var(--font-num);font-weight:700;font-size:1.9rem;color:var(--brass);line-height:1;margin-bottom:.8rem;letter-spacing:.02em}
.step h3{font-size:1.02rem;font-weight:700;line-height:1.6;margin-bottom:.5rem}
.step p{font-size:.85rem;color:var(--ink-soft)}

/* ---------- 収益シミュレーション ---------- */
.sim{background:var(--navy-800);color:#fff}
.sim .wrap{display:grid;grid-template-columns:1fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.sim .eyebrow{color:var(--gold)}
.sim h2{font-size:clamp(1.5rem,3vw,2.05rem);font-weight:700;line-height:1.5;margin:.8rem 0 1.1rem}
.sim p{color:rgba(255,255,255,.78);margin-bottom:2rem}
.sim-panel{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.03)}
.sim-panel .ph{padding:.85rem 1.4rem;font-size:.74rem;letter-spacing:.1em;color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--font-min)}
.sim-panel .r{display:flex;justify-content:space-between;align-items:baseline;padding:1rem 1.4rem;border-bottom:1px solid rgba(255,255,255,.08);font-size:.9rem}
.sim-panel .r b{font-family:var(--font-num);font-feature-settings:"tnum" 1;font-weight:700;font-size:1.35rem;color:var(--gold);letter-spacing:.01em}
.sim-panel .r.total b{color:#fff}
.sim-note{font-size:.72rem;color:rgba(255,255,255,.45);padding:.8rem 1.4rem}

/* ---------- インタビュー ---------- */
.voices{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.voice{background:var(--white);border:1px solid var(--line);padding:2rem;display:flex;gap:1.3rem;align-items:flex-start}
.avatar{flex:0 0 56px;width:56px;height:56px;border-radius:50%;background:var(--navy-800);color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--font-lat);font-size:1.1rem}
.voice blockquote{font-family:var(--font-min);font-weight:600;font-size:1.12rem;line-height:1.7;color:var(--navy-900);margin-bottom:.8rem}
.voice .who{font-size:.82rem;color:var(--ink-soft);margin-bottom:.6rem}

/* ---------- エリア＋お知らせ ---------- */
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,3.5rem)}
.news{list-style:none}
.news li{display:flex;gap:1.2rem;align-items:baseline;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.news time{font-family:var(--font-num);font-feature-settings:"tnum" 1;font-size:.82rem;color:var(--brass);flex:0 0 auto;letter-spacing:.03em}
.news .badge{font-size:.66rem;font-weight:700;background:var(--navy-800);color:#fff;padding:.25em .7em;border-radius:2px;flex:0 0 auto}
.news p{font-size:.92rem}
.news p a{border-bottom:1px solid var(--brass);padding-bottom:1px;transition:color .2s}
.news p a:hover{color:var(--brass)}

/* ---------- レスポンシブ（トップ専用分） ---------- */
@media(max-width:980px){
  .hero .wrap,.sim .wrap{grid-template-columns:1fr}
  .reasons,.flow{grid-template-columns:1fr 1fr}
  .voices,.split{grid-template-columns:1fr}
  .hero::before{inset:1rem}
  .hero .wrap{padding-left:1.9rem;padding-right:1.9rem}
}
@media(max-width:760px){
  .reasons,.flow{grid-template-columns:1fr}
  .hero::before{inset:.85rem}
  .hero .wrap{padding-left:1.7rem;padding-right:1.7rem}
  .bannerSwiper .swiper-button-next,.bannerSwiper .swiper-button-prev{display:none}
}