/* =========================================================
   美少女ゲームランキング LP - スタイル
   モバイルファースト / ピンク × ゴールド系
   ========================================================= */

:root{
  --pink-50:  #fff4f8;
  --pink-100: #ffe1ec;
  --pink-200: #ffc1d8;
  --pink-300: #ff8db4;
  --pink-500: #ff4d8d;
  --pink-600: #e6377a;
  --pink-700: #c61f63;
  --gold-300: #ffd76b;
  --gold-500: #f5b400;
  --purple-500: #8a3ab9;
  --text:      #2b1d27;
  --text-mute: #6b5763;
  --bg:        #fff7fb;
  --card-bg:   #ffffff;
  --shadow:    0 4px 14px rgba(214,40,118,0.12);
  --shadow-lg: 0 10px 30px rgba(214,40,118,0.18);
  --radius:    14px;
  --radius-lg: 22px;
}

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

html,body{ margin:0; padding:0; }
body{
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI",
               "Meiryo",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 0%, #ffe6f1 0%, transparent 40%),
    radial-gradient(circle at 90% 30%, #fff1d6 0%, transparent 35%),
    var(--bg);
  line-height:1.7;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--pink-600); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(90deg,#fff,#ffe9f3);
  border-bottom:2px solid var(--pink-200);
  box-shadow:var(--shadow);
}
.header-inner{
  max-width:980px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
}
.logo{
  display:flex; align-items:center; gap:8px;
  color:var(--pink-700); font-weight:700;
}
.logo img{ height:36px; width:auto; }
.logo-text{ font-size:15px; letter-spacing:.02em; }
.nav a{
  display:inline-block; padding:6px 14px; border-radius:999px;
  background:var(--pink-500); color:#fff; font-weight:700; font-size:13px;
}
.nav a:hover{ background:var(--pink-600); text-decoration:none; }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  text-align:center;
  padding:24px 16px 8px;
}
.hero-inner{ max-width:780px; margin:0 auto; }
.hero-title{
  margin:0 0 16px;
  font-size:clamp(20px,5.4vw,28px);
  line-height:1.4;
}
.hero-sub{
  display:block; color:var(--purple-500);
  font-size:.78em; font-weight:700; margin-bottom:4px;
}
.hero-main{
  display:block;
  background:linear-gradient(90deg,#ff5fa2,#ff8fbf,#f5b400);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  font-weight:900;
  text-shadow: 0 1px 0 #fff;
  letter-spacing:.02em;
}
.hero-banner{
  background:linear-gradient(135deg,#ff4d8d 0%,#ff8fbf 50%,#ffb86b 100%);
  color:#fff;
  border-radius:var(--radius-lg);
  padding:20px 16px;
  box-shadow:var(--shadow-lg);
  border:3px solid #fff;
  outline:3px solid var(--gold-500);
  outline-offset:-9px;
}
.hero-banner-text{
  margin:0;
  font-weight:900;
  font-size:clamp(18px,5vw,26px);
  text-shadow: 0 2px 0 rgba(0,0,0,.18);
  line-height:1.4;
}
.hero-lead{
  margin:18px 4px 0;
  color:var(--text);
  font-size:14px;
}

/* =========================================================
   Ranking - card layout
   ========================================================= */
.ranking{
  max-width:780px; margin:0 auto;
  padding:16px 14px 40px;
  display:flex; flex-direction:column; gap:36px;
}

.card{
  position:relative;
  background:var(--card-bg);
  border-radius:var(--radius-lg);
  padding:54px 16px 20px;
  box-shadow:var(--shadow-lg);
  border:2px solid var(--pink-200);
}

/* Rank badge - top-left ribbon */
.rank-badge{
  position:absolute; top:-18px; left:-6px;
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,var(--gold-500),var(--gold-300));
  color:#5a3b00;
  padding:8px 18px 8px 14px;
  border-radius:8px 22px 22px 8px;
  font-weight:900;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  border:2px solid #fff;
}
.rank-badge .crown{ font-size:18px; }
.rank-badge .num{ font-size:14px; letter-spacing:.04em; }
.rank-badge .num b{ font-size:22px; margin-left:2px; color:var(--pink-700); }

/* Highlight #1 / #2 / #3 */
#rank-1 .rank-badge{ background:linear-gradient(135deg,#ffd76b,#ffae00); }
#rank-2 .rank-badge{ background:linear-gradient(135deg,#dcdcdc,#a8a8a8); color:#333; }
#rank-2 .rank-badge .num b{ color:#333; }
#rank-3 .rank-badge{ background:linear-gradient(135deg,#e9b27a,#a8703a); color:#fff; }
#rank-3 .rank-badge .num b{ color:#fff; }

.card-title{
  margin:0 0 12px;
  font-size:clamp(18px,4.6vw,22px);
  font-weight:900;
  color:var(--pink-700);
  border-left:6px solid var(--pink-500);
  padding-left:10px;
  line-height:1.4;
}

.card-cover, .card-sub{
  margin:0 0 14px;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:2px solid var(--pink-100);
}
.card-cover img, .card-sub img{ width:100%; display:block; }
.card-cover a, .card-sub a{
  display:block;
  text-decoration:none;
  transition:opacity .15s ease, transform .15s ease;
}
.card-cover a:hover, .card-sub a:hover{
  opacity:.92;
  transform:scale(1.005);
  text-decoration:none;
}

.card-desc{
  margin:0 0 16px;
  font-size:14.5px;
  color:var(--text);
}

/* =========================================================
   CTA button
   ========================================================= */
.cta-btn{
  display:block;
  text-align:center;
  background:linear-gradient(180deg,#ff5fa2 0%,#e6377a 100%);
  color:#fff !important;
  font-weight:900;
  font-size:16px;
  padding:14px 16px;
  border-radius:999px;
  box-shadow:0 4px 0 #b81f5e, 0 8px 18px rgba(230,55,122,.35);
  border:2px solid #fff;
  outline:2px solid var(--gold-500);
  outline-offset:-6px;
  transition:transform .08s ease, box-shadow .08s ease;
  margin:6px 0 18px;
  letter-spacing:.02em;
}
.cta-btn:hover{
  text-decoration:none;
  transform:translateY(2px);
  box-shadow:0 2px 0 #b81f5e, 0 4px 10px rgba(230,55,122,.35);
}
.cta-btn-lg{
  font-size:17px;
  padding:18px 16px;
  margin-top:14px;
}

/* =========================================================
   Point / Feature boxes
   ========================================================= */
.point-box, .feature-box{
  background:var(--pink-50);
  border:2px dashed var(--pink-300);
  border-radius:var(--radius);
  padding:14px 14px 12px;
  margin:0 0 18px;
}
.point-title, .feature-title{
  margin:0 0 10px;
  font-size:15px;
  font-weight:900;
  color:var(--pink-700);
  text-align:center;
  padding-bottom:6px;
  border-bottom:2px dotted var(--pink-300);
}
.feature-box{
  background:#fff8e7;
  border-color:var(--gold-500);
}
.feature-title{
  color:#a06a00;
  border-bottom-color:var(--gold-500);
}

.point-list, .feature-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:6px;
}
.point-list li, .feature-list li{
  background:#fff;
  border-radius:8px;
  padding:8px 10px;
  font-size:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}

/* =========================================================
   Reviews
   ========================================================= */
.review-box{
  background:#fff;
  border:2px solid var(--pink-200);
  border-radius:var(--radius);
  padding:14px;
  margin:0 0 8px;
}
.review-title{
  margin:0 0 12px;
  font-size:15px;
  font-weight:900;
  color:var(--purple-500);
  text-align:center;
  padding-bottom:6px;
  border-bottom:2px dotted var(--pink-200);
}
.review{
  background:var(--pink-50);
  border-radius:10px;
  padding:10px 12px;
  margin:0 0 10px;
}
.review:last-child{ margin-bottom:0; }
.review-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:4px; flex-wrap:wrap; gap:4px;
}
.review-name{
  font-weight:700; font-size:13px; color:var(--pink-700);
}
.stars{
  font-size:13px; letter-spacing:1px;
}
.review-text{
  margin:0; font-size:13.5px; color:var(--text);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background:#2b1d27;
  color:#fff;
  text-align:center;
  padding:28px 16px;
  margin-top:30px;
}
.footer-links{
  list-style:none; padding:0; margin:0 0 12px;
  display:flex; justify-content:center; gap:18px; flex-wrap:wrap;
}
.footer-links a{
  color:#ffc1d8; font-size:13px;
}
.footer-meta{
  margin:0 0 4px; font-size:12px; color:#cba9b9;
}
.footer-copy{
  margin:0; font-size:11px; color:#9b7d8a;
}

/* =========================================================
   Back to top
   ========================================================= */
.back-to-top{
  position:fixed; bottom:18px; right:14px;
  width:42px; height:42px; border-radius:50%;
  background:var(--pink-500); color:#fff !important;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg);
  font-size:14px; font-weight:700;
  z-index:40;
}
.back-to-top:hover{ background:var(--pink-600); text-decoration:none; }

/* =========================================================
   下層ページ（特商法 / 問い合わせ）
   ========================================================= */
.page{
  max-width:880px; margin:0 auto;
  padding:24px 14px 60px;
}
.page-inner{
  background:var(--card-bg);
  border-radius:var(--radius-lg);
  border:2px solid var(--pink-200);
  box-shadow:var(--shadow-lg);
  padding:24px 18px;
}
.page-title{
  margin:0 0 14px;
  font-size:clamp(20px,5vw,26px);
  font-weight:900;
  color:var(--pink-700);
  text-align:center;
  padding-bottom:12px;
  border-bottom:3px double var(--pink-300);
}
.page-lead{
  margin:0 0 20px;
  font-size:14.5px;
  color:var(--text);
}
.page-note{
  margin:18px 0 0;
  text-align:right;
  color:var(--text-mute);
  font-size:12.5px;
}
.page-back{
  margin-top:24px;
  text-align:center;
}
.page-back .cta-btn{
  display:inline-block;
  min-width:240px;
}

/* 特商法テーブル */
.info-table{
  width:100%;
  border-collapse:collapse;
  margin:0;
  font-size:14px;
  background:#fff;
  border:1px solid var(--pink-200);
  border-radius:10px;
  overflow:hidden;
}
.info-table th,
.info-table td{
  padding:12px 14px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--pink-100);
  line-height:1.7;
}
.info-table tr:last-child th,
.info-table tr:last-child td{ border-bottom:none; }
.info-table th{
  background:var(--pink-50);
  color:var(--pink-700);
  font-weight:700;
  width:34%;
  white-space:nowrap;
}
@media (max-width:560px){
  .info-table, .info-table tbody, .info-table tr, .info-table th, .info-table td{
    display:block; width:auto; white-space:normal;
  }
  .info-table th{
    border-bottom:none;
    padding-bottom:6px;
  }
  .info-table td{
    padding-top:0;
    padding-bottom:14px;
    border-bottom:1px dashed var(--pink-200);
  }
  .info-table tr:last-child td{ border-bottom:none; }
}

/* お問い合わせフォーム */
.contact-form{
  display:flex; flex-direction:column; gap:16px;
}
.form-row{
  display:flex; flex-direction:column; gap:6px;
}
.form-row label{
  font-weight:700; font-size:14px;
  color:var(--pink-700);
}
.form-row .required{
  display:inline-block;
  background:var(--pink-500); color:#fff;
  font-size:11px; font-weight:700;
  padding:2px 8px; border-radius:999px;
  margin-left:6px;
  vertical-align:middle;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row select,
.form-row textarea{
  width:100%;
  padding:11px 12px;
  font-size:15px;
  border:2px solid var(--pink-200);
  border-radius:10px;
  background:#fff;
  font-family:inherit;
  color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline:none;
  border-color:var(--pink-500);
  box-shadow:0 0 0 3px rgba(255,77,141,.15);
}
.form-row textarea{ resize:vertical; min-height:140px; }

.form-check label{
  display:flex; align-items:flex-start; gap:8px;
  font-weight:400; color:var(--text); font-size:14px;
  line-height:1.6;
}
.form-check input[type="checkbox"]{
  margin-top:4px;
  width:18px; height:18px;
  accent-color:var(--pink-500);
}
.form-submit{
  margin-top:6px;
  text-align:center;
}
.form-submit .cta-btn{
  display:inline-block;
  min-width:260px;
  border:2px solid #fff;
  font-family:inherit;
  cursor:pointer;
}

.contact-info{
  margin-top:30px;
  padding:18px 16px;
  background:var(--pink-50);
  border:2px dashed var(--pink-300);
  border-radius:var(--radius);
}
.contact-info-title{
  margin:0 0 8px;
  font-size:15px;
  font-weight:900;
  color:var(--pink-700);
}
.contact-info p{
  margin:0 0 8px;
  font-size:14px;
}
.contact-info a{
  font-weight:700;
}
.contact-note{
  font-size:12.5px;
  color:var(--text-mute);
}

/* =========================================================
   Tablet & up
   ========================================================= */
@media (min-width:640px){
  body{ font-size:16px; }
  .card{ padding:60px 24px 26px; }
  .point-list li, .feature-list li{ font-size:14.5px; }
  .hero{ padding-top:32px; }
}

@media (min-width:900px){
  .ranking{ padding:24px 16px 60px; gap:48px; }
  .card-title{ font-size:24px; }
  .cta-btn{ font-size:18px; }
  .cta-btn-lg{ font-size:19px; padding:20px 16px; }
}