:root{
    --bg: #0c0b0a;
    --panel: #17130f;
    --accent: #FFF100;
    --ink: #17130f;
    --cream: #f5ece1;
    --cream-dim: #b9b0a6;
    --line: rgba(245,236,225,0.14);
    --header-bg: #222222;
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; -webkit-font-smoothing: antialiased; }
  body{ background:inherit; color:var(--cream); font-family: "IBM Plex Sans JP", sans-serif; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; }
  img{ display:block; }

  .section-h {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
  }
  .section-h.sub {
    font-size: 22px;
  }
  .sec-title.sub {
    margin-bottom: 16px;
  }

  /* ===== HEADER ===== */
  /* PC: height 90px, logo box fixed 240px, dark area #222 with nav / store link / news logo,
     all measurements reproduced from the supplied header.png reference. */
  .site-header{
    display:flex; align-items:stretch;
    background:var(--header-bg); padding:0;
    height:90px; margin:0;
    position:relative; z-index:20;
  }
  .logo{
    display:flex; align-items:center; justify-content:center;
    flex:0 0 240px;
    background:var(--accent);
  }
  .logo-img{ width:201px; height:43px; object-fit:contain; }
  .nav-links{
    display:flex; align-items:center; gap:20px;
    flex:1; min-width:0; padding-left:48px;
    font-size:15px; letter-spacing:.02em; color:#fff;
  }
  body.dunlop-2610-page .nav-links{
    padding-top:0; padding-right:0; padding-bottom:0;
    background:transparent; line-height:normal;
  }
  .nav-links a{ position:relative; color:#fff; padding:4px 0; }
  .nav-links a::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
  .nav-links a:hover{ opacity:1; }
  .nav-links a:hover::after{ transform:scaleX(1); }
  .nav-sep{ color:rgba(255,255,255,.45); font-size:15px; }
  .header-right{ display:flex; align-items:center; padding-right:43px; }
  .header-secondary{ display:flex; align-items:center; gap:43px; margin-right:43px; }
  .header-sns{ display:flex; align-items:center; gap:20px; }
  .store-link{
    display:flex; align-items:center; gap:12px; font-size:15px; letter-spacing:.02em;
    background:#fff; color:var(--ink); padding:10px 20px; border-radius:6px;
    transition:opacity .2s ease;
  }
  .store-link:hover{ opacity:.75; }
  .store-icon{ width:24px; height:24px; flex-shrink:0; filter:invert(1); }
  .news-badge{ height:52px; display:grid; place-items:center; }
  .news-badge img{ height:100%; width:auto; object-fit:contain; }

  /* mobile-only second row: SNS icons + Menu / hamburger */
  .mobile-utility-bar{
    display:none; align-items:center; justify-content:space-between;
    background:var(--header-bg); padding:0 20px; height:60px;
    position:relative; z-index:20;
  }
  .mu-sns{ display:flex; align-items:center; gap:21px; }
  .mu-icon{
    width:19px; height:19px; background-repeat:no-repeat; background-position:center;
    background-size:contain; flex-shrink:0;
  }
  .mu-icon.mu-x{ background-image:url("images/sns/X.svg"); }
  .mu-icon.mu-fb{ background-image:url("images/sns/facebook.svg"); }
  .mu-icon.mu-ig{ background-image:url("images/sns/instagram.svg"); }
  .mu-icon.mu-yt{ background-image:url("images/sns/youtube.svg"); }
  .mobile-menu-btn{
    display:flex; align-items:center; gap:16px; background:transparent; border:none;
    color:var(--cream); font-size:11px; letter-spacing:.05em; cursor:pointer; transition:opacity .2s ease;
  }
  .mobile-menu-btn.open{ opacity:0; pointer-events:none; }
  .mm-lines{ display:flex; flex-direction:column; width:31px; }
  .mm-lines span{ height:2px; background:var(--cream); width:100%; display:block; }
  .mm-lines span:not(:last-child){ margin-bottom:7px; }

  @media (min-width:960px) and (max-width:1340px){
    .site-header{ flex-wrap:wrap; height:auto; }
    .logo{ order:1; flex:0 0 200px; height:74px; }
    .logo-img{ width:150px; height:auto; }
    .nav-links{ order:2; height:74px; font-size:clamp(12px,1.3vw,15px); gap:clamp(10px,1.4vw,20px); padding-left:clamp(16px,2.4vw,48px); }
    .nav-sep{ font-size:clamp(12px,1.3vw,15px); }
    .header-right{ order:3; height:74px; }
    .header-secondary{
      order:4; flex:1 1 100%; justify-content:space-between; gap:14px; margin-right:0;
      padding:14px 24px; background:var(--panel); border-top:1px solid rgba(255,255,255,.12);
    }
    .store-link{ padding:9px 16px; font-size:14px; }
  }

  @media (max-width:959px){
    .nav-links, .header-secondary{ display:none; }
    .mobile-utility-bar{ display:flex; }
    .site-header{ height:auto; padding:0; }
    .logo{ flex:0 0 auto; height:60px; padding:0 10px; margin-left:0; }
    .logo-img{ height:26px; width:auto; }
    .header-right{ flex:1 1 auto; height:60px; background:var(--header-bg); justify-content:flex-end; padding:0 21px 0 0; border-bottom:solid 1px rgba(255,255,255,.5); }
    .news-badge{ height:26px; }
    .news-badge img{ height:26px; width:auto; }
  }

  .menu-overlay{
    position:fixed; inset:90px 0 0 0; z-index:19;
    background:var(--panel); color:var(--cream);
    display:flex; flex-direction:column; align-items:center;
    padding:76px clamp(20px,8vw,60px) 40px;
    transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  }
  @media (max-width:959px){ .menu-overlay{ inset:120px 0 0 0; } }
  .menu-overlay.open{ opacity:1; transform:translateY(0); visibility:visible; pointer-events:auto; transition-delay:0s; }

  .menu-close{
    position:absolute; top:18px; right:18px; z-index:2;
    width:42px; height:42px; display:grid; place-items:center;
    background:transparent; border:none; color:var(--cream); font-size:24px; cursor:pointer;
  }

  .menu-nav{
    display:flex; flex-direction:column; align-items:center; gap:40px;
  }
  body.dunlop-2610-page .menu-nav{
    padding:0; background:transparent; line-height:normal;
  }
  .menu-overlay .menu-nav a{ font-size:20px; font-weight:700; letter-spacing:.02em; }

  .menu-overlay .m-store{
    margin-top:48px; width:100%; max-width:320px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:16px; border-radius:8px; border:1.5px solid var(--cream);
    background:var(--cream); color:var(--panel); font-weight:700; font-size:15px;
  }
  .menu-overlay .m-store img{ filter:invert(1); }

  /* ===== SLIDER ===== */
  .slider-wrap{ position:relative; background:#fff; padding:0 0 20px; }
  .slider-viewport{ position:relative; overflow:hidden; }
  .slider-track{ display:flex; gap:0; transition: transform .65s cubic-bezier(.65,0,.14,1); }
  .slide{
    position:relative; flex:0 0 62%; aspect-ratio:16/7.6;
    cursor:pointer;
    opacity:0.4; filter:saturate(0.6);
    transition: opacity .65s ease, filter .65s ease;
  }
  .slide.active{ opacity:1; filter:saturate(0.95); }
  @media (min-width:960px){
    .slide{ flex:0 0 min(1080px, 100vw); aspect-ratio:1080/420; }
  }
  .slide-link{ position:relative; display:block; width:100%; height:100%; }
  .slide-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .slide-shade{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,11,10,.55) 0%, rgba(12,11,10,0) 45%); }
  .headline-box{
    position:absolute; left:0; bottom:0; z-index:3;
    padding:clamp(12px,2vw,22px) clamp(16px,2.6vw,28px);
    max-width:min(7000px, 82%);
    display:flex; flex-direction:column; align-items:flex-start;
  }
  .headline-box .line{
    display:inline-block; background:var(--accent); color:var(--ink);
    max-width:100%;
    font-weight:900; font-size:clamp(16px,2.6vw,42px); line-height:1.25;
    padding:10px 20px; overflow-wrap:anywhere;
  }
  @media (max-width:959px){
    .slide{ flex-basis:100%; aspect-ratio:750/363; }
    .slide-photo{ position:absolute; inset:0; }
    .slide-shade{ display:none; }
    .headline-box{
      position:absolute; left:0; right:0; bottom:0; z-index:3;
      max-width:100%; width:100%;
      background:rgba(255,241,0,.9); padding:18px 22px;
      align-items:center; text-align:center; gap:2px;
    }
    .headline-box .line{ display:block; background:none; padding:2px 0; font-size:15px; line-height:1.4; }
  }
  .nav-btn{
    position:absolute; top:50%; z-index:5;
    width:80px; height:80px; border-radius:50%;
    background:rgba(12,11,10,.5); border:2px solid rgba(245,236,225,.65);
    display:grid; place-items:center; cursor:pointer;
    color:var(--cream); font-size:40px; transition:.25s ease;
  }
  .nav-prev{ transform:translate(-50%,-50%); }
  .nav-next{ transform:translate(50%,-50%); }
  .nav-btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
  @media (max-width:959px){ .nav-btn{ display:none; } }
  .dots{ display:flex; justify-content:center; align-items:center; gap:7px; padding:16px 0 22px; }
  .dot{ width:6px; height:6px; border-radius:50%; background:#d9d9d9; cursor:pointer; transition:.25s ease; border:none; }
  .dot.active{ background:#222222; width:18px; border-radius:4px; }

  /* ===== CONTENT LAYOUT ===== */
  .content-bg{ background:#ffffff; }
  .page{
    max-width:1180px; margin:0 auto; padding:48px clamp(16px,4vw,32px) 64px;
    color:#222222;
    --cream:#222222; --cream-dim:#5a5a5a; --line: rgba(0,0,0,0.1);
  }
  .content-grid{ display:flex; flex-direction:column; gap:56px; }

  /* mobile-first: flatten the two wrapper groups so we can freely reorder
     SPECIAL / RANKING / NEW / CAMPAIGN with the `order` property */
  .two-col{ display:flex; flex-direction:column; gap:56px; }
  .col-main, .col-side{ display:contents; }
  .col-side {max-width:336px;}
  .sec-special{ order:1; }
  .sec-ranking{ order:2; }
  .sec-new{ order:3; }
  .sec-campaign{ order:4; }
  .sec-movie{ order:5; }

  @media (min-width:960px){
    .two-col{
      display:grid; grid-template-columns:2fr 336px; gap:56px 40px; align-items:start;
    }
    /* re-wrap into two independent-height columns: SPECIAL+NEW+MOVIE on the left,
       CAMPAIGN+RANKING on the right, in natural DOM order */
    .col-main, .col-side{ display:flex; flex-direction:column; gap:80px; min-width:0; }
    .sec-special, .sec-new, .sec-movie{ order:initial; }
    .sec-ranking{ order:1; }
    .sec-campaign{ order:2; }
    .col-side{ position:sticky; top:24px; align-self:start; }
  }

  .sec-title{
     font-size:clamp(32px,3.4vw,64px);
    margin-bottom:22px; display:flex; align-items:baseline; gap:10px;
  }
  @media (max-width:720px){
    .sec-title.section-h{ font-size:40px; justify-content:center; text-align:center; }
  }

  /* SPECIAL / NEW article rows */
  .article-list{ display:flex; flex-direction:column; gap:18px; }
  .article-row{
    display:flex; gap:16px; align-items:flex-start; padding-bottom:18px;
    border-bottom:1px solid var(--line); cursor:pointer;
  }
  .article-row:last-child{ border-bottom:none; }
  .article-thumb{ position:relative; width:280px; height:186px; flex-shrink:0; border-radius:4px; overflow:hidden; }

  @media (max-width:720px){
    .article-thumb{ position:relative; width:40%; height:inherit; flex-shrink:0; border-radius:4px; overflow:hidden; }
  }

  .article-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
  .article-row:hover .article-thumb img{ transform:scale(1.04); }
  .article-thumb::after{
    content:"もっと見る";
    position:absolute; inset:0;
    background:rgba(255,241,0,.82);
    color:var(--ink);
    font-size:14px; font-weight:700; letter-spacing:.04em;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .35s ease;
    pointer-events:none;
  }
  .article-row:hover .article-thumb::after{ opacity:1; }
  .article-text{ flex:1; }
  .article-text p{ font-size:16px; line-height:1.65; color:var(--cream); transition:color .25s ease; }

  @media (max-width:720px){
  .article-text p{ font-size:12px;}
  }

  .more-btn{
    position:relative; display:flex; align-items:center; justify-content:center;
    margin-top:22px; padding:14px 20px; border-radius:6px;
    background:var(--accent); color:var(--ink); font-weight:700; font-size:16px;
    letter-spacing:.04em; transition:.25s ease;
  }
  .more-btn:hover{ filter:brightness(1.08); }
  .more-btn::after{
    content:"";
    position:absolute; right:20px; top:50%; transform:translateY(-50%);
    width:20px; height:20px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317130f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
    background-size:contain; background-repeat:no-repeat; background-position:center;
  }

  /* CAMPAIGN */
  .campaign-list{ display:flex; flex-direction:column; gap:14px; }
  @media (max-width:720px){
    .campaign-list{ align-items:center; }
  }
  .campaign-banner{ position:relative; display:block; overflow:hidden; width:320px; height:100px; }
  .campaign-banner img{ width:320px; height:100px; object-fit:contain; display:block; }
  /* RANKING */
  .ranking-list{ display:flex; flex-direction:column; }
  .ranking-item{
    display:flex; align-items:center; gap:14px; padding:14px 0;
    border-bottom:1px solid var(--line); cursor:pointer;
  }
  .ranking-item:last-child{ border-bottom:none; }
  .rank-num{
    font-weight:700; width:38px; height:38px; flex-shrink:0;
    display:grid; place-items:center; color:var(--ink);
  }
  .rank-num.icon{
    font-family:'Archivo',monospace; font-size:20px;
    background-image:url("images/icon-tyre.svg");
    background-size:contain; background-repeat:no-repeat; background-position:center;
  }
  .rank-digit{ position:relative; top:-8px; }
  .ranking-item:nth-child(1) .rank-num.icon{ background-image:url("images/ranking_1.png"); }
  .ranking-item:nth-child(2) .rank-num.icon{ background-image:url("images/ranking_2.png"); }
  .ranking-item:nth-child(3) .rank-num.icon{ background-image:url("images/ranking_3.png"); }
  .rank-num.plain{
    font-family:'Archivo', serif; font-size:24px;
  }
  .ranking-item p{ font-size:13px; line-height:1.6; color:var(--cream-dim); transition:color .25s ease; position:relative; top:2px; }
  .ranking-item:hover p{ color:var(--bg); }

  /* MOVIE */
  .movie-grid{ display:flex; flex-direction:column; gap:24px; }
  .movie-card{ position:relative; border-radius:6px; overflow:hidden; aspect-ratio:16/9; cursor:pointer; }
  .movie-card iframe{ display:block; width:100%; height:100%; border:0; }
  .official-link{
    position:relative; display:flex; align-items:center; justify-content:center; gap:18px;
    margin-top:22px; padding:20px 70px;
    background:var(--accent); color:var(--ink); border:1.5px solid transparent;
    font-weight:700; font-size:17px; letter-spacing:.02em;
    border-radius:6px; transition:.25s ease;
  }
  .official-link-logo{ height:40px; width:auto; display:block; flex-shrink:0; }
  body.dunlop-2610-page .official-link:hover{ color:#999; filter:brightness(1.08); }
  .official-link-text{
    font-size:18px; letter-spacing:.05em; color:inherit;
    border-left:1px solid rgba(255,255,255,.25);
  }
  .official-link .ext-icon{
    position:absolute; right:28px; top:50%; transform:translateY(-50%);
    width:26px; height:26px; flex-shrink:0;
    color:#0f0f0f;
  }
  .official-link-text{ white-space:nowrap; }
  @media (max-width:640px), (min-width:960px) and (max-width:1100px){
    .official-link{
      font-size:clamp(12px, 3.333vw, 16px);
      padding:.75em;
      gap:.375em;
    }
    .official-link-logo{ height:1.7em; }
    .official-link-text{ font-size:inherit; letter-spacing:0; flex-shrink:0; }
    .official-link .ext-icon{
      position:static;
      right:auto;
      top:auto;
      transform:none;
      width:1.25em;
      height:1.25em;
      margin-left:clamp(.375em, 1vw, .75em);
    }
  }

  /* QUICK SEARCH */
  .quick-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px 16px; }
  @media (max-width:959px){ .quick-grid{ grid-template-columns:1fr; } }
  .banner-btn{
    position:relative; display:block; overflow:hidden; border-radius:6px;
    aspect-ratio:1080/420; transition:opacity .25s ease;
  }
  .banner-btn:hover{ opacity:.9; }
  .banner-btn img{ width:100%; height:100%; object-fit:cover; display:block; }
  @media (max-width:959px){ .banner-btn{ aspect-ratio:750/363; } }

  /* ===== FOOTER ===== */
  body.dunlop-2610-page footer{ background:#17130f; }
  body.dunlop-2610-sp-page footer{ padding:35px 0 24px !important; }
  @media (max-width:1340px){
    body.dunlop-2610-page footer{ padding:35px 0 24px !important; }
    body.dunlop-2610-page footer ul.footer-link-list{
      width:100%;
    }
    body.dunlop-2610-page footer ul.footer-link-list li.footer-map-container,
    body.dunlop-2610-page footer ul.footer-link-list li.footer-media-container,
    body.dunlop-2610-page footer ul.footer-link-list li.footer-sns-container{
      flex:0 0 100%;
    }
    body.dunlop-2610-page footer ul.footer-link-list li.footer-media-container,
    body.dunlop-2610-page footer ul.footer-link-list li.footer-sns-container{
      padding:0 10px;
    }
    body.dunlop-2610-page footer dl{
      margin:0 auto 32px;
    }
    body.dunlop-2610-page footer dl.footer-map-list dd{
      flex:1 0 50%;
      margin:0;
      padding:12px 0;
      border:0;
      border-bottom:1px solid #fff;
      text-align:center;
    }
    body.dunlop-2610-page footer dl.footer-map-list dd:nth-of-type(odd){
      border-right:1px solid #fff;
    }
    body.dunlop-2610-page footer dl.footer-map-list dd:first-child,
    body.dunlop-2610-page footer dl.footer-map-list dd:nth-of-type(2){
      border-top:1px solid #fff;
    }
    body.dunlop-2610-page footer dl.footer-media-list dd{
      flex:0 0 30%;
      font-size:12px;
      text-align:center;
    }
    body.dunlop-2610-page footer dl.footer-sns-list dt{
      display:none;
    }
    body.dunlop-2610-page footer dl.footer-sns-list dd{
      padding:0 8px;
    }
    body.dunlop-2610-page footer p{
      width:auto;
    }
    body.dunlop-2610-page footer p.copyright{
      font-size:10px;
    }
  }
  body.dunlop-2610-page #onesignal-bell-container,
  body.dunlop-2610-page .onesignal-bell-container,
  body.dunlop-2610-page .onesignal-slidedown-container{ display:none !important; }

  /* "back to top" pill, straddling the boundary between the white page and the dark footer */
  .footer-top-wrap{
    max-width:1180px; margin:0 auto; padding:0 clamp(16px,4vw,32px); position:relative; height:0;
  }
  .dunlop-back-top-wrap{ margin-top:70px; }
  .back-top{
    position:absolute; right:clamp(16px,4vw,32px); top:0; transform:translateY(-50%);
    display:flex; align-items:center; gap:8px;
    background:var(--ink); color:var(--cream);
    font-size:12.5px; font-weight:500; letter-spacing:.03em;
    padding:11px 20px; border-radius:24px;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
    transition:.25s ease;
  }
  .back-top:hover{ background:var(--accent); color:var(--ink); }