@charset "UTF-8";

/* =========================================================
   Gaming Chair LP - Premium Editorial Refresh v3
   Concept: Magazine-style hierarchy, navy/coral palette,
            generous whitespace, refined typography
   ========================================================= */

:root{
  /* Surfaces */
  --bg:#f6f7fb;
  --bg-soft:#fafbfd;
  --bg-section:#ffffff;

  /* Brand navy */
  --primary:#0a1f4a;
  --primary-mid:#13316d;
  --primary-light:#3257a3;
  --primary-dark:#04102f;

  /* Text */
  --text:#0e1117;
  --text-body:#2b2f3a;
  --text-sub:#5a6071;
  --text-mute:#8b909e;

  /* Accent (CTA) */
  --accent:#e63946;
  --accent-light:#ff5566;
  --accent-dark:#a8202c;
  --accent-soft:#fde6e9;

  /* Gold (premium / No.1) */
  --gold:#b8842a;
  --gold-light:#d6a847;
  --gold-soft:#f1dfa7;
  --gold-pale:#fbf5e2;

  /* Helpers */
  --line:#e6e8ef;
  --line-soft:#f0f2f6;
  --highlight:#fff39c;

  /* Shadows */
  --shadow-xs:0 1px 2px rgba(10,31,74,.05);
  --shadow-sm:0 2px 8px rgba(10,31,74,.06);
  --shadow-md:0 8px 24px rgba(10,31,74,.08);
  --shadow-lg:0 22px 56px rgba(10,31,74,.14);
  --shadow-deep:0 30px 70px rgba(0,0,0,.30);
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}

body{
  font-family:'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif !important;
  color:var(--text-body);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  background-color:var(--bg);
  font-feature-settings:"palt";
  line-height:1.78;
  letter-spacing:.01em;
}

main{
  background:var(--bg);
  padding:0 0 96px;
  overflow:hidden;
}

/* --- inline text helpers --- */
.aka{
  color:var(--accent-dark);
  font-weight:700;
}
.ki{
  font-weight:700;
  background:linear-gradient(transparent 62%, var(--highlight) 62%);
  padding:0 2px;
}
.bo{font-weight:700;}

p{
  width:100%;
  margin:14px auto;
  color:var(--text-body);
  font-size:15.5px;
  line-height:1.95;
  font-family:inherit;
  letter-spacing:.012em;
}

.osusume{
  text-align:center;
  font-size:24px;
  margin:0;
  color:var(--primary);
  font-weight:800 !important;
}

/* =========================================================
   HEADINGS
   ========================================================= */
h1{
  text-align:center;
  color:var(--primary);
  font-size:24px;
  letter-spacing:.02em;
  padding:18px 0 18px;
  margin:0 0 12px;
  font-weight:800;
}
h1::after{
  content:"";
  display:block;
  width:36px;
  height:2px;
  background:var(--accent);
  margin:14px auto 0;
  border-radius:2px;
}

h2{
  font-size:22px;
  color:var(--primary);
  background:transparent;
  padding:32px 0 0;
  margin:36px 0 22px;
  line-height:1.45;
  letter-spacing:.02em;
  font-weight:800;
  box-shadow:none;
  border-radius:0;
  border-bottom:none;
  position:relative;
  text-align:left;
}
h2::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:48px;
  height:3px;
  background:var(--accent);
  border-radius:2px;
  transform:none;
}
h2::after{display:none;}

h3{
  padding:12px 0 12px 18px;
  background:transparent;
  border-left:3px solid var(--primary);
  border-bottom:none;
  font-size:18px;
  color:var(--primary);
  font-weight:800;
  margin:28px 0 16px;
  border-radius:0;
  box-shadow:none;
  line-height:1.55;
  letter-spacing:.01em;
}

h4{
  font-weight:700;
  font-size:16px;
  color:var(--primary);
  padding:8px 0 10px;
  margin:22px 0 12px;
  border-bottom:1px solid var(--line);
  letter-spacing:.01em;
}

/* =========================================================
   SECTION CONTAINER
   ========================================================= */
section{
  width:96%;
  max-width:780px;
  background:var(--bg-section);
  margin:14px auto 0;
  padding:26px 22px;
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line-soft);
}

/* =========================================================
   HERO BLOCK
   ========================================================= */
.hero-catch{
  width:100%;
  max-width:780px;
  margin:0 auto 14px;
  text-align:center;
  padding:50px 24px 44px;
  background:
    radial-gradient(1100px 380px at 50% -60%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(160deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-mid) 100%);
  border-radius:18px;
  color:#fff;
  position:relative;
  box-shadow:var(--shadow-lg);
  border:none;
  overflow:hidden;
  isolation:isolate;
}
.hero-catch::before,
.hero-catch::after{display:none;}

/* decorative diagonal stripe */
.hero-catch{
  background:
    linear-gradient(160deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-mid) 100%);
}

.copy-tag{
  display:inline-block;
  background:transparent;
  color:var(--gold-light);
  font-weight:800;
  font-size:11px;
  padding:0 0 6px;
  border-bottom:1px solid var(--gold-light);
  letter-spacing:.28em;
  margin:0 auto 20px;
  border-radius:0;
  box-shadow:none;
  text-transform:uppercase;
}

.copy-headline{
  font-size:30px;
  font-weight:900;
  line-height:1.42;
  margin:0 auto 16px !important;
  color:#fff;
  letter-spacing:.015em;
  padding:0;
  text-shadow:0 2px 12px rgba(0,0,0,.25);
}
.copy-headline::after{display:none;}
.copy-strong{
  display:inline;
  background:linear-gradient(transparent 66%, rgba(230,57,70,.85) 66%, rgba(230,57,70,.85) 96%, transparent 96%);
  padding:0 4px;
  color:#fff;
}
.copy-num{
  display:inline-block;
  color:var(--gold-light);
  font-size:1.55em;
  font-weight:900;
  padding:0 4px;
  text-shadow:0 0 22px rgba(214,168,71,.55);
  letter-spacing:-.02em;
  line-height:1;
}

.copy-sub{
  color:rgba(255,255,255,.74) !important;
  font-size:13.5px !important;
  margin:0 auto 28px !important;
  line-height:1.85 !important;
  width:auto !important;
  font-weight:500;
  letter-spacing:.03em;
}

/* Hero stats */
.evidence-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  margin-top:0;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.16);
  max-width:480px;
  margin-left:auto;
  margin-right:auto;
}
.stat-item{
  text-align:center;
  padding:0 8px;
  position:relative;
}
.stat-item + .stat-item::before{
  content:"";
  position:absolute;
  left:0;
  top:14%;
  bottom:14%;
  width:1px;
  background:rgba(255,255,255,.16);
}
.stat-num{
  font-size:30px;
  font-weight:900;
  color:#fff;
  line-height:1;
  margin-bottom:8px;
  letter-spacing:-.01em;
  font-family:inherit;
}
.stat-num small{
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,.7);
  margin-left:2px;
}
.stat-label{
  font-size:10.5px;
  color:rgba(255,255,255,.65);
  letter-spacing:.16em;
  font-weight:700;
  text-transform:uppercase;
}

/* =========================================================
   CATCH SECTION (GIF only - hero/banner hidden)
   ========================================================= */
/* Hide hero copy block and campaign banner; GIF stands alone at top */
.hero-catch{display:none !important;}
.campaign-banner{display:none !important;}

.catch{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:0 auto 14px;
  width:100%;
  max-width:780px;
  padding:0 0 8px;
  background:transparent;
  box-shadow:none;
  border-radius:0;
}
/* Restore GIF via CSS (HTML no longer contains the img tag) */
.catch::before{
  content:"";
  display:block;
  width:96%;
  max-width:720px;
  aspect-ratio: 1280 / 720;
  background:#000 url("../img/sitetop.gif") center/cover no-repeat;
  border-radius:12px;
  box-shadow:var(--shadow-md);
  margin:0 auto 10px;
}
.catch img{display:none;}

/* =========================================================
   CAMPAIGN BANNER (auto-updated via lp-updater)
   ========================================================= */
.campaign-banner{
  width:96%;
  max-width:720px;
  margin:6px auto 14px;
  padding:22px 22px 20px;
  background:
    linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%);
  color:#fff;
  border-radius:14px;
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-md);
  isolation:isolate;
}
.campaign-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 14px,
      rgba(255,255,255,.06) 14px 16px
    );
  z-index:-1;
  pointer-events:none;
}
.campaign-banner::after{
  content:"";
  position:absolute;
  right:-40px; top:-40px;
  width:160px; height:160px;
  background:radial-gradient(circle, rgba(255,255,255,.18) 0%, transparent 60%);
  pointer-events:none;
  z-index:-1;
}

.campaign-tag{
  display:inline-block;
  font-size:10px;
  font-weight:800;
  letter-spacing:.28em;
  padding:3px 12px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:30px;
  margin-bottom:14px;
  color:#fff;
  text-transform:uppercase;
}

.campaign-name{
  font-size:22px;
  font-weight:900;
  letter-spacing:.02em;
  margin-bottom:18px;
  line-height:1.4;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.18);
}

.campaign-deadline{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  background:rgba(255,255,255,.94);
  padding:10px 24px;
  border-radius:10px;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.campaign-deadline-num{
  display:block;
  font-size:26px;
  font-weight:900;
  color:var(--accent-dark);
  line-height:1.1;
  letter-spacing:.02em;
}
.campaign-deadline-sub{
  display:block;
  font-size:10.5px;
  font-weight:700;
  color:var(--text-sub);
  letter-spacing:.22em;
  margin-top:4px;
}

/* =========================================================
   EVIDENCE ROW (trust badges)
   ========================================================= */
.evidence-row{
  width:100%;
  max-width:780px;
  margin:8px auto 22px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
  padding:0;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  border:none;
}
.badge-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px 8px 16px;
  text-align:center;
  box-shadow:var(--shadow-xs);
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  min-height:110px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.badge-item:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}
.badge-item::before{
  content:"";
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  width:30px;
  height:1px;
  background:var(--gold);
}
.badge-num{
  font-size:10px;
  font-weight:800;
  color:var(--gold);
  letter-spacing:.22em;
  margin:14px 0 8px;
  font-family:inherit;
  text-transform:uppercase;
}
.badge-label{
  font-size:12.5px;
  font-weight:700;
  color:var(--primary);
  line-height:1.55;
  letter-spacing:.015em;
}

/* =========================================================
   COMPARE TABLE
   ========================================================= */
.hikaku{
  width:100%;
  max-width:780px;
  margin:0 auto;
}
#chairhikaku{margin:0 0 22px; padding-top:0;}

.hikakuhyou{
  width:100%;
  margin:0 auto 10px;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow-md);
  border:1px solid var(--line);
}
.hikakuhyou th{
  width:25%;
  text-align:center;
  font-weight:700;
  padding:14px 6px;
  background:var(--primary) !important;
  color:#fff !important;
  border:none;
  font-size:13px;
}
.hikakuhyou th:first-child{
  background:var(--primary-dark) !important;
  font-size:12px;
  letter-spacing:.02em;
}
.hikakuhyou td{
  width:25%;
  text-align:center;
  font-weight:500;
  padding:12px 6px;
  background:#fff !important;
  border:1px solid var(--line-soft);
  color:var(--text-body);
  font-size:13px;
  vertical-align:middle;
  line-height:1.55;
}
.hikakuhyou tr td:first-child{
  background:#f5f7fb !important;
  color:var(--primary);
  font-weight:700;
  font-size:12px;
  letter-spacing:.02em;
}
/* Highlight #1 column */
.hikakuhyou tr td:nth-child(2),
.hikakuhyou tr th:nth-child(2){
  background:var(--gold-pale) !important;
  border-left:2px solid var(--gold);
  border-right:2px solid var(--gold);
  position:relative;
}
.hikakuhyou tr:first-child th:nth-child(2){
  background:var(--gold) !important;
  border-top:2px solid var(--gold);
  color:#fff !important;
}
.hikakuhyou tr:last-child td:nth-child(2){
  border-bottom:2px solid var(--gold);
}
.hikakuhyou td img{
  width:80%;
  max-width:110px;
  border-radius:4px;
}
.hikakuhyou .chair{width:48%; max-width:60px;}
.kiiro{background:var(--gold) !important; color:#fff !important;}
.chair{width:20%;}
.syousaibtn img{
  width:88% !important;
  max-width:110px;
  border-radius:6px;
  transition:transform .2s ease;
}
.syousaibtn img:hover{transform:translateY(-2px);}
.ki.aka{
  display:inline-block;
  background:transparent;
  color:var(--accent-dark) !important;
  padding:0;
  border-radius:0;
  font-size:11px;
  line-height:1.5;
  font-weight:700;
}

/* =========================================================
   INTRO PARAGRAPH
   ========================================================= */
.first{
  width:96%;
  max-width:720px;
  font-size:15.5px;
  line-height:1.95;
  margin:18px auto;
  color:var(--text-body);
}

/* =========================================================
   WHAT YOU LEARN BOX
   ========================================================= */
.wakarukoto{
  width:96%;
  max-width:720px;
  background:var(--primary);
  margin:30px auto 32px;
  padding:30px 26px 26px;
  border:none;
  border-radius:14px;
  position:relative;
  box-shadow:var(--shadow-md);
  color:#fff;
}
.wakarukoto::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:60px;
  height:4px;
  background:var(--gold);
  border-radius:0 0 4px 4px;
  padding:0;
  font-size:0;
}
.memomidasi{
  color:#fff;
  font-size:17px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  letter-spacing:.04em;
}
.memomidasi img{
  width:20px;
  height:20px;
  filter:brightness(0) invert(1) opacity(.85);
}
.nani{
  list-style:none;
  padding-left:0;
  margin:14px 0 0;
}
.nani li{
  margin-top:10px;
  font-size:14.5px;
  font-weight:600;
  color:rgba(255,255,255,.92);
  list-style:none;
  padding-left:26px;
  position:relative;
  line-height:1.75;
}
.nani li:not(:first-child)::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:14px;
  height:14px;
  background:var(--gold-light);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") no-repeat center / contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") no-repeat center / contain;
}
.nani li:first-child{
  padding-left:0;
  border-bottom:1px solid rgba(255,255,255,.18);
  padding-bottom:14px;
  margin-bottom:6px;
  text-align:center;
}
.nani li:first-child::before{display:none;}

/* =========================================================
   HOW TO CHOOSE (article body)
   ========================================================= */
.erabikata{width:96%; max-width:780px; margin:0 auto;}
.erabikatayouso{width:100%; margin:0 auto;}
.erabikataimg img{
  width:100%;
  display:block;
  margin:0 auto;
  border-radius:10px;
}
.me-ka- img{
  width:100%;
  border-radius:10px;
}
.me-ka-{margin:16px 0 22px;}

/* =========================================================
   RANKING INTRO (before #1)
   ========================================================= */
.ranking-intro{
  text-align:center;
  margin:36px auto 22px;
  padding:34px 22px 28px;
  width:96%;
  max-width:780px;
  background:#fff;
  border-radius:16px;
  border:1px solid var(--line);
  position:relative;
  box-shadow:var(--shadow-md);
  overflow:hidden;
}
.ranking-intro::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
}
.intro-tag{
  display:inline-block;
  background:transparent;
  color:var(--gold);
  border:none;
  padding:0 0 6px;
  font-size:10.5px;
  font-weight:800;
  border-radius:0;
  letter-spacing:.26em;
  margin-bottom:18px;
  box-shadow:none;
  border-bottom:1px solid var(--gold);
  text-transform:uppercase;
}
.intro-copy{
  font-size:26px;
  font-weight:900;
  color:var(--primary);
  line-height:1.5;
  margin:0;
  letter-spacing:.01em;
  padding:0;
  background:none !important;
  box-shadow:none !important;
  border:none;
  border-radius:0;
}
.intro-copy::before,
.intro-copy::after{display:none;}
.intro-copy strong{
  background:linear-gradient(transparent 64%, var(--gold-soft) 64%, var(--gold-soft) 94%, transparent 94%);
  color:var(--primary);
  padding:0 6px;
  font-weight:900;
}
.intro-arrow{
  display:inline-block;
  font-size:20px;
  color:var(--gold);
  margin-top:16px;
  animation:arrow-down 1.8s ease-in-out infinite;
  line-height:1;
  font-weight:700;
}
@keyframes arrow-down{
  0%, 100%{transform:translateY(0); opacity:.7;}
  50%{transform:translateY(6px); opacity:1;}
}

/* =========================================================
   RANKING CARDS (syoukai)
   ========================================================= */
.syoukai{
  background:#fff;
  margin:24px auto;
  padding:26px 20px 24px;
  width:96%;
  max-width:780px;
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
}
.syoukai:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

/* Top 3 special */
.syoukai[id="1"],
.syoukai[id="2"],
.syoukai[id="3"]{
  padding-top:36px;
  margin-top:42px;
}
.syoukai[id="1"]{
  border:1px solid var(--gold);
  box-shadow:var(--shadow-md), 0 0 0 1px rgba(184,132,42,.18) inset;
  background:linear-gradient(180deg, #fdf8e9 0%, #fff 22%);
}
.syoukai[id="1"]::before{
  content:"No.1 BEST CHOICE";
  position:absolute;
  top:-16px;
  left:24px;
  background:var(--gold);
  color:#fff;
  padding:8px 18px;
  border-radius:4px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  box-shadow:0 6px 14px rgba(184,132,42,.36);
}
.syoukai[id="2"]{
  border:1px solid #c4c8d0;
  background:linear-gradient(180deg, #f6f7fa 0%, #fff 20%);
}
.syoukai[id="2"]::before{
  content:"No.2";
  position:absolute;
  top:-16px;
  left:24px;
  background:#7a808c;
  color:#fff;
  padding:8px 18px;
  border-radius:4px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  box-shadow:0 6px 14px rgba(122,128,140,.32);
}
.syoukai[id="3"]{
  border:1px solid #d4a677;
  background:linear-gradient(180deg, #fbf2e7 0%, #fff 20%);
}
.syoukai[id="3"]::before{
  content:"No.3";
  position:absolute;
  top:-16px;
  left:24px;
  background:#a06a30;
  color:#fff;
  padding:8px 18px;
  border-radius:4px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  box-shadow:0 6px 14px rgba(160,106,48,.32);
}

.syoukai h3{
  background:transparent;
  border-left:3px solid var(--primary);
  font-size:18px;
  color:var(--primary);
  padding:6px 14px;
  margin:0 0 16px;
  box-shadow:none;
  border-bottom:none;
  border-radius:0;
  line-height:1.5;
}
.syoukai[id="1"] h3{border-left-color:var(--gold);}
.syoukai[id="2"] h3{border-left-color:#7a808c;}
.syoukai[id="3"] h3{border-left-color:#a06a30;}

.syouhin{
  text-align:center;
  background:var(--bg-soft);
  padding:20px;
  border-radius:10px;
  margin:12px 0 18px;
  border:1px solid var(--line-soft);
}
.syouhin img{
  width:65%;
  max-width:300px;
  display:block;
  margin:0 auto;
  border-radius:6px;
}

/* =========================================================
   DATA TABLE (deta)
   ========================================================= */
.deta{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:12px 0 20px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
}
.deta tr:nth-child(even) td{background:#fafbfd;}
.deta td{
  padding:13px 16px;
  border:none;
  border-bottom:1px solid var(--line-soft);
  vertical-align:middle;
  line-height:1.55;
}
.deta tr:last-child td{border-bottom:none;}
.td1{
  width:40%;
  font-size:12.5px;
  color:var(--primary);
  font-weight:700;
  background:#f1f4f9 !important;
  border-right:1px solid var(--line) !important;
  letter-spacing:.02em;
}
.td2{
  width:60%;
  font-size:14px;
  color:var(--text);
  font-weight:600;
}
.deta tr:first-child .td2 .aka{
  font-size:18px;
  font-weight:900;
  color:var(--accent-dark);
}
.btext{text-align:center;}

/* =========================================================
   CTA BUTTONS
   ========================================================= */
.btn{
  display:block;
  margin:20px auto;
  width:94%;
  max-width:440px;
  padding:1.05em 1.3em;
  background:linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%);
  box-shadow:0 6px 18px rgba(230,57,70,.32), 0 1px 0 rgba(255,255,255,.5) inset;
  border-radius:60px;
  color:#fff !important;
  cursor:pointer;
  text-decoration:none;
  font-size:17px;
  font-weight:800;
  text-align:center;
  letter-spacing:.06em;
  transition:transform .2s ease, box-shadow .2s ease;
  border:none;
  position:relative;
  animation:cta-pulse 2.6s ease-in-out infinite;
}
@keyframes cta-pulse{
  0%, 100%{transform:scale(1);}
  50%{transform:scale(1.018);}
}
.btn:hover{
  animation:none;
  transform:translateY(2px);
  box-shadow:0 3px 10px rgba(230,57,70,.32);
}

.shine{
  position:relative;
  overflow:hidden;
  border:none;
}
.shine::before{
  content:"";
  animation:shine 3.5s cubic-bezier(.25,0,.25,1) infinite;
  background-color:#fff;
  width:80px;
  height:200%;
  transform:skewX(-25deg);
  top:-50%;
  left:-30%;
  opacity:.25;
  position:absolute;
  pointer-events:none;
}
@keyframes shine{
  0%{left:-30%; opacity:0;}
  50%{left:-30%; opacity:0;}
  55%{left:-30%; opacity:.32;}
  100%{left:130%; opacity:0;}
}

.btn_arrow{
  display:block;
  position:relative;
  padding:1.05em 2.4em 1.05em 1.2em;
  min-width:14em;
  font-weight:800;
  text-align:center;
  text-decoration:none;
  box-sizing:border-box;
}
.btn_arrow::after{
  position:absolute;
  top:50%;
  right:1.2em;
  width:.55em;
  height:.55em;
  transform:translateY(-50%) rotate(45deg);
  border-right:2.5px solid currentColor;
  border-top:2.5px solid currentColor;
  content:"";
  transition:right .3s ease;
}
.btn_arrow:hover::after{right:.9em;}

/* Back modal CTA */
.backbtn{
  display:block;
  margin:10px auto;
  width:94%;
  padding:1em 1em;
  background:linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 60%, var(--accent-dark) 100%);
  box-shadow:0 5px 14px rgba(230,57,70,.32);
  border-radius:50px;
  color:#fff;
  cursor:pointer;
  text-decoration:none;
  font-size:17px;
  font-weight:800;
  text-align:center;
}
.backbtn_arrow{
  display:block;
  position:relative;
  padding:1em 2.4em;
  min-width:14em;
  font-weight:800;
  text-align:center;
  text-decoration:none;
  box-sizing:border-box;
}
.backbtn_arrow::after{
  position:absolute;
  top:50%; right:1.2em;
  width:.5em; height:.5em;
  transform:translateY(-50%) rotate(45deg);
  border-right:2.5px solid currentColor;
  border-top:2.5px solid currentColor;
  content:"";
}
.backbtn:hover{
  box-shadow:none;
  transform:translateY(2px);
}
.backimg{display:block; margin:0 auto;}

/* SALE marker before .btn */
.off{
  text-align:center;
  margin:22px auto 8px !important;
  font-size:14.5px;
  font-weight:800 !important;
  color:#fff;
  background:var(--accent-dark);
  padding:9px 16px 10px;
  border-radius:6px 6px 0 0;
  width:94%;
  max-width:440px;
  letter-spacing:.06em;
  position:relative;
}
.off::after{
  content:"";
  position:absolute;
  bottom:-9px;
  left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-top:9px solid var(--accent-dark);
}

/* Twitter quotes */
.twitter-tweet{margin:18px auto !important;}

/* Ranking paragraph */
.syoukai p{
  background:transparent;
  padding:0;
  border:none;
  font-size:15px;
  line-height:1.95;
  color:var(--text-body);
  margin:14px auto;
}
.syoukai p.off{
  background:var(--accent-dark);
  border:none;
  color:#fff;
}

/* =========================================================
   STICKY BOTTOM CTA
   ========================================================= */
.sticky-cta{
  position:fixed;
  bottom:14px;
  left:50%;
  width:94%;
  max-width:460px;
  background:linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%);
  color:#fff !important;
  text-align:center;
  padding:14px 20px;
  border-radius:60px;
  font-weight:800;
  font-size:16px;
  text-decoration:none;
  z-index:9000;
  box-shadow:0 10px 30px rgba(230,57,70,.45), 0 0 0 4px rgba(255,255,255,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  letter-spacing:.04em;
  transform:translateX(-50%);
  animation:cta-bounce 2.4s ease-in-out infinite;
}
@keyframes cta-bounce{
  0%, 100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(-3px);}
}
.sticky-cta-arrow{
  display:inline-block;
  font-size:12px;
  animation:arrow-h-slide 1.2s ease-in-out infinite;
}
@keyframes arrow-h-slide{
  0%, 100%{transform:translateX(0);}
  50%{transform:translateX(4px);}
}
#pop-up:checked ~ .sticky-cta{display:none;}

/* =========================================================
   FILTER OPEN BUTTON
   ========================================================= */
.open{
  cursor:pointer;
  background:#fff;
  border:1.5px solid var(--primary);
  border-radius:30px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:18px auto 0;
  max-width:320px;
  padding:13px 26px;
  color:var(--primary);
  transition:.25s ease;
  font-weight:700;
  font-size:14.5px;
  letter-spacing:.08em;
  box-shadow:var(--shadow-xs);
}
.open::before{
  content:"";
  display:inline-block;
  width:15px;
  height:15px;
  margin-right:10px;
  background:var(--primary);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 14h-.8l-.3-.3c1-1.1 1.6-2.6 1.6-4.2C16 5.9 13.1 3 9.5 3S3 5.9 3 9.5 5.9 16 9.5 16c1.6 0 3.1-.6 4.2-1.6l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14z'/></svg>") no-repeat center / contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 14h-.8l-.3-.3c1-1.1 1.6-2.6 1.6-4.2C16 5.9 13.1 3 9.5 3S3 5.9 3 9.5 5.9 16 9.5 16c1.6 0 3.1-.6 4.2-1.6l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14z'/></svg>") no-repeat center / contain;
}
.open:hover{
  background:var(--primary);
  color:#fff;
}
.open:hover::before{background:#fff;}

#pop-up{display:none;}
.overlay{display:none;}
#pop-up:checked + .overlay{
  display:block;
  position:fixed;
  width:100%;
  height:100vh;
  top:0;
  left:0;
  z-index:9999;
  background:rgba(10,31,74,.78);
  backdrop-filter:blur(2px);
}

.close{
  position:absolute;
  top:6px;
  right:6px;
  cursor:pointer;
  background:#fff;
  border-radius:30px;
  display:flex;
  justify-content:space-around;
  align-items:center;
  margin:10px auto;
  max-width:280px;
  padding:8px 22px;
  color:var(--primary);
  border:1px solid var(--primary);
  transition:.25s ease;
  font-weight:700;
  font-size:13px;
}
.close:hover{
  background:var(--primary);
  color:#fff;
}

.check{
  position:fixed;
  top:50%;
  left:50%;
  width:95%;
  padding:20px;
  background:#fff;
  border-radius:14px;
  align-items:center;
  transform:translate(-50%, -50%);
  overflow-y:auto;
  max-height:90%;
  height:90vh;
  box-shadow:var(--shadow-deep);
}
.check div{font-weight:600; font-size:15px;}
input{display:none;}

/* =========================================================
   FILTER UI
   ========================================================= */
.kodawari{
  background:transparent;
  border-radius:8px;
  width:calc(100% - 200px) !important;
  padding:14px 20px 0;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
}
.kodawari .bl_selectBlock_check{
  justify-content:left;
  width:40%;
  height:auto !important;
}
.kodawari .bl_selectBlock_check input[type=checkbox]:checked + label{box-shadow:none;}
.kodawari input{display:inline;}
.kodawari input[type=checkbox] + label{
  background:transparent !important;
  width:100% !important;
  font-size:1em !important;
  margin-left:0 !important;
  place-items:center start !important;
}
.bl_3daysSearchBlock{margin-bottom:60px;}
.bl_3daysSearchBlock_inner{width:96%; max-width:1160px; margin:0 auto;}
.bl_3daysSearchBlock_ttl{text-align:center; margin:40px 0;}
.bl_3daysSearchBlock_ttl_main{
  font-size:22px;
  color:var(--gold);
  margin-bottom:12px;
  font-weight:800;
  letter-spacing:.15em;
}
.bl_3daysSearchBlock_ttl_sub{
  font-size:14px;
  color:var(--gold);
  letter-spacing:.2em;
}
.el_searchResult{
  text-align:center;
  color:var(--primary);
  margin-bottom:18px;
  font-size:14px;
  font-weight:700;
}
.el_searchResult_nume{
  font-size:34px;
  color:var(--accent);
  font-weight:900;
  padding:0 6px;
}
.js_target{display:none;}
.js_target.js_selected{
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  background:#fff;
  margin-top:12px;
  box-shadow:var(--shadow-sm);
  border-radius:10px;
  border:1px solid var(--line);
  overflow:hidden;
}
.bl_selectBlock{
  padding:20px 16px;
  margin-bottom:18px;
  font-size:14px;
  letter-spacing:.06em;
  background:var(--bg-soft);
  border-radius:10px;
}
.bl_selectBlock label{display:inline;}
.bl_selectBlock_check label .el_checkbox{display:none;}
.bl_selectBlock_check label .el_checkbox:after{
  content:""; position:absolute; top:4px; left:4px; bottom:4px; right:4px;
}
.bl_selectBlock_check input[type=checkbox] + label{
  font-size:1em;
  display:grid;
  float:left;
  width:100%;
  place-items:center;
  line-height:40px;
  padding:0 6px;
  cursor:pointer;
  color:var(--text);
  border-radius:8px;
  background:#fff;
  border:1px solid var(--line);
  font-weight:600;
}
.bl_selectBlock_check input[type=checkbox]:checked + label{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  box-shadow:none;
}
.bl_selectBlock_wrapper_wrapper{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.bl_selectBlock_check label{cursor:pointer;}
.bl_selectBlock_ttl{
  width:15%;
  background:var(--primary);
  color:#fff;
  letter-spacing:.06em;
  margin-bottom:5px;
  display:grid;
  place-items:center;
  border-radius:6px;
  height:40px;
  font-weight:700;
  font-size:13px;
}
@media screen and (max-width:765px){
  .bl_selectBlock_ttl{width:100%; margin-bottom:14px;}
  .bl_selectBlock_content{width:100%;}
}
.bl_selectBlock_content{
  width:calc(100% - 185px);
  display:flex;
  justify-content:space-between;
}
.del{text-decoration:line-through; color:#aaa;}
.bl_searchResultBlock{font-size:14px; border-top:1px solid var(--line); width:70%;}
.bl_selectBlock_check{
  display:flex;
  justify-content:space-between;
  margin-bottom:6px;
  width:100%;
}
.bl_selectBlock_check:last-child{margin-right:0;}
.bl_selectBlock_release{
  color:#fff;
  width:80%;
  display:grid;
  margin:0 auto;
  font-size:22px !important;
  background:var(--gold);
  border-radius:8px;
  height:54px;
  place-items:center;
}
.js_release{cursor:pointer; margin-top:36px;}
.kekkaimg{width:10%;}
.kekkaimg img{width:100%; border-radius:6px;}
.migi{position:relative; right:0;}
.match{
  display:flex;
  flex-direction:row;
  margin-bottom:5px;
  padding:12px 10px;
  justify-content:space-around;
  align-items:center;
  position:relative;
}
.kekkasyouhin{
  font-size:16px;
  color:var(--primary);
  font-weight:700;
  line-height:1.4;
}
.kekkasyousai{display:flex; flex-direction:column;}
.kuwasiku{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  margin-top:8px;
}
.kekkacontent{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-right:5px;
  text-align:center;
  font-size:12px;
}
.kekkacontent p{margin:0;}
.sale{
  width:100%;
  background:var(--accent);
  margin-bottom:0 !important;
  padding:7px 10px;
}
.sale p{
  margin:0 !important;
  font-weight:700 !important;
  color:#fff;
  font-size:13px;
}
.sale .aka{
  color:#fff !important;
  background:rgba(0,0,0,.18);
  padding:2px 6px;
  border-radius:3px;
  font-size:12px;
  margin-right:4px;
}
.botan{width:30%; height:fit-content;}
.botan img{width:100%; border-radius:6px;}
.hosyou input[type=checkbox] + label{
  align-items:baseline !important;
  text-align:center !important;
}
#pr{
  display:block;
  position:absolute;
  top:0; right:0;
  color:#fff;
  background:var(--gold);
  width:36px;
  font-size:10px;
  font-weight:700;
  border-radius:0 0 0 4px;
  text-align:center;
  letter-spacing:.06em;
  padding:2px 0;
}

/* =========================================================
   BROWSER-BACK MODAL
   ========================================================= */
.modal{
  display:none;
  height:100vh;
  position:fixed;
  top:0;
  width:100%;
  z-index:10000;
}
.modal__bg{
  background:rgba(10,31,74,.82);
  backdrop-filter:blur(3px);
  height:100vh;
  position:absolute;
  width:100%;
}
.modal__content{
  background:#fff;
  left:50%;
  padding:26px 20px !important;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  width:92%;
  max-width:420px;
  text-align:center;
  border:none !important;
  border-radius:14px !important;
  box-shadow:var(--shadow-deep);
}
.modal__content h2{
  background:var(--accent);
  color:#fff;
  padding:11px 14px;
  font-size:16px;
  border-radius:8px;
  margin:0 0 16px;
  box-shadow:none;
  line-height:1.4;
  border:none;
  text-align:center;
}
.modal__content h2::before{display:none;}
.modal__content h4.kopipe{margin:8px 0; font-size:15.5px;}
.modal__content .baimb{
  margin:8px auto 12px;
  display:block;
  width:90%;
  border-radius:8px;
}
.modal__content .ku-pon{
  display:inline-block;
  background:#fffceb;
  border:1px dashed var(--accent);
  padding:6px 14px;
  font-size:16px;
  letter-spacing:.18em;
  color:var(--accent-dark);
  border-radius:4px;
  font-weight:800;
}
.modal__content .kyou{
  font-size:1.7em;
  color:var(--accent-dark);
  font-weight:900;
}
.modal__content .kounyuu{
  margin-top:14px;
  padding:1em 1em !important;
}

.backsyoukai{display:flex; align-items:center; height:300px;}
.isu{height:100%;}
.backsyoukai p{
  font-size:25px;
  font-weight:700;
  text-align:center;
  justify-content:center;
}
.kounyuu{margin-top:10px;}
.baimb{width:80%;}
.kopipe{font-size:16px; margin:6px 0;}
.kyou{font-size:1.7em; color:var(--accent-dark);}
@keyframes blinking{
  0%{opacity:.45;}
  100%{opacity:1;}
}
.blink{animation:blinking .55s ease-in-out infinite alternate;}
.anc{cursor:pointer;}

/* Legacy modal */
#modal-overlay{display:none; position:fixed; top:0; left:0; width:100%; height:100vh;}
.modal-mask{position:absolute; width:100%; height:100vh; background:rgba(0,0,0,.7);}
.modal-container{position:absolute; top:50%; left:50%; width:50%; background:#fefefe; transform:translate(-50%,-50%); box-shadow:3px 3px 5px #888;}
.modal-inner{position:relative; margin:10px auto; width:90%;}
.modal-title{width:100%; font-size:20px; font-weight:700; color:#ff1493; text-align:center;}
.modal-text{padding:5%; font-size:18px; letter-spacing:1px; text-align:center;}
.pen{width:100%; margin:0 auto;}
.pen img{width:100%;}
.penoff{color:red; font-size:16px; font-weight:700; margin:10px 0 0; text-align:center;}
button{
  position:absolute; top:calc(-10% - 8px); right:calc(-5% - 8px);
  padding:3px; width:20px; height:20px;
  border:1px solid #fefefe; border-radius:50%;
  background:#fefefe; font-size:20px;
  box-shadow:2px 2px 3px #888;
  line-height:10px; color:#444;
  cursor:pointer; margin-top:10px;
}

/* =========================================================
   SEARCH RESULT POINT
   ========================================================= */
.bl_searchResultBlock_item .point{
  background:var(--bg-soft);
  padding:8px 10px !important;
  margin:0 !important;
  font-size:12px;
  color:var(--primary);
  font-weight:600;
}
.bl_searchResultBlock_item .point p{margin:0; font-size:12px; color:var(--primary);}
.bl_searchResultBlock_item a{
  text-decoration:none;
  color:inherit;
  display:block;
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
  will-change:opacity, transform;
  /* JSがコケても1.2秒後に必ず表示する保険 */
  animation:reveal-fallback .6s 1.2s forwards;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
  animation:none;
}
@keyframes reveal-fallback{
  to{opacity:1; transform:translateY(0);}
}

/* ファーストビューの要素はreveal対象でも即座に表示（遅延なし） */
.hero-catch.reveal,
.campaign-banner.reveal{
  opacity:1;
  transform:none;
  animation:none;
}