@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;
  }

}

/* ----------------------------------------------
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;
  }

}

.hero{
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero::before{
  content: "";
  position: absolute;
  inset: 0;

  background:
  linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.7)),
  url("../images/adult-hero.jpeg")
  center/cover;

  transform:scale(1.1);

  animation:bgScale 10s linear infinite alternate;
}

@keyframes bgScale{

  from{
    transform:scale(1.1);
  }

  to{
    transform:scale(1.2);
  }

}

.hero-inner{
  position: relative;
  z-index: 10;
  max-width: 900px;
  padding: 20px;
}

.over{
  display: inline-block;
  background: #ff2d75;
  padding: 10px 20px;
  border-radius: 100px;
  margin-bottom: 20px;
  font-weight: bold;
}

.hero h1{
  font-size: 72px;
  line-height: 1.2;
  margin-bottom: 20px;
  font-weight: 900;
  color: #fff;
}

.hero h1 span{
  color: #ff2d75;
}

.hero p{
  font-size: 20px;
  opacity: .8;
  margin-bottom: 40px;

  color: #aaa;
}

.hero-btn{
  display: inline-flex;
  align-items: center;
  gap:10px;

  background:linear-gradient(
    45deg,
    #ff005d,
    #ff4f9a
  );

  color:#fff;
  text-decoration: none;

  padding: 24px 60px;
  border-radius: 100px;

  font-size: 24px;
  font-weight: bold;

  box-shadow: 0 0 40px rgba(255,0,93,.5);

  animation: pulse 1.5s infinite;
}

@keyframes pulse{

  0%{
    transform: scale(1);
  }

  50%{
    transform: scale(1.05);
  }

  100%{
    transform: scale(1);
  }

}


/* =========================
RANKING
========================= */
.ranking{
  padding: 120px 10%;
  background-color: #050505;
}

.ranking h1{
  color: #fff;
  text-align: center;
  font-size: 48px;
  margin-bottom: 50px;
}

.actress-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 30px;
}

.actress-card{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  cursor: pointer;
}

.actress-card img{
  width: 100%;
  height: 450px;
  object-fit: cover;
  display: block;
  transition: .5s;
}

.actress-card:hover img{
  transform: scale(1.05);
}

.rank{
  position: absolute;
  top: 10px;
  left: 10px;
  background: red;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.overlay{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20px;
  background:
  linear-gradient(
    transparent,
    rgba(0,0,0,.9)
  );
}

.overlay h3{
  margin-bottom:10px;

  color: #fff;
}

.overlay span{
  color: #aaa;
}

/* =========================
MODAL
========================= */

.modal{
  position:fixed;
  inset:0;
  z-index:999;
  display:none;
}

.modal.active{
  display:block;
}

.modal-bg{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.8);
}

.modal-content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:90%;
  max-width:1300px;
  background:#111;
  border-radius:30px;
  padding:50px;
}

.close-btn{
  position:absolute;
  top:20px;
  right:20px;
  width:50px;
  height:50px;
  border:none;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  font-size:25px;
}

.modal-title{
  margin-bottom:40px;
  font-size:40px;
}

/* =========================
WORKS
========================= */

.works-wrap{
  display:flex;
  align-items:center;
  gap:20px;
}

.works-grid{
  flex:1;
  display:grid;
  grid-template-columns:
  repeat(5,1fr);
  gap:20px;
}

.work-card{
  background:#1a1a1a;
  border-radius:15px;
  overflow:hidden;
}

.work-card img{
  width:100%;
  
  aspect-ratio: 16 / 9;
  display: block;
  object-fit:cover;
}

.work-info{
  padding:15px;
}

.work-info h4{
  font-size:14px;
  line-height:1.5;
}

.nav{
  width:70px;
  height:70px;
  border:none;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  font-weight:bold;
}

/* =========================
SP
========================= */

@media(max-width:900px){

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

  .hero h1{
    font-size:40px;
  }

}
/* =========================
WEEKLY
========================= */

.weekly{

  padding:180px 7%;

  background:
  radial-gradient(
    circle at center,
    #1c1c1c,
    #050505
  );

  overflow:hidden;

}

.weekly-inner{

  display:grid;

  grid-template-columns:
  1fr 1fr;

  gap:80px;

  align-items:center;

}

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

.weekly-sub{

  color:#ff0055;

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

  letter-spacing:4px;

  margin-bottom:20px;

}

.weekly-name{

  font-size:90px;
  line-height:1;

  font-weight:900;

  color:#fff;

  margin-bottom:30px;

}

.weekly-text{

  font-size:18px;
  line-height:2;

  color:#aaa;

  margin-bottom:40px;

}

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

.weekly-btn{

  width:280px;
  height:70px;

  border:none;

  border-radius:999px;

  background:
  linear-gradient(
    90deg,
    #ff0055,
    #ff7700
  );

  color:#fff;

  font-size:16px;
  font-weight:900;

  cursor:pointer;

  transition:.4s;

  box-shadow:
  0 20px 50px rgba(255,0,80,.35);

}

.weekly-btn:hover{

  transform:
  scale(1.05);

}

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

.weekly-visual{

  position:relative;

}

.weekly-visual img{

  width:100%;

  border-radius:40px;

  display:block;

  box-shadow:
  0 40px 100px rgba(0,0,0,.5);

}

/* =========================
MODAL
========================= */

.pickup-modal{

  position:fixed;
  inset:0;

  z-index:9999;

  display:none;

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

}

.pickup-modal.active{

  display:flex;

}

/* =========================
BG
========================= */

.pickup-bg{

  position:absolute;
  inset:0;

  background:
  rgba(0,0,0,.85);

  backdrop-filter:
  blur(20px);

}

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

.pickup-content{

  position:relative;

  width:90%;
  max-width:1400px;

  height:80vh;

  border-radius:40px;

  overflow:hidden;

  z-index:10;

}

/* =========================
IMAGES
========================= */

.pickup-images{

  position:relative;

  width:100%;
  height:100%;

}

.face{

  position:absolute;

  width:35%;

  border-radius:30px;

  object-fit:cover;

  opacity:0;

  transform:scale(.8);

  box-shadow:
  0 20px 60px rgba(0,0,0,.4);

}

.face1{

  top:5%;
  left:5%;

}

.face2{

  top:20%;
  right:8%;

}

.face3{

  bottom:5%;
  left:35%;

}

/* =========================
CLOSE
========================= */

.pickup-close{

  position:absolute;

  top:20px;
  right:20px;

  width:70px;
  height:70px;

  border:none;

  border-radius:50%;

  background:#fff;

  color:#111;

  font-size:32px;

  cursor:pointer;

  z-index:100;

}

/* =========================
SP
========================= */

@media(max-width:900px){

  .weekly-inner{

    grid-template-columns:1fr;

  }

  .weekly-name{

    font-size:52px;

  }

  .pickup-content{

    height:90vh;

  }

  .face{

    width:80%;

  }

  .face1{

    top:5%;
    left:10%;

  }

  .face2{

    top:35%;
    right:10%;

  }

  .face3{

    bottom:5%;
    left:10%;

  }

}

/* =========================
CHOICE
========================= */

.choice{

  padding:180px 7%;

  background:
  linear-gradient(
    180deg,
    #050505,
    #101010
  );

  overflow:hidden;

}

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

.choice-head{

  text-align:center;

  margin-bottom:80px;

}

.choice-sub{

  color:#ff0055;

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

  letter-spacing:4px;

  margin-bottom:20px;

}

.choice-head h2{

  font-size:80px;
  font-weight:900;

  color:#fff;

  margin-bottom:20px;

}

.choice-head p{

  font-size:18px;

  color:#999;

}

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

.choice-grid{

  display:grid;

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

  gap:35px;

}

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

.choice-card{

  position:relative;

  overflow:hidden;

  border-radius:35px;

  background:#111;

  cursor:pointer;

  transition:.5s;

  box-shadow:
  0 25px 60px rgba(0,0,0,.35);

}

.choice-card:hover{

  transform:
  translateY(-15px)
  scale(1.02);

  box-shadow:
  0 40px 100px rgba(255,0,80,.25);

}

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

.choice-card img{

  width:100%;

  height:520px;

  object-fit:cover;

  display:block;

  transition:1s;

}

.choice-card:hover img{

  transform:scale(1.08);

}

/* =========================
RANK
========================= */

.choice-rank{

  position:absolute;

  top:20px;
  left:20px;

  width:70px;
  height:70px;

  border-radius:50%;

  background:
  linear-gradient(
    135deg,
    #ff0055,
    #ff7700
  );

  color:#fff;

  font-size:24px;
  font-weight:900;

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

  z-index:20;

}

/* =========================
HOT
========================= */

.choice-hot{

  position:absolute;

  top:20px;
  right:20px;

  padding:10px 18px;

  border-radius:999px;

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

  backdrop-filter:
  blur(10px);

  color:#fff;

  font-size:12px;
  font-weight:900;

  z-index:20;

}

/* =========================
OVERLAY
========================= */

.choice-overlay{

  position:absolute;

  left:0;
  bottom:0;

  width:100%;

  padding:35px;

  background:
  linear-gradient(
    transparent,
    rgba(0,0,0,.95)
  );

}

/* =========================
TITLE
========================= */

.choice-overlay h3{

  font-size:30px;
  line-height:1.4;

  color:#fff;

  margin-bottom:15px;

}

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

.choice-overlay p{

  color:#aaa;

  line-height:1.8;

  margin-bottom:25px;

}

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

.choice-btn{

  width:100%;
  height:62px;

  border:none;

  border-radius:999px;

  background:
  linear-gradient(
    90deg,
    #ff0055,
    #ff7700
  );

  color:#fff;

  font-size:16px;
  font-weight:900;

  cursor:pointer;

  transition:.4s;

  box-shadow:
  0 15px 40px rgba(255,0,80,.35);

}

.choice-btn:hover{

  transform:scale(1.03);

}

/* =========================
SP
========================= */

@media(max-width:1000px){

  .choice-grid{

    grid-template-columns:1fr;

  }

  .choice-head h2{

    font-size:52px;

  }

}

/* =========================================================
BUZZ
========================================================= */

.buzz{

  padding:180px 7%;

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

  overflow:hidden;

}

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

.buzz-head{

  text-align:center;

  margin-bottom:80px;

}

.buzz-sub{

  color:#ff0055;

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

  letter-spacing:4px;

  margin-bottom:20px;

}

.buzz-head h2{

  font-size:80px;
  font-weight:900;

  color:#fff;

  margin-bottom:20px;

}

.buzz-head p{

  color:#999;

  font-size:18px;

}

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

.buzz-grid{

  display:grid;

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

  gap:35px;

}

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

.buzz-card{

  position:relative;

  overflow:hidden;

  border-radius:35px;

  background:#151515;

  transition:.5s;

  cursor:pointer;

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

}

.buzz-card:hover{

  transform:
  translateY(-15px);

  box-shadow:
  0 40px 100px rgba(255,0,80,.2);

}

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

.buzz-image{

  position:relative;

  overflow:hidden;

}

.buzz-image img{

  width:100%;
  height:520px;

  object-fit:cover;

  display:block;

  transition:1s;

}

.buzz-card:hover img{

  transform:scale(1.08);

}

/* =========================================================
LIVE
========================================================= */

.live-tag{

  position:absolute;

  top:20px;
  left:20px;

  padding:12px 18px;

  border-radius:999px;

  background:
  rgba(255,0,80,.9);

  color:#fff;

  font-size:12px;
  font-weight:900;

  z-index:20;

  animation:
  pulse 1s infinite;

}

@keyframes pulse{

  0%{

    transform:scale(1);

  }

  50%{

    transform:scale(1.08);

  }

  100%{

    transform:scale(1);

  }

}

/* =========================================================
VIEW
========================================================= */

.viewers{

  position:absolute;

  right:20px;
  top:20px;

  background:
  rgba(0,0,0,.5);

  backdrop-filter:
  blur(10px);

  padding:10px 15px;

  border-radius:999px;

  color:#fff;

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

}

/* =========================================================
OVERLAY
========================================================= */

.buzz-overlay{

  position:absolute;

  left:0;
  bottom:0;

  width:100%;

  padding:35px;

  background:
  linear-gradient(
    transparent,
    rgba(0,0,0,.95)
  );

}

.buzz-overlay h3{

  font-size:28px;
  line-height:1.5;

  color:#fff;

  margin-bottom:15px;

}

.buzz-overlay p{

  color:#aaa;

  line-height:1.8;

  margin-bottom:25px;

}

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

.buzz-btn{

  width:100%;
  height:64px;

  border:none;

  border-radius:999px;

  background:
  linear-gradient(
    90deg,
    #ff0055,
    #ff7700
  );

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

  color:#fff;

  font-size:16px;
  font-weight:900;

  text-decoration:none;

  transition:.4s;

}

.buzz-btn:hover{

  transform:scale(1.03);

}

/* =========================================================
SP
========================================================= */

@media(max-width:1000px){

  .buzz-grid{

    grid-template-columns:1fr;

  }

  .buzz-head h2{

    font-size:54px;

  }

}

/* =========================================================
AMATEUR
========================================================= */
.amateur{
  padding:140px 8%;
  background:
   linear-gradient(
    180deg,
    #050505,
    #101010
  );
}

.section-head{
  text-align:center;
  margin-bottom:70px;
}

.mini-title{
  display:inline-block;
  padding:10px 20px;
  border-radius:100px;
  background:#ff3366;
  color:#fff;
  font-size:12px;
  letter-spacing:.2em;
  margin-bottom:20px;
}

.section-head h2{
  font-size:70px;
  line-height:1.1;
  margin-bottom:20px;
  color: #fff;
}

.section-head p{
  color:#777;
  font-size:18px;
}

.amateur-grid{
  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(240px,1fr));
  gap:30px;
}

/* =========================================================
AMATEUR CARD
横長化
========================================================= */

.amateur-card{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  background:#fff;
  cursor:pointer;

  box-shadow:
  0 20px 40px
  rgba(0,0,0,.08);

  transition:.5s;
}

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

.amateur-image{
  position:relative;
  overflow:hidden;
}

/* 横長 */

.amateur-image img{

  width:100%;

  aspect-ratio: 16 / 9;

  object-fit:cover;

  display:block;

  transition:.8s;

}

/* =========================================================
HOVER
========================================================= */

.amateur-card:hover img{

  transform:scale(1.08);

}

/* =========================================================
OVERLAY
========================================================= */

.amateur-overlay{

  position:absolute;

  left:0;
  bottom:0;

  width:100%;

  padding:30px;

  background:
  linear-gradient(
    transparent,
    rgba(0,0,0,.92)
  );

}

/* =========================================================
TITLE
========================================================= */

.amateur-overlay h3{

  color:#fff;

  font-size:16px;

  line-height:1.5;

  margin:15px 0;

}

/* =========================================================
KEYWORD
========================================================= */

.amateur-keyword{

  display:inline-flex;

  align-items:center;

  gap:8px;

  padding:10px 16px;

  border-radius:100px;

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

  backdrop-filter:blur(10px);

  color:#fff;

  font-size:12px;

  letter-spacing:.08em;

}

/* =========================================================
VIEW
========================================================= */

.amateur-live{

  position:absolute;

  top:20px;
  right:20px;

  padding:10px 16px;

  border-radius:100px;

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

  color:#ff3366;

  font-size:12px;
  font-weight:bold;

  z-index:10;

  backdrop-filter:blur(10px);

}

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

.amateur-btn{

  width:100%;

  height:58px;

  border:none;

  border-radius:16px;

  background:
  linear-gradient(
    135deg,
    #ff3366,
    #ff6699
  );

  color:#fff;

  font-weight:bold;

  font-size:15px;

  cursor:pointer;

  margin-top:20px;

  transition:.4s;

}

.amateur-btn:hover{

  transform:translateY(-3px);

  box-shadow:
  0 15px 30px
  rgba(255,51,102,.3);

}

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

.amateur-grid{

  display:grid;

  grid-template-columns:1fr;

  gap:30px;

}

/* =========================================================
PC ONLY
========================================================= */

@media(min-width:900px){

  .amateur-grid{

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

  }

}

/* =========================================================
SP
========================================================= */

@media(max-width:768px){

  .amateur-overlay{

    padding:20px;

  }

  .amateur-overlay h3{

    font-size:18px;

  }

}

/* =========================================================
SITUATION
========================================================= */

.situation{
  padding: 140px 0;
  background:
  linear-gradient(
    180deg,
    #050505,
    #101010
  );

  overflow:hidden;

}

.situation-head{
  text-align:center;
  margin-bottom:70px;
}

.situation-head span{

  display:inline-block;

  padding:10px 18px;

  border-radius:100px;

  background:#ff3366;

  color:#fff;

  font-size:12px;

  letter-spacing:.2em;

  margin-bottom:25px;

}

.situation-head h2{

  font-size:72px;

  line-height:1.1;

  margin-bottom:20px;

  color: #fff;

}

.situation-head p{

  font-size:18px;

  color:#777;

}

/* =========================================================
ROW
========================================================= */

.situation-row{

  display:flex;

  gap:30px;

  padding:0 8%;

 



}

.situation-row::-webkit-scrollbar{
  display:none;
}

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

.situation-card{

  position:relative;

  min-width:420px;

  height:240px;

  overflow:hidden;

  border-radius:35px;

  flex-shrink:0;

  cursor:pointer;

  box-shadow:
  0 20px 40px
  rgba(0,0,0,.1);

  transition:.6s;

}

.situation-card:hover{

  transform:
  translateY(-10px)
  scale(1.02);

}

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

.situation-card img{

  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transition:1s;

}

.situation-card:hover img{

  transform:scale(1.08);

}

/* =========================================================
OVERLAY
========================================================= */

.situation-overlay{

  position:absolute;

  inset:0;

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  padding:35px;

  background:
  linear-gradient(
    transparent,
    rgba(0,0,0,.85)
  );

}

.situation-overlay h3{

  color:#fff;

  font-size:34px;

  margin-bottom:15px;

}

.situation-overlay p{

  color:#ddd;

  line-height:1.7;

  margin-bottom:25px;

}

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

.situation-tags{

  display:flex;

  gap:10px;

  flex-wrap:wrap;

  margin-bottom:25px;

}

.situation-tags span{

  padding:8px 14px;

  border-radius:100px;

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

  color:#fff;

  font-size:12px;

  backdrop-filter:blur(10px);

}

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

.situation-btn{

  width:220px;

  height:55px;

  border:none;

  border-radius:15px;

  background:
  linear-gradient(
    135deg,
    #ff3366,
    #ff6699
  );

  color:#fff;

  font-weight:bold;

  font-size:15px;

  cursor:pointer;

  transition:.4s;

}

.situation-btn:hover{

  transform:scale(1.05);

  box-shadow:
  0 15px 30px
  rgba(255,51,102,.35);

}

/* =========================================================
SP
========================================================= */

@media(max-width:768px){

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

  .situation-card{

    min-width:85vw;

    height:220px;

  }

  .situation-overlay h3{
    font-size:28px;
  }

}

/* =========================================================
MIDNIGHT
深夜に伸びてる作品
COMPLETE CSS
========================================================= */

.midnight{

  position:relative;

  padding:160px 0;

  background:
  radial-gradient(
    circle at top,
    #2a0012 0%,
    #0a0a0a 45%,
    #000 100%
  );

  overflow:hidden;

}

/* =========================================================
BACKGROUND EFFECT
========================================================= */

.midnight::before{

  content:"";

  position:absolute;

  top:-200px;
  left:-200px;

  width:500px;
  height:500px;

  border-radius:50%;

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

  filter:blur(120px);

  pointer-events:none;

}

.midnight::after{

  content:"";

  position:absolute;

  right:-200px;
  bottom:-200px;

  width:500px;
  height:500px;

  border-radius:50%;

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

  filter:blur(120px);

  pointer-events:none;

}

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

.midnight-head{

  position:relative;

  z-index:2;

  text-align:center;

  margin-bottom:90px;

}

.midnight-head span{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  padding:12px 22px;

  border-radius:100px;

  background:
  rgba(255,51,102,.18);

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

  backdrop-filter:blur(12px);

  color:#ff88aa;

  font-size:12px;

  font-weight:bold;

  letter-spacing:.2em;

  margin-bottom:30px;

}

.midnight-head h2{

  font-size:78px;

  line-height:1.1;

  letter-spacing:-.03em;

  color:#fff;

  margin-bottom:25px;

}

.midnight-head p{

  font-size:18px;

  line-height:1.8;

  color:#999;

}

/* =========================================================
ROW
========================================================= */

.midnight-row{

  position:relative;

  z-index:2;

  display:grid;

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

  gap:40px;

  padding:
  20px 8%
  120px;

}

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

.midnight-card{

  position:relative;

  width:100%;

  min-width:0;

  border-radius:35px;

  overflow:hidden;

  text-decoration:none;

  background:
  linear-gradient(
    180deg,
    #181818 0%,
    #101010 100%
  );

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

  transition:
  transform .6s,
  box-shadow .6s;

  isolation:isolate;

}

/* =========================================================
HOVER
========================================================= */

.midnight-card:hover{

  transform:
  translateY(-12px)
  scale(1.02);

  box-shadow:
  0 40px 80px
  rgba(255,51,102,.25);

}

/* =========================================================
SHINE
========================================================= */

.midnight-card::before{

  content:"";

  position:absolute;

  top:0;
  left:-120%;

  width:60%;
  height:100%;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.15),
    transparent
  );

  transform:skewX(-25deg);

  transition:1s;

  z-index:3;

}

.midnight-card:hover::before{

  left:140%;

}

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

.midnight-image{

  position:relative;

  overflow:hidden;

}

.midnight-image img{

  width:100%;

  aspect-ratio:16/9;

  object-fit:cover;

  display:block;

  transition:
  transform 1s;

}

.midnight-card:hover img{

  transform:scale(1.08);

}

/* =========================================================
LIVE
========================================================= */

.midnight-live{

  position:absolute;

  top:20px;
  right:20px;

  z-index:5;

  display:flex;

  align-items:center;

  gap:8px;

  padding:12px 18px;

  border-radius:100px;

  background:
  rgba(0,0,0,.72);

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

  backdrop-filter:blur(12px);

  color:#ff5577;

  font-size:12px;

  font-weight:bold;

  letter-spacing:.04em;

}

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

.midnight-overlay{

  padding:32px;

}

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

.midnight-actress{

  display:inline-block;

  margin-bottom:18px;

  color:#ff7799;

  font-size:13px;

  font-weight:bold;

  letter-spacing:.12em;

  text-transform:uppercase;

}

/* =========================================================
TITLE
========================================================= */

.midnight-overlay h3{

  font-size:20px;

  line-height:1.7;

  color:#fff;

  margin-bottom:28px;

  display:-webkit-box;

  -webkit-line-clamp:2;

  -webkit-box-orient:vertical;

  overflow:hidden;

}

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

.midnight-btn{

  width:100%;

  height:58px;

  border:none;

  border-radius:18px;

  background:
  linear-gradient(
    135deg,
    #ff3366,
    #ff6699
  );

  color:#fff;

  font-size:15px;

  font-weight:bold;

  letter-spacing:.03em;

  cursor:pointer;

  transition:
  transform .4s,
  box-shadow .4s;

}

.midnight-btn:hover{

  transform:scale(1.03);

  box-shadow:
  0 15px 35px
  rgba(255,51,102,.35);

}

/* =========================================================
TABLET
========================================================= */

@media(max-width:1100px){

  .midnight-row{

    grid-template-columns:
    repeat(2,minmax(0,1fr));

  }

}

/* =========================================================
SP
========================================================= */

@media(max-width:768px){

  .midnight{

    padding:120px 0;

  }

  .midnight-head{

    margin-bottom:60px;

    padding:0 8%;

  }

  .midnight-head h2{

    font-size:42px;

  }

  .midnight-head p{

    font-size:15px;

  }

  .midnight-row{

    grid-template-columns:1fr;

    gap:30px;

    padding:
    10px 6%
    100px;

  }

  .midnight-overlay{

    padding:24px;

  }

  .midnight-overlay h3{

    font-size:18px;

  }

  .midnight-btn{

    height:54px;

    font-size:14px;

  }

}

/* =========================================================
SAVED
========================================================= */

.saved{

  padding:140px 8%;

  background:
  linear-gradient(
    180deg,
    #fff 0%,
    #fff5f7 100%
  );

}

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

.saved-head{

  text-align:center;

  margin-bottom:80px;

}

.saved-head span{

  display:inline-block;

  padding:10px 18px;

  border-radius:100px;

  background:#ff3366;

  color:#fff;

  font-size:12px;

  letter-spacing:.2em;

  margin-bottom:25px;

}

.saved-head h2{

  font-size:68px;

  line-height:1.1;

  margin-bottom:20px;

  color:#111;

}

.saved-head p{

  color:#777;

  font-size:18px;

}

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

.saved-grid{

  display:grid;

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

  gap:35px;

}

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

.saved-card{

  position:relative;

  overflow:hidden;

  border-radius:35px;

  background:#fff;

  cursor:pointer;

  transition:.6s;

  box-shadow:
  0 20px 40px
  rgba(0,0,0,.08);

}

.saved-card:hover{

  transform:
  translateY(-10px)
  scale(1.02);

  box-shadow:
  0 30px 60px
  rgba(255,51,102,.15);

}

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

.saved-image{

  overflow:hidden;

}

.saved-image img{

  width:100%;

  aspect-ratio:16/9;

  object-fit:cover;

  display:block;

  transition:1s;

}

.saved-card:hover img{

  transform:scale(1.08);

}

/* =========================================================
SAVE BADGE
========================================================= */

.saved-like{

  position:absolute;

  top:20px;
  left:20px;

  padding:10px 16px;

  border-radius:100px;

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

  backdrop-filter:blur(10px);

  color:#ff3366;

  font-size:13px;

  font-weight:bold;

  z-index:10;

}

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

.saved-content{

  padding:28px;

}

.saved-actress{

  display:inline-block;

  margin-bottom:18px;

  color:#ff3366;

  font-size:13px;

  font-weight:bold;

  letter-spacing:.08em;

}

.saved-content h3{

  font-size:20px;

  line-height:1.7;

  color:#111;

  margin-bottom:25px;

}

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

.saved-btn{

  width:100%;

  height:58px;

  border:none;

  border-radius:18px;

  background:
  linear-gradient(
    135deg,
    #ff3366,
    #ff6699
  );

  color:#fff;

  font-size:15px;

  font-weight:bold;

  cursor:pointer;

  transition:.4s;

}

.saved-btn:hover{

  transform:scale(1.03);

  box-shadow:
  0 15px 35px
  rgba(255,51,102,.25);

}

/* =========================================================
SP
========================================================= */

@media(max-width:900px){

  .saved-grid{

    grid-template-columns:1fr;

  }

  .saved-head h2{

    font-size:42px;

  }

}

/* =========================================================
DIAGNOSIS
========================================================= */

.diagnosis{

  padding:160px 8%;

  background:
  linear-gradient(
    180deg,
    #fff,
    #fff5f8
  );

  overflow:hidden;

}

.diagnosis-inner{

  display:grid;

  grid-template-columns:
  500px 1fr;

  gap:80px;

  align-items:start;

}

/* =========================================================
LEFT
========================================================= */

.diag-mini{

  display:inline-block;

  padding:12px 20px;

  border-radius:100px;

  background:#ff3366;

  color:#fff;

  font-size:12px;

  letter-spacing:.2em;

  margin-bottom:30px;

}

.diagnosis-left h2{

  font-size:72px;

  line-height:1.1;

  margin-bottom:30px;

  color:#111;

}

.diagnosis-left p{

  font-size:18px;

  line-height:1.8;

  color:#777;

  margin-bottom:50px;

}

/* =========================================================
PROGRESS
========================================================= */

.diag-progress{

  width:100%;

  height:12px;

  border-radius:100px;

  background:#eee;

  overflow:hidden;

}

.diag-bar{

  width:0%;

  height:100%;

  background:
  linear-gradient(
    90deg,
    #ff3366,
    #ff6699
  );

  border-radius:100px;

}

/* =========================================================
RIGHT
========================================================= */

.diagnosis-right{

  position:relative;

  min-height:600px;

}

/* =========================================================
STEP
========================================================= */

.diag-step{

  background:#fff;

  border-radius:40px;

  padding:60px;

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

}

.diag-step h3{

  font-size:42px;

  margin-bottom:50px;

  color:#111;

}

/* =========================================================
OPTIONS
========================================================= */

.diag-options{

  display:grid;

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

  gap:25px;

}

.diag-option{

  height:120px;

  border:none;

  border-radius:25px;

  background:#fff5f7;

  font-size:24px;

  font-weight:bold;

  cursor:pointer;

  transition:.5s;

}

.diag-option:hover{

  transform:
  translateY(-8px)
  scale(1.03);

  background:#ff3366;

  color:#fff;

  box-shadow:
  0 25px 50px
  rgba(255,51,102,.25);

}

/* =========================================================
RESULT
========================================================= */

.diag-result{

  display:none;

}

.diag-result.active{

  display:block;

}

.diag-grid{

  display:grid;

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

  gap:25px;

}

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

.diag-card{

  background:#fff;

  border-radius:30px;

  overflow:hidden;

  text-decoration:none;

  color:#111;

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

  transition:.5s;

}

.diag-card:hover{

  transform:
  translateY(-10px)
  scale(1.02);

}

.diag-card img{

  width:100%;

  aspect-ratio:16/9;

  object-fit:cover;

  display:block;

}

.diag-content{

  padding:25px;

}

.diag-content span{

  display:inline-block;

  margin-bottom:15px;

  color:#ff3366;

  font-size:12px;

  font-weight:bold;

  letter-spacing:.1em;

}

.diag-content h4{

  line-height:1.7;

  margin-bottom:20px;

}

.diag-btn{

  width:100%;

  height:52px;

  border:none;

  border-radius:16px;

  background:
  linear-gradient(
    135deg,
    #ff3366,
    #ff6699
  );

  color:#fff;

  font-weight:bold;

  cursor:pointer;

}

/* =========================================================
SP
========================================================= */

@media(max-width:1000px){

  .diagnosis-inner{

    grid-template-columns:1fr;

  }

}

@media(max-width:768px){

  .diagnosis{

    padding:120px 6%;

  }

  .diagnosis-left h2{

    font-size:42px;

  }

  .diag-options{

    grid-template-columns:1fr;

  }

  .diag-grid{

    grid-template-columns:1fr;

  }

  .diag-step{

    padding:35px;

  }

}