@charset  "UTF-8";
/* ----------------------------------------------
COMMON
---------------------------------------------- */
*{
    margin: 0;
    padding: 0;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box; /* ← overflowは外す */
}

*:before, 
*:after{ box-sizing: inherit;}


html,body{
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    font-size: 62.5%; /* 10px */
    box-sizing: border-box;
    font-family: 'Inter', 'Noto Sans JP', 'Open Sans', sans-serif;
}

a{
    text-decoration: none;
}

img{
    width: 100%;
    height: auto;
    display: block;
}
/* ----------------------------------------------
Site__Wrapper
---------------------------------------------- */
#Site__Wrapper{
    width: 100%;
    /* height: 100vh; */
    height: auto;
    min-height: 100vh;
    overflow: visible;
}

/* ========================================
HEADER
======================================== */

.header{
  position:fixed;
  top:0;
  left:0;

  width:100%;
  height:76px;

  z-index:9999;

  background:
  rgba(10,10,10,.2);

  backdrop-filter:blur(14px);

  border-bottom:
  1px solid rgba(255,255,255,.06);

  transition:.4s ease;
}

/* scroll */
.header.scrolled{
  background:
  rgba(8,8,8,.72);

  backdrop-filter:blur(22px);

  box-shadow:
  0 10px 40px rgba(0,0,0,.28);
}

/* inner */
.header-inner{
  width:min(1380px,92%);
  height:100%;

  margin:0 auto;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* ========================================
LOGO
======================================== */

.logo img{
  height:34px;
  display:block;
}

/* ========================================
NAV
======================================== */

.header nav{
  display:flex;
  align-items:center;
  gap:12px;
}

/* nav link */
.header nav > a,
.mega-trigger{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  height:42px;
  padding:0 18px;

  border-radius:999px;

  color:rgba(255,255,255,.84);

  font-size:13px;
  font-weight:600;

  letter-spacing:.08em;

  transition:.35s ease;

  cursor:pointer;
}

/* hover */
.header nav > a:hover,
.mega-trigger:hover{
  background:
  rgba(255,255,255,.08);

  color:#fff;

  transform:translateY(-1px);
}

/* ========================================
RANKING CTA
======================================== */

.ranking-link{
  background:
  linear-gradient(
    135deg,
    #ff7a18,
    #ff3c3c
  );

  color:#fff !important;

  padding:0 24px;

  box-shadow:
  0 12px 30px rgba(255,90,0,.25);
}

/* ========================================
MEGA MENU
======================================== */

.mega-menu{
  position:relative;
}

/* trigger */
.mega-trigger span{
  margin-left:8px;
  font-size:12px;

  opacity:.7;
}

/* dropdown */
.mega-dropdown{
  position:absolute;

  top:70px;
  left:50%;

  transform:
  translateX(-50%)
  translateY(20px);

  width:820px;

  opacity:0;
  visibility:hidden;

  transition:.45s ease;

  pointer-events:none;

  z-index:100;
}

/* hover open */
.mega-menu:hover .mega-dropdown{
  opacity:1;
  visibility:visible;

  transform:
  translateX(-50%)
  translateY(0);

  pointer-events:auto;
}

/* mega box */
.mega-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:18px;

  padding:26px;

  border-radius:28px;

  background:
  rgba(15,15,15,.88);

  backdrop-filter:blur(24px);

  border:
  1px solid rgba(255,255,255,.08);

  box-shadow:
  0 30px 80px rgba(0,0,0,.45);
}

/* card */
.mega-card{
  position:relative;

  display:flex;
  flex-direction:column;

  padding:24px;

  border-radius:22px;

  background:
  rgba(255,255,255,.03);

  transition:.35s ease;
}

/* hover */
.mega-card:hover{
  transform:
  translateY(-6px);

  background:
  rgba(255,255,255,.06);
}

/* label */
.mega-label{
  font-size:11px;
  letter-spacing:2px;

  color:#7fd6ff;

  margin-bottom:14px;
}

/* title */
.mega-card h3{
  font-size:24px;
  color:#fff;

  margin-bottom:12px;
}

/* text */
.mega-card p{
  font-size:13px;
  line-height:1.8;

  color:#bdbdbd;
}

/* ========================================
RESPONSIVE
======================================== */

@media screen and (max-width:1100px){

  .mega-dropdown{
    width:680px;
  }

  .mega-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

/* tablet */
@media screen and (max-width:860px){

  .header{
    height:70px;
  }

  .logo img{
    height:28px;
  }

  .header nav > a,
  .mega-trigger{
    height:38px;
    padding:0 12px;

    font-size:11px;
  }

}

/* sp */
@media screen and (max-width:768px){

  .header nav{
    display:none;
  }

}
/* ----------------------------------------------
BREADCRUMB
---------------------------------------------- */
.breadcrumb{
  position: absolute;
  z-index: 999;

  padding-top:100px;
  padding-left:5%;
  padding-right:5%;

  background-color: transparent;
}

/* inner */
.breadcrumb-inner{
  max-width:1200px;
  margin:0 auto;

  display:flex;
  align-items:center;
  gap:14px;
}

/* リンク */
.breadcrumb a{
  color:#888;
  font-size:13px;

  transition:0.3s;
}

.breadcrumb a:hover{
  color:#fff;
}

/* 区切り */
.breadcrumb-separator{
  color:#555;
  font-size:11px;
}

/* current */
.breadcrumb .current{
  color:#fff;
  font-size:13px;
  font-weight:600;
}

/* ----------------------------------------------
footer
---------------------------------------------- */
.footer{
  background:#070707;
  padding-top:100px;
  border-top:
  1px solid rgba(255,255,255,0.06);
}

/* 中 */
.footer-inner{
  max-width:1200px;
  margin:0 auto;

  padding:0 5% 80px;

  display:grid;
  grid-template-columns:
  1.5fr 1fr 1fr 1fr;

  gap:50px;
}

/* ロゴ */
.footer-logo{
  width:140px;
  margin-bottom:24px;
}

.footer-copy{
  color:#aaa;
  font-size:14px;
  line-height:1.9;
  margin-bottom:20px;
}

.footer-update{
  color:#666;
  font-size:12px;
}

/* 見出し */
.footer-links h3{
  color:#fff;
  font-size:16px;
  margin-bottom:24px;
}

/* リスト */
.footer-links ul{
  list-style:none;
}

.footer-links li{
  margin-bottom:14px;
}

.footer-links a{
  color:#999;
  font-size:14px;
  transition:0.3s;
}

.footer-links a:hover{
  color:#fff;
  padding-left:6px;
}

/* 下 */
.footer-bottom{
  border-top:
  1px solid rgba(255,255,255,0.05);

  text-align:center;

  padding:24px;
}

.footer-bottom p{
  color:#666;
  font-size:12px;
  letter-spacing:1px;
}

/* SP */
@media (max-width:900px){

  .footer-inner{
    grid-template-columns:1fr;
    gap:40px;
  }

  .footer{
    padding-top:70px;
  }

}

/* ========================================
ACTRESS FEATURE
======================================== */

.actress-feature{
  position:relative;
  overflow:hidden;

  min-height:100vh;

  padding:
  160px 5%
  120px;

  background:
  linear-gradient(
    180deg,
    #070707,
    #111
  );

  color:#fff;
}

/* bg */
.actress-bg{
  position:absolute;
  inset:0;

  background:
  radial-gradient(
    circle at top right,
    rgba(255,255,255,.06),
    transparent 40%
  );
}

/* inner */
.actress-inner{
  position:relative;
  z-index:2;

  width:min(1380px,100%);
  margin:0 auto;

  display:grid;
  grid-template-columns:
  1fr
  580px;

  gap:80px;

  align-items:center;
}

/* ========================================
COPY
======================================== */

.actress-mini{
  display:inline-block;

  margin-bottom:24px;

  font-size:12px;
  letter-spacing:4px;

  color:#c9c9c9;
}

.actress-title{
  font-size:78px;
  line-height:1.08;

  font-weight:900;

  margin-bottom:30px;
}

.actress-desc{
  font-size:18px;
  line-height:2;

  color:#b8b8b8;

  margin-bottom:40px;
}

/* buttons */
.actress-buttons{
  display:flex;
  gap:18px;

  margin-bottom:38px;
}

.actress-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:58px;
  padding:0 34px;

  border-radius:999px;

  border:
  1px solid rgba(255,255,255,.14);

  background:
  rgba(255,255,255,.04);

  color:#fff;

  font-size:14px;
  font-weight:700;

  transition:.4s ease;
}

/* primary */
.actress-btn.primary{
  background:
  linear-gradient(
    135deg,
    #ff7a18,
    #ff3c3c
  );

  border:none;

  box-shadow:
  0 15px 40px rgba(255,90,0,.25);
}

/* hover */
.actress-btn:hover{
  transform:
  translateY(-3px);

  background:
  rgba(255,255,255,.08);
}

.actress-btn.primary:hover{
  transform:
  translateY(-4px)
  scale(1.03);
}

/* tags */
.actress-tags{
  display:flex;
  flex-wrap:wrap;

  gap:12px;
}

.actress-tags span{
  padding:
  12px 18px;

  border-radius:999px;

  background:
  rgba(255,255,255,.06);

  color:#d9d9d9;

  font-size:12px;
}

/* ========================================
VISUAL
======================================== */

.actress-main-image{
  position:relative;

  border-radius:38px;

  overflow:hidden;

  box-shadow:
  0 30px 80px rgba(0,0,0,.45);
}

/* image */
.actress-main-image img{
  width:100%;
  height:780px;

  object-fit:cover;

  display:block;
}

/* overlay */
.actress-overlay{
  position:absolute;
  inset:0;

  background:
  linear-gradient(
    to top,
    rgba(0,0,0,.55),
    rgba(0,0,0,.08)
  );
}

/* badge */
.actress-badge{
  position:absolute;

  top:26px;
  left:26px;

  padding:
  18px 22px;

  border-radius:24px;

  background:
  rgba(255,255,255,.08);

  backdrop-filter:blur(20px);

  border:
  1px solid rgba(255,255,255,.12);
}

.actress-badge span{
  display:block;

  font-size:11px;
  letter-spacing:3px;

  margin-bottom:6px;

  color:#cfcfcf;
}

.actress-badge h3{
  font-size:22px;
}

/* floating reviews */
.floating-review{
  position:absolute;

  padding:
  14px 20px;

  border-radius:18px;

  background:
  rgba(255,255,255,.08);

  backdrop-filter:blur(20px);

  border:
  1px solid rgba(255,255,255,.08);

  color:#fff;

  font-size:13px;

  box-shadow:
  0 20px 50px rgba(0,0,0,.25);
}

/* review position */
.review01{
  bottom:120px;
  left:-30px;
}

.review02{
  top:160px;
  right:-30px;
}

/* ========================================
BLUR
======================================== */

.actress-blur{
  position:absolute;

  border-radius:50%;

  filter:blur(140px);

  opacity:.18;
}

.blur01{
  width:400px;
  height:400px;

  background:#ff7a18;

  top:-100px;
  left:-100px;
}

.blur02{
  width:450px;
  height:450px;

  background:#ffffff;

  bottom:-180px;
  right:-120px;
}

/* ========================================
RESPONSIVE
======================================== */

@media screen and (max-width:1100px){

  .actress-inner{
    grid-template-columns:1fr;
  }

  .actress-title{
    font-size:56px;
  }

  .actress-main-image img{
    height:680px;
  }

}

@media screen and (max-width:768px){

  .actress-feature{
    padding-top:120px;
  }

  .actress-title{
    font-size:42px;
  }

  .actress-desc{
    font-size:15px;
  }

  .actress-buttons{
    flex-direction:column;
  }

  .actress-btn{
    width:100%;
  }

  .floating-review{
    display:none;
  }

  .actress-main-image img{
    height:560px;
  }

}

/* ========================================
ADULT RANKING
======================================== */

.adult-ranking{
  position:relative;

  padding:
  140px 5%;

  background:
  linear-gradient(
    180deg,
    #0d0d0d,
    #151515
  );

  overflow:hidden;
}

/* ========================================
HEAD
======================================== */

.adult-ranking-head{
  text-align:center;

  margin-bottom:80px;
}

.ranking-mini{
  display:inline-block;

  margin-bottom:18px;

  font-size:12px;
  letter-spacing:4px;

  color:#bcbcbc;
}

.adult-ranking-head h2{
  font-size:58px;
  line-height:1.1;

  color:#fff;

  margin-bottom:20px;

  font-weight:900;
}

.adult-ranking-head p{
  font-size:16px;
  line-height:1.9;

  color:#a8a8a8;
}

/* ========================================
LIST
======================================== */

.adult-ranking-list{
  width:min(1280px,100%);
  margin:0 auto;

  display:flex;
  flex-direction:column;

  gap:36px;
}

/* ========================================
CARD
======================================== */

.adult-rank-card{
  position:relative;

  display:grid;
  grid-template-columns:
  80px
  420px
  1fr;

  gap:34px;

  align-items:center;

  padding:34px;

  border-radius:36px;

  background:
  rgba(255,255,255,.03);

  border:
  1px solid rgba(255,255,255,.06);

  overflow:hidden;

  transition:
  transform .45s ease,
  background .45s ease,
  border-color .45s ease;
}

/* hover */
.adult-rank-card:hover{
  transform:
  translateY(-10px);

  background:
  rgba(255,255,255,.05);

  border-color:
  rgba(255,255,255,.12);
}

/* ========================================
NUMBER
======================================== */

.rank-number{
  font-size:72px;
  font-weight:900;

  line-height:1;

  color:
  rgba(255,255,255,.08);
}

/* ========================================
IMAGE
======================================== */

.rank-image{
  position:relative;

  height:260px;

  border-radius:28px;

  overflow:hidden;
}

/* image */
.rank-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:
  transform 1s ease;
}

/* hover */
.adult-rank-card:hover img{
  transform:scale(1.08);
}

/* overlay */
.rank-overlay{
  position:absolute;
  inset:0;

  background:
  linear-gradient(
    to top,
    rgba(0,0,0,.5),
    rgba(0,0,0,.05)
  );
}

/* badge */
.rank-badge{
  position:absolute;

  top:20px;
  left:20px;

  padding:
  10px 16px;

  border-radius:999px;

  background:
  linear-gradient(
    135deg,
    #ff7a18,
    #ff3c3c
  );

  color:#fff;

  font-size:11px;
  font-weight:700;

  letter-spacing:2px;
}

/* ========================================
CONTENT
======================================== */

.rank-category{
  display:inline-block;

  margin-bottom:18px;

  color:#7fd6ff;

  font-size:11px;
  letter-spacing:3px;
}

.rank-content h3{
  font-size:36px;
  line-height:1.3;

  color:#fff;

  margin-bottom:18px;

  font-weight:800;
}

.rank-content p{
  font-size:15px;
  line-height:2;

  color:#b9b9b9;

  margin-bottom:24px;
}

/* ========================================
TAGS
======================================== */

.rank-tags{
  display:flex;
  flex-wrap:wrap;

  gap:10px;
}

.rank-tags span{
  padding:
  10px 16px;

  border-radius:999px;

  background:
  rgba(255,255,255,.06);

  color:#d9d9d9;

  font-size:12px;
}

/* ========================================
TOP1 SPECIAL
======================================== */

.rank01{
  background:
  linear-gradient(
    135deg,
    rgba(255,122,24,.08),
    rgba(255,255,255,.03)
  );

  border:
  1px solid rgba(255,122,24,.18);
}

/* ========================================
RESPONSIVE
======================================== */

@media screen and (max-width:1100px){

  .adult-rank-card{
    grid-template-columns:1fr;
  }

  .rank-number{
    font-size:58px;
  }

  .rank-content h3{
    font-size:30px;
  }

}

@media screen and (max-width:768px){

  .adult-ranking{
    padding:100px 5%;
  }

  .adult-ranking-head h2{
    font-size:40px;
  }

  .adult-rank-card{
    padding:24px;
  }

  .rank-image{
    height:220px;
  }

  .rank-content h3{
    font-size:24px;
  }

}

/* ========================================
SNS REVIEW
======================================== */

.sns-review{
  position:relative;

  padding:
  140px 0;

  overflow:hidden;

  background:
  linear-gradient(
    180deg,
    #111,
    #181818
  );
}

/* bg */
.sns-bg{
  position:absolute;
  inset:0;

  background:
  radial-gradient(
    circle at top left,
    rgba(255,255,255,.05),
    transparent 40%
  );
}

/* ========================================
HEAD
======================================== */

.sns-head{
  position:relative;
  z-index:2;

  text-align:center;

  margin-bottom:80px;
}

.sns-mini{
  display:inline-block;

  margin-bottom:18px;

  font-size:12px;
  letter-spacing:4px;

  color:#b8b8b8;
}

.sns-head h2{
  font-size:58px;
  line-height:1.1;

  color:#fff;

  margin-bottom:20px;

  font-weight:900;
}

.sns-head p{
  font-size:16px;
  line-height:1.9;

  color:#a8a8a8;
}

/* ========================================
SLIDER
======================================== */

.sns-slider{
  position:relative;

  overflow: visible;

  padding-bottom: 20px;
}

/* track */
.sns-track{
  display:flex;
  gap:28px;

  width:max-content;

  animation:
  snsSlide 28s linear infinite;
}

/* animation */
@keyframes snsSlide{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }

}

/* ========================================
CARD
======================================== */

.sns-card{
  width:420px;

  padding:30px;

  border-radius:32px;

  background:
  rgba(255,255,255,.05);

  backdrop-filter:blur(20px);

  border:
  1px solid rgba(255,255,255,.08);

  box-shadow:
  0 20px 50px rgba(0,0,0,.24);

  flex-shrink:0;

  transition:
  transform .45s ease,
  background .45s ease;
}

/* hover */
.sns-card:hover{
  transform:
  translateY(-10px);

  background:
  rgba(255,255,255,.08);
}

/* ========================================
USER
======================================== */

.sns-user{
  display:flex;
  align-items:center;

  gap:16px;

  margin-bottom:24px;
}

/* icon */
.sns-icon{
  width:54px;
  height:54px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
  linear-gradient(
    135deg,
    #ff7a18,
    #ff3c3c
  );

  color:#fff;

  font-weight:800;
}

/* info */
.sns-user-info h3{
  color:#fff;

  font-size:15px;

  margin-bottom:4px;
}

.sns-user-info span{
  font-size:12px;

  color:#9d9d9d;
}

/* ========================================
TEXT
======================================== */

.sns-text{
  font-size:18px;
  line-height:2;

  color:#e6e6e6;

  margin-bottom:30px;
}

/* ========================================
BOTTOM
======================================== */

.sns-bottom{
  display:flex;
  align-items:center;

  gap:20px;

  color:#9d9d9d;

  font-size:13px;
}

/* ========================================
RESPONSIVE
======================================== */

@media screen and (max-width:768px){

  .sns-review{
    padding:100px 0;
  }

  .sns-head h2{
    font-size:40px;
  }

  .sns-card{
    width:320px;
    padding:24px;
  }

  .sns-text{
    font-size:15px;
  }

}

/* ========================================
WORLDVIEW FEATURE
======================================== */

.worldview-feature{
  position:relative;

  padding:
  160px 0
  220px;

  overflow:hidden;

  background:
  linear-gradient(
    180deg,
    #141414,
    #0b0b0b
  );
}

/* bg */
.worldview-bg{
  position:absolute;
  inset:0;

  background:
  radial-gradient(
    circle at top right,
    rgba(255,255,255,.04),
    transparent 40%
  );
}

/* ========================================
HEAD
======================================== */

.worldview-head{
  position:relative;
  z-index:2;

  text-align:center;

  margin-bottom:90px;
}

.world-mini{
  display:inline-block;

  margin-bottom:18px;

  font-size:12px;
  letter-spacing:4px;

  color:#bdbdbd;
}

.worldview-head h2{
  font-size:68px;
  line-height:1.1;

  color:#fff;

  margin-bottom:24px;

  font-weight:900;
}

.worldview-head p{
  font-size:17px;
  line-height:2;

  color:#aaaaaa;
}

/* ========================================
SLIDER
======================================== */

.world-slider{
  position:relative;
}

.world-track{
  display:flex;

  gap:32px;

  width:max-content;

  padding-left:8%;

  will-change:transform;
}

/* ========================================
CARD
======================================== */

.world-card{
  position:relative;

  width:480px;

  border-radius:36px;

  overflow:hidden;

  background:
  rgba(255,255,255,.04);

  border:
  1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(20px);

  flex-shrink:0;

  transition:
  transform .5s ease,
  border-color .5s ease;
}

/* hover */
.world-card:hover{
  transform:
  translateY(-10px);

  border-color:
  rgba(255,255,255,.16);
}

/* ========================================
IMAGE
======================================== */

.world-image{
  position:relative;

  height:620px;

  overflow:hidden;
}

/* img */
.world-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:
  transform 1.2s ease;
}

/* hover */
.world-card:hover img{
  transform:scale(1.08);
}

/* overlay */
.world-overlay{
  position:absolute;
  inset:0;

  background:
  linear-gradient(
    to top,
    rgba(0,0,0,.78),
    rgba(0,0,0,.08)
  );
}

/* ========================================
CONTENT
======================================== */

.world-content{
  position:absolute;

  left:34px;
  right:34px;
  bottom:34px;

  z-index:3;
}

/* label */
.world-content span{
  display:inline-block;

  margin-bottom:16px;

  font-size:11px;
  letter-spacing:3px;

  color:#7fd6ff;
}

/* title */
.world-content h3{
  font-size:38px;
  line-height:1.2;

  color:#fff;

  margin-bottom:18px;

  font-weight:800;
}

/* text */
.world-content p{
  font-size:15px;
  line-height:2;

  color:#d0d0d0;
}

/* ========================================
BLUR
======================================== */

.world-blur{
  position:absolute;

  border-radius:50%;

  filter:blur(140px);

  opacity:.14;
}

.blur01{
  width:400px;
  height:400px;

  background:#ff7a18;

  top:-120px;
  left:-120px;
}

.blur02{
  width:500px;
  height:500px;

  background:#ffffff;

  right:-180px;
  bottom:-180px;
}

/* ========================================
RESPONSIVE
======================================== */

@media screen and (max-width:768px){

  .worldview-feature{
    padding:100px 0;
  }

  .worldview-head h2{
    font-size:42px;
  }

  .world-card{
    width:320px;
  }

  .world-image{
    height:480px;
  }

  .world-content h3{
    font-size:28px;
  }

  .world-content p{
    font-size:14px;
  }

}

/* ========================================
WHY LOVE
======================================== */

.why-love{
  position:relative;

  padding:180px 8%;

  overflow:hidden;

  background:
  linear-gradient(
    180deg,
    #0b0b0b,
    #121212
  );
}

/* bg */
.why-bg{
  position:absolute;
  inset:0;

  background:
  radial-gradient(
    circle at top left,
    rgba(255,255,255,.04),
    transparent 40%
  );
}

/* inner */
.why-inner{
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:80px;
}

/* ========================================
VISUAL
======================================== */

.why-visual{
  width:48%;
}

.why-main-image{
  position:relative;

  border-radius:38px;

  overflow:hidden;

  height:760px;

  border:
  1px solid rgba(255,255,255,.08);
}

.why-main-image img{
  width:100%;
  height:100%;

  object-fit:cover;
}

/* overlay */
.why-overlay{
  position:absolute;
  inset:0;

  background:
  linear-gradient(
    to top,
    rgba(0,0,0,.65),
    rgba(0,0,0,.08)
  );
}

/* ========================================
CONTENT
======================================== */

.why-content{
  width:48%;
}

.why-mini{
  display:inline-block;

  margin-bottom:18px;

  font-size:12px;
  letter-spacing:4px;

  color:#9fdcff;
}

.why-content h2{
  font-size:72px;
  line-height:1.05;

  color:#fff;

  margin-bottom:34px;

  font-weight:900;
}

.why-desc{
  font-size:17px;
  line-height:2;

  color:#bdbdbd;

  margin-bottom:60px;
}

/* ========================================
POINTS
======================================== */

.why-points{
  display:flex;
  flex-direction:column;

  gap:34px;
}

/* item */
.why-item{
  display:flex;
  align-items:flex-start;

  gap:28px;

  padding:30px;

  border-radius:28px;

  background:
  rgba(255,255,255,.04);

  border:
  1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(18px);

  transition:
  transform .4s ease,
  border-color .4s ease;
}

/* hover */
.why-item:hover{
  transform:
  translateY(-6px);

  border-color:
  rgba(255,255,255,.16);
}

/* number */
.why-number{
  font-size:42px;
  font-weight:900;

  color:#7fd6ff;

  line-height:1;
}

/* text */
.why-text h3{
  font-size:28px;

  color:#fff;

  margin-bottom:12px;

  font-weight:800;
}

.why-text p{
  font-size:15px;
  line-height:2;

  color:#cfcfcf;
}

/* ========================================
BLUR
======================================== */

.why-blur{
  position:absolute;

  border-radius:50%;

  filter:blur(140px);

  opacity:.12;
}

.blur01{
  width:380px;
  height:380px;

  background:#ff6b9d;

  top:-120px;
  right:-120px;
}

.blur02{
  width:420px;
  height:420px;

  background:#ffffff;

  bottom:-160px;
  left:-160px;
}

/* ========================================
RESPONSIVE
======================================== */

@media screen and (max-width:768px){

  .why-love{
    padding:100px 24px;
  }

  .why-inner{
    flex-direction:column;
  }

  .why-visual,
  .why-content{
    width:100%;
  }

  .why-main-image{
    height:520px;
  }

  .why-content h2{
    font-size:44px;
  }

  .why-item{
    padding:24px;
  }

  .why-text h3{
    font-size:22px;
  }

}

/* ========================================
IMMERSION EXPERIENCE
======================================== */

.immersion-experience{
  position:relative;

  padding:180px 8%;

  overflow:hidden;

  background:
  linear-gradient(
    180deg,
    #080808,
    #111
  );
}

/* bg */
.immersion-bg{
  position:absolute;
  inset:0;

  background:
  radial-gradient(
    circle at top right,
    rgba(255,255,255,.04),
    transparent 40%
  );
}

/* ========================================
HEAD
======================================== */

.immersion-head{
  position:relative;
  z-index:2;

  text-align:center;

  margin-bottom:90px;
}

.immersion-mini{
  display:inline-block;

  margin-bottom:18px;

  font-size:12px;
  letter-spacing:4px;

  color:#7fd6ff;
}

.immersion-head h2{
  font-size:72px;
  line-height:1.08;

  color:#fff;

  margin-bottom:24px;

  font-weight:900;
}

.immersion-head p{
  font-size:17px;
  line-height:2;

  color:#bdbdbd;
}

/* ========================================
GRID
======================================== */

.immersion-grid{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:
  repeat(3,1fr);

  gap:34px;
}

/* ========================================
CARD
======================================== */

.immersion-card{
  position:relative;

  display:block;

  height:760px;

  border-radius:38px;

  overflow:hidden;

  text-decoration:none;

  background:#111;

  border:
  1px solid rgba(255,255,255,.08);

  transition:
  transform .6s ease,
  border-color .6s ease;
}

/* hover */
.immersion-card:hover{
  transform:
  translateY(-10px);

  border-color:
  rgba(255,255,255,.18);
}

/* image */
.immersion-card img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:
  transform 1.4s ease;
}

.immersion-card:hover img{
  transform:scale(1.08);
}

/* overlay */
.immersion-overlay{
  position:absolute;
  inset:0;

  background:
  linear-gradient(
    to top,
    rgba(0,0,0,.88),
    rgba(0,0,0,.15)
  );
}

/* ========================================
TOP
======================================== */

.immersion-top{
  position:absolute;

  top:28px;
  left:28px;
  right:28px;

  z-index:3;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* badge */
.immersion-badge{
  padding:10px 16px;

  border-radius:999px;

  background:
  rgba(255,255,255,.12);

  backdrop-filter:blur(20px);

  color:#fff;

  font-size:12px;
  letter-spacing:2px;
}

.immersion-badge.hot{
  background:#ff4d6d;
}

/* rate */
.immersion-rate{
  color:#fff;

  font-size:13px;

  letter-spacing:1px;
}

/* ========================================
CONTENT
======================================== */

.immersion-content{
  position:absolute;

  left:34px;
  right:34px;
  bottom:34px;

  z-index:3;
}

.immersion-content span{
  display:inline-block;

  margin-bottom:16px;

  font-size:11px;
  letter-spacing:3px;

  color:#7fd6ff;
}

.immersion-content h3{
  font-size:40px;
  line-height:1.1;

  color:#fff;

  margin-bottom:18px;

  font-weight:900;
}

.immersion-content p{
  font-size:15px;
  line-height:2;

  color:#d6d6d6;

  margin-bottom:26px;
}

/* tags */
.immersion-tags{
  display:flex;
  flex-wrap:wrap;

  gap:10px;

  margin-bottom:28px;
}

.immersion-tags span{
  padding:10px 14px;

  border-radius:999px;

  background:
  rgba(255,255,255,.08);

  border:
  1px solid rgba(255,255,255,.08);

  font-size:12px;

  color:#fff;

  letter-spacing:1px;

  margin:0;
}

/* button */
.immersion-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:16px 24px;

  border-radius:999px;

  background:#fff;

  color:#000;

  font-size:14px;
  font-weight:700;

  transition:
  transform .4s ease,
  background .4s ease;
}

.immersion-card:hover .immersion-button{
  transform:translateX(6px);
}

/* ========================================
BLUR
======================================== */

.immersion-blur{
  position:absolute;

  border-radius:50%;

  filter:blur(140px);

  opacity:.12;
}

.blur01{
  width:420px;
  height:420px;

  background:#6ea8ff;

  top:-140px;
  left:-140px;
}

.blur02{
  width:500px;
  height:500px;

  background:#ffffff;

  right:-220px;
  bottom:-220px;
}

/* ========================================
RESPONSIVE
======================================== */

@media screen and (max-width:768px){

  .immersion-experience{
    padding:100px 24px;
  }

  .immersion-head h2{
    font-size:42px;
  }

  .immersion-grid{
    grid-template-columns:1fr;
  }

  .immersion-card{
    height:620px;
  }

  .immersion-content h3{
    font-size:30px;
  }

}

/* ========================================
SP FLOATING CTA
======================================== */

.sp-floating-cta{
  position: fixed;

  left:16px;
  right:16px;
  bottom:18px;

  z-index:9999;

  display:none;
}

/* ========================================
BUTTON
======================================== */

.sp-cta-button{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:
  18px 22px;

  border-radius:28px;

  overflow:hidden;

  text-decoration:none;

  background:
  rgba(12,12,12,.84);

  border:
  1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(24px);

  box-shadow:
  0 10px 40px rgba(0,0,0,.45);

  transition:
  transform .4s ease,
  border-color .4s ease;
}

/* hover */
.sp-cta-button:hover{
  transform:
  translateY(-4px);

  border-color:
  rgba(255,255,255,.18);
}

/* ========================================
GLOW
======================================== */

.sp-cta-glow{
  position:absolute;

  width:220px;
  height:220px;

  border-radius:50%;

  background:
  rgba(127,214,255,.18);

  filter:blur(70px);

  top:-100px;
  right:-50px;
}

/* ========================================
CONTENT
======================================== */

.sp-cta-content{
  position:relative;
  z-index:2;
}

/* mini */
.sp-cta-mini{
  display:block;

  margin-bottom:8px;

  font-size:10px;
  letter-spacing:3px;

  color:#7fd6ff;
}

/* title */
.sp-cta-content h3{
  font-size:20px;
  font-weight:900;

  color:#fff;

  line-height:1.2;

  margin-bottom:4px;
}

/* desc */
.sp-cta-content p{
  font-size:12px;

  color:#bcbcbc;

  letter-spacing:1px;
}

/* ========================================
ICON
======================================== */

.sp-cta-icon{
  position:relative;
  z-index:2;

  width:52px;
  height:52px;

  border-radius:50%;

  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#fff;

  color:#000;

  font-size:18px;
  font-weight:800;

  transition:
  transform .4s ease;
}

/* hover */
.sp-cta-button:hover .sp-cta-icon{
  transform:
  translateX(4px);
}

/* ========================================
MOBILE ONLY
======================================== */

@media screen and (max-width:768px){

  .sp-floating-cta{
    display:block;
  }

}