/*
Theme Name: MCD MIX
Theme URI: https://example.com/
Author: MCD MIX
Description: MCD MIX / ながくてアートブック イベントサイト（静的HTMLから変換）。スクラップブック調デザイン。
Version: 2.0.38
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: mcdmix
*/


/* ===================== from mcd-mix-events.html ===================== */

    /* =========================================================
       BASE（仮）— 後で base.css として切り出します
       ========================================================= */
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    html { overflow-x: clip; }   /* 破れ紙108%幅やテープ左見切れによる横スクロールを抑止（clipでstickyを壊さない） */
    /* リンクにもデフォルト（黒塗り）のカスタムカーソル */
    a {
      cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2222%22%20height%3D%2226%22%20viewBox%3D%220%200%2089.85%20104.5%22%3E%3Cpolygon%20points%3D%221.58%202.24%2026.18%20102.34%2051.15%2072.47%2087.65%2058.95%201.58%202.24%22%20fill%3D%22%23211815%22%20stroke%3D%22%23fff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22/%3E%3C/svg%3E") 2 2, pointer;
    }
    /* ボタンの上では黒白反転カーソル（白塗り＋黒縁） */
    .site-header__cta, .hero__card-cta, .about__more, .news__more,
    .event__card-link, .event__arrow, button, [role="button"] {
      cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2222%22%20height%3D%2226%22%20viewBox%3D%220%200%2089.85%20104.5%22%3E%3Cpolygon%20points%3D%221.58%202.24%2026.18%20102.34%2051.15%2072.47%2087.65%2058.95%201.58%202.24%22%20fill%3D%22%23fff%22%20stroke%3D%22%23211815%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22/%3E%3C/svg%3E") 2 2, pointer;
    }
    body {
      background-color: #F6EEE2;
      /* ページ共通の方眼グリッド（白い紙の下〜スライダーまで連続して見える） */
      background-image:
        linear-gradient(rgba(150, 120, 90, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150, 120, 90, 0.10) 1px, transparent 1px);
      background-size: 26px 26px;
      min-height: 100vh;
      overflow-x: clip;
      font-family: "Noto Sans JP", sans-serif;
      color: #1a1a1a;
      /* カスタムマウスカーソル（SVG・先端を基点に） */
      cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2222%22%20height%3D%2226%22%20viewBox%3D%220%200%2089.85%20104.5%22%3E%3Cpolygon%20points%3D%221.58%202.24%2026.18%20102.34%2051.15%2072.47%2087.65%2058.95%201.58%202.24%22%20fill%3D%22%23211815%22%20stroke%3D%22%23fff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22/%3E%3C/svg%3E") 2 2, auto;
    }

    /* =========================================================
       PART 1 — Header / Top Navigation
       ========================================================= */
    .site-header {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      width: 100%;
      background: #fffdf2;
      overflow: visible;
    }
    .site-header__inner {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      width: 100%;
      padding: 0.6rem 2rem;
    }
    .site-header__logo {
      position: absolute;
      left: 2rem;
      /* ヘッダー下端を基準に、ロゴ高さの30%だけ下へはみ出させる（高さ92px → 約28px下に出る） */
      bottom: -28px;
      display: block;
      flex-shrink: 0;
      line-height: 0;
      z-index: 110;
    }
    .site-header__logo img { display: block; width: 92px; height: auto; object-fit: contain; }
    /* ロゴが absolute になった分、nav 側がロゴ幅に被らないよう左に余白を確保 */
    .site-header__inner { padding-left: calc(2rem + 80px + 1.5rem); }
    .site-header__nav { flex: 1 1 auto; display: flex; justify-content: center; }
    .site-header__nav-list {
      display: flex; align-items: center; gap: 2.5rem;
      margin: 0; padding: 0; list-style: none;
    }
    .site-header__nav-list a {
      position: relative;
      display: inline-block; text-decoration: none; color: #1a1a1a;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.05rem; font-weight: 500; letter-spacing: 0.04em;
      padding-bottom: 4px;
    }
    .site-header__nav-list a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1.5px;
      background: #1a1a1a;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.28s ease;
    }
    .site-header__nav-list a:hover::after { transform: scaleX(1); }
    .site-header__cta {
      flex-shrink: 0; display: inline-block; padding: 0.85rem 1.5rem;
      background: #111; color: #fff; text-decoration: none;
      font-family: "Noto Sans JP", sans-serif; font-size: 0.85rem;
      font-weight: 700; letter-spacing: 0.04em; white-space: nowrap;
      border-radius: 3px; transition: background 0.2s ease;
    }
    .site-header__cta:hover { background: #c0473a; }
    /* ハンバーガーボタン（PCでは非表示） */
    .site-header__burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 40px;
      height: 40px;
      padding: 9px;
      margin-left: auto;
      background: transparent;
      border: none;
      cursor: pointer;
      z-index: 120;
    }
    .site-header__burger span {
      display: block;
      width: 100%;
      height: 2px;
      background: #1a1a1a;
      border-radius: 2px;
      transition: transform 0.25s ease, opacity 0.2s ease;
    }
    .site-header.is-open .site-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .site-header.is-open .site-header__burger span:nth-child(2) { opacity: 0; }
    .site-header.is-open .site-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    /* SPメニューのフェードイン */
    @keyframes spMenuFade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes spItemRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @media (max-width: 860px) {
      .site-header__inner { padding: 0.6rem 1.25rem; padding-left: calc(1.25rem + 78px + 1rem); }
      .site-header__burger { display: inline-flex; }
      /* 閉じている時は nav と CTA を隠す */
      .site-header__nav, .site-header__cta { display: none; }
      /* 開いた時：全画面オーバーレイ（ロゴ左・nav左寄せ・CTA下・×右上） */
      .site-header.is-open {
        position: fixed;
        inset: 0;
        height: 100vh;
        height: 100dvh;
        background: #F6EEE2;
        z-index: 300;
        overflow-y: auto;
        animation: spMenuFade 0.3s ease both;
      }
      .site-header.is-open .site-header__inner {
        display: grid;
        grid-template-columns: auto auto;
        grid-auto-rows: min-content;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 1.8rem 3rem;
        width: 100%;
        height: 100%;
        padding: 2rem 1.5rem;
      }
      .site-header.is-open .site-header__logo {
        position: static;
        grid-column: 1;
        grid-row: 1 / 3;
        justify-self: center;
      }
      .site-header.is-open .site-header__logo img { width: 118px; }
      .site-header.is-open .site-header__nav { display: flex; grid-column: 2; grid-row: 1; }
      .site-header.is-open .site-header__nav-list { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
      .site-header.is-open .site-header__nav-list a { font-size: 1.55rem; }
      .site-header.is-open .site-header__cta { display: inline-flex; grid-column: 2; grid-row: 2; justify-self: start; }
      /* 項目をふわっと順番に表示 */
      .site-header.is-open .site-header__nav-list li,
      .site-header.is-open .site-header__cta { animation: spItemRise 0.4s ease both; }
      .site-header.is-open .site-header__nav-list li:nth-child(1) { animation-delay: 0.08s; }
      .site-header.is-open .site-header__nav-list li:nth-child(2) { animation-delay: 0.14s; }
      .site-header.is-open .site-header__nav-list li:nth-child(3) { animation-delay: 0.20s; }
      .site-header.is-open .site-header__nav-list li:nth-child(4) { animation-delay: 0.26s; }
      .site-header.is-open .site-header__cta { animation-delay: 0.32s; }
      .site-header.is-open .site-header__burger {
        position: fixed;
        top: 1.25rem;
        right: 1.4rem;
        transform: scale(1.3);
        transform-origin: top right;
      }
    }
    @media (max-width: 560px) {
      .site-header__logo img { width: 60px; }
      .site-header__logo { bottom: -18px; left: 1.25rem; }
      .site-header__inner { padding-left: calc(1.25rem + 60px + 0.85rem); }
    }

    /* =========================================================
       PART 2 — Hero（100vh：コラージュ背景 + イベントカード + 破れ目）
       ========================================================= */
    .hero {
      position: relative;
      height: 100vh;
      min-height: 560px;
      overflow: visible;
      background: #e9e1d0;
    }
    /* コラージュは clip したいので bg だけ overflow hidden */
    .hero__clip {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 1;
    }

    /* 背景コラージュ */
    .hero__bg {
      position: absolute;
      inset: 0;
      z-index: 1;
    }
    .hero__bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 18%;
      display: block;
    }

    /* 右側イベントカード（下げて縦に伸ばす） */
    .hero__card {
      position: absolute;
      z-index: 2;
      top: 40%;
      right: 0;
      bottom: 0;
      width: min(440px, 46vw);
      background-color: #F6EEE2;
      /* 方眼ノート風の罫線（クリーム地の上に薄いグリッド） */
      background-image:
        linear-gradient(rgba(150, 120, 90, 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150, 120, 90, 0.13) 1px, transparent 1px);
      background-size: 22px 22px;
      background-position: -1px -1px;
      padding: 3rem 2.6rem 6rem;   /* 下に伸ばす（下端が紙の手前まで） */
      box-shadow: -6px 8px 30px rgba(0,0,0,0.07);
    }
    .hero__card-sub {
      margin: 0 0 0.15rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.1rem;
      color: #c0473a;
      letter-spacing: 0.04em;
    }
    .hero__card-title {
      margin: 0 0 0.7rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2.4rem;
      font-weight: 700;
      line-height: 1.1;
      color: #1a1a1a;
      letter-spacing: 0.01em;
    }
    .hero__card-date {
      margin: 0 0 1.3rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2rem;
      font-weight: 700;
      color: #1a1a1a;
      letter-spacing: 0.02em;
    }
    .hero__card-date .day {
      font-size: 1rem;
      font-weight: 700;
      vertical-align: baseline;
    }
    .hero__card-desc {
      margin: 0 0 1.6rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.8rem;
      line-height: 1.85;
      color: #3a3a3a;
      letter-spacing: 0.02em;
    }
    .hero__card-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      padding: 0.8rem 1.4rem;
      background: #111;
      color: #fff;
      text-decoration: none;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      border-radius: 3px;
      transition: background 0.2s ease;
    }
    .hero__card-cta:hover { background: #c0473a; }
    .hero__card-cta .arrow {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.7);
      font-size: 0.7rem;
    }

    /* 装飾テープ（破れ目に重なる位置に貼る） */
    .hero__tape {
      position: absolute;
      z-index: 20;
      bottom: 3%; left: -30px;
      width: 130px;
      transform: rotate(-9deg);
      opacity: 0.9;
      pointer-events: none;
    }
    .hero__tape img { width: 100%; height: auto; display: block; }
    /* PCではテープを大きく */
    @media (min-width: 769px) {
      .hero__tape { width: 180px; left: -40px; }
    }

    /* =========================================================
       PART 3 — About（MCD MIXとは？）破れた上端で Hero と繋ぐ
       ========================================================= */
    .about {
      position: relative;
      z-index: 6;
      /* 白背景はここに置かない（破れ紙の透明部分からコラージュを見せるため） */
      margin-top: -16vw;          /* 破れ紙をコラージュに重ねる（カードのボタンに被らない量） */
    }
    /* 破れエッジ画像（torn-solid.png：上=透明→裂け目→白い本体で終わる） */
    .about__torn {
      position: relative;
      z-index: 1;
      line-height: 0;
      margin-bottom: -1px;
    }
    .about__torn img {
      width: 112%;
      margin-left: -4%;
      height: auto;
      display: block;
    }
    /* 白い本体（torn-thin の白い下端に密着、白はCSSで伸ばす） */
    .about__inner {
      position: relative;
      /* z-index を指定しない＝スタッキングコンテキストを作らない（中の文字を外に出せる） */
      background: #ffffff;
      margin-top: -1px;
      padding: 0.5rem 2rem 6rem;
    }
    .about__container {
      position: relative;
      z-index: 5;            /* 文字をトレーシングペーパー(4)より手前へ。innerが文脈を作らないので有効 */
      max-width: 1000px;
      margin: 0 auto;
    }
    .about__title {
      position: relative;
      z-index: 6;            /* transformでスタッキングコンテキスト化するため明示的に手前へ */
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2rem;
      font-weight: 700;
      color: #1a1a1a;
      letter-spacing: 0.02em;
      margin: 0 0 1.8rem;
      /* 本文と同じ左位置から始め、左基点でほんの少し傾ける */
      text-align: left;
      transform: rotate(0.5deg);
      transform-origin: left bottom;
    }
    .about__title-suffix {
      font-size: 0.72em;   /* 「とは？」だけ少し小さく */
    }
    .about__body p {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.92rem;
      line-height: 2.1;
      color: #2a2a2a;
      letter-spacing: 0.02em;
      margin: 0 0 1.4rem;
    }
    .about__more {
      display: inline-flex;
      align-items: center;
      gap: 0.7rem;
      margin-top: 1.5rem;
      padding: 0.85rem 2rem;
      border: 1px solid #1a1a1a;
      border-radius: 999px;
      background: #ffffff;
      color: #1a1a1a;
      text-decoration: none;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.85rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      transition: background 0.2s ease, color 0.2s ease;
    }
    /* ボタンを右寄せにする（親をflex化） */
    .about__more-wrap {
      display: flex;
      justify-content: flex-end;
    }
    .about__more:hover { background: #1a1a1a; color: #fff; }
    .about__more .arrow { font-size: 0.9rem; }

    /* プチプチ素材：MCD MIXとは？ の右下に装飾（右端に詰める） */
    .about__bubble {
      position: absolute;
      z-index: 2;            /* 下端の破れ紙(z-index 1)より手前に */
      right: 0;
      bottom: -42%;
      width: 220px;
      height: auto;
      opacity: 0.7;
      pointer-events: none;
      mix-blend-mode: multiply;
      filter: drop-shadow(4px 6px 8px rgba(0,0,0,0.28));
    }

    /* トレーシングペーパー（Hero〜About の境目に半透明で重ねる） */
    .about__tracing {
      position: absolute;
      z-index: 4;
      top: 5vw;
      left: -3%;
      width: 70%;
      height: auto;
      transform: rotate(-3deg);
      pointer-events: none;
      mix-blend-mode: normal;
      opacity: 0.85;   /* 少しだけ薄く */
      filter: drop-shadow(3px 5px 7px rgba(0,0,0,0.18));   /* 軽いドロップシャドウ */
    }

    /* About 下端の破れ目（白い本体 → 破れ → 下の Event クリーム地） */
    .about__torn-bottom {
      position: relative;
      z-index: 1;
      line-height: 0;
      margin-top: -1px;
      transform: scaleY(-1);   /* 上下反転で「白が上・破れが下」に */
    }
    .about__torn-bottom img {
      width: 112%;
      margin-left: -4%;
      height: auto;
      display: block;
    }

    /* =========================================================
       PART 4 — Event スライダー（カンプ準拠：帯タイトル＋画像オーバーレイ）
       ========================================================= */
    .event {
      position: relative;
      z-index: 5;
      background: transparent;   /* body の連続グリッドを透かす */
      margin-top: -1px;
      padding: 1rem 0 5rem;
    }
    .event__inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2rem;
    }
    .event__head { margin-bottom: 2rem; }
    .event__title {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2.2rem;
      font-weight: 700;
      color: #1a1a1a;
      margin: 0;
      letter-spacing: 0.04em;
    }
    .event__slider {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .event__viewport {
      overflow: hidden;
      flex: 1;
    }
    .event__track {
      display: flex;
      gap: 2.2rem;
      transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    }
    .event__card {
      flex: 0 0 auto;
      min-width: 0;
    }
    /* .reveal の transition に上書きされないよう特異度を上げ、width(拡大) も含める */
    article.event__card {
      transition: width 0.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.7s ease, transform 0.7s ease;
    }
    /* タイトル帯（画像の上に配置・被らない。グリッド無しのベタ地） */
    .event__card-title {
      margin: 0 2.4rem 0 0;   /* 右端を画像より内側にして少しズレを作る */
      background: #F6EEE2;
      border: 1.5px solid #3a2a1a;
      padding: 0.6rem 0.9rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: #1a1a1a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* 画像（グレーのプレースホルダー） */
    .event__figure {
      position: relative;
      aspect-ratio: 16 / 11;
      background: #c9c9c9;
      margin-top: -1.5px;   /* タイトル帯の下線と画像の上線を重ねて二重線を防ぐ */
      display: flex;
      align-items: center;
      justify-content: center;
      color: #6f6f6f;
      font-size: 0.95rem;
      letter-spacing: 0.06em;
      border: 1.5px solid #3a2a1a;
      overflow: hidden;   /* ホバー時のズームを枠内にクリップ */
    }
    .event__figure img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.45s ease;
    }
    /* サムネイル全体ホバーで画像を少しアップ */
    .event__figure:hover img { transform: scale(1.06); }
    /* 年・地名（画像の左下に重なる） */
    .event__card-meta {
      position: absolute;
      left: 0.7rem;
      bottom: 0.6rem;
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.95rem;
      color: #1a1a1a;
      letter-spacing: 0.02em;
    }
    /* リンク／ホバー領域をサムネイル全体に拡張（透明オーバーレイ） */
    .event__card-link {
      position: absolute;
      inset: 0;
      z-index: 2;
      font-size: 0;          /* テキスト「↗」を隠す（矢印は ::after で描画） */
      text-decoration: none;
    }
    /* 右下の黒い矢印ボタン（見た目は従来どおり） */
    .event__card-link::after {
      content: "↗";
      position: absolute;
      right: 0; bottom: 0;
      width: 54px; height: 54px;
      background: #111;
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
      transition: background 0.2s ease;
    }
    .event__card-link:hover::after { background: #c0473a; }
    /* 左右の三角矢印（スライダー外側・CSSで描く塗り三角） */
    .event__arrow {
      flex: 0 0 auto;
      width: 40px; height: 40px;
      border: none;
      background: transparent;
      padding: 0;
      display: flex; align-items: center; justify-content: center;
      transition: opacity 0.2s ease, transform 0.2s ease;
      font-size: 0;   /* グリフ文字を消してCSS三角に統一 */
    }
    .event__arrow::before {
      content: "";
      display: block;
      width: 0; height: 0;
      border-top: 11px solid transparent;
      border-bottom: 11px solid transparent;
    }
    .event__arrow--prev::before { border-right: 16px solid #1a1a1a; }
    .event__arrow--next::before { border-left: 16px solid #1a1a1a; }
    .event__arrow:hover { transform: scale(1.15); }
    .event__arrow:disabled { opacity: 0.25; cursor: default; }
    .event__arrow:disabled:hover { transform: none; }

    /* PC：左に来たカード（アクティブ）を大きく、他を小さく */
    @media (min-width: 769px) {
      .event__card { width: 38%; }
      .event__card.is-active { width: 58%; }
    }

    @media (max-width: 768px) {
      .event__card { width: 100%; }  /* SPは1枚見せ */
      .about__bubble { width: 170px; right: 0; bottom: 2%; }
    }

    @media (max-width: 768px) {
      .about { margin-top: -14vw; }
      .about__inner { padding: 0.5rem 1.4rem 4rem; }
      .about__title { font-size: 1.6rem; }
      .about__body p { font-size: 0.88rem; line-height: 2; }
    }

    @media (max-width: 768px) {
      .hero__card {
        /* 位置は維持（中央移動しない）。右寄せのまま幅だけ調整 */
        right: 0;
        width: min(440px, 70vw);
        padding: 2rem 1.8rem 3rem;
      }
      .hero__card-title { font-size: 1.7rem; }
      .hero__card-date { font-size: 1.5rem; }
    }

    /* =========================================================
       PART 5 — News（ルーズリーフ紙＋ピンクの紙）
       ========================================================= */
    .news {
      position: relative;
      z-index: 5;
      background: transparent;     /* body の連続グリッドを透かす */
      padding: 3rem 0 6rem;
      overflow: clip;              /* 全幅・斜めのピンク紙が下のFooterへ突き抜けないよう抑止 */
    }
    .news__inner {
      position: relative;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 2rem;
    }
    /* ピンクの紙（全幅セクション基準で右端に配置・ルーズリーフ前面に少し被せる） */
    .news__pink {
      position: absolute;
      right: -4rem;
      bottom: 0;
      top: auto;
      height: 150%;
      width: auto;
      transform: rotate(6deg);
      transform-origin: bottom right;
      z-index: 3;
      pointer-events: none;
    }
    /* ルーズリーフ紙のパネル（横いっぱい＝フルブリード＋少し傾ける） */
    .news__paper {
      position: relative;
      z-index: 2;
      width: 106vw;
      margin-left: calc(50% - 53vw);
      transform: rotate(-2deg);
    }
    .news__paper-bg {
      width: 100%;
      height: auto;
      display: block;
    }
    /* 紙の上に乗せる中身（紙の縦いっぱいに広げる） */
    .news__content {
      position: absolute;
      inset: 0;
      padding: 9% 9% 30% 17%;
      display: flex;
      flex-direction: column;
    }
    .news__title {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2.2rem;
      font-weight: 700;
      color: #1a1a1a;
      margin: 0 0 0.5rem;
      letter-spacing: 0.04em;
    }
    /* リストを縦に均等配分して紙全体を使う */
    .news__list {
      list-style: none;
      margin: 0;
      padding: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
    .news__item {
    }
    /* 各項目をリンクにできるように（年＋本文をアンカーで包む） */
    .news__item-link {
      display: flex;
      align-items: baseline;
      gap: 1.6rem;
      padding: 0.7rem 0;
      text-decoration: none;
      color: inherit;
      transition: opacity 0.2s ease;
    }
    .news__item-link:hover { opacity: 0.55; }
    .news__year {
      flex: 0 0 auto;
      width: 8em;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.95rem;
      color: #1a1a1a;
      letter-spacing: 0.02em;
    }
    .news__text {
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.85rem;
      color: #2a2a2a;
      line-height: 1.7;
    }
    .news__more-wrap {
      display: flex;
      justify-content: center;
      margin-top: 0.5rem;
    }
    .news__more {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      padding: 0.7rem 2rem;
      border: 1px solid #1a1a1a;
      border-radius: 999px;
      background: rgba(255,255,255,0.6);
      color: #1a1a1a;
      text-decoration: none;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.85rem;
      letter-spacing: 0.04em;
      transition: background 0.2s ease, color 0.2s ease;
    }
    .news__more:hover { background: #1a1a1a; color: #fff; }
    .news__more-arrow {
      font-size: 1.1rem;
      line-height: 1;
    }

    /* 文字が小さくなりすぎる狭い画面では、紙を背景にせず通常レイアウトに切替 */
    @media (max-width: 700px) {
      .news__paper-bg { min-height: 660px; object-fit: cover; }
      .news__content { padding: 14% 8% 36% 13%; }
      .news__title { font-size: 1.7rem; margin-bottom: 1rem; }
      /* 縦に間延びさせず上に寄せる */
      .news__list { flex: 0 0 auto; justify-content: flex-start; gap: 1.3rem; }
      /* 日付の下に本文を改行（縦積み） */
      .news__item-link { flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.5rem 0; }
      .news__year { width: auto; }
      .news__more-wrap { margin-top: 1.4rem; }
      .news__pink { height: 130%; right: -2rem; bottom: 0; top: auto; }
    }

    /* =========================================================
       PART 6 — Footer（ルーズリーフ台紙＋テープ＋nav＋Contact/Instagram）
       ========================================================= */
    .site-footer {
      position: relative;
      z-index: 5;
      background: transparent;     /* body の連続グリッドを透かす */
      padding: 3rem 0 4rem;
    }
    /* 全体は左寄せ／2カラム（左：台紙カード ／ 右：Contact・Instagram・ロゴ） */
    .site-footer__inner {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 5%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 5%;
    }
    /* ── 左：シンプル白紙を台紙にしたカード ── */
    .site-footer__card {
      position: relative;
      flex: 0 1 620px;
      max-width: 620px;
      min-width: 0;
    }
    .site-footer__paper {
      width: 100%;
      height: auto;
      display: block;
    }
    /* 台紙の左上に斜めに貼った半透明テープ */
    .site-footer__tape {
      position: absolute;
      z-index: 3;
      top: -58px;
      left: 50%;
      width: 104px;
      transform: translateX(-50%) rotate(-32deg);
      opacity: 0.7;
      pointer-events: none;
    }
    .site-footer__tape img { width: 100%; height: auto; display: block; }
    /* 台紙の上に乗る中身：左に縦長イラスト＋右にナビ */
    .site-footer__content {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 5%;
      padding: 7% 9%;
    }
    /* 縦長の鉛筆線画（横幅は控えめ・縦に余裕） */
    .site-footer__illust {
      flex: 0 0 auto;
      width: 22%;
      max-width: 130px;
      height: auto;
      display: block;
      align-self: center;
    }
    .site-footer__nav-list {
      list-style: none;
      margin: 0; padding: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1.6rem;
    }
    .site-footer__nav-list a {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.1rem;
      color: #1a1a1a;
      text-decoration: none;
      letter-spacing: 0.06em;
      position: relative;
    }
    .site-footer__nav-list a::after {
      content: "";
      position: absolute;
      left: 0; bottom: -3px;
      width: 100%; height: 1px;
      background: #1a1a1a;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.28s ease;
    }
    .site-footer__nav-list a:hover::after { transform: scaleX(1); }
    /* コピーライト（台紙の下端・小さめ1行） */
    .site-footer__copy {
      position: absolute;
      z-index: 2;
      left: 31%;
      right: 9%;
      bottom: 11%;
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.66rem;
      letter-spacing: 0.04em;
      color: #5a4a36;
      white-space: nowrap;
    }
    /* ── 右：Contact / Instagram（破線で上下を囲む）＋ ロゴ ── */
    .site-footer__right {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2.4rem;
    }
    .site-footer__links {
      display: flex;
      flex-direction: column;
      width: 230px;
      border-top: 2px dashed #1a1a1a;
    }
    .site-footer__link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.8rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.55rem;
      font-weight: 700;
      color: #1a1a1a;
      text-decoration: none;
      letter-spacing: 0.03em;
      padding: 0.5rem 0;
      border-bottom: 2px dashed #1a1a1a;
      transition: opacity 0.2s ease;
    }
    .site-footer__link:hover { opacity: 0.6; }
    .site-footer__link .ext { font-size: 0.7em; }
    /* リンク頭のアイコン（メール / Instagram） */
    .site-footer__link-label {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
    }
    .site-footer__icon {
      width: 1.1em;
      height: 1.1em;
      object-fit: contain;
      object-position: center;
      display: block;
      flex-shrink: 0;
    }
    /* MCD MIX 赤スタンプロゴ */
    .site-footer__logo img {
      width: 96px; height: auto; display: block;
    }

    @media (max-width: 760px) {
      /* カードの装飾（紙・テープ・イラスト・footer nav）は隠し、著作権表記だけ残す */
      .site-footer__paper, .site-footer__tape, .site-footer__content { display: none; }
      .site-footer__card { flex: none; background: none; min-height: 0; }
      .site-footer__copy {
        position: static;
        left: auto; right: auto; bottom: auto;
        margin: 0;
        text-align: center;
        white-space: normal;
        font-size: 0.62rem;
        line-height: 1.6;
      }
      .site-footer__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 1.8rem;
      }
      /* 左ロゴ・右リンクの一行 */
      .site-footer__right {
        order: -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 1.2rem;
      }
      .site-footer__logo { order: -1; }
      .site-footer__logo img { width: 84px; }
      .site-footer__links { width: auto; min-width: 178px; flex: 0 1 auto; }
      .site-footer__link { font-size: 1.2rem; }
    }

    /* =========================================================
       スクロール時のふわっと表示（PC のみ。SPは即表示）
       ========================================================= */
    @media (min-width: 769px) {
      .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s ease, transform 0.7s ease;
        will-change: opacity, transform;
      }
      .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
      }
    }
    /* =========================================================
       Event 一覧ページ（共通nav/footer・グリッド背景・カードはスライダー流用）
       ========================================================= */
    .page-head {
      max-width: 1100px;
      margin: 0 auto;
      padding: 3.5rem 2rem 1.5rem;
    }
    .page-title {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2.6rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      margin: 0 0 0.5rem;
      color: #1a1a1a;
    }
    .page-title .dot { color: #1a1a1a; }
    .page-sub {
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.9rem;
      color: #5a4a36;
      letter-spacing: 0.04em;
      line-height: 1.8;
    }
    .event-list-section {
      position: relative;
      z-index: 5;
      padding: 1.5rem 0 6rem;
    }
    .event-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3rem 2.2rem;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2rem;
    }
    /* スライダーの幅指定(38%/58%)を打ち消し、グリッドのセル幅いっぱいに */
    .event-list .event__card { width: 100%; }
    @media (max-width: 900px) {
      .event-list { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1.8rem; }
      .page-head { padding: 3rem 1.5rem 1.2rem; }
    }
    @media (max-width: 560px) {
      .event-list { grid-template-columns: 1fr; gap: 2.2rem; }
      .page-title { font-size: 2.1rem; }
    }

    .breadcrumb {
      max-width: 1100px; margin: 0 auto; padding: 0.7rem 2rem 0.2rem;
      display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem;
      font-size: 0.78rem; color: #6a5a45; letter-spacing: 0.04em;
    }
    .breadcrumb a { color: inherit; text-decoration: none; }
    .breadcrumb a:hover { opacity: 0.6; }
    .breadcrumb__sep { color: #b0a48d; flex: 0 0 auto; }
  
/* ===================== from mcd-mix-news.html ===================== */

    /* =========================================================
       BASE（仮）— 後で base.css として切り出します
       ========================================================= */
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    html { overflow-x: clip; }   /* 破れ紙108%幅やテープ左見切れによる横スクロールを抑止（clipでstickyを壊さない） */
    /* リンクにもデフォルト（黒塗り）のカスタムカーソル */
    a {
      cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2222%22%20height%3D%2226%22%20viewBox%3D%220%200%2089.85%20104.5%22%3E%3Cpolygon%20points%3D%221.58%202.24%2026.18%20102.34%2051.15%2072.47%2087.65%2058.95%201.58%202.24%22%20fill%3D%22%23211815%22%20stroke%3D%22%23fff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22/%3E%3C/svg%3E") 2 2, pointer;
    }
    /* ボタンの上では黒白反転カーソル（白塗り＋黒縁） */
    .site-header__cta, .hero__card-cta, .about__more, .news__more,
    .event__card-link, .event__arrow, button, [role="button"] {
      cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2222%22%20height%3D%2226%22%20viewBox%3D%220%200%2089.85%20104.5%22%3E%3Cpolygon%20points%3D%221.58%202.24%2026.18%20102.34%2051.15%2072.47%2087.65%2058.95%201.58%202.24%22%20fill%3D%22%23fff%22%20stroke%3D%22%23211815%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22/%3E%3C/svg%3E") 2 2, pointer;
    }
    body {
      background-color: #F6EEE2;
      /* ページ共通の方眼グリッド（白い紙の下〜スライダーまで連続して見える） */
      background-image:
        linear-gradient(rgba(150, 120, 90, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150, 120, 90, 0.10) 1px, transparent 1px);
      background-size: 26px 26px;
      min-height: 100vh;
      overflow-x: clip;
      font-family: "Noto Sans JP", sans-serif;
      color: #1a1a1a;
      /* カスタムマウスカーソル（SVG・先端を基点に） */
      cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2222%22%20height%3D%2226%22%20viewBox%3D%220%200%2089.85%20104.5%22%3E%3Cpolygon%20points%3D%221.58%202.24%2026.18%20102.34%2051.15%2072.47%2087.65%2058.95%201.58%202.24%22%20fill%3D%22%23211815%22%20stroke%3D%22%23fff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22/%3E%3C/svg%3E") 2 2, auto;
    }

    /* =========================================================
       PART 1 — Header / Top Navigation
       ========================================================= */
    .site-header {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      width: 100%;
      background: #fffdf2;
      overflow: visible;
    }
    .site-header__inner {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      width: 100%;
      padding: 0.6rem 2rem;
    }
    .site-header__logo {
      position: absolute;
      left: 2rem;
      /* ヘッダー下端を基準に、ロゴ高さの30%だけ下へはみ出させる（高さ92px → 約28px下に出る） */
      bottom: -28px;
      display: block;
      flex-shrink: 0;
      line-height: 0;
      z-index: 110;
    }
    .site-header__logo img { display: block; width: 92px; height: auto; object-fit: contain; }
    /* ロゴが absolute になった分、nav 側がロゴ幅に被らないよう左に余白を確保 */
    .site-header__inner { padding-left: calc(2rem + 80px + 1.5rem); }
    .site-header__nav { flex: 1 1 auto; display: flex; justify-content: center; }
    .site-header__nav-list {
      display: flex; align-items: center; gap: 2.5rem;
      margin: 0; padding: 0; list-style: none;
    }
    .site-header__nav-list a {
      position: relative;
      display: inline-block; text-decoration: none; color: #1a1a1a;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.05rem; font-weight: 500; letter-spacing: 0.04em;
      padding-bottom: 4px;
    }
    .site-header__nav-list a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1.5px;
      background: #1a1a1a;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.28s ease;
    }
    .site-header__nav-list a:hover::after { transform: scaleX(1); }
    .site-header__cta {
      flex-shrink: 0; display: inline-block; padding: 0.85rem 1.5rem;
      background: #111; color: #fff; text-decoration: none;
      font-family: "Noto Sans JP", sans-serif; font-size: 0.85rem;
      font-weight: 700; letter-spacing: 0.04em; white-space: nowrap;
      border-radius: 3px; transition: background 0.2s ease;
    }
    .site-header__cta:hover { background: #c0473a; }
    /* ハンバーガーボタン（PCでは非表示） */
    .site-header__burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 40px;
      height: 40px;
      padding: 9px;
      margin-left: auto;
      background: transparent;
      border: none;
      cursor: pointer;
      z-index: 120;
    }
    .site-header__burger span {
      display: block;
      width: 100%;
      height: 2px;
      background: #1a1a1a;
      border-radius: 2px;
      transition: transform 0.25s ease, opacity 0.2s ease;
    }
    .site-header.is-open .site-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .site-header.is-open .site-header__burger span:nth-child(2) { opacity: 0; }
    .site-header.is-open .site-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    /* SPメニューのフェードイン */
    @keyframes spMenuFade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes spItemRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @media (max-width: 860px) {
      .site-header__inner { padding: 0.6rem 1.25rem; padding-left: calc(1.25rem + 78px + 1rem); }
      .site-header__burger { display: inline-flex; }
      /* 閉じている時は nav と CTA を隠す */
      .site-header__nav, .site-header__cta { display: none; }
      /* 開いた時：全画面オーバーレイ（ロゴ左・nav左寄せ・CTA下・×右上） */
      .site-header.is-open {
        position: fixed;
        inset: 0;
        height: 100vh;
        height: 100dvh;
        background: #F6EEE2;
        z-index: 300;
        overflow-y: auto;
        animation: spMenuFade 0.3s ease both;
      }
      .site-header.is-open .site-header__inner {
        display: grid;
        grid-template-columns: auto auto;
        grid-auto-rows: min-content;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 1.8rem 3rem;
        width: 100%;
        height: 100%;
        padding: 2rem 1.5rem;
      }
      .site-header.is-open .site-header__logo {
        position: static;
        grid-column: 1;
        grid-row: 1 / 3;
        justify-self: center;
      }
      .site-header.is-open .site-header__logo img { width: 118px; }
      .site-header.is-open .site-header__nav { display: flex; grid-column: 2; grid-row: 1; }
      .site-header.is-open .site-header__nav-list { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
      .site-header.is-open .site-header__nav-list a { font-size: 1.55rem; }
      .site-header.is-open .site-header__cta { display: inline-flex; grid-column: 2; grid-row: 2; justify-self: start; }
      /* 項目をふわっと順番に表示 */
      .site-header.is-open .site-header__nav-list li,
      .site-header.is-open .site-header__cta { animation: spItemRise 0.4s ease both; }
      .site-header.is-open .site-header__nav-list li:nth-child(1) { animation-delay: 0.08s; }
      .site-header.is-open .site-header__nav-list li:nth-child(2) { animation-delay: 0.14s; }
      .site-header.is-open .site-header__nav-list li:nth-child(3) { animation-delay: 0.20s; }
      .site-header.is-open .site-header__nav-list li:nth-child(4) { animation-delay: 0.26s; }
      .site-header.is-open .site-header__cta { animation-delay: 0.32s; }
      .site-header.is-open .site-header__burger {
        position: fixed;
        top: 1.25rem;
        right: 1.4rem;
        transform: scale(1.3);
        transform-origin: top right;
      }
    }
    @media (max-width: 560px) {
      .site-header__logo img { width: 60px; }
      .site-header__logo { bottom: -18px; left: 1.25rem; }
      .site-header__inner { padding-left: calc(1.25rem + 60px + 0.85rem); }
    }

    /* =========================================================
       PART 2 — Hero（100vh：コラージュ背景 + イベントカード + 破れ目）
       ========================================================= */
    .hero {
      position: relative;
      height: 100vh;
      min-height: 560px;
      overflow: visible;
      background: #e9e1d0;
    }
    /* コラージュは clip したいので bg だけ overflow hidden */
    .hero__clip {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 1;
    }

    /* 背景コラージュ */
    .hero__bg {
      position: absolute;
      inset: 0;
      z-index: 1;
    }
    .hero__bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 18%;
      display: block;
    }

    /* 右側イベントカード（下げて縦に伸ばす） */
    .hero__card {
      position: absolute;
      z-index: 2;
      top: 40%;
      right: 0;
      bottom: 0;
      width: min(440px, 46vw);
      background-color: #F6EEE2;
      /* 方眼ノート風の罫線（クリーム地の上に薄いグリッド） */
      background-image:
        linear-gradient(rgba(150, 120, 90, 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150, 120, 90, 0.13) 1px, transparent 1px);
      background-size: 22px 22px;
      background-position: -1px -1px;
      padding: 3rem 2.6rem 6rem;   /* 下に伸ばす（下端が紙の手前まで） */
      box-shadow: -6px 8px 30px rgba(0,0,0,0.07);
    }
    .hero__card-sub {
      margin: 0 0 0.15rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.1rem;
      color: #c0473a;
      letter-spacing: 0.04em;
    }
    .hero__card-title {
      margin: 0 0 0.7rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2.4rem;
      font-weight: 700;
      line-height: 1.1;
      color: #1a1a1a;
      letter-spacing: 0.01em;
    }
    .hero__card-date {
      margin: 0 0 1.3rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2rem;
      font-weight: 700;
      color: #1a1a1a;
      letter-spacing: 0.02em;
    }
    .hero__card-date .day {
      font-size: 1rem;
      font-weight: 700;
      vertical-align: baseline;
    }
    .hero__card-desc {
      margin: 0 0 1.6rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.8rem;
      line-height: 1.85;
      color: #3a3a3a;
      letter-spacing: 0.02em;
    }
    .hero__card-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      padding: 0.8rem 1.4rem;
      background: #111;
      color: #fff;
      text-decoration: none;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      border-radius: 3px;
      transition: background 0.2s ease;
    }
    .hero__card-cta:hover { background: #c0473a; }
    .hero__card-cta .arrow {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.7);
      font-size: 0.7rem;
    }

    /* 装飾テープ（破れ目に重なる位置に貼る） */
    .hero__tape {
      position: absolute;
      z-index: 20;
      bottom: 3%; left: -30px;
      width: 130px;
      transform: rotate(-9deg);
      opacity: 0.9;
      pointer-events: none;
    }
    .hero__tape img { width: 100%; height: auto; display: block; }
    /* PCではテープを大きく */
    @media (min-width: 769px) {
      .hero__tape { width: 180px; left: -40px; }
    }

    /* =========================================================
       PART 3 — About（MCD MIXとは？）破れた上端で Hero と繋ぐ
       ========================================================= */
    .about {
      position: relative;
      z-index: 6;
      /* 白背景はここに置かない（破れ紙の透明部分からコラージュを見せるため） */
      margin-top: -16vw;          /* 破れ紙をコラージュに重ねる（カードのボタンに被らない量） */
    }
    /* 破れエッジ画像（torn-solid.png：上=透明→裂け目→白い本体で終わる） */
    .about__torn {
      position: relative;
      z-index: 1;
      line-height: 0;
      margin-bottom: -1px;
    }
    .about__torn img {
      width: 112%;
      margin-left: -4%;
      height: auto;
      display: block;
    }
    /* 白い本体（torn-thin の白い下端に密着、白はCSSで伸ばす） */
    .about__inner {
      position: relative;
      /* z-index を指定しない＝スタッキングコンテキストを作らない（中の文字を外に出せる） */
      background: #ffffff;
      margin-top: -1px;
      padding: 0.5rem 2rem 6rem;
    }
    .about__container {
      position: relative;
      z-index: 5;            /* 文字をトレーシングペーパー(4)より手前へ。innerが文脈を作らないので有効 */
      max-width: 1000px;
      margin: 0 auto;
    }
    .about__title {
      position: relative;
      z-index: 6;            /* transformでスタッキングコンテキスト化するため明示的に手前へ */
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2rem;
      font-weight: 700;
      color: #1a1a1a;
      letter-spacing: 0.02em;
      margin: 0 0 1.8rem;
      /* 本文と同じ左位置から始め、左基点でほんの少し傾ける */
      text-align: left;
      transform: rotate(0.5deg);
      transform-origin: left bottom;
    }
    .about__title-suffix {
      font-size: 0.72em;   /* 「とは？」だけ少し小さく */
    }
    .about__body p {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.92rem;
      line-height: 2.1;
      color: #2a2a2a;
      letter-spacing: 0.02em;
      margin: 0 0 1.4rem;
    }
    .about__more {
      display: inline-flex;
      align-items: center;
      gap: 0.7rem;
      margin-top: 1.5rem;
      padding: 0.85rem 2rem;
      border: 1px solid #1a1a1a;
      border-radius: 999px;
      background: #ffffff;
      color: #1a1a1a;
      text-decoration: none;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.85rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      transition: background 0.2s ease, color 0.2s ease;
    }
    /* ボタンを右寄せにする（親をflex化） */
    .about__more-wrap {
      display: flex;
      justify-content: flex-end;
    }
    .about__more:hover { background: #1a1a1a; color: #fff; }
    .about__more .arrow { font-size: 0.9rem; }

    /* プチプチ素材：MCD MIXとは？ の右下に装飾（右端に詰める） */
    .about__bubble {
      position: absolute;
      z-index: 2;            /* 下端の破れ紙(z-index 1)より手前に */
      right: 0;
      bottom: -42%;
      width: 220px;
      height: auto;
      opacity: 0.7;
      pointer-events: none;
      mix-blend-mode: multiply;
      filter: drop-shadow(4px 6px 8px rgba(0,0,0,0.28));
    }

    /* トレーシングペーパー（Hero〜About の境目に半透明で重ねる） */
    .about__tracing {
      position: absolute;
      z-index: 4;
      top: 5vw;
      left: -3%;
      width: 70%;
      height: auto;
      transform: rotate(-3deg);
      pointer-events: none;
      mix-blend-mode: normal;
      opacity: 0.85;   /* 少しだけ薄く */
      filter: drop-shadow(3px 5px 7px rgba(0,0,0,0.18));   /* 軽いドロップシャドウ */
    }

    /* About 下端の破れ目（白い本体 → 破れ → 下の Event クリーム地） */
    .about__torn-bottom {
      position: relative;
      z-index: 1;
      line-height: 0;
      margin-top: -1px;
      transform: scaleY(-1);   /* 上下反転で「白が上・破れが下」に */
    }
    .about__torn-bottom img {
      width: 112%;
      margin-left: -4%;
      height: auto;
      display: block;
    }

    /* =========================================================
       PART 4 — Event スライダー（カンプ準拠：帯タイトル＋画像オーバーレイ）
       ========================================================= */
    .event {
      position: relative;
      z-index: 5;
      background: transparent;   /* body の連続グリッドを透かす */
      margin-top: -1px;
      padding: 1rem 0 5rem;
    }
    .event__inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2rem;
    }
    .event__head { margin-bottom: 2rem; }
    .event__title {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2.2rem;
      font-weight: 700;
      color: #1a1a1a;
      margin: 0;
      letter-spacing: 0.04em;
    }
    .event__slider {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .event__viewport {
      overflow: hidden;
      flex: 1;
    }
    .event__track {
      display: flex;
      gap: 2.2rem;
      transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    }
    .event__card {
      flex: 0 0 auto;
      min-width: 0;
    }
    /* .reveal の transition に上書きされないよう特異度を上げ、width(拡大) も含める */
    article.event__card {
      transition: width 0.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.7s ease, transform 0.7s ease;
    }
    /* タイトル帯（画像の上に配置・被らない。グリッド無しのベタ地） */
    .event__card-title {
      margin: 0 2.4rem 0 0;   /* 右端を画像より内側にして少しズレを作る */
      background: #F6EEE2;
      border: 1.5px solid #3a2a1a;
      padding: 0.6rem 0.9rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: #1a1a1a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* 画像（グレーのプレースホルダー） */
    .event__figure {
      position: relative;
      aspect-ratio: 16 / 11;
      background: #c9c9c9;
      margin-top: -1.5px;   /* タイトル帯の下線と画像の上線を重ねて二重線を防ぐ */
      display: flex;
      align-items: center;
      justify-content: center;
      color: #6f6f6f;
      font-size: 0.95rem;
      letter-spacing: 0.06em;
      border: 1.5px solid #3a2a1a;
      overflow: hidden;   /* ホバー時のズームを枠内にクリップ */
    }
    .event__figure img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.45s ease;
    }
    /* サムネイル全体ホバーで画像を少しアップ */
    .event__figure:hover img { transform: scale(1.06); }
    /* 年・地名（画像の左下に重なる） */
    .event__card-meta {
      position: absolute;
      left: 0.7rem;
      bottom: 0.6rem;
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.95rem;
      color: #1a1a1a;
      letter-spacing: 0.02em;
    }
    /* リンク／ホバー領域をサムネイル全体に拡張（透明オーバーレイ） */
    .event__card-link {
      position: absolute;
      inset: 0;
      z-index: 2;
      font-size: 0;          /* テキスト「↗」を隠す（矢印は ::after で描画） */
      text-decoration: none;
    }
    /* 右下の黒い矢印ボタン（見た目は従来どおり） */
    .event__card-link::after {
      content: "↗";
      position: absolute;
      right: 0; bottom: 0;
      width: 54px; height: 54px;
      background: #111;
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
      transition: background 0.2s ease;
    }
    .event__card-link:hover::after { background: #c0473a; }
    /* 左右の三角矢印（スライダー外側・CSSで描く塗り三角） */
    .event__arrow {
      flex: 0 0 auto;
      width: 40px; height: 40px;
      border: none;
      background: transparent;
      padding: 0;
      display: flex; align-items: center; justify-content: center;
      transition: opacity 0.2s ease, transform 0.2s ease;
      font-size: 0;   /* グリフ文字を消してCSS三角に統一 */
    }
    .event__arrow::before {
      content: "";
      display: block;
      width: 0; height: 0;
      border-top: 11px solid transparent;
      border-bottom: 11px solid transparent;
    }
    .event__arrow--prev::before { border-right: 16px solid #1a1a1a; }
    .event__arrow--next::before { border-left: 16px solid #1a1a1a; }
    .event__arrow:hover { transform: scale(1.15); }
    .event__arrow:disabled { opacity: 0.25; cursor: default; }
    .event__arrow:disabled:hover { transform: none; }

    /* PC：左に来たカード（アクティブ）を大きく、他を小さく */
    @media (min-width: 769px) {
      .event__card { width: 38%; }
      .event__card.is-active { width: 58%; }
    }

    @media (max-width: 768px) {
      .event__card { width: 100%; }  /* SPは1枚見せ */
      .about__bubble { width: 170px; right: 0; bottom: 2%; }
    }

    @media (max-width: 768px) {
      .about { margin-top: -14vw; }
      .about__inner { padding: 0.5rem 1.4rem 4rem; }
      .about__title { font-size: 1.6rem; }
      .about__body p { font-size: 0.88rem; line-height: 2; }
    }

    @media (max-width: 768px) {
      .hero__card {
        /* 位置は維持（中央移動しない）。右寄せのまま幅だけ調整 */
        right: 0;
        width: min(440px, 70vw);
        padding: 2rem 1.8rem 3rem;
      }
      .hero__card-title { font-size: 1.7rem; }
      .hero__card-date { font-size: 1.5rem; }
    }

    /* =========================================================
       PART 5 — News（ルーズリーフ紙＋ピンクの紙）
       ========================================================= */
    .news {
      position: relative;
      z-index: 5;
      background: transparent;     /* body の連続グリッドを透かす */
      padding: 3rem 0 6rem;
      overflow: clip;              /* 全幅・斜めのピンク紙が下のFooterへ突き抜けないよう抑止 */
    }
    .news__inner {
      position: relative;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 2rem;
    }
    /* ピンクの紙（全幅セクション基準で右端に配置・ルーズリーフ前面に少し被せる） */
    .news__pink {
      position: absolute;
      right: -4rem;
      bottom: 0;
      top: auto;
      height: 150%;
      width: auto;
      transform: rotate(6deg);
      transform-origin: bottom right;
      z-index: 3;
      pointer-events: none;
    }
    /* ルーズリーフ紙のパネル（横いっぱい＝フルブリード＋少し傾ける） */
    .news__paper {
      position: relative;
      z-index: 2;
      width: 106vw;
      margin-left: calc(50% - 53vw);
      transform: rotate(-2deg);
    }
    .news__paper-bg {
      width: 100%;
      height: auto;
      display: block;
    }
    /* 紙の上に乗せる中身（紙の縦いっぱいに広げる） */
    .news__content {
      position: absolute;
      inset: 0;
      padding: 9% 9% 30% 17%;
      display: flex;
      flex-direction: column;
    }
    .news__title {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2.2rem;
      font-weight: 700;
      color: #1a1a1a;
      margin: 0 0 0.5rem;
      letter-spacing: 0.04em;
    }
    /* リストを縦に均等配分して紙全体を使う */
    .news__list {
      list-style: none;
      margin: 0;
      padding: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
    .news__item {
    }
    /* 各項目をリンクにできるように（年＋本文をアンカーで包む） */
    .news__item-link {
      display: flex;
      align-items: baseline;
      gap: 1.6rem;
      padding: 0.7rem 0;
      text-decoration: none;
      color: inherit;
      transition: opacity 0.2s ease;
    }
    .news__item-link:hover { opacity: 0.55; }
    .news__year {
      flex: 0 0 auto;
      width: 8em;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.95rem;
      color: #1a1a1a;
      letter-spacing: 0.02em;
    }
    .news__text {
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.85rem;
      color: #2a2a2a;
      line-height: 1.7;
    }
    .news__more-wrap {
      display: flex;
      justify-content: center;
      margin-top: 0.5rem;
    }
    .news__more {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      padding: 0.7rem 2rem;
      border: 1px solid #1a1a1a;
      border-radius: 999px;
      background: rgba(255,255,255,0.6);
      color: #1a1a1a;
      text-decoration: none;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.85rem;
      letter-spacing: 0.04em;
      transition: background 0.2s ease, color 0.2s ease;
    }
    .news__more:hover { background: #1a1a1a; color: #fff; }
    .news__more-arrow {
      font-size: 1.1rem;
      line-height: 1;
    }

    /* 文字が小さくなりすぎる狭い画面では、紙を背景にせず通常レイアウトに切替 */
    @media (max-width: 700px) {
      .news__paper-bg { min-height: 660px; object-fit: cover; }
      .news__content { padding: 14% 8% 36% 13%; }
      .news__title { font-size: 1.7rem; margin-bottom: 1rem; }
      /* 縦に間延びさせず上に寄せる */
      .news__list { flex: 0 0 auto; justify-content: flex-start; gap: 1.3rem; }
      /* 日付の下に本文を改行（縦積み） */
      .news__item-link { flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.5rem 0; }
      .news__year { width: auto; }
      .news__more-wrap { margin-top: 1.4rem; }
      .news__pink { height: 130%; right: -2rem; bottom: 0; top: auto; }
    }

    /* =========================================================
       PART 6 — Footer（ルーズリーフ台紙＋テープ＋nav＋Contact/Instagram）
       ========================================================= */
    .site-footer {
      position: relative;
      z-index: 5;
      background: transparent;     /* body の連続グリッドを透かす */
      padding: 3rem 0 4rem;
    }
    /* 全体は左寄せ／2カラム（左：台紙カード ／ 右：Contact・Instagram・ロゴ） */
    .site-footer__inner {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 5%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 5%;
    }
    /* ── 左：シンプル白紙を台紙にしたカード ── */
    .site-footer__card {
      position: relative;
      flex: 0 1 620px;
      max-width: 620px;
      min-width: 0;
    }
    .site-footer__paper {
      width: 100%;
      height: auto;
      display: block;
    }
    /* 台紙の左上に斜めに貼った半透明テープ */
    .site-footer__tape {
      position: absolute;
      z-index: 3;
      top: -58px;
      left: 50%;
      width: 104px;
      transform: translateX(-50%) rotate(-32deg);
      opacity: 0.7;
      pointer-events: none;
    }
    .site-footer__tape img { width: 100%; height: auto; display: block; }
    /* 台紙の上に乗る中身：左に縦長イラスト＋右にナビ */
    .site-footer__content {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 5%;
      padding: 7% 9%;
    }
    /* 縦長の鉛筆線画（横幅は控えめ・縦に余裕） */
    .site-footer__illust {
      flex: 0 0 auto;
      width: 22%;
      max-width: 130px;
      height: auto;
      display: block;
      align-self: center;
    }
    .site-footer__nav-list {
      list-style: none;
      margin: 0; padding: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1.6rem;
    }
    .site-footer__nav-list a {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.1rem;
      color: #1a1a1a;
      text-decoration: none;
      letter-spacing: 0.06em;
      position: relative;
    }
    .site-footer__nav-list a::after {
      content: "";
      position: absolute;
      left: 0; bottom: -3px;
      width: 100%; height: 1px;
      background: #1a1a1a;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.28s ease;
    }
    .site-footer__nav-list a:hover::after { transform: scaleX(1); }
    /* コピーライト（台紙の下端・小さめ1行） */
    .site-footer__copy {
      position: absolute;
      z-index: 2;
      left: 31%;
      right: 9%;
      bottom: 11%;
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.66rem;
      letter-spacing: 0.04em;
      color: #5a4a36;
      white-space: nowrap;
    }
    /* ── 右：Contact / Instagram（破線で上下を囲む）＋ ロゴ ── */
    .site-footer__right {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2.4rem;
    }
    .site-footer__links {
      display: flex;
      flex-direction: column;
      width: 230px;
      border-top: 2px dashed #1a1a1a;
    }
    .site-footer__link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.8rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.55rem;
      font-weight: 700;
      color: #1a1a1a;
      text-decoration: none;
      letter-spacing: 0.03em;
      padding: 0.5rem 0;
      border-bottom: 2px dashed #1a1a1a;
      transition: opacity 0.2s ease;
    }
    .site-footer__link:hover { opacity: 0.6; }
    .site-footer__link .ext { font-size: 0.7em; }
    /* リンク頭のアイコン（メール / Instagram） */
    .site-footer__link-label {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
    }
    .site-footer__icon {
      width: 1.1em;
      height: 1.1em;
      object-fit: contain;
      object-position: center;
      display: block;
      flex-shrink: 0;
    }
    /* MCD MIX 赤スタンプロゴ */
    .site-footer__logo img {
      width: 96px; height: auto; display: block;
    }

    @media (max-width: 760px) {
      /* カードの装飾（紙・テープ・イラスト・footer nav）は隠し、著作権表記だけ残す */
      .site-footer__paper, .site-footer__tape, .site-footer__content { display: none; }
      .site-footer__card { flex: none; background: none; min-height: 0; }
      .site-footer__copy {
        position: static;
        left: auto; right: auto; bottom: auto;
        margin: 0;
        text-align: center;
        white-space: normal;
        font-size: 0.62rem;
        line-height: 1.6;
      }
      .site-footer__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 1.8rem;
      }
      /* 左ロゴ・右リンクの一行 */
      .site-footer__right {
        order: -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 1.2rem;
      }
      .site-footer__logo { order: -1; }
      .site-footer__logo img { width: 84px; }
      .site-footer__links { width: auto; min-width: 178px; flex: 0 1 auto; }
      .site-footer__link { font-size: 1.2rem; }
    }

    /* =========================================================
       スクロール時のふわっと表示（PC のみ。SPは即表示）
       ========================================================= */
    @media (min-width: 769px) {
      .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s ease, transform 0.7s ease;
        will-change: opacity, transform;
      }
      .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
      }
    }
    /* =========================================================
       News 一覧ページ（共通nav/footer・グリッド背景・日付＋見出し＋下線）
       ========================================================= */
    .page-head {
      max-width: 1100px;
      margin: 0 auto;
      padding: 3.5rem 2rem 1.5rem;
    }
    .page-title {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2.6rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      margin: 0 0 0.5rem;
      color: #1a1a1a;
    }
    .page-title .dot { color: #1a1a1a; }
    .page-sub {
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.9rem;
      color: #5a4a36;
      letter-spacing: 0.04em;
      line-height: 1.8;
    }
    .newslist-section {
      position: relative;
      z-index: 5;
      padding: 1rem 0 6rem;
    }
    .newslist {
      list-style: none;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2rem;
    }
    .newslist__item {
      border-bottom: 1px solid rgba(60, 42, 26, 0.35);   /* 下線 */
    }
    .newslist__item:first-child {
      border-top: 1px solid rgba(60, 42, 26, 0.35);       /* 先頭にも罫線 */
    }
    .newslist__link {
      display: flex;
      align-items: baseline;
      gap: 2rem;
      padding: 1.15rem 0.3rem;
      text-decoration: none;
      color: inherit;
      transition: opacity 0.2s ease;
    }
    .newslist__link:hover { opacity: 0.55; }
    .newslist__date {
      flex: 0 0 auto;
      width: 8.5em;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1rem;
      color: #1a1a1a;
      letter-spacing: 0.02em;
    }
    .newslist__title {
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.95rem;
      color: #2a2a2a;
      line-height: 1.7;
    }
    @media (max-width: 560px) {
      .page-title { font-size: 2.1rem; }
      .newslist__link { flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 0.95rem 0.2rem; }
      .newslist__date { width: auto; font-size: 0.9rem; }
    }

    .breadcrumb {
      max-width: 1100px; margin: 0 auto; padding: 0.7rem 2rem 0.2rem;
      display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem;
      font-size: 0.78rem; color: #6a5a45; letter-spacing: 0.04em;
    }
    .breadcrumb a { color: inherit; text-decoration: none; }
    .breadcrumb a:hover { opacity: 0.6; }
    .breadcrumb__sep { color: #b0a48d; flex: 0 0 auto; }
  
/* ===================== from mcd-mix-event-detail.html ===================== */

    /* =========================================================
       BASE（仮）— 後で base.css として切り出します
       ========================================================= */
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    html { overflow-x: clip; }   /* 破れ紙108%幅やテープ左見切れによる横スクロールを抑止（clipでstickyを壊さない） */
    /* リンクにもデフォルト（黒塗り）のカスタムカーソル */
    a {
      cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2222%22%20height%3D%2226%22%20viewBox%3D%220%200%2089.85%20104.5%22%3E%3Cpolygon%20points%3D%221.58%202.24%2026.18%20102.34%2051.15%2072.47%2087.65%2058.95%201.58%202.24%22%20fill%3D%22%23211815%22%20stroke%3D%22%23fff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22/%3E%3C/svg%3E") 2 2, pointer;
    }
    /* ボタンの上では黒白反転カーソル（白塗り＋黒縁） */
    .site-header__cta, .hero__card-cta, .about__more, .news__more,
    .event__card-link, .event__arrow, button, [role="button"] {
      cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2222%22%20height%3D%2226%22%20viewBox%3D%220%200%2089.85%20104.5%22%3E%3Cpolygon%20points%3D%221.58%202.24%2026.18%20102.34%2051.15%2072.47%2087.65%2058.95%201.58%202.24%22%20fill%3D%22%23fff%22%20stroke%3D%22%23211815%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22/%3E%3C/svg%3E") 2 2, pointer;
    }
    body {
      background-color: #F6EEE2;
      /* ページ共通の方眼グリッド（白い紙の下〜スライダーまで連続して見える） */
      background-image:
        linear-gradient(rgba(150, 120, 90, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150, 120, 90, 0.10) 1px, transparent 1px);
      background-size: 26px 26px;
      min-height: 100vh;
      overflow-x: clip;
      font-family: "Noto Sans JP", sans-serif;
      color: #1a1a1a;
      /* カスタムマウスカーソル（SVG・先端を基点に） */
      cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2222%22%20height%3D%2226%22%20viewBox%3D%220%200%2089.85%20104.5%22%3E%3Cpolygon%20points%3D%221.58%202.24%2026.18%20102.34%2051.15%2072.47%2087.65%2058.95%201.58%202.24%22%20fill%3D%22%23211815%22%20stroke%3D%22%23fff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22/%3E%3C/svg%3E") 2 2, auto;
    }

    /* =========================================================
       PART 1 — Header / Top Navigation
       ========================================================= */
    .site-header {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      width: 100%;
      background: #fffdf2;
      overflow: visible;
    }
    .site-header__inner {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      width: 100%;
      padding: 0.6rem 2rem;
    }
    .site-header__logo {
      position: absolute;
      left: 2rem;
      /* ヘッダー下端を基準に、ロゴ高さの30%だけ下へはみ出させる（高さ92px → 約28px下に出る） */
      bottom: -28px;
      display: block;
      flex-shrink: 0;
      line-height: 0;
      z-index: 110;
    }
    .site-header__logo img { display: block; width: 92px; height: auto; object-fit: contain; }
    /* ロゴが absolute になった分、nav 側がロゴ幅に被らないよう左に余白を確保 */
    .site-header__inner { padding-left: calc(2rem + 80px + 1.5rem); }
    .site-header__nav { flex: 1 1 auto; display: flex; justify-content: center; }
    .site-header__nav-list {
      display: flex; align-items: center; gap: 2.5rem;
      margin: 0; padding: 0; list-style: none;
    }
    .site-header__nav-list a {
      position: relative;
      display: inline-block; text-decoration: none; color: #1a1a1a;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.05rem; font-weight: 500; letter-spacing: 0.04em;
      padding-bottom: 4px;
    }
    .site-header__nav-list a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1.5px;
      background: #1a1a1a;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.28s ease;
    }
    .site-header__nav-list a:hover::after { transform: scaleX(1); }
    .site-header__cta {
      flex-shrink: 0; display: inline-block; padding: 0.85rem 1.5rem;
      background: #111; color: #fff; text-decoration: none;
      font-family: "Noto Sans JP", sans-serif; font-size: 0.85rem;
      font-weight: 700; letter-spacing: 0.04em; white-space: nowrap;
      border-radius: 3px; transition: background 0.2s ease;
    }
    .site-header__cta:hover { background: #c0473a; }
    /* ハンバーガーボタン（PCでは非表示） */
    .site-header__burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 40px;
      height: 40px;
      padding: 9px;
      margin-left: auto;
      background: transparent;
      border: none;
      cursor: pointer;
      z-index: 120;
    }
    .site-header__burger span {
      display: block;
      width: 100%;
      height: 2px;
      background: #1a1a1a;
      border-radius: 2px;
      transition: transform 0.25s ease, opacity 0.2s ease;
    }
    .site-header.is-open .site-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .site-header.is-open .site-header__burger span:nth-child(2) { opacity: 0; }
    .site-header.is-open .site-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    /* SPメニューのフェードイン */
    @keyframes spMenuFade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes spItemRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @media (max-width: 860px) {
      .site-header__inner { padding: 0.6rem 1.25rem; padding-left: calc(1.25rem + 78px + 1rem); }
      .site-header__burger { display: inline-flex; }
      /* 閉じている時は nav と CTA を隠す */
      .site-header__nav, .site-header__cta { display: none; }
      /* 開いた時：全画面オーバーレイ（ロゴ左・nav左寄せ・CTA下・×右上） */
      .site-header.is-open {
        position: fixed;
        inset: 0;
        height: 100vh;
        height: 100dvh;
        background: #F6EEE2;
        z-index: 300;
        overflow-y: auto;
        animation: spMenuFade 0.3s ease both;
      }
      .site-header.is-open .site-header__inner {
        display: grid;
        grid-template-columns: auto auto;
        grid-auto-rows: min-content;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 1.8rem 3rem;
        width: 100%;
        height: 100%;
        padding: 2rem 1.5rem;
      }
      .site-header.is-open .site-header__logo {
        position: static;
        grid-column: 1;
        grid-row: 1 / 3;
        justify-self: center;
      }
      .site-header.is-open .site-header__logo img { width: 118px; }
      .site-header.is-open .site-header__nav { display: flex; grid-column: 2; grid-row: 1; }
      .site-header.is-open .site-header__nav-list { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
      .site-header.is-open .site-header__nav-list a { font-size: 1.55rem; }
      .site-header.is-open .site-header__cta { display: inline-flex; grid-column: 2; grid-row: 2; justify-self: start; }
      /* 項目をふわっと順番に表示 */
      .site-header.is-open .site-header__nav-list li,
      .site-header.is-open .site-header__cta { animation: spItemRise 0.4s ease both; }
      .site-header.is-open .site-header__nav-list li:nth-child(1) { animation-delay: 0.08s; }
      .site-header.is-open .site-header__nav-list li:nth-child(2) { animation-delay: 0.14s; }
      .site-header.is-open .site-header__nav-list li:nth-child(3) { animation-delay: 0.20s; }
      .site-header.is-open .site-header__nav-list li:nth-child(4) { animation-delay: 0.26s; }
      .site-header.is-open .site-header__cta { animation-delay: 0.32s; }
      .site-header.is-open .site-header__burger {
        position: fixed;
        top: 1.25rem;
        right: 1.4rem;
        transform: scale(1.3);
        transform-origin: top right;
      }
    }
    @media (max-width: 560px) {
      .site-header__logo img { width: 60px; }
      .site-header__logo { bottom: -18px; left: 1.25rem; }
      .site-header__inner { padding-left: calc(1.25rem + 60px + 0.85rem); }
    }

    /* =========================================================
       PART 2 — Hero（100vh：コラージュ背景 + イベントカード + 破れ目）
       ========================================================= */
    .hero {
      position: relative;
      height: 100vh;
      min-height: 560px;
      overflow: visible;
      background: #e9e1d0;
    }
    /* コラージュは clip したいので bg だけ overflow hidden */
    .hero__clip {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 1;
    }

    /* 背景コラージュ */
    .hero__bg {
      position: absolute;
      inset: 0;
      z-index: 1;
    }
    .hero__bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 18%;
      display: block;
    }

    /* 右側イベントカード（下げて縦に伸ばす） */
    .hero__card {
      position: absolute;
      z-index: 2;
      top: 40%;
      right: 0;
      bottom: 0;
      width: min(440px, 46vw);
      background-color: #F6EEE2;
      /* 方眼ノート風の罫線（クリーム地の上に薄いグリッド） */
      background-image:
        linear-gradient(rgba(150, 120, 90, 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150, 120, 90, 0.13) 1px, transparent 1px);
      background-size: 22px 22px;
      background-position: -1px -1px;
      padding: 3rem 2.6rem 6rem;   /* 下に伸ばす（下端が紙の手前まで） */
      box-shadow: -6px 8px 30px rgba(0,0,0,0.07);
    }
    .hero__card-sub {
      margin: 0 0 0.15rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.1rem;
      color: #c0473a;
      letter-spacing: 0.04em;
    }
    .hero__card-title {
      margin: 0 0 0.7rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2.4rem;
      font-weight: 700;
      line-height: 1.1;
      color: #1a1a1a;
      letter-spacing: 0.01em;
    }
    .hero__card-date {
      margin: 0 0 1.3rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2rem;
      font-weight: 700;
      color: #1a1a1a;
      letter-spacing: 0.02em;
    }
    .hero__card-date .day {
      font-size: 1rem;
      font-weight: 700;
      vertical-align: baseline;
    }
    .hero__card-desc {
      margin: 0 0 1.6rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.8rem;
      line-height: 1.85;
      color: #3a3a3a;
      letter-spacing: 0.02em;
    }
    .hero__card-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      padding: 0.8rem 1.4rem;
      background: #111;
      color: #fff;
      text-decoration: none;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      border-radius: 3px;
      transition: background 0.2s ease;
    }
    .hero__card-cta:hover { background: #c0473a; }
    .hero__card-cta .arrow {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.7);
      font-size: 0.7rem;
    }

    /* 装飾テープ（破れ目に重なる位置に貼る） */
    .hero__tape {
      position: absolute;
      z-index: 20;
      bottom: 3%; left: -30px;
      width: 130px;
      transform: rotate(-9deg);
      opacity: 0.9;
      pointer-events: none;
    }
    .hero__tape img { width: 100%; height: auto; display: block; }
    /* PCではテープを大きく */
    @media (min-width: 769px) {
      .hero__tape { width: 180px; left: -40px; }
    }

    /* =========================================================
       PART 3 — About（MCD MIXとは？）破れた上端で Hero と繋ぐ
       ========================================================= */
    .about {
      position: relative;
      z-index: 6;
      /* 白背景はここに置かない（破れ紙の透明部分からコラージュを見せるため） */
      margin-top: -16vw;          /* 破れ紙をコラージュに重ねる（カードのボタンに被らない量） */
    }
    /* 破れエッジ画像（torn-solid.png：上=透明→裂け目→白い本体で終わる） */
    .about__torn {
      position: relative;
      z-index: 1;
      line-height: 0;
      margin-bottom: -1px;
    }
    .about__torn img {
      width: 112%;
      margin-left: -4%;
      height: auto;
      display: block;
    }
    /* 白い本体（torn-thin の白い下端に密着、白はCSSで伸ばす） */
    .about__inner {
      position: relative;
      /* z-index を指定しない＝スタッキングコンテキストを作らない（中の文字を外に出せる） */
      background: #ffffff;
      margin-top: -1px;
      padding: 0.5rem 2rem 6rem;
    }
    .about__container {
      position: relative;
      z-index: 5;            /* 文字をトレーシングペーパー(4)より手前へ。innerが文脈を作らないので有効 */
      max-width: 1000px;
      margin: 0 auto;
    }
    .about__title {
      position: relative;
      z-index: 6;            /* transformでスタッキングコンテキスト化するため明示的に手前へ */
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2rem;
      font-weight: 700;
      color: #1a1a1a;
      letter-spacing: 0.02em;
      margin: 0 0 1.8rem;
      /* 本文と同じ左位置から始め、左基点でほんの少し傾ける */
      text-align: left;
      transform: rotate(0.5deg);
      transform-origin: left bottom;
    }
    .about__title-suffix {
      font-size: 0.72em;   /* 「とは？」だけ少し小さく */
    }
    .about__body p {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.92rem;
      line-height: 2.1;
      color: #2a2a2a;
      letter-spacing: 0.02em;
      margin: 0 0 1.4rem;
    }
    .about__more {
      display: inline-flex;
      align-items: center;
      gap: 0.7rem;
      margin-top: 1.5rem;
      padding: 0.85rem 2rem;
      border: 1px solid #1a1a1a;
      border-radius: 999px;
      background: #ffffff;
      color: #1a1a1a;
      text-decoration: none;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.85rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      transition: background 0.2s ease, color 0.2s ease;
    }
    /* ボタンを右寄せにする（親をflex化） */
    .about__more-wrap {
      display: flex;
      justify-content: flex-end;
    }
    .about__more:hover { background: #1a1a1a; color: #fff; }
    .about__more .arrow { font-size: 0.9rem; }

    /* プチプチ素材：MCD MIXとは？ の右下に装飾（右端に詰める） */
    .about__bubble {
      position: absolute;
      z-index: 2;            /* 下端の破れ紙(z-index 1)より手前に */
      right: 0;
      bottom: -42%;
      width: 220px;
      height: auto;
      opacity: 0.7;
      pointer-events: none;
      mix-blend-mode: multiply;
      filter: drop-shadow(4px 6px 8px rgba(0,0,0,0.28));
    }

    /* トレーシングペーパー（Hero〜About の境目に半透明で重ねる） */
    .about__tracing {
      position: absolute;
      z-index: 4;
      top: 5vw;
      left: -3%;
      width: 70%;
      height: auto;
      transform: rotate(-3deg);
      pointer-events: none;
      mix-blend-mode: normal;
      opacity: 0.85;   /* 少しだけ薄く */
      filter: drop-shadow(3px 5px 7px rgba(0,0,0,0.18));   /* 軽いドロップシャドウ */
    }

    /* About 下端の破れ目（白い本体 → 破れ → 下の Event クリーム地） */
    .about__torn-bottom {
      position: relative;
      z-index: 1;
      line-height: 0;
      margin-top: -1px;
      transform: scaleY(-1);   /* 上下反転で「白が上・破れが下」に */
    }
    .about__torn-bottom img {
      width: 112%;
      margin-left: -4%;
      height: auto;
      display: block;
    }

    /* =========================================================
       PART 4 — Event スライダー（カンプ準拠：帯タイトル＋画像オーバーレイ）
       ========================================================= */
    .event {
      position: relative;
      z-index: 5;
      background: transparent;   /* body の連続グリッドを透かす */
      margin-top: -1px;
      padding: 1rem 0 5rem;
    }
    .event__inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2rem;
    }
    .event__head { margin-bottom: 2rem; }
    .event__title {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2.2rem;
      font-weight: 700;
      color: #1a1a1a;
      margin: 0;
      letter-spacing: 0.04em;
    }
    .event__slider {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .event__viewport {
      overflow: hidden;
      flex: 1;
    }
    .event__track {
      display: flex;
      gap: 2.2rem;
      transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    }
    .event__card {
      flex: 0 0 auto;
      min-width: 0;
    }
    /* .reveal の transition に上書きされないよう特異度を上げ、width(拡大) も含める */
    article.event__card {
      transition: width 0.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.7s ease, transform 0.7s ease;
    }
    /* タイトル帯（画像の上に配置・被らない。グリッド無しのベタ地） */
    .event__card-title {
      margin: 0 2.4rem 0 0;   /* 右端を画像より内側にして少しズレを作る */
      background: #F6EEE2;
      border: 1.5px solid #3a2a1a;
      padding: 0.6rem 0.9rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: #1a1a1a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* 画像（グレーのプレースホルダー） */
    .event__figure {
      position: relative;
      aspect-ratio: 16 / 11;
      background: #c9c9c9;
      margin-top: -1.5px;   /* タイトル帯の下線と画像の上線を重ねて二重線を防ぐ */
      display: flex;
      align-items: center;
      justify-content: center;
      color: #6f6f6f;
      font-size: 0.95rem;
      letter-spacing: 0.06em;
      border: 1.5px solid #3a2a1a;
      overflow: hidden;   /* ホバー時のズームを枠内にクリップ */
    }
    .event__figure img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.45s ease;
    }
    /* サムネイル全体ホバーで画像を少しアップ */
    .event__figure:hover img { transform: scale(1.06); }
    /* 年・地名（画像の左下に重なる） */
    .event__card-meta {
      position: absolute;
      left: 0.7rem;
      bottom: 0.6rem;
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.95rem;
      color: #1a1a1a;
      letter-spacing: 0.02em;
    }
    /* リンク／ホバー領域をサムネイル全体に拡張（透明オーバーレイ） */
    .event__card-link {
      position: absolute;
      inset: 0;
      z-index: 2;
      font-size: 0;          /* テキスト「↗」を隠す（矢印は ::after で描画） */
      text-decoration: none;
    }
    /* 右下の黒い矢印ボタン（見た目は従来どおり） */
    .event__card-link::after {
      content: "↗";
      position: absolute;
      right: 0; bottom: 0;
      width: 54px; height: 54px;
      background: #111;
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
      transition: background 0.2s ease;
    }
    .event__card-link:hover::after { background: #c0473a; }
    /* 左右の三角矢印（スライダー外側・CSSで描く塗り三角） */
    .event__arrow {
      flex: 0 0 auto;
      width: 40px; height: 40px;
      border: none;
      background: transparent;
      padding: 0;
      display: flex; align-items: center; justify-content: center;
      transition: opacity 0.2s ease, transform 0.2s ease;
      font-size: 0;   /* グリフ文字を消してCSS三角に統一 */
    }
    .event__arrow::before {
      content: "";
      display: block;
      width: 0; height: 0;
      border-top: 11px solid transparent;
      border-bottom: 11px solid transparent;
    }
    .event__arrow--prev::before { border-right: 16px solid #1a1a1a; }
    .event__arrow--next::before { border-left: 16px solid #1a1a1a; }
    .event__arrow:hover { transform: scale(1.15); }
    .event__arrow:disabled { opacity: 0.25; cursor: default; }
    .event__arrow:disabled:hover { transform: none; }

    /* PC：左に来たカード（アクティブ）を大きく、他を小さく */
    @media (min-width: 769px) {
      .event__card { width: 38%; }
      .event__card.is-active { width: 58%; }
    }

    @media (max-width: 768px) {
      .event__card { width: 100%; }  /* SPは1枚見せ */
      .about__bubble { width: 170px; right: 0; bottom: 2%; }
    }

    @media (max-width: 768px) {
      .about { margin-top: -14vw; }
      .about__inner { padding: 0.5rem 1.4rem 4rem; }
      .about__title { font-size: 1.6rem; }
      .about__body p { font-size: 0.88rem; line-height: 2; }
    }

    @media (max-width: 768px) {
      .hero__card {
        /* 位置は維持（中央移動しない）。右寄せのまま幅だけ調整 */
        right: 0;
        width: min(440px, 70vw);
        padding: 2rem 1.8rem 3rem;
      }
      .hero__card-title { font-size: 1.7rem; }
      .hero__card-date { font-size: 1.5rem; }
    }

    /* =========================================================
       PART 5 — News（ルーズリーフ紙＋ピンクの紙）
       ========================================================= */
    .news {
      position: relative;
      z-index: 5;
      background: transparent;     /* body の連続グリッドを透かす */
      padding: 3rem 0 6rem;
      overflow: clip;              /* 全幅・斜めのピンク紙が下のFooterへ突き抜けないよう抑止 */
    }
    .news__inner {
      position: relative;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 2rem;
    }
    /* ピンクの紙（全幅セクション基準で右端に配置・ルーズリーフ前面に少し被せる） */
    .news__pink {
      position: absolute;
      right: -4rem;
      bottom: 0;
      top: auto;
      height: 150%;
      width: auto;
      transform: rotate(6deg);
      transform-origin: bottom right;
      z-index: 3;
      pointer-events: none;
    }
    /* ルーズリーフ紙のパネル（横いっぱい＝フルブリード＋少し傾ける） */
    .news__paper {
      position: relative;
      z-index: 2;
      width: 106vw;
      margin-left: calc(50% - 53vw);
      transform: rotate(-2deg);
    }
    .news__paper-bg {
      width: 100%;
      height: auto;
      display: block;
    }
    /* 紙の上に乗せる中身（紙の縦いっぱいに広げる） */
    .news__content {
      position: absolute;
      inset: 0;
      padding: 9% 9% 30% 17%;
      display: flex;
      flex-direction: column;
    }
    .news__title {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2.2rem;
      font-weight: 700;
      color: #1a1a1a;
      margin: 0 0 0.5rem;
      letter-spacing: 0.04em;
    }
    /* リストを縦に均等配分して紙全体を使う */
    .news__list {
      list-style: none;
      margin: 0;
      padding: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
    .news__item {
    }
    /* 各項目をリンクにできるように（年＋本文をアンカーで包む） */
    .news__item-link {
      display: flex;
      align-items: baseline;
      gap: 1.6rem;
      padding: 0.7rem 0;
      text-decoration: none;
      color: inherit;
      transition: opacity 0.2s ease;
    }
    .news__item-link:hover { opacity: 0.55; }
    .news__year {
      flex: 0 0 auto;
      width: 8em;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.95rem;
      color: #1a1a1a;
      letter-spacing: 0.02em;
    }
    .news__text {
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.85rem;
      color: #2a2a2a;
      line-height: 1.7;
    }
    .news__more-wrap {
      display: flex;
      justify-content: center;
      margin-top: 0.5rem;
    }
    .news__more {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      padding: 0.7rem 2rem;
      border: 1px solid #1a1a1a;
      border-radius: 999px;
      background: rgba(255,255,255,0.6);
      color: #1a1a1a;
      text-decoration: none;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.85rem;
      letter-spacing: 0.04em;
      transition: background 0.2s ease, color 0.2s ease;
    }
    .news__more:hover { background: #1a1a1a; color: #fff; }
    .news__more-arrow {
      font-size: 1.1rem;
      line-height: 1;
    }

    /* 文字が小さくなりすぎる狭い画面では、紙を背景にせず通常レイアウトに切替 */
    @media (max-width: 700px) {
      .news__paper-bg { min-height: 660px; object-fit: cover; }
      .news__content { padding: 14% 8% 36% 13%; }
      .news__title { font-size: 1.7rem; margin-bottom: 1rem; }
      /* 縦に間延びさせず上に寄せる */
      .news__list { flex: 0 0 auto; justify-content: flex-start; gap: 1.3rem; }
      /* 日付の下に本文を改行（縦積み） */
      .news__item-link { flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.5rem 0; }
      .news__year { width: auto; }
      .news__more-wrap { margin-top: 1.4rem; }
      .news__pink { height: 130%; right: -2rem; bottom: 0; top: auto; }
    }

    /* =========================================================
       PART 6 — Footer（ルーズリーフ台紙＋テープ＋nav＋Contact/Instagram）
       ========================================================= */
    .site-footer {
      position: relative;
      z-index: 5;
      background: transparent;     /* body の連続グリッドを透かす */
      padding: 3rem 0 4rem;
    }
    /* 全体は左寄せ／2カラム（左：台紙カード ／ 右：Contact・Instagram・ロゴ） */
    .site-footer__inner {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 5%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 5%;
    }
    /* ── 左：シンプル白紙を台紙にしたカード ── */
    .site-footer__card {
      position: relative;
      flex: 0 1 620px;
      max-width: 620px;
      min-width: 0;
    }
    .site-footer__paper {
      width: 100%;
      height: auto;
      display: block;
    }
    /* 台紙の左上に斜めに貼った半透明テープ */
    .site-footer__tape {
      position: absolute;
      z-index: 3;
      top: -58px;
      left: 50%;
      width: 104px;
      transform: translateX(-50%) rotate(-32deg);
      opacity: 0.7;
      pointer-events: none;
    }
    .site-footer__tape img { width: 100%; height: auto; display: block; }
    /* 台紙の上に乗る中身：左に縦長イラスト＋右にナビ */
    .site-footer__content {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 5%;
      padding: 7% 9%;
    }
    /* 縦長の鉛筆線画（横幅は控えめ・縦に余裕） */
    .site-footer__illust {
      flex: 0 0 auto;
      width: 22%;
      max-width: 130px;
      height: auto;
      display: block;
      align-self: center;
    }
    .site-footer__nav-list {
      list-style: none;
      margin: 0; padding: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1.6rem;
    }
    .site-footer__nav-list a {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.1rem;
      color: #1a1a1a;
      text-decoration: none;
      letter-spacing: 0.06em;
      position: relative;
    }
    .site-footer__nav-list a::after {
      content: "";
      position: absolute;
      left: 0; bottom: -3px;
      width: 100%; height: 1px;
      background: #1a1a1a;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.28s ease;
    }
    .site-footer__nav-list a:hover::after { transform: scaleX(1); }
    /* コピーライト（台紙の下端・小さめ1行） */
    .site-footer__copy {
      position: absolute;
      z-index: 2;
      left: 31%;
      right: 9%;
      bottom: 11%;
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.66rem;
      letter-spacing: 0.04em;
      color: #5a4a36;
      white-space: nowrap;
    }
    /* ── 右：Contact / Instagram（破線で上下を囲む）＋ ロゴ ── */
    .site-footer__right {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2.4rem;
    }
    .site-footer__links {
      display: flex;
      flex-direction: column;
      width: 230px;
      border-top: 2px dashed #1a1a1a;
    }
    .site-footer__link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.8rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.55rem;
      font-weight: 700;
      color: #1a1a1a;
      text-decoration: none;
      letter-spacing: 0.03em;
      padding: 0.5rem 0;
      border-bottom: 2px dashed #1a1a1a;
      transition: opacity 0.2s ease;
    }
    .site-footer__link:hover { opacity: 0.6; }
    .site-footer__link .ext { font-size: 0.7em; }
    /* リンク頭のアイコン（メール / Instagram） */
    .site-footer__link-label {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
    }
    .site-footer__icon {
      width: 1.1em;
      height: 1.1em;
      object-fit: contain;
      object-position: center;
      display: block;
      flex-shrink: 0;
    }
    /* MCD MIX 赤スタンプロゴ */
    .site-footer__logo img {
      width: 96px; height: auto; display: block;
    }

    @media (max-width: 760px) {
      /* カードの装飾（紙・テープ・イラスト・footer nav）は隠し、著作権表記だけ残す */
      .site-footer__paper, .site-footer__tape, .site-footer__content { display: none; }
      .site-footer__card { flex: none; background: none; min-height: 0; }
      .site-footer__copy {
        position: static;
        left: auto; right: auto; bottom: auto;
        margin: 0;
        text-align: center;
        white-space: normal;
        font-size: 0.62rem;
        line-height: 1.6;
      }
      .site-footer__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 1.8rem;
      }
      /* 左ロゴ・右リンクの一行 */
      .site-footer__right {
        order: -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 1.2rem;
      }
      .site-footer__logo { order: -1; }
      .site-footer__logo img { width: 84px; }
      .site-footer__links { width: auto; min-width: 178px; flex: 0 1 auto; }
      .site-footer__link { font-size: 1.2rem; }
    }

    /* =========================================================
       スクロール時のふわっと表示（PC のみ。SPは即表示）
       ========================================================= */
    @media (min-width: 769px) {
      .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s ease, transform 0.7s ease;
        will-change: opacity, transform;
      }
      .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
      }
    }
    /* =========================================================
       Event 概要ページ（共通nav/footer・グリッド背景・装飾はTOP流用）
       ========================================================= */
    /* パンくず */
    .breadcrumb {
      max-width: 1100px; margin: 0 auto; padding: 0.7rem 2rem 0.2rem;
      display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem;
      font-size: 0.78rem; color: #6a5a45; letter-spacing: 0.04em;
    }
    .breadcrumb a { color: inherit; text-decoration: none; }
    .breadcrumb a:hover { opacity: 0.6; }
    .breadcrumb__sep { color: #b0a48d; flex: 0 0 auto; }

    /* ヒーロー帯（オレンジ） */
    .ev-hero { position: relative; z-index: 5; background: #EAA07E; overflow: hidden; }
    .ev-hero__banner { display: block; width: 100%; height: auto; }
    .ev-hero__inner {
      max-width: 1100px; margin: 0 auto; padding: 2.2rem 2rem 2.6rem;
      display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    }
    .ev-hero__place { font-family: "Noto Sans JP", sans-serif; font-size: 1.1rem; font-weight: 700; color: #1a1a1a; margin: 0 0 0.7rem; letter-spacing: 0.02em; }
    .ev-hero__title { font-family: "Noto Sans JP", sans-serif; font-size: 3rem; font-weight: 400; color: #1a1a1a; margin: 0 0 0.9rem; letter-spacing: 0.08em; line-height: 1.1; }
    .ev-hero__date { font-family: "Noto Sans JP", sans-serif; font-size: 1.35rem; font-weight: 700; color: #2E5CA6; margin: 0; letter-spacing: 0.02em; }
    .ev-hero__art { flex: 0 0 auto; width: min(310px, 34%); }
    .ev-hero__art img { width: 100%; height: auto; display: block; }

    /* 本文セクション見出し */
    .ev-h2 { font-family: "Noto Sans JP", sans-serif; font-size: 1.9rem; font-weight: 700; color: #1a1a1a; letter-spacing: 0.04em; margin: 0 0 1.6rem; }

    /* イントロ（白カード） */
    .ev-intro { position: relative; z-index: 5; padding: 3.5rem 0 4rem; }
    .ev-intro__card { background: #fff; max-width: 1100px; margin: 0 auto; padding: 3rem 2rem 3.5rem; box-shadow: 0 2px 26px rgba(0,0,0,0.05); }
    .ev-intro__title { font-family: "Noto Sans JP", sans-serif; font-size: 1.9rem; font-weight: 700; color: #1a1a1a; margin: 0 0 1.5rem; line-height: 1.45; }
    .ev-intro__body p { margin: 0 0 0.85rem; font-size: 0.92rem; line-height: 1.95; color: #2a2a2a; }
    .ev-intro__note { color: #8a7a60 !important; }

    /* 対象のコンテンツ */
    .ev-target { position: relative; z-index: 5; padding: 1.5rem 0 4rem; }
    .ev-target__inner { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
    .ev-target__cols { display: flex; gap: 5rem; flex-wrap: wrap; padding-left: 0.5rem; }
    .ev-target__pill { display: inline-block; border: 1.5px solid #1a1a1a; border-radius: 999px; padding: 0.32rem 1.5rem; font-size: 0.85rem; font-weight: 700; margin-bottom: 1.1rem; }
    .ev-target__list { list-style: none; margin: 0; padding: 0; }
    .ev-target__list li { font-size: 0.92rem; line-height: 2.1; color: #2a2a2a; }
    /* 出展対象＝マゼンタ／出展対象外＝シアン（ピルの線・文字・リスト項目すべて） */
    .ev-target__col--in .ev-target__pill { border-color: #E2007A; color: #E2007A; }
    .ev-target__col--in .ev-target__list li { color: #E2007A; }
    .ev-target__col--out .ev-target__pill { border-color: #0098C3; color: #0098C3; }
    .ev-target__col--out .ev-target__list li { color: #0098C3; }

    /* 出展ご希望の方（ベージュ帯＋ピンク紙＋写真） */
    .ev-apply { position: relative; z-index: 5; background: #EDE6D7; padding: 3rem 0 3.5rem; overflow: clip; }
    .ev-apply__pink { position: absolute; left: -7rem; bottom: -3rem; top: auto; height: 135%; transform: rotate(-9deg); transform-origin: bottom left; z-index: 1; pointer-events: none; }
    .ev-apply__inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 0 2rem; display: flex; gap: 3rem; align-items: flex-start; flex-wrap: wrap; }
    .ev-apply__left { flex: 1 1 320px; }
    .ev-apply__list { list-style: none; margin: 0 0 1.6rem; padding: 0; }
    .ev-apply__list li { font-size: 0.92rem; line-height: 2.15; color: #2a2a2a; }
    .ev-apply__btn { display: inline-flex; align-items: center; gap: 1rem; background: #111; color: #fff; text-decoration: none; padding: 0.7rem 1.7rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700; transition: background 0.2s ease; }
    .ev-apply__btn:hover { background: #c0473a; }
    .ev-apply__right { flex: 0 1 430px; }
    .ev-apply__slider { position: relative; }
    .ev-apply__viewport { overflow: hidden; }
    .ev-apply__track { display: flex; transition: transform 0.4s ease; }
    .ev-apply__slide { flex: 0 0 100%; }
    .ev-apply__photo { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; display: block; }
    .ev-apply__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(17,17,17,0.55); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; z-index: 2; }
    .ev-apply__nav:hover { background: rgba(17,17,17,0.85); }
    .ev-apply__nav--prev { left: 0.5rem; }
    .ev-apply__nav--next { right: 0.5rem; }
    .ev-apply__dots { display: flex; justify-content: center; gap: 0.4rem; margin: 0.6rem 0 0; }
    .ev-apply__dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: none; background: rgba(26,26,26,0.28); cursor: pointer; }
    .ev-apply__dot.is-active { background: #1a1a1a; }
    .ev-apply__cap { margin: 0.6rem 0 0; font-size: 0.8rem; letter-spacing: 0.12em; color: #5a4a36; }

    /* 日程・会場（テーブル＋地図） */
    .ev-schedule { position: relative; z-index: 5; padding: 3.5rem 0 5rem; overflow: clip; }
    .ev-schedule__pink { position: absolute; left: -7rem; top: 8%; bottom: auto; height: 60%; transform: rotate(8deg); transform-origin: top left; z-index: 1; pointer-events: none; }
    .ev-schedule__inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
    .ev-table { width: 100%; border-collapse: collapse; border: 1px solid #b9ad97; background: rgba(255,255,255,0.6); }
    .ev-table th, .ev-table td { border: 1px solid #b9ad97; padding: 0.95rem 1.3rem; text-align: left; vertical-align: middle; font-size: 0.9rem; }
    .ev-table th { width: 8em; font-weight: 700; text-align: center; letter-spacing: 0.25em; background: rgba(255,255,255,0.35); white-space: nowrap; color: #1a1a1a; }
    .ev-table td { line-height: 1.8; color: #2a2a2a; }
    .ev-map { margin-top: 1.6rem; width: 100%; aspect-ratio: 16/7; overflow: hidden; }
    .ev-map iframe { width: 100%; height: 100%; border: 0; display: block; }

    /* レスポンシブ */
    @media (max-width: 768px) {
      .ev-apply__pink, .ev-schedule__pink { display: none; }
      .ev-hero__inner { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.8rem 1.5rem 2rem; }
      .ev-hero__title { font-size: 2.1rem; }
      .ev-hero__date { font-size: 1.15rem; }
      .ev-hero__art { width: 150px; align-self: flex-end; margin-top: -2.5rem; }
      .ev-intro { padding: 2.5rem 0 3rem; }
      .ev-intro__card { padding: 2rem 1.4rem 2.4rem; }
      .ev-intro__title { font-size: 1.45rem; }
      .ev-h2 { font-size: 1.55rem; margin-bottom: 1.2rem; }
      .ev-target__cols { gap: 2.4rem; }
      .ev-apply__inner { flex-direction: column; }
      .ev-table th { width: 5.5em; letter-spacing: 0.08em; padding: 0.7rem 0.6rem; font-size: 0.82rem; }
      .ev-table td { padding: 0.7rem 0.8rem; font-size: 0.85rem; }
    }

  
/* ===================== from mcd-mix-about.html ===================== */

    /* =========================================================
       BASE（仮）— 後で base.css として切り出します
       ========================================================= */
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    html { overflow-x: clip; }   /* 破れ紙108%幅やテープ左見切れによる横スクロールを抑止（clipでstickyを壊さない） */
    /* リンクにもデフォルト（黒塗り）のカスタムカーソル */
    a {
      cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2222%22%20height%3D%2226%22%20viewBox%3D%220%200%2089.85%20104.5%22%3E%3Cpolygon%20points%3D%221.58%202.24%2026.18%20102.34%2051.15%2072.47%2087.65%2058.95%201.58%202.24%22%20fill%3D%22%23211815%22%20stroke%3D%22%23fff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22/%3E%3C/svg%3E") 2 2, pointer;
    }
    /* ボタンの上では黒白反転カーソル（白塗り＋黒縁） */
    .site-header__cta, .hero__card-cta, .about__more, .news__more,
    .event__card-link, .event__arrow, button, [role="button"] {
      cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2222%22%20height%3D%2226%22%20viewBox%3D%220%200%2089.85%20104.5%22%3E%3Cpolygon%20points%3D%221.58%202.24%2026.18%20102.34%2051.15%2072.47%2087.65%2058.95%201.58%202.24%22%20fill%3D%22%23fff%22%20stroke%3D%22%23211815%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22/%3E%3C/svg%3E") 2 2, pointer;
    }
    body {
      background-color: #F6EEE2;
      /* ページ共通の方眼グリッド（白い紙の下〜スライダーまで連続して見える） */
      background-image:
        linear-gradient(rgba(150, 120, 90, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150, 120, 90, 0.10) 1px, transparent 1px);
      background-size: 26px 26px;
      min-height: 100vh;
      overflow-x: clip;
      font-family: "Noto Sans JP", sans-serif;
      color: #1a1a1a;
      /* カスタムマウスカーソル（SVG・先端を基点に） */
      cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2222%22%20height%3D%2226%22%20viewBox%3D%220%200%2089.85%20104.5%22%3E%3Cpolygon%20points%3D%221.58%202.24%2026.18%20102.34%2051.15%2072.47%2087.65%2058.95%201.58%202.24%22%20fill%3D%22%23211815%22%20stroke%3D%22%23fff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22/%3E%3C/svg%3E") 2 2, auto;
    }

    /* =========================================================
       PART 1 — Header / Top Navigation
       ========================================================= */
    .site-header {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      width: 100%;
      background: #fffdf2;
      overflow: visible;
    }
    .site-header__inner {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      width: 100%;
      padding: 0.6rem 2rem;
    }
    .site-header__logo {
      position: absolute;
      left: 2rem;
      /* ヘッダー下端を基準に、ロゴ高さの30%だけ下へはみ出させる（高さ92px → 約28px下に出る） */
      bottom: -28px;
      display: block;
      flex-shrink: 0;
      line-height: 0;
      z-index: 110;
    }
    .site-header__logo img { display: block; width: 92px; height: auto; object-fit: contain; }
    /* ロゴが absolute になった分、nav 側がロゴ幅に被らないよう左に余白を確保 */
    .site-header__inner { padding-left: calc(2rem + 80px + 1.5rem); }
    .site-header__nav { flex: 1 1 auto; display: flex; justify-content: center; }
    .site-header__nav-list {
      display: flex; align-items: center; gap: 2.5rem;
      margin: 0; padding: 0; list-style: none;
    }
    .site-header__nav-list a {
      position: relative;
      display: inline-block; text-decoration: none; color: #1a1a1a;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.05rem; font-weight: 500; letter-spacing: 0.04em;
      padding-bottom: 4px;
    }
    .site-header__nav-list a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1.5px;
      background: #1a1a1a;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.28s ease;
    }
    .site-header__nav-list a:hover::after { transform: scaleX(1); }
    .site-header__cta {
      flex-shrink: 0; display: inline-block; padding: 0.85rem 1.5rem;
      background: #111; color: #fff; text-decoration: none;
      font-family: "Noto Sans JP", sans-serif; font-size: 0.85rem;
      font-weight: 700; letter-spacing: 0.04em; white-space: nowrap;
      border-radius: 3px; transition: background 0.2s ease;
    }
    .site-header__cta:hover { background: #c0473a; }
    /* ハンバーガーボタン（PCでは非表示） */
    .site-header__burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 40px;
      height: 40px;
      padding: 9px;
      margin-left: auto;
      background: transparent;
      border: none;
      cursor: pointer;
      z-index: 120;
    }
    .site-header__burger span {
      display: block;
      width: 100%;
      height: 2px;
      background: #1a1a1a;
      border-radius: 2px;
      transition: transform 0.25s ease, opacity 0.2s ease;
    }
    .site-header.is-open .site-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .site-header.is-open .site-header__burger span:nth-child(2) { opacity: 0; }
    .site-header.is-open .site-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    /* SPメニューのフェードイン */
    @keyframes spMenuFade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes spItemRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @media (max-width: 860px) {
      .site-header__inner { padding: 0.6rem 1.25rem; padding-left: calc(1.25rem + 78px + 1rem); }
      .site-header__burger { display: inline-flex; }
      /* 閉じている時は nav と CTA を隠す */
      .site-header__nav, .site-header__cta { display: none; }
      /* 開いた時：全画面オーバーレイ（ロゴ左・nav左寄せ・CTA下・×右上） */
      .site-header.is-open {
        position: fixed;
        inset: 0;
        height: 100vh;
        height: 100dvh;
        background: #F6EEE2;
        z-index: 300;
        overflow-y: auto;
        animation: spMenuFade 0.3s ease both;
      }
      .site-header.is-open .site-header__inner {
        display: grid;
        grid-template-columns: auto auto;
        grid-auto-rows: min-content;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 1.8rem 3rem;
        width: 100%;
        height: 100%;
        padding: 2rem 1.5rem;
      }
      .site-header.is-open .site-header__logo {
        position: static;
        grid-column: 1;
        grid-row: 1 / 3;
        justify-self: center;
      }
      .site-header.is-open .site-header__logo img { width: 118px; }
      .site-header.is-open .site-header__nav { display: flex; grid-column: 2; grid-row: 1; }
      .site-header.is-open .site-header__nav-list { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
      .site-header.is-open .site-header__nav-list a { font-size: 1.55rem; }
      .site-header.is-open .site-header__cta { display: inline-flex; grid-column: 2; grid-row: 2; justify-self: start; }
      /* 項目をふわっと順番に表示 */
      .site-header.is-open .site-header__nav-list li,
      .site-header.is-open .site-header__cta { animation: spItemRise 0.4s ease both; }
      .site-header.is-open .site-header__nav-list li:nth-child(1) { animation-delay: 0.08s; }
      .site-header.is-open .site-header__nav-list li:nth-child(2) { animation-delay: 0.14s; }
      .site-header.is-open .site-header__nav-list li:nth-child(3) { animation-delay: 0.20s; }
      .site-header.is-open .site-header__nav-list li:nth-child(4) { animation-delay: 0.26s; }
      .site-header.is-open .site-header__cta { animation-delay: 0.32s; }
      .site-header.is-open .site-header__burger {
        position: fixed;
        top: 1.25rem;
        right: 1.4rem;
        transform: scale(1.3);
        transform-origin: top right;
      }
    }
    @media (max-width: 560px) {
      .site-header__logo img { width: 60px; }
      .site-header__logo { bottom: -18px; left: 1.25rem; }
      .site-header__inner { padding-left: calc(1.25rem + 60px + 0.85rem); }
    }

    /* =========================================================
       PART 2 — Hero（100vh：コラージュ背景 + イベントカード + 破れ目）
       ========================================================= */
    .hero {
      position: relative;
      height: 100vh;
      min-height: 560px;
      overflow: visible;
      background: #e9e1d0;
    }
    /* コラージュは clip したいので bg だけ overflow hidden */
    .hero__clip {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 1;
    }

    /* 背景コラージュ */
    .hero__bg {
      position: absolute;
      inset: 0;
      z-index: 1;
    }
    .hero__bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 18%;
      display: block;
    }

    /* 右側イベントカード（下げて縦に伸ばす） */
    .hero__card {
      position: absolute;
      z-index: 2;
      top: 40%;
      right: 0;
      bottom: 0;
      width: min(440px, 46vw);
      background-color: #F6EEE2;
      /* 方眼ノート風の罫線（クリーム地の上に薄いグリッド） */
      background-image:
        linear-gradient(rgba(150, 120, 90, 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150, 120, 90, 0.13) 1px, transparent 1px);
      background-size: 22px 22px;
      background-position: -1px -1px;
      padding: 3rem 2.6rem 6rem;   /* 下に伸ばす（下端が紙の手前まで） */
      box-shadow: -6px 8px 30px rgba(0,0,0,0.07);
    }
    .hero__card-sub {
      margin: 0 0 0.15rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.1rem;
      color: #c0473a;
      letter-spacing: 0.04em;
    }
    .hero__card-title {
      margin: 0 0 0.7rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2.4rem;
      font-weight: 700;
      line-height: 1.1;
      color: #1a1a1a;
      letter-spacing: 0.01em;
    }
    .hero__card-date {
      margin: 0 0 1.3rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2rem;
      font-weight: 700;
      color: #1a1a1a;
      letter-spacing: 0.02em;
    }
    .hero__card-date .day {
      font-size: 1rem;
      font-weight: 700;
      vertical-align: baseline;
    }
    .hero__card-desc {
      margin: 0 0 1.6rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.8rem;
      line-height: 1.85;
      color: #3a3a3a;
      letter-spacing: 0.02em;
    }
    .hero__card-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      padding: 0.8rem 1.4rem;
      background: #111;
      color: #fff;
      text-decoration: none;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      border-radius: 3px;
      transition: background 0.2s ease;
    }
    .hero__card-cta:hover { background: #c0473a; }
    .hero__card-cta .arrow {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.7);
      font-size: 0.7rem;
    }

    /* 装飾テープ（破れ目に重なる位置に貼る） */
    .hero__tape {
      position: absolute;
      z-index: 20;
      bottom: 3%; left: -30px;
      width: 130px;
      transform: rotate(-9deg);
      opacity: 0.9;
      pointer-events: none;
    }
    .hero__tape img { width: 100%; height: auto; display: block; }
    /* PCではテープを大きく */
    @media (min-width: 769px) {
      .hero__tape { width: 180px; left: -40px; }
    }

    /* =========================================================
       PART 3 — About（MCD MIXとは？）破れた上端で Hero と繋ぐ
       ========================================================= */
    .about {
      position: relative;
      z-index: 6;
      /* 白背景はここに置かない（破れ紙の透明部分からコラージュを見せるため） */
      margin-top: -16vw;          /* 破れ紙をコラージュに重ねる（カードのボタンに被らない量） */
    }
    /* 破れエッジ画像（torn-solid.png：上=透明→裂け目→白い本体で終わる） */
    .about__torn {
      position: relative;
      z-index: 1;
      line-height: 0;
      margin-bottom: -1px;
    }
    .about__torn img {
      width: 112%;
      margin-left: -4%;
      height: auto;
      display: block;
    }
    /* 白い本体（torn-thin の白い下端に密着、白はCSSで伸ばす） */
    .about__inner {
      position: relative;
      /* z-index を指定しない＝スタッキングコンテキストを作らない（中の文字を外に出せる） */
      background: #ffffff;
      margin-top: -1px;
      padding: 0.5rem 2rem 6rem;
    }
    .about__container {
      position: relative;
      z-index: 5;            /* 文字をトレーシングペーパー(4)より手前へ。innerが文脈を作らないので有効 */
      max-width: 1000px;
      margin: 0 auto;
    }
    .about__title {
      position: relative;
      z-index: 6;            /* transformでスタッキングコンテキスト化するため明示的に手前へ */
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2rem;
      font-weight: 700;
      color: #1a1a1a;
      letter-spacing: 0.02em;
      margin: 0 0 1.8rem;
      /* 本文と同じ左位置から始め、左基点でほんの少し傾ける */
      text-align: left;
      transform: rotate(0.5deg);
      transform-origin: left bottom;
    }
    .about__title-suffix {
      font-size: 0.72em;   /* 「とは？」だけ少し小さく */
    }
    .about__body p {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.92rem;
      line-height: 2.1;
      color: #2a2a2a;
      letter-spacing: 0.02em;
      margin: 0 0 1.4rem;
    }
    .about__more {
      display: inline-flex;
      align-items: center;
      gap: 0.7rem;
      margin-top: 1.5rem;
      padding: 0.85rem 2rem;
      border: 1px solid #1a1a1a;
      border-radius: 999px;
      background: #ffffff;
      color: #1a1a1a;
      text-decoration: none;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.85rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      transition: background 0.2s ease, color 0.2s ease;
    }
    /* ボタンを右寄せにする（親をflex化） */
    .about__more-wrap {
      display: flex;
      justify-content: flex-end;
    }
    .about__more:hover { background: #1a1a1a; color: #fff; }
    .about__more .arrow { font-size: 0.9rem; }

    /* プチプチ素材：MCD MIXとは？ の右下に装飾（右端に詰める） */
    .about__bubble {
      position: absolute;
      z-index: 2;            /* 下端の破れ紙(z-index 1)より手前に */
      right: 0;
      bottom: -42%;
      width: 220px;
      height: auto;
      opacity: 0.7;
      pointer-events: none;
      mix-blend-mode: multiply;
      filter: drop-shadow(4px 6px 8px rgba(0,0,0,0.28));
    }

    /* トレーシングペーパー（Hero〜About の境目に半透明で重ねる） */
    .about__tracing {
      position: absolute;
      z-index: 4;
      top: 5vw;
      left: -3%;
      width: 70%;
      height: auto;
      transform: rotate(-3deg);
      pointer-events: none;
      mix-blend-mode: normal;
      opacity: 0.85;   /* 少しだけ薄く */
      filter: drop-shadow(3px 5px 7px rgba(0,0,0,0.18));   /* 軽いドロップシャドウ */
    }

    /* About 下端の破れ目（白い本体 → 破れ → 下の Event クリーム地） */
    .about__torn-bottom {
      position: relative;
      z-index: 1;
      line-height: 0;
      margin-top: -1px;
      transform: scaleY(-1);   /* 上下反転で「白が上・破れが下」に */
    }
    .about__torn-bottom img {
      width: 112%;
      margin-left: -4%;
      height: auto;
      display: block;
    }

    /* =========================================================
       PART 4 — Event スライダー（カンプ準拠：帯タイトル＋画像オーバーレイ）
       ========================================================= */
    .event {
      position: relative;
      z-index: 5;
      background: transparent;   /* body の連続グリッドを透かす */
      margin-top: -1px;
      padding: 1rem 0 5rem;
    }
    .event__inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2rem;
    }
    .event__head { margin-bottom: 2rem; }
    .event__title {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2.2rem;
      font-weight: 700;
      color: #1a1a1a;
      margin: 0;
      letter-spacing: 0.04em;
    }
    .event__slider {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .event__viewport {
      overflow: hidden;
      flex: 1;
    }
    .event__track {
      display: flex;
      gap: 2.2rem;
      transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    }
    .event__card {
      flex: 0 0 auto;
      min-width: 0;
    }
    /* .reveal の transition に上書きされないよう特異度を上げ、width(拡大) も含める */
    article.event__card {
      transition: width 0.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.7s ease, transform 0.7s ease;
    }
    /* タイトル帯（画像の上に配置・被らない。グリッド無しのベタ地） */
    .event__card-title {
      margin: 0 2.4rem 0 0;   /* 右端を画像より内側にして少しズレを作る */
      background: #F6EEE2;
      border: 1.5px solid #3a2a1a;
      padding: 0.6rem 0.9rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: #1a1a1a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* 画像（グレーのプレースホルダー） */
    .event__figure {
      position: relative;
      aspect-ratio: 16 / 11;
      background: #c9c9c9;
      margin-top: -1.5px;   /* タイトル帯の下線と画像の上線を重ねて二重線を防ぐ */
      display: flex;
      align-items: center;
      justify-content: center;
      color: #6f6f6f;
      font-size: 0.95rem;
      letter-spacing: 0.06em;
      border: 1.5px solid #3a2a1a;
      overflow: hidden;   /* ホバー時のズームを枠内にクリップ */
    }
    .event__figure img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.45s ease;
    }
    /* サムネイル全体ホバーで画像を少しアップ */
    .event__figure:hover img { transform: scale(1.06); }
    /* 年・地名（画像の左下に重なる） */
    .event__card-meta {
      position: absolute;
      left: 0.7rem;
      bottom: 0.6rem;
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.95rem;
      color: #1a1a1a;
      letter-spacing: 0.02em;
    }
    /* リンク／ホバー領域をサムネイル全体に拡張（透明オーバーレイ） */
    .event__card-link {
      position: absolute;
      inset: 0;
      z-index: 2;
      font-size: 0;          /* テキスト「↗」を隠す（矢印は ::after で描画） */
      text-decoration: none;
    }
    /* 右下の黒い矢印ボタン（見た目は従来どおり） */
    .event__card-link::after {
      content: "↗";
      position: absolute;
      right: 0; bottom: 0;
      width: 54px; height: 54px;
      background: #111;
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
      transition: background 0.2s ease;
    }
    .event__card-link:hover::after { background: #c0473a; }
    /* 左右の三角矢印（スライダー外側・CSSで描く塗り三角） */
    .event__arrow {
      flex: 0 0 auto;
      width: 40px; height: 40px;
      border: none;
      background: transparent;
      padding: 0;
      display: flex; align-items: center; justify-content: center;
      transition: opacity 0.2s ease, transform 0.2s ease;
      font-size: 0;   /* グリフ文字を消してCSS三角に統一 */
    }
    .event__arrow::before {
      content: "";
      display: block;
      width: 0; height: 0;
      border-top: 11px solid transparent;
      border-bottom: 11px solid transparent;
    }
    .event__arrow--prev::before { border-right: 16px solid #1a1a1a; }
    .event__arrow--next::before { border-left: 16px solid #1a1a1a; }
    .event__arrow:hover { transform: scale(1.15); }
    .event__arrow:disabled { opacity: 0.25; cursor: default; }
    .event__arrow:disabled:hover { transform: none; }

    /* PC：左に来たカード（アクティブ）を大きく、他を小さく */
    @media (min-width: 769px) {
      .event__card { width: 38%; }
      .event__card.is-active { width: 58%; }
    }

    @media (max-width: 768px) {
      .event__card { width: 100%; }  /* SPは1枚見せ */
      .about__bubble { width: 170px; right: 0; bottom: 2%; }
    }

    @media (max-width: 768px) {
      .about { margin-top: -14vw; }
      .about__inner { padding: 0.5rem 1.4rem 4rem; }
      .about__title { font-size: 1.6rem; }
      .about__body p { font-size: 0.88rem; line-height: 2; }
    }

    @media (max-width: 768px) {
      .hero__card {
        /* 位置は維持（中央移動しない）。右寄せのまま幅だけ調整 */
        right: 0;
        width: min(440px, 70vw);
        padding: 2rem 1.8rem 3rem;
      }
      .hero__card-title { font-size: 1.7rem; }
      .hero__card-date { font-size: 1.5rem; }
    }

    /* =========================================================
       PART 5 — News（ルーズリーフ紙＋ピンクの紙）
       ========================================================= */
    .news {
      position: relative;
      z-index: 5;
      background: transparent;     /* body の連続グリッドを透かす */
      padding: 3rem 0 6rem;
      overflow: clip;              /* 全幅・斜めのピンク紙が下のFooterへ突き抜けないよう抑止 */
    }
    .news__inner {
      position: relative;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 2rem;
    }
    /* ピンクの紙（全幅セクション基準で右端に配置・ルーズリーフ前面に少し被せる） */
    .news__pink {
      position: absolute;
      right: -4rem;
      bottom: 0;
      top: auto;
      height: 150%;
      width: auto;
      transform: rotate(6deg);
      transform-origin: bottom right;
      z-index: 3;
      pointer-events: none;
    }
    /* ルーズリーフ紙のパネル（横いっぱい＝フルブリード＋少し傾ける） */
    .news__paper {
      position: relative;
      z-index: 2;
      width: 106vw;
      margin-left: calc(50% - 53vw);
      transform: rotate(-2deg);
    }
    .news__paper-bg {
      width: 100%;
      height: auto;
      display: block;
    }
    /* 紙の上に乗せる中身（紙の縦いっぱいに広げる） */
    .news__content {
      position: absolute;
      inset: 0;
      padding: 9% 9% 30% 17%;
      display: flex;
      flex-direction: column;
    }
    .news__title {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2.2rem;
      font-weight: 700;
      color: #1a1a1a;
      margin: 0 0 0.5rem;
      letter-spacing: 0.04em;
    }
    /* リストを縦に均等配分して紙全体を使う */
    .news__list {
      list-style: none;
      margin: 0;
      padding: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
    .news__item {
    }
    /* 各項目をリンクにできるように（年＋本文をアンカーで包む） */
    .news__item-link {
      display: flex;
      align-items: baseline;
      gap: 1.6rem;
      padding: 0.7rem 0;
      text-decoration: none;
      color: inherit;
      transition: opacity 0.2s ease;
    }
    .news__item-link:hover { opacity: 0.55; }
    .news__year {
      flex: 0 0 auto;
      width: 8em;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.95rem;
      color: #1a1a1a;
      letter-spacing: 0.02em;
    }
    .news__text {
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.85rem;
      color: #2a2a2a;
      line-height: 1.7;
    }
    .news__more-wrap {
      display: flex;
      justify-content: center;
      margin-top: 0.5rem;
    }
    .news__more {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      padding: 0.7rem 2rem;
      border: 1px solid #1a1a1a;
      border-radius: 999px;
      background: rgba(255,255,255,0.6);
      color: #1a1a1a;
      text-decoration: none;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.85rem;
      letter-spacing: 0.04em;
      transition: background 0.2s ease, color 0.2s ease;
    }
    .news__more:hover { background: #1a1a1a; color: #fff; }
    .news__more-arrow {
      font-size: 1.1rem;
      line-height: 1;
    }

    /* 文字が小さくなりすぎる狭い画面では、紙を背景にせず通常レイアウトに切替 */
    @media (max-width: 700px) {
      .news__paper-bg { min-height: 660px; object-fit: cover; }
      .news__content { padding: 14% 8% 36% 13%; }
      .news__title { font-size: 1.7rem; margin-bottom: 1rem; }
      /* 縦に間延びさせず上に寄せる */
      .news__list { flex: 0 0 auto; justify-content: flex-start; gap: 1.3rem; }
      /* 日付の下に本文を改行（縦積み） */
      .news__item-link { flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.5rem 0; }
      .news__year { width: auto; }
      .news__more-wrap { margin-top: 1.4rem; }
      .news__pink { height: 130%; right: -2rem; bottom: 0; top: auto; }
    }

    /* =========================================================
       PART 6 — Footer（ルーズリーフ台紙＋テープ＋nav＋Contact/Instagram）
       ========================================================= */
    .site-footer {
      position: relative;
      z-index: 5;
      background: transparent;     /* body の連続グリッドを透かす */
      padding: 3rem 0 4rem;
    }
    /* 全体は左寄せ／2カラム（左：台紙カード ／ 右：Contact・Instagram・ロゴ） */
    .site-footer__inner {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 5%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 5%;
    }
    /* ── 左：シンプル白紙を台紙にしたカード ── */
    .site-footer__card {
      position: relative;
      flex: 0 1 620px;
      max-width: 620px;
      min-width: 0;
    }
    .site-footer__paper {
      width: 100%;
      height: auto;
      display: block;
    }
    /* 台紙の左上に斜めに貼った半透明テープ */
    .site-footer__tape {
      position: absolute;
      z-index: 3;
      top: -58px;
      left: 50%;
      width: 104px;
      transform: translateX(-50%) rotate(-32deg);
      opacity: 0.7;
      pointer-events: none;
    }
    .site-footer__tape img { width: 100%; height: auto; display: block; }
    /* 台紙の上に乗る中身：左に縦長イラスト＋右にナビ */
    .site-footer__content {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 5%;
      padding: 7% 9%;
    }
    /* 縦長の鉛筆線画（横幅は控えめ・縦に余裕） */
    .site-footer__illust {
      flex: 0 0 auto;
      width: 22%;
      max-width: 130px;
      height: auto;
      display: block;
      align-self: center;
    }
    .site-footer__nav-list {
      list-style: none;
      margin: 0; padding: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1.6rem;
    }
    .site-footer__nav-list a {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.1rem;
      color: #1a1a1a;
      text-decoration: none;
      letter-spacing: 0.06em;
      position: relative;
    }
    .site-footer__nav-list a::after {
      content: "";
      position: absolute;
      left: 0; bottom: -3px;
      width: 100%; height: 1px;
      background: #1a1a1a;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.28s ease;
    }
    .site-footer__nav-list a:hover::after { transform: scaleX(1); }
    /* コピーライト（台紙の下端・小さめ1行） */
    .site-footer__copy {
      position: absolute;
      z-index: 2;
      left: 31%;
      right: 9%;
      bottom: 11%;
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.66rem;
      letter-spacing: 0.04em;
      color: #5a4a36;
      white-space: nowrap;
    }
    /* ── 右：Contact / Instagram（破線で上下を囲む）＋ ロゴ ── */
    .site-footer__right {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2.4rem;
    }
    .site-footer__links {
      display: flex;
      flex-direction: column;
      width: 230px;
      border-top: 2px dashed #1a1a1a;
    }
    .site-footer__link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.8rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.55rem;
      font-weight: 700;
      color: #1a1a1a;
      text-decoration: none;
      letter-spacing: 0.03em;
      padding: 0.5rem 0;
      border-bottom: 2px dashed #1a1a1a;
      transition: opacity 0.2s ease;
    }
    .site-footer__link:hover { opacity: 0.6; }
    .site-footer__link .ext { font-size: 0.7em; }
    /* リンク頭のアイコン（メール / Instagram） */
    .site-footer__link-label {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
    }
    .site-footer__icon {
      width: 1.1em;
      height: 1.1em;
      object-fit: contain;
      object-position: center;
      display: block;
      flex-shrink: 0;
    }
    /* MCD MIX 赤スタンプロゴ */
    .site-footer__logo img {
      width: 96px; height: auto; display: block;
    }

    @media (max-width: 760px) {
      /* カードの装飾（紙・テープ・イラスト・footer nav）は隠し、著作権表記だけ残す */
      .site-footer__paper, .site-footer__tape, .site-footer__content { display: none; }
      .site-footer__card { flex: none; background: none; min-height: 0; }
      .site-footer__copy {
        position: static;
        left: auto; right: auto; bottom: auto;
        margin: 0;
        text-align: center;
        white-space: normal;
        font-size: 0.62rem;
        line-height: 1.6;
      }
      .site-footer__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 1.8rem;
      }
      /* 左ロゴ・右リンクの一行 */
      .site-footer__right {
        order: -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 1.2rem;
      }
      .site-footer__logo { order: -1; }
      .site-footer__logo img { width: 84px; }
      .site-footer__links { width: auto; min-width: 178px; flex: 0 1 auto; }
      .site-footer__link { font-size: 1.2rem; }
    }

    /* =========================================================
       スクロール時のふわっと表示（PC のみ。SPは即表示）
       ========================================================= */
    @media (min-width: 769px) {
      .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s ease, transform 0.7s ease;
        will-change: opacity, transform;
      }
      .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
      }
    }
    /* =========================================================
       Event 一覧ページ（共通nav/footer・グリッド背景・カードはスライダー流用）
       ========================================================= */
    .page-head {
      max-width: 1100px;
      margin: 0 auto;
      padding: 3.5rem 2rem 1.5rem;
    }
    .page-title {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2.6rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      margin: 0 0 0.5rem;
      color: #1a1a1a;
    }
    .page-title .dot { color: #1a1a1a; }
    .page-sub {
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.9rem;
      color: #5a4a36;
      letter-spacing: 0.04em;
      line-height: 1.8;
    }
    .event-list-section {
      position: relative;
      z-index: 5;
      padding: 1.5rem 0 6rem;
    }
    .event-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3rem 2.2rem;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2rem;
    }
    /* スライダーの幅指定(38%/58%)を打ち消し、グリッドのセル幅いっぱいに */
    .event-list .event__card { width: 100%; }
    @media (max-width: 900px) {
      .event-list { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1.8rem; }
      .page-head { padding: 3rem 1.5rem 1.2rem; }
    }
    @media (max-width: 560px) {
      .event-list { grid-template-columns: 1fr; gap: 2.2rem; }
      .page-title { font-size: 2.1rem; }
    }

    .breadcrumb {
      max-width: 1100px; margin: 0 auto; padding: 0.7rem 2rem 0.2rem;
      display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem;
      font-size: 0.78rem; color: #6a5a45; letter-spacing: 0.04em;
    }
    .breadcrumb a { color: inherit; text-decoration: none; }
    .breadcrumb a:hover { opacity: 0.6; }
    .breadcrumb__sep { color: #b0a48d; flex: 0 0 auto; }
    /* =========================================================
       About ページ（共通nav/footer・グリッド背景／画像アセット流用）
       ========================================================= */
    .about-hero { position: relative; z-index: 5; height: 280px; overflow: hidden; background: #e9e1d0; }
    .about-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }

    /* MCD MIXとは？（白カード） */
    .about-intro { position: relative; z-index: 5; padding: 3.5rem 0 3rem; }
    .about-intro__card { background: #fff; max-width: 1100px; margin: 0 auto; padding: 3rem 2rem 3.5rem; box-shadow: 0 2px 26px rgba(0,0,0,0.05); }
    .about-intro__title { font-size: 1.9rem; font-weight: 700; color: #1a1a1a; margin: 0 0 1.5rem; letter-spacing: 0.04em; }
    .about-intro__body p { margin: 0 0 0.9rem; font-size: 0.92rem; line-height: 1.95; color: #2a2a2a; }

    /* 代表ご挨拶 */
    .about-rep { position: relative; z-index: 5; padding: 3.5rem 0 5rem; overflow: clip; }
    .about-rep__pink { position: absolute; left: -2.5rem; top: 1rem; bottom: auto; height: 62%; transform: rotate(13deg); transform-origin: top left; z-index: 1; pointer-events: none; }
    .about-rep__inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
    .about-rep__title { font-size: 1.9rem; font-weight: 700; color: #1a1a1a; letter-spacing: 0.04em; margin: 0 0 2rem; }
    .about-rep__cols { display: flex; gap: 3rem; align-items: flex-start; flex-wrap: wrap; }
    .about-rep__photoblock { flex: 0 0 auto; width: 220px; text-align: center; }
    .about-rep__photo { width: 100%; display: block; }
    .about-rep__photo img { width: 100%; height: auto; display: block; }
    .about-rep__name { margin: 0 0 1.2rem; font-size: 1.2rem; font-weight: 700; color: #1a1a1a; letter-spacing: 0.04em; }
    .about-rep__name .en { display: inline-block; margin-left: 0.7rem; font-size: 0.8rem; font-weight: 500; color: #6a5a45; letter-spacing: 0.08em; }
    .about-rep__body { flex: 1 1 380px; }
    .about-rep__greeting { margin: 0 0 2rem; font-size: 0.92rem; line-height: 1.95; color: #2a2a2a; }
    .about-rep__career { list-style: none; margin: 0 0 1.8rem; padding: 0; border-top: 1px solid rgba(60,42,26,0.3); }
    .about-rep__career li { display: flex; gap: 1.5rem; align-items: baseline; padding: 0.8rem 0.2rem; border-bottom: 1px solid rgba(60,42,26,0.3); }
    .about-rep__year { flex: 0 0 auto; width: 7em; font-weight: 700; color: #1a1a1a; font-size: 0.9rem; }
    .about-rep__desc { margin: 0; font-size: 0.9rem; color: #2a2a2a; line-height: 1.7; }
    .about-rep__btnwrap { text-align: right; }
    .about-rep__btn { display: inline-flex; align-items: center; gap: 1rem; background: #111; color: #fff; text-decoration: none; padding: 0.7rem 1.7rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700; transition: background 0.2s ease; }
    .about-rep__btn:hover { background: #c0473a; }

    @media (max-width: 768px) {
      .about-hero { height: 180px; }
      .about-intro { padding: 2.5rem 0 2rem; }
      .about-intro__card { padding: 2rem 1.4rem 2.4rem; }
      .about-intro__title, .about-rep__title { font-size: 1.5rem; }
      .about-rep__pink { display: none; }
      .about-rep__cols { gap: 1.8rem; }
      .about-rep__photoblock { width: 180px; margin: 0 auto; }
      .about-rep__career li { flex-direction: column; gap: 0.2rem; }
      .about-rep__year { width: auto; }
    }

  
/* ===================== from mcd-mix-top.html ===================== */

    /* =========================================================
       BASE（仮）— 後で base.css として切り出します
       ========================================================= */
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    html { overflow-x: clip; }   /* 破れ紙108%幅やテープ左見切れによる横スクロールを抑止（clipでstickyを壊さない） */
    /* リンクにもデフォルト（黒塗り）のカスタムカーソル */
    a {
      cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2222%22%20height%3D%2226%22%20viewBox%3D%220%200%2089.85%20104.5%22%3E%3Cpolygon%20points%3D%221.58%202.24%2026.18%20102.34%2051.15%2072.47%2087.65%2058.95%201.58%202.24%22%20fill%3D%22%23211815%22%20stroke%3D%22%23fff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22/%3E%3C/svg%3E") 2 2, pointer;
    }
    /* ボタンの上では黒白反転カーソル（白塗り＋黒縁） */
    .site-header__cta, .hero__card-cta, .about__more, .news__more,
    .event__card-link, .event__arrow, button, [role="button"] {
      cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2222%22%20height%3D%2226%22%20viewBox%3D%220%200%2089.85%20104.5%22%3E%3Cpolygon%20points%3D%221.58%202.24%2026.18%20102.34%2051.15%2072.47%2087.65%2058.95%201.58%202.24%22%20fill%3D%22%23fff%22%20stroke%3D%22%23211815%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22/%3E%3C/svg%3E") 2 2, pointer;
    }
    body {
      background-color: #F6EEE2;
      /* ページ共通の方眼グリッド（白い紙の下〜スライダーまで連続して見える） */
      background-image:
        linear-gradient(rgba(150, 120, 90, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150, 120, 90, 0.10) 1px, transparent 1px);
      background-size: 26px 26px;
      min-height: 100vh;
      overflow-x: clip;
      font-family: "Noto Sans JP", sans-serif;
      color: #1a1a1a;
      /* カスタムマウスカーソル（SVG・先端を基点に） */
      cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2222%22%20height%3D%2226%22%20viewBox%3D%220%200%2089.85%20104.5%22%3E%3Cpolygon%20points%3D%221.58%202.24%2026.18%20102.34%2051.15%2072.47%2087.65%2058.95%201.58%202.24%22%20fill%3D%22%23211815%22%20stroke%3D%22%23fff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22/%3E%3C/svg%3E") 2 2, auto;
    }

    /* =========================================================
       PART 1 — Header / Top Navigation
       ========================================================= */
    .site-header {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      width: 100%;
      background: #fffdf2;
      overflow: visible;
    }
    .site-header__inner {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      width: 100%;
      padding: 0.6rem 2rem;
    }
    .site-header__logo {
      position: absolute;
      left: 2rem;
      /* ヘッダー下端を基準に、ロゴ高さの30%だけ下へはみ出させる（高さ92px → 約28px下に出る） */
      bottom: -28px;
      display: block;
      flex-shrink: 0;
      line-height: 0;
      z-index: 110;
    }
    .site-header__logo img { display: block; width: 92px; height: auto; object-fit: contain; }
    /* ロゴが absolute になった分、nav 側がロゴ幅に被らないよう左に余白を確保 */
    .site-header__inner { padding-left: calc(2rem + 80px + 1.5rem); }
    .site-header__nav { flex: 1 1 auto; display: flex; justify-content: center; }
    .site-header__nav-list {
      display: flex; align-items: center; gap: 2.5rem;
      margin: 0; padding: 0; list-style: none;
    }
    .site-header__nav-list a {
      position: relative;
      display: inline-block; text-decoration: none; color: #1a1a1a;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.05rem; font-weight: 500; letter-spacing: 0.04em;
      padding-bottom: 4px;
    }
    .site-header__nav-list a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1.5px;
      background: #1a1a1a;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.28s ease;
    }
    .site-header__nav-list a:hover::after { transform: scaleX(1); }
    .site-header__cta {
      flex-shrink: 0; display: inline-block; padding: 0.85rem 1.5rem;
      background: #111; color: #fff; text-decoration: none;
      font-family: "Noto Sans JP", sans-serif; font-size: 0.85rem;
      font-weight: 700; letter-spacing: 0.04em; white-space: nowrap;
      border-radius: 3px; transition: background 0.2s ease;
    }
    .site-header__cta:hover { background: #c0473a; }
    /* ハンバーガーボタン（PCでは非表示） */
    .site-header__burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 40px;
      height: 40px;
      padding: 9px;
      margin-left: auto;
      background: transparent;
      border: none;
      cursor: pointer;
      z-index: 120;
    }
    .site-header__burger span {
      display: block;
      width: 100%;
      height: 2px;
      background: #1a1a1a;
      border-radius: 2px;
      transition: transform 0.25s ease, opacity 0.2s ease;
    }
    .site-header.is-open .site-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .site-header.is-open .site-header__burger span:nth-child(2) { opacity: 0; }
    .site-header.is-open .site-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    /* SPメニューのフェードイン */
    @keyframes spMenuFade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes spItemRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @media (max-width: 860px) {
      .site-header__inner { padding: 0.6rem 1.25rem; padding-left: calc(1.25rem + 78px + 1rem); }
      .site-header__burger { display: inline-flex; }
      /* 閉じている時は nav と CTA を隠す */
      .site-header__nav, .site-header__cta { display: none; }
      /* 開いた時：全画面オーバーレイ（ロゴ左・nav左寄せ・CTA下・×右上） */
      .site-header.is-open {
        position: fixed;
        inset: 0;
        height: 100vh;
        height: 100dvh;
        background: #F6EEE2;
        z-index: 300;
        overflow-y: auto;
        animation: spMenuFade 0.3s ease both;
      }
      .site-header.is-open .site-header__inner {
        display: grid;
        grid-template-columns: auto auto;
        grid-auto-rows: min-content;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 1.8rem 3rem;
        width: 100%;
        height: 100%;
        padding: 2rem 1.5rem;
      }
      .site-header.is-open .site-header__logo {
        position: static;
        grid-column: 1;
        grid-row: 1 / 3;
        justify-self: center;
      }
      .site-header.is-open .site-header__logo img { width: 118px; }
      .site-header.is-open .site-header__nav { display: flex; grid-column: 2; grid-row: 1; }
      .site-header.is-open .site-header__nav-list { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
      .site-header.is-open .site-header__nav-list a { font-size: 1.55rem; }
      .site-header.is-open .site-header__cta { display: inline-flex; grid-column: 2; grid-row: 2; justify-self: start; }
      /* 項目をふわっと順番に表示 */
      .site-header.is-open .site-header__nav-list li,
      .site-header.is-open .site-header__cta { animation: spItemRise 0.4s ease both; }
      .site-header.is-open .site-header__nav-list li:nth-child(1) { animation-delay: 0.08s; }
      .site-header.is-open .site-header__nav-list li:nth-child(2) { animation-delay: 0.14s; }
      .site-header.is-open .site-header__nav-list li:nth-child(3) { animation-delay: 0.20s; }
      .site-header.is-open .site-header__nav-list li:nth-child(4) { animation-delay: 0.26s; }
      .site-header.is-open .site-header__cta { animation-delay: 0.32s; }
      .site-header.is-open .site-header__burger {
        position: fixed;
        top: 1.25rem;
        right: 1.4rem;
        transform: scale(1.3);
        transform-origin: top right;
      }
    }
    @media (max-width: 560px) {
      .site-header__logo img { width: 60px; }
      .site-header__logo { bottom: -18px; left: 1.25rem; }
      .site-header__inner { padding-left: calc(1.25rem + 60px + 0.85rem); }
    }

    /* =========================================================
       PART 2 — Hero（100vh：コラージュ背景 + イベントカード + 破れ目）
       ========================================================= */
    .hero {
      position: relative;
      height: 100vh;
      min-height: 560px;
      overflow: visible;
      background: #e9e1d0;
    }
    /* コラージュは clip したいので bg だけ overflow hidden */
    .hero__clip {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 1;
    }

    /* 背景コラージュ */
    .hero__bg {
      position: absolute;
      inset: 0;
      z-index: 1;
    }
    .hero__bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 18%;
      display: block;
    }

    /* 右側イベントカード（下げて縦に伸ばす） */
    .hero__card {
      position: absolute;
      z-index: 2;
      top: 40%;
      right: 0;
      bottom: 0;
      width: min(440px, 46vw);
      background-color: #F6EEE2;
      /* 方眼ノート風の罫線（クリーム地の上に薄いグリッド） */
      background-image:
        linear-gradient(rgba(150, 120, 90, 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150, 120, 90, 0.13) 1px, transparent 1px);
      background-size: 22px 22px;
      background-position: -1px -1px;
      padding: 3rem 2.6rem 6rem;   /* 下に伸ばす（下端が紙の手前まで） */
      box-shadow: -6px 8px 30px rgba(0,0,0,0.07);
    }
    .hero__card-sub {
      margin: 0 0 0.15rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.1rem;
      color: #c0473a;
      letter-spacing: 0.04em;
    }
    .hero__card-title {
      margin: 0 0 0.7rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2.4rem;
      font-weight: 700;
      line-height: 1.1;
      color: #1a1a1a;
      letter-spacing: 0.01em;
    }
    .hero__card-date {
      margin: 0 0 1.3rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2rem;
      font-weight: 700;
      color: #1a1a1a;
      letter-spacing: 0.02em;
    }
    .hero__card-date .day {
      font-size: 1rem;
      font-weight: 700;
      vertical-align: baseline;
    }
    .hero__card-desc {
      margin: 0 0 1.6rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.8rem;
      line-height: 1.85;
      color: #3a3a3a;
      letter-spacing: 0.02em;
    }
    .hero__card-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      padding: 0.8rem 1.4rem;
      background: #111;
      color: #fff;
      text-decoration: none;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      border-radius: 3px;
      transition: background 0.2s ease;
    }
    .hero__card-cta:hover { background: #c0473a; }
    .hero__card-cta .arrow {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.7);
      font-size: 0.7rem;
    }

    /* 装飾テープ（破れ目に重なる位置に貼る） */
    .hero__tape {
      position: absolute;
      z-index: 20;
      bottom: 3%; left: -30px;
      width: 130px;
      transform: rotate(-9deg);
      opacity: 0.9;
      pointer-events: none;
    }
    .hero__tape img { width: 100%; height: auto; display: block; }
    /* PCではテープを大きく */
    @media (min-width: 769px) {
      .hero__tape { width: 180px; left: -40px; }
    }

    /* =========================================================
       PART 3 — About（MCD MIXとは？）破れた上端で Hero と繋ぐ
       ========================================================= */
    .about {
      position: relative;
      z-index: 6;
      /* 白背景はここに置かない（破れ紙の透明部分からコラージュを見せるため） */
      margin-top: -16vw;          /* 破れ紙をコラージュに重ねる（カードのボタンに被らない量） */
    }
    /* 破れエッジ画像（torn-solid.png：上=透明→裂け目→白い本体で終わる） */
    .about__torn {
      position: relative;
      z-index: 1;
      line-height: 0;
      margin-bottom: -1px;
    }
    .about__torn img {
      width: 112%;
      margin-left: -4%;
      height: auto;
      display: block;
    }
    /* 白い本体（torn-thin の白い下端に密着、白はCSSで伸ばす） */
    .about__inner {
      position: relative;
      /* z-index を指定しない＝スタッキングコンテキストを作らない（中の文字を外に出せる） */
      background: #ffffff;
      margin-top: -1px;
      padding: 0.5rem 2rem 6rem;
    }
    .about__container {
      position: relative;
      z-index: 5;            /* 文字をトレーシングペーパー(4)より手前へ。innerが文脈を作らないので有効 */
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2rem;
    }
    .about__title {
      position: relative;
      z-index: 6;            /* transformでスタッキングコンテキスト化するため明示的に手前へ */
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2rem;
      font-weight: 700;
      color: #1a1a1a;
      letter-spacing: 0.02em;
      margin: 0 0 1.8rem;
      /* 本文と同じ左位置から始め、左基点でほんの少し傾ける */
      text-align: left;
      transform: rotate(0.5deg);
      transform-origin: left bottom;
    }
    .about__title-suffix {
      font-size: 0.72em;   /* 「とは？」だけ少し小さく */
    }
    .about__body p {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.92rem;
      line-height: 2.1;
      color: #2a2a2a;
      letter-spacing: 0.02em;
      margin: 0 0 1.4rem;
    }
    .about__more {
      display: inline-flex;
      align-items: center;
      gap: 0.7rem;
      margin-top: 1.5rem;
      padding: 0.85rem 2rem;
      border: 1px solid #1a1a1a;
      border-radius: 999px;
      background: #ffffff;
      color: #1a1a1a;
      text-decoration: none;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.85rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      transition: background 0.2s ease, color 0.2s ease;
    }
    /* ボタンを右寄せにする（親をflex化） */
    .about__more-wrap {
      display: flex;
      justify-content: flex-end;
    }
    .about__more:hover { background: #1a1a1a; color: #fff; }
    .about__more .arrow { font-size: 0.9rem; }

    /* プチプチ素材：MCD MIXとは？ の右下に装飾（右端に詰める） */
    .about__bubble {
      position: absolute;
      z-index: 2;            /* 下端の破れ紙(z-index 1)より手前に */
      right: 0;
      bottom: -42%;
      width: 220px;
      height: auto;
      opacity: 0.7;
      pointer-events: none;
      mix-blend-mode: multiply;
      filter: drop-shadow(4px 6px 8px rgba(0,0,0,0.28));
    }

    /* トレーシングペーパー（Hero〜About の境目に半透明で重ねる） */
    .about__tracing {
      position: absolute;
      z-index: 4;
      top: 5vw;
      left: -3%;
      width: 70%;
      height: auto;
      transform: rotate(-3deg);
      pointer-events: none;
      mix-blend-mode: normal;
      opacity: 0.85;   /* 少しだけ薄く */
      filter: drop-shadow(3px 5px 7px rgba(0,0,0,0.18));   /* 軽いドロップシャドウ */
    }

    /* About 下端の破れ目（白い本体 → 破れ → 下の Event クリーム地） */
    .about__torn-bottom {
      position: relative;
      z-index: 1;
      line-height: 0;
      margin-top: -1px;
      transform: scaleY(-1);   /* 上下反転で「白が上・破れが下」に */
    }
    .about__torn-bottom img {
      width: 112%;
      margin-left: -4%;
      height: auto;
      display: block;
    }

    /* =========================================================
       PART 4 — Event スライダー（カンプ準拠：帯タイトル＋画像オーバーレイ）
       ========================================================= */
    .event {
      position: relative;
      z-index: 5;
      background: transparent;   /* body の連続グリッドを透かす */
      margin-top: -1px;
      padding: 1rem 0 5rem;
    }
    .event__inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2rem;
    }
    .event__head { margin-bottom: 2rem; }
    .event__title {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2.2rem;
      font-weight: 700;
      color: #1a1a1a;
      margin: 0;
      letter-spacing: 0.04em;
    }
    .event__slider {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .event__viewport {
      overflow: hidden;
      flex: 1;
    }
    .event__track {
      display: flex;
      align-items: flex-start;
      gap: 2.2rem;
      transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    }
    .event__card {
      flex: 0 0 auto;
      min-width: 0;
    }
    /* .reveal の transition に上書きされないよう特異度を上げ、width(拡大) も含める */
    article.event__card {
      transition: width 0.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.7s ease, transform 0.7s ease;
    }
    /* タイトル帯（画像の上に配置・被らない。グリッド無しのベタ地） */
    .event__card-title {
      margin: 0 2.4rem 0 0;   /* 右端を画像より内側にして少しズレを作る */
      background: #F6EEE2;
      border: 1.5px solid #3a2a1a;
      padding: 0.6rem 0.9rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: #1a1a1a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* 画像（グレーのプレースホルダー） */
    .event__figure {
      position: relative;
      aspect-ratio: 16 / 11;
      background: #c9c9c9;
      margin-top: -1.5px;   /* タイトル帯の下線と画像の上線を重ねて二重線を防ぐ */
      display: flex;
      align-items: center;
      justify-content: center;
      color: #6f6f6f;
      font-size: 0.95rem;
      letter-spacing: 0.06em;
      border: 1.5px solid #3a2a1a;
      overflow: hidden;   /* ホバー時のズームを枠内にクリップ */
    }
    .event__figure img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.45s ease;
    }
    /* サムネイル全体ホバーで画像を少しアップ */
    .event__figure:hover img { transform: scale(1.06); }
    /* 年・地名（画像の左下に重なる） */
    .event__card-meta {
      position: absolute;
      left: 0.7rem;
      bottom: 0.6rem;
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.95rem;
      color: #1a1a1a;
      letter-spacing: 0.02em;
    }
    /* リンク／ホバー領域をサムネイル全体に拡張（透明オーバーレイ） */
    .event__card-link {
      position: absolute;
      inset: 0;
      z-index: 2;
      font-size: 0;          /* テキスト「↗」を隠す（矢印は ::after で描画） */
      text-decoration: none;
    }
    /* 右下の黒い矢印ボタン（見た目は従来どおり） */
    .event__card-link::after {
      content: "↗";
      position: absolute;
      right: 0; bottom: 0;
      width: 54px; height: 54px;
      background: #111;
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
      transition: background 0.2s ease;
    }
    .event__card-link:hover::after { background: #c0473a; }
    /* 左右の三角矢印（スライダー外側・CSSで描く塗り三角） */
    .event__arrow {
      flex: 0 0 auto;
      width: 40px; height: 40px;
      border: none;
      background: transparent;
      padding: 0;
      display: flex; align-items: center; justify-content: center;
      transition: opacity 0.2s ease, transform 0.2s ease;
      font-size: 0;   /* グリフ文字を消してCSS三角に統一 */
    }
    .event__arrow::before {
      content: "";
      display: block;
      width: 0; height: 0;
      border-top: 11px solid transparent;
      border-bottom: 11px solid transparent;
    }
    .event__arrow--prev::before { border-right: 16px solid #1a1a1a; }
    .event__arrow--next::before { border-left: 16px solid #1a1a1a; }
    .event__arrow:hover { transform: scale(1.15); }
    .event__arrow:disabled { opacity: 0.25; cursor: default; }
    .event__arrow:disabled:hover { transform: none; }

    /* PC：左に来たカード（アクティブ）を大きく、他を小さく */
    @media (min-width: 769px) {
      .event__card { width: 38%; }
      .event__card.is-active { width: 58%; }
    }

    @media (max-width: 768px) {
      .event__card { width: 100%; }  /* SPは1枚見せ */
      .about__bubble { width: 170px; right: 0; bottom: 2%; }
    }

    @media (max-width: 768px) {
      .about { margin-top: -14vw; }
      .about__inner { padding: 0.5rem 1.4rem 4rem; }
      .about__title { font-size: 1.6rem; }
      .about__body p { font-size: 0.88rem; line-height: 2; }
    }

    @media (max-width: 768px) {
      .hero__card {
        /* 位置は維持（中央移動しない）。右寄せのまま幅だけ調整 */
        right: 0;
        width: min(440px, 70vw);
        padding: 2rem 1.8rem 3rem;
      }
      .hero__card-title { font-size: 1.7rem; }
      .hero__card-date { font-size: 1.5rem; }
    }

    /* =========================================================
       PART 5 — News（ルーズリーフ紙＋ピンクの紙）
       ========================================================= */
    .news {
      position: relative;
      z-index: 5;
      background: transparent;     /* body の連続グリッドを透かす */
      padding: 3rem 0 6rem;
      overflow: clip;              /* 全幅・斜めのピンク紙が下のFooterへ突き抜けないよう抑止 */
    }
    .news__inner {
      position: relative;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 2rem;
    }
    /* ピンクの紙（全幅セクション基準で右端に配置・ルーズリーフ前面に少し被せる） */
    .news__pink {
      position: absolute;
      right: -4rem;
      bottom: 0;
      top: auto;
      height: 150%;
      width: auto;
      transform: rotate(6deg);
      transform-origin: bottom right;
      z-index: 3;
      pointer-events: none;
    }
    /* ルーズリーフ紙のパネル（横いっぱい＝フルブリード＋少し傾ける） */
    .news__paper {
      position: relative;
      z-index: 2;
      width: 106vw;
      margin-left: calc(50% - 53vw);
      transform: rotate(-2deg);
    }
    .news__paper-bg {
      width: 100%;
      height: auto;
      display: block;
    }
    /* 紙の上に乗せる中身（紙の縦いっぱいに広げる） */
    .news__content {
      position: absolute;
      inset: 0;
      padding: 9% 9% 30% 17%;
      display: flex;
      flex-direction: column;
    }
    .news__title {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 2.2rem;
      font-weight: 700;
      color: #1a1a1a;
      margin: 0 0 0.5rem;
      letter-spacing: 0.04em;
    }
    /* リストを縦に均等配分して紙全体を使う */
    .news__list {
      list-style: none;
      margin: 0;
      padding: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
    .news__item {
    }
    /* 各項目をリンクにできるように（年＋本文をアンカーで包む） */
    .news__item-link {
      display: flex;
      align-items: baseline;
      gap: 1.6rem;
      padding: 0.7rem 0;
      text-decoration: none;
      color: inherit;
      transition: opacity 0.2s ease;
    }
    .news__item-link:hover { opacity: 0.55; }
    .news__year {
      flex: 0 0 auto;
      width: 8em;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.95rem;
      color: #1a1a1a;
      letter-spacing: 0.02em;
    }
    .news__text {
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.85rem;
      color: #2a2a2a;
      line-height: 1.7;
    }
    .news__more-wrap {
      display: flex;
      justify-content: center;
      margin-top: 0.5rem;
    }
    .news__more {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      padding: 0.7rem 2rem;
      border: 1px solid #1a1a1a;
      border-radius: 999px;
      background: rgba(255,255,255,0.6);
      color: #1a1a1a;
      text-decoration: none;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.85rem;
      letter-spacing: 0.04em;
      transition: background 0.2s ease, color 0.2s ease;
    }
    .news__more:hover { background: #1a1a1a; color: #fff; }
    .news__more-arrow {
      font-size: 1.1rem;
      line-height: 1;
    }

    /* 文字が小さくなりすぎる狭い画面では、紙を背景にせず通常レイアウトに切替 */
    @media (max-width: 700px) {
      .news__paper-bg { min-height: 660px; object-fit: cover; }
      .news__content { padding: 14% 8% 36% 13%; }
      .news__title { font-size: 1.7rem; margin-bottom: 1rem; }
      /* 縦に間延びさせず上に寄せる */
      .news__list { flex: 0 0 auto; justify-content: flex-start; gap: 1.3rem; }
      /* 日付の下に本文を改行（縦積み） */
      .news__item-link { flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.5rem 0; }
      .news__year { width: auto; }
      .news__more-wrap { margin-top: 1.4rem; }
      .news__pink { height: 130%; right: -2rem; bottom: 0; top: auto; }
    }

    /* =========================================================
       PART 6 — Footer（ルーズリーフ台紙＋テープ＋nav＋Contact/Instagram）
       ========================================================= */
    .site-footer {
      position: relative;
      z-index: 5;
      background: transparent;     /* body の連続グリッドを透かす */
      padding: 3rem 0 4rem;
    }
    /* 全体は左寄せ／2カラム（左：台紙カード ／ 右：Contact・Instagram・ロゴ） */
    .site-footer__inner {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 5%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 5%;
    }
    /* ── 左：シンプル白紙を台紙にしたカード ── */
    .site-footer__card {
      position: relative;
      flex: 0 1 620px;
      max-width: 620px;
      min-width: 0;
    }
    .site-footer__paper {
      width: 100%;
      height: auto;
      display: block;
    }
    /* 台紙の左上に斜めに貼った半透明テープ */
    .site-footer__tape {
      position: absolute;
      z-index: 3;
      top: -58px;
      left: 50%;
      width: 104px;
      transform: translateX(-50%) rotate(-32deg);
      opacity: 0.7;
      pointer-events: none;
    }
    .site-footer__tape img { width: 100%; height: auto; display: block; }
    /* 台紙の上に乗る中身：左に縦長イラスト＋右にナビ */
    .site-footer__content {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 5%;
      padding: 7% 9%;
    }
    /* 縦長の鉛筆線画（横幅は控えめ・縦に余裕） */
    .site-footer__illust {
      flex: 0 0 auto;
      width: 22%;
      max-width: 130px;
      height: auto;
      display: block;
      align-self: center;
    }
    .site-footer__nav-list {
      list-style: none;
      margin: 0; padding: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1.6rem;
    }
    .site-footer__nav-list a {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.1rem;
      color: #1a1a1a;
      text-decoration: none;
      letter-spacing: 0.06em;
      position: relative;
    }
    .site-footer__nav-list a::after {
      content: "";
      position: absolute;
      left: 0; bottom: -3px;
      width: 100%; height: 1px;
      background: #1a1a1a;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.28s ease;
    }
    .site-footer__nav-list a:hover::after { transform: scaleX(1); }
    /* コピーライト（台紙の下端・小さめ1行） */
    .site-footer__copy {
      position: absolute;
      z-index: 2;
      left: 31%;
      right: 9%;
      bottom: 11%;
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.66rem;
      letter-spacing: 0.04em;
      color: #5a4a36;
      white-space: nowrap;
    }
    /* ── 右：Contact / Instagram（破線で上下を囲む）＋ ロゴ ── */
    .site-footer__right {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2.4rem;
    }
    .site-footer__links {
      display: flex;
      flex-direction: column;
      width: 230px;
      border-top: 2px dashed #1a1a1a;
    }
    .site-footer__link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.8rem;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.55rem;
      font-weight: 700;
      color: #1a1a1a;
      text-decoration: none;
      letter-spacing: 0.03em;
      padding: 0.5rem 0;
      border-bottom: 2px dashed #1a1a1a;
      transition: opacity 0.2s ease;
    }
    .site-footer__link:hover { opacity: 0.6; }
    .site-footer__link .ext { font-size: 0.7em; }
    /* リンク頭のアイコン（メール / Instagram） */
    .site-footer__link-label {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
    }
    .site-footer__icon {
      width: 1.1em;
      height: 1.1em;
      object-fit: contain;
      object-position: center;
      display: block;
      flex-shrink: 0;
    }
    /* MCD MIX 赤スタンプロゴ */
    .site-footer__logo img {
      width: 96px; height: auto; display: block;
    }

    @media (max-width: 760px) {
      /* カードの装飾（紙・テープ・イラスト・footer nav）は隠し、著作権表記だけ残す */
      .site-footer__paper, .site-footer__tape, .site-footer__content { display: none; }
      .site-footer__card { flex: none; background: none; min-height: 0; }
      .site-footer__copy {
        position: static;
        left: auto; right: auto; bottom: auto;
        margin: 0;
        text-align: center;
        white-space: normal;
        font-size: 0.62rem;
        line-height: 1.6;
      }
      .site-footer__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 1.8rem;
      }
      /* 左ロゴ・右リンクの一行 */
      .site-footer__right {
        order: -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 1.2rem;
      }
      .site-footer__logo { order: -1; }
      .site-footer__logo img { width: 84px; }
      .site-footer__links { width: auto; min-width: 178px; flex: 0 1 auto; }
      .site-footer__link { font-size: 1.2rem; }
    }

    /* =========================================================
       スクロール時のふわっと表示（PC のみ。SPは即表示）
       ========================================================= */
    @media (min-width: 769px) {
      .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s ease, transform 0.7s ease;
        will-change: opacity, transform;
      }
      .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
      }
    }
  
/* ===================== news 詳細（single-news） ===================== */
.news-single { position: relative; z-index: 5; padding: 2.5rem 0 5rem; }
.news-single__inner { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
.news-single__date { font-size: 0.85rem; color: #6a5a45; letter-spacing: 0.04em; margin: 0 0 0.6rem; }
.news-single__title { font-size: 1.7rem; font-weight: 700; color: #1a1a1a; line-height: 1.5; margin: 0 0 1.6rem; padding: 0 0 1.4rem; border-bottom: 1px solid rgba(60,42,26,0.3); }
.news-single__thumb { margin: 0 0 1.6rem; }
.news-single__thumb img { width: 100%; height: auto; display: block; border: 1.5px solid #3a2a1a; }
.news-single__body { font-size: 0.95rem; line-height: 1.95; color: #2a2a2a; }
.news-single__body p { margin: 0 0 1rem; }
.news-single__body img { max-width: 100%; height: auto; }
.news-single__back { margin: 2.5rem 0 0; font-size: 0.9rem; }
.news-single__back a { color: #6a5a45; text-decoration: none; }
.news-single__back a:hover { opacity: 0.6; }
@media (max-width: 768px) {
  .news-single__title { font-size: 1.35rem; }
}

/* ============================================================
 * SP（〜760px）追加調整：フッター表示／スライダー見出しの折り返し
 * （末尾に置くことで既存のSP指定を上書き）
 * ============================================================ */
@media (max-width: 760px) {

  /* ---- TOPスライダー：見出しを折り返して読めるように ---- */
  .event__card-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
    margin-right: 0.8rem;
    word-break: break-word;
  }

  /* ---- フッター：紙・女の子・ナビをロゴ等の上に表示 ---- */
  .site-footer { padding: 2.5rem 0 3rem; }
  .site-footer__inner {
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
    padding: 0 6%;
  }

  /* カード（紙＋中身）を一番上に */
  .site-footer__card {
    order: 1;
    flex: none;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    position: relative;
  }

  /* 紙はカード全体の背景として敷く */
  .site-footer__paper {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 1;
  }

  /* テープは中央上に小さく */
  .site-footer__tape {
    display: block;
    top: -30px;
    width: 60px;
    z-index: 3;
  }

  /* 中身（女の子＋ナビ）：通常フロー＆紙の上 */
  .site-footer__content {
    display: flex;
    position: relative;
    inset: auto;
    z-index: 2;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8%;
    padding: 2rem 1.5rem 1.4rem;
  }
  .site-footer__illust {
    width: 26%;
    max-width: 78px;
    align-self: center;
  }
  .site-footer__nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .site-footer__nav-list a { font-size: 1.05rem; }

  /* コピーライトはカード内・中身の下に */
  .site-footer__copy {
    position: relative;
    z-index: 2;
    left: auto; right: auto; bottom: auto;
    margin: 0;
    padding: 0 1.5rem 2rem;
    text-align: center;
    white-space: normal;
    font-size: 0.6rem;
    line-height: 1.6;
  }

  /* 右側（Contact/Instagram＋ロゴ）はカードの下に */
  .site-footer__right { order: 2; gap: 1.6rem; }
}

/* =========================================================
   v2.0：よくある質問（FAQ・アコーディオン）
   全デバイス共通（表示の土台）
   ========================================================= */
.ev-faq { position: relative; z-index: 5; padding: 1rem 0 5rem; }
.ev-faq__inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
.ev-faq__list { list-style: none; margin: 0; padding: 0; }
.ev-faq__item { border-bottom: 1px solid #cfc4ac; }
.ev-faq__item:first-child { border-top: 1px solid #cfc4ac; }
.ev-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0.4rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  color: #1a1a1a;
  transition: background 0.2s ease;
}
.ev-faq__mark {
  flex: 0 0 auto;
  width: 1.7rem; height: 1.7rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.05rem; line-height: 1;
}
.ev-faq__mark--q { color: #c0473a; }
.ev-faq__mark--a { color: #8a8170; }
.ev-faq__q-text { flex: 1 1 auto; font-size: 1rem; font-weight: 600; line-height: 1.6; }
.ev-faq__icon { position: relative; width: 18px; height: 18px; flex: 0 0 auto; }
.ev-faq__icon::before, .ev-faq__icon::after {
  content: ""; position: absolute; background: #1a1a1a;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.ev-faq__icon::before { left: 0; top: 50%; width: 100%; height: 2px; transform: translateY(-50%); }
.ev-faq__icon::after  { top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); }
.ev-faq__q[aria-expanded="true"] .ev-faq__icon::after { opacity: 0; transform: translateX(-50%) scaleY(0); }
.ev-faq__a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.ev-faq__a-inner { display: flex; gap: 1rem; padding: 0 0.4rem 1.4rem; }
.ev-faq__a-text { flex: 1 1 auto; font-size: 0.92rem; line-height: 1.95; color: #2a2a2a; padding-top: 0.15rem; }
@media (max-width: 768px) {
  .ev-faq { padding: 0.5rem 0 3rem; }
  .ev-faq__q { padding: 1.05rem 0.2rem; gap: 0.7rem; }
  .ev-faq__q-text { font-size: 0.94rem; }
  .ev-faq__a-inner { padding: 0 0.2rem 1.2rem; gap: 0.7rem; }
}

/* =========================================================
   v2.0：PCホバーを「黒⇄白」反転（ボタンのみ／既存の赤ホバーは廃止）
   hover対応デバイス（PC）のみ適用。タッチ端末（スマホ）は対象外。
   ※ nav・フッターメニュー等のテキストリンクは従来のホバー（下線/淡色）のまま
   ========================================================= */
@media (hover: hover) and (pointer: fine) {

  /* --- 黒ボタン（黒地・白字）→ ホバーで白地・黒字に反転（枠線で輪郭を保持） --- */
  .site-header__cta:hover,
  .hero__card-cta:hover,
  .ev-apply__btn:hover,
  .about-rep__btn:hover {
    background: #fff;
    color: #111;
    box-shadow: inset 0 0 0 1.5px #111;
  }
  .hero__card-cta:hover .arrow { border-color: #111; color: #111; }

  /* --- イベントカード右下の黒い「→」ボックス → 白地・黒字 --- */
  .event__card-link:hover::after { background: #fff; color: #111; }

  /* --- 「詳しく読む」「もっと見る」等の枠線ボタン → 黒⇄白（赤は不使用） --- */
  .about__more:hover,
  .news__more:hover { background: #111; color: #fff; }

  /* --- FAQの質問ボタン：可読性のため淡いグレーのホバー（赤は不使用） --- */
  .ev-faq__q:hover { background: rgba(0,0,0,0.045); }
}

/* =========================================================
   v2.0.2：リンク（nav・フッターメニュー等）のカーソルも
   ボタンと同じ白塗りカーソルに統一（クリックできる要素＝白カーソル）
   ※ 何もないところ（台紙）は従来どおり黒カーソル
   ========================================================= */
a { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2222%22%20height%3D%2226%22%20viewBox%3D%220%200%2089.85%20104.5%22%3E%3Cpolygon%20points%3D%221.58%202.24%2026.18%20102.34%2051.15%2072.47%2087.65%2058.95%201.58%202.24%22%20fill%3D%22%23fff%22%20stroke%3D%22%23211815%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22/%3E%3C/svg%3E") 2 2, pointer; }

/* =========================================================
   v2.0.3：「詳しく読む / もっと見る」ボタンのデザインを統一
   （MCD MIX[.about__more] と News[.news__more] を同一仕様に）
   ========================================================= */
.about__more,
.news__more {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 2rem;
  border: 1px solid #1a1a1a;
  border-radius: 999px;
  background: #ffffff;              /* 半透明をやめ不透明な白に統一 */
  color: #1a1a1a;
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;                 /* 文字の太さを統一 */
  letter-spacing: 0.05em;
  transition: background 0.2s ease, color 0.2s ease;
}
.about__more .arrow,
.news__more-arrow {
  font-size: 1rem;                  /* 矢印サイズを統一 */
  line-height: 1;
}

/* =========================================================
   v2.0.3：ヒーローのCVボタンが下部に隠れない対策（iOS Safari 100vh）
   ========================================================= */
.hero { height: 100svh; }           /* 未対応ブラウザは上の height:100vh にフォールバック */
@media (max-width: 768px) {
  /* CTA「詳しくはこちら」を少し上げ、下部バー/次セクションと重ならないように */
  .hero__card { padding-bottom: 6rem; }
}

/* =========================================================
   v2.0.13：対象のコンテンツを1列に（出展対象／出展対象外を縦積み）
   ========================================================= */
.ev-target__cols { flex-direction: column; gap: 2.2rem; }

/* =========================================================
   v2.0.15：TOP「MCD MIXとは？」本文を読みやすい幅に
   （PCのみ：1行あたり約35〜40文字。SP版は従来のまま）
   ========================================================= */
@media (min-width: 769px) {
  .about__body p { max-width: 38em; }
}

/* =========================================================
   v2.0.18：TOP「MCD MIXとは？」を左右中央に（PCのみ・SPは従来のまま）
   見出し・本文ブロック・「詳しく読む」ボタンを中央揃え
   ========================================================= */
@media (min-width: 769px) {
  .about__title { text-align: center; transform-origin: center bottom; }
  .about__body p { margin-left: auto; margin-right: auto; }
  .about__more-wrap { justify-content: center; }
}

/* =========================================================
   v2.0.19：TOP日付の曜日（(sat)（土)等）を小さく表示
   ========================================================= */
.hero__card-dow { font-size: 0.62em; }

/* =========================================================
   v2.0.23：お問い合わせフォーム（Contact Form 7）
   入力欄・ボタンは「どのCF7フォームにも」適用。
   ラベル＋必須バッジを左に並べる場合は .mcform テンプレートを使用。
   （白いカード・見出しは固定ページ側 about-intro__card / __title）
   ========================================================= */

/* --- 入力欄・送信ボタン（CF7全般） --- */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.85rem 1.1rem;
  border: none;
  border-radius: 5px;
  background: #eeeeee;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  color: #1a1a1a;
  line-height: 1.6;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus { outline: 2px solid #1a1a1a; outline-offset: 1px; background: #fff; }
.wpcf7-form textarea { min-height: 300px; resize: vertical; display: block; }
.wpcf7-form .wpcf7-submit {
  display: inline-block;
  min-width: 320px;
  margin-top: 0.5rem;
  padding: 1.05rem 2rem;
  border: none;
  border-radius: 0;
  background: #111;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.wpcf7-form .wpcf7-submit:hover { opacity: 0.85; }
/* 送信中・送信後・無効化などどの状態でも黒地・白字を維持（真っ白防止） */
.wpcf7-form .wpcf7-submit:focus,
.wpcf7-form .wpcf7-submit:active,
.wpcf7-form .wpcf7-submit:disabled,
.wpcf7-form.submitting .wpcf7-submit,
.wpcf7-form.sent .wpcf7-submit,
.wpcf7-form.failed .wpcf7-submit,
.wpcf7-form.invalid .wpcf7-submit {
  background: #111 !important;
  color: #fff !important;
}
.wpcf7-form .wpcf7-submit:disabled { opacity: 0.6; cursor: default; }
.wpcf7-spinner { display: block; margin: 0.8rem auto 0; }
.wpcf7-response-output { margin: 1.4rem 0 0 !important; padding: 0.9rem 1.1rem !important; border-radius: 8px; font-size: 0.9rem; text-align: center; }
.wpcf7-not-valid-tip { color: #E2007A; font-size: 0.8rem; margin-top: 0.35rem; }

/* --- 各項目を横並び（ラベル＋必須バッジ左／入力欄右） ---
   Contact Form 7 / WordPress が行の中身を <p> で包む出力にも対応 */
.mcform { max-width: 860px; margin: 0 auto; }
.mcform__row { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.5rem; }
.mcform__row--top { align-items: flex-start; }
.mcform__row > p { display: flex; align-items: center; gap: 1rem; margin: 0; flex: 1 1 auto; min-width: 0; }
.mcform__row--top > p { align-items: flex-start; }
.mcform__label { flex: 0 0 210px; display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; font-weight: 600; color: #1a1a1a; }
.mcform__row--top .mcform__label { padding-top: 0.85rem; }
.mcform__req { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0.3em 0.9em; border: 1px solid #E2007A; border-radius: 5px; color: #E2007A; font-size: 0.68rem; font-weight: 700; line-height: 1; letter-spacing: 0.08em; }
.mcform__field { flex: 1 1 auto; min-width: 0; }
.mcform__field .wpcf7-form-control-wrap { display: block; }
.mcform__row br { display: none; }              /* CF7が入れる自動改行を打ち消す */
.mcform__submit { text-align: center; margin-top: 2.5rem; }
.mcform__submit p { margin: 0; }
@media (max-width: 768px) {
  .mcform__row, .mcform__row--top,
  .mcform__row > p, .mcform__row--top > p { display: block; }
  .mcform__label { flex: none; margin: 0 0 0.55rem; padding-top: 0; }
  .mcform__field { display: block; }
  .wpcf7-form .wpcf7-submit { min-width: 0; width: 100%; }
}

/* =========================================================
   v2.0.38：TOPの「詳細はこちら」を押せるように（見た目・重なりは元のまま）
   原因：Aboutセクション(z-index:6)がヒーローカード(z-index:2)より手前にあり、
   　　　その透明な余白部分がボタンのクリックを奪っていた。
   対策：Aboutの「箱」自体はクリックを透過させ、中身（本文・リンク・ボタン）だけ
   　　　クリックを受け取るようにする。重なり順は一切変更しない。
   ========================================================= */
.about { pointer-events: none; }
.about__torn { pointer-events: none; }
.about__inner,
.about__bubble,
.about__tracing { pointer-events: auto; }
.hero__card-cta {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}