:root{
    --green:#21B573;
    --green-strong:#0F8F58;
    --green-deep:#087A4B;
    --green-soft:#DFF5EA;
    --mint:#F3FBF7;
    --ink:#15201B;
    --paper:#FDFDFB;
    --sand:#F3F1E9;
    --steel:#7C8B84;

    --display:'Zen Kaku Gothic New', sans-serif;
    --sans:'Zen Kaku Gothic New', sans-serif;
    --mono:'Space Grotesk', sans-serif;

    --pad-x: clamp(24px, 8vw, 120px);
    --pad-y: clamp(80px, 11vw, 180px);
    --ease: cubic-bezier(.22,.61,.36,1);

    /* mascot.png is 268×320px. Keep display width capped at (or below) this
       to avoid upscaling/blur. Raise this value only after replacing
       mascot.png with a higher-resolution source file. */
    --mascot-native-w: 268px;

    /* Approx. rest-state height of the fixed header (nav). Used to keep
       hero content — especially the centred D — clear of it. */
    --nav-h: 92px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; overflow-x:hidden; }
  body{
    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink);
    font-size:16px;
    line-height:1.95;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  h1,h2,h3{ font-family: var(--display); font-weight:700; }

  .eyebrow{
    font-family: var(--mono);
    font-size:12px;
    letter-spacing:.26em;
    text-transform:uppercase;
    color: var(--green-strong);
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom: clamp(18px,2.6vw,28px);
  }
  .eyebrow::before{ content:""; width:22px; height:2px; background:var(--green); border-radius:2px; }

  .pill{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--mono); font-size:13px; letter-spacing:.04em;
    padding:15px 28px;
    border-radius:999px;
    transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
  }
  .pill.solid{ background:var(--green); color:#fff; box-shadow:0 6px 16px -10px rgba(8,122,75,.4); }
  .pill.solid:hover{ background:var(--green-strong); transform:translateY(-2px); }
  .pill.outline{ border:1.5px solid var(--green); color:var(--green-strong); }
  .pill.outline:hover{ background:var(--green-soft); transform:translateY(-2px); }

  /* ---------- NAV ---------- */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:20px var(--pad-x);
    transition: background .5s var(--ease), backdrop-filter .5s var(--ease), padding .4s var(--ease), box-shadow .5s var(--ease);
  }
  .nav.is-scrolled{
    background: rgba(253,253,251,0.96);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    padding:14px var(--pad-x);
    box-shadow: 0 1px 0 rgba(21,32,27,.06);
  }
  .nav-mark{ display:inline-flex; align-items:center; }
  .nav-mark img{
    display:block;
    width:145px;
    height:auto;
    object-fit:contain;
  }
  @media (max-width:820px){
    .nav-mark img{ width:130px; }
    /* Keeps the fixed header's mobile height identical to before this
       image logo was introduced (previously set by the taller text
       logo) — the CTA button that determines height on desktop is
       hidden at this width, so without this the header would shrink. */
    .nav-mark{ min-height:31.2px; }
  }
  .nav-links{ display:flex; gap:clamp(18px,2.6vw,40px); list-style:none; margin:0; padding:0; }
  .nav-links a{ font-size:13.5px; color:var(--ink); opacity:.72; transition:opacity .3s var(--ease); }
  .nav-links a:hover{ opacity:1; }
  .nav-toggle{
    display:none;
    position:relative;
    width:30px; height:22px;
    background:none; border:0; padding:0;
    cursor:pointer;
  }
  .nav-toggle-bar,
  .nav-toggle-bar::before,
  .nav-toggle-bar::after{
    content:"";
    position:absolute; left:0;
    width:100%; height:2px;
    background:var(--ink);
    border-radius:2px;
    transition: transform .35s var(--ease), opacity .35s var(--ease), top .35s var(--ease);
  }
  .nav-toggle-bar{ top:10px; }
  .nav-toggle-bar::before{ top:-8px; }
  .nav-toggle-bar::after{ top:8px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar{ background:transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::before{ top:0; transform:rotate(45deg); background:var(--ink); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::after{ top:0; transform:rotate(-45deg); background:var(--ink); }
  @media (max-width:820px){ .nav-links{ display:none; } .nav-toggle{ display:block; } .nav .pill.solid{ display:none; } }

  /* ---------- MOBILE MENU ---------- */
  .mobile-menu{
    position:fixed; inset:0; z-index:200;
    background:var(--paper);
    display:flex; flex-direction:column;
    padding: 20px var(--pad-x) clamp(32px,6vw,56px);
    transform:translateX(100%);
    transition: transform .45s var(--ease);
    visibility:hidden;
  }
  .mobile-menu.is-open{ transform:translateX(0); visibility:visible; }
  .mobile-menu-head{ display:flex; align-items:center; justify-content:space-between; }
  .mobile-menu-close{ background:none; border:0; font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--ink); cursor:pointer; }
  .mobile-menu-links{ margin-top:clamp(48px,10vh,80px); display:flex; flex-direction:column; gap:clamp(22px,4vh,32px); list-style:none; padding-left:0; }
  .mobile-menu-links li{ list-style:none; }
  .mobile-menu-links li::marker{ content:""; }
  .mobile-menu-links a{ font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,7vw,2.1rem); color:var(--ink); }
  .mobile-menu-cta{ margin-top:auto; align-self:flex-start; }
  body.menu-open{ overflow:hidden; }
  @media (min-width:821px){ .mobile-menu{ display:none; } }

/* ---------- Placeholder-page toast ---------- */
  .placeholder-toast{
    position:fixed;
    left:50%; bottom:28px;
    transform:translate(-50%, 12px);
    background:var(--ink); color:#fff;
    font-family:var(--sans); font-size:13.5px;
    padding:12px 20px;
    border-radius:999px;
    opacity:0;
    pointer-events:none;
    z-index:400;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    box-shadow:0 12px 28px -12px rgba(0,0,0,.4);
  }
  .placeholder-toast.is-visible{ opacity:1; transform:translate(-50%, 0); }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }

  /* ---------- ABOUT / BRAND MESSAGE ---------- */
  .about{ background:var(--mint); padding: clamp(70px,9vw,140px) var(--pad-x); text-align:center; }
  .about h2{ font-size:clamp(1.9rem,3.8vw,2.8rem); line-height:1.55; color:var(--ink); max-width:18ch; margin:0 auto; }
  .about p{ margin-top:20px; font-size:16.5px; line-height:1.9; color:#3E4B45; max-width:560px; margin-left:auto; margin-right:auto; }
  .about .pill{ margin-top: clamp(30px,3.4vw,40px); }
  .about .mobile-break{ display:none; }
  @media (max-width:600px){
    .about .mobile-break{ display:inline; }
  }

  /* ---------- STORE INFORMATION ----------
     Deliberately more compact than ABOUT, white background, left-aligned
     text — a quieter, two-column beat between the centred ABOUT message
     and the CHARACTER section below. */
  .store-info{
    background:var(--paper);
    padding: clamp(48px,6vw,88px) var(--pad-x);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: clamp(24px,4vw,64px);
    flex-wrap:wrap;
    border-bottom:1px solid rgba(21,32,27,.08);
  }
  .store-info__text{ max-width:520px; }
  .store-info__text h2{
    font-size:clamp(1.5rem,2.6vw,2rem);
    line-height:1.5;
    color:var(--ink);
    margin-top:12px;
  }
  .store-info__text p{
    margin-top:12px;
    font-size:15.5px;
    line-height:1.8;
    color:#3E4B45;
  }
  .store-info__action{ flex-shrink:0; }
  @media (max-width:820px){
    .store-info{ flex-direction:column; align-items:flex-start; text-align:left; }
    .store-info__text{ max-width:100%; }
  }

  /* ---------- CHARACTER ----------
     Mobile-first: three blocks stack in natural DOM order — top (label +
     heading), figure (image), bottom (body + link) — which already gives
     the required mobile sequence with no overrides needed. Desktop
     reflows into two columns: top+bottom share the left column (image
     spans both rows on the right), keeping everything visually as one
     unified, uncluttered group rather than spread apart. */
  .character{
    position:relative;
    background:var(--paper);
    padding: clamp(80px,10vw,150px) var(--pad-x);
    overflow:hidden;
  }
  .character__top{ text-align:center; }
  .character__top .eyebrow{ justify-content:center; }
  .character__top h2{ font-size:clamp(2rem,4vw,3rem); line-height:1.5; color:var(--ink); margin-top:14px; }
  .character__heading-line{ display:block; white-space:nowrap; }
  @media (max-width:860px){
    .character__top h2{ font-size:clamp(24px,7vw,28px); }
  }

  .character__figure{
    position:relative;
    margin: clamp(36px,5vw,56px) auto 0;
    width:min(var(--mascot-native-w), 68vw);
    display:flex; align-items:center; justify-content:center;
  }
  .character__glow{
    position:absolute;
    inset:-18%;
    border-radius:50%;
    background: radial-gradient(circle, var(--green-soft) 0%, rgba(223,245,234,0) 72%);
    opacity:.8;
    z-index:0;
    pointer-events:none;
  }
  .character__figure img{
    position:relative; z-index:1;
    width:100%; height:auto; display:block;
    filter: drop-shadow(0 20px 28px rgba(21,32,27,.12));
  }

  .character__bottom{ text-align:center; margin-top:clamp(28px,3vw,36px); }
  .character__bottom p{ max-width:40ch; margin:0 auto; font-size:16.5px; line-height:1.85; color:#3E4B45; }
  .character__bottom .link-more{
    display:inline-flex; align-items:center; gap:8px;
    margin-top:clamp(24px,2.6vw,30px);
    font-family:var(--mono); font-size:13px; letter-spacing:.06em;
    color:var(--green-deep); border-bottom:1px solid rgba(8,122,75,.4);
    padding-bottom:4px;
    transition: border-color .3s var(--ease), opacity .3s var(--ease);
  }
  .character__bottom .link-more:hover{ border-color:var(--green-deep); }

  @media (min-width:861px){
    .character{
      display:grid;
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "top    figure"
        "bottom figure";
      align-items:center;
      column-gap: clamp(40px,5vw,70px);
    }
    .character__top{ grid-area:top; text-align:left; align-self:end; }
    .character__top .eyebrow{ justify-content:flex-start; }
    .character__figure{ grid-area:figure; grid-row:1/3; margin:0; }
    .character__bottom{ grid-area:bottom; text-align:left; align-self:start; margin-top:clamp(20px,2vw,26px); }
    .character__bottom p{ margin:0; }
    .character__bottom .link-more{ margin-top:clamp(24px,2.6vw,30px); }
  }

  /* ---------- COMMUNITY (deep green band) ----------
     Mobile-first: a single grid column, with grid-template-areas giving
     the exact required stacking order (label/heading/intro are grouped
     in .community__intro; then both initiatives; then the link last).
     Desktop reflows into two columns via a second set of grid-areas —
     the link visually moves to the bottom of the LEFT column even
     though it stays last in the DOM (correct reading/tab order). */
  .community{
    background: var(--green-deep);
    color: var(--mint);
    padding: clamp(80px,10vw,150px) var(--pad-x);
    display:grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "items"
      "link";
    row-gap: clamp(28px,4vw,40px);
  }
  .community .eyebrow{ color:#BEEAD3; }
  .community .eyebrow::before{ background:#BEEAD3; }

  .community__intro{ grid-area:intro; }
  .community__intro h2{ font-size:clamp(2rem,3.6vw,2.8rem); line-height:1.5; color:#fff; margin-top:14px; }
  .community__intro p{ margin-top:18px; font-size:16px; line-height:1.9; color:var(--mint); max-width:46ch; }

  .community__initiatives{ grid-area:items; }
  .community__item{ padding: clamp(20px,2.4vw,28px) 0; border-top:1px solid rgba(255,255,255,.18); }
  .community__item:last-child{ border-bottom:1px solid rgba(255,255,255,.18); }
  .community__item h3{ font-size:clamp(1.1rem,1.6vw,1.3rem); line-height:1.5; color:#fff; font-weight:600; }
  .community__item p{ margin-top:10px; font-size:15px; line-height:1.85; color:var(--mint); }

  .community .link-more{
    grid-area:link;
    justify-self:start;
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--mono); font-size:13px; letter-spacing:.06em;
    color:#fff; border-bottom:1px solid rgba(255,255,255,.5);
    padding-bottom:4px;
    transition: border-color .3s var(--ease), opacity .3s var(--ease);
  }
  .community .link-more:hover{ border-color:#fff; opacity:.85; }

  @media (min-width:861px){
    .community{
      grid-template-columns: 0.9fr 1.1fr;
      grid-template-areas:
        "intro items"
        "link  items";
      row-gap:0;
      column-gap: clamp(40px,6vw,90px);
    }
    .community__intro{ align-self:start; }
    .community__initiatives{ align-self:center; }
    .community .link-more{ align-self:end; margin-top:clamp(28px,3vw,36px); }
  }

  /* ---------- ENVIRONMENT ----------
     Same mobile-order technique as COMMUNITY (grid-template-areas that
     reflow per breakpoint), but intentionally varied: warm sand
     background instead of a colour band, and the four initiatives sit in
     a 2x2 grid on wide screens rather than a single stacked list —
     falling back to one column if the viewport can't comfortably fit two. */
  .environment{
    background:var(--sand);
    padding: clamp(72px,9vw,140px) var(--pad-x);
    display:grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "items"
      "link";
    row-gap: clamp(28px,4vw,40px);
  }
  .environment__intro h2{ font-size:clamp(2rem,3.6vw,2.8rem); line-height:1.5; color:var(--ink); margin-top:14px; }
  .environment__intro p{ margin-top:18px; font-size:16px; line-height:1.9; color:#3E4B45; max-width:46ch; }
  /* Prevents a single word from being split mid-character on narrow
     screens, without affecting the paragraph's overall natural wrapping. */
  .text-nowrap{ white-space:nowrap; }

  .environment__initiatives{
    grid-area:items;
    display:grid;
    grid-template-columns: 1fr;
    border-bottom:1px solid rgba(21,32,27,.14);
  }
  .environment__item{ padding: clamp(18px,2.2vw,24px) 0; border-top:1px solid rgba(21,32,27,.14); }
  .environment__item h3{ font-size:clamp(1.05rem,1.5vw,1.2rem); line-height:1.5; color:var(--ink); font-weight:600; }
  .environment__item p{ margin-top:8px; font-size:14.5px; line-height:1.8; color:#3E4B45; }

  .environment .link-more{
    grid-area:link;
    justify-self:start;
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--mono); font-size:13px; letter-spacing:.06em;
    color:var(--green-deep); border-bottom:1px solid rgba(8,122,75,.4);
    padding-bottom:4px;
    transition: border-color .3s var(--ease), opacity .3s var(--ease);
  }
  .environment .link-more:hover{ border-color:var(--green-deep); }

  @media (min-width:861px){
    .environment{
      grid-template-columns: 0.8fr 1.2fr;
      grid-template-areas:
        "intro items"
        "link  items";
      row-gap:0;
      column-gap: clamp(40px,6vw,80px);
    }
    .environment__intro{ align-self:start; }
    .environment__initiatives{ align-self:center; }
    .environment .link-more{ align-self:end; margin-top:clamp(28px,3vw,36px); }
  }

  @media (min-width:1150px){
    .environment__initiatives{
      grid-template-columns: repeat(2,1fr);
      column-gap: clamp(28px,3vw,40px);
    }
  }

  /* ---------- NEWS ----------
     Each .news-row is its own CSS Grid (not a shared parent grid), using
     the SAME fixed column template on every row so date/category/title
     line up consistently — including when a row has no category (that
     cell is simply blank, not removed, so alignment never shifts). */
  .news{ background:var(--paper); padding: clamp(64px,8vw,120px) var(--pad-x); }
  .news__head{
    display:flex; flex-direction:column; gap:16px;
    margin-bottom:clamp(36px,4vw,52px);
  }
  .news__head-text h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1.4; color:var(--ink); margin-top:10px; }
  .news .link-more{
    display:inline-flex; align-items:center; gap:8px;
    align-self:flex-start;
    font-family:var(--mono); font-size:13px; letter-spacing:.06em;
    color:var(--green-deep); border-bottom:1px solid rgba(8,122,75,.4);
    padding-bottom:4px;
    transition: border-color .3s var(--ease), opacity .3s var(--ease);
  }
  .news .link-more:hover{ border-color:var(--green-deep); }

  .news-grid{ display:flex; flex-direction:column; }

  .news-row{
    display:grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "date cat  arrow"
      "title title title";
    align-items:baseline;
    column-gap:14px;
    row-gap:8px;
    padding: 18px 0;
    border-top:1px solid rgba(21,32,27,.12);
    text-decoration:none;
    color:inherit;
  }
  .news-grid .news-row:last-child{ border-bottom:1px solid rgba(21,32,27,.12); }

  .news-row__date{ grid-area:date; font-family:var(--mono); font-size:13px; color:var(--steel); white-space:nowrap; }
  .news-row__category{ grid-area:cat; font-family:var(--mono); font-size:13px; color:var(--green-strong); white-space:nowrap; }
  .news-row__title{
    grid-area:title;
    font-size:16.5px; font-weight:500; line-height:1.65; color:var(--ink);
    transition:color .3s var(--ease);
  }
  .news-row__arrow{
    grid-area:arrow;
    justify-self:end;
    color:var(--steel);
    transition:color .3s var(--ease);
  }
  .news-row:hover .news-row__title,
  .news-row:hover .news-row__arrow,
  .news-row:focus-visible .news-row__title,
  .news-row:focus-visible .news-row__arrow{ color:var(--green-strong); }

  .news-empty{
    font-size:15.5px; color:var(--steel);
    padding: clamp(28px,3vw,40px) 0;
    border-top:1px solid rgba(21,32,27,.12);
    border-bottom:1px solid rgba(21,32,27,.12);
  }

  @media (max-width:860px){
    /* Avoids a lone trailing character (e.g. "い") stranding itself on the
       last line of a long, dynamic post title. Mobile-only so PC's layout
       is untouched. */
    .news-row__title{ text-wrap:pretty; }
  }

  @media (min-width:861px){
    .news__head{ flex-direction:row; align-items:flex-end; justify-content:space-between; }
    .news-row{
      grid-template-columns: 108px 130px 1fr 24px;
      grid-template-areas: "date cat title arrow";
      row-gap:0;
      padding: 22px 0;
    }
    .news-row__title{ font-size:17px; }
  }

  /* ---------- DUAL CTA (store / recruit) ----------
     Each panel is a single <a> — the whole panel is the tap/click target.
     Store and recruit each keep their own subtle hover shade (mint vs
     sand) rather than converging to one shared colour on hover. */
  .dual-cta{
    display:grid; grid-template-columns:1fr 1fr;
    border-top:1px solid rgba(21,32,27,.1);
  }
  .dual-cta__panel{
    position:relative;
    min-height:240px;
    padding: clamp(48px,6vw,72px) var(--pad-x);
    display:flex; flex-direction:column; justify-content:center; gap:14px;
    text-decoration:none;
    transition: background .3s var(--ease);
  }
  .dual-cta__panel--store{ background:var(--mint); border-right:1px solid rgba(21,32,27,.1); }
  .dual-cta__panel--recruit{ background:var(--sand); }
  .dual-cta__panel--store:hover,
  .dual-cta__panel--store:focus-visible{ background:var(--green-soft); }
  .dual-cta__panel--recruit:hover,
  .dual-cta__panel--recruit:focus-visible{ background:#ECE7D8; }

  .dual-cta .eyebrow{ margin-bottom:0; }
  .dual-cta__panel h3{
    display:flex; align-items:center; gap:12px;
    font-size:clamp(1.4rem,2.2vw,1.9rem);
    font-weight:600;
    color:var(--ink);
    transition: color .3s var(--ease);
  }
  .dual-cta__panel:hover h3,
  .dual-cta__panel:focus-visible h3{ color:#0B120D; }
  .dual-cta__panel .arrow{
    font-family:var(--mono); font-size:13px; color:var(--green-deep);
    transition: transform .3s var(--ease);
  }
  .dual-cta__panel:hover .arrow,
  .dual-cta__panel:focus-visible .arrow{ transform:translateX(4px); }

  .dual-cta__panel:focus-visible{
    outline: 2px solid var(--green-deep);
    outline-offset: -2px;
  }

  @media (max-width:860px){
    .dual-cta{ grid-template-columns:1fr; }
    .dual-cta__panel{
      min-height:170px;
      padding: clamp(32px,7vw,44px) var(--pad-x);
    }
    .dual-cta__panel--store{ border-right:none; border-bottom:1px solid rgba(21,32,27,.1); }
    .dual-cta__panel h3{ font-size:clamp(1.25rem,5vw,1.5rem); }
  }

  /* ---------- FOOTER (expanded) ---------- */
  footer.site-footer{
    background:var(--ink); color:#8FA79A;
    padding: clamp(56px,6vw,80px) var(--pad-x) 40px;
    display:block;
    font-family:var(--sans);
  }
  .footer-top{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px;
    padding-bottom: clamp(36px,4vw,52px);
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .footer-mark{ max-width:280px; }
  .footer-mark__logo{ display:inline-block; }
  .footer-mark__logo img{
    display:block;
    width:136px;
    height:auto;
    filter: brightness(0) invert(1);
    opacity:0.9;
  }
  @media (max-width:767px){
    .footer-mark__logo img{ width:126px; }
  }
  .footer-mark__tagline{ margin-top:12px; font-size:14px; line-height:1.7; color:#B7C7BE; }
  .footer-mark__company{ margin-top:6px; font-size:12px; line-height:1.7; color:#6E8377; }
  .footer-links{
    display:grid;
    grid-template-columns:repeat(2,minmax(160px,auto));
    gap: 10px 56px;
  }
  @media (max-width:480px){
    .footer-links{ grid-template-columns:1fr; gap:14px; }
  }
  .footer-links a{ font-size:13.5px; color:#B7C7BE; transition:color .3s var(--ease); }
  .footer-links a:hover{ color:#fff; }
  .footer-links a:focus-visible{
    color:#fff;
    outline: 1px solid currentColor;
    outline-offset: 4px;
  }
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
    padding-top:24px;
    font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:#5F7269;
  }