:root {
      --paper: #fffaf1;
      --paper-soft: #fff3ee;
      --sakura: #f6cbd1;
      --sakura-light: #ffe7e9;
      --ink: #17213f;
      --ink-soft: #39415e;
      --gold: #a98136;
      --line: rgba(23, 33, 63, 0.16);
      --white: #ffffff;
      --shadow: 0 18px 48px rgba(23, 33, 63, 0.12);
      --cyber: #34d5ff;
      --cyber-pink: #ff78c9;
      --deep-water: #0b3144;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--ink);
      font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
      font-size: 16px;
      line-height: 1.8;
      background:
        linear-gradient(120deg, rgba(11, 49, 68, 0.16), transparent 34%),
        radial-gradient(circle at 18% 18%, rgba(246, 203, 209, 0.34), transparent 25rem),
        radial-gradient(circle at 88% 12%, rgba(73, 167, 164, 0.22), transparent 20rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(238, 245, 232, 0.56)),
        repeating-linear-gradient(90deg, rgba(169, 129, 54, 0.16) 0 1px, transparent 1px 42px),
        repeating-linear-gradient(0deg, rgba(118, 142, 72, 0.12) 0 2px, transparent 2px 18px),
        var(--paper);
      overflow-x: hidden;
      transition: background 0.45s ease, color 0.45s ease;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 18% 48%, rgba(247, 181, 202, 0.28), transparent 26rem),
        radial-gradient(ellipse at 82% 22%, rgba(255, 216, 227, 0.32), transparent 22rem),
        linear-gradient(112deg, transparent 0 38%, rgba(247, 184, 205, 0.18) 41% 47%, rgba(255, 255, 255, 0.42) 49%, rgba(252, 210, 222, 0.16) 52% 57%, transparent 61%),
        repeating-linear-gradient(90deg, rgba(186, 119, 140, 0.07) 0 1px, transparent 1px 18px);
      mix-blend-mode: multiply;
      background-size: 140% 100%, 130% 100%, 185% 100%, auto;
      animation: paperSakuraWind 18s ease-in-out infinite alternate;
    }

    @keyframes paperSakuraWind {
      from { background-position: -8% 0, 108% 0, -18% 0, 0 0; }
      to { background-position: 10% 0, 88% 0, 22% 0, 36px 0; }
    }

    body.is-cyber {
      color: #edf9f8;
      background:
        radial-gradient(circle at 22% 20%, rgba(255, 120, 201, 0.22), transparent 22rem),
        radial-gradient(circle at 80% 10%, rgba(52, 213, 255, 0.28), transparent 24rem),
        linear-gradient(135deg, rgba(8, 18, 32, 0.96), rgba(15, 48, 58, 0.93)),
        repeating-linear-gradient(90deg, rgba(52, 213, 255, 0.11) 0 1px, transparent 1px 42px),
        repeating-linear-gradient(0deg, rgba(255, 120, 201, 0.08) 0 1px, transparent 1px 30px),
        #08111e;
    }

    body.is-cyber::before {
      background:
        radial-gradient(circle at 70% 46%, rgba(52, 213, 255, 0.22), transparent 20rem),
        linear-gradient(120deg, transparent 0 30%, rgba(52, 213, 255, 0.2) 32%, transparent 42%),
        repeating-linear-gradient(45deg, rgba(255, 120, 201, 0.08) 0 1px, transparent 1px 16px);
      mix-blend-mode: screen;
    }

    .site-header,
    main,
    .site-footer,
    .edit-panel,
    .ripple-layer {
      position: relative;
      z-index: 1;
    }

    a {
      color: inherit;
    }

    img {
      max-width: 100%;
      display: block;
    }

    .skip-link {
      position: absolute;
      top: -48px;
      left: 16px;
      z-index: 20;
      padding: 10px 14px;
      color: var(--white);
      background: var(--ink);
      border-radius: 6px;
      transition: top 0.2s ease;
    }

    .skip-link:focus {
      top: 16px;
    }

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      border: 0;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 10;
      border-bottom: 1px solid var(--line);
      background: rgba(255, 250, 241, 0.88);
      backdrop-filter: blur(12px);
    }

    .site-header .header-inner {
      justify-content: flex-start;
      padding-top: 10px;
      padding-bottom: 6px;
    }

    .site-header .brand {
      position: relative;
      z-index: 13;
      display: inline-flex;
      align-items: baseline;
      gap: 16px;
    }

    .site-header .brand .calligraphy-title {
      color: #38232d;
      font-family: "HGP行書体", "HG行書体", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
      font-size: clamp(2.25rem, 4.5vw, 3.55rem);
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.08em;
      text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8), 0 8px 22px rgba(173, 93, 122, 0.16);
    }

    .site-header .brand span {
      color: #8d5c6d;
      font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
      font-size: 0.72rem;
      letter-spacing: 0.12em;
    }

    .header-sakura-wind {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -48px;
      z-index: 12;
      height: 88px;
      overflow: hidden;
      pointer-events: none;
    }

    .header-sakura-wind::before,
    .header-sakura-wind::after {
      content: "";
      position: absolute;
      left: -8%;
      width: 116%;
      height: 66px;
      border-radius: 50%;
      border-top: 10px solid rgba(247, 177, 199, 0.38);
      filter: blur(4px);
      animation: headerWind 12s ease-in-out infinite alternate;
    }

    .header-sakura-wind::before { top: 16px; }

    .header-sakura-wind::after {
      top: 34px;
      border-top-width: 6px;
      border-top-color: rgba(255, 218, 228, 0.56);
      animation-delay: -5s;
    }

    .header-sakura-wind i {
      position: absolute;
      left: -5%;
      top: var(--wind-y, 28px);
      width: 11px;
      height: 8px;
      border-radius: 70% 35% 70% 35%;
      background: rgba(248, 181, 202, 0.9);
      animation: headerPetal 11s linear infinite;
    }

    .header-sakura-wind i:nth-child(2) { --wind-y: 48px; animation-delay: -3s; animation-duration: 14s; }
    .header-sakura-wind i:nth-child(3) { --wind-y: 18px; animation-delay: -7s; animation-duration: 16s; }
    .header-sakura-wind i:nth-child(4) { --wind-y: 62px; animation-delay: -10s; animation-duration: 13s; }

    @keyframes headerWind {
      from { transform: translateX(-2%) rotate(-2deg) scaleY(0.9); }
      to { transform: translateX(3%) rotate(1deg) scaleY(1.12); }
    }

    @keyframes headerPetal {
      from { transform: translate3d(0, -4px, 0) rotate(0deg); opacity: 0; }
      12% { opacity: 0.86; }
      88% { opacity: 0.72; }
      to { transform: translate3d(110vw, 18px, 0) rotate(520deg); opacity: 0; }
    }

    body.is-cyber .site-header {
      border-bottom-color: rgba(52, 213, 255, 0.24);
      background: rgba(5, 14, 26, 0.88);
    }

    body.is-cyber-hover:not(.is-cyber) .site-header {
      box-shadow: 0 16px 42px rgba(52, 213, 255, 0.12);
    }

    .header-inner,
    .section-inner,
    .footer-inner {
      width: min(1120px, calc(100% - 32px));
      margin: 0 auto;
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 14px 0 8px;
    }

    .brand {
      text-decoration: none;
    }

    .brand strong,
    .footer-brand strong {
      display: block;
      font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
      font-size: 1rem;
      letter-spacing: 0;
    }

    .brand span,
    .footer-brand span {
      display: block;
      color: var(--ink-soft);
      font-size: 0.76rem;
      line-height: 1.5;
    }

    .header-note {
      max-width: 520px;
      margin: 0;
      color: var(--ink-soft);
      font-size: 0.78rem;
      line-height: 1.6;
      text-align: right;
    }

    body.is-cyber .brand strong,
    body.is-cyber .footer-brand strong,
    body.is-cyber .brand span,
    body.is-cyber .header-note {
      color: rgba(237, 249, 248, 0.86);
    }

    .tab-menu-toggle {
      display: none;
    }

    .world-tabs {
      width: min(880px, calc(100% - 32px));
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      padding: 0 0 10px;
    }

    .world-tab {
      position: relative;
      min-height: 58px;
      padding: 10px 12px;
      border: 1px solid rgba(169, 129, 54, 0.32);
      border-radius: 8px;
      color: var(--ink);
      text-align: left;
      font: inherit;
      text-decoration: none;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 243, 238, 0.74)),
        repeating-linear-gradient(90deg, rgba(169, 129, 54, 0.11) 0 1px, transparent 1px 18px);
      box-shadow: 0 10px 24px rgba(23, 33, 63, 0.08);
      cursor: pointer;
      overflow: hidden;
      transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
    }

    .world-tab::after {
      content: "";
      position: absolute;
      inset: auto 12px 10px 12px;
      height: 3px;
      border-radius: 999px;
      background: transparent;
    }

    .world-tab:hover,
    .world-tab:focus-visible,
    .world-tab.is-active {
      transform: translateY(-2px);
      border-color: rgba(169, 129, 54, 0.72);
      background:
        linear-gradient(180deg, rgba(255, 250, 241, 0.96), rgba(255, 231, 233, 0.84)),
        repeating-linear-gradient(90deg, rgba(169, 129, 54, 0.16) 0 1px, transparent 1px 18px);
    }

    .world-tab.is-active::after {
      background: linear-gradient(90deg, rgba(169, 129, 54, 0.9), rgba(214, 91, 131, 0.72));
    }

    .world-tab .tab-kicker {
      display: block;
      color: var(--gold);
      font-size: 0.78rem;
      font-weight: 700;
      line-height: 1.3;
    }

    .world-tab strong {
      display: block;
      margin-top: 2px;
      font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
      font-size: 1.02rem;
      line-height: 1.25;
    }

    .world-tab.prep-tab {
      border-color: rgba(169, 129, 54, 0.42);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(246, 239, 223, 0.78)),
        repeating-linear-gradient(90deg, rgba(169, 129, 54, 0.16) 0 1px, transparent 1px 16px);
    }

    .world-tab.it-tab {
      border-color: rgba(52, 213, 255, 0.42);
      background:
        linear-gradient(135deg, rgba(11, 49, 68, 0.92), rgba(36, 16, 54, 0.9)),
        repeating-linear-gradient(90deg, rgba(52, 213, 255, 0.18) 0 1px, transparent 1px 16px);
      color: #eefcff;
    }

    .world-tab.it-tab .tab-kicker {
      color: var(--cyber);
    }

    .world-tab.it-tab:hover,
    .world-tab.it-tab:focus-visible,
    .world-tab.it-tab.is-active {
      border-color: rgba(255, 120, 201, 0.74);
      background:
        radial-gradient(circle at 80% 20%, rgba(255, 120, 201, 0.32), transparent 7rem),
        linear-gradient(135deg, rgba(5, 15, 29, 0.98), rgba(19, 65, 72, 0.94)),
        repeating-linear-gradient(90deg, rgba(52, 213, 255, 0.23) 0 1px, transparent 1px 16px);
    }

    .world-tab.it-tab.is-active::after {
      background: linear-gradient(90deg, var(--cyber), var(--cyber-pink));
      box-shadow: 0 0 18px rgba(52, 213, 255, 0.58);
    }

    .world-tab.it-tab:not(.is-active):not(:hover):not(:focus-visible) {
      border-color: rgba(169, 129, 54, 0.32);
      color: var(--ink);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 243, 238, 0.74)),
        repeating-linear-gradient(90deg, rgba(169, 129, 54, 0.11) 0 1px, transparent 1px 18px);
      box-shadow: 0 10px 24px rgba(23, 33, 63, 0.08);
    }

    .world-tab.it-tab:not(.is-active):not(:hover):not(:focus-visible) .tab-kicker {
      color: var(--gold);
    }

    main {
      overflow: hidden;
    }

    .tab-panel[hidden] {
      display: none;
    }

    .tab-panel {
      animation: panelIn 0.34s ease both;
    }

    @keyframes panelIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    section {
      padding: 72px 0;
      scroll-margin-top: 174px;
    }

    .hero {
      position: relative;
      display: grid;
      align-items: center;
      min-height: clamp(640px, 82vh, 860px);
      padding: 88px 0 92px;
      color: #fff;
      isolation: isolate;
      overflow: hidden;
      background: #17213f;
    }

    .hero-media {
      position: absolute;
      inset: 0 clamp(10px, 2.6vw, 42px) 28px;
      z-index: -2;
      overflow: hidden;
      background: #17213f;
      -webkit-mask-image: radial-gradient(ellipse 78% 74% at 50% 46%, #000 54%, rgba(0, 0, 0, 0.96) 67%, rgba(0, 0, 0, 0.54) 82%, transparent 100%);
      mask-image: radial-gradient(ellipse 78% 74% at 50% 46%, #000 54%, rgba(0, 0, 0, 0.96) 67%, rgba(0, 0, 0, 0.54) 82%, transparent 100%);
    }

    .tab-panel .hero {
      background:
        radial-gradient(circle at 16% 12%, rgba(248, 188, 207, 0.34), transparent 24rem),
        linear-gradient(180deg, #fffafc, #f9e8ee 54%, #fffafc);
    }

    .hero-media > img,
    .hero-media video,
    .hero-photo-loop,
    .hero-photo-loop img,
    .hero-media-shade {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .hero-media img,
    .hero-media video {
      object-fit: cover;
    }

    .hero-media-fallback {
      filter: saturate(0.82) contrast(1.04);
      transform: scale(1.03);
    }

    .hero-photo-loop img {
      opacity: 0;
      animation: heroBackgroundPhoto 18s ease-in-out infinite;
    }

    .hero-photo-loop img:nth-child(2) { animation-delay: 6s; }
    .hero-photo-loop img:nth-child(3) { animation-delay: 12s; }

    @keyframes heroBackgroundPhoto {
      0%, 100% { opacity: 0; transform: scale(1.07); }
      8%, 29% { opacity: 1; transform: scale(1); }
      38% { opacity: 0; transform: scale(1.02); }
    }

    .hero-background-video {
      opacity: 0;
      transition: opacity 1.2s ease;
    }

    .hero.has-background-video .hero-background-video { opacity: 1; }

    .hero.has-background-video .hero-photo-loop {
      opacity: 0;
      transition: opacity 1.2s ease;
    }

    .hero-media-shade {
      background:
        linear-gradient(90deg, rgba(8, 15, 28, 0.86) 0%, rgba(8, 15, 28, 0.58) 45%, rgba(8, 15, 28, 0.12) 78%, rgba(8, 15, 28, 0.34) 100%),
        linear-gradient(180deg, rgba(9, 18, 32, 0.12), rgba(9, 18, 32, 0.68));
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 22px;
      z-index: -1;
      border: 1px solid rgba(255, 255, 255, 0.28);
      pointer-events: none;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 760px);
      gap: 42px;
      align-items: center;
      justify-content: start;
    }

    .hero .hero-sequence-slide strong,
    .hero .hero-sequence-slide p,
    .hero .gallery-vertical-sign {
      color: #fff;
      text-shadow: 0 3px 24px rgba(0, 0, 0, 0.34);
    }

    .hero .gallery-vertical-sign {
      font-family: "HGP行書体", "HG行書体", "KouzanBrushFont", "Yu Mincho", "Hiragino Mincho ProN", serif;
      font-weight: 700;
      letter-spacing: 0.08em;
      opacity: 0.98;
      -webkit-text-stroke: 0;
      text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.82),
        0 5px 16px rgba(0, 0, 0, 0.58);
    }

    .hero .hero-sequence-slide span { color: #f0d794; }

    .hero .button.primary {
      color: #17213f;
      background: rgba(255, 255, 255, 0.94);
    }

    .hero .button.secondary {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.5);
      background: rgba(12, 22, 38, 0.36);
      backdrop-filter: blur(10px);
    }

    .hero .kimono-visual {
      border-color: rgba(255, 255, 255, 0.38);
      background: rgba(255, 255, 255, 0.1);
      box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
      backdrop-filter: blur(10px);
    }

    .hero .visual-label {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.34);
      background: rgba(12, 22, 38, 0.56);
      backdrop-filter: blur(10px);
    }

    .hero-sequence {
      position: relative;
      min-height: 300px;
      margin-bottom: 24px;
      overflow: hidden;
    }

    .hero-sequence-slide {
      position: absolute;
      inset: 0 auto auto 0;
      width: min(100%, 760px);
      opacity: 0;
      transform: translateY(18px);
      animation: heroSequence 30s ease-in-out infinite;
    }

    .hero-sequence-slide:nth-child(2) {
      animation-delay: 10s;
    }

    .hero-sequence-slide:nth-child(3) {
      animation-delay: 20s;
    }

    .hero-sequence-slide span {
      display: inline-flex;
      margin-bottom: 10px;
      color: var(--gold);
      font-size: 0.82rem;
      font-weight: 800;
    }

    .hero-sequence-slide strong {
      display: block;
      font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
      font-size: clamp(2.3rem, 5.4vw, 3.55rem);
      line-height: 1.34;
    }

    .hero-sequence-slide p {
      max-width: 620px;
      margin: 12px 0 0;
      color: var(--ink-soft);
      font-weight: 700;
      line-height: 1.75;
    }

    @keyframes heroSequence {
      0% {
        opacity: 0;
        transform: translateY(18px);
      }
      4%,
      28% {
        opacity: 1;
        transform: translateY(0);
      }
      33%,
      100% {
        opacity: 0;
        transform: translateY(-12px);
      }
    }

    .hero-grid > div:first-child > .eyebrow,
    .hero-grid > div:first-child > h1 {
      display: none;
    }

    .hero-grid > *,
    .form-wrap > * {
      min-width: 0;
    }

    .eyebrow {
      margin: 0 0 12px;
      color: var(--gold);
      font-weight: 700;
      font-size: 0.86rem;
      letter-spacing: 0;
    }

    h1,
    h2,
    h3 {
      margin: 0;
      color: var(--ink);
      line-height: 1.35;
      letter-spacing: 0;
      overflow-wrap: anywhere;
    }

    [data-edit] {
      white-space: pre-line;
    }

    h1 {
      font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
      font-size: clamp(2.5rem, 7vw, 4.4rem);
      font-weight: 700;
    }

    h2 {
      font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
      font-size: clamp(1.75rem, 5vw, 2.7rem);
    }

    h3 {
      font-size: 1.14rem;
    }

    .lead {
      max-width: 690px;
      margin: 20px 0 0;
      color: var(--ink-soft);
      font-size: clamp(1.04rem, 2.8vw, 1.28rem);
    }

    .hero-text {
      margin: 18px 0 0;
      color: var(--ink-soft);
    }

    .activity-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin: 22px 0 0;
    }

    .activity-summary span {
      min-height: 72px;
      padding: 12px 14px;
      border: 1px solid rgba(169, 129, 54, 0.34);
      border-radius: 8px;
      color: var(--ink);
      font-weight: 700;
      line-height: 1.55;
      background: rgba(255, 255, 255, 0.78);
    }

    .future-project {
      padding: 22px 0 68px;
      color: #102638;
      background:
        radial-gradient(circle at 10% 0%, rgba(56, 184, 229, 0.22), transparent 20rem),
        radial-gradient(circle at 86% 12%, rgba(205, 168, 92, 0.2), transparent 22rem),
        repeating-linear-gradient(135deg, rgba(21, 126, 166, 0.12) 0 1px, transparent 1px 30px),
        linear-gradient(135deg, #fbfeff 0%, #e9f9ff 44%, #d5eff9 100%);
      border-top: 1px solid rgba(31, 143, 184, 0.26);
      border-bottom: 1px solid rgba(31, 143, 184, 0.24);
    }

    .future-project h2,
    .future-project h3 {
      color: #092033;
    }

    .future-project h2 {
      font-size: clamp(1.55rem, 2.6vw, 2.12rem);
      line-height: 1.34;
    }

    .future-project .eyebrow {
      color: #a98136;
    }

    .future-project .section-heading {
      max-width: 1080px;
    }

    .future-project .section-heading p.future-lead {
      display: -webkit-box;
      max-width: 900px;
      margin: 10px 0 0;
      color: rgba(16, 38, 56, 0.78);
      font-size: 0.95rem;
      line-height: 1.7;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .future-flow {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 14px;
      align-items: stretch;
    }

    .future-team {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto 1fr auto;
      gap: 10px;
      align-items: start;
      min-height: 292px;
      padding: 12px;
      border: 1px solid rgba(31, 143, 184, 0.26);
      border-radius: 8px;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(230, 248, 255, 0.72)),
        repeating-linear-gradient(135deg, rgba(31, 143, 184, 0.08) 0 1px, transparent 1px 34px);
      box-shadow: 0 24px 60px rgba(34, 112, 143, 0.16), inset 0 0 40px rgba(255, 255, 255, 0.48);
      transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
    }

    .future-team:hover,
    .future-team:focus-within {
      border-color: rgba(31, 143, 184, 0.42);
      box-shadow: 0 28px 68px rgba(34, 112, 143, 0.22), inset 0 0 42px rgba(255, 255, 255, 0.56);
      transform: translateY(-2px);
    }

    .future-team::before {
      content: attr(data-step);
      position: absolute;
      right: 12px;
      bottom: 8px;
      color: rgba(31, 143, 184, 0.14);
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.8rem, 6vw, 4.4rem);
      line-height: 1;
      pointer-events: none;
    }

    .future-team-content {
      position: relative;
      z-index: 1;
    }

    .future-team-copy {
      position: relative;
      z-index: 1;
    }

    .future-team-label {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 3px 8px;
      border: 1px solid rgba(169, 129, 54, 0.32);
      border-radius: 999px;
      color: #0b6f94;
      font-size: 0.7rem;
      font-weight: 700;
      background: rgba(255, 255, 255, 0.72);
    }

    .future-team h3 {
      margin-top: 10px;
      font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
      font-size: clamp(0.96rem, 1.32vw, 1.12rem);
      line-height: 1.42;
    }

    .future-team-catch {
      margin: 10px 0 0;
      color: #092033;
      font-size: clamp(1rem, 2.4vw, 1.24rem);
      font-weight: 800;
      line-height: 1.6;
    }

    .future-team-desc {
      display: -webkit-box;
      margin: 10px 0 0;
      color: rgba(16, 38, 56, 0.78);
      font-size: 0.84rem;
      line-height: 1.58;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }

    .future-team-detail {
      position: absolute;
      left: 12px;
      bottom: 12px;
      z-index: 2;
      min-height: 0;
    }

    .future-team-detail[open] {
      position: relative;
      left: auto;
      bottom: auto;
    }

    .future-team-detail summary {
      max-width: 100%;
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border: 1px solid rgba(31, 143, 184, 0.36);
      border-radius: 8px;
      color: #ffffff;
      font-size: 0.82rem;
      font-weight: 800;
      background: linear-gradient(90deg, #0b6f94, #1f8fb8);
      box-shadow: 0 14px 28px rgba(31, 143, 184, 0.22);
      cursor: pointer;
      list-style: none;
      text-align: left;
      opacity: 0;
      transform: translateY(8px);
      transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
    }

    .future-team:hover .future-team-detail summary,
    .future-team:focus-within .future-team-detail summary,
    .future-team-detail[open] summary {
      opacity: 1;
      transform: translateY(0);
    }

    .future-team-detail summary::-webkit-details-marker {
      display: none;
    }

    .future-team-detail summary::after {
      content: "";
      flex: 0 0 auto;
    }

    .future-team-detail summary:focus-visible {
      outline: 3px solid rgba(31, 143, 184, 0.36);
      outline-offset: 3px;
    }

    @media (hover: none) {
      .future-team-detail summary {
        opacity: 1;
        transform: none;
      }
    }

    .future-team-detail .future-action-grid {
      grid-template-columns: 1fr;
      margin-top: 16px;
    }

    .future-team-detail:not([open]) .future-action-grid {
      display: none;
    }

    .future-team:has(.future-team-detail[open]) {
      grid-column: 1 / -1;
      grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
      grid-template-rows: auto auto auto;
      min-height: auto;
      align-items: start;
    }

    .future-team:has(.future-team-detail[open]) .future-visual {
      min-height: 160px;
    }

    .future-team:has(.future-team-detail[open]) .future-team-desc {
      display: block;
      font-size: 0.93rem;
      line-height: 1.75;
      overflow: visible;
    }

    .future-team:has(.future-team-detail[open]) .future-team-detail {
      grid-column: 2;
      grid-row: 1 / span 3;
      border-top: 0;
      padding-top: 0;
    }

    .future-team:has(.future-team-detail[open]) .future-action-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .future-visual {
      position: relative;
      z-index: 1;
      min-height: 68px;
      border: 1px solid rgba(31, 143, 184, 0.24);
      border-radius: 8px;
      overflow: hidden;
      background:
        radial-gradient(circle at 70% 28%, rgba(56, 184, 229, 0.28), transparent 9rem),
        linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(221, 246, 255, 0.42));
      transform: translateY(0);
      transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        filter 0.2s ease;
    }

    .future-team:hover .future-visual,
    .future-team:focus-within .future-visual {
      border-color: rgba(31, 143, 184, 0.4);
      filter: saturate(1.08);
      transform: translateY(-2px);
    }

    .future-visual::before,
    .future-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .future-visual::before {
      background:
        repeating-linear-gradient(135deg, rgba(31, 143, 184, 0.16) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 28px);
      transform: translateX(0);
      transition: transform 0.26s ease;
    }

    .future-team:hover .future-visual::before,
    .future-team:focus-within .future-visual::before {
      transform: translateX(12px);
    }

    .future-visual::after {
      border: 1px solid rgba(169, 129, 54, 0.22);
      inset: 14px;
      border-radius: 8px;
    }

    .future-chip,
    .future-line,
    .future-dot,
    .future-block {
      position: absolute;
      display: block;
    }

    .future-chip {
      left: 18px;
      bottom: 18px;
      min-width: 116px;
      padding: 7px 10px;
      border: 1px solid rgba(31, 143, 184, 0.34);
      border-radius: 8px;
      color: #083049;
      font-size: 0.78rem;
      font-weight: 800;
      background: rgba(255, 255, 255, 0.82);
    }

    .future-line {
      height: 2px;
      background: linear-gradient(90deg, rgba(56, 184, 229, 0), rgba(31, 143, 184, 0.86), rgba(205, 168, 92, 0));
    }

    .future-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #1f8fb8;
      box-shadow: 0 0 18px rgba(56, 184, 229, 0.64);
    }

    .future-block {
      border: 1px solid rgba(31, 143, 184, 0.34);
      background: rgba(255, 255, 255, 0.38);
      box-shadow: inset 0 0 22px rgba(56, 184, 229, 0.12);
    }

    .future-data .future-block:nth-child(1) {
      left: 24px;
      top: 18px;
      width: 46px;
      height: 54px;
      border-radius: 38px 38px 10px 10px;
    }

    .future-data .future-block:nth-child(2) {
      right: 20px;
      top: 22px;
      width: 70px;
      height: 42px;
      background: linear-gradient(135deg, rgba(56, 184, 229, 0.42), rgba(205, 168, 92, 0.14));
    }

    .future-data .future-line:nth-child(3) {
      left: 24px;
      right: 22px;
      top: 70px;
    }

    .future-data .future-dot:nth-child(4) {
      left: 50%;
      top: 65px;
    }

    .future-design .future-block:nth-child(1) {
      left: 22px;
      top: 24px;
      width: 88px;
      height: 46px;
      transform: skewX(-12deg);
    }

    .future-design .future-block:nth-child(2) {
      right: 22px;
      top: 24px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(56, 184, 229, 0.2);
    }

    .future-design .future-line:nth-child(3) {
      left: 30px;
      right: 30px;
      top: 24px;
      transform: rotate(19deg);
      transform-origin: left center;
    }

    .future-digital .future-block:nth-child(1) {
      left: 28px;
      top: 16px;
      width: 44px;
      height: 64px;
      border-radius: 999px 999px 24px 24px;
      background: linear-gradient(180deg, rgba(56, 184, 229, 0.28), rgba(205, 168, 92, 0.12));
    }

    .future-digital .future-block:nth-child(2) {
      right: 24px;
      top: 18px;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(56, 184, 229, 0.28), transparent 58%),
        rgba(255, 255, 255, 0.3);
    }

    .future-digital .future-dot:nth-child(3) {
      left: 54%;
      top: 32px;
    }

    .future-culture .future-block:nth-child(1) {
      left: 20px;
      bottom: 24px;
      width: 110px;
      height: 16px;
      border-radius: 999px;
    }

    .future-culture .future-block:nth-child(2) {
      right: 26px;
      top: 18px;
      width: 40px;
      height: 64px;
      border-radius: 40px 40px 18px 18px;
      background: linear-gradient(180deg, rgba(205, 168, 92, 0.22), rgba(56, 184, 229, 0.16));
    }

    .future-culture .future-dot:nth-child(3) {
      left: 32px;
      bottom: 17px;
    }

    .future-system {
      margin-top: 30px;
      padding: clamp(18px, 4vw, 28px);
      border: 1px solid rgba(31, 143, 184, 0.26);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(229, 248, 255, 0.58)),
        repeating-linear-gradient(135deg, rgba(31, 143, 184, 0.08) 0 1px, transparent 1px 28px);
    }

    .future-results h3 {
      font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
      font-size: clamp(1.25rem, 2.8vw, 1.72rem);
    }

    .future-results > p {
      margin: 10px 0 0;
      color: rgba(16, 38, 56, 0.78);
    }

    .future-action-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .future-action-card,
    .future-result-card {
      min-width: 0;
      padding: 16px;
      border: 1px solid rgba(31, 143, 184, 0.22);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.78);
    }

    .future-action-card span,
    .future-result-card span {
      display: inline-flex;
      min-height: 28px;
      align-items: center;
      padding: 3px 9px;
      border: 1px solid rgba(169, 129, 54, 0.3);
      border-radius: 999px;
      color: #8a661f;
      font-size: 0.76rem;
      font-weight: 800;
      background: rgba(255, 255, 255, 0.7);
    }

    .future-action-card h5 {
      margin: 10px 0 0;
      color: #092033;
      font-size: 1.06rem;
      line-height: 1.55;
    }

    .future-action-card p {
      margin: 10px 0 0;
      color: rgba(16, 38, 56, 0.78);
      font-size: 0.93rem;
      line-height: 1.75;
    }

    .future-keywords {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin: 14px 0 0;
      padding: 0;
      list-style: none;
    }

    .future-keywords li {
      padding: 5px 8px;
      border-radius: 999px;
      color: #0b4058;
      font-size: 0.78rem;
      font-weight: 700;
      background: rgba(56, 184, 229, 0.14);
    }

    .future-results {
      margin-top: 30px;
      padding: clamp(18px, 4vw, 28px);
      border: 1px solid rgba(169, 129, 54, 0.25);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 250, 235, 0.58)),
        repeating-linear-gradient(135deg, rgba(169, 129, 54, 0.08) 0 1px, transparent 1px 26px);
    }

    .future-result-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 18px;
    }

    .future-result-card {
      min-height: 160px;
      display: grid;
      align-content: start;
      gap: 8px;
      border-style: dashed;
    }

    .future-result-card strong {
      color: #092033;
      line-height: 1.5;
    }

    .future-result-card p {
      margin: 0;
      color: rgba(16, 38, 56, 0.7);
      font-size: 0.86rem;
      line-height: 1.6;
    }

    .future-system h3 {
      font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
      font-size: clamp(1.2rem, 2.8vw, 1.6rem);
    }

    .future-map {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 26px;
      margin-top: 18px;
    }

    .future-map-step {
      position: relative;
      min-height: 112px;
      padding: 16px;
      border: 1px solid rgba(31, 143, 184, 0.24);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.74);
    }

    .future-map-step:not(:last-child)::after {
      content: "→";
      position: absolute;
      right: -24px;
      top: 50%;
      color: #cda85c;
      font-size: 1.4rem;
      font-weight: 800;
      transform: translateY(-50%);
    }

    .future-map-step span {
      display: block;
      color: #0b7fa8;
      font-size: 0.78rem;
      font-weight: 800;
    }

    .future-map-step strong {
      display: block;
      margin-top: 6px;
      color: #092033;
      font-size: 1.02rem;
      line-height: 1.5;
    }

    .hero-actions,
    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 12px 18px;
      border: 1px solid var(--ink);
      border-radius: 8px;
      font: inherit;
      font-weight: 700;
      line-height: 1.4;
      text-decoration: none;
      cursor: pointer;
      transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

    .button:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
      outline: 3px solid rgba(169, 129, 54, 0.48);
      outline-offset: 3px;
    }

    .button:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(23, 33, 63, 0.14);
    }

    .button.primary {
      color: var(--white);
      background: var(--ink);
    }

    .button.secondary {
      color: var(--ink);
      background: rgba(255, 255, 255, 0.68);
    }

    .note-line {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 18px 0 0;
      color: var(--ink-soft);
      font-size: 0.94rem;
    }

    .note-line span {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      min-height: 30px;
      padding: 3px 10px;
      border: 1px solid rgba(169, 129, 54, 0.28);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.68);
    }

    .kimono-visual {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 440px;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: var(--shadow);
      background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.78), rgba(255, 231, 233, 0.56)),
        repeating-linear-gradient(90deg, rgba(23, 33, 63, 0.055) 0 1px, transparent 1px 36px),
        var(--paper-soft);
      animation: heroPhotoReveal 8s ease-in-out infinite;
    }

    @keyframes heroPhotoReveal {
      0%,
      12% {
        opacity: 0.46;
        transform: translateY(16px) scale(0.98);
      }
      24%,
      86% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      100% {
        opacity: 0.7;
        transform: translateY(-8px) scale(0.99);
      }
    }

    .kimono-visual::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(135deg, transparent 0 46%, rgba(23, 33, 63, 0.92) 46% 54%, transparent 54%),
        linear-gradient(45deg, transparent 0 44%, rgba(246, 203, 209, 0.88) 44% 57%, transparent 57%);
      opacity: 0.82;
    }

    .kimono-visual.has-photo::before {
      background: linear-gradient(180deg, rgba(23, 33, 63, 0.04), rgba(23, 33, 63, 0.22));
      opacity: 1;
    }

    .kimono-visual::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 128px;
      height: 360px;
      transform: translate(-50%, -50%);
      border-radius: 64px 64px 18px 18px;
      background:
        linear-gradient(90deg, transparent 0 38%, rgba(169, 129, 54, 0.86) 38% 45%, rgba(255, 250, 241, 0.9) 45% 55%, rgba(169, 129, 54, 0.86) 55% 62%, transparent 62%),
        linear-gradient(180deg, #fffaf1, #ffe7e9);
      box-shadow: inset 0 0 0 1px rgba(23, 33, 63, 0.18), 0 22px 44px rgba(23, 33, 63, 0.18);
    }

    .kimono-visual.has-photo::after {
      content: none;
    }

    .photo-placeholder {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: min(82%, 360px);
      min-height: 240px;
      padding: 22px;
      border: 1px dashed rgba(23, 33, 63, 0.34);
      border-radius: 8px;
      color: var(--ink);
      text-align: center;
      background: rgba(255, 250, 241, 0.78);
    }

    .photo-placeholder.has-photo {
      width: min(86%, 420px);
      min-height: 360px;
      padding: 0;
      border-style: solid;
      background: #fff;
      overflow: hidden;
    }

    .photo-placeholder img,
    .photo-slot img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .photo-placeholder strong {
      display: block;
      font-size: 1.05rem;
    }

    .photo-placeholder span {
      display: block;
      margin-top: 8px;
      color: var(--ink-soft);
      font-size: 0.9rem;
      line-height: 1.6;
    }

    .photo-strip {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin: 28px 0;
    }

    .photo-slot {
      position: relative;
      overflow: hidden;
      min-height: 220px;
      padding: 22px;
      border: 1px dashed rgba(23, 33, 63, 0.32);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(255, 231, 233, 0.72), rgba(255, 250, 241, 0.86)),
        repeating-linear-gradient(90deg, rgba(169, 129, 54, 0.12) 0 1px, transparent 1px 18px);
    }

    .photo-slot.has-photo {
      min-height: 280px;
      padding: 0;
      border-style: solid;
      background: #fff;
    }

    .photo-slot.has-photo .photo-caption {
      position: absolute;
      inset: auto 12px 12px;
      padding: 12px 14px;
      border: 1px solid rgba(255, 255, 255, 0.62);
      border-radius: 8px;
      background: rgba(255, 250, 241, 0.88);
      backdrop-filter: blur(6px);
    }

    .photo-slot strong {
      display: block;
      font-size: 1.02rem;
    }

    .photo-slot span {
      display: block;
      margin-top: 8px;
      color: var(--ink-soft);
    }

    .visual-label {
      position: absolute;
      right: 18px;
      bottom: 18px;
      max-width: 230px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--ink-soft);
      font-size: 0.86rem;
      line-height: 1.6;
      background: rgba(255, 255, 255, 0.84);
    }

    .band {
      background: rgba(255, 255, 255, 0.62);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .section-heading {
      max-width: 760px;
      margin-bottom: 28px;
    }

    .section-heading p {
      color: var(--ink-soft);
    }

    .concept-note {
      max-width: 860px;
      margin: 24px 0 0;
      padding: 22px;
      border: 1px solid rgba(169, 129, 54, 0.32);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 243, 238, 0.72)),
        rgba(255, 255, 255, 0.82);
      box-shadow: 0 14px 34px rgba(23, 33, 63, 0.08);
    }

    .concept-note h3 {
      color: var(--ink);
    }

    .concept-note p {
      margin: 10px 0 0;
      color: var(--ink-soft);
      line-height: 1.9;
    }

    .text-list,
    .check-list {
      display: grid;
      gap: 12px;
      margin: 24px 0 0;
      padding: 0;
      list-style: none;
    }

    .text-list li,
    .check-list li {
      position: relative;
      padding: 14px 16px 14px 42px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.72);
    }

    .text-list li::before,
    .check-list li::before {
      content: "";
      position: absolute;
      left: 17px;
      top: 24px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--gold);
    }

    .card-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .card {
      min-height: 220px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.82);
      box-shadow: 0 10px 28px rgba(23, 33, 63, 0.08);
    }

    .card p {
      margin: 12px 0 0;
      color: var(--ink-soft);
    }

    .manual-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .manual-card {
      min-height: 260px;
      padding: 22px;
      border: 1px solid rgba(169, 129, 54, 0.32);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.82);
      box-shadow: 0 10px 28px rgba(23, 33, 63, 0.08);
    }

    .manual-card h3 {
      margin-bottom: 12px;
    }

    .manual-card ul {
      display: grid;
      gap: 8px;
      margin: 0;
      padding-left: 1.2em;
      color: var(--ink-soft);
    }

    .rights-note {
      margin-top: 22px;
      padding: 18px;
      border: 1px solid rgba(214, 91, 131, 0.42);
      border-left: 5px solid rgba(214, 91, 131, 0.82);
      border-radius: 8px;
      background: rgba(255, 231, 233, 0.68);
    }

    .rights-note p {
      margin: 0;
      color: var(--ink);
      font-weight: 700;
    }

    .card a {
      color: var(--ink);
      font-weight: 700;
      text-decoration-thickness: 2px;
      text-underline-offset: 4px;
    }

    .learn-hero {
      padding-top: 64px;
      background:
        radial-gradient(circle at 82% 12%, rgba(123, 185, 201, 0.24), transparent 18rem),
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(238, 248, 247, 0.58)),
        repeating-linear-gradient(120deg, rgba(169, 129, 54, 0.08) 0 1px, transparent 1px 26px);
    }

    .learn-layout {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(300px, 1.05fr);
      gap: 34px;
      align-items: center;
    }

    .learn-panel {
      padding: clamp(20px, 4vw, 30px);
      border: 1px solid rgba(11, 49, 68, 0.18);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 251, 248, 0.74)),
        repeating-linear-gradient(90deg, rgba(169, 129, 54, 0.08) 0 1px, transparent 1px 22px);
      box-shadow: 0 18px 44px rgba(23, 33, 63, 0.1);
    }

    .learn-panel h2 {
      font-size: clamp(1.9rem, 5vw, 3.1rem);
    }

    .learn-panel p {
      margin: 16px 0 0;
      color: var(--ink-soft);
    }

    .learn-map {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .learn-map a,
    .learn-map button {
      min-height: 126px;
      display: grid;
      align-content: space-between;
      padding: 16px;
      border: 1px solid rgba(11, 49, 68, 0.18);
      border-radius: 8px;
      color: var(--ink);
      font: inherit;
      text-align: left;
      text-decoration: none;
      background: rgba(255, 255, 255, 0.76);
      box-shadow: 0 10px 24px rgba(23, 33, 63, 0.08);
      cursor: pointer;
      transition: transform 0.18s ease, border-color 0.18s ease;
    }

    .learn-map button {
      appearance: none;
    }

    .learn-map a:hover,
    .learn-map a:focus-visible,
    .learn-map button:hover,
    .learn-map button:focus-visible,
    .learn-map button.is-active {
      border-color: rgba(169, 129, 54, 0.48);
      transform: translateY(-2px);
    }

    .learn-map button.is-active {
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(232, 246, 251, 0.78)),
        repeating-linear-gradient(90deg, rgba(169, 129, 54, 0.12) 0 1px, transparent 1px 26px);
    }

    .learn-map span {
      color: var(--gold);
      font-size: 0.78rem;
      font-weight: 800;
    }

    .learn-map strong {
      display: block;
      color: var(--ink);
      font-size: 1.08rem;
      line-height: 1.45;
    }

    .learn-section {
      background:
        linear-gradient(180deg, rgba(255, 250, 241, 0.62), rgba(255, 255, 255, 0.54)),
        repeating-linear-gradient(135deg, rgba(11, 49, 68, 0.055) 0 1px, transparent 1px 28px);
    }

    .learn-image-section {
      padding-top: 22px;
      background:
        radial-gradient(circle at 82% 8%, rgba(123, 185, 201, 0.2), transparent 18rem),
        linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 250, 241, 0.52));
    }

    .learn-image-card {
      margin: 0;
      padding: clamp(8px, 1.6vw, 14px);
      border: 1px solid rgba(23, 33, 63, 0.14);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.86);
      box-shadow: 0 18px 44px rgba(23, 33, 63, 0.12);
    }

    .learn-image-card img {
      width: 100%;
      height: auto;
      border-radius: 8px;
      border: 1px solid rgba(23, 33, 63, 0.1);
      background: #fffaf1;
    }

    .learn-image-card figcaption {
      margin-top: 10px;
      color: var(--ink-soft);
      font-size: 0.88rem;
      line-height: 1.65;
    }

    .learn-image-anchor {
      display: block;
      position: relative;
      top: -174px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    .learn-detail-section {
      padding: 34px 0 74px;
      background:
        radial-gradient(circle at 12% 20%, rgba(123, 185, 201, 0.18), transparent 22rem),
        linear-gradient(180deg, rgba(255, 250, 241, 0.52), rgba(255, 255, 255, 0.82));
    }

    .learn-detail-intro {
      max-width: 760px;
      margin-bottom: 18px;
    }

    .learn-detail-intro h2 {
      margin: 6px 0 0;
      font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
      font-size: clamp(1.65rem, 3.4vw, 2.35rem);
      line-height: 1.35;
      letter-spacing: 0;
    }

    .learn-detail-intro p {
      margin: 12px 0 0;
      color: var(--ink-soft);
      line-height: 1.9;
    }

    .learn-detail-panel {
      padding: clamp(20px, 3vw, 32px);
      border: 1px solid rgba(11, 49, 68, 0.16);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(245, 251, 253, 0.9)),
        repeating-linear-gradient(135deg, rgba(11, 49, 68, 0.04) 0 1px, transparent 1px 28px);
      box-shadow: 0 18px 44px rgba(23, 33, 63, 0.11);
    }

    .learn-detail-panel[hidden] {
      display: none;
    }

    .learn-detail-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      color: var(--gold);
      font-weight: 800;
      font-size: 0.86rem;
    }

    .learn-detail-panel h3 {
      margin: 0;
      font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
      font-size: clamp(1.45rem, 3vw, 2rem);
      line-height: 1.45;
      letter-spacing: 0;
    }

    .learn-detail-summary {
      margin: 12px 0 0;
      color: var(--ink-soft);
      font-size: 1rem;
      line-height: 1.9;
    }

    .learn-detail-image {
      margin: 22px 0 0;
      padding: clamp(8px, 1.6vw, 14px);
      border: 1px solid rgba(23, 33, 63, 0.14);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 14px 34px rgba(23, 33, 63, 0.1);
    }

    .learn-detail-image img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 8px;
      border: 1px solid rgba(23, 33, 63, 0.1);
      background: #fffaf1;
    }

    .learn-detail-image figcaption {
      margin-top: 10px;
      color: var(--ink-soft);
      font-size: 0.88rem;
      line-height: 1.65;
    }

    .learn-detail-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
      gap: 22px;
      margin-top: 22px;
    }

    .learn-detail-block {
      padding: 18px;
      border-left: 4px solid rgba(169, 129, 54, 0.64);
      background: rgba(255, 255, 255, 0.68);
    }

    .learn-detail-block h4 {
      margin: 0 0 10px;
      color: var(--ink);
      font-size: 1.02rem;
    }

    .learn-detail-block p {
      margin: 0;
      color: var(--ink-soft);
      line-height: 1.8;
    }

    .learn-detail-list {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .learn-detail-list li {
      position: relative;
      padding-left: 18px;
      color: var(--ink-soft);
      line-height: 1.7;
    }

    .learn-detail-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.72em;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--gold);
    }

    .learn-detail-note {
      margin-top: 18px;
      padding: 14px 16px;
      border: 1px solid rgba(123, 185, 201, 0.34);
      border-radius: 8px;
      color: var(--ink-soft);
      background: rgba(232, 246, 251, 0.72);
      line-height: 1.8;
    }

    .learn-slide-board {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      padding: 18px 0 72px;
    }

    .learn-slide {
      position: relative;
      min-height: 600px;
      padding: clamp(20px, 3vw, 30px);
      border: 1px solid rgba(23, 33, 63, 0.12);
      border-radius: 8px;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 241, 0.78)),
        repeating-linear-gradient(45deg, rgba(169, 129, 54, 0.05) 0 1px, transparent 1px 24px);
      box-shadow: 0 18px 44px rgba(23, 33, 63, 0.11);
      scroll-margin-top: 174px;
    }

    .learn-slide:nth-child(2) {
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 250, 238, 0.82)),
        repeating-linear-gradient(45deg, rgba(90, 125, 64, 0.055) 0 1px, transparent 1px 24px);
    }

    .learn-slide:nth-child(3) {
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(235, 244, 255, 0.84)),
        repeating-linear-gradient(45deg, rgba(24, 71, 130, 0.055) 0 1px, transparent 1px 24px);
    }

    .learn-slide:nth-child(4) {
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 246, 230, 0.86)),
        repeating-linear-gradient(45deg, rgba(204, 129, 26, 0.06) 0 1px, transparent 1px 24px);
    }

    .learn-slide::after {
      content: "";
      position: absolute;
      inset: auto -8% -20% auto;
      width: 260px;
      height: 260px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(169, 129, 54, 0.12), transparent 64%);
      pointer-events: none;
    }

    .learn-slide-header {
      position: relative;
      z-index: 1;
      display: flex;
      gap: 18px;
      align-items: flex-start;
      margin-bottom: 18px;
    }

    .learn-slide-number {
      color: var(--slide-color, #c95d66);
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.8rem, 5vw, 4.2rem);
      font-weight: 800;
      line-height: 0.9;
    }

    .learn-slide h2 {
      margin-top: 3px;
      font-size: clamp(1.72rem, 4vw, 2.6rem);
      letter-spacing: 0;
    }

    .learn-slide-lead {
      margin: 8px 0 0;
      color: var(--ink);
      font-weight: 700;
      line-height: 1.75;
    }

    .learn-slide-content {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 16px;
    }

    .learn-what-layout {
      grid-template-columns: minmax(170px, 0.85fr) minmax(210px, 1fr);
      align-items: center;
    }

    .learn-feature-list {
      display: grid;
      gap: 7px;
      margin: 18px 0 0;
      padding: 0;
      list-style: none;
    }

    .learn-feature-list li {
      position: relative;
      padding-left: 16px;
      color: var(--ink-soft);
      font-size: 0.92rem;
      line-height: 1.5;
    }

    .learn-feature-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.68em;
      width: 5px;
      height: 5px;
      border-radius: 999px;
      background: var(--slide-color, var(--gold));
    }

    .learn-kimono-figure {
      position: relative;
      min-height: 370px;
      display: grid;
      place-items: end center;
    }

    .learn-kimono-figure::before {
      content: "";
      position: absolute;
      top: 8px;
      width: 70px;
      height: 88px;
      border-radius: 50% 50% 42% 42%;
      background:
        radial-gradient(circle at 50% 16%, #d8b082 0 12px, transparent 13px),
        linear-gradient(180deg, #f2d7bd, #d4a574);
      box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.72);
    }

    .learn-kimono-figure::after {
      content: "";
      position: absolute;
      bottom: 0;
      width: min(260px, 82%);
      height: 330px;
      clip-path: polygon(38% 0, 62% 0, 88% 100%, 12% 100%);
      border: 1px solid rgba(201, 93, 102, 0.28);
      background:
        radial-gradient(circle at 32% 32%, rgba(255, 255, 255, 0.78) 0 4px, transparent 5px),
        radial-gradient(circle at 68% 44%, rgba(255, 255, 255, 0.72) 0 4px, transparent 5px),
        radial-gradient(circle at 46% 64%, rgba(255, 255, 255, 0.7) 0 5px, transparent 6px),
        linear-gradient(90deg, transparent 45%, rgba(255, 255, 255, 0.82) 46% 55%, transparent 56%),
        linear-gradient(135deg, #f4b8b5, #f9ded5 48%, #eaa8a7);
      box-shadow: inset 0 -90px 90px rgba(174, 79, 80, 0.12);
    }

    .figure-obi {
      position: absolute;
      left: 50%;
      bottom: 142px;
      width: min(220px, 72%);
      height: 52px;
      border: 1px solid rgba(169, 129, 54, 0.28);
      border-radius: 6px;
      background:
        radial-gradient(circle at 25% 50%, rgba(214, 91, 131, 0.36) 0 6px, transparent 7px),
        linear-gradient(90deg, #f8dfb4, #fff3d9, #dfbd77);
      transform: translateX(-50%);
      box-shadow: 0 8px 22px rgba(23, 33, 63, 0.12);
    }

    .learn-callouts {
      display: grid;
      gap: 10px;
      grid-column: 1 / -1;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .learn-callout {
      min-height: 74px;
      display: grid;
      place-items: center;
      padding: 12px;
      border: 1px solid rgba(201, 93, 102, 0.26);
      border-radius: 999px;
      color: var(--ink);
      text-align: center;
      font-size: 0.82rem;
      font-weight: 800;
      line-height: 1.55;
      background: rgba(255, 255, 255, 0.76);
    }

    .learn-term-box,
    .learn-bottom-note {
      padding: 14px 16px;
      border: 1px solid rgba(201, 93, 102, 0.24);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.76);
    }

    .learn-term-box h3,
    .learn-bottom-note h3 {
      font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
      font-size: 1rem;
    }

    .learn-term-box p,
    .learn-bottom-note p {
      margin: 8px 0 0;
      color: var(--ink-soft);
      font-size: 0.88rem;
      line-height: 1.7;
    }

    .learn-type-panels {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .learn-type-panel {
      padding: 16px;
      border: 1px solid rgba(90, 125, 64, 0.24);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.76);
    }

    .learn-type-panel h3 {
      color: #4b7434;
      font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
      font-size: 1.05rem;
      text-align: center;
    }

    .learn-type-panel p {
      margin: 6px 0 12px;
      color: var(--ink-soft);
      font-size: 0.84rem;
      line-height: 1.55;
      text-align: center;
    }

    .kimono-mini-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
      align-items: end;
    }

    .kimono-mini {
      display: grid;
      gap: 6px;
      justify-items: center;
      color: var(--ink);
      font-size: 0.74rem;
      font-weight: 800;
      text-align: center;
    }

    .kimono-mini::before {
      content: "";
      width: 58px;
      height: 118px;
      clip-path: polygon(38% 0, 62% 0, 88% 100%, 12% 100%);
      border: 1px solid rgba(23, 33, 63, 0.14);
      border-radius: 10px 10px 4px 4px;
      background:
        linear-gradient(90deg, transparent 45%, rgba(255, 255, 255, 0.74) 46% 56%, transparent 57%),
        var(--mini-color, #e8d9bf);
    }

    .mini-black {
      --mini-color: linear-gradient(180deg, #171717, #2a2520 64%, #c9a363);
    }

    .mini-cream {
      --mini-color: linear-gradient(180deg, #f3ead5, #fbf6e9);
    }

    .mini-red {
      --mini-color: linear-gradient(180deg, #d84f36, #f0a448 55%, #c73036);
    }

    .mini-pink {
      --mini-color: linear-gradient(180deg, #f6c8c8, #f8e6dc);
    }

    .mini-komon {
      --mini-color: radial-gradient(circle at 34% 30%, #c56a77 0 4px, transparent 5px), linear-gradient(180deg, #eee2da, #faf4eb);
    }

    .mini-tsumugi {
      --mini-color: repeating-linear-gradient(90deg, #65513e 0 4px, #7b654b 4px 8px);
    }

    .mini-yukata {
      --mini-color: radial-gradient(circle at 35% 28%, #77a7d7 0 5px, transparent 6px), linear-gradient(180deg, #d7ebfb, #a9d4f2);
    }

    .learn-making-layout {
      display: grid;
      grid-template-columns: 132px minmax(0, 1fr);
      gap: 20px;
    }

    .making-side-list {
      display: grid;
      gap: 8px;
      align-content: start;
      margin: 0;
      padding: 14px;
      border: 1px solid rgba(24, 71, 130, 0.2);
      border-radius: 8px;
      list-style: none;
      background: rgba(255, 255, 255, 0.68);
    }

    .making-side-list li {
      display: grid;
      grid-template-columns: 24px 1fr;
      gap: 8px;
      align-items: center;
      color: #173f7a;
      font-size: 0.82rem;
      font-weight: 800;
    }

    .making-side-list span {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      color: #ffffff;
      font-size: 0.74rem;
      background: #173f7a;
    }

    .making-photo-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .making-photo {
      min-height: 126px;
      display: grid;
      align-content: end;
      padding: 10px;
      border: 1px solid rgba(24, 71, 130, 0.18);
      border-radius: 8px;
      color: #173f7a;
      font-size: 0.78rem;
      font-weight: 800;
      background:
        radial-gradient(circle at 62% 34%, rgba(255, 255, 255, 0.78), transparent 2.5rem),
        linear-gradient(135deg, rgba(180, 204, 226, 0.72), rgba(255, 255, 255, 0.8));
    }

    .making-photo:nth-child(1) {
      background:
        radial-gradient(circle at 44% 32%, #f6eee1 0 24px, transparent 25px),
        linear-gradient(135deg, #d8b57b, #fff6df);
    }

    .making-photo:nth-child(2) {
      background:
        repeating-linear-gradient(90deg, rgba(108, 77, 42, 0.28) 0 3px, transparent 3px 14px),
        linear-gradient(135deg, #e7d6ba, #f8f0df);
    }

    .making-photo:nth-child(3) {
      background:
        radial-gradient(circle at 55% 35%, #0d6b92 0 32px, transparent 33px),
        linear-gradient(135deg, #d8eef7, #1c6a85);
      color: #ffffff;
    }

    .making-photo:nth-child(4) {
      background:
        linear-gradient(135deg, transparent 0 44%, rgba(55, 42, 30, 0.86) 45% 50%, transparent 51%),
        linear-gradient(135deg, #f1e7d5, #fffaf0);
    }

    .making-photo:nth-child(5) {
      background:
        linear-gradient(90deg, #e5cfe2, #bea8c7 48%, #f3dfef 52%, #d6bfd6);
    }

    .making-photo:nth-child(6) {
      background:
        linear-gradient(135deg, transparent 0 44%, rgba(56, 45, 35, 0.84) 45% 50%, transparent 51%),
        linear-gradient(135deg, #f8efe5, #c9a47d);
    }

    .making-feature {
      display: grid;
      grid-template-columns: 150px 1fr;
      gap: 12px;
      align-items: center;
      margin-top: 16px;
      padding: 14px;
      border: 1px solid rgba(24, 71, 130, 0.2);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.76);
    }

    .making-feature h3,
    .making-feature p {
      margin: 0;
    }

    .making-feature h3 {
      color: #173f7a;
      font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
      font-size: 1rem;
      text-align: center;
    }

    .making-feature p {
      color: var(--ink-soft);
      font-size: 0.86rem;
      line-height: 1.65;
    }

    .nagoya-history-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .nagoya-topic {
      min-height: 230px;
      padding: 16px;
      border: 1px solid rgba(204, 129, 26, 0.26);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.78);
    }

    .recruit-request {
      padding-top: 26px;
      background:
        radial-gradient(circle at 82% 12%, rgba(246, 203, 209, 0.22), transparent 18rem),
        linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 250, 241, 0.64));
    }

    .request-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-top: 20px;
    }

    .request-card {
      min-height: 182px;
      display: grid;
      align-content: start;
      gap: 10px;
      padding: 18px;
      border: 1px solid rgba(23, 33, 63, 0.14);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 243, 238, 0.72)),
        repeating-linear-gradient(90deg, rgba(169, 129, 54, 0.08) 0 1px, transparent 1px 26px);
      box-shadow: 0 14px 34px rgba(23, 33, 63, 0.08);
    }

    .request-card span {
      color: var(--gold);
      font-size: 0.78rem;
      font-weight: 800;
    }

    .request-card h3 {
      font-size: 1.05rem;
      line-height: 1.5;
    }

    .request-card p {
      margin: 0;
      color: var(--ink-soft);
      font-size: 0.92rem;
      line-height: 1.7;
    }

    .project-note {
      margin-top: 16px;
      padding: 14px 16px;
      border: 1px solid rgba(169, 129, 54, 0.28);
      border-left: 5px solid rgba(169, 129, 54, 0.86);
      border-radius: 8px;
      color: var(--ink);
      background: rgba(255, 250, 241, 0.82);
      font-weight: 700;
      line-height: 1.75;
    }

    .festival-plan {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 18px;
    }

    .festival-plan > div {
      padding: 18px;
      border: 1px solid rgba(21, 96, 125, 0.18);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(247, 253, 255, 0.92), rgba(255, 255, 255, 0.86)),
        repeating-linear-gradient(135deg, rgba(50, 160, 188, 0.08) 0 1px, transparent 1px 18px);
    }

    .mini-label {
      margin: 0 0 10px;
      color: #0a7b96;
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.08em;
    }

    .festival-plan ul {
      display: grid;
      gap: 8px;
      margin: 0;
      padding-left: 1.1em;
      color: var(--ink-soft);
      font-size: 0.94rem;
      line-height: 1.65;
    }

    .festival-plan strong {
      color: var(--ink);
      font-weight: 900;
    }

    .recruit-note {
      margin-top: 18px;
      padding: 14px 16px;
      border: 1px solid rgba(123, 185, 201, 0.34);
      border-radius: 8px;
      color: var(--ink-soft);
      background: rgba(232, 246, 251, 0.74);
      line-height: 1.75;
    }

    .nagoya-topic span {
      display: inline-flex;
      min-height: 28px;
      align-items: center;
      padding: 3px 12px;
      border-radius: 999px;
      color: #ffffff;
      font-size: 0.78rem;
      font-weight: 800;
      background: #d18013;
    }

    .nagoya-topic h3 {
      margin-top: 10px;
      font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
      font-size: 1.08rem;
    }

    .nagoya-topic p {
      color: var(--ink-soft);
      font-size: 0.9rem;
      line-height: 1.72;
    }

    .nagoya-visual {
      min-height: 110px;
      margin-top: 12px;
      border-radius: 8px;
      border: 1px solid rgba(204, 129, 26, 0.18);
      background:
        radial-gradient(circle at 32% 36%, rgba(216, 128, 19, 0.26), transparent 2.7rem),
        linear-gradient(135deg, rgba(255, 241, 215, 0.9), rgba(255, 255, 255, 0.86));
    }

    .nagoya-visual.shibori {
      background:
        radial-gradient(circle at 22% 25%, #ffffff 0 7px, transparent 8px),
        radial-gradient(circle at 48% 52%, #ffffff 0 8px, transparent 9px),
        radial-gradient(circle at 76% 30%, #ffffff 0 7px, transparent 8px),
        linear-gradient(135deg, #123f74, #256c9b);
    }

    .nagoya-panorama {
      min-height: 150px;
      margin-top: 16px;
      border-radius: 8px;
      border: 1px solid rgba(204, 129, 26, 0.2);
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 46%),
        linear-gradient(90deg, #e6f0f7 0 28%, #b7d5eb 28% 56%, #ead5bd 56% 100%);
    }

    .learn-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .learn-card,
    .learn-note-card {
      min-width: 0;
      padding: 20px;
      border: 1px solid rgba(169, 129, 54, 0.24);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.84);
      box-shadow: 0 12px 28px rgba(23, 33, 63, 0.07);
    }

    .learn-card span,
    .learn-note-card span,
    .learn-step span {
      display: inline-flex;
      min-height: 28px;
      align-items: center;
      padding: 3px 9px;
      border: 1px solid rgba(169, 129, 54, 0.28);
      border-radius: 999px;
      color: #8a661f;
      font-size: 0.76rem;
      font-weight: 800;
      background: rgba(255, 250, 241, 0.78);
    }

    .learn-card h3,
    .learn-note-card h3 {
      margin-top: 12px;
      font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
      font-size: 1.12rem;
    }

    .learn-card p,
    .learn-note-card p {
      margin: 10px 0 0;
      color: var(--ink-soft);
      font-size: 0.94rem;
      line-height: 1.75;
    }

    .learn-steps {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 10px;
      margin-top: 24px;
    }

    .learn-step {
      position: relative;
      min-height: 170px;
      padding: 16px;
      border: 1px solid rgba(11, 49, 68, 0.18);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.82);
    }

    .learn-step:not(:last-child)::after {
      content: "→";
      position: absolute;
      right: -10px;
      top: 50%;
      z-index: 1;
      color: var(--gold);
      font-weight: 900;
      transform: translate(50%, -50%);
    }

    .learn-step strong {
      display: block;
      margin-top: 10px;
      line-height: 1.45;
    }

    .learn-step p {
      margin: 8px 0 0;
      color: var(--ink-soft);
      font-size: 0.84rem;
      line-height: 1.6;
    }

    .learn-note-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 16px;
      margin-top: 24px;
    }

    .learn-glossary {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
      margin-top: 22px;
    }

    .learn-glossary div {
      min-height: 112px;
      padding: 14px;
      border: 1px solid rgba(11, 49, 68, 0.16);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.76);
    }

    .learn-glossary dt {
      color: var(--ink);
      font-weight: 800;
    }

    .learn-glossary dd {
      margin: 6px 0 0;
      color: var(--ink-soft);
      font-size: 0.84rem;
      line-height: 1.6;
    }

    .it-hero {
      min-height: calc(100svh - 128px);
      padding: 70px 0 82px;
      color: #edf9f8;
      background:
        radial-gradient(circle at 12% 18%, rgba(255, 120, 201, 0.18), transparent 20rem),
        linear-gradient(120deg, rgba(255, 255, 255, 0.05), transparent 36%),
        repeating-linear-gradient(90deg, rgba(52, 213, 255, 0.1) 0 1px, transparent 1px 28px);
    }

    .it-hero h2,
    .it-hero h3 {
      color: #f6fffb;
    }

    .it-hero h2 {
      max-width: 22em;
      font-size: 2.05rem;
      line-height: 1.42;
    }

    .it-hero .eyebrow {
      color: var(--cyber);
    }

    .it-hero p {
      color: rgba(237, 249, 248, 0.78);
    }

    .it-stage {
      display: grid;
      gap: 18px;
      margin-top: 26px;
    }

    .it-flow {
      display: grid;
      grid-template-columns: minmax(220px, 0.82fr) auto minmax(0, 1.5fr);
      gap: 14px;
      align-items: stretch;
      margin-top: 26px;
    }

    .it-flow-step,
    .it-flow-result {
      position: relative;
      min-width: 0;
      border: 1px solid rgba(52, 213, 255, 0.28);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(6, 28, 48, 0.88), rgba(14, 64, 72, 0.58)),
        repeating-linear-gradient(90deg, rgba(52, 213, 255, 0.1) 0 1px, transparent 1px 26px);
      box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.22),
        inset 0 0 24px rgba(52, 213, 255, 0.08);
      transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
    }

    .it-flow-step {
      display: grid;
      align-content: center;
      gap: 10px;
      padding: 20px 20px 54px;
      color: inherit;
      text-decoration: none;
      cursor: pointer;
    }

    .it-flow-kicker,
    .it-flow-result span {
      color: var(--cyber);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0;
    }

    .it-flow-step strong {
      display: block;
      color: #fff;
      font-size: clamp(1.28rem, 2.6vw, 1.8rem);
      line-height: 1.28;
    }

    .it-flow-step p,
    .it-flow-result p {
      margin: 0;
      color: rgba(237, 249, 248, 0.76);
      line-height: 1.65;
    }

    .it-flow-arrow {
      display: grid;
      place-items: center;
      color: var(--cyber);
      font-size: 1.7rem;
      font-weight: 900;
    }

    .it-flow-results {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .it-flow-result {
      display: grid;
      align-content: start;
      gap: 8px;
      min-height: 150px;
      padding: 16px 16px 52px;
      text-decoration: none;
      color: inherit;
      cursor: pointer;
    }

    .it-flow-step::after,
    .it-flow-result::after {
      content: "開く →";
      position: absolute;
      right: 14px;
      bottom: 12px;
      display: inline-flex;
      min-height: 26px;
      align-items: center;
      padding: 2px 9px;
      border: 1px solid rgba(52, 213, 255, 0.5);
      border-radius: 999px;
      color: #08111e;
      background: linear-gradient(90deg, var(--cyber), #e8fff8);
      font-size: 0.72rem;
      font-weight: 900;
      box-shadow: 0 0 18px rgba(52, 213, 255, 0.2);
    }

    .it-flow-step:hover,
    .it-flow-step:focus-visible,
    .it-flow-result:hover,
    .it-flow-result:focus-visible {
      border-color: rgba(52, 213, 255, 0.7);
      box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.3),
        0 0 0 2px rgba(52, 213, 255, 0.16),
        inset 0 0 30px rgba(52, 213, 255, 0.12);
      transform: translateY(-2px);
    }

    .it-flow-step:focus-visible,
    .it-flow-result:focus-visible {
      outline: 3px solid rgba(52, 213, 255, 0.58);
      outline-offset: 4px;
    }

    .it-flow-result strong {
      color: #fff;
      font-size: 1.04rem;
      line-height: 1.35;
    }

    .tech-branch-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .tech-detail-row {
      margin-top: 8px;
    }

    .tech-detail-row .showcase-card {
      min-height: 150px;
    }

    .showcase-card {
      position: relative;
      min-height: 236px;
      display: grid;
      align-content: end;
      overflow: hidden;
      border: 1px solid rgba(52, 213, 255, 0.28);
      border-radius: 8px;
      color: #f6fffb;
      text-decoration: none;
      background:
        linear-gradient(180deg, rgba(7, 22, 38, 0.86), rgba(18, 52, 58, 0.74)),
        repeating-linear-gradient(90deg, rgba(255, 120, 201, 0.08) 0 1px, transparent 1px 24px);
      box-shadow: 0 22px 54px rgba(0, 0, 0, 0.28), inset 0 0 28px rgba(52, 213, 255, 0.08);
    }

    .showcase-card.featured {
      min-height: 188px;
    }

    .showcase-card:focus-visible {
      outline: 3px solid rgba(52, 213, 255, 0.58);
      outline-offset: 4px;
    }

    .showcase-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 0 42%, rgba(3, 12, 22, 0.82) 100%);
      pointer-events: none;
    }

    .slide-track {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: repeat(3, 100%);
      width: 300%;
    }

    .showcase-card:hover .slide-track,
    .showcase-card:focus-visible .slide-track {
      animation: cardSlides 2.8s ease-in-out infinite;
    }

    @keyframes cardSlides {
      0%,
      22% {
        transform: translateX(0);
      }
      36%,
      58% {
        transform: translateX(-33.333%);
      }
      72%,
      94% {
        transform: translateX(-66.666%);
      }
      100% {
        transform: translateX(0);
      }
    }

    .slide {
      --slide-size: cover;
      --slide-position: center;
      min-width: 100%;
      background:
        linear-gradient(180deg, rgba(3, 12, 22, 0.08), rgba(3, 12, 22, 0.76)),
        var(--slide-art),
        linear-gradient(135deg, rgba(4, 20, 34, 0.95), rgba(19, 56, 66, 0.82));
      background-size: cover, var(--slide-size), cover;
      background-position: center, var(--slide-position), center;
      background-repeat: no-repeat;
    }

    .showcase-content {
      position: relative;
      z-index: 1;
      padding: 22px;
    }

    .showcase-card span {
      display: inline-flex;
      margin-bottom: 10px;
      color: var(--cyber);
      font-size: 0.82rem;
      font-weight: 700;
    }

    .showcase-card strong {
      display: block;
      color: #ffffff;
      font-size: clamp(1.14rem, 2.6vw, 1.55rem);
      line-height: 1.35;
    }

    .showcase-card p {
      margin: 10px 0 0;
      color: rgba(237, 249, 248, 0.84);
      line-height: 1.7;
    }

    .slide.model-one {
      --slide-art: url("assets/it-captures/model.png");
      --slide-position: center 82%;
    }

    .slide.model-two {
      --slide-art: url("assets/it-captures/model.png");
      --slide-size: 138%;
      --slide-position: 28% 86%;
    }

    .slide.model-three {
      --slide-art: url("assets/it-captures/model.png");
      --slide-size: 152%;
      --slide-position: 72% 76%;
    }

    .slide.ar-one {
      --slide-art: url("assets/it-captures/ar.png");
      --slide-position: center 46%;
    }

    .slide.ar-two {
      --slide-art: url("assets/it-captures/ar.png");
      --slide-size: 136%;
      --slide-position: 70% 58%;
    }

    .slide.ar-three {
      --slide-art: url("assets/it-captures/ar.png");
      --slide-size: 148%;
      --slide-position: 22% 42%;
    }

    .slide.vtuber-one {
      --slide-art: url("assets/it-captures/vtuber.png");
      --slide-position: center 44%;
    }

    .slide.vtuber-two {
      --slide-art: url("assets/it-captures/vtuber.png");
      --slide-size: 132%;
      --slide-position: 54% 30%;
    }

    .slide.vtuber-three {
      --slide-art: url("assets/it-captures/vtuber.png");
      --slide-size: 150%;
      --slide-position: 68% 62%;
    }

    .slide.hologram-one {
      --slide-art:
        radial-gradient(ellipse at 50% 70%, rgba(52, 213, 255, 0.42), transparent 34%),
        linear-gradient(90deg, transparent 20%, rgba(52, 213, 255, 0.22), transparent 78%),
        repeating-linear-gradient(0deg, rgba(236, 251, 255, 0.16) 0 1px, transparent 1px 10px);
    }

    .slide.hologram-two {
      --slide-art:
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.34), transparent 13%),
        radial-gradient(ellipse at 50% 68%, rgba(52, 213, 255, 0.38), transparent 36%),
        repeating-linear-gradient(135deg, rgba(52, 213, 255, 0.2) 0 1px, transparent 1px 18px);
      --slide-size: cover;
    }

    .slide.hologram-three {
      --slide-art:
        linear-gradient(90deg, transparent 22%, rgba(52, 213, 255, 0.24) 46%, transparent 70%),
        radial-gradient(ellipse at 50% 82%, rgba(212, 177, 102, 0.32), transparent 28%),
        repeating-linear-gradient(90deg, rgba(236, 251, 255, 0.12) 0 1px, transparent 1px 28px);
    }

    .slide.space-one {
      --slide-art: url("assets/it-captures/garden.png");
      --slide-position: center 52%;
    }

    .slide.space-two {
      --slide-art: url("assets/it-captures/garden.png");
      --slide-size: 136%;
      --slide-position: 33% 58%;
    }

    .slide.space-three {
      --slide-art: url("assets/it-captures/garden.png");
      --slide-size: 150%;
      --slide-position: 76% 40%;
    }

    .slide.texture-one {
      --slide-art: url("assets/it-captures/texture.png");
      --slide-position: center 45%;
    }

    .slide.texture-two {
      --slide-art: url("assets/it-captures/texture.png");
      --slide-size: 132%;
      --slide-position: 30% 68%;
    }

    .slide.texture-three {
      --slide-art: url("assets/it-captures/texture.png");
      --slide-size: 148%;
      --slide-position: 72% 36%;
    }

    .button.cyber-button {
      border-color: rgba(52, 213, 255, 0.62);
      color: #08111e;
      background: linear-gradient(90deg, var(--cyber), #e8fff8);
      box-shadow: 0 0 24px rgba(52, 213, 255, 0.22);
    }

    .it-quick-links {
      margin-top: 24px;
    }

    .it-outline-link {
      border-color: rgba(52, 213, 255, 0.5);
      color: #f6fffb;
      background: rgba(255, 255, 255, 0.08);
      box-shadow: inset 0 0 18px rgba(52, 213, 255, 0.08);
    }

    .it-manual {
      margin-top: 36px;
      padding: clamp(20px, 4vw, 34px);
      border: 1px solid rgba(52, 213, 255, 0.26);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(5, 24, 42, 0.86), rgba(15, 64, 79, 0.56)),
        repeating-linear-gradient(135deg, rgba(52, 213, 255, 0.1) 0 1px, transparent 1px 24px);
      box-shadow: 0 22px 62px rgba(0, 0, 0, 0.22), inset 0 0 34px rgba(52, 213, 255, 0.08);
    }

    .it-manual .section-heading {
      max-width: 920px;
    }

    .it-manual .manual-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 22px;
    }

    .it-manual .manual-card {
      min-height: auto;
      border-color: rgba(52, 213, 255, 0.24);
      background: rgba(255, 255, 255, 0.08);
      box-shadow: inset 0 0 24px rgba(52, 213, 255, 0.07);
    }

    .it-manual .manual-card h3 {
      color: #f6fffb;
    }

    .it-manual .manual-card ul,
    .it-manual .manual-card p {
      color: rgba(237, 249, 248, 0.8);
    }

    .it-manual .rights-note {
      border-color: rgba(255, 120, 201, 0.34);
      border-left-color: rgba(255, 120, 201, 0.82);
      background: rgba(255, 120, 201, 0.1);
    }

    .it-manual .rights-note p {
      color: #f6fffb;
    }

    .target-grid,
    .event-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 24px;
    }

    .pill {
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 243, 238, 0.78);
      font-weight: 700;
    }

    .assurance {
      border: 1px solid rgba(169, 129, 54, 0.34);
      border-radius: 8px;
      padding: 24px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 243, 238, 0.72));
    }

    .event-grid div {
      padding: 18px;
      border-left: 4px solid var(--gold);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.8);
    }

    .event-grid dt {
      font-weight: 700;
    }

    .event-grid dd {
      margin: 4px 0 0;
      color: var(--ink-soft);
    }

    .form-wrap {
      display: grid;
      grid-template-columns: minmax(0, 0.86fr) minmax(320px, 1.14fr);
      gap: 28px;
      align-items: start;
    }

    .contact-box,
    form {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 24px;
      background: rgba(255, 255, 255, 0.86);
    }

    .contact-box p {
      margin: 0 0 14px;
      color: var(--ink-soft);
    }

    .form-row {
      display: grid;
      gap: 8px;
      margin-bottom: 16px;
    }

    label,
    legend {
      font-weight: 700;
    }

    input,
    select,
    textarea {
      width: 100%;
      min-height: 46px;
      padding: 10px 12px;
      border: 1px solid rgba(23, 33, 63, 0.32);
      border-radius: 8px;
      color: var(--ink);
      font: inherit;
      background: var(--white);
    }

    textarea {
      min-height: 112px;
      resize: vertical;
    }

    fieldset {
      margin: 0 0 16px;
      padding: 0;
      border: 0;
    }

    .checkbox-grid {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }

    .check-option,
    .consent {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-weight: 400;
    }

    .check-option input,
    .consent input {
      width: 20px;
      min-width: 20px;
      height: 20px;
      min-height: 20px;
      margin-top: 5px;
    }

    .privacy-note,
    .small-note {
      color: var(--ink-soft);
      font-size: 0.9rem;
    }

    .collaborators {
      display: block;
      margin-top: 24px;
      padding: 18px;
      border: 1px solid rgba(169, 129, 54, 0.46);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(255, 250, 241, 0.96), rgba(255, 231, 233, 0.62));
      box-shadow: 0 14px 34px rgba(23, 33, 63, 0.1);
    }

    .collaborators h3 {
      font-size: clamp(1.25rem, 3vw, 1.7rem);
    }

    .collaborators p {
      margin: 10px 0 0;
      color: var(--ink-soft);
    }

    .permission-note {
      margin-top: 14px;
      padding: 12px 14px;
      border-left: 4px solid var(--gold);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.72);
      font-size: 0.92rem;
    }

    .site-footer {
      padding: 34px 0;
      border-top: 1px solid var(--line);
      background: var(--ink);
      color: var(--white);
    }

    .footer-inner {
      display: grid;
      gap: 18px;
    }

    .footer-brand span,
    .footer-note {
      color: rgba(255, 255, 255, 0.76);
    }

    .footer-note {
      margin: 0;
      font-size: 0.84rem;
      line-height: 1.7;
    }

    .edit-panel {
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 30;
      width: min(420px, calc(100% - 32px));
      max-height: min(720px, calc(100svh - 32px));
      overflow: auto;
      padding: 18px;
      border: 1px solid rgba(23, 33, 63, 0.2);
      border-radius: 8px;
      box-shadow: 0 22px 60px rgba(23, 33, 63, 0.26);
      background: rgba(255, 250, 241, 0.98);
    }

    .edit-panel[hidden] {
      display: none;
    }

    .edit-panel h2 {
      font-size: 1.18rem;
    }

    .edit-panel p {
      margin: 8px 0 12px;
      color: var(--ink-soft);
      font-size: 0.86rem;
      line-height: 1.6;
    }

    .edit-panel label {
      display: grid;
      gap: 6px;
      margin-top: 12px;
      font-size: 0.9rem;
    }

    .edit-panel textarea {
      min-height: 82px;
    }

    .edit-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 16px;
    }

    .edit-actions .button {
      width: 100%;
      min-height: 44px;
      padding: 10px 12px;
      cursor: pointer;
    }

    .edit-hotspot {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 60;
      width: 52px;
      height: 52px;
      border: 0;
      padding: 0;
      background: transparent;
      cursor: default;
      -webkit-tap-highlight-color: transparent;
    }

    .edit-hotspot::after {
      content: "";
      position: absolute;
      top: 10px;
      left: 10px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      opacity: 0;
      background:
        conic-gradient(rgba(169, 129, 54, 0.9) var(--edit-hold, 0%), rgba(255, 255, 255, 0.35) 0),
        rgba(23, 33, 63, 0.16);
      box-shadow: 0 8px 24px rgba(23, 33, 63, 0.18);
      transition: opacity 0.15s ease;
    }

    .edit-hotspot.is-pressing::after {
      opacity: 1;
      animation: editHoldProgress 5s linear forwards;
    }

    @keyframes editHoldProgress {
      from {
        --edit-hold: 0%;
      }
      to {
        --edit-hold: 100%;
      }
    }

    @property --edit-hold {
      syntax: "<percentage>";
      inherits: false;
      initial-value: 0%;
    }

    .ripple-layer {
      position: fixed;
      inset: 0;
      z-index: 50;
      pointer-events: none;
      overflow: hidden;
    }

    .cursor-ripple {
      position: fixed;
      left: var(--x);
      top: var(--y);
      width: 24px;
      height: 24px;
      border: 2px solid rgba(205, 83, 133, 0.48);
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(0.2);
      opacity: 0.88;
      box-shadow: 0 0 22px rgba(246, 203, 209, 0.42), inset 0 0 22px rgba(255, 255, 255, 0.24);
      animation: rippleSpread 0.9s ease-out forwards;
    }

    .cursor-ripple::after {
      content: "";
      position: absolute;
      inset: 7px;
      border: 1px solid rgba(169, 129, 54, 0.36);
      border-radius: inherit;
    }

    .cursor-ripple.cyber {
      border-color: rgba(52, 213, 255, 0.72);
      box-shadow: 0 0 30px rgba(52, 213, 255, 0.5), 0 0 46px rgba(255, 120, 201, 0.28);
      mix-blend-mode: screen;
    }

    .cursor-ripple.cyber::after {
      border-color: rgba(255, 120, 201, 0.62);
    }

    @keyframes rippleSpread {
      to {
        transform: translate(-50%, -50%) scale(12);
        opacity: 0;
      }
    }

    @media (max-width: 900px) {
      .header-inner,
      .section-inner,
      .footer-inner {
        max-width: 358px;
        margin-left: 16px;
        margin-right: 16px;
      }

      .hero-grid,
      .form-wrap,
      .learn-layout,
      .learn-detail-grid,
      .learn-note-grid,
      .learn-slide-board,
      .learn-what-layout,
      .learn-making-layout,
      .nagoya-history-grid,
      .request-grid,
      .festival-plan,
      .it-stage {
        grid-template-columns: 1fr;
      }

      .card-grid,
      .learn-grid,
      .request-grid,
      .learn-glossary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .learn-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .learn-slide {
        min-height: auto;
      }

      .learn-kimono-figure {
        min-height: 310px;
      }

      .learn-callouts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .making-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .learn-step:nth-child(3)::after,
      .learn-step:last-child::after {
        display: none;
      }

      .manual-grid {
        grid-template-columns: 1fr;
      }

      .it-manual {
        margin-top: 26px;
        padding: 20px;
      }

      .it-manual .manual-grid {
        grid-template-columns: 1fr;
      }

      .it-flow {
        grid-template-columns: 1fr;
      }

      .it-flow-arrow {
        min-height: 24px;
        transform: rotate(90deg);
      }

      .it-flow-results {
        grid-template-columns: 1fr;
      }

      .it-flow-result {
        min-height: auto;
      }

      .it-flow-result p {
        display: none;
      }

      .tech-branch-grid {
        grid-template-columns: 1fr;
      }

      .showcase-card,
      .showcase-card.featured {
        min-height: 210px;
      }

      .world-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .photo-strip {
        grid-template-columns: 1fr;
      }

      .activity-summary {
        grid-template-columns: 1fr;
      }

      .future-project {
        padding-top: 30px;
      }

      .future-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .future-team {
        min-height: 268px;
        padding: 12px;
      }

      .future-visual {
        min-height: 70px;
      }

      .future-team-label {
        min-height: 28px;
        font-size: 0.68rem;
      }

      .future-team h3 {
        font-size: 0.96rem;
      }

      .future-team-desc {
        font-size: 0.82rem;
        line-height: 1.58;
        -webkit-line-clamp: 3;
      }

      .future-team-detail summary {
        width: 100%;
        min-height: 38px;
        justify-content: space-between;
        padding: 8px 9px;
        font-size: 0.78rem;
        opacity: 1;
        transform: none;
      }

      .future-team:has(.future-team-detail[open]) {
        grid-template-columns: 1fr;
      }

      .future-team:has(.future-team-detail[open]) .future-team-detail {
        grid-column: 1;
        grid-row: auto;
        border-top: 1px solid rgba(31, 143, 184, 0.22);
        padding-top: 10px;
      }

      .future-team:has(.future-team-detail[open]) .future-action-grid {
        grid-template-columns: 1fr;
      }

      .future-action-grid,
      .future-result-grid {
        grid-template-columns: 1fr;
      }

      .future-map {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .future-map-step:not(:last-child)::after {
        right: 50%;
        top: auto;
        bottom: -28px;
        transform: translateX(50%) rotate(90deg);
      }

      .kimono-visual {
        min-height: 320px;
      }
    }

    @media (max-width: 640px) {
      body {
        font-size: 15px;
        line-height: 1.78;
      }

      .site-header {
        padding-top: 14px;
      }

      .header-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
      }

      .header-note {
        text-align: left;
        font-size: 0.76rem;
        line-height: 1.6;
      }

      .tab-menu-toggle {
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: calc(100% - 32px);
        min-height: 52px;
        margin: 0 auto 8px;
        padding: 9px 12px;
        border: 1px solid rgba(169, 129, 54, 0.42);
        border-radius: 8px;
        color: var(--ink);
        text-align: left;
        font: inherit;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 243, 238, 0.82)),
          repeating-linear-gradient(90deg, rgba(169, 129, 54, 0.1) 0 1px, transparent 1px 18px);
        box-shadow: 0 10px 22px rgba(23, 33, 63, 0.08);
      }

      .tab-menu-toggle span {
        color: var(--gold);
        font-size: 0.78rem;
        font-weight: 700;
      }

      .tab-menu-toggle strong {
        display: block;
        margin-top: 2px;
        font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
        font-size: 1rem;
      }

      .tab-menu-toggle::after {
        content: "開く";
        flex: 0 0 auto;
        padding: 5px 9px;
        border-radius: 999px;
        color: var(--white);
        font-size: 0.75rem;
        font-weight: 700;
        background: var(--ink);
      }

      .site-header.nav-open .tab-menu-toggle::after {
        content: "閉じる";
      }

      body.is-cyber .tab-menu-toggle {
        border-color: rgba(52, 213, 255, 0.38);
        color: #eefcff;
        background:
          linear-gradient(135deg, rgba(11, 49, 68, 0.96), rgba(36, 16, 54, 0.92)),
          repeating-linear-gradient(90deg, rgba(52, 213, 255, 0.18) 0 1px, transparent 1px 16px);
      }

      body.is-cyber .tab-menu-toggle span {
        color: var(--cyber);
      }

      body.is-cyber .tab-menu-toggle::after {
        color: var(--ink);
        background: var(--cyber);
      }

      .world-tabs {
        width: calc(100% - 32px);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding-bottom: 8px;
      }

      .site-header.nav-open .world-tabs {
        display: grid;
      }

      .world-tab {
        min-height: 44px;
        padding: 7px 8px;
      }

      .world-tab .tab-kicker {
        font-size: 0.62rem;
      }

      .world-tab strong {
        font-size: 0.82rem;
        line-height: 1.22;
      }

      section {
        padding: 48px 0;
      }

      .hero {
        min-height: 720px;
        padding-top: 24px;
      }

      .hero-media-shade {
        background: linear-gradient(180deg, rgba(8, 15, 28, 0.74), rgba(8, 15, 28, 0.48) 48%, rgba(8, 15, 28, 0.78));
      }

      .hero-sequence {
        min-height: 224px;
        margin-bottom: 18px;
      }

      .hero-sequence-slide strong {
        font-size: clamp(1.9rem, 9.6vw, 2.62rem);
      }

      .hero-sequence-slide p {
        font-size: 0.94rem;
      }

      h1 {
        font-size: clamp(2rem, 10.4vw, 2.72rem);
        max-width: 8.8em;
        line-height: 1.38;
        word-break: normal;
        overflow-wrap: break-word;
      }

      h2 {
        font-size: clamp(1.48rem, 7.1vw, 1.95rem);
        line-height: 1.44;
        word-break: normal;
        overflow-wrap: break-word;
      }

      p,
      li,
      span,
      a,
      dt,
      dd,
      label {
        line-break: strict;
        overflow-wrap: break-word;
        word-break: normal;
      }

      .lead,
      .hero-text,
      .section-heading p {
        overflow-wrap: anywhere;
      }

      .section-heading {
        margin-bottom: 22px;
      }

      .future-project {
        padding-top: 18px;
      }

      .future-project .section-heading {
        margin-bottom: 12px;
      }

      .future-project h2 {
        font-size: 1.32rem;
      }

      .future-project .section-heading p.future-lead {
        margin-top: 6px;
        font-size: 0.82rem;
        line-height: 1.58;
        -webkit-line-clamp: 2;
      }

      .future-flow {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 10px;
      }

      .future-team {
        min-height: auto;
        gap: 9px;
        padding: 12px;
      }

      .future-visual {
        min-height: 84px;
      }

      .future-chip {
        display: none;
      }

      .future-team-label {
        min-height: 28px;
        padding: 3px 8px;
        border-radius: 999px;
        font-size: 0.72rem;
        line-height: 1.35;
      }

      .future-team h3 {
        margin-top: 8px;
        font-size: 1rem;
        line-height: 1.42;
      }

      .future-team-desc {
        display: -webkit-box;
        font-size: 0.84rem;
        line-height: 1.65;
        -webkit-line-clamp: 2;
      }

      .future-team-detail {
        position: relative;
        left: auto;
        bottom: auto;
        padding-top: 7px;
      }

      .future-team-detail summary {
        min-height: 40px;
        padding: 8px 10px;
        font-size: 0.82rem;
        opacity: 1;
        transform: none;
      }

      .future-team-detail summary::after {
        width: 20px;
        height: 20px;
      }

      .future-team:has(.future-team-detail[open]) {
        min-height: auto;
      }

      .future-team:has(.future-team-detail[open]) .future-visual {
        min-height: 80px;
      }

      .future-team:has(.future-team-detail[open]) .future-team-desc {
        display: block;
        font-size: 0.9rem;
      }

      .concept-note {
        padding: 18px;
      }

      .visual-label {
        right: 14px;
        left: 14px;
        max-width: none;
      }

      .hero-actions,
      .cta-row {
        flex-direction: column;
      }

      .button {
        width: 100%;
      }

      .showcase-card,
      .showcase-card.featured {
        min-height: 188px;
      }

      .showcase-content {
        padding: 18px;
      }

      .showcase-card strong {
        font-size: 1.26rem;
      }

      .it-flow {
        margin-top: 18px;
        gap: 10px;
      }

      .it-flow-step,
      .it-flow-result {
        padding: 14px 14px 48px;
      }

      .it-flow-step strong {
        font-size: 1.28rem;
      }

      .it-flow-step p,
      .it-flow-result p {
        font-size: 0.9rem;
      }

      .card-grid,
      .target-grid,
      .event-grid,
      .manual-grid,
      .learn-map,
      .learn-grid,
      .request-grid,
      .festival-plan,
      .learn-steps,
      .learn-glossary {
        grid-template-columns: 1fr;
      }

      .learn-hero {
        padding-top: 34px;
      }

      .learn-slide-board {
        padding-bottom: 42px;
      }

      .learn-panel {
        padding: 18px;
      }

      .learn-map a,
      .learn-map button,
      .learn-slide,
      .learn-card,
      .learn-note-card,
      .request-card,
      .learn-step,
      .learn-glossary div {
        min-height: auto;
      }

      .learn-step::after {
        display: none;
      }

      .learn-slide-header {
        gap: 12px;
      }

      .learn-what-layout,
      .learn-type-panels,
      .learn-making-layout,
      .making-feature,
      .nagoya-history-grid {
        grid-template-columns: 1fr;
      }

      .kimono-mini-row,
      .making-photo-grid,
      .learn-callouts {
        grid-template-columns: 1fr;
      }

      .learn-kimono-figure {
        min-height: 260px;
      }

      .card {
        min-height: auto;
      }

      .contact-box,
      form,
      .assurance {
        padding: 20px;
      }

      .edit-actions {
        grid-template-columns: 1fr;
      }
    }
    .activity-story {
      position: relative;
      color: #fff;
      background: #111827;
      overflow: hidden;
    }

    .story-band,
    .recruit-request.story-digital {
      position: relative;
      display: grid;
      align-items: center;
      min-height: clamp(500px, 68vh, 740px);
      margin-top: -34px;
      padding: 116px 0;
      isolation: isolate;
      overflow: hidden;
      clip-path: polygon(0 34px, 100% 0, 100% calc(100% - 34px), 0 100%);
    }

    .story-media {
      position: absolute;
      inset: 0;
      z-index: -2;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.025);
    }

    .story-media-stack {
      position: absolute;
      inset: 0;
      z-index: -2;
      overflow: hidden;
      background: #111827;
    }

    .story-media-stack .story-media {
      z-index: 0;
      opacity: 0;
      animation: storyPhotoCycle 30s ease-in-out infinite;
    }

    .story-media-stack .story-media:nth-child(2) { animation-delay: 6s; }
    .story-media-stack .story-media:nth-child(3) { animation-delay: 12s; }
    .story-media-stack .story-media:nth-child(4) { animation-delay: 18s; }
    .story-media-stack .story-media:nth-child(5) { animation-delay: 24s; }

    @keyframes storyPhotoCycle {
      0%, 100% { opacity: 0; transform: scale(1.06); }
      3%, 17% { opacity: 1; transform: scale(1.015); }
      21% { opacity: 0; transform: scale(1.03); }
    }

    .story-band::before,
    .recruit-request.story-digital::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(90deg, rgba(8, 15, 28, 0.88), rgba(8, 15, 28, 0.5) 58%, rgba(8, 15, 28, 0.2)),
        linear-gradient(180deg, rgba(8, 15, 28, 0.2), rgba(8, 15, 28, 0.7));
    }

    .story-band::after,
    .recruit-request.story-digital::after {
      content: "";
      position: absolute;
      inset: 34px 0 auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(240, 215, 148, 0.9), transparent);
    }

    .story-band.is-right::before {
      background:
        linear-gradient(270deg, rgba(8, 15, 28, 0.9), rgba(8, 15, 28, 0.5) 58%, rgba(8, 15, 28, 0.18)),
        linear-gradient(180deg, rgba(8, 15, 28, 0.2), rgba(8, 15, 28, 0.7));
    }

    .story-content {
      display: flex;
      align-items: center;
      min-height: 360px;
    }

    .story-band.is-right .story-content { justify-content: flex-end; }

    .story-copy {
      width: min(560px, 100%);
      padding: clamp(26px, 5vw, 52px);
      border: 1px solid rgba(255, 255, 255, 0.28);
      color: #fff;
      background: rgba(9, 18, 32, 0.48);
      backdrop-filter: blur(14px);
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
    }

    .story-order {
      display: inline-flex;
      margin-bottom: 14px;
      color: #ffd0dd;
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .story-copy h2,
    .story-digital h2,
    .story-digital h3 {
      color: #fff;
    }

    .story-copy h2 { font-size: clamp(2rem, 5vw, 3.4rem); }

    .story-copy p {
      margin: 18px 0 0;
      color: rgba(255, 255, 255, 0.86);
    }

    .recruit-request.story-digital {
      margin-bottom: -34px;
      color: #fff;
      background: #101827;
    }

    .story-digital .section-inner { z-index: 1; }

    .story-digital .section-heading {
      max-width: 720px;
      padding: clamp(24px, 4vw, 44px);
      border: 1px solid rgba(255, 255, 255, 0.24);
      background: rgba(9, 18, 32, 0.56);
      backdrop-filter: blur(14px);
    }

    .story-digital .section-heading p,
    .story-digital .recruit-note { color: rgba(255, 255, 255, 0.86); }

    .story-digital .request-card,
    .story-digital .festival-plan > div {
      border-color: rgba(255, 255, 255, 0.28);
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(12px);
    }

    @media (max-width: 640px) {
      .story-band,
      .recruit-request.story-digital {
        min-height: 560px;
        margin-top: -18px;
        padding: 86px 0;
        clip-path: polygon(0 18px, 100% 0, 100% calc(100% - 18px), 0 100%);
      }

      .story-band::after,
      .recruit-request.story-digital::after { inset-block-start: 18px; }

      .story-copy { padding: 24px; }
    }

    @media (max-width: 640px) {
      .site-header .brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
      }

      .site-header .brand .calligraphy-title { font-size: 2.15rem; }
      .site-header .brand span { font-size: 0.62rem; }

      .hero-media {
        inset: 0 0 18px;
        -webkit-mask-image: radial-gradient(ellipse 96% 80% at 50% 44%, #000 58%, rgba(0, 0, 0, 0.68) 80%, transparent 100%);
        mask-image: radial-gradient(ellipse 96% 80% at 50% 44%, #000 58%, rgba(0, 0, 0, 0.68) 80%, transparent 100%);
      }
    }

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

      .header-sakura-wind::before,
      .header-sakura-wind::after,
      .header-sakura-wind i { animation: none !important; }

      .hero-photo-loop img,
      .hero-sequence-slide,
      .kimono-visual {
        animation: none !important;
      }

      .hero-sequence-slide:first-child {
        opacity: 1;
        transform: none;
      }

      .hero-photo-loop img { opacity: 0; }

      .story-media-stack .story-media { animation: none !important; }
      .story-media-stack .story-media:first-child { opacity: 1; }
    }
/* Multi-page navigation */
.world-tabs { width: min(1080px, calc(100% - 32px)); grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .world-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .world-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Black exhibition stage */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  color: #f9edf0;
  background: #000;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease, visibility 0.8s step-end;
  animation: loaderFailsafe 0s linear 5s forwards;
}

.site-loader strong {
  font-family: "KouzanBrushFont", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(2.8rem, 8vw, 6.6rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-shadow: 0 0 34px rgba(246, 203, 209, 0.5);
  animation: loaderTitle 1.7s ease-in-out infinite alternate;
}

.site-loader.is-finished {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes loaderTitle {
  from { opacity: 0.25; transform: translateY(12px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes loaderFailsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

body[data-page="home"],
body[data-page="home"] main,
body[data-page="home"] .tab-panel,
body[data-page="home"] .activity-story,
body[data-page="home"] .recruit-request.story-digital {
  background: #fff;
}

body[data-page="home"] .hero,
body[data-page="home"] .tab-panel .hero {
  background: #000;
}

body[data-page="home"] .hero-media {
  inset: 0;
  background: #000;
  -webkit-mask-image: radial-gradient(ellipse 92% 90% at 52% 46%, #000 0 78%, rgba(0, 0, 0, 0.92) 86%, rgba(0, 0, 0, 0.35) 93%, transparent 98%);
  mask-image: radial-gradient(ellipse 92% 90% at 52% 46%, #000 0 78%, rgba(0, 0, 0, 0.92) 86%, rgba(0, 0, 0, 0.35) 93%, transparent 98%);
}

body[data-page="home"] .hero-background-video {
  opacity: var(--hero-video-opacity, 0) !important;
  filter: brightness(1.03) saturate(1);
  transition: none;
}

body[data-page="home"] .hero-media-shade {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.56) 0%, rgba(0, 0, 0, 0.34) 20%, rgba(0, 0, 0, 0.08) 38%, transparent 52%);
}

body[data-page="home"] .hero::after { display: none; }

body[data-page="home"] .hero-sakura-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: url("hero/sakura-frame.png") center / 100% 100% no-repeat;
  clip-path: inset(0 0 0 50%);
  filter: drop-shadow(0 4px 12px rgba(42, 17, 24, 0.2));
}

body[data-page="home"] .hero-corner-logo {
  position: absolute;
  left: clamp(18px, 2.8vw, 42px);
  bottom: clamp(18px, 3vw, 34px);
  z-index: 3;
  width: clamp(82px, 9vw, 126px);
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(20, 12, 14, 0.28);
}

body[data-page="home"] .hero-grid {
  z-index: 2;
}

@media (max-width: 760px) {
  body[data-page="home"] .hero-sakura-frame {
    inset: 0 -12% 0 0;
    opacity: 0.82;
  }

  body[data-page="home"] .hero-corner-logo {
    left: 14px;
    bottom: 14px;
    width: 76px;
  }
}

/* Activity journal */
.activity-diary-hero {
  position: relative;
  display: grid;
  min-height: clamp(520px, 70svh, 760px);
  padding: 0;
  overflow: hidden;
  background: #eaded1;
}

.activity-diary-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.activity-diary-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 251, 245, 0.98) 0%, rgba(255, 251, 245, 0.86) 28%, rgba(255, 251, 245, 0.18) 58%, rgba(255, 251, 245, 0.04) 100%),
    linear-gradient(0deg, rgba(26, 21, 25, 0.2), transparent 38%);
}

.activity-diary-hero-copy {
  position: relative;
  z-index: 1;
  align-self: center;
  padding-block: 90px;
}

.activity-diary-hero-copy > * {
  max-width: 560px;
}

.activity-diary-hero-copy p {
  margin: 0 0 16px;
  color: #8b5264;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.activity-diary-hero-copy h1 {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(3.4rem, 9vw, 7rem);
  font-weight: 500;
  letter-spacing: 0.08em;
}

.activity-diary-hero-copy strong,
.activity-diary-hero-copy span {
  display: block;
}

.activity-diary-hero-copy strong {
  margin-top: 20px;
  color: #302431;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
}

.activity-diary-hero-copy span {
  max-width: 500px;
  margin-top: 12px;
  color: rgba(48, 36, 49, 0.76);
  line-height: 1.9;
}

.activity-child-guide {
  padding: 58px 0;
  background:
    linear-gradient(135deg, rgba(247, 221, 225, 0.7), rgba(255, 251, 245, 0.94)),
    #fffaf5;
  border-block: 1px solid rgba(139, 82, 100, 0.14);
}

.activity-child-guide-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.52fr);
  gap: 44px;
  align-items: center;
}

.activity-child-guide h2 {
  font-size: clamp(1.75rem, 4vw, 2.8rem);
}

.activity-child-guide p:not(.eyebrow) {
  max-width: 680px;
  margin: 14px 0 0;
  color: var(--ink-soft);
}

.activity-child-link {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 164px;
  padding: 28px 30px;
  border: 1px solid rgba(139, 82, 100, 0.26);
  color: var(--ink);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 18px 48px rgba(86, 58, 67, 0.09);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.activity-child-link::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(169, 129, 54, 0.22);
  pointer-events: none;
}

.activity-child-link:hover,
.activity-child-link:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 24px 58px rgba(86, 58, 67, 0.15);
}

.activity-child-link span,
.activity-child-link small,
.activity-child-link strong {
  position: relative;
  z-index: 1;
}

.activity-child-link span {
  color: #8b5264;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.activity-child-link strong {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1.5rem, 3vw, 2.05rem);
}

.activity-child-link small {
  justify-self: start;
  margin-top: 10px;
  color: var(--ink-soft);
}

.activity-journal {
  padding: 86px 0 108px;
  background:
    linear-gradient(rgba(255, 252, 247, 0.95), rgba(255, 252, 247, 0.95)),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(139, 82, 100, 0.1) 31px 32px);
}

.activity-journal-heading {
  max-width: 720px;
  margin-bottom: 42px;
}

.activity-journal-heading > p:last-child {
  margin: 12px 0 0;
  color: var(--ink-soft);
}

.activity-post-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.activity-post {
  display: grid;
  grid-template-rows: 260px 1fr;
  overflow: hidden;
  border: 1px solid rgba(56, 50, 57, 0.12);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 22px 56px rgba(62, 48, 55, 0.1);
}

.activity-post-featured {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, 0.88fr);
  grid-template-rows: minmax(430px, auto);
}

.activity-post figure {
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.activity-post figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}

.activity-post:hover figure img {
  transform: scale(1.025);
}

.activity-post-body {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 4vw, 42px);
}

.activity-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 15px;
  align-items: center;
  color: #8b5264;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.activity-post-meta span {
  padding: 3px 9px;
  border: 1px solid rgba(139, 82, 100, 0.26);
  border-radius: 999px;
  background: #fff7f8;
}

.activity-post h3 {
  margin-top: 18px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.6;
}

.activity-post p {
  margin: 15px 0 0;
  color: var(--ink-soft);
  line-height: 1.9;
}

.activity-post a {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 24px;
  color: #7e263e;
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.subpage-breadcrumb {
  display: flex;
  gap: 9px;
  align-items: center;
  padding-top: 30px;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.subpage-breadcrumb a {
  color: #7e263e;
  text-underline-offset: 4px;
}

@media (max-width: 860px) {
  .activity-child-guide-inner,
  .activity-post-featured {
    grid-template-columns: 1fr;
  }

  .activity-post-featured {
    grid-template-rows: 330px auto;
  }
}

@media (max-width: 680px) {
  .activity-diary-hero {
    min-height: 590px;
  }

  .activity-diary-hero > img {
    object-position: 66% center;
  }

  .activity-diary-hero-shade {
    background: linear-gradient(0deg, rgba(255, 251, 245, 0.98) 0%, rgba(255, 251, 245, 0.9) 45%, rgba(255, 251, 245, 0.08) 82%);
  }

  .activity-diary-hero-copy {
    align-self: end;
    padding-block: 150px 58px;
  }

  .activity-child-guide-inner,
  .activity-post-list {
    grid-template-columns: 1fr;
  }

  .activity-post-featured {
    grid-column: auto;
    grid-template-rows: 260px auto;
  }

  .activity-journal {
    padding-block: 66px 82px;
  }
}

/* Latest topic and research archive */
.latest-topic-band {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  width: min(1120px, calc(100% - 32px));
  margin: 34px auto;
  padding: 16px 22px;
  border: 1px solid rgba(126, 38, 62, 0.26);
  color: #2e2028;
  text-decoration: none;
  background:
    linear-gradient(90deg, rgba(247, 213, 221, 0.9), rgba(255, 250, 244, 0.94)),
    #fff;
  box-shadow: 0 14px 36px rgba(82, 49, 60, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.latest-topic-band:hover,
.latest-topic-band:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(82, 49, 60, 0.16);
}

.latest-topic-band > span {
  padding: 5px 10px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: #a3294d;
}

.latest-topic-band > strong {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.12rem;
  white-space: nowrap;
}

.latest-topic-band > em {
  color: var(--ink-soft);
  font-style: normal;
}

.latest-topic-band > b {
  color: #7e263e;
  font-size: 0.84rem;
  white-space: nowrap;
}

.activity-subpage-grid {
  display: grid;
  gap: 14px;
}

.activity-subpage-grid .activity-child-link {
  min-height: 146px;
}

.activity-child-link.is-latest {
  border-color: rgba(163, 41, 77, 0.38);
  background: linear-gradient(135deg, rgba(255, 244, 247, 0.98), rgba(255, 255, 255, 0.92));
}

.research-hero {
  position: relative;
  padding: clamp(80px, 11vw, 140px) 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 251, 244, 0.96), rgba(247, 237, 224, 0.86)),
    repeating-linear-gradient(0deg, transparent 0 29px, rgba(54, 63, 83, 0.08) 29px 30px);
}

.research-hero::after {
  content: "";
  position: absolute;
  right: -8vw;
  bottom: -16vw;
  width: min(54vw, 660px);
  aspect-ratio: 1;
  border: 1px solid rgba(169, 129, 54, 0.22);
  border-radius: 50%;
  box-shadow:
    0 0 0 36px rgba(169, 129, 54, 0.035),
    0 0 0 74px rgba(126, 38, 62, 0.025);
}

.research-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
}

.research-hero h1 {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(2.8rem, 7vw, 5.8rem);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.research-hero h1 + p {
  max-width: 670px;
  margin: 22px 0 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 2vw, 1.16rem);
  line-height: 2;
}

.archive-index-mark {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(126, 38, 62, 0.24);
  transform: rotate(-3deg);
  background: rgba(255, 255, 255, 0.68);
}

.archive-index-mark span {
  display: grid;
  place-items: center;
  width: clamp(48px, 7vw, 76px);
  aspect-ratio: 1;
  border: 1px solid rgba(126, 38, 62, 0.32);
  color: #7e263e;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  background: #fffaf7;
}

.research-archive {
  padding: 90px 0 118px;
  background: #f6f1e9;
}

.research-archive-heading {
  max-width: 760px;
  margin-bottom: 44px;
}

.research-archive-heading > p:last-child {
  margin: 14px 0 0;
  color: var(--ink-soft);
}

.archive-box-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.archive-box {
  position: relative;
  min-height: 330px;
  padding: 72px 30px 28px;
  border: 1px solid rgba(53, 55, 65, 0.18);
  border-radius: 3px 3px 12px 12px;
  background:
    linear-gradient(rgba(255, 253, 248, 0.95), rgba(255, 253, 248, 0.95)),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(72, 78, 93, 0.08) 27px 28px);
  box-shadow: 0 20px 52px rgba(59, 49, 50, 0.09);
}

.archive-box-tab {
  position: absolute;
  top: -1px;
  left: 24px;
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: min(76%, 330px);
  padding: 13px 18px;
  border: 1px solid rgba(53, 55, 65, 0.16);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #ead9b9;
}

.archive-box-tab span {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.archive-box-tab strong {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.12rem;
}

.archive-box > p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.85;
}

.archive-record-list {
  display: grid;
  gap: 9px;
  margin: 24px 0 46px;
  padding: 0;
  list-style: none;
}

.archive-record-list li {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(53, 55, 65, 0.12);
}

.archive-record-list time {
  color: #8c6c3c;
  font-size: 0.7rem;
  font-weight: 800;
}

.archive-record-list a {
  color: var(--ink);
  font-weight: 700;
  text-underline-offset: 4px;
}

.archive-box-count,
.archive-empty-label {
  position: absolute;
  right: 24px;
  bottom: 20px;
  color: rgba(23, 33, 63, 0.5);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.archive-box-culture .archive-box-tab { background: #e5c8c8; }
.archive-box-digital .archive-box-tab { background: #c7dce1; }
.archive-box-exhibition .archive-box-tab { background: #d5d6bd; }

.archive-box-empty {
  min-height: 230px;
  border-style: dashed;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: none;
}

.archive-box-empty .archive-box-tab {
  background: #e6e2db;
}

@media (max-width: 760px) {
  .latest-topic-band {
    grid-template-columns: auto 1fr;
    gap: 9px 12px;
  }

  .latest-topic-band > em,
  .latest-topic-band > b {
    grid-column: 1 / -1;
  }

  .research-hero-inner,
  .archive-box-grid {
    grid-template-columns: 1fr;
  }

  .archive-index-mark {
    justify-self: start;
  }

  .research-archive {
    padding-block: 68px 86px;
  }
}

.story-intro {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 112px;
  padding: 30px 20px 24px;
  text-align: center;
  background: #fff;
}

.story-intro::after {
  display: none;
}

.story-intro span,
.story-order,
.story-digital .eyebrow {
  color: #e5bdc6;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  letter-spacing: 0.22em;
}

.story-intro h2 {
  margin: 0;
  color: #241b1d;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 500;
  letter-spacing: 0.2em;
}

body[data-page="home"] .story-band,
body[data-page="home"] .recruit-request.story-digital {
  height: clamp(500px, 68vh, 740px);
  min-height: 0;
  margin-top: 0;
  padding: 0;
  clip-path: none;
  background: #fff;
}

body[data-page="home"] .story-band::after,
body[data-page="home"] .recruit-request.story-digital::after { display: none; }

body[data-page="home"] .story-band::before,
body[data-page="home"] .recruit-request.story-digital::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.78) 17%, rgba(0, 0, 0, 0.52) 30%, rgba(0, 0, 0, 0.12) 46%, transparent 60%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, transparent 20%, transparent 82%, rgba(0, 0, 0, 0.16) 100%);
}

body[data-page="home"] .story-band.is-right::before {
  background:
    linear-gradient(270deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.78) 17%, rgba(0, 0, 0, 0.52) 30%, rgba(0, 0, 0, 0.12) 46%, transparent 60%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, transparent 20%, transparent 82%, rgba(0, 0, 0, 0.16) 100%);
}

body[data-page="home"] .story-copy,
body[data-page="home"] .story-digital .section-heading {
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

body[data-page="home"] .story-copy,
body[data-page="home"] .story-digital .section-heading {
  width: min(500px, 46vw);
  max-width: none;
}

body[data-page="home"] .story-copy h2,
body[data-page="home"] .story-digital .section-heading h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.35;
}

body[data-page="home"] .story-copy p,
body[data-page="home"] .story-digital .section-heading > p:not(.eyebrow) {
  margin: 18px 0 0;
  font-size: 1rem;
  line-height: 1.8;
}

body[data-page="home"] .story-copy h2,
body[data-page="home"] .story-copy p,
body[data-page="home"] .story-order,
body[data-page="home"] .story-digital .section-heading {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72);
}

body[data-page="home"] .story-media,
body[data-page="home"] .story-media-stack { inset: 0; }

body[data-page="home"] .annual-plan-section {
  position: relative;
  z-index: 1;
  padding: 68px 0 82px;
  color: var(--ink);
  background: #fff;
}

body[data-page="home"] .annual-plan-section .festival-plan {
  margin-top: 0;
}

body[data-page="home"] .annual-plan-section .recruit-note {
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .story-intro { min-height: 96px; padding: 24px 18px 18px; }
  body[data-page="home"] .story-copy { width: min(88%, 430px); }
  body[data-page="home"] .story-band,
  body[data-page="home"] .recruit-request.story-digital {
    height: 560px;
    min-height: 560px;
    padding: 0;
  }
  body[data-page="home"] .story-copy,
  body[data-page="home"] .story-digital .section-heading {
    width: min(88%, 430px);
  }
  body[data-page="home"] .story-copy h2,
  body[data-page="home"] .story-digital .section-heading h2 {
    font-size: clamp(1.9rem, 9vw, 2.5rem);
  }
  body[data-page="home"] .story-band::before,
  body[data-page="home"] .story-band.is-right::before,
  body[data-page="home"] .recruit-request.story-digital::before {
    background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.18) 48%, rgba(0,0,0,0.82) 78%, rgba(0,0,0,0.92) 100%);
  }
  body[data-page="home"] .story-content,
  body[data-page="home"] .story-band.is-right .story-content {
    align-items: flex-end;
    justify-content: flex-start;
  }
}

/* Dressing lesson sequence */
.kitsuke-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.kitsuke-steps li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 18px;
  border: 1px solid rgba(169, 129, 54, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.kitsuke-steps li > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 700;
  background: #7e263e;
}

.kitsuke-steps strong {
  display: block;
  color: var(--ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.05rem;
}

.kitsuke-steps p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.7;
}

@media (max-width: 640px) {
  .kitsuke-steps { grid-template-columns: 1fr; }
  .kitsuke-steps li { padding: 15px; }
}

/* Learn page: two entrances and a sticky-note detail window */
.learn-entry {
  display: grid;
  gap: 34px;
}

.learn-entry-heading {
  max-width: 760px;
  text-align: center;
  margin: 0 auto;
}

.learn-entry-heading h2 {
  margin-top: 8px;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
}

.learn-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px);
}

.learn-choice {
  position: relative;
  display: grid;
  min-height: 300px;
  align-content: center;
  justify-items: center;
  gap: 14px;
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid rgba(78, 55, 49, 0.2);
  border-radius: 6px;
  color: #241b1d;
  text-align: center;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(47, 32, 35, 0.12);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.learn-choice::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.learn-choice.is-knowledge {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.7), transparent 58%),
    #e6d8bd;
}

.learn-choice.is-practice {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.68), transparent 58%),
    #e7bdc9;
}

.learn-choice:hover,
.learn-choice:focus-visible,
.learn-choice.is-active {
  transform: translateY(-6px);
  border-color: rgba(126, 38, 62, 0.48);
  box-shadow: 0 28px 72px rgba(47, 32, 35, 0.2);
}

.learn-choice > span {
  color: #7e263e;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 0.9rem;
  letter-spacing: 0.24em;
}

.learn-choice > strong {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(2rem, 4.3vw, 3.4rem);
  font-weight: 600;
  line-height: 1.35;
}

.learn-choice > small {
  color: rgba(36, 27, 29, 0.72);
  font-size: 0.92rem;
}

.learn-detail-section {
  padding-top: 108px;
  background: linear-gradient(180deg, #f3ede4, #fffaf3);
}

.learn-window {
  position: relative;
  padding: 0 32px 36px;
  border: 1px solid rgba(78, 55, 49, 0.22);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 28px 80px rgba(47, 32, 35, 0.14);
}

.learn-window .learn-map {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: -48px 0 0;
}

.learn-window .learn-map button {
  --note-color: #ead6a8;
  min-height: 82px;
  padding: 13px 14px 16px;
  border: 0;
  border-radius: 4px 4px 0 0;
  background: var(--note-color);
  box-shadow: 0 -6px 18px rgba(47, 32, 35, 0.09);
  transform-origin: bottom center;
}

.learn-window .learn-map button:nth-child(2) { --note-color: #d8e4c3; }
.learn-window .learn-map button:nth-child(3) { --note-color: #c7ddea; }
.learn-window .learn-map button:nth-child(4) { --note-color: #ead0d8; }
.learn-window .learn-map button:nth-child(5) { --note-color: #dfd2eb; }

.learn-window .learn-map button:nth-child(odd) { transform: rotate(-0.7deg); }
.learn-window .learn-map button:nth-child(even) { transform: rotate(0.7deg); }

.learn-window .learn-map button:hover,
.learn-window .learn-map button:focus-visible,
.learn-window .learn-map button.is-active {
  border-color: transparent;
  background: var(--note-color);
  transform: translateY(-9px) rotate(0deg);
  box-shadow: 0 -12px 24px rgba(47, 32, 35, 0.16);
}

.learn-window .learn-map button.is-active::after {
  content: "";
  position: absolute;
  inset: auto 12px 8px;
  height: 3px;
  background: #7e263e;
}

.learn-window .learn-detail-intro {
  padding: 38px 10px 12px;
}

.learn-window > .learn-detail-panel {
  margin-top: 18px;
}

@media (max-width: 760px) {
  .learn-choice-grid { grid-template-columns: 1fr; }
  .learn-choice { min-height: 220px; }
  .learn-window { padding: 0 18px 24px; }
  .learn-window .learn-map {
    display: flex;
    gap: 7px;
    margin-inline: -6px;
    overflow-x: auto;
    padding: 10px 6px 0;
    scrollbar-width: thin;
  }
  .learn-window .learn-map button {
    flex: 0 0 148px;
    min-height: 76px;
  }
}