/* ========================================
   imagi_mate LP — styles.css
   Splashtop-inspired playful / organic
   ======================================== */

/* ─── CSS 変数 ─── */
:root {
    --col-blue:   #00ADD2;
    --col-pink:   #fc6265;
    --col-yellow: #ece439;
    --col-green:  #69bf5d;
    --col-orange: #fcb42d;
    --col-violet: #8e6bff;

    --hero-bg:   var(--bg-c);
    --dark-bg:   #12121e;
    --body-bg:   #ffffff;

    /* ── 背景3パターン ── */
    --bg-a: #ffffff;   /* 白 */
    --bg-b: #f2f6fb;   /* クールグレー */
    --bg-c: #fffdf0;   /* ウォームクリーム */
    --text:      #1c1c28;
    --text-mid:  #55556a;
    --text-lite: #888898;

    --radius-lg: 2.4rem;
    --radius-card: 1.4rem;
    --shadow-card: 0 8px 32px rgba(0,0,0,0.08);

    --header-h: 68px;
    --container-w: 1440px;
    --cursor-hue: 200;
}

/* ─── リセット ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}
body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text);
    background: var(--body-bg);
    overflow-x: hidden;
}
img { display: block; width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }

/* Gutenberg ネイティブブロックの標準余白をLP用にリセット */
.header .wp-block-group,
.hero .wp-block-group,
.section .wp-block-group,
.dark-canvas .wp-block-group,
.contact-section .wp-block-group,
.footer .wp-block-group,
.showcase .wp-block-group {
    margin-block-start: 0;
    margin-block-end: 0;
}

.header .wp-block-image,
.hero .wp-block-image,
.section .wp-block-image,
.dark-canvas .wp-block-image,
.contact-section .wp-block-image,
.footer .wp-block-image,
.showcase .wp-block-image {
    margin: 0;
}

.hero .wp-block-buttons,
.section .wp-block-buttons,
.header .wp-block-buttons {
    margin-top: 0;
    margin-bottom: 0;
}

/* wp-block-library dequeue後の基本レイアウト補完 */
.wp-block-buttons {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.section .wp-block-columns,
.dark-canvas .wp-block-columns,
.contact-section .wp-block-columns,
.hero .wp-block-columns {
    margin-bottom: 0;
}

/* ─── コンテナ ─── */
.container {
    width: min(100%, var(--container-w));
    margin-inline: auto;
    padding-inline: clamp(1.2rem, 4vw, 3rem);
    position: relative;
    z-index: 2;
}

/* ─── ボタン ─── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;   /* padding は inner link に移譲 */
    border-radius: 999px;
    font-weight: 800;
    font-size: clamp(0.85rem, min(1.8vw, 2.2svh), 1.1rem);
    letter-spacing: 0.04em;
    cursor: pointer;
    border: none;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s, filter 0.18s;
    text-decoration: none;
}
/* Gutenbergの wp-block-button__link / wp-element-button デフォルトを完全リセット */
.btn .wp-block-button__link,
.btn .wp-element-button,
.btn a.wp-block-button__link,
.btn a.wp-element-button {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(0.7rem, 2svh, 1.1rem) clamp(1.6rem, 3vw, 2.8rem) !important;
    font-weight: 800 !important;
    font-size: clamp(0.85rem, min(1.8vw, 2.2svh), 1.1rem) !important;
    letter-spacing: 0.04em !important;
    cursor: pointer !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: inherit !important;
    color: inherit !important;
    background: none !important;
}
.btn:hover { transform: translateY(-5px) scale(1.05); }
.btn-primary {
    background: linear-gradient(135deg, var(--col-pink), var(--col-orange));
    color: #fff;
    box-shadow: 0 6px 22px rgba(252,98,101,0.35);
}
.btn-primary .wp-block-button__link,
.btn-primary .wp-element-button,
.btn-primary a.wp-block-button__link,
.btn-primary a.wp-element-button {
    background: linear-gradient(135deg, var(--col-pink), var(--col-orange)) !important;
    color: #fff !important;
    box-shadow: 0 6px 22px rgba(252,98,101,0.35) !important;
}
.btn-primary:hover { box-shadow: 0 10px 32px rgba(252,98,101,0.48); }
.btn-outline {
    background: transparent;
    border: 2.5px solid var(--col-blue);
    color: var(--col-blue);
}
.btn-outline .wp-block-button__link,
.btn-outline .wp-element-button,
.btn-outline a.wp-block-button__link,
.btn-outline a.wp-element-button {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    border: 2.5px solid var(--col-blue) !important;
    color: var(--col-blue) !important;
    padding: clamp(0.7rem, 2svh, 1.1rem) clamp(1.6rem, 3vw, 2.8rem) !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    font-size: clamp(0.85rem, min(1.8vw, 2.2svh), 1.1rem) !important;
    letter-spacing: 0.04em !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
.btn-outline:hover { background: rgba(0,173,210,0.08); }
.btn-white {
    background: #fff;
    color: var(--text);
    box-shadow: 0 4px 18px rgba(0,0,0,0.14);
}
.btn-white .wp-block-button__link,
.btn-white .wp-element-button,
.btn-white a.wp-block-button__link,
.btn-white a.wp-element-button {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    background: #fff !important;
    color: var(--text) !important;
    padding: clamp(0.7rem, 2svh, 1.1rem) clamp(1.6rem, 3vw, 2.8rem) !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    font-size: clamp(0.85rem, min(1.8vw, 2.2svh), 1.1rem) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
.btn-white:hover { filter: brightness(0.96); }

/* ─── section共通 ─── */
.section { position: relative; padding: 5rem 0; }
.section-tag {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0.4rem 1.2rem;
    margin-bottom: 0.9rem;
}
.tag-pink   { background: rgba(252,98,101,0.12); color: #d42d56; }
.tag-blue   { background: rgba(0,173,210,0.12);  color: #0e88a5; }
.tag-orange { background: rgba(252,180,45,0.14);  color: #b86300; }
.tag-violet { background: rgba(0,173,210,0.12);  color: #0e88a5; }
.tag-green  { background: rgba(105,191,93,0.13);  color: #3a9a2b; }

.section-heading {
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: var(--text);
    text-align: center;
    position: relative;
    isolation: isolate;
}
.section-heading::before {
    content: attr(data-en);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pacifico', cursive;
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 400;
    color: inherit;
    opacity: 0.18;
    pointer-events: none;
    z-index: -1;
    white-space: nowrap;
    letter-spacing: 0.04em;
    line-height: 1;
}
/* section-tag色に対応したウォーターマーク色（各tagの実際のtexter色に小差） */
.section-header:has(.tag-blue)   .section-heading::before { color: #0e88a5; }
.section-header:has(.tag-pink)   .section-heading::before { color: #d42d56; }
.section-header:has(.tag-orange) .section-heading::before { color: #b86300; }
.section-header:has(.tag-violet) .section-heading::before { color: #0e88a5; }
.showcase-intro:has(.tag-blue)   .section-heading::before { color: #0e88a5; }
.scene-header:has(.tag-pink)     .section-heading::before { color: #d42d56; }
.contact-header:has(.tag-pink)   .section-heading::before { color: #d42d56; }

/* DARK CANVAS タイトルのウォーターマーク */
.dc-title {
    position: relative;
    isolation: isolate;
}
.dc-title::before {
    content: attr(data-en);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pacifico', cursive;
    font-size: clamp(2.5rem, 7vw, 6rem);
    font-weight: 400;
    color: #d4a000;
    opacity: 0.25;
    pointer-events: none;
    z-index: -1;
    white-space: nowrap;
    letter-spacing: 0.04em;
    line-height: 1;
}
.hd-orange { color: var(--col-orange); }
.hd-blue   { color: var(--col-blue); }
.hd-pink   { color: var(--col-pink); }
.section-lead { font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--text-mid); max-width: 100%; margin-bottom: 2.4rem; text-align: center; margin-left: auto; margin-right: auto; }

/* ─── fade-up アニメーション ─── */
.fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.55s ease, transform 0.55s ease; }
.fade-up.visible { opacity: 1; transform: none; }

/* ======================================
   HEADER
   ====================================== */
.header {
    position: sticky;
    top: 0;
    z-index: 900;
    height: var(--header-h);
    background: rgba(255,255,246,0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.nav-wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}
.brand img {
    width: auto;
    max-width: 200px;
    max-height: calc(var(--header-h) - 14px);
    height: auto;
    object-fit: contain;
}

.nav { display: flex; align-items: center; gap: 0.2rem; }
.nav a {
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-mid);
    transition: background 0.18s, color 0.18s;
}
.nav a:hover { background: rgba(0,173,210,0.1); color: var(--col-blue); }

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    z-index: 1010;
}
.menu-toggle span {
    display: block;
    width: 26px;
    height: 2.5px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.2s;
}
#lp-mobile-menu-toggle {
    display: flex;
    position: fixed;
    top: 30px;
    right: 30px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--col-pink), var(--col-orange));
    box-shadow: 0 10px 28px rgba(252,98,101,0.35);
    padding: 0;
    gap: 6px;
    align-items: center;
    justify-content: center;
    z-index: 9100;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(0.94);
    transition: opacity 0.22s ease, transform 0.22s ease, box-shadow 0.2s;
}
#lp-mobile-menu-toggle span {
    position: absolute;
    left: 50%;
    top: 50%;
    background: #fff;
    width: 24px;
    height: 2.8px;
    border-radius: 999px;
    transform-origin: center;
    transition: transform 0.24s ease, opacity 0.2s ease;
}
#lp-mobile-menu-toggle span:nth-child(1) { transform: translate(-50%, calc(-50% - 8px)); }
#lp-mobile-menu-toggle span:nth-child(2) { transform: translate(-50%, -50%); }
#lp-mobile-menu-toggle span:nth-child(3) { transform: translate(-50%, calc(-50% + 8px)); }
#lp-mobile-menu-toggle.is-visible,
body.drawer-open #lp-mobile-menu-toggle {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
#lp-mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}
#lp-mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0);
}
#lp-mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
}
body.drawer-open #lp-mobile-menu-toggle {
    box-shadow: 0 12px 30px rgba(252,98,101,0.42);
}

.menu-toggle.is-legacy-toggle,
.nav-wrap > .menu-toggle {
    display: none !important;
}

/* ======================================
   HERO
   ====================================== */
.hero {
    position: relative;
    background: var(--hero-bg);
    overflow: hidden;
    padding-top: 2rem;
    padding-bottom: 2rem;
    height: calc(100svh - var(--header-h));
    display: flex;
    align-items: center;
}

/* ── Blobs ── */
.blob {
    position: absolute;
    pointer-events: none;
    animation: floatBlob 9s ease-in-out infinite;
    z-index: 0;
    border-radius: 50%;
}
.b-yellow {
    width: clamp(320px, 42vw, 640px);
    height: clamp(320px, 42vw, 640px);
    background: rgba(236,228,57,0.55);
    top: -160px;
    left: -140px;
    animation-delay: 0s;
}
.b-pink {
    width: clamp(260px, 34vw, 520px);
    height: clamp(260px, 34vw, 520px);
    background: rgba(255,130,150,0.38);
    top: -80px;
    right: -80px;
    animation-delay: -2s;
}
.b-blue {
    width: clamp(280px, 36vw, 560px);
    height: clamp(280px, 36vw, 560px);
    background: rgba(0,173,210,0.30);
    bottom: -140px;
    right: 10%;
    animation-delay: -4s;
}
.b-green {
    width: clamp(180px, 22vw, 340px);
    height: clamp(180px, 22vw, 340px);
    background: rgba(252,180,45,0.40);
    bottom: -60px;
    left: -60px;
    animation-delay: -6s;
}
.b-orange {
    display: none;
}

@keyframes floatBlob {
    0%, 100% { transform: translateY(0) scale(1); }
    33%       { transform: translateY(-18px) scale(1.03); }
    66%       { transform: translateY(12px) scale(0.98); }
}

/* ギミック用 keyframes */
@keyframes iconGlow {
    0%, 100% { box-shadow: 0 6px 18px rgba(252,180,45,0.35); }
    50%       { box-shadow: 0 10px 30px rgba(252,98,101,0.55), 0 0 0 4px rgba(252,98,101,0.1); }
}
@keyframes qWiggle {
    0%, 100% { transform: rotate(0deg); }
    20%       { transform: rotate(-10deg); }
    40%       { transform: rotate(10deg); }
    60%       { transform: rotate(-6deg); }
    80%       { transform: rotate(6deg); }
}

/* ── Hero inner layout ── */
.hero-inner {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: minmax(460px, 0.95fr) minmax(620px, 1.05fr) !important;
    align-items: center !important;
    gap: clamp(1rem, 2vw, 2rem) !important;
    padding-right: clamp(1rem, 3vw, 2.5rem);
}
/* Gutenbergのflex上書きを強制解除 */
.hero-inner.wp-block-group,
.wp-block-group.hero-inner {
    display: grid !important;
    grid-template-columns: minmax(460px, 0.95fr) minmax(620px, 1.05fr) !important;
    align-items: center !important;
    flex-direction: unset !important;
}
/* ★ 実際の子要素は __inner-container の中にある ★ */
.hero-inner > .wp-block-group__inner-container {
    display: grid !important;
    grid-template-columns: minmax(460px, 0.95fr) minmax(620px, 1.05fr) !important;
    align-items: center !important;
    gap: clamp(1rem, 2vw, 2rem) !important;
    width: 100%;
}
.hero-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: clamp(0.5rem, 1.8svh, 1.5rem) !important;
    justify-content: center !important;
    padding-left: 0 !important;
    min-width: 0;
    max-width: 560px;
}
/* hero-copy の __inner-container もフレックスコンテナにする */
.hero-copy > .wp-block-group__inner-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: clamp(0.5rem, 1.8svh, 1.5rem) !important;
    width: 100%;
}
.hero-copy > .wp-block-group {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100%;
}
.hero-copy > .wp-block-group.catchphrase,
.hero-copy .catchphrase {
    width: fit-content !important;
    max-width: max-content;
}
/* ── ヒーローロゴ画像 ── */
.hero-logo-img {
    width: clamp(260px, 34vw, 520px);
    height: auto;
    max-height: clamp(100px, 24svh, 200px);
    display: block;
    margin-bottom: 0.2rem;
}
@keyframes waveHue {
    0%   { filter: hue-rotate(0deg)   brightness(1) saturate(1.3); }
    100% { filter: hue-rotate(360deg) brightness(1) saturate(1.3); }
}

/* ──────────────────────────────
   CATCHPHRASE
   描く。つながる。ひろがる。
   ────────────────────────────── */
.catchphrase {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.05;
    position: relative;
    overflow: visible;
    width: fit-content;
    padding: 0.12em 0.12em 0.38em;
    font-size: clamp(1.1rem, min(3vw, 4.2svh), 2.8rem);
}
.catchphrase::before,
.catchphrase::after {
    display: block;
    content: '';
    position: absolute;
    top: var(--cp-center-y, 50%);
    left: var(--cp-center-x, 50%);
    width: 0.13em;
    height: 0.13em;
    border-radius: 50%;
    border: none;
    z-index: 0;
    pointer-events: none;
    box-shadow:
             0em   -2.3em  0 0.11em rgba(252,180,45,0.72),
         1.63em  -1.63em  0 0.11em rgba(252,180,45,0.66),
          2.3em     0em   0 0.11em rgba(252,180,45,0.62),
         1.63em   1.63em  0 0.11em rgba(252,180,45,0.57),
             0em    2.3em 0 0.11em rgba(252,180,45,0.52),
        -1.63em   1.63em  0 0.11em rgba(252,180,45,0.57),
         -2.3em     0em   0 0.11em rgba(252,180,45,0.62),
        -1.63em  -1.63em  0 0.11em rgba(239,202,58,0.68);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    animation: dotRingExpand 3s cubic-bezier(0.22, 0.61, 0.36, 1) 1.5s 1 forwards;
}
.catchphrase::after {
    box-shadow:
                    0em   -3.4em   0 0.07em rgba(252,180,45,0.40),
                2.4em   -2.4em   0 0.07em rgba(252,180,45,0.36),
                3.4em     0em    0 0.07em rgba(252,180,45,0.32),
                2.4em    2.4em   0 0.07em rgba(252,180,45,0.28),
                    0em    3.4em   0 0.07em rgba(252,180,45,0.28),
             -2.4em    2.4em   0 0.07em rgba(252,180,45,0.28),
             -3.4em     0em    0 0.07em rgba(252,180,45,0.32),
             -2.4em   -2.4em   0 0.07em rgba(239,202,58,0.36);
    animation-delay: 1.9s;
}
.cp-word {
    font-size: clamp(1.1rem, min(3vw, 4.2svh), 2.8rem);
    font-weight: 900;
    display: inline-block;
    position: relative;
    padding-bottom: 8px;
    letter-spacing: -0.01em;
    z-index: 1;
}

/* 描く。―― ピンク，ペンが左から引かれる下線 */
.cp-kaku {
    color: #fc6265;
}
.cp-kaku::after {
    content: '';
    position: absolute;
    left: 0; bottom: 2px;
    width: 100%; height: 6px;
    background: #fc6265;
    border-radius: 3px;
    opacity: 0.38;
    transform-origin: left center;
    transform: scaleX(0);
    animation: cpDrawIn 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s forwards;
}

/* つながる。―― ティール，ドット連鎖下線 */
.cp-tsunagaru {
    color: #00ADD2;
    letter-spacing: 0.08em;
    position: relative;
    overflow: hidden;
}
.cp-tsunagaru::after {
    content: '';
    position: absolute;
    left: -0.08em; bottom: 2px;
    width: 100%; height: 7px;
    background: radial-gradient(circle, #00ADD2 44%, transparent 44%) left 0 / 14px 7px repeat-x;
    transform-origin: left center;
    transform: scaleX(0);
    animation: cpDrawIn 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) 0.75s forwards;
}

/* ひろがる。―― オレンジ，フェードイン */
.cp-hirogaru {
    color: #fcb42d;
    opacity: 0;
    animation: cpFadeIn 0.5s ease 1.2s forwards;
}
@keyframes dotRingExpand {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    20%  { opacity: 1; }
    55%  { transform: translate(-50%, -50%) scale(1.16); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.16); opacity: 0.42; }
}
@keyframes cpFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes cpDrawIn {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.hero-title {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    line-height: 1.15;
    padding-bottom: 1rem;
    position: relative;
    z-index: 2;
}
.hero-title-jp {
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 800;
    background: linear-gradient(
        110deg,
        #fc6265  0%,
        #EFCA3A 25%,
        #00ADD2 50%,
        #69BF5D 75%,
        #fcb42d 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}
.hero-title-en {
    font-size: clamp(1.3rem, 2.6vw, 2.2rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text);
}
.hero-title-sub {
    font-size: 1rem;
    line-height: 1.3;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.sub-who {
    font-size: clamp(0.9rem, 1.5vw, 1.3rem);
    font-weight: 700;
    color: var(--text-mid);
    letter-spacing: 0.04em;
}
.sub-punch {
    font-size: clamp(1.9rem, 4vw, 3.5rem);
    font-weight: 900;
    background: linear-gradient(110deg, var(--col-pink) 0%, var(--col-orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
    display: inline-block;
    animation: punchIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.6s both;
}
@keyframes punchIn {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.hero-badge {
    display: inline-block;
    background: var(--col-yellow);
    color: #2a2200;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    letter-spacing: 0.05em;
    margin-bottom: 0.8rem;
    position: relative;
    z-index: 2;
}
.hero-desc { color: var(--text-mid); font-size: 0.96rem; line-height: 1.9; max-width: 500px; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; position: relative; z-index: 2; }
.hero-actions .wp-block-button {
    margin: 0;
    width: auto !important;
    flex: 0 0 auto;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ── Hero media ── */
.hero-media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    width: 100%;
    max-width: 840px;
    height: calc(100svh - var(--header-h) - 4rem);
    max-height: 760px;
    min-height: 300px;
    align-self: center;
    justify-self: end;
    box-shadow: 0 32px 80px rgba(0,0,0,0.18);
}
.media-blob {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(236,228,57,0.4), rgba(252,98,101,0.3));
    border-radius: 0;
    z-index: 0;
    animation: floatBlob 11s ease-in-out infinite;
}
.hero-media img,
.hero-media video {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    display: block;
}

/* ======================================
   SHOWCASE
   ====================================== */
.showcase { padding: 3.5rem 0 4rem; background: var(--bg-b); }
.showcase-intro { text-align: center; margin-bottom: 2.5rem; }
.showcase-intro .section-lead { margin-left: auto; margin-right: auto; text-align: center; }

/* 共通セクションヘッダー（tag + heading + lead をまとめてfade-up） */
.section-header { text-align: center; margin-bottom: 2.5rem; }
.showcase-lead { margin-top: 2rem; margin-bottom: 0; }
.showcase-body {
    margin-top: 2rem;
    text-align: center;
    font-size: clamp(0.95rem, 1.4vw, 1.08rem);
    line-height: 2;
    color: var(--text-mid);
}
.thumb-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.2rem;
}
.thumb-grid.wp-block-columns > .wp-block-column {
    border-radius: var(--radius-card);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-card);
    aspect-ratio: 4/3;
}
.thumb-grid li {
    border-radius: var(--radius-card);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-card);
    aspect-ratio: 4/3;
}
.thumb-grid li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.thumb-grid.wp-block-columns > .wp-block-column .wp-block-image,
.thumb-grid.wp-block-columns > .wp-block-column .wp-block-image img {
    width: 100%;
    height: 100%;
}
.thumb-grid.wp-block-columns > .wp-block-column .wp-block-image img {
    object-fit: cover;
    transition: transform 0.4s ease;
}
.thumb-grid.wp-block-columns > .wp-block-column:hover .wp-block-image img { transform: scale(1.05); }
.thumb-grid li:hover img { transform: scale(1.05); }
.thumb-grid li span {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 1.8rem 1rem 0.85rem;
    text-align: left;
}
.thumb-grid.wp-block-columns > .wp-block-column > p {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 1.8rem 1rem 0.85rem;
    text-align: left;
    margin: 0;
}

/* ======================================
   DARK CANVAS
   ====================================== */
.dark-canvas {
    background: var(--dark-bg);
    color: #fff;
    position: relative;
    padding: 5rem 0;
}
.dc-blob {
    position: absolute;
    pointer-events: none;
    border-radius: 55% 45% 62% 38% / 48% 56% 44% 52%;
}
.dc-bl1 {
    width: 480px; height: 440px;
    background: rgba(0,173,210,0.18);
    top: 0px; left: -60px;
    animation: floatBlob 11s ease-in-out infinite;
}
.dc-bl2 {
    width: 360px; height: 320px;
    background: rgba(252,98,101,0.14);
    bottom: 0px; right: -60px;
    animation: floatBlob 13s ease-in-out infinite reverse;
}
.dc-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    text-align: center;
}
.dc-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    text-align: center;
    margin-bottom: 3.2rem;
}
.dc-lead {
    font-size: clamp(0.95rem, 1.4vw, 1.08rem);
    color: rgba(255,255,255,0.75);
    line-height: 1.9;
    text-align: center;
}
.dc-inner {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center;
    gap: 3.5rem;
}
.dc-title {
    font-size: clamp(1.7rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
}
.dc-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.2rem;
}
.dc-copy h3 {
    font-size: clamp(1.7rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
}
.dark-canvas .section-tag {
    background: rgba(255, 224, 30, 0.18);
    color: #d4a000;
}
.dc-highlight {
    color: var(--col-yellow);
    position: relative;
    display: inline-block;
}
.dc-kuten {
    color: var(--col-yellow);
}
.dc-highlight::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: radial-gradient(circle,
        rgba(236, 228, 57, 0.42) 0%,
        rgba(255, 240, 100, 0.20) 45%,
        transparent 72%);
    animation: dcGlowSpread 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
    animation-play-state: paused;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
}
.dc-highlight.glow-active::before {
    animation-play-state: running;
}
@keyframes dcGlowSpread {
    from { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.dc-copy p {
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    color: rgba(255,255,255,0.82);
    max-width: 380px;
    line-height: 1.9;
    text-align: center;
}
.dc-media img {
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/* ======================================
   PEBBLE SCENE — 石ころぐねぐね背景
   ====================================== */

/* グローバルペブルレイヤー */
main {
    position: relative;
    overflow: clip; /* ヘッダー方向へのはみ出しを防止 */
}
.global-pebbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.pebble-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
/* 共通スタイル */
.sp {
    position: absolute;
    display: block;
    border-radius: 58% 42% 53% 47% / 47% 53% 47% 53%;
    opacity: 0.55;
    animation: pebbleFloat var(--pf-dur, 9s) ease-in-out infinite var(--pf-delay, 0s),
               pebbleSquirm var(--ps-dur, 7s) ease-in-out infinite var(--ps-delay, 0s);
}
@keyframes pebbleSquirm {
    0%, 100% { border-radius: 58% 42% 53% 47% / 47% 53% 47% 53%; }
    33%      { border-radius: 52% 48% 62% 38% / 52% 48% 56% 44%; }
    66%      { border-radius: 62% 38% 48% 52% / 44% 56% 44% 56%; }
}
@keyframes pebbleFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-22px); }
}
@keyframes pebbleNumFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
/* FEATURESセクション用 石ころ */
.sp1 { width: 150px; height: 150px; background: rgba(236,228,57,0.55); top: 6%;  left: 2%;   --pf-dur:10s; --ps-dur:7s; --pf-delay:-1s; }
.sp2 { width:  90px; height:  90px; background: rgba(252,98,101,0.45); top: 15%; right: 3%;  --pf-dur: 8s; --ps-dur:6s; --pf-delay:-3s; }
.sp3 { width: 130px; height: 130px; background: rgba(0,173,210,0.35);  top: 40%; left: 1%;   --pf-dur:12s; --ps-dur:9s; --pf-delay:-5s; }
.sp4 { width:  75px; height:  75px; background: rgba(252,98,101,0.42); top: 60%; right: 6%;  --pf-dur: 9s; --ps-dur:8s; --pf-delay:-2s; }
.sp5 { width: 110px; height: 110px; background: rgba(252,180,45,0.45);  top: 78%; left: 8%;   --pf-dur:11s; --ps-dur:7s; --pf-delay:-7s; }
.sp6 { width:  58px; height:  58px; background: rgba(142,107,255,0.4);  top: 30%; right: 14%; --pf-dur: 7s; --ps-dur:5s; --pf-delay:-4s; }
.sp7 { width: 190px; height: 190px; background: rgba(252,180,45,0.22);  top: 88%; right: 2%;  --pf-dur:13s; --ps-dur:10s;--pf-delay:-9s; }
.sp8 { width:  85px; height:  85px; background: rgba(236,228,57,0.4);   top: 52%; left: 30%;  --pf-dur: 6s; --ps-dur:5s; --pf-delay:-2s; }

/* FLOWセクション用 石ころ */
.sp-f1 { width: 120px; height: 120px; background: rgba(252,180,45,0.4); top: 5%;  right: 5%;  --pf-dur:10s; --ps-dur:8s;  --pf-delay:-1s; }
.sp-f2 { width:  75px; height:  75px; background: rgba(0,173,210,0.35);top: 55%; left: 1%;   --pf-dur: 8s; --ps-dur:6s;  --pf-delay:-4s; }
.sp-f3 { width: 100px; height: 100px; background: rgba(236,228,57,0.40);top: 85%; right: 12%; --pf-dur:11s; --ps-dur:9s;  --pf-delay:-6s; }
.sp-f4 { width:  62px; height:  62px; background: rgba(252,98,101,0.4);top: 30%; left: 20%;  --pf-dur: 7s; --ps-dur:5s;  --pf-delay:-2s; }

/* SHOWCASEセクション用 石ころ */
.sp-sc1 { width: 130px; height: 130px; background: rgba(0,173,210,0.32);   top: 8%;  left: 1%;   --pf-dur:11s; --ps-dur:8s;  --pf-delay:-2s; }
.sp-sc2 { width:  72px; height:  72px; background: rgba(252,98,101,0.38);  top: 20%; right: 2%;  --pf-dur: 8s; --ps-dur:6s;  --pf-delay:-5s; }
.sp-sc3 { width: 100px; height: 100px; background: rgba(236,228,57,0.38);  top: 70%; right: 5%;  --pf-dur:12s; --ps-dur:9s;  --pf-delay:-3s; }
.sp-sc4 { width:  65px; height:  65px; background: rgba(252,180,45,0.42);  top: 85%; left: 6%;   --pf-dur: 7s; --ps-dur:5s;  --pf-delay:-7s; }

/* UP POINTSセクション用 石ころ */
.sp-up1 { width: 140px; height: 140px; background: rgba(252,180,45,0.36);  top: 5%;  right: 3%;  --pf-dur:10s; --ps-dur:8s;  --pf-delay:-1s; }
.sp-up2 { width:  80px; height:  80px; background: rgba(252,98,101,0.40);  top: 50%; left: 0%;   --pf-dur: 9s; --ps-dur:6s;  --pf-delay:-4s; }
.sp-up3 { width: 110px; height: 110px; background: rgba(0,173,210,0.30);   top: 80%; right: 8%;  --pf-dur:13s; --ps-dur:10s; --pf-delay:-6s; }
.sp-up4 { width:  60px; height:  60px; background: rgba(142,107,255,0.38); top: 25%; left: 18%;  --pf-dur: 7s; --ps-dur:5s;  --pf-delay:-2s; }

/* SCENEセクション用 石ころ */
.sp-sn1 { width: 120px; height: 120px; background: rgba(252,98,101,0.34);  top: 6%;  right: 4%;  --pf-dur:10s; --ps-dur:8s;  --pf-delay:-3s; }
.sp-sn2 { width:  85px; height:  85px; background: rgba(236,228,57,0.42);  top: 60%; left: 1%;   --pf-dur: 9s; --ps-dur:7s;  --pf-delay:-5s; }
.sp-sn3 { width: 105px; height: 105px; background: rgba(252,180,45,0.38);  top: 82%; right: 3%;  --pf-dur:12s; --ps-dur:9s;  --pf-delay:-1s; }
.sp-sn4 { width:  58px; height:  58px; background: rgba(0,173,210,0.36);   top: 30%; left: 12%;  --pf-dur: 7s; --ps-dur:5s;  --pf-delay:-8s; }

/* PRICEセクション用 石ころ */
.sp-pr1 { width: 135px; height: 135px; background: rgba(236,228,57,0.36);  top: 4%;  left: 1%;   --pf-dur:11s; --ps-dur:8s;  --pf-delay:-2s; }
.sp-pr2 { width:  78px; height:  78px; background: rgba(252,180,45,0.42);  top: 18%; right: 2%;  --pf-dur: 8s; --ps-dur:6s;  --pf-delay:-5s; }
.sp-pr3 { width:  95px; height:  95px; background: rgba(252,98,101,0.32);  top: 75%; right: 6%;  --pf-dur:10s; --ps-dur:8s;  --pf-delay:-7s; }
.sp-pr4 { width:  62px; height:  62px; background: rgba(142,107,255,0.36); top: 88%; left: 8%;   --pf-dur: 7s; --ps-dur:5s;  --pf-delay:-3s; }

/* FAQセクション用 石ころ */
.sp-fq1 { width: 125px; height: 125px; background: rgba(142,107,255,0.32); top: 5%;  right: 3%;  --pf-dur:11s; --ps-dur:8s;  --pf-delay:-1s; }
.sp-fq2 { width:  70px; height:  70px; background: rgba(0,173,210,0.38);   top: 45%; left: 0%;   --pf-dur: 8s; --ps-dur:6s;  --pf-delay:-4s; }
.sp-fq3 { width: 100px; height: 100px; background: rgba(236,228,57,0.36);  top: 80%; right: 10%; --pf-dur:12s; --ps-dur:9s;  --pf-delay:-6s; }
.sp-fq4 { width:  60px; height:  60px; background: rgba(252,98,101,0.38);  top: 22%; left: 14%;  --pf-dur: 7s; --ps-dur:5s;  --pf-delay:-9s; }

/* グローバルpebble — 固定pxで等間隔配置（左右交互、4色統一透明度） */
.gp1  { width: 220px; height: 220px; background: rgba(236,228,57,1);  opacity: 0.22; top: 1000px; left:  3%; --pf-dur:11s; --ps-dur:8s;  --pf-delay: -1s; }
.gp2  { width: 220px; height: 220px; background: rgba(255,130,150,1); opacity: 0.22; top: 1700px; right: 3%; --pf-dur: 9s; --ps-dur:7s;  --pf-delay: -4s; }
.gp3  { width: 220px; height: 220px; background: rgba(0,173,210,1);   opacity: 0.22; top: 2400px; left:  3%; --pf-dur:12s; --ps-dur:9s;  --pf-delay: -2s; }
.gp4  { width: 220px; height: 220px; background: rgba(252,180,45,1);  opacity: 0.22; top: 3100px; right: 3%; --pf-dur: 8s; --ps-dur:6s;  --pf-delay: -6s; }
.gp5  { width: 220px; height: 220px; background: rgba(236,228,57,1);  opacity: 0.22; top: 3800px; left:  3%; --pf-dur:13s; --ps-dur:10s; --pf-delay: -3s; }
.gp6  { width: 220px; height: 220px; background: rgba(255,130,150,1); opacity: 0.22; top: 4500px; right: 3%; --pf-dur: 9s; --ps-dur:7s;  --pf-delay: -7s; }
.gp7  { width: 220px; height: 220px; background: rgba(0,173,210,1);   opacity: 0.22; top: 5200px; left:  3%; --pf-dur:11s; --ps-dur:8s;  --pf-delay: -5s; }
.gp8  { width: 220px; height: 220px; background: rgba(252,180,45,1);  opacity: 0.22; top: 5900px; right: 3%; --pf-dur:10s; --ps-dur:8s;  --pf-delay: -2s; }
.gp9  { width: 220px; height: 220px; background: rgba(236,228,57,1);  opacity: 0.22; top: 6600px; left:  3%; --pf-dur:12s; --ps-dur:9s;  --pf-delay: -8s; }
.gp10 { width: 220px; height: 220px; background: rgba(255,130,150,1); opacity: 0.22; top: 7300px; right: 3%; --pf-dur: 9s; --ps-dur:6s;  --pf-delay: -4s; }
.gp11 { display: none; }
.gp12 { display: none; }
.gp13 { display: none; }
.gp14 { display: none; }

/* ======================================
   FEATURES
   ====================================== */
.features-section {
    background: var(--bg-a);
}
.features-section > .container {
    position: relative;
    z-index: 1;
}
.features-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../FEATURES.png') center / cover no-repeat;
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}

/* ── feat-list ── */
.feat-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.5rem;
    margin-top: 2.8rem;
    position: relative;
    z-index: 1;
}

/* ──────────────────────────────────
   カード本体（2列グリッド）
────────────────────────────────── */
.feat-item {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 4px 36px rgba(0,0,0,0.08);
    overflow: hidden;
}
/* ── ヘッダー（番号＋タイトル）── */
.feat-header {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 2.2rem 2rem 1.4rem 2.2rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* feat-body を透過してグリッドに乗せる */
.feat-body { display: contents !important; }

/* テキスト列 */
.feat-text {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.4rem 2rem 2.4rem 2.2rem;
}
.feat-text p { color: var(--text-mid); line-height: 1.9; font-size: 1.05rem; }

/* 画像列（両行スパン） */
.feat-img {
    grid-column: 2;
    grid-row: 1 / 3;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f5fb;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    min-height: clamp(320px, 34vw, 520px);
}
.feat-img::before { display: none; }
.feat-img > .wp-block-image,
.feat-img > figure,
.feat-img > .wp-block-image figure {
    position: absolute;
    inset: 0;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feat-img img,
.feat-img > .wp-block-image img,
.feat-img > figure img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center bottom !important;
    display: block;
    border-radius: 0;
    aspect-ratio: auto;
    transition: transform 0.5s ease;
}
.feat-item:hover .feat-img img { transform: scale(1.03); }

/* ── rev: 左右反転 ── */
.feat-item--rev .feat-header {
    grid-column: 2;
    padding: 2.2rem 2.2rem 1.4rem 2rem;
}
.feat-item--rev .feat-text {
    grid-column: 2;
    padding: 1.4rem 2.2rem 2.4rem 2rem;
}
.feat-item--rev .feat-img { grid-column: 1; }

/* ── 番号バッジ（シンプル円） ── */
.pebble-num {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    flex-shrink: 0;
    animation: none;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.pebble-num::before {
    content: '';
    position: absolute;
    inset: -10%;
    background: url('../FEATURES.png') center/contain no-repeat;
    opacity: 0.13;
    pointer-events: none;
    z-index: -1;
}
.feat-item:hover .pebble-num { transform: scale(1.1); }
.fi-blue .pebble-num {
    background: rgba(0,173,210,0.14);
    color: #00ADD2;
}
.fi-pink .pebble-num {
    background: rgba(252,98,101,0.13);
    color: #fc6265;
}
.fi-orange .pebble-num {
    background: rgba(252,180,45,0.14);
    color: #fcb42d;
}

/* ── タイトル ── */
.feat-header .feat-title,
.feat-title {
    font-size: clamp(1.3rem, 2.1vw, 1.65rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 0;
}
.fi-blue .feat-title   { color: #00ADD2; }
.fi-pink .feat-title   { color: #fc6265; }
.fi-orange .feat-title { color: #fcb42d; }

/* ── 箇条書き ── */
.feat-bullets {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-left: 0;
}
.feat-bullets li {
    position: relative;
    padding-left: 1.2rem;
    font-size: 0.95rem;
    color: var(--text-mid);
    line-height: 1.7;
}
.feat-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    animation: none;
}
.fi-blue .feat-bullets li::before   { background: #00ADD2; }
.fi-pink .feat-bullets li::before   { background: #fc6265; }
.fi-orange .feat-bullets li::before { background: #fcb42d; }

/* ======================================
   3 UP
   ====================================== */
.ups-section {
    background: var(--bg-c);
}
.ups-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem;
    margin-top: 2.5rem;
}
.up-card {
    background: var(--up-accent-bg);
    border-radius: var(--radius-card);
    border: 1.5px solid var(--up-accent-border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.32s;
    position: relative;
}
.up-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 56px rgba(0,0,0,0.14);
}
.up-card--red    { --up-accent: #fc6265; --up-accent-bg: rgba(252,98,101,0.09); --up-accent-border: rgba(252,98,101,0.28); }
.up-card--blue   { --up-accent: #00ADD2; --up-accent-bg: rgba(0,173,210,0.09); --up-accent-border: rgba(0,173,210,0.28); }
.up-card--yellow { --up-accent: #fcb42d; --up-accent-bg: rgba(252,180,45,0.09); --up-accent-border: rgba(252,180,45,0.28); }
.up-card-img {
    position: relative;
    z-index: 1;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.up-card-img .wp-block-image {
    width: 100%;
    height: 100%;
    margin: 0 !important;
}
.up-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.up-card-img .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}
.up-card:hover .up-card-img img {
    transform: scale(1.06);
}
.up-card-overlay {
    display: none;
}
.up-card-num {
    position: absolute;
    bottom: 0.1em;
    right: -0.02em;
    font-size: clamp(7rem, 11vw, 9.5rem);
    font-weight: 900;
    line-height: 0.85;
    color: var(--up-accent);
    opacity: 0.13;
    pointer-events: none;
    z-index: 0;
    letter-spacing: -0.06em;
    font-family: 'Noto Sans JP', sans-serif;
    user-select: none;
}
.up-card .up-card-num {
    font-size: clamp(7rem, 11vw, 9.5rem);
    color: var(--up-accent);
    line-height: 0.85;
    margin: 0;
}
.up-card-body {
    padding: 1.5rem 1.6rem 1.9rem;
    flex: 1;
    border-top: 3px solid var(--up-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
}
.up-card h3 {
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 900;
    color: #1c1c28;
    margin-bottom: 0.7rem;
    line-height: 1.2;
}
.up-card-body p {
    font-size: 0.93rem;
    line-height: 1.85;
    color: var(--text-mid);
    text-align: left;
    margin-top: 0.3rem;
    min-height: 5.2em;
}

/* ======================================
   USE CASE
   ====================================== */
.scene-section {
    background: var(--bg-b);
}
.scene-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.scene-inner {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 2rem;
    align-items: center;
    margin-bottom: 2.5rem;
}
.scene-text-wrap {
    text-align: center;
    width: 100%;
}
.scene-catch {
    margin-top: 1.4rem;
    margin-bottom: 0.8rem;
    font-size: clamp(2rem, 5.4vw, 4.8rem);
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fc6265;
    font-family: 'Zen Kurenaido', cursive;
}
.scene-catch.yomogi {
    font-family: 'Zen Kurenaido', cursive;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.scene-catch-sub {
    font-size: clamp(1.4rem, 3.6vw, 3.2rem);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text);
    margin-bottom: 1.4rem;
}
.scene-text {
    font-size: 1.08rem;
    line-height: 1.9;
    color: #262626;
}
.scene-media {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}
.scene-photo {
    overflow: hidden;
    border-radius: 1.6rem;
    box-shadow: 0 28px 64px rgba(0,0,0,0.18);
    transform: rotate(2deg);
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s;
    width: 100%;
    max-width: 520px;
}
.scene-photo:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 36px 80px rgba(0,0,0,0.22);
}
.scene-photo img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}
.scene-photo--main {
    border: 7px solid rgba(244, 188, 200, 0.92);
}
.scene-photo--sub { display: none; }

/* (旧定義リセット) */
.card-num-blob, .cards, .card, .card-img-wrap, .feat-blob, .feat-num-wrap { display: none; }

/* ======================================
   FLOW
   ====================================== */
.flow-section { background: var(--bg-a); }
.flow-section > .container {
    position: relative;
    z-index: 1;
}
.flow-blob {
    position: absolute;
    width: 400px; height: 360px;
    background: rgba(252,180,45,0.14);
    border-radius: 55% 45% 62% 38% / 48% 56% 44% 52%;
    top: -80px; right: -80px;
    pointer-events: none;
    animation: floatBlob 12s ease-in-out infinite;
}
.steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-top: 2rem;
    position: relative;
    z-index: 1;
}
.step {
    flex: 1;
    background: #fff;
    border-radius: var(--radius-card);
    padding: 1.8rem 1.4rem 1.6rem;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
    text-align: center;
    transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.28s;
}
.step:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 52px rgba(0,0,0,0.12);
}
.step-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
.step-icon {
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    color: #1c1c28;
    flex-shrink: 0;
}
.step-icon svg {
    width: 80px;
    height: 80px;
    fill: currentColor;
}
.step-arrow {
    width: 2.4rem;
    flex-shrink: 0;
    align-self: center;
    height: 2px;
    background: #1c1c28;
    position: relative;
    margin: 0 0.4rem;
}
.step-arrow::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #1c1c28;
}
.step-num {
    font-size: 2.6rem;
    font-weight: 800;
    color: #1c1c28;
    line-height: 1;
    flex-shrink: 0;
}
.step h3 { font-size: 1.35rem; font-weight: 800; text-align: left; }
.step p  { font-size: 0.95rem; color: var(--text-mid); line-height: 1.8; text-align: left; width: 100%; }

.after-service {
    display: flex !important;
    gap: 1.2rem;
    align-items: center;
    justify-content: flex-start;
    background: #fff;
    border-radius: var(--radius-card);
    padding: 1.6rem 2.4rem;
    margin-top: 3rem;
    margin-block-start: 3rem;
    box-shadow: var(--shadow-card);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.flow-section .after-service {
    margin-block-start: 3rem;
}
.as-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #f2f5f9;
    border-radius: 12px;
    color: #1c1c28;
    margin-top: 0.1rem;
}
.after-service h3 { font-weight: 800; margin-bottom: 0.4rem; font-size: 1.15rem; }
.after-service p  { font-size: 1rem; color: var(--text-mid); }

/* ======================================
   FAQ — new site-style design
   ====================================== */
.faq-section { background: var(--bg-b); }
.qa-list {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    border-top: 2px solid rgba(0,0,0,0.07);
}
details {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    border: none;
    border-bottom: 2px solid rgba(0,0,0,0.07);
    transition: background 0.25s;
}
details.is-open {
    background: transparent;
}
summary {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 0.6rem;
    cursor: pointer;
    font-weight: 800;
    font-size: clamp(0.95rem, 1.6vw, 1.08rem);
    list-style: none;
    user-select: none;
    transition: color 0.18s;
    line-height: 1.6;
    color: var(--text);
}
summary::-webkit-details-marker { display: none; }
summary::after {
    content: '▼';
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    background: rgba(0,0,0,0.07);
    border-radius: 50%;
    color: #555;
    font-weight: 900;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
}
details.is-open summary::after {
    transform: rotate(180deg);
    background: rgba(0,173,210,0.18);
    color: #00ADD2;
}
details:not(.is-open) summary:hover { color: var(--col-blue); }

/* JSで height を制御してアニメーション */
.qa-body {
    overflow: hidden;
    transition: height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.32s ease;
}
.qa-body > p {
    position: relative;
    padding: 0.2rem 1.2rem 1.5rem 3.8rem;
    font-size: 1rem;
    color: var(--text-mid);
    line-height: 1.9;
}
.qa-body > p::before {
    content: 'A';
    position: absolute;
    left: 0.6rem;
    top: 0.1rem;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    background: #fff;
    border: 2px solid #1a1a1a;
    color: #1a1a1a;
    font-size: 1.25rem;
    font-weight: 900;
    border-radius: 6px;
    line-height: 1;
}
.q-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    background: #00ADD2;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 900;
    border-radius: 6px;
    line-height: 1;
    margin-top: 0.05rem;
}
details:not(.is-open) summary:hover .q-badge {
    animation: qWiggle 0.42s ease both;
}

/* ======================================
   CONTACT
   ====================================== */
.contact-section { background: var(--bg-a); }
.contact-blob {
    position: absolute;
    pointer-events: none;
    border-radius: 55% 45% 60% 40% / 48% 56% 44% 52%;
}
.cb1 {
    width: 420px; height: 380px;
    background: rgba(252,98,101,0.15);
    top: -100px; right: 0;
    animation: floatBlob 10s ease-in-out infinite;
}
.cb2 {
    width: 300px; height: 260px;
    background: rgba(0,173,210,0.12);
    bottom: -60px; left: 0;
    animation: floatBlob 13s ease-in-out infinite reverse;
}
.contact-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}
.contact-grid {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: 1fr 1.4fr !important;
    gap: 4rem;
    align-items: start;
}
.contact-note {
    margin-top: 1.8rem;
    margin-bottom: 1.4rem;
    text-align: center;
    color: var(--text-mid);
    font-size: 1rem;
    line-height: 1.8;
}
.contact-info-col { display: flex; flex-direction: column; gap: 1rem; }
.contact-info { display: flex; flex-direction: column; gap: 1rem; }
.contact-info li {
    font-size: 1rem;
    color: var(--text-mid);
    line-height: 1.75;
}
.contact-info strong { color: var(--text); display: block; font-size: 0.82rem; margin-bottom: 0.2rem; }

.contact-form {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2.4rem;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.contact-form .btn,
.contact-form button.btn {
    width: 100%;
    min-height: 3.2rem;
    padding: 0.78rem 1.2rem;
    line-height: 1.4;
    font-weight: 800;
}
.contact-form label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}
.contact-form__label-text {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}
.contact-form__required-dot {
    color: #fc6265;
    font-weight: 700;
    line-height: 1;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    border: 1.5px solid rgba(0,0,0,0.12);
    border-radius: 0.7rem;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text);
    background: #fafafa;
    transition: border-color 0.2s, background 0.2s;
    resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--col-blue);
    background: #fff;
}

/* ======================================
   FOOTER
   ====================================== */
.footer {
    background: var(--dark-bg);
    color: rgba(255,255,255,0.65);
    padding: 2.2rem 0;
}
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
}
.footer-brand img { width: 250px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.footer-nav a {
    font-size: 0.82rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    color: rgba(255,255,255,0.6);
    transition: background 0.18s, color 0.18s;
}
.footer-nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.footer small { font-size: 0.78rem; }

/* ======================================
   CURSOR EFFECTS
   ====================================== */
.cursor-light,
.cursor-core { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; will-change: transform; }
.cursor-light {
    width: 120px; height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    background: radial-gradient(circle, hsla(var(--cursor-hue),100%,65%,0.13), transparent 70%);
    mix-blend-mode: screen;
    transition: width 0.22s, height 0.22s, margin 0.22s;
}
.cursor-core {
    width: 10px; height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: hsl(var(--cursor-hue, 200), 100%, 70%);
    box-shadow:
        0 0 4px  2px hsl(var(--cursor-hue, 200),100%,80%),
        0 0 10px 4px hsl(var(--cursor-hue, 200),90%,65%),
        0 0 22px 6px hsl(var(--cursor-hue, 200),80%,55%);
    transition: background 0.1s, box-shadow 0.1s, width 0.18s, height 0.18s, margin 0.18s;
}
body.is-interactive .cursor-light {
    width: 136px; height: 136px;
    margin: -68px 0 0 -68px;
}
body.is-interactive .cursor-core {
    width: 22px; height: 22px;
    margin: -11px 0 0 -11px;
}

.cursor-trail-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9990;
    overflow: hidden;
}
.trail-dot {
    position: absolute;
    width: 10px; height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: hsl(var(--trail-hue, 200), 100%, 75%);
    box-shadow:
        0 0 4px  2px hsl(var(--trail-hue, 200),100%,72%),
        0 0 10px 3px hsl(var(--trail-hue, 200),90%,60%),
        0 0 18px 5px hsl(var(--trail-hue, 200),80%,50%);
    animation: trailFade 0.75s forwards ease-out;
    pointer-events: none;
    mix-blend-mode: screen;
}
@keyframes trailFade {
    0%   { opacity: 1;   transform: scale(1); }
    100% { opacity: 0;   transform: scale(0.1); }
}
.spark {
    position: absolute;
    width: 6px; height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: hsl(var(--spark-hue, 60), 100%, 88%);
    box-shadow:
        0 0 4px  2px hsl(var(--spark-hue, 60),100%,75%),
        0 0 8px  3px hsl(var(--spark-hue, 60),80%,60%);
    animation: trailFade 0.52s forwards ease-out;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* タッチデバイスではカーソル要素を初期非表示（touchmoveで追従・表示） */
@media (pointer: coarse) {
    .cursor-light,
    .cursor-core { opacity: 0; transition: opacity 0.3s; }
}

/* アクセシビリティ: モーション低減時は石ころを止める */
@media (prefers-reduced-motion: reduce) {
    .sp, .pebble-num, .feat-bullets li::before {
        animation: none !important;
        border-radius: 55% 45% 60% 40% / 45% 55% 45% 55% !important;
    }
}

/* ======================================
   RESPONSIVE — 1100px
   ====================================== */
@media (max-width: 1100px) {
    .hero-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* ======================================
   RESPONSIVE — 960px (Tablet)
   ====================================== */
@media (max-width: 960px) {
    .dc-inner   { grid-template-columns: 1fr !important; gap: 2.5rem; }
    .dc-media   { max-width: 480px; margin: 0 auto; }
    /* feat-item を縦積みに（feat-bodyはdisplay:contentsなのでfeat-item自体を変更） */
    .feat-item {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto;
    }
    .feat-header {
        grid-column: 1;
        grid-row: 1;
        padding: 1.8rem 1.6rem 1.2rem;
    }
    .feat-text {
        grid-column: 1;
        grid-row: 2;
        padding: 1rem 1.6rem 1.8rem;
    }
    .feat-img {
        grid-column: 1;
        grid-row: 3;
        aspect-ratio: 16 / 9;
        height: auto;
        min-height: 0;
    }
    .feat-img > .wp-block-image,
    .feat-img > figure,
    .feat-img > .wp-block-image figure {
        position: static;
        inset: auto;
        width: 100%;
        height: 100%;
    }
    .feat-item--rev .feat-header {
        grid-column: 1;
        grid-row: 1;
        padding: 1.8rem 1.6rem 1.2rem;
    }
    .feat-item--rev .feat-text {
        grid-column: 1;
        grid-row: 2;
        padding: 1rem 1.6rem 1.8rem;
    }
    .feat-item--rev .feat-img {
        grid-column: 1;
        grid-row: 3;
    }
    .contact-grid { grid-template-columns: 1fr !important; }
    .ups-grid { grid-template-columns: 1fr !important; }
    .scene-inner { grid-template-columns: 1fr !important; }
    .scene-media { min-height: 0; }
    .steps { flex-direction: column; gap: 1rem; }
    .step-arrow {
        width: 2px; height: 2rem;
        flex-shrink: 0; align-self: center;
        background: linear-gradient(180deg, var(--col-orange), var(--col-pink));
        margin: 0;
    }
    .step-arrow::after {
        right: auto; top: auto;
        bottom: -1px; left: 50%;
        transform: translateX(-50%);
        border-left-color: transparent;
        border-top-color: var(--col-pink);
    }
}

/* ======================================
   RESPONSIVE — 760px (Mobile)
   ====================================== */
@media (max-width: 760px) {
    :root { --header-h: 72px; }

    /* ── ハンバーガーメニュー ── */
    .menu-toggle {
        display: flex;
        position: fixed;
        top: 10px;
        right: 10px;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--col-pink), var(--col-orange));
        box-shadow: 0 4px 16px rgba(252,98,101,0.4);
        padding: 0;
        gap: 4px;
        align-items: center;
        justify-content: center;
        z-index: 9100;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        transition: box-shadow 0.2s, transform 0.2s;
    }
    .menu-toggle.is-visible,
    body.drawer-open .menu-toggle { opacity: 1; pointer-events: auto; transform: none; }
    #lp-mobile-menu-toggle.menu-toggle {
        display: flex !important;
        width: 46px;
        height: 46px;
        top: calc(env(safe-area-inset-top, 0px) + (var(--header-h) - 46px) / 2);
        right: 20px;
    }
    #lp-mobile-menu-toggle span { width: 19px; height: 2.5px; }
    #lp-mobile-menu-toggle span:nth-child(1) { transform: translate(-50%, calc(-50% - 6px)); }
    #lp-mobile-menu-toggle span:nth-child(2) { transform: translate(-50%, -50%); }
    #lp-mobile-menu-toggle span:nth-child(3) { transform: translate(-50%, calc(-50% + 6px)); }
    #lp-mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    #lp-mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    .menu-toggle span { background: #fff; width: 19px; }
    /* ×アイコン（オープン時） */
    .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .menu-toggle[aria-expanded="true"] { box-shadow: 0 8px 26px rgba(252,98,101,0.48); }
    .nav {
        display: none !important;
    }

    .drawer-head {
        min-height: 98px;
        padding-right: 6.8rem;
    }

    /* ── セクション共通 ── */
    .section { padding: 4.5rem 0; }
    .dark-canvas { padding: 4.5rem 0; }
    .section-heading { font-size: clamp(1.4rem, 6vw, 2rem); }
    .section-lead { font-size: 0.9rem; }

    /* ── ヒーロー ── */
    .hero {
        padding-top: clamp(1.5rem, 4svh, 3rem);
        padding-bottom: clamp(1.5rem, 4svh, 3rem);
        height: auto;
        min-height: calc(100dvh - var(--header-h));
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .hero-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 0;
        padding-right: clamp(1.2rem, 4vw, 3rem);
        align-items: center;
        justify-items: center;
    }
    /* 動画：スマホでは非表示 */
    .hero-media {
        display: none;
    }
    .hero-copy {
        align-items: flex-start;
        text-align: left;
        gap: clamp(0.6rem, 1.2svh, 0.9rem);
        margin-left: 0;
        padding-left: 0;
        overflow: visible;
    }
    .hero-logo-img {
        width: min(100%, 340px);
        max-height: clamp(55px, 10svh, 100px);
        object-fit: contain;
        margin: 0;
    }
    .catchphrase {
        align-items: flex-start;
        padding-left: 0;
        overflow: visible;
        font-size: clamp(1.7rem, min(11vw, 6.5svh), 3rem);
    }
    .cp-word { font-size: clamp(1.7rem, min(11vw, 6.5svh), 3rem); }
    .hero-badge {
        font-size: clamp(0.7rem, 1.6svh, 0.82rem);
        padding: clamp(0.2rem, 0.5svh, 0.25rem) 0.9rem;
        margin-bottom: clamp(0.2rem, 0.4svh, 0.3rem);
    }
    .hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        max-width: 460px;
        gap: clamp(0.4rem, 1svh, 0.6rem);
    }
    .hero-actions .wp-block-button {
        width: auto !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }
    .hero-actions .btn {
        flex: 0 0 auto;
        text-align: left;
        padding: clamp(0.5rem, 1.4svh, 0.75rem) 1.2rem;
        min-width: 9.4rem;
        max-width: none;
    }
    .hero-actions .btn .wp-block-button__link,
    .hero-actions .btn .wp-element-button {
        white-space: nowrap !important;
        line-height: 1.35;
        text-align: center;
    }

    /* ── ショーケース ── */
    .thumb-grid { grid-template-columns: 1fr !important; gap: 0.8rem; }
    .thumb-grid li span { font-size: 0.82rem; padding: 1.2rem 0.7rem 0.6rem; }

    /* ── ダークキャンバス ── */
    .dc-inner { grid-template-columns: 1fr !important; gap: 2rem; }
    .dc-media { max-width: 480px; margin: 0 auto; }
    .dc-copy h2 { font-size: clamp(1.4rem, 6vw, 2.2rem); }
    .dc-copy { gap: 0.9rem; }
    .dc-copy p { font-size: 0.95rem; }
    .dc-copy h3 {
        font-size: clamp(1.35rem, 6vw, 2rem);
        line-height: 1.35;
        word-break: keep-all;
    }

    /* ── フィーチャー ── */
    .feat-list { gap: 2rem; }
    /* カードをフル縦積みに変更（feat-body は display:contents なので feat-item を直接変更） */
    .feat-item {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto;
    }
    .feat-header {
        grid-column: 1;
        grid-row: 1;
        gap: 0.8rem;
        padding: 1.4rem 1.2rem 1rem;
    }
    .feat-text {
        grid-column: 1;
        grid-row: 2;
        padding: 0.8rem 1.2rem 1.4rem;
        gap: 0.75rem;
    }
    .feat-img {
        grid-column: 1;
        grid-row: 3;
        aspect-ratio: 16 / 9;
        height: auto;
        min-height: 0;
    }
    .feat-img > .wp-block-image,
    .feat-img > figure,
    .feat-img > .wp-block-image figure {
        position: static;
        inset: auto;
        width: 100%;
        height: 100%;
    }
    /* rev カードも同じ縦積み順に統一 */
    .feat-item--rev .feat-header {
        grid-column: 1;
        grid-row: 1;
        padding: 1.4rem 1.2rem 1rem;
    }
    .feat-item--rev .feat-text {
        grid-column: 1;
        grid-row: 2;
        padding: 0.8rem 1.2rem 1.4rem;
    }
    .feat-item--rev .feat-img {
        grid-column: 1;
        grid-row: 3;
    }
    .pebble-num { width: 56px; height: 56px; font-size: 1.5rem; }
    .feat-title { font-size: clamp(1.1rem, 4.5vw, 1.5rem); }
    .feat-text p { font-size: 0.9rem; }
    .feat-bullets li { font-size: 0.85rem; }

    /* ── 3UP / 活用シーン ── */
    .up-card-body { padding: 1.1rem 1.2rem 1.4rem; }
    .up-card h3 { font-size: clamp(1.15rem, 5vw, 1.6rem); }
    .up-card p { font-size: 0.9rem; }
    .scene-catch { font-size: clamp(1.8rem, 11vw, 3.3rem); }
    .scene-text { font-size: 0.95rem; }
    .scene-photo--main { inset: 0 0.6rem auto 1rem; }
    .scene-photo--sub { inset: auto 1.2rem 0 0; }

    /* ── フロー ── */
    .steps { flex-direction: column; gap: 1rem; }
    .step { padding: 1.4rem 1.2rem; }
    .step-icon { width: 54px; height: 54px; }
    .step-icon svg { width: 30px; height: 30px; }
    .step-arrow {
        width: 2px; height: 2rem;
        flex-shrink: 0; align-self: center;
        background: linear-gradient(180deg, var(--col-orange), var(--col-pink));
        margin: 0;
    }
    .step-arrow::after {
        right: auto; top: auto;
        bottom: -1px; left: 50%;
        transform: translateX(-50%);
        border-left-color: transparent;
        border-top-color: var(--col-pink);
    }
    .after-service { flex-direction: column; gap: 0.8rem; padding: 1.2rem 1.2rem; }
    .as-icon { font-size: 1.8rem; }

    /* ── FAQ ── */
    .qa-list { max-width: 100%; }
    .qa-list summary { font-size: 0.92rem; padding: 1.2rem 0.3rem; gap: 0.7rem; }
    .qa-body > p { font-size: 0.9rem; padding: 0.2rem 0.5rem 1.1rem 3.2rem; }
    .qa-body > p::before { left: 0.3rem; top: 0.08rem; width: 2rem; height: 2rem; font-size: 1.1rem; border-radius: 6px; }
    .q-badge { width: 2rem; height: 2rem; font-size: 1.1rem; border-radius: 6px; }

    /* ── コンタクト ── */
    .ups-grid { grid-template-columns: 1fr !important; }
    .scene-inner { grid-template-columns: 1fr !important; }
    .contact-grid { grid-template-columns: 1fr !important; gap: 2rem; }
    .contact-info li { font-size: 0.85rem; line-height: 1.7; }
    .contact-form { padding: 1.6rem 1.2rem; }
    .contact-form label { font-size: 0.88rem; }
    .contact-form input,
    .contact-form textarea { font-size: 1rem; /* iOS zoom 防止 */ }

    /* ── フッター ── */
    .footer-inner { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
    .footer-nav { flex-wrap: wrap; gap: 0.4rem 0.2rem; }
    .footer-brand img { max-width: 120px; }
}

/* ======================================
   RESPONSIVE — 480px (Small Phone)
   ====================================== */
@media (max-width: 480px) {
    .section { padding: 3.5rem 0; }
    .dark-canvas { padding: 3.5rem 0; }

    /* ヒーロー */
    .hero-copy { gap: 0.9rem; }
    .hero-logo-img { width: min(100%, 280px); margin: 0; }
    .catchphrase { font-size: clamp(1.3rem, 8.6vw, 2rem); }
    .cp-word { font-size: clamp(1.3rem, 8.6vw, 2rem); }
    .hero-actions {
        max-width: 100%;
        justify-content: flex-start;
        gap: 0.45rem;
    }
    .hero-actions .btn {
        min-width: 8.6rem;
        padding: 0.62rem 1rem;
    }
    .btn { padding: 0.75rem 1.4rem; font-size: 0.9rem; }

    /* ショーケース — 1列 */
    .thumb-grid { grid-template-columns: 1fr !important; gap: 0.7rem; }

    /* フィーチャー */
    .pebble-num { width: 48px; height: 48px; font-size: 1.3rem; }
    .feat-title { font-size: clamp(1rem, 5vw, 1.3rem); }
    .feat-header { gap: 0.6rem; padding: 1.2rem 1rem 0.9rem; }
    .feat-text { padding: 0.7rem 1rem 1.2rem; }

    /* ステップ */
    .step-num { font-size: 1.5rem; }
    .step-header { gap: 0.4rem; }
    .step h3 { font-size: 1rem; }
    .step p { font-size: 0.88rem; }
    .step-icon { width: 64px; height: 64px; }
    .step-icon svg { width: 58px; height: 58px; }

    /* FAQ */
    .qa-list summary { font-size: 0.88rem; padding: 1.1rem 0.3rem; gap: 0.6rem; }
    .qa-body > p { font-size: 0.84rem; padding: 0.15rem 0.5rem 0.95rem 2.9rem; }
    .qa-body > p::before { left: 0.3rem; top: 0.08rem; width: 1.8rem; height: 1.8rem; font-size: 1rem; border-radius: 5px; }
    .q-badge { width: 1.8rem; height: 1.8rem; font-size: 1rem; border-radius: 5px; }

    /* コンタクト */
    .contact-form { padding: 1.4rem 1rem; }
    .contact-info li { font-size: 0.82rem; }

    /* ページトップボタン */
    .page-top-btn { width: 48px; height: 48px; bottom: 1.2rem; right: 1.2rem; }
}

/* ═══════════════════════════════════════
   ページトップボタン
═══════════════════════════════════════ */
.page-top-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: #fff;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15), 0 0 0 3px var(--col-orange);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
    transition: opacity 0.35s, transform 0.35s, box-shadow 0.2s;
}
.page-top-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.page-top-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 32px rgba(252,180,45,0.35), 0 0 0 3px var(--col-orange);
}
.page-top-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center;
    transition: transform 0.2s;
}
.page-top-btn.is-launching img {
    animation: rocketLaunch 0.65s ease-in forwards;
}
@keyframes rocketLaunch {
    0%   { transform: translateY(0);    opacity: 1; }
    60%  { transform: translateY(-60px); opacity: 0; }
    61%  { transform: translateY(20px);  opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}

/* ======================================
   PRICE
   ====================================== */
.price-section { background: var(--bg-c); }

/* リスト形式 */
.price-list {
    max-width: 640px;
    margin: 2.5rem auto 0;
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.price-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: 0.45rem;
    padding: 1.8rem 2.2rem;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}
.price-row:last-child { border-bottom: none; }
.price-row--blue, .price-row--pink { border-left: none; }
.price-row__info {
    min-width: 0;
    max-width: 30ch;
}
.price-row__right {
    display: grid;
    grid-template-columns: auto max-content;
    align-items: baseline;
    justify-content: end;
    column-gap: .24rem;
    min-width: 14.6rem;
}
.price-row__badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 999px;
    padding: 0.18rem 0.75rem;
    margin-bottom: 0.4rem;
    background: rgba(0,0,0,0.06);
    color: var(--text-mid);
}
.price-row__badge--blue, .price-row__badge--pink {
    background: rgba(0,0,0,0.06);
    color: var(--text-mid);
}
.price-row__name {
    font-size: 0.9rem;
    color: var(--text-mid);
    line-height: 1.5;
}
.price-row__amount {
    grid-column: auto;
    display: grid;
    grid-template-columns: 8.8ch 1.7rem;
    align-items: baseline;
    column-gap: .08em;
    justify-content: end;
    width: auto;
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight: 800;
    white-space: nowrap;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.price-row__amount--blue, .price-row__amount--pink { color: var(--text); }
.price-row__amount-val {
    display: inline-block;
    min-width: 8.8ch;
    text-align: right;
}
.price-row__unit {
    display: inline-block;
    min-width: 1.7rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
}
.price-row__tax {
    grid-column: auto;
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-lite);
    margin-top: 0;
    min-width: 0;
    margin-left: 0.08em;
    white-space: nowrap;
    text-align: left;
}

@media (max-width: 760px) {
    .price-row {
        grid-template-columns: 1fr;
        row-gap: .35rem;
    }
    .price-row__info {
        max-width: none;
    }
    .price-row__amount {
        grid-column: 1;
        display: grid;
        grid-template-columns: 8.8ch 1.7rem;
        align-items: baseline;
        gap: .08em;
        width: auto;
        justify-self: end;
    }
    .price-row__tax {
        grid-column: auto;
        justify-self: auto;
    }
}

/* 合計バー */
.price-summary {
    max-width: 640px;
    margin: 2rem auto 0;
    margin-block-start: 2rem;
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    border: 2px solid rgba(0,0,0,0.1);
    padding: 1.6rem 2.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.price-section .price-summary {
    margin-block-start: 2rem;
}
.price-summary__label {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 0.2rem;
}
.price-summary__sub {
    font-size: 0.78rem;
    color: var(--text-lite);
}
.price-summary__amount {
    font-size: clamp(1.7rem, 3.5vw, 2.3rem);
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
}

.price-footnote {
    font-size: 0.78rem;
    color: var(--text-lite);
    text-align: center;
    line-height: 1.9;
    margin-top: 1.5rem;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* モバイルで右側の丸を非表示（横重なり防止）＋サイズ縮小 */
@media (max-width: 760px) {
    /* ドロワーはヘッダーより前面（side-drawer z-index:8500 > header z-index:900）内部閉じるボタンで操作 */
    .gp2, .gp4, .gp6, .gp8, .gp10 { display: none; }
    .gp1, .gp3, .gp5, .gp7, .gp9 { width: 65px; height: 65px; }
    /* hero blobs モバイル：サイズ縮小＋オフセットを浅くして画面内に寄せる */
    .b-yellow { width: clamp(200px, 52vw, 280px); height: clamp(200px, 52vw, 280px); top: -70px;  left: -60px;  }
    .b-pink   { width: clamp(160px, 42vw, 220px); height: clamp(160px, 42vw, 220px); top: -40px;  right: -40px; }
    .b-blue   { width: clamp(170px, 45vw, 240px); height: clamp(170px, 45vw, 240px); bottom: -70px; right: 5%;  }
    .b-green  { width: clamp(110px, 28vw, 160px); height: clamp(110px, 28vw, 160px); bottom: -30px; left: -30px; }
    /* contact-blob モバイル縮小 */
    .cb1 { width: 220px; height: 200px; top: -60px; right: -30px; }
    .cb2 { width: 180px; height: 160px; bottom: -40px; left: -20px; }
    /* セクション内 sp pebbles モバイル縮小 */
    .sp1  { width: 70px;  height: 70px;  }
    .sp2  { width: 45px;  height: 45px;  }
    .sp3  { width: 60px;  height: 60px;  }
    .sp4  { width: 40px;  height: 40px;  }
    .sp5  { width: 55px;  height: 55px;  }
    .sp6  { width: 32px;  height: 32px;  }
    .sp7  { width: 85px;  height: 85px;  }
    .sp8  { width: 44px;  height: 44px;  }
    .sp-f1 { width: 55px; height: 55px; }
    .sp-f2 { width: 40px; height: 40px; }
    .sp-f3 { width: 50px; height: 50px; }
    .sp-f4 { width: 35px; height: 35px; }
    .sp-sc1 { width: 60px; height: 60px; }
    .sp-sc2 { width: 38px; height: 38px; }
    .sp-sc3 { width: 50px; height: 50px; }
    .sp-sc4 { width: 36px; height: 36px; }
}

/* ======================================================
   FLOATING NAV BUTTON + SIDE DRAWER
   ====================================================== */

/* フローティングボタン */
.float-nav-btn {
    position: fixed;
    top: 1.8rem;
    right: 1.8rem;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--col-pink), var(--col-orange));
    box-shadow: 0 6px 24px rgba(252,98,101,0.45);
    border: none;
    cursor: pointer;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0;
    transform: scale(0.7) translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
    pointer-events: none;
}
.float-nav-btn { display: none !important; }
.float-nav-btn.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}
.float-nav-btn:hover {
    box-shadow: 0 10px 36px rgba(252,98,101,0.6);
    transform: scale(1.1) translateY(-2px);
}
.float-nav-btn span {
    display: block;
    width: 26px;
    height: 2.5px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}
/* ×アイコン（open時） */
.float-nav-btn.drawer-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.float-nav-btn.drawer-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.float-nav-btn.drawer-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* モバイルではfloat-nav-btnを小さく */
@media (max-width: 760px) {
    .float-nav-btn {
        width: 46px;
        height: 46px;
        top: 1.1rem;
        right: 1.1rem;
        gap: 4px;
    }
    .float-nav-btn span { width: 19px; }
    .float-nav-btn.drawer-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .float-nav-btn.drawer-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* オーバーレイ */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12,12,28,0.6);
    backdrop-filter: blur(4px);
    z-index: 8000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.drawer-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* サイドドロワー */
.side-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 85vw);
    height: 100dvh;
    max-height: 100dvh;
    background: #fff;
    z-index: 8500;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.77,0,0.175,1);
    display: flex;
    flex-direction: column;
    box-shadow: -12px 0 48px rgba(0,0,0,0.18);
    border-radius: 1.8rem 0 0 1.8rem;
    overflow: hidden;
    overscroll-behavior: contain;
}
.side-drawer.is-open {
    transform: translateX(0);
}

/* ドロワーヘッダー */
.drawer-head {
    padding: 2.2rem 2rem 1.4rem;
    padding-right: 7.4rem;
    min-height: 108px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    background: linear-gradient(135deg, #fffdf0, #fff1f1);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.drawer-head img {
    height: 36px;
    width: auto;
    display: block;
}
/* ドロワー内閉じるボタン */
.drawer-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--col-pink), var(--col-orange));
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.drawer-close { display: none; }
.drawer-close span {
    position: absolute;
    width: 16px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}
.drawer-close span:nth-child(1) { transform: rotate(45deg); }
.drawer-close span:nth-child(2) { transform: rotate(-45deg); }

/* ドロワーナビ */
.drawer-nav {
    flex: 1;
    overflow-y: auto;
    padding: 1.2rem 0;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}
.drawer-nav a {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    transition: background 0.18s, color 0.18s, padding-left 0.22s;
    position: relative;
}
.drawer-nav a::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--col-pink), var(--col-orange));
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.drawer-nav a:hover {
    background: rgba(252,98,101,0.06);
    color: var(--col-pink);
    padding-left: 2.4rem;
}
.drawer-nav a:hover::before {
    transform: scale(1.5);
}

/* モバイル最終調整: drawer-head高さは維持し、ロゴのみ拡大 */
@media (max-width: 760px) {
    .side-drawer .drawer-head {
        height: var(--header-h) !important;
        min-height: var(--header-h) !important;
        padding: 0.75rem 1.1rem !important;
        padding-right: 4.5rem !important;
    }

    .side-drawer .drawer-head img {
        height: clamp(32px, 8.8vw, 40px);
        width: auto;
        max-width: min(62vw, 230px);
    }

    .side-drawer .drawer-close {
        display: none !important;
    }
}

/* ドロワーフッター */
.drawer-foot {
    padding: 1.4rem 2rem;
    border-top: 1px solid rgba(0,0,0,0.07);
}
.drawer-foot .btn {
    width: 100%;
    text-align: center;
    display: block;
}

/* ======================================================
   追加アニメーション
   ====================================================== */

/* 1. section-tag キラリ光 */
.section-tag {
    position: relative;
    overflow: hidden;
}
.section-tag::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.7) 50%, transparent 70%);
    animation: tagShimmer 3.5s ease-in-out infinite;
}
@keyframes tagShimmer {
    0%   { left: -120%; }
    40%  { left: 120%; }
    100% { left: 120%; }
}

/* 2. fade-up 登場時 scale ポップ */
.fade-up {
    opacity: 0;
    transform: translateY(32px) scale(0.97);
    transition: opacity 0.65s cubic-bezier(0.25,1,0.5,1),
                transform 0.65s cubic-bezier(0.34,1.56,0.64,1);
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 3. ステップ番号 パルスリング → 削除 */
.step-num {
    position: relative;
}

/* 4. ボタン ripple エフェクト */
.btn {
    position: relative;
    overflow: hidden;
}
.btn .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    transform: scale(0);
    animation: rippleAnim 0.6s linear;
    pointer-events: none;
}
@keyframes rippleAnim {
    to { transform: scale(4); opacity: 0; }
}

/* 5. UP カード 登場 ポップディレイ */
.up-card:nth-child(1) { transition-delay: 0s; }
.up-card:nth-child(2) { transition-delay: 0.12s; }
.up-card:nth-child(3) { transition-delay: 0.24s; }

/* 6. サムネイルグリッド ホバー ゆらぎ */
.thumb-grid li {
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.thumb-grid li:hover {
    transform: translateY(-8px) rotate(-1deg) scale(1.03);
}

/* 7. dc-highlight のテキストカラーシフト */
.dc-highlight.glow-active {
    animation: colorShift 4s ease-in-out infinite alternate;
}
@keyframes colorShift {
    0%   { color: var(--col-yellow); text-shadow: 0 0 22px rgba(236,228,57,0.9),  0 0 44px rgba(236,228,57,0.4); }
    50%  { color: #a0f0ff;           text-shadow: 0 0 28px rgba(160,240,255,0.9), 0 0 56px rgba(0,200,255,0.4); }
    100% { color: #fff;              text-shadow: 0 0 22px rgba(255,255,255,0.8), 0 0 44px rgba(255,255,255,0.3); }
}

/* 8. feat-item ボーダーアニメーション */
.feat-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feat-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 52px rgba(0,0,0,0.1);
}

/* ドロワーオープン中は body スクロール禁止 */
body.drawer-open {
    overflow: hidden;
}
html.drawer-open {
    overflow: hidden;
}