/* ============================================================
       RESET & VARIABLES
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --white:       #ffffff;
      --bg-soft:     #ffffff;
      --text:        #000000;
      --text-muted:  #888888;
      --blue:        #003cff;
      --blue-btn:    #0655BD;
      --blue-btn-dk: #043d8a;
      --lime:        #AAFF00;
      --text-secondary: #555555;
      --chip-bg:     #f0f0f0;
      --border:      #000000;
      --grid-line:   rgba(0, 60, 255, 0.16);
      /* --noto: 'Zen Maru Gothic', sans-serif; */  /* 日本語のみに戻す場合はこちら */
      --noto:        'Josefin Sans', 'Zen Maru Gothic', sans-serif;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--noto);
      font-weight: 400;
      color: var(--text);
      background-color: var(--white);
      line-height: 1.9;
      -webkit-font-smoothing: antialiased;
      overflow-wrap: break-word;
      line-break: strict;
      overflow-x: hidden; /* guards against the 100vw full-bleed band in .style-features */
    }

    img { max-width: 100%; height: auto; display: block; }
    a   { text-decoration: none; color: inherit; }

    /* ============================================================
       TECHNICAL DETAIL: fixed vertical edge label
       Reinforces the "structural / technical" direction the grid
       background is also going for. Decorative only.
    ============================================================ */
    .tech-label {
      position: fixed;
      right: 14px;
      bottom: 24px;
      writing-mode: vertical-rl;
      font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
      font-size: 11px;
      letter-spacing: 0.15em;
      color: #ffffff;
      mix-blend-mode: difference;
      pointer-events: none;
      z-index: 3000;
    }
    @media (max-width: 860px) {
      .tech-label { display: none; }
    }

    /* ============================================================
       FADE-IN (Intersection Observer)
    ============================================================ */
    /* fade classes are kept in HTML but do nothing — animations removed */

    /* ============================================================
       COMMON LAYOUT
    ============================================================ */
    .inner   { max-width: 1280px; margin: 0 auto; }
    .sec     { padding: 48px 40px; }
    .sec-head { margin-bottom: 36px; }
    /* PC only: Works/News/About/Order Flow/FAQ content edges line up exactly
       with the header's logo (left) and SNS icon (right). The header is a
       single box (max-width:1240 + its own 24px/40px padding); .sec+.inner
       is normally two nested boxes (outer .sec padding, then .inner's own
       max-width), so matching the numbers alone isn't enough — the padding
       has to move from .sec onto .inner so the math collapses to the same
       single-box shape as the header. */
    @media (min-width: 861px) {
      #works.sec, #news.sec, #about.sec, #flow.sec, #faq.sec { padding-left: 0; padding-right: 0; }
      #works .inner, #news .inner, #about .inner, #flow .inner, #faq .inner { max-width: 1240px; padding: 0 40px 0 24px; }
    }
    /* About / News / Order Flow felt too far from their heading; Works
       already reads tight (its .works-cats has a -32px pull-up) and FAQ
       is fine as-is, so only these three get a narrower gap. */
    #about .sec-head,
    #news .sec-head,
    #flow .sec-head {
      margin-bottom: 18px;
    }

    .sec-en {
      font-family: var(--noto);
      font-weight: 700;
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      letter-spacing: 0.04em;
      line-height: 1;
      margin-bottom: 8px;
      text-wrap: balance;
    }
    .sec-ja {
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0.16em;
      color: var(--text);
      transform: translate(0, -10px);
    }

    /* ============================================================
       BUTTONS
    ============================================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--noto);
      font-size: 0.8rem;
      font-weight: 400;
      letter-spacing: 0.14em;
      line-height: 1;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.22s, color 0.22s, border-color 0.22s, transform 0.22s;
      white-space: nowrap;
    }
    .btn:hover { transform: translateY(-2px); }

    .btn-solid {
      /* vertical padding in em (not px) so the optical correction that
         nudges the text down scales proportionally if font-size ever
         changes, instead of the fixed-px offset silently going stale */
      padding: 1.09em 28px 0.86em;
      background: var(--blue-btn);
      color: var(--white);
      border: 1.5px solid var(--blue-btn);
    }
    .btn-solid:hover { background: var(--blue-btn-dk); border-color: var(--blue-btn-dk); }


    .btn-outline-dark {
      padding: 1.09em 28px 0.86em;
      background: var(--white);
      color: var(--text);
      border: 1.25px solid var(--text);
      font-weight: 500;
    }
    .btn-outline-dark:hover { background: var(--text); color: var(--white); }

    .btn-outline-accent {
      padding: 1.17em 30px 0.94em;
      background: #ffffff;
      color: #003cff;
      border: 1.25px solid #003cff;
      font-weight: 500;
      transition: background 0.22s, color 0.22s, border-color 0.22s, transform 0.22s;
    }
    .btn-outline-accent:hover {
      background: #003cff;
      color: #ffffff;
      border-color: #003cff;
    }


    .btn-outline-blue {
      padding: 1.04em 52px 0.81em;
      background: #ffffff;
      color: var(--blue);
      border: 1.25px solid var(--blue);
      font-size: 0.82rem;
      font-weight: 500;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    .btn-outline-blue::before {
      content: "";
      position: absolute;
      left: var(--x, 50%);
      top: var(--y, 50%);
      width: 0;
      height: 0;
      border-radius: 50%;
      background: var(--blue);
      transform: translate(-50%, -50%);
      transition: width 0.5s ease, height 0.5s ease;
      z-index: -1;
    }
    .btn-outline-blue:hover::before { width: 300%; height: 300%; }
    .btn-outline-blue:hover { background: transparent; color: var(--white); transition: color 0.3s ease 0.1s; }

    /* ============================================================
       HEADER
    ============================================================ */
    #hdr {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      height: 80px;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(10px);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    #hdr.scrolled { box-shadow: 0 1px 8px rgba(0,0,0,0.06); }
    #hdr.hdr-hidden { transform: translateY(-100%); }

    .hdr-inner {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 40px 0 24px;
      height: 100%;
      display: flex;
      align-items: center;
    }

    .hdr-logo-nav {
      display: flex;
      align-items: center;
      gap: 48px;
    }

    .logo {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .logo-img  { height: 38px; width: auto; display: block; flex-shrink: 0; }
    .logo-dark { mix-blend-mode: multiply; height: 38px; width: auto; }
    .logo-light { display: none; }

    .hdr-right {
      display: flex;
      align-items: center;
      gap: 36px;
      margin-left: auto;
      flex-shrink: 0;
      align-self: stretch;
    }

    .hdr-sns {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .hdr-sns a {
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.2s;
    }
    .hdr-sns a:hover { opacity: 0.5; }
    .hdr-sns a:hover img { filter: brightness(0); }
    .hdr-sns img { width: 24px; height: 24px; object-fit: contain; display: block; transition: filter 0.2s; }
    .hdr-sns a:first-child img { transform: translate(4px, 4px); }
    .hdr-sns a:last-child img { transform: translate(-1px, 4px); }
    .hdr-sns a[aria-label="Threads"] img { width: 24px; height: 24px; }

    .nav-list { list-style: none; display: flex; gap: 36px; position: relative; top: 8.5px; }

    .nav-list a {
      display: flex;
      align-items: center;
      transition: transform 0.3s ease;
    }
    .nav-list a:hover { transform: scale(1.08); color: var(--blue); }

    .nav-en {
      font-family: var(--noto);
      font-size: 15px;
      line-height: 1;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .hamburger {
      display: none;
      flex-direction: column;
      gap: 6px;
      cursor: pointer;
      background: none; border: none;
      padding: 4px;
      z-index: 1001;
    }
    .hamburger span {
      display: block;
      width: 24px; height: 2px;
      background: #000000;
      border-radius: 1px;
      transition: all 0.3s;
    }

    /* ============================================================
       NEWS TICKER
    ============================================================ */

    /* ============================================================
       HERO
    ============================================================ */
    #hero {
      min-height: calc(100vh - 80px);
      max-width: 1240px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 70px;
      padding: 80px 40px 0 24px;
      overflow: hidden;
    }
    .hero-inner {
      max-width: 560px;
      flex-shrink: 0;
    }
    .hero-text { align-self: center; padding: 72px 0 60px; }
    .hero-kicker {
      font-family: 'Jost', sans-serif;
      font-size: 0.7rem;
      font-weight: 400;
      letter-spacing: 0.24em;
      color: #000000;
      text-transform: uppercase;
      margin-bottom: 7px;
    }
    .hero-catch {
      font-family: 'Kaisei Opti', serif;
      font-size: clamp(2rem, 4.5vw, 3rem);
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: 0.02em;
      margin-bottom: 10px;
      margin-left: -4px;
      color: #000000;
    }
    .hero-catch .accent {
      color: #003cff;
      font-family: 'Kaisei Opti', serif;
      font-weight: 700;
      display: inline-block;
      animation: shake 5s ease infinite;
    }
    .hero-catch .hero-sm { font-size: 0.7em; }
    @keyframes shake {
      0%   { transform: translateX(0); }
      2%   { transform: translateX(-4px); }
      4%   { transform: translateX(4px); }
      6%   { transform: translateX(-4px); }
      8%   { transform: translateX(4px); }
      10%  { transform: translateX(0); }
      100% { transform: translateX(0); }
    }
    .hero-sub {
      font-family: 'Jost', sans-serif;
      font-size: 16px;
      font-weight: 300;
      letter-spacing: 0.12em;
      color: #000000;
      margin-bottom: 44px;
    }
    .hero-btns { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 4px 4px 4px 0; }
    .hero-img { flex: 1 1 0%; max-width: 50%; }
    .hero-img img {
      width: 100%; height: auto; object-fit: contain;
      animation: heroImgReveal 1.1s ease-out 0.15s both;
    }
    @keyframes heroImgReveal {
      from { opacity: 0; filter: blur(18px); }
      to   { opacity: 1; filter: blur(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-img img { animation: none; }
    }

    /* ============================================================
       WORKS  ② 境界線追加
    ============================================================ */
    #works { padding-top: 96px; }

    .works-cats {
      display: flex;
      gap: 20px;
      margin-top: -32px;
      margin-bottom: 28px;
    }
    .works-cat-link {
      position: relative;
      font-size: 14px;
      font-weight: 500;
      color: #003cff;
      letter-spacing: 0.06em;
      transition: color 0.2s;
    }
    .works-cat-link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 1.5px;
      background: #003cff;
      transition: width 0.3s ease;
    }
    .works-cat-link:hover { color: #003cff; }
    .works-cat-link:hover::after { width: 100%; }

    .gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 52px;
    }
    .gal-item {
      overflow: hidden;
      border-radius: 12px;
      aspect-ratio: 1;
      background: #ebebeb;
      position: relative;
      display: block;
      border: 1.5px solid #000000;
    }
    .gal-item img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    .gal-item:hover img { transform: scale(1.07); }

    .gal-overlay {
      position: absolute;
      inset: 0;
      border-radius: 12px;
      background: rgba(0,0,0,0.45);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      opacity: 0;
      transition: opacity 0.3s ease;
      color: white;
      pointer-events: none;
    }
    .gal-item:hover .gal-overlay { opacity: 1; }
    .gal-date { font-size: 0.7rem; font-weight: 400; letter-spacing: 0.12em; }
    .gal-title { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; }

    /* crop out excess white mockup margin on book-cover style shots so density matches full-bleed illustrations */
    .gallery a[href="works/chatgpt-handbook.html"] img { transform: scale(1.7) translateX(2%); }
    .gallery a[href="works/chatgpt-handbook.html"]:hover img { transform: scale(1.8) translateX(2%); }
    .gallery a[href="works/zine-dekinai.html"] img { transform: scale(1.45); }
    .gallery a[href="works/zine-dekinai.html"]:hover img { transform: scale(1.55); }
    .gallery a[href="works/weddingboard-beach.html"] img { transform: scale(1.4); }
    .gallery a[href="works/weddingboard-beach.html"]:hover img { transform: scale(1.5); }
    .gallery a[href="works/osakagasu.html"] img { transform: scale(1.5); }
    .gallery a[href="works/osakagasu.html"]:hover img { transform: scale(1.6); }

    .works-more { text-align: left; }

    /* ============================================================
       STYLE FEATURES (nested inside #about)
    ============================================================ */

    /* now lives inside .style-features (see below), sitting on the same
       illustration as the text row, so it needs no top margin of its own —
       the container's padding handles that spacing */
    .style-subhead {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      text-transform: uppercase;
      margin-bottom: 28px;
    }

    /* Full-bleed illustrated band: breaks out of .inner's 1080px max-width to
       span the full viewport, independent of #about's own left/right padding.
       Fixed height (350px) — content (title + text row) is centered
       vertically within it. --py is a vertical offset driven by
       js/index.js (PC-only parallax: nudges background-position as the
       band scrolls through the viewport). */
    .style-features {
      position: relative;
      left: 50%;
      width: 100vw;
      margin-left: -50vw;
      height: 350px;
      background-color: #1a1a1a; /* paints while the image loads */
      background-image: url('../images/mystyle_PC.jpg');
      background-position: center calc(50% + var(--py, 0px));
      background-size: cover;
      background-repeat: no-repeat;
      overflow: hidden;
    }
    .style-features-inner {
      max-width: 1080px;
      height: 100%;
      margin: 0 auto;
      padding: 0 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .style-features-row {
      display: flex;
      align-items: flex-start; /* keep all 3 titles aligned at the same top edge, regardless of description length */
      justify-content: space-between;
      gap: 24px;
    }
    .style-feature {
      flex: 1 1 0;
      min-width: 0;
      max-width: 280px;
    }
    /* base size; js/index.js shrinks title/desc per-element (down to a floor)
       so the full text keeps fitting — title within 1 line, description
       within ~3 lines' worth of height — as the column narrows, instead of
       wrapping to a clipped extra line */
    .style-feature-title {
      font-size: 1.05rem;
      font-weight: 700;
      color: #fff;
      letter-spacing: 0.04em;
      margin-bottom: 8px;
    }
    .style-feature-desc {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.7;
      color: #fff;
      overflow: hidden;
    }

    /* ============================================================
       ABOUT
    ============================================================ */

    /* solid brand blue — same color & strength as the fullscreen mobile menu —
       marks the About profile area, distinct from the plain white sections
       around it. Text within switches to white/light for contrast, matching
       how the mobile menu itself handles this same blue.
       Bottom padding is dropped so the My Style illustration band (the
       section's last child) reaches the section's bottom edge with no blue
       showing below it — About = blue, My Style = the illustration, cleanly
       divided with no blue strip in between. */
    #about {
      background-color: #003cff;
      padding-bottom: 0;
    }
    /* the section's own bottom padding is gone (so the illustration band can
       reach the edge), so give the profile content its own breathing room
       above that band instead */
    #about .inner {
      padding-bottom: 40px;
    }
    #about .sec-en,
    #about .sec-ja,
    #about .about-name-en { color: #fff; }
    #about .about-name-ja,
    #about .tools-label { color: rgba(255, 255, 255, 0.75); }
    #about .about-bio { color: rgba(255, 255, 255, 0.92); }
    #about .tool-tag { background: rgba(255, 255, 255, 0.15); color: #fff; }
    /* .style-subhead now sits over the My Style illustration (not the flat
       blue), so it gets the same auto-inverting treatment as the other
       My Style text instead of the translucent white used on the blue area */
    #about .style-subhead { color: #fff; }

    .about-grid {
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 80px;
      align-items: start;
    }
    .about-photo {
      position: relative;
      margin-bottom: 20px;
      perspective: 900px;
      cursor: pointer;
      /* drop-shadow (not box-shadow) follows the card art's actual visible
         silhouette, ignoring the transparent padding baked into the PNG —
         box-shadow was casting a shadow around that transparent margin too */
      filter: drop-shadow(-16px 14px 12px rgba(0,0,0,0.5));
    }

    /* "touch me" blob bubble: overlaps the card's top-left corner, tail
       pointing down toward the character's mouth. Fades in together with
       the card's wiggle-in, js/index.js fades it back out ~2s later. */
    .touch-bubble {
      position: absolute;
      top: -20px;
      left: -18px;
      z-index: 5;
      width: 120px;
      height: 112px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: var(--lime);
      color: #000000;
      font-family: 'Keania One', var(--noto);
      font-size: 22px;
      line-height: 1.15;
      /* slightly irregular circle so it reads as a hand-drawn blob, not a perfect circle */
      border-radius: 58% 42% 55% 45% / 45% 55% 42% 58%;
      pointer-events: none;
      opacity: 0;
      transform: rotate(-6deg) scale(0.85);
      transform-origin: 80% 80%;
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .touch-bubble::after {
      content: '';
      position: absolute;
      bottom: -8px;
      right: 20px;
      width: 22px;
      height: 22px;
      background: var(--lime);
      border-radius: 30%;
      transform: rotate(45deg);
    }
    .touch-bubble.is-visible { opacity: 1; transform: rotate(-6deg) scale(1); }
    /* Okui Chai ⇄ Comari 切り替え時、パネルの実際の高さに自動追従させる
       （固定高のままだと短い方のパネル表示中にMY STYLEとの間が空きすぎる）。
       min-heightをtransitionさせるとComariのイラストがせり上がる演出中に
       position:absoluteの位置計算が乱れる問題があったため、瞬時に切り替える。 */

    @keyframes card-wiggle {
      0%   { transform: translateX(0) rotate(0deg); }
      20%  { transform: translateX(-10px) rotate(-4deg); }
      40%  { transform: translateX(8px) rotate(3deg); }
      60%  { transform: translateX(-5px) rotate(-1.5deg); }
      80%  { transform: translateX(2px) rotate(0.5deg); }
      100% { transform: translateX(0) rotate(0deg); }
    }
    .about-photo.wiggle-in { animation: card-wiggle 900ms ease; }
    @media (prefers-reduced-motion: reduce) {
      .about-photo.wiggle-in { animation: none; }
    }

    /* About card flip */
    .about-card { width: 100%; position: relative; transform-style: preserve-3d; }
    .about-card-front {
      position: relative;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .about-card-back {
      position: absolute; inset: 0; overflow: hidden;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transform: rotateY(180deg);
    }
    .about-card-front img { width: 100%; height: auto; display: block; }
    .back-ura,
    .back-komari { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; }
    .back-komari { opacity: 0; }
    .about-panel { position: relative; transition: filter 0.35s ease, opacity 0.35s ease; }
    .about-panel.blur-out { filter: blur(10px); opacity: 0; pointer-events: none; }
    /* Comariパネルのみ、テキスト部分だけをblur-out対象にする（.comari-illustは除外）。
       理由はindex.html側のコメント参照。 */
    .about-panel-fade { transition: filter 0.35s ease, opacity 0.35s ease; }
    .about-panel-fade.blur-out { filter: blur(10px); opacity: 0; pointer-events: none; }

    .about-name-en {
      font-family: var(--noto);
      font-weight: 700;
      font-size: 1.6rem;
      letter-spacing: 0.06em;
      margin-bottom: 0;
    }
    .about-name-ja {
      font-size: 0.78rem;
      font-weight: 300;
      letter-spacing: 0.1em;
      color: var(--text-muted);
      margin-bottom: 24px;
      transform: translate(0, -10px);
    }
    .about-bio {
      font-size: 16px;
      font-weight: 300;
      line-height: 1.5;
      color: var(--text-secondary);
      margin-bottom: 36px;
    }

    /* こまりさんパネル：テキスト＋三角配置のイラスト */
    .comari-layout {
      display: flex;
      align-items: flex-start;
      gap: 32px;
    }
    .comari-bio {
      flex: 1 1 auto;
      max-width: 280px;
    }
    .comari-illust {
      position: absolute;
      top: 0;
      right: 0;
      width: 336px;
      height: 384px;
    }
    .comari-img {
      position: absolute;
      width: 144px;
      height: auto;
      object-fit: contain;
    }
    .comari-img-1 { top: 0;    left: 50%; transform: translateX(-50%); z-index: 2; }
    .comari-img-2 { bottom: 0; left: 0; z-index: 1; }
    .comari-img-3 { bottom: 0; right: 0; z-index: 1; }
    .comari-img-4 { display: none; }

    @keyframes comariRise {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes comariRiseCenter {
      from { opacity: 0; transform: translateX(-50%) translateY(18px); }
      to   { opacity: 1; transform: translateX(-50%) translateY(0); }
    }
    @media (min-width: 861px) {
      .comari-img-1 { animation: comariRiseCenter 700ms ease both; animation-delay: 350ms; }
      .comari-img-2 { animation: comariRise       700ms ease both; animation-delay: 520ms; }
      .comari-img-3 { animation: comariRise       700ms ease both; animation-delay: 690ms; }
    }
    @media (prefers-reduced-motion: reduce) {
      .comari-img-1, .comari-img-2, .comari-img-3 { animation: none; }
    }

    .tools-label {
      font-size: 13px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      font-weight: 700;
      margin-top: 20px;
      margin-bottom: 7px;
    }
    .tools-list { display: flex; flex-wrap: wrap; gap: 8px; }
    .tool-tag {
      display: inline-block;
      padding: 6px 12px 2px;
      background: var(--chip-bg);
      border-radius: 20px;
      font-size: 0.73rem;
      font-weight: 500;
      color: var(--text-secondary);
      letter-spacing: 0.06em;
    }

    /* ============================================================
       CONTACT CTA
    ============================================================ */
    /* hero buttons: ripple-fill on hover, matching contact form button */
    #hero .btn-outline-dark,
    #hero .btn-outline-accent {
      color: #000000;
      border: 1.25px solid #000000;
      background: #ffffff;
      box-shadow: none;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      transition: color 0.22s;
    }
    #hero .btn-outline-dark::before,
    #hero .btn-outline-accent::before {
      content: "";
      position: absolute;
      left: var(--x, 50%);
      top: var(--y, 50%);
      width: 0;
      height: 0;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.5s ease, height 0.5s ease;
      z-index: -1;
    }
    #hero .btn-outline-dark::before { background: #003cff; }
    #hero .btn-outline-accent::before { background: #000000; }
    #hero .btn-outline-dark:hover::before,
    #hero .btn-outline-accent:hover::before {
      width: 300%;
      height: 300%;
    }
    #hero .btn-outline-dark:hover,
    #hero .btn-outline-accent:hover {
      background: transparent;
      color: #ffffff;
      transition: color 0.3s ease 0.1s;
    }
    /* footer SNS png icons */
    .ft-sns .sns-btn img {
      width: 18px; height: 18px;
      object-fit: contain;
      filter: brightness(0);
      opacity: 0.45;
      display: block;
      transition: opacity 0.2s;
    }
    .ft-sns .sns-btn[aria-label="Threads"] img { width: 20px; height: 20px; }
    .ft-sns .sns-btn:hover img { opacity: 0.9; }
    /* ============================================================
       FOOTER
    ============================================================ */
    footer {
      background: #D8E1E8 url('../images/original_works/nankachigau_フッター用.png') center / cover no-repeat;
      color: #000000;
      text-align: left;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      /* sits above the fixed .tech-label (z-index:3000) so the label
         slides naturally behind it as the footer scrolls into view,
         instead of being toggled off abruptly */
      position: relative;
      z-index: 3500;
    }

    .footer__inner {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 60px 44px 40px;
      box-sizing: border-box;
    }

    .ft-inner { display: flex; flex-direction: column; }

    .ft-logo-top {
      display: inline-block;
      position: relative;
      margin-bottom: 28px;
    }
    .ft-logo-top img {
      height: 32px;
      width: auto;
      display: block;
    }
    .ft-logo-top::after {
      content: "";
      position: absolute;
      inset: 0;
      background-color: var(--footer-accent, rgb(41, 122, 77));
      -webkit-mask-image: url('../images/ロゴA.png');
      mask-image: url('../images/ロゴA.png');
      -webkit-mask-mode: alpha;
      mask-mode: alpha;
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      opacity: 0;
      transition: opacity 0.2s;
      pointer-events: none;
    }
    .ft-logo-top:hover::after {
      opacity: 1;
    }

    /* 3カラム */
    .ft-cols {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      align-items: start;
      margin-bottom: 48px;
    }
    .ft-col {
      padding: 0 40px;
    }
    .ft-col:first-child { padding-left: 0; }
    .ft-col:last-child  { padding-right: 0; }
    .ft-col + .ft-col {
      border-left: 1.5px solid #000000;
    }

    /* 縦ナビ */
    .ft-nav {
      display: flex;
      flex-direction: column;
      gap: 14px;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .ft-nav a {
      display: inline-block;
      color: #000000;
      text-decoration: none;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 0.04em;
      transition: color 0.2s;
      text-underline-offset: 4px;
    }
    .ft-nav a:hover {
      color: var(--footer-accent, rgb(41, 122, 77));
      text-decoration: underline;
    }

    /* 中央：SHARE + SNS */
    .ft-col-center { display: flex; flex-direction: column; gap: 20px; }
    .ft-share {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 28px;
    }
    .ft-share-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.22em;
      color: #000000;
    }
    .ft-sns { display: flex; gap: 10px; }
    .sns-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px; height: 40px;
      border: 1.5px solid #000000;
      border-radius: 50%;
      background: transparent;
      transition: background 0.2s, border-color 0.2s, transform 0.2s;
    }
    .sns-btn:hover { background: var(--lime); border-color: var(--lime); transform: scale(1.08); }
    .sns-btn:hover img { opacity: 0.85; }

    /* 右カラム：CONTACT */
    .ft-contact-head-row { margin-bottom: 16px; }
    .ft-contact-heading {
      font-family: var(--noto);
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      font-weight: 700;
      letter-spacing: 0.04em;
      line-height: 1;
      color: #000000;
    }
    .ft-contact-desc {
      font-size: 12px;
      font-weight: 300;
      line-height: 1.85;
      color: #000000;
      margin-bottom: 16px;
    }
    /* モバイルの中央寄せレイアウト専用の改行。PCでは無効化 */
    .contact-mobile-break { display: none; }
    .ft-contact-pp-link {
      text-decoration: underline;
      text-underline-offset: 2px;
      color: inherit;
      transition: color 0.2s;
    }
    .ft-contact-pp-link:hover { color: #000000; }
    .ft-contact-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 500;
      color: #000000;
      cursor: pointer;
      margin-bottom: 20px;
      user-select: none;
    }
    .ft-contact-check {
      width: 16px; height: 16px;
      cursor: pointer;
      accent-color: #000000;
    }
    .ft-contact-form-btn {
      display: inline-block;
      padding: 12px 24px 10px;
      border: 1.25px solid #000000;
      border-radius: 8px;
      background: transparent;
      color: #000000;
      font-family: var(--noto);
      font-size: 0.82rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-decoration: none;
      transition: background 0.22s, color 0.22s, border-color 0.22s, opacity 0.22s;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    .ft-contact-form-btn::before {
      content: "";
      position: absolute;
      left: var(--x, 50%);
      top: var(--y, 50%);
      width: 0;
      height: 0;
      border-radius: 50%;
      background: #000000;
      transform: translate(-50%, -50%);
      transition: width 0.5s ease, height 0.5s ease;
      z-index: -1;
    }
    .ft-contact-form-btn[aria-disabled="true"] {
      opacity: 0.35;
      cursor: not-allowed;
      pointer-events: none;
    }
    .ft-contact-form-btn[aria-disabled="false"]:hover::before { width: 300%; height: 300%; }
    .ft-contact-form-btn[aria-disabled="false"]:hover {
      background: transparent;
      color: #ffffff;
      border-color: #000000;
      transition: color 0.3s ease 0.1s;
    }
    /* 紙飛行機の遊びイラスト。PCのCONTACT欄は横幅が狭く置き場がないので非表示、
       モバイルの独立セクション化後にできる右側の余白にだけ表示する */
    .ft-contact-deco { display: none; }

    /* 区切り線 */
    /* 下段：注意書き＋プライバシー */
    .ft-logo-area { }
    .ft-overlay {
      padding: 8px 40px 12px;
    }
    .ft-bottom-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 40px;
    }
    .ft-legal { flex: 1; }
    /* PCでは常時展開・トグルボタンは非表示（モバイルのみアコーディオン化） */
    .ft-legal-toggle { display: none; }
    .ft-legal-body { max-height: none; overflow: visible; }
    .ft-legal-text {
      font-size: 10px;
      font-weight: 400;
      line-height: 1.4;
      color: rgba(255,255,255,0.55);
    }
    .ft-legal-text p + p { margin-top: 0.2em; }

    .ft-copy {
      font-size: 9.5px;
      font-weight: 300;
      color: rgba(255,255,255,0.55);
      letter-spacing: 0.08em;
      line-height: 1.9;
      text-align: left;
      padding: 0.1em 0 0;
    }

    /* 特大ロゴ */
    .footer-logo {
      display: block;
      filter: brightness(0) invert(1);
      opacity: 0.7;
      width: 100%;
      height: auto;
      padding: 0 40px 34px;
      box-sizing: border-box;
      margin: 0;
    }

    /* ============================================================
       NEWS
    ============================================================ */
    /* News group only sits on its own graph-paper "card" — rest of the
       page stays plain white */
    .news-panel {
      padding: 24px; /* multiple of the 24px grid so the panel's top edge lands on a grid line */
      border: 1.5px solid #000000;
      border-radius: 8px;
      background-color: #ffffff;
      background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .news-list { list-style: none; padding: 0; margin: 0; }
    .news-item { border-bottom: 1.5px solid var(--border); }
    .news-item:first-child { border-top: 1.5px solid var(--border); }
    /* [サムネ152px] [日付80px] [バッジ76px] [タイトル1fr] — icon leftmost */
    .news-link {
      display: grid;
      grid-template-columns: 152px 80px 76px 1fr;
      align-items: center;
      column-gap: 20px;
      padding: 14px 4px; /* thumb(92px) + 14+14 = 120px = exactly 5 grid squares, so each row's divider lands on a grid line */
      text-decoration: none;
      color: var(--text);
      transition: background-color 0.15s ease;
    }
    .news-link:hover .news-title { color: var(--blue); transform: scale(1.08); }
    /* タップ/クリックできることが一目で伝わるよう、タイトル末尾に矢印を付ける
       （「すべて見る →」と同じ視覚言語）。タップ時は背景を薄いブルーで一瞬光らせる。 */
    .news-title::after {
      content: '→';
      margin-left: 8px;
      color: var(--text-muted);
      transition: color 0.15s ease;
    }
    .news-link:hover .news-title::after { color: var(--blue); }
    .news-link:active { background-color: var(--grid-line); }
    .news-thumb {
      width: 152px;
      aspect-ratio: 16 / 9;
      border-radius: 6px;
      overflow: hidden;
    }
    .news-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .news-title {
      display: inline-block;
      transform-origin: left center;
      font-size: 0.9rem;
      font-weight: 400;
      line-height: 1.6;
      transition: color 0.2s, transform 0.2s;
    }

    /* ============================================================
       FEATURE GRID — reusable "1 big item + small list" layout,
       used by Works on index.html
    ============================================================ */
    .feature-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr;
      gap: 28px;
      align-items: start;
    }
    .feature-main {
      display: block;
      text-decoration: none;
      color: var(--text);
    }
    .feature-main-thumb {
      width: 100%;
      aspect-ratio: 16 / 10;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 14px;
    }
    .feature-main-thumb img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: 50% 10%; display: block;
      transition: transform 0.45s ease;
    }
    .feature-main:hover .feature-main-thumb img { transform: scale(1.05); }
    .feature-main-info { display: flex; flex-direction: column; gap: 8px; }
    .feature-main-title {
      font-size: 1.05rem;
      font-weight: 700;
      line-height: 1.5;
      transition: color 0.2s;
    }
    .feature-main:hover .feature-main-title { color: var(--blue); }

    .feature-list-col { display: flex; flex-direction: column; }
    .feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
    .feature-list-link {
      display: flex;
      gap: 12px;
      align-items: center;
      text-decoration: none;
      color: var(--text);
    }
    .feature-list-thumb {
      flex: 0 0 184px;
      width: 184px;
      height: 184px;
      border-radius: 6px;
      overflow: hidden;
    }
    .feature-list-col .works-more { margin-top: 20px; }
    .feature-list-thumb img {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
      transition: transform 0.45s ease;
    }
    .feature-list-link:hover .feature-list-thumb img { transform: scale(1.06); }
    .feature-list-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .feature-list-title {
      font-size: 0.82rem;
      font-weight: 400;
      line-height: 1.5;
      transition: color 0.2s;
    }
    .feature-list-link:hover .feature-list-title { color: var(--blue); }

    /* mobile: big image up top with a black caption bar, then the rest of
       the items become a 2-column grid of small cards (image on top,
       text below) instead of the desktop's horizontal thumb+text rows */
    @media (max-width: 860px) {
      .feature-grid { grid-template-columns: 1fr; gap: 20px; }
      .feature-main-thumb { margin-bottom: 0; }
      .feature-main-info {
        background: #000000;
        color: #ffffff;
        padding: 16px;
        gap: 4px;
      }
      .feature-main-title { color: #ffffff; }
      .feature-main:hover .feature-main-title { color: #ffffff; }
      .feature-main .news-date { color: rgba(255,255,255,0.6); }

      .feature-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }
      .feature-list-link { flex-direction: column; align-items: flex-start; }
      .feature-list-thumb { width: 100%; height: auto; aspect-ratio: 1; flex: none; }
    }

    .news-date {
      font-size: 0.78rem;
      color: var(--text-muted);
      letter-spacing: 0.05em;
    }
    .news-cat {
      display: inline-block;
      font-size: 0.62rem;
      letter-spacing: 0.1em;
      padding: 0.5em 10px 0.1em;
      border-radius: 20px;
      border: 1px solid var(--text-secondary);
      text-align: center;
      line-height: 1.6;
      white-space: nowrap;
    }
    /* サイトのブランドカラーからカテゴリーごとに色分け */
    .news-cat.cat-media { background: var(--blue); border-color: var(--blue); color: #ffffff; }
    .news-cat.cat-work  { background: #E8732A;     border-color: #E8732A;     color: #ffffff; }
    .news-cat.cat-news  { background: #1A5C3A;     border-color: #1A5C3A;     color: #ffffff; }
    .news-cat.cat-event { background: #B8860B;     border-color: #B8860B;     color: #ffffff; } /* サイトのyellow(#ffb742)を地色として読める濃さに調整 */
    .news-cat.cat-goods { background: #5C8A00;     border-color: #5C8A00;     color: #ffffff; } /* サイトのlime(#AAFF00)を地色として読める濃さに調整 */
    .news-more-wrap { text-align: right; margin-top: 28px; }
    .news-more {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.75rem;
      letter-spacing: 0.12em;
      color: var(--text-muted);
      text-decoration: none;
      transition: color 0.2s;
    }
    .news-more:hover { color: var(--text); }
    .news-more::after { content: '→'; }

    /* ============================================================
       ORDER FLOW（タイムライン）
    ============================================================ */

    /* ── Order Flow 横型 ── */
    .flow-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      position: relative;
    }

    /* STEPとSTEPをつなぐ矢印ライン */
    .flow-grid::before {
      content: '';
      position: absolute;
      top: 158px;
      left: calc(100% / 10);
      right: calc(100% / 10);
      height: 1.5px;
      background: linear-gradient(to right, #000000, #003cff);
      z-index: 0;
      transform-origin: left center;
      transform: scaleX(0);
      transition: transform 0.9s ease-out;
    }
    .flow-grid.line-visible::before {
      transform: scaleX(1);
    }

    .flow-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 0 8px;
      position: relative;
      z-index: 1;
    }

    .flow-img {
      width: 120px; height: 120px;
      object-fit: contain;
      border-radius: 8px;
      margin-bottom: 16px;
    }
    .flow-item--span2 {
      grid-column: span 2;
      align-items: center;
    }
    .flow-img--span2 {
      width: 100%; height: 120px;
      object-fit: contain;
      border-radius: 8px;
      margin-bottom: 16px;
    }
    .flow-span2-steps {
      display: flex;
      width: 100%;
      gap: 16px;
    }
    .flow-sub-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 0 8px;
    }

    .flow-badge {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: #000000;
      color: var(--white);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
      box-shadow: 0 0 0 4px rgba(51,51,51,0.18);
      margin-bottom: 20px;
      flex-shrink: 0;
    }
    .flow-step {
      font-size: 0.42rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      line-height: 1;
    }
    .flow-num {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1;
    }

    .flow-title {
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 8px;
      line-height: 1.4;
      width: max-content;
    }
    .flow-desc {
      font-size: 13px;
      font-weight: 400;
      color: #666;
      line-height: 1.75;
      text-align: center;
      letter-spacing: -0.02em;
      font-feature-settings: "halt";
      display: inline-block;
    }
    .flow-note {
      display: inline-block;
      margin-top: 8px;
      font-size: 0.65rem;
      font-weight: 500;
      color: var(--text-secondary);
      background: var(--chip-bg);
      padding: 3px 10px;
      border-radius: 20px;
    }

    @media (max-width: 900px) {
      .flow-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 0;
      }
      .flow-grid::before { display: none; }
    }
    @media (max-width: 560px) {
      .flow-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
    }
    @media (max-width: 768px) {
      .flow-desc br { display: none; }
    }

    /* ============================================================
       FAQ
    ============================================================ */

    .faq-categories { display: flex; flex-direction: column; gap: 48px; }

    .faq-cat-title {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      color: var(--text);
      padding-bottom: 12px;
      margin-bottom: 4px;
    }

    .faq-item {
      border: 1.5px solid var(--border);
      border-radius: 16px;
      margin-bottom: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      background: var(--white);
    }
    .faq-item:last-child { margin-bottom: 0; }

    .faq-q {
      width: 100%;
      background: none;
      border: none;
      text-align: left;
      padding: 16px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      cursor: pointer;
      font-family: var(--noto);
      font-size: 16px;
      font-weight: 500;
      color: var(--text);
      line-height: 1.6;
    }
    .faq-q:hover .faq-q-text { color: var(--blue); }
    .faq-q:hover .faq-icon { border-color: var(--blue); background: rgba(15,124,181,0.12); }

    .faq-q-text { flex: 1; transition: color 0.2s; }

    .faq-icon {
      width: 24px; height: 24px;
      border-radius: 50%;
      border: 1.5px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--blue);
      font-size: 1rem;
      line-height: 1;
      transition: background 0.22s, border-color 0.22s, transform 0.32s;
      font-style: normal;
    }
    .faq-item.open .faq-icon {
      background: var(--blue);
      border-color: var(--blue);
      color: var(--white);
      transform: rotate(45deg);
    }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.38s ease;
    }
    .faq-item.open .faq-a { max-height: 240px; }

    .faq-a-inner {
      padding: 0 20px 18px;
      font-size: 16px;
      font-weight: 400;
      color: #666;
      line-height: 1.95;
    }
    .faq-list {
      margin: 8px 0 8px 1.2em;
      padding: 0;
      list-style: disc;
    }
    .faq-list li {
      margin-bottom: 4px;
    }
    .faq-a-inner a {
      color: var(--blue);
      text-decoration: underline;
    }

/* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 960px) {
      .hdr-inner { padding: 0 20px; }
      .nav-list  { gap: 20px; }
      .hdr-right { gap: 10px; margin-left: auto; align-self: center; }
    }
    @media (max-width: 860px) {
      .sec { padding: 40px 28px; }
      #hero { padding: 56px 24px 48px; flex-direction: column; align-items: center; }
      .hero-text { padding: 0; }
      .hero-inner { max-width: 100%; order: 2; }
      .hero-img { flex: 0 0 auto; max-width: 100%; width: 100%; order: 1; }
      .gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .about-grid { grid-template-columns: 1fr; gap: 20px; position: relative; }
      .about-photo { max-width: 200px; margin: 0 auto 10px; }
      /* カード幅が狭くなる分、吹き出しも縮小してさらに左へ逃がし、顔に被る面積を減らす */
      .touch-bubble {
        top: -12px;
        left: -34px;
        width: 82px;
        height: 76px;
        font-size: 15px;
      }
      .touch-bubble::after {
        bottom: -6px;
        right: 13px;
        width: 15px;
        height: 15px;
      }
      .comari-layout { flex-direction: column; gap: 24px; }
      .comari-bio { max-width: 100%; }

      /* My Style, mobile: scattered "sketchbook" layout over a tall illustration
         (see index.html comment) instead of the PC's 3-column row. Height
         tracks the illustration's own aspect ratio (1:1.5) rather than a
         fixed px value, so text stays aligned to the art as width changes.
         Placeholder positions only — to be fine-tuned once the actual
         illustration is supplied, same as the PC version. */
      .style-features {
        height: auto;
        aspect-ratio: 1 / 1.5;
        background-image: url('../images/mystyle_sma.png');
        background-position: center; /* no parallax on mobile — image matches the box exactly, no slack to shift */
      }
      .style-features-inner {
        position: relative;
        height: 100%;
        padding: 0;
      }
      .style-subhead {
        position: absolute;
        top: 6%;
        left: 6%;
        max-width: 80%;
        margin-bottom: 0;
      }
      /* let .style-feature children position directly against
         .style-features-inner instead of the row's own flex box */
      .style-features-row { display: contents; }
      .style-feature { position: absolute; max-width: 62%; }
      /* evenly spaced (26% steps); shifted up as a set so the gap between
         the title and item 1 roughly matches the gap below item 3's
         description and the band's bottom edge */
      .style-feature:nth-child(1) { top: 22%; left: 6%; text-align: left; }
      .style-feature:nth-child(2) { top: 48%; right: 6%; text-align: right; }
      .style-feature:nth-child(3) { top: 74%; left: 6%; text-align: left; }

      .news-panel { padding: 20px 16px 16px; }
      /* News: 4列グリッド(サムネ/日付/バッジ/タイトル)は狭い画面だとタイトル列が
         潰れて1文字ずつ改行される崩れが起きるため、サムネを非表示にして
         [日付+バッジ] → [タイトル] の2行レイアウトに組み直す */
      .news-thumb { display: none; }
      .news-link {
        grid-template-columns: auto 1fr;
        grid-template-areas:
          "date cat"
          "title title";
        row-gap: 8px;
        column-gap: 12px;
        padding: 16px 4px;
      }
      .news-date  { grid-area: date; }
      .news-cat   { grid-area: cat; }
      .news-title { grid-area: title; }

      /* Comari images: float in a small cluster around the card instead of the
         desktop-style block next to the bio text. #panelComari drops its own
         positioning context so .comari-illust can anchor to .about-grid (i.e.
         to the card's row) rather than to the text panel below it. */
      #panelComari { position: static; }
      .comari-illust {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 260px;
        height: 300px;
        pointer-events: none;
      }
      .comari-img { width: 92px; }
      .comari-img-1 { top: 49px; left: -55px; width: 83px; }
      .comari-img-2 { bottom: -10px; left: -50px; }
      .comari-img-3 { bottom: -10px; right: -65px; }
      .comari-img-4 { display: block; top: 40px; right: -62px; left: auto; z-index: 1; }

      .comari-img-1,
      .comari-img-2,
      .comari-img-3,
      .comari-img-4 {
        opacity: 0;
        transform: scale(0.3) translateY(14px);
        transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      .comari-img-1.comari-in-view,
      .comari-img-2.comari-in-view,
      .comari-img-3.comari-in-view,
      .comari-img-4.comari-in-view { transform: scale(1) translateY(0); }
      .comari-img-1.comari-in-view,
      .comari-img-2.comari-in-view,
      .comari-img-3.comari-in-view,
      .comari-img-4.comari-in-view { opacity: 1; }
      .comari-img-1.comari-in-view { transition-delay: 0s; }
      .comari-img-2.comari-in-view { transition-delay: 0.08s; }
      .comari-img-3.comari-in-view { transition-delay: 0.16s; }
      .comari-img-4.comari-in-view { transition-delay: 0.24s; }
    }
    @media (prefers-reduced-motion: reduce) {
      .comari-img-1, .comari-img-2, .comari-img-3, .comari-img-4 { transition: none; opacity: 1; transform: none; }
    }

    @media (max-width: 850px) {
      .hdr-inner { padding: 0 24px; align-items: center; }
      #hdr { background: rgba(255,255,255,0.95); }
      .logo-dark  { display: block; }
      .logo-light { display: none; }
      .nav-list   { display: none; }
      .hdr-sns    { display: none; }
      .hamburger  { display: flex; }
      #hero  { padding: 48px 20px; }
      .sec   { padding: 32px 20px; }
      .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
      /* hero buttons: kill hover-only motion on smartphone (no mouse to drive the ripple/lift) */
      #hero .btn:hover { transform: none; }
      #hero .btn-outline-dark:hover::before,
      #hero .btn-outline-accent:hover::before {
        width: 0;
        height: 0;
      }
      #hero .btn-outline-dark:hover,
      #hero .btn-outline-accent:hover {
        background: transparent;
        color: #000000;
      }
      /* footer contact button: same ripple, same mobile kill */
      .ft-contact-form-btn[aria-disabled="false"]:hover::before {
        width: 0;
        height: 0;
      }
      .ft-contact-form-btn[aria-disabled="false"]:hover {
        background: transparent;
        color: #000000;
      }
      /* モバイルはfooterの縦幅に対して背景イラストが占める面積が広く主張しすぎるため、
         薄い白のフィルターを重ねてコンテンツを読みやすくする */
      footer {
        min-height: unset;
        background:
          linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)),
          url('../images/original_works/nankachigau_フッター用.png') center / cover no-repeat,
          #D8E1E8;
      }
      .footer__inner { padding: 48px 24px 40px; }
      .footer-logo { padding: 0 24px 16px; }
      .ft-cols { grid-template-columns: 1fr; }
      .ft-col { padding: 0 0 28px 0 !important; border-left: none !important; }
      .ft-col + .ft-col { border-top: 1.5px solid #000000; padding-top: 28px; }
      .ft-col-center { display: none; }
      .ft-bottom-row { flex-direction: column; gap: 12px; }

      /* CONTACTはJS側でFAQとフッターの間へ移動させる。移動先での見え方を独立した
         「締めのセクション」として整える：白背景でFAQ（方眼罫）と差別化し、
         見出し～ボタンまでを中央寄せ、縦の余白もたっぷり確保する */
      .contact-mobile-slot {
        background: var(--white);
        border-top: 1.5px solid #000000;
        border-bottom: 1.5px solid #000000;
        padding: 56px 28px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      /* 見出し「CONTACT」→紙飛行機イラスト→本文、の順に縦並び・中央寄せ */
      .ft-contact-head-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        margin-bottom: 4px;
      }
      .ft-contact-deco {
        display: block;
        width: 210px;
        height: auto;
        margin: 4px 0 4px;
        pointer-events: none;
      }
      .ft-contact-desc { max-width: none; margin-bottom: 24px; font-size: 10px; }
      .ft-contact-label { margin-bottom: 24px; }
      .contact-mobile-break { display: inline; }

      /* 並び順を組み替え：ナビ＋CONTACT → 注意文 → 特大ロゴ（一番下）。
         CONTACT下の余白を注意文で埋め、ロゴは最後に配置する。 */
      footer { display: flex; flex-direction: column; }
      .footer__inner { order: 1; }
      .ft-overlay    { order: 2; padding-top: 24px; }
      .ft-logo-area  { order: 3; }

      /* 注意文はFAQと同じ開閉式に。読みやすいよう背景に合わせて濃色にする */
      .ft-legal-toggle {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        background: none;
        border: none;
        border-top: 1.5px solid rgba(0,0,0,0.15);
        padding: 14px 0;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.04em;
        color: #000000;
        cursor: pointer;
        text-align: left;
      }
      .ft-legal-icon {
        width: 20px; height: 20px;
        flex-shrink: 0;
        border-radius: 50%;
        border: 1.5px solid rgba(0,0,0,0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        line-height: 1;
        transition: background 0.22s, border-color 0.22s, transform 0.32s;
      }
      .ft-legal.open .ft-legal-icon {
        background: #000000;
        border-color: #000000;
        color: #ffffff;
        transform: rotate(45deg);
      }
      .ft-legal-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.38s ease;
      }
      .ft-legal.open .ft-legal-body { max-height: 320px; }
      .ft-legal-text {
        color: rgba(0,0,0,0.6);
        padding: 2px 0 14px;
      }
      .ft-copy { color: rgba(0,0,0,0.55); }
    }

    /* ============================================================
       FULLSCREEN MOBILE MENU
    ============================================================ */
    .mobile-menu {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: 1500;
      background: #003cff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding-top: 136px;
      gap: 0;
      transform: translateY(-100%);
      transition: transform 0.4s ease;
      pointer-events: none;
      overflow-y: auto;
    }
    .mobile-menu.open {
      transform: translateY(0);
      pointer-events: all;
    }

    .mobile-menu-close {
      position: absolute;
      top: 20px; right: 20px;
      width: 44px; height: 44px;
      border: none;
      background: none;
      color: #ffffff;
      font-size: 1.5rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--noto);
      transition: opacity 0.2s;
    }
    .mobile-menu-close:hover { opacity: 0.55; }

    .mobile-nav-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      margin-bottom: 52px;
    }
    .mobile-nav-list a {
      font-size: 24px;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 0.06em;
      transition: opacity 0.2s;
    }
    .mobile-nav-list a:hover { opacity: 0.65; }

    .mobile-menu-cta {
      display: inline-block;
      padding: 16px 40px 10px;
      background: #000000;
      color: #ffffff;
      border: none;
      border-radius: 8px;
      font-family: var(--noto);
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      margin-bottom: 36px;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
      text-decoration: none;
    }
    .mobile-menu-cta:hover { background: var(--lime); transform: translateY(-2px); }

    .mobile-sns {
      display: flex;
      gap: 24px;
      align-items: center;
    }
    .mobile-sns a { display: flex; }
    .mobile-sns img {
      width: 24px; height: 24px;
      object-fit: contain;
      filter: brightness(0) invert(1);
      display: block;
    }
    .mobile-sns a[aria-label="Threads"] img { width: 24px; height: 24px; }


    /* Works dropdown */
    .nav-has-dropdown { position: relative; }
    .nav-dropdown {
      position: absolute; top: 100%; left: 50%;
      padding-top: 10px;
      transform: translateX(-50%) translateY(-6px);
      opacity: 0; pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
      z-index: 200;
    }
    .nav-dropdown-inner {
      background: #003cff; border: none;
      border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.08);
      padding: 6px 0; min-width: 160px; white-space: nowrap;
    }
    .nav-has-dropdown:hover .nav-dropdown { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); }
    .nav-dropdown a { display: block; padding: 10px 20px; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; color: rgba(255,255,255,0.85); transition: background 0.6s ease, color 0.6s ease 0.1s; border-radius: 0; }
    .nav-has-dropdown .nav-dropdown a:hover { color: #ffffff; background: rgba(255,255,255,0.15); transform: none; }
    /* mobile works submenu */
    .mobile-nav-works-btn {
      background: none; border: none;
      font-size: 24px; font-weight: 700; color: #ffffff;
      letter-spacing: 0.06em; cursor: pointer; font-family: var(--noto);
      display: flex; align-items: center; justify-content: center; gap: 10px;
      transition: opacity 0.2s;
    }
    .mobile-nav-works-btn:hover { opacity: 0.65; }
    .mobile-sub-list {
      list-style: none; overflow: hidden;
      max-height: 0; transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1);
    }
    .mobile-nav-has-sub.open .mobile-sub-list { max-height: 160px; }
    .mobile-sub-list li { opacity: 0; transform: translateY(12px); transition: opacity 0.22s ease, transform 0.22s ease; }
    .mobile-nav-has-sub.open .mobile-sub-list li:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.10s; }
    .mobile-nav-has-sub.open .mobile-sub-list li:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.18s; }
    .mobile-sub-list a { font-size: 17px; font-weight: 500; color: rgba(255,255,255,0.8); letter-spacing: 0.08em; padding: 8px 0; display: block; text-align: center; transition: opacity 0.2s; }
    .mobile-sub-list a::before { content: '— '; font-size: 0.8em; opacity: 0.55; }
    .mobile-sub-list a:hover { opacity: 0.65; }
    .mobile-menu-logo { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); display: block; }
    .mobile-menu-logo img { height: 32px; width: auto; display: block; opacity: 0.88; }

    /* ── FADE-UP ── */
    [data-bnto-rev] {
      --dur: .45s;
      opacity: 0;
      transform: translateY(24px);
      transition: opacity var(--dur) ease, transform var(--dur) ease;
    }
    [data-bnto-rev].is-view { opacity: 1; transform: none; }
    .gallery [data-bnto-rev]:nth-child(3n+1) { transition-delay: 0s; }
    .gallery [data-bnto-rev]:nth-child(3n+2) { transition-delay: 0.08s; }
    .gallery [data-bnto-rev]:nth-child(3n)   { transition-delay: 0.16s; }
    /* Order Flow: same fade-up, but with a small scale added and a bouncy
       overshoot easing instead of the plain ease — a little wink of
       character (per user request) amid an otherwise structural section.
       The 1→2→3→4→5 stagger itself is driven from JS (see "Order Flow:
       stagger" in index.js) rather than transition-delay, so the order
       stays correct once the grid wraps to 2/3 columns on narrower screens. */
    .flow-grid [data-bnto-rev] {
      transform: translateY(20px) scale(0.92);
      transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .flow-grid [data-bnto-rev].is-view { transform: none; }
    /* My Style items: mobile only. They're spread far down the page there,
       so scrolling itself staggers them "one tempo behind" naturally. On
       PC they stay static in the row — no fade-in. */
    @media (min-width: 861px) {
      .style-features-row [data-bnto-rev] {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      [data-bnto-rev],
      .flow-grid [data-bnto-rev] { transition: none; opacity: 1; transform: none; }
    }