@charset "utf-8";
/* CSS Document */

  :root{
    --cream: #FBF5E8;
    --cream-deep: #F3E6C6;
    --ink: #26231D;
    --ink-soft: #5B5346;
    --gold: #B8862E;
    --gold-light: #E7C877;
    --gold-deep: #8A6420;
    --navy: #1B2130;
    --navy-deep: #12151F;
    --white: #FFFFFF;
    --line: rgba(184,134,46,0.25);
  }

  *{ box-sizing: border-box; }

  html{ scroll-behavior: smooth; }

  body{
    margin:0;
    background: var(--cream);
    color: var(--ink);
    font-family: 'Noto Sans JP', sans-serif;
    -webkit-font-smoothing: antialiased;
	  font-size: 16px;
  }

a{
	text-decoration: none;
}

  .serif{ font-family: 'Shippori Mincho', 'Noto Serif JP', serif; }

  /* ---------- Ambient background ---------- */
  .ambient{
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(ellipse 900px 500px at 50% -10%, rgba(231,200,119,0.55), transparent 60%),
      radial-gradient(ellipse 700px 500px at 90% 15%, rgba(231,200,119,0.25), transparent 60%),
      radial-gradient(ellipse 700px 500px at 5% 30%, rgba(184,134,46,0.12), transparent 60%),
      var(--cream);
  }
  .grain{
    position: fixed; inset:0; z-index:-1; opacity:.035; pointer-events:none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- floating bokeh ---------- */
  .bokeh{ position:absolute; border-radius:50%; pointer-events:none; filter: blur(1px); opacity:.5; animation: drift 9s ease-in-out infinite; }
  @keyframes drift{ 0%,100%{ transform: translateY(0px);} 50%{ transform: translateY(-16px);} }

  /* ---------- Header / Hero ---------- */
  header.hero{
    position: relative;
    padding: 76px 24px 96px;
    text-align: center;
    overflow: hidden;
  }
  .wordmark{
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 30px;
    letter-spacing: 0.14em;
    color: var(--gold-deep);
    margin-bottom: 30px;
  }
  .wordmark span{ font-style: italic; }

  .kicker{
    display:inline-block;
    letter-spacing: 0.35em;
    color: var(--gold-deep);
    margin-bottom: 6px;
    font-weight: 600;
  }

  h1.title{
    font-size: clamp(46px, 8vw, 84px);
    line-height: 1.08;
    margin: 0 0 20px;
    font-weight: 800;
    letter-spacing: 0.03em;
    background: linear-gradient(180deg, #6d5117 0%, #B8862E 42%, #E7C877 55%, #8A6420 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
    display:inline-block;
  }
  h1.title::after{
    content:'';
    position:absolute; inset:0;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.85) 48%, transparent 66%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shimmer 4.5s ease-in-out infinite;
  }
  @keyframes shimmer{ 0%{ background-position: 140% 0;} 60%,100%{ background-position: -60% 0;} }

  .subtitle{
    font-size: 17px;
    color: var(--ink-soft);
    letter-spacing: 0.06em;
    display:flex; align-items:center; justify-content:center; gap:16px;
  }
  .subtitle .rule{ width:34px; height:1px; background: var(--gold); display:inline-block; }

  /* ---------- laurel divider ---------- */
  .laurel{ margin: 40px auto 0; width: 170px; display:block; }

  /* ---------- overview card ---------- */
  .wrap{ max-width: 1040px; margin: 0 auto; padding: 0 24px; }

  .overview{
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 46px clamp(24px,5vw,64px);
    margin-top: -48px;
    box-shadow: 0 30px 60px -30px rgba(138,100,32,0.28);
    position: relative;
    z-index: 2;
  }
  .overview h2{
    text-align:center;
    font-size: 26px;
    margin: 0 0 18px;
    letter-spacing: 0.08em;
  }
  .overview p.lead{
    text-align:center;
    color: var(--ink-soft);
    line-height: 1.9;
    max-width: 620px;
    margin: 0 auto 30px;
  }
  table.stats{
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
  }
  table.stats tr{ border-top: 1px solid var(--line); }
  table.stats tr:last-child{ border-bottom: 1px solid var(--line); }
  table.stats td{ padding: 16px 10px; }
  table.stats td:first-child{
    width: 190px;
    color: var(--gold-deep);
    font-weight: 700;
    letter-spacing: 0.08em;
  }
  @media(max-width:520px){ 
	  table.stats td:first-child{
    width: 120px;} 
}

  .footnote{ text-align:center; font-size:12px; color:#9a9080; margin-top:22px; letter-spacing:.02em; }

  /* ---------- section labels ---------- */
  .section-label{
    text-align:center;
    margin: 96px 0 46px;
  }
  .section-label .en{
    font-family:'Cormorant Garamond',serif; font-style:italic; font-size:18px; letter-spacing:.18em; color: var(--gold);
  }
  .section-label h2{ 
	  margin: 6px 0 0; 
	  letter-spacing:.1em; 
}

  /* ---------- Grand prix ---------- */
  .grandprix{
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
    border-radius: 26px;
    padding: 4px;
    position: relative;
    box-shadow: 0 40px 80px -30px rgba(18,21,31,0.55);
  }
  .grandprix-inner{
    border-radius: 23px;
    padding: clamp(28px,5vw,30px);
    position: relative;
    overflow:hidden;
    border: 1px solid rgba(231,200,119,0.25);
	  text-align: center;
  }
  .grandprix-inner img{
	  width: 100%;
  }
  .grandprix-inner::before{
    content:'';
    position:absolute; inset:0;
    background: radial-gradient(ellipse 500px 300px at 15% 0%, rgba(231,200,119,0.14), transparent 60%);
    pointer-events:none;
  }
  .gp-grid{
    display:grid;
    gap: 46px;
    align-items:center;
    position:relative;
  }
  @media(max-width:820px){ .gp-grid{ grid-template-columns:1fr; } }

  .medal-row{
    display:flex; 
	  align-items:center; 
	  gap:12px; 
	  margin-bottom:18px;
	  text-align: center !important;
  }
  .medal-row .crown{ width:30px; height:30px; }
  .award-name{
    color: var(--gold-light);
    font-size: 30px;
    letter-spacing: 0.1em;
    font-weight: 600;
  }
  .criteria{
    color: rgba(251,245,232,0.8);
    margin: 8px 0 26px;
  }
  .store-name{
    color: var(--white);
    font-size: clamp(26px,3.4vw,34px);
    line-height:1.5;
    margin: 0 0 26px;
  }
  .store-name .company{ 
	  display:block; 
	  color: var(--white); 
	  font-weight:500; 
	  letter-spacing:.05em; 
	  margin:16px 0 4px ;
	  font-size: 16px;
}

  .cta{
    display:inline-flex; align-items:center; gap:10px;
    padding: 13px 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--gold-deep), var(--gold), var(--gold-light));
    color: var(--white);
    font-weight:700;
    
    letter-spacing: 0.08em;
    text-decoration:none;
    box-shadow: 0 12px 24px -8px rgba(184,134,46,0.55);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .cta:hover{ transform: translateY(-2px); box-shadow: 0 16px 30px -8px rgba(184,134,46,0.7); }
  .cta svg{ width:14px; height:14px; }

  .illust-frame{
    border-radius: 18px;
    overflow:hidden;
    position:relative;
    border: 1px solid rgba(231,200,119,0.3);
    background: linear-gradient(180deg,#0f1420,#1a2233);
  }
  .rank-badge{
    position:absolute; top:16px; right:16px;
    width: 78px; height:78px;
    border-radius:50%;
    background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 55%, var(--gold-deep) 100%);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    box-shadow: 0 10px 22px -6px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.35);
    z-index:3;
  }
  .rank-badge .rb-top{ font-size:8px; color:#3d2c08; letter-spacing:.08em; font-weight:700; }
  .rank-badge .rb-no{ font-family:'Shippori Mincho',serif; font-size:24px; color:#2c2004; font-weight:800; line-height:1; margin-top:2px;}

  /* ---------- reviews ---------- */
  .reviews{
    margin-top: 30px;
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  @media(max-width:820px){ .reviews{ grid-template-columns: repeat(2,1fr);} }
  @media(max-width:520px){ .reviews{ grid-template-columns: 1fr;} }
  .review-card{
    background: rgba(251,245,232,0.06);
    border: 1px solid rgba(231,200,119,0.18);
    border-radius: 14px;
    padding: 18px 0 16px 18px;
    color: rgba(251,245,232,0.82);
    line-height: 1.85;
    position:relative;
	  text-align: left;
  }
  .review-card .quote-mark{
    font-family:'Shippori Mincho',serif; 
	  color: var(--gold); 
	  font-size: 40px; 
	  line-height:0.5; 
	  display:block; 
  }

  .award-comment{
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid rgba(231,200,119,0.2);
  }
  .award-comment .lbl{
    color: var(--gold-light); 
	  letter-spacing:.15em; 
	  font-weight:700; 
	  margin-bottom:12px; 
	  display:flex; 
	  align-items:center; 
	  gap:12px;
  }
  .award-comment .lbl::before{ content:''; width:16px; height:1px; background:var(--gold); display:inline-block; }
  .award-comment p{
    color: rgba(251,245,232,0.72); 
    line-height: 2.05;
    margin:0;
	  text-align: left;
  }

  /* ---------- award grid (secondary) ---------- */
  .award-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 6px;
  }
  @media(max-width:820px){ .award-grid{ grid-template-columns: 1fr; } }

  .award-card{
    background: var(--white);
    border-radius: 20px;
    border: 1px solid var(--line);
    overflow:hidden;
    box-shadow: 0 24px 48px -30px rgba(138,100,32,0.3);
  }
  .award-card .ac-head{ padding: 22px 26px 0; }
  .award-card .medal-row{ margin-bottom: 10px; }
  .award-card .medal-row .crown{ width:22px; height:22px; }
  .award-card .award-name{ color: var(--gold-deep); font-size:21px; }
  .award-card .criteria{ color: var(--ink-soft); font-size:14px; }

  .ac-illust{
    margin: 14px 26px 0;
    border-radius: 14px;
    overflow:hidden;
    background: linear-gradient(180deg,#0f1420,#1a2233);
  }

  .award-card .ac-body{ padding: 20px 26px 26px; }
  .award-card .store-name{ 
	  color: var(--ink); 
	  font-size: 22px; 
	  margin-bottom:16px; 
}
  .award-card .store-name .company{ color: var(--ink-soft); }
  .award-card .cta{
    padding: 11px 22px; font-size:12px;
  }
  .award-card .reviews{ grid-template-columns: 1fr; margin-top:22px; gap:10px; }
  .award-card .review-card{
    background: var(--cream-deep);
    border: 1px solid var(--line);
    color: var(--ink-soft);
  }
  .award-card .review-card .quote-mark{ color: var(--gold-deep); }

 .award-card img{
	 width: 100%;
	 text-align: center;}

  /* ---------- footer ---------- */
  footer{
    text-align:center;
    padding: 100px 24px 60px;
    color: var(--ink-soft);
  }
  footer .laurel{ width:130px; margin-bottom:22px; opacity:.8;}
  footer p{ letter-spacing:.05em; line-height:2; }
  footer .brand{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:20px; color: var(--gold-deep); margin-bottom:10px; }

  section{ position:relative; }

  /* ---------- pagetop ---------- */
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 1px var(--gold);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 1px solid var(--gold);
    border-right: 1px solid var(--gold);
    transform: translateY(20%) rotate(-45deg);
}

.navy-deep{
	color: var(--navy-deep); 
}