/* ===== Design tokens ===== */
:root{
  --Accent-navy:#00246D;
  --navy-800:#071630;
  --navy-700:#0b2147;
  --blue-500:#1f7fd4;
  --blue-400:#00D4FF;
  --cyan:#36c5f0;
  --cyan-2:#1c9fd0;
  --ink:#231815;
  --light:#E6F1FB;
  --line-light:#cfdaea;
  --footer:#231815;
  --maxw:1248px;
  --font-jp:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-display:"waverly-cf", sans-serif;
  --font-mono:"Share Tech Mono",monospace;
  --font-number:"Figtree", sans-serif
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}
body{
  font-family:var(--font-jp);
  color:var(--ink);
  line-height:1.8;
  background:#fff;
  font-size:16px;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ol{list-style:none;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:24px;width:100%;}

:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;}
.dividing-line{width:100%;max-width: 1200px;height:1px;border:0;margin-inline: auto;background: linear-gradient(to right,rgba(0,212,255,0)0%,rgba(0,212,255,0.32)25%,rgba(0,212,255,1)50%,rgba(26,108,240,1)55%,rgba(0,212,255,0.32)75%,rgba(0,212,255,0)100%);}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.site-header__inner{
  display:flex;align-items:stretch;justify-content:space-between;
  max-width:100%;
}
.logo{display:flex;flex-direction:column;justify-content:center;padding:14px 0;line-height:1.25;}
.logo:hover{opacity: 0.7;transition: 0.3s;}
.logo__main{font-family:var(--font-display);font-weight:700;letter-spacing:.1em;font-size:28px;color:var(--ink);}
.logo__sub{font-size:10px;font-weight:bold;color:var(--ink);letter-spacing:.02em;}
.contact-btn{
  display:flex;align-items:center;
  background:var(--footer);color:#fff;
  padding:0 40px;font-weight:700;font-size:14px;letter-spacing:.05em;
  transition:background .25s;
}
.contact-btn:hover{background:#34221d;}

/* ===== Shared ===== */
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-mono);letter-spacing:.05em;font-size:13px;text-transform:uppercase;
  margin-bottom:10px;
}
.eyebrow__line{display:inline-block;width:21px;height:1px;background:currentColor;}
.eyebrow--blue{color:var(--Accent-navy);}
.eyebrow--cyan{color:var(--cyan);}
.trends .eyebrow--cyan,.contact .eyebrow--cyan{color:var(--cyan-2);}

.section-heading{
  font-size:clamp(32px,4vw,38px);font-weight:700;letter-spacing:.04em;
  color:#fff;margin-bottom:10px;
}
.section-heading--dark{color:var(--ink);}

.section--dark{background:linear-gradient(180deg,var(--navy-800),var(--navy-700));}

.category-head{text-align:center;margin:64px 0 56px;}
.category-head__ja{font-size:28px;font-weight:700;color:#fff;letter-spacing:.08em;}
.category-head__ja--dark{color:var(--ink);}
.category-head__x{color:#fff;font-weight:400;margin:0 .2em;}
.category-head__en{display:block;font-family:var(--font-mono);font-size:13px;letter-spacing:.05em;color:var(--blue-400);margin-bottom: 10px;}
.category-head__en--mid{color:var(--cyan-2);}
.category-head--center{margin-top:0;}

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height: 665px;
  overflow:hidden;
  background: #020912;
  color:#fff;
  display: flex;
  align-items: center;
  isolation: isolate;
}
.hero__bg{
  position:absolute;
  inset: 0;
  background: url(/web/jp/data/images/fv_bg.jpg)no-repeat;
  background-size: cover;
  background-position: right center;
  opacity: 0;
  will-change:opacity;
  animation: fvfadein 2.2s ease-out 0.2s forwards;
}
@keyframes fvfadein{
  from{opacity: 0;}
  to{opacity: 1;}
}

.hero__content{position:relative;z-index:1;max-width:var(--maxw);width:100%;margin-inline:auto;padding: 0 32px;}
.hero__brand{max-width:560px;display:flex;align-items:center;gap:6px;justify-content:center;margin-bottom:30px;}
.brand-mark{width:30px;height:auto;color:#fff;}
.brand-mark--sm{width:24px;}
.brand-text{font-size:30px;font-weight:500;letter-spacing:.01em;}

/* テキスト要素を下からフェードイン */
.hero__brand,
.hero__title,
.hero__lead{
  opacity:0;
  animation:heroup 0.9s ease-out forwards;
}
.hero__brand{animation-delay:0.2s;}
.hero__title{animation-delay:0.4s;}
.hero__lead {animation-delay:0.6s;}
@keyframes heroup{
  from{ opacity:0; transform:translateY(20px); }
  to{   opacity:1; transform:translateY(0); }
}

.hero__title{
  font-family:var(--font-display);
  font-size:90px;
  font-weight: 500;font-style: normal;
  letter-spacing:.04em;
  line-height:1;
  color:#00D4FF;
  margin-bottom:28px;
  position: relative;
  display: inline-block;
}
.hero__lead{max-width:560px;font-size:16px;line-height:2;color:#fff;}

/* ===== グリッチ（アニメーション）===== */
.glitch{
  color:#00D4FF;
  text-shadow:0 0 1px rgba(54,197,240,.4);
}
.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute;
  left:0;top:0;
  width:100%;
  overflow:hidden;
  opacity:.85;
}
.glitch::before{
  color:#ff3b6b;
  animation:glitch-r 5s steps(2,end) 1.3s infinite;
}
.glitch::after{
  color:#27e0ff;
  animation:glitch-c 5s steps(2,end) 1.3s infinite;
}
@keyframes glitch-r{ 0%,92%,100%{ transform:translate(0,0); -webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0); } 93%{ transform:translate(-2px,1px); -webkit-clip-path:inset(0 0 55% 0);
clip-path:inset(0 0 55% 0); } 96%{ transform:translate(2px,-1px); -webkit-clip-path:inset(60% 0 0 0); clip-path:inset(60% 0 0 0); }}

@keyframes glitch-c{ 0%,92%,100%{ transform:translate(0,0); -webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0); } 93%{ transform:translate(2px,-1px); -webkit-clip-path:inset(0 0 55% 0); clip-path:inset(0 0 55% 0); } 96%{ transform:translate(-2px,1px); -webkit-clip-path:inset(60% 0 0 0); clip-path:inset(60% 0 0 0); }}

/* 動きを減らす設定への配慮 */
@media (prefers-reduced-motion:reduce){
  .glitch::before, .glitch::after{ animation:none; opacity:0; }
  /* フェードインの遅延を打ち消し、テキストが消えたままにならないようにする */
  .hero__brand, .hero__title, .hero__lead{ opacity:1; animation-delay:0s; }
}

/* ===== Summary ===== */

.summary{
  --summary-veil:0;
  position:relative;overflow:hidden;
  padding:80px 0;
  background:
    linear-gradient(rgba(230,241,251,var(--summary-veil)), rgba(230,241,251,var(--summary-veil))),
    url(/web/jp/data/images/data_summary_bg.png) center/cover no-repeat,
    linear-gradient(135deg,#E6F1FB,#E6F1FB);
}
@media (max-width: 1024px){
  .summary{--summary-veil:0.7;background-position: left center;}
}
@media (max-width:560px){
  .summary{background-position: 30% top;background-size: 125vh;}
}
.summary__inner{
  position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto;
  padding-inline:24px;
}
.summary__body{
  max-width:565px;
  margin-left:auto;
}
.summary__title{font-size:clamp(18px,2.6vw,24px);font-weight:700;color:var(--Accent-navy);line-height:1.6;margin-bottom:24px;}
.summary__text{font-size:16px;font-weight:500;color:var(--ink);margin-bottom:36px;line-height: 2em;}

.stats{display:grid;grid-template-columns:repeat(3,1fr);}
.stats__item{padding:22px 18px;position:relative;}
.stats__item:not(:first-child)::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:1px;background:var(--line-light);}
.stats__label{font-size:14px;color:var(--ink);font-weight:bold;margin-bottom:14px;}
.stats__value{font-family:var(--font-number);font-weight:700;font-size:42px;color:var(--Accent-navy);line-height:1;letter-spacing:.02em;}
.stats__unit{font-family:var(--font-jp);font-size:16px;font-weight:bold;color:var(--ink);margin-left:3px;}
@media (max-width: 650px){.stats__value{font-size: 6vw;}}
@media (max-width:560px){.stats__value{font-size: 42px;}}
/* ===== Distribution（流通額ランキング＋飲料×エリアを通しで1背景） ===== */
.distribution{
  position:relative;
  /* 左・縦中央を光源にしたネイビーのラジアルグラデーション。
     ranking と map をまたいで1枚の背景として通す。 */
  background:radial-gradient(75% 55% at -3% 50%,
    #164F90 0%,
    #154775 20%,
    #0f3258 42%,
    #0a2240 65%,
    #06182d 85%,
    #040f1d 100%);
}

/* ===== Ranking ===== */
.ranking{padding:84px 0 96px;}
.ranking__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start;}
.rank-table{width:100%;border-collapse:collapse;color:#fff;font-size:16px;}
.rank-table caption{text-align:left;}
.rank-table th,.rank-table td{border:1px solid #00D4FF;padding:3px 12px;text-align:center;}
.rank-table thead th{color:var(--blue-400);font-family:var(--font-jp);font-weight:500;font-size:14px;}
.rank-table td{font-family:var(--font-number);}
.rank-table__rank{width:55px;}
.rank-table__name{text-align:left !important;width:42%;}
.rank-table__group{font-weight:500;}
.rank-table tbody td:first-child{font-weight:700;color:#fff;font-size: 18px;}
.rank-table tbody td:nth-child(2){text-align:left;font-family:var(--font-jp);}
/*.rank-table tbody tr:nth-child(odd){background:rgba(13,38,78,.35);}*/
.source{margin-top:16px;font-size:13px;color:#8fa6c4;}
.source a:hover{text-decoration: underline;}
.ranking__desc p{color:#fff;font-size:16px;margin-bottom:20px;line-height: 2.2em;}
.ranking__desc p:last-child{margin-bottom:0;}

/* ===== Map ===== */
.map{padding:20px 0 90px;}

/* PC画面：中央地図1200px  */
.map__figure{
  position:relative;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  aspect-ratio:1796 / 2120;
  background:url(/web/jp/data/images/ranking_japan_map.png) center/cover no-repeat;
}
.map__lead{
  max-width:420px;
  font-size:16px;
  color:#fff;
  margin:0;
  padding:45px 0 0 0;
  line-height: 2.2em;
}
@media (max-width: 1200px){
  .map__lead{
  max-width:35%;
font-size:1.3vw}
  }
@media (max-width: 1024px){
  .map__lead{
  max-width:100%;
  font-size:16px;
}
  }

.map__lead p{
  margin-bottom: 20px;
  }
.map__source{
  text-align: right;
}
@media (max-width: 1024px){
  .map__source{
  display: none;
}
  }
/* PC版：各エリアのランキングは HTML に残しつつ視覚的にのみ隠す
   （スクリーンリーダー・検索エンジンには有効）。
   clip-path 版を用い、テーブルの行・列セマンティクスを保つ。 */
.map__regions{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  -webkit-clip-path:inset(50%);
          clip-path:inset(50%);
  border:0;
}

/* 順位テーブル（タブレット以下で表示する際のスタイル。
   PC版では上記 sr-only 化により視覚表示されない） */
.region-table{width:100%;border-collapse:collapse;font-size:16px;color:#fff;}
.region-table thead th{
  color:var(--blue-400);font-weight:700;font-size:16px;text-align:left;
  padding:6px 12px;border-bottom:1px solid #00D4FF;
}
.region-table thead th.region-table__rank{
  width:46px;text-align:center;
  border-right:1px solid #00D4FF;
}
.region-table tbody th,
.region-table tbody td{
  border-bottom:1px solid #00D4FF;
  padding:6px 12px;font-weight:500;
}
.region-table tbody th{
  width:70px;text-align:center;color:#fff;font-weight:500;
  font-family:var(--font-number);
  border-right:1px solid #00D4FF;
}
.region-table tbody tr:last-child th,
.region-table tbody tr:last-child td{border-bottom:0;}

/* ===== Trends ===== */
.trends{background:var(--light);padding:80px 0 30px;}
.trend-block{padding:60px 0;}
.trend-rule{border:0;border-top:1px solid var(--line-light);margin:0 0 44px;}
.trend-block__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;}
.trend-chart img{width:100%;height:auto;}
.trend-text p{font-size:16px;color:var(--ink);margin-bottom:20px;font-weight:500;}
.trend-text p:last-child{margin-bottom:0;}
.trend-block__grid .source {color: #5d7596;}


/* ===== Contact ===== */
.contact{background:#fff;padding:60px 0 110px;}
.contact__text{font-size:16px;color:var(--ink);font-weight: 500;margin-bottom: 56px;}

/* 本データのご利用にあたって：フッター直前の注記セクション */
.notice{padding:80px 0;background:var(--light);}
.notice__box{
  max-width:1200px;
  margin-inline:auto;
  padding:40px 48px;
  border:1px solid var(--Accent-navy);
}
.notice__title{
  font-size:20px;
  font-weight:700;
  color:var(--Accent-navy);
  letter-spacing:.04em;
  margin-bottom:24px;
}
.notice__intro{
  font-size:14px;
  line-height:1.9;
  font-weight:500;
  color:var(--ink);
  margin-bottom:28px;
}
.notice__intro p + p{margin-top:4px;}

.notice__list{margin:0;}
.notice__row{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:80px;
  padding:20px 0;
  border-top:1px solid var(--line-light);
}
.notice__row:last-of-type{border-bottom:1px solid var(--line-light);}
.notice__term{
  font-size:16px;
  font-weight:700;
  color:var(--Accent-navy);
}
.notice__desc{margin:0;}
.notice__desc ul{
  list-style:disc;
  padding-left:1.2em;
  margin:0;
}
.notice__desc li{
  font-size:14px;
  line-height:1.9;
  font-weight:500;
  color:var(--ink);
}
.notice__desc li + li{margin-top:8px;}

.notice__more{
  font-size:14px;
  color:var(--ink);
  font-weight:500;
  margin-top:28px;
}
.notice__more a{
  color:var(--Accent-navy);
  text-decoration:underline;
}
.notice__more a::before{
  content: "";
  speak:none;
  text-decoration:none;
  display:inline-block;
  width:0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #00246D;
  margin-right: 3px;
  }
  .notice__more a:hover{
    color: var(--blue-500);

  }
.notice__copy{
  font-size:13px;
  color:var(--ink);
  font-weight: 500;
  margin-top:24px;
}

/* ===== Footer ===== */
.site-footer{background:var(--footer);color:#fff;padding:54px 24px;text-align:center;}
.site-footer__inner{max-width:var(--maxw);margin-inline:auto;}
.site-footer__logo{display:inline-flex;align-items:center;gap:6px;margin-bottom:22px;}
.site-footer__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0;font-size:14px;margin-bottom:14px;}
.site-footer__nav a{padding:0 18px;position:relative;color:#fff;transition:color .2s;}
.site-footer__nav a:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);height:12px;width:1px;background:rgba(255,255,255,.3);}
.site-footer__logo a:hover img,.site-footer__nav a:hover{opacity: 0.7;transition: 0.3s;}
.site-footer__copy{font-size:14px;color:#fff;}

/* ===== Responsive ===== */


@media (max-width:1024px){
  .hero__title{
    text-align: center;
    display: block;
    font-size: 14vw;
    white-space: nowrap;
  }
.hero__brand,.hero__lead {
    max-width: 100%;
    }
.hero__bg {
  background-position: top center;
  }
    }

/* タブレット／スマホ：「飲料 × エリア」を地図付き1カラムに切り替え
   （PCは従来の中央地図＝背景画像のまま。ここでのみ個別地図を表示） */
@media (max-width:1024px){
  /* PC版の中央地図（背景）だけ解除。中のリード文は通常表示で残す */
  .map__figure{
    aspect-ratio:auto;
    background:none;
    max-width:100%;
    margin:0 0 48px;
  }
  .map__lead{padding:0;}
  /* PC版で sr-only 化していたランキングを通常表示に戻す */
  .map__regions{
    position:static;
    width:auto;height:auto;
    margin:0;padding:0;
    overflow:visible;
    -webkit-clip-path:none;
            clip-path:none;
    display:flex;
    flex-direction:column;
    gap:56px;
  }
  /* カードの枠・背景を外し、区切りのある縦並びに */
  .region-card{
    background:transparent;
    border:0;
    padding-bottom: 58px;
    border-bottom: 1px solid rgba(0,212,255,0.3);
  }
  .region-card:last-child{
    padding-bottom: 0px;
    border-bottom:none;
    }
  /* エリア名：中央寄せ＋両脇に飾り線 */
  .region-card__name{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    border:0;
    padding:0;
    font-size:22px;
    letter-spacing:.08em;
    color:#00D4FF;
    margin-bottom:58px;
  }
  .region-card__name::before,
  .region-card__name::after{
    content:"";
    flex:1;
    max-width:10px;
    height:1px;
    background:#00D4FF;
  }
  /* 地図画像を表示（中央寄せ・可変幅） */
  .region-card__map{
    display:block;
    width:auto;
    max-width:600px;
    height:auto;
    margin:0 auto 24px;
  }
  /* テーブルは枠線付きで全幅 */
  .region-table{
    border:1px solid #00D4FF;
  }
}

@media (max-width:1024px){
  .ranking__grid,
  .trend-block__grid{grid-template-columns:1fr;gap:36px;}
  .summary__body{max-width:none;margin-left:0;}
  .hero{padding:70px 24px 60px;}
  .hero__content{padding:0;}
  .notice__box{padding:28px 24px;}
  .notice__row{grid-template-columns:1fr;gap:8px;}
  .region-card__map {
        max-width:100%;
        }
}

@media (max-width:560px){
  .hero{align-items: normal;height: 665px;}
  .hero__brand{max-width:70%; margin:0 auto 30px auto;}
  .hero__title{font-size: 13vw;}
  .hero__bg {background: url(/web/jp/data/images/fv_bg_sp.jpg) no-repeat;background-position: right center;background-size: contain;}
.rank-table {font-size: 14px;}
.rank-table thead th {font-size: 2.5vw;}
.rank-table th, .rank-table td {padding:3px 5px;}
  .contact-btn{padding:0 20px;font-size:13px;}
  .logo{padding:12px 0;}
  .logo__main{font-size:17px;letter-spacing:.12em;}
  .stats{grid-template-columns:1fr;}
  .stats__item:not(:first-child)::before{display:none;}
  .stats__item{border-top:1px solid var(--line-light);}
  .stats__item:first-child{border-top:0;}
  .site-footer__logo {width: 60%;}
  .site-footer__nav{flex-direction: column;text-align: left;}
  .site-footer__nav a:not(:last-child)::after {width:0;}
}
@media (max-width:400px){
  .category-head__ja {font-size: 6vw;}
  .notice__title {font-size: 5vw;}
  }