/* ========================================
   基本設定
======================================== */

:root {
    --color-background: #f7f7f9;
    --color-surface: #ffffff;
    --color-text: #111111;
    --color-text-light: #6d6d73;
    --color-border: rgba(17, 17, 17, 0.1);

    --color-main: #635bff;
    --color-main-dark: #4b43da;
    --color-main-light: #eeecff;

    --color-black: #111111;
    --color-white: #ffffff;

    --shadow-small:
        0 8px 24px rgba(0, 0, 0, 0.06);

    --shadow-medium:
        0 20px 60px rgba(0, 0, 0, 0.12);

    --shadow-large:
        0 30px 100px rgba(0, 0, 0, 0.18);

    --border-radius-small: 12px;
    --border-radius-medium: 24px;
    --border-radius-large: 40px;

    --header-height: 76px;
    --content-width: 1200px;
}


/* ========================================
   リセット
======================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    background: var(--color-background);
    color: var(--color-text);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Helvetica Neue",
        Arial,
        "Noto Sans JP",
        sans-serif;
    line-height: 1.7;
    letter-spacing: 0.02em;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: none;
    cursor: pointer;
}

ul,
ol {
    list-style: none;
}


/* ========================================
   共通レイアウト
======================================== */

.section {
    padding: 120px 24px;
}

.section-inner {
    width: min(100%, var(--content-width));
    margin: 0 auto;
}

.section-heading {
    max-width: 700px;
    margin-bottom: 64px;
}

.section-heading.center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.section-label {
    margin-bottom: 16px;
    color: var(--color-main);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.section-title {
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.section-description {
    margin-top: 24px;
    color: var(--color-text-light);
    font-size: 18px;
    line-height: 1.9;
}


/* ========================================
   ヘッダー
======================================== */

.header {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid rgba(17, 17, 17, 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(calc(100% - 48px), var(--content-width));
    height: 100%;
    margin: 0 auto;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
}

.logo-mark {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: var(--color-black);
    color: var(--color-white);
    font-size: 18px;
    font-weight: 800;
}

.logo-text {
    font-size: 16px;
    letter-spacing: -0.02em;
}

.navigation {
    display: flex;
    align-items: center;
    gap: 30px;
}

.navigation-link {
    position: relative;
    color: #3b3b3f;
    font-size: 14px;
    font-weight: 600;
    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}

.navigation-link::after {
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 2px;
    border-radius: 100px;
    background: var(--color-main);
    content: "";
    opacity: 0;
    transform: scaleX(0);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.navigation-link:hover {
    color: var(--color-main);
}

.navigation-link:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.navigation-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--color-black);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 700;
    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.navigation-button:hover {
    background: var(--color-main);
    box-shadow: 0 12px 30px rgba(99, 91, 255, 0.25);
    transform: translateY(-2px);
}


/* ========================================
   ハンバーガーメニュー
======================================== */

.menu-button {
    display: none;
    width: 44px;
    height: 44px;
    padding: 11px;
    border-radius: 12px;
    background: transparent;
}

.menu-button span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0;
    border-radius: 999px;
    background: var(--color-black);
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.menu-button.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-button.active span:nth-child(2) {
    opacity: 0;
}

.menu-button.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
    position: fixed;
    z-index: 999;
    top: var(--header-height);
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-medium);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.mobile-menu.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.mobile-menu-link,
.mobile-menu-button {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
}

.mobile-menu-link:hover {
    background: #f2f2f5;
}

.mobile-menu-button {
    justify-content: center;
    margin-top: 8px;
    background: var(--color-black);
    color: var(--color-white);
}


/* ========================================
   ヒーロー
======================================== */

.hero {
    position: relative;
    display: flex;
    min-height: 100vh;
    align-items: center;
    padding:
        calc(var(--header-height) + 70px)
        24px
        100px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f4f2ff 48%,
            #f7f7f9 100%
        );
}

.hero-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    opacity: 0.7;
    animation: floating-circle 9s ease-in-out infinite;
}

.hero-circle-one {
    top: 8%;
    right: 6%;
    width: 420px;
    height: 420px;
    background: rgba(120, 92, 255, 0.16);
}

.hero-circle-two {
    bottom: 2%;
    left: -8%;
    width: 500px;
    height: 500px;
    background: rgba(66, 205, 255, 0.12);
    animation-delay: -3s;
}

.hero-circle-three {
    top: 35%;
    left: 42%;
    width: 260px;
    height: 260px;
    background: rgba(255, 139, 203, 0.13);
    animation-delay: -6s;
}

.hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(100%, var(--content-width));
    margin: 0 auto;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(430px, 0.9fr);
    gap: 70px;
}

.hero-content {
    max-width: 650px;
}

.hero-label {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin-bottom: 25px;
    padding: 0 16px;
    border: 1px solid rgba(99, 91, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--color-main);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    box-shadow: var(--shadow-small);
}

.hero-title {
    max-width: none;
    font-size: clamp(52px, 6vw, 84px);
    font-weight: 750;
    line-height: 1.05;
    letter-spacing: -0.065em;
    white-space: nowrap;
}

.hero-description {
    max-width: 600px;
    margin-top: 30px;
    color: var(--color-text-light);
    font-size: 18px;
    line-height: 1.9;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 38px;
}

.primary-button,
.secondary-button {
    display: inline-flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 750;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}

.primary-button {
    background: var(--color-black);
    color: var(--color-white);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

.primary-button:hover {
    background: var(--color-main);
    box-shadow: 0 20px 44px rgba(99, 91, 255, 0.3);
    transform: translateY(-3px);
}

.secondary-button {
    border: 1px solid rgba(17, 17, 17, 0.1);
    background: rgba(255, 255, 255, 0.82);
    color: var(--color-black);
    box-shadow: var(--shadow-small);
}

.secondary-button:hover {
    background: var(--color-white);
    box-shadow: var(--shadow-medium);
    transform: translateY(-3px);
}

.hero-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 32px;
}

.hero-note {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #55555c;
    font-size: 13px;
    font-weight: 600;
}

.check-icon {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    background: var(--color-main-light);
    color: var(--color-main);
    font-size: 11px;
    font-weight: 800;
}


/* ========================================
   ヒーロー右側
======================================== */

.hero-visual {
    position: relative;
    min-height: 620px;
}

.nfc-card {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 0;
    display: flex;
    width: 380px;
    aspect-ratio: 1.586 / 1;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 28px;
    background:
        linear-gradient(
            145deg,
            #222227 0%,
            #0d0d0f 55%,
            #2c2c35 100%
        );
    color: var(--color-white);
    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transform: translateY(-50%) rotate(-8deg);
    animation: card-floating 5s ease-in-out infinite;
}

.nfc-card::after {
    position: absolute;
    inset: 1px;
    border-radius: 27px;
    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.08),
            transparent 40%
        );
    content: "";
    pointer-events: none;
}

.nfc-card-top,
.nfc-card-bottom {
    position: relative;
    z-index: 2;
}

.nfc-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.nfc-card-logo {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.nfc-symbol {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    transform: rotate(90deg);
}

.nfc-symbol span {
    display: block;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-left: 0;
    border-radius: 0 100px 100px 0;
}

.nfc-symbol span:nth-child(1) {
    width: 8px;
    height: 14px;
}

.nfc-symbol span:nth-child(2) {
    width: 12px;
    height: 22px;
}

.nfc-symbol span:nth-child(3) {
    width: 16px;
    height: 30px;
}

.nfc-card-name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.nfc-card-text {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    letter-spacing: 0.18em;
}

.phone {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 10px;
    width: 290px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50px;
    background: #111114;
    box-shadow: var(--shadow-large);
    transform: rotate(5deg);
    animation: phone-floating 6s ease-in-out infinite;
}

.phone::before {
    position: absolute;
    z-index: 4;
    top: 17px;
    left: 50%;
    width: 88px;
    height: 25px;
    border-radius: 999px;
    background: #09090b;
    content: "";
    transform: translateX(-50%);
}

.phone-screen {
    min-height: 590px;
    overflow: hidden;
    border-radius: 41px;
    background:
        linear-gradient(
            180deg,
            #eeecff 0%,
            #ffffff 40%
        );
}

.phone-status-bar {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    font-size: 10px;
    font-weight: 700;
}

.phone-status-icons {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 6px;
}

.phone-profile {
    padding: 30px 20px 28px;
    text-align: center;
}

.phone-profile-image {
    display: grid;
    width: 92px;
    height: 92px;
    margin: 0 auto 18px;
    place-items: center;
    border: 5px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #6c63ff,
            #bd70ff
        );
    color: var(--color-white);
    font-size: 34px;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(99, 91, 255, 0.25);
}

.phone-profile h2 {
    font-size: 23px;
    letter-spacing: -0.04em;
}

.phone-profile-reading {
    margin-top: 2px;
    color: #9999a2;
    font-size: 10px;
}

.phone-profile-bio {
    margin-top: 15px;
    color: #66666d;
    font-size: 11px;
    line-height: 1.7;
}

.phone-profile-links {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

.phone-profile-link {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border: 1px solid rgba(17, 17, 17, 0.06);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.92);
    color: #33333a;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}


/* ========================================
   スクロール表示
======================================== */

.scroll-down {
    position: absolute;
    z-index: 3;
    bottom: 26px;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    color: #7d7d85;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    transform: translateX(-50%);
}

.scroll-line {
    position: relative;
    display: block;
    width: 1px;
    height: 42px;
    overflow: hidden;
    background: rgba(17, 17, 17, 0.12);
}

.scroll-line::after {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 60%;
    background: var(--color-main);
    content: "";
    animation: scroll-line 1.8s ease-in-out infinite;
}


/* ========================================
   特徴
======================================== */

.features {
    background: var(--color-surface);
}

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

.feature-card {
    min-height: 310px;
    padding: 34px;
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: var(--border-radius-medium);
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fafafe
        );
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.feature-card:hover {
    border-color: rgba(99, 91, 255, 0.2);
    box-shadow: 0 22px 55px rgba(99, 91, 255, 0.11);
    transform: translateY(-8px);
}

.feature-icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 26px;
    place-items: center;
    border-radius: 18px;
    background: var(--color-main-light);
    color: var(--color-main);
    font-size: 21px;
    font-weight: 800;
}

.feature-card h3 {
    margin-bottom: 14px;
    font-size: 22px;
    letter-spacing: -0.03em;
}

.feature-card p {
    color: var(--color-text-light);
    font-size: 15px;
    line-height: 1.85;
}


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

@keyframes floating-circle {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, -24px, 0) scale(1.04);
    }
}

@keyframes card-floating {
    0%,
    100% {
        transform:
            translateY(-50%)
            rotate(-8deg)
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            translateY(-54%)
            rotate(-6deg)
            translate3d(0, -8px, 0);
    }
}

@keyframes phone-floating {
    0%,
    100% {
        transform:
            rotate(5deg)
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            rotate(3deg)
            translate3d(0, -12px, 0);
    }
}

@keyframes scroll-line {
    0% {
        top: -70%;
    }

    100% {
        top: 120%;
    }
}


/* ========================================
   タブレット対応
======================================== */

@media (max-width: 1050px) {
    .navigation {
        gap: 20px;
    }

    .hero-inner {
        grid-template-columns: 1fr 430px;
        gap: 30px;
    }

    .hero-visual {
        transform: scale(0.9);
        transform-origin: center right;
    }

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


/* ========================================
   スマートフォン対応
======================================== */

@media (max-width: 820px) {
    :root {
        --header-height: 68px;
    }

    .section {
        padding: 86px 20px;
    }

    .header-inner {
        width: min(calc(100% - 32px), var(--content-width));
    }

    .navigation {
        display: none;
    }

    .menu-button {
        display: block;
    }

    .mobile-menu {
        display: flex;
    }

    .hero {
        min-height: auto;
        padding:
            calc(var(--header-height) + 65px)
            20px
            90px;
    }

    .hero-inner {
        display: flex;
        flex-direction: column;
        gap: 55px;
    }

    .hero-content {
        max-width: none;
        text-align: center;
    }

    .hero-label {
        margin-right: auto;
        margin-left: auto;
    }

    .hero-description {
        margin-right: auto;
        margin-left: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-notes {
        justify-content: center;
    }

    .hero-visual {
        width: 100%;
        min-height: 580px;
        transform: none;
    }

    .nfc-card {
        left: 50%;
        width: min(78vw, 360px);
        transform: translate(-60%, -50%) rotate(-8deg);
    }

    .phone {
        right: 3%;
        width: min(60vw, 280px);
    }

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


/* ========================================
   小さいスマートフォン対応
======================================== */

@media (max-width: 520px) {
    .logo-text {
        font-size: 14px;
    }

    .hero-title {
        font-size: clamp(36px, 11vw, 58px);
    }

    .hero-description {
        font-size: 16px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .primary-button,
    .secondary-button {
        width: 100%;
    }

    .hero-notes {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .hero-visual {
        min-height: 500px;
        margin-top: 10px;
    }

    .nfc-card {
        top: 52%;
        left: 48%;
        width: 285px;
        padding: 23px;
    }

    .phone {
        top: 0;
        right: -30px;
        width: 225px;
        border-radius: 41px;
    }

    .phone-screen {
        min-height: 470px;
        border-radius: 33px;
    }

    .phone-profile {
        padding: 24px 15px;
    }

    .phone-profile-image {
        width: 72px;
        height: 72px;
        font-size: 27px;
    }

    .phone-profile h2 {
        font-size: 19px;
    }

    .phone-profile-link {
        min-height: 40px;
    }

    .section-title {
        font-size: 38px;
    }

    .section-description {
        font-size: 16px;
    }

    .feature-card {
        min-height: auto;
        padding: 28px;
    }
}


/* ========================================
   動きを減らす設定
======================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ========================================
   使い方
======================================== */

.how-to-use {
    background:
        linear-gradient(
            180deg,
            #f7f7f9 0%,
            #f2f0ff 100%
        );
}

.how-to-use .section-title {
    font-size: min(clamp(38px, 5vw, 68px), 7vw);
    white-space: nowrap;
}

.steps {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 24px;
}

.step {
    position: relative;
    min-height: 270px;
    padding: 34px;
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: var(--border-radius-medium);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-small);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.step:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-7px);
}

.step-number {
    display: inline-flex;
    min-width: 62px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
    border-radius: 999px;
    background: var(--color-main-light);
    color: var(--color-main);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.step-content h3 {
    margin-bottom: 14px;
    font-size: 23px;
    letter-spacing: -0.03em;
}

.step-content p {
    color: var(--color-text-light);
    font-size: 15px;
    line-height: 1.9;
}

.step-line {
    width: 54px;
    height: 1px;
    align-self: center;
    background:
        linear-gradient(
            90deg,
            rgba(99, 91, 255, 0.2),
            rgba(99, 91, 255, 0.8),
            rgba(99, 91, 255, 0.2)
        );
}


/* ========================================
   プロフィール紹介
======================================== */

.design {
    overflow: hidden;
    background: var(--color-surface);
}

.design .section-title {
    font-size: min(clamp(38px, 5vw, 68px), 9vw);
    white-space: nowrap;
}

.design-inner {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1fr);
    gap: 90px;
}

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

.design-list li {
    position: relative;
    padding-left: 25px;
    color: #48484f;
    font-size: 15px;
    font-weight: 600;
}

.design-list li::before {
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-main);
    box-shadow: 0 0 0 6px var(--color-main-light);
    content: "";
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 38px;
    color: var(--color-main);
    font-size: 15px;
    font-weight: 800;
}

.text-link span {
    transition: transform 0.25s ease;
}

.text-link:hover span {
    transform: translateX(6px);
}

.design-preview {
    position: relative;
    display: flex;
    min-height: 680px;
    align-items: center;
    justify-content: center;
}

.design-preview::before {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(99, 91, 255, 0.2) 0%,
            rgba(99, 91, 255, 0.05) 45%,
            transparent 72%
        );
    content: "";
}

.preview-card {
    position: relative;
    z-index: 2;
    width: min(100%, 420px);
    padding: 24px 26px 34px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 38px;
    background:
        linear-gradient(
            180deg,
            #f0edff 0%,
            #ffffff 35%
        );
    box-shadow: var(--shadow-large);
}

.preview-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.preview-edit-button,
.preview-qr-button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(17, 17, 17, 0.07);
    background: rgba(255, 255, 255, 0.9);
    color: #33333a;
    box-shadow: var(--shadow-small);
}

.preview-edit-button {
    padding: 0 17px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.preview-qr-button {
    width: 40px;
    border-radius: 50%;
    font-size: 16px;
}

.preview-profile-image {
    display: grid;
    width: 110px;
    height: 110px;
    margin: 24px auto 18px;
    place-items: center;
    border: 6px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #655dff,
            #bd73ff
        );
    color: var(--color-white);
    font-size: 42px;
    font-weight: 800;
    box-shadow: 0 18px 40px rgba(99, 91, 255, 0.28);
}

.preview-card h3 {
    text-align: center;
    font-size: 29px;
    letter-spacing: -0.04em;
}

.preview-furigana,
.preview-username {
    text-align: center;
}

.preview-furigana {
    margin-top: 3px;
    color: #9a9aa2;
    font-size: 11px;
}

.preview-username {
    margin-top: 9px;
    color: var(--color-main);
    font-size: 13px;
    font-weight: 700;
}

.preview-bio {
    margin-top: 24px;
    color: #616169;
    text-align: center;
    font-size: 14px;
    line-height: 1.85;
}

.preview-links {
    display: grid;
    gap: 12px;
    margin-top: 28px;
}

.preview-link {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    padding: 0 19px;
    border: 1px solid rgba(17, 17, 17, 0.06);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    color: #33333a;
    font-size: 13px;
    font-weight: 750;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.055);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.preview-link:hover {
    box-shadow: 0 16px 32px rgba(99, 91, 255, 0.12);
    transform: translateY(-3px);
}


/* ========================================
   商品
======================================== */

.purchase {
    background:
        linear-gradient(
            180deg,
            #f7f7f9 0%,
            #ffffff 100%
        );
}

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

.product-card {
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 30px;
    background: var(--color-white);
    box-shadow: var(--shadow-small);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.product-card:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-8px);
}

.product-image {
    display: grid;
    min-height: 390px;
    place-items: center;
    padding: 50px;
}

.product-image-black {
    background:
        radial-gradient(
            circle at 50% 30%,
            #45454d 0%,
            #1a1a1f 43%,
            #0c0c0f 100%
        );
}

.product-image-white {
    background:
        radial-gradient(
            circle at 50% 30%,
            #ffffff 0%,
            #f3f3f7 52%,
            #e3e3e9 100%
        );
}

.product-nfc-card {
    display: flex;
    width: min(100%, 390px);
    aspect-ratio: 1.586 / 1;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    border-radius: 26px;
    background:
        linear-gradient(
            145deg,
            #27272d,
            #0c0c0e
        );
    color: var(--color-white);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transform: rotate(-6deg);
}

.product-nfc-card.white {
    border: 1px solid rgba(17, 17, 17, 0.07);
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #e9e9ef
        );
    color: var(--color-black);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.product-logo {
    font-size: 22px;
    font-weight: 850;
}

.product-card-label {
    color: rgba(255, 255, 255, 0.56);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.19em;
}

.product-nfc-card.white .product-card-label {
    color: rgba(17, 17, 17, 0.45);
}

.product-content {
    padding: 30px 32px 34px;
}

.product-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.product-type {
    margin-bottom: 5px;
    color: var(--color-main);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.product-title-row h3 {
    font-size: 23px;
    letter-spacing: -0.03em;
}

.product-price {
    white-space: nowrap;
    font-size: 20px;
    font-weight: 800;
}

.product-description {
    margin-top: 19px;
    color: var(--color-text-light);
    font-size: 14px;
    line-height: 1.85;
}

.product-button {
    width: 100%;
    min-height: 54px;
    margin-top: 26px;
    border-radius: 999px;
    background: #ededf1;
    color: #8a8a91;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}
.order-product-link { display:flex; align-items:center; justify-content:center; background:var(--color-black); color:#fff; transition:.25s; }.order-product-link:hover { background:var(--color-main); transform:translateY(-2px); }


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

.faq {
    background: var(--color-surface);
}

.faq-inner {
    display: grid;
    grid-template-columns: minmax(260px, 0.6fr) minmax(0, 1fr);
    gap: 90px;
}

.faq-list {
    display: grid;
    gap: 14px;
}

.faq-item {
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.035);
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.faq-item[open] {
    border-color: rgba(99, 91, 255, 0.2);
    box-shadow: 0 16px 38px rgba(99, 91, 255, 0.08);
}

.faq-item summary {
    display: flex;
    min-height: 80px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 24px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 750;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-icon {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--color-main-light);
    color: var(--color-main);
    font-size: 20px;
    transition: transform 0.25s ease;
}

.faq-item[open] .faq-icon {
    transform: rotate(45deg);
}

.faq-item p {
    padding: 0 24px 26px;
    color: var(--color-text-light);
    font-size: 14px;
    line-height: 1.9;
}


/* ========================================
   CTA
======================================== */

.cta {
    position: relative;
    overflow: hidden;
    padding: 130px 24px;
    background: #101014;
    color: var(--color-white);
    text-align: center;
}

.cta-background {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(99, 91, 255, 0.34),
            transparent 36%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(210, 104, 255, 0.22),
            transparent 34%
        );
}

.cta-inner {
    position: relative;
    z-index: 2;
    width: min(100%, 900px);
    margin: 0 auto;
}

.cta-label {
    margin-bottom: 20px;
    color: #aaa5ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.cta h2 {
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.16;
    letter-spacing: -0.055em;
}

.cta p:not(.cta-label) {
    max-width: 620px;
    margin: 26px auto 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 17px;
    line-height: 1.9;
}

.cta-button {
    display: inline-flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 36px;
    padding: 0 29px;
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-black);
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.cta-button:hover {
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.32);
    transform: translateY(-4px);
}

.cta-button span {
    transition: transform 0.25s ease;
}

.cta-button:hover span {
    transform: translateX(5px);
}


/* ========================================
   フッター
======================================== */

.footer {
    padding: 76px 24px 28px;
    background: #0b0b0e;
    color: var(--color-white);
}

.footer-inner {
    width: min(100%, var(--content-width));
    margin: 0 auto;
}

.footer-main {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    gap: 90px;
    padding-bottom: 64px;
}

.footer-logo .logo-mark {
    background: var(--color-white);
    color: var(--color-black);
}

.footer-brand p {
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    line-height: 1.85;
}

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

.footer-navigation-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
}

.footer-navigation-group h3 {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.footer-navigation-group a {
    color: rgba(255, 255, 255, 0.74);
    font-size: 14px;
    white-space: nowrap;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.footer-navigation-group a:hover {
    color: var(--color-white);
    transform: translateX(4px);
}

.footer-company-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.footer-company-name {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
}

.footer-company-name span {
    font-size: 11px;
    transition: transform 0.25s ease;
}

.footer-company-name:hover span {
    transform: translate(2px, -2px);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.36);
    font-size: 12px;
}


/* ========================================
   続きのレスポンシブ
======================================== */

@media (max-width: 1050px) {
    .steps {
        grid-template-columns: 1fr;
    }

    .step-line {
        width: 1px;
        height: 42px;
        justify-self: center;
        background:
            linear-gradient(
                180deg,
                rgba(99, 91, 255, 0.2),
                rgba(99, 91, 255, 0.8),
                rgba(99, 91, 255, 0.2)
            );
    }

    .design-inner {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }

    .faq-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 820px) {
    .design-inner {
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    .design-content {
        width: 100%;
    }

    .design-preview {
        width: 100%;
        min-height: auto;
        padding: 10px 0;
    }

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

    .footer-main {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .footer-navigation {
        gap: 24px;
    }
}

@media (max-width: 620px) {
    .design-list {
        grid-template-columns: 1fr;
    }

    .preview-card {
        border-radius: 30px;
    }

    .product-image {
        min-height: 300px;
        padding: 34px 24px;
    }

    .product-nfc-card {
        padding: 24px;
    }

    .product-content {
        padding: 26px 24px 30px;
    }

    .product-title-row {
        flex-direction: column;
        gap: 10px;
    }

    .faq-item summary {
        min-height: 74px;
        padding: 0 18px;
        font-size: 14px;
    }

    .faq-item p {
        padding: 0 18px 22px;
    }

    .footer-navigation {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta {
        padding: 100px 20px;
    }
}


/* ========================================
   JavaScript連動スタイル
======================================== */

.header.scrolled {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.06);
}

.fade-up {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.75s ease,
        transform 0.4s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.fade-up.show {
    opacity: 1;
    transform: translateY(0);
}


/* ========================================
   ログイン・認証ページ
======================================== */

.auth-page {
    min-height: 100vh;
    background: #f7f7f9;
}

.auth-header {
    position: relative;
    z-index: 20;
    height: 76px;
    background: rgba(255, 255, 255, 0.82);
    border-bottom: 1px solid rgba(17, 17, 17, 0.07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.auth-header-inner {
    display: flex;
    width: min(calc(100% - 48px), var(--content-width));
    height: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
}

.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #55555d;
    font-size: 14px;
    font-weight: 700;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.auth-back-link:hover {
    color: var(--color-main);
    transform: translateX(-4px);
}


/* ========================================
   ログインページ背景
======================================== */

.auth-main {
    position: relative;
    display: flex;
    min-height: calc(100vh - 76px);
    align-items: center;
    padding: 90px 24px;
    overflow: hidden;
}

.auth-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.auth-background::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f4f2ff 48%,
            #f7f7f9 100%
        );
    content: "";
}

.auth-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(12px);
    opacity: 0.75;
    animation: auth-circle-floating 9s ease-in-out infinite;
}

.auth-circle-one {
    top: 5%;
    right: 8%;
    width: 430px;
    height: 430px;
    background: rgba(99, 91, 255, 0.14);
}

.auth-circle-two {
    bottom: -12%;
    left: -7%;
    width: 520px;
    height: 520px;
    background: rgba(80, 202, 255, 0.12);
    animation-delay: -3s;
}

.auth-circle-three {
    top: 45%;
    left: 45%;
    width: 260px;
    height: 260px;
    background: rgba(255, 123, 198, 0.12);
    animation-delay: -6s;
}


/* ========================================
   ログイン全体レイアウト
======================================== */

.auth-container {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(100%, 1120px);
    margin: 0 auto;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.82fr);
    gap: 90px;
}

.auth-introduction {
    max-width: 580px;
}

.auth-label {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    margin-bottom: 24px;
    padding: 0 16px;
    border: 1px solid rgba(99, 91, 255, 0.17);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--color-main);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    box-shadow: var(--shadow-small);
}

.auth-title {
    font-size: clamp(48px, 6vw, 76px);
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -0.055em;
}

.auth-description {
    max-width: 540px;
    margin-top: 26px;
    color: var(--color-text-light);
    font-size: 17px;
    line-height: 1.9;
}


/* ========================================
   左側プロフィールプレビュー
======================================== */

.auth-preview-card {
    width: min(100%, 500px);
    margin-top: 42px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: var(--shadow-medium);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: rotate(-2deg);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.auth-preview-card:hover {
    box-shadow: var(--shadow-large);
    transform: rotate(0deg) translateY(-5px);
}

.auth-preview-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.auth-preview-profile {
    display: flex;
    align-items: center;
    gap: 14px;
}

.auth-preview-image {
    display: grid;
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    place-items: center;
    border: 4px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #675fff,
            #bd72ff
        );
    color: #ffffff;
    font-size: 23px;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(99, 91, 255, 0.22);
}

.auth-preview-name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.auth-preview-username {
    margin-top: 2px;
    color: var(--color-main);
    font-size: 12px;
    font-weight: 700;
}

.auth-preview-edit {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 0 15px;
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 999px;
    background: #ffffff;
    color: #55555d;
    font-size: 12px;
    font-weight: 700;
}

.auth-preview-bio {
    margin-top: 22px;
    color: #66666e;
    font-size: 13px;
    line-height: 1.8;
}

.auth-preview-links {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.auth-preview-link {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    padding: 0 17px;
    border: 1px solid rgba(17, 17, 17, 0.06);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.92);
    color: #3f3f46;
    font-size: 12px;
    font-weight: 750;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
}


/* ========================================
   ログインカード
======================================== */

.auth-card {
    width: 100%;
    padding: 42px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-large);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.auth-card-heading {
    margin-bottom: 32px;
}

.auth-card-heading h2 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.auth-card-heading p {
    margin-top: 10px;
    color: var(--color-text-light);
    font-size: 14px;
    line-height: 1.8;
}


/* ========================================
   フォーム
======================================== */

.auth-form {
    display: grid;
    gap: 22px;
}

.form-group {
    display: grid;
    gap: 9px;
}

.form-group label {
    color: #2e2e34;
    font-size: 13px;
    font-weight: 750;
}

.form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.forgot-password-link {
    color: var(--color-main);
    font-size: 12px;
    font-weight: 700;
}

.forgot-password-link:hover {
    text-decoration: underline;
}

.input-wrapper {
    position: relative;
    display: flex;
    min-height: 58px;
    align-items: center;
    border: 1px solid rgba(17, 17, 17, 0.11);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.94);
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.input-wrapper:focus-within {
    border-color: var(--color-main);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.1);
}

.input-icon {
    display: grid;
    width: 52px;
    flex: 0 0 auto;
    place-items: center;
    color: #888891;
    font-size: 15px;
}

.input-wrapper input {
    width: 100%;
    height: 56px;
    min-width: 0;
    padding: 0 15px 0 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--color-black);
    font-size: 15px;
}

.input-wrapper input::placeholder {
    color: #aaaab2;
}

.password-toggle {
    flex: 0 0 auto;
    margin-right: 8px;
    padding: 8px 11px;
    border-radius: 10px;
    background: transparent;
    color: var(--color-main);
    font-size: 12px;
    font-weight: 750;
}

.password-toggle:hover {
    background: var(--color-main-light);
}

.form-error {
    min-height: 18px;
    color: #d54444;
    font-size: 12px;
    line-height: 1.5;
}


/* ========================================
   ログイン保持
======================================== */

.remember-login {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
    color: #55555d;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.remember-login input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.custom-checkbox {
    position: relative;
    display: grid;
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(17, 17, 17, 0.2);
    border-radius: 7px;
    background: #ffffff;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.remember-login input:checked + .custom-checkbox {
    border-color: var(--color-main);
    background: var(--color-main);
    box-shadow: 0 6px 16px rgba(99, 91, 255, 0.23);
}

.remember-login input:checked + .custom-checkbox::after {
    width: 5px;
    height: 9px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    content: "";
    transform: rotate(45deg) translate(-1px, -1px);
}

.remember-login input:focus-visible + .custom-checkbox {
    box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.12);
}


/* ========================================
   ログインボタン
======================================== */

.auth-submit-button {
    display: flex;
    width: 100%;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 2px;
    border-radius: 999px;
    background: var(--color-black);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.17);
    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.auth-submit-button:hover {
    background: var(--color-main);
    box-shadow: 0 20px 40px rgba(99, 91, 255, 0.28);
    transform: translateY(-3px);
}

.auth-submit-button:active {
    transform: translateY(-1px);
}

.auth-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0;
    color: #9999a1;
    font-size: 12px;
}

.auth-divider::before {
    position: absolute;
    right: 0;
    left: 0;
    height: 1px;
    background: rgba(17, 17, 17, 0.08);
    content: "";
}

.auth-divider span {
    position: relative;
    z-index: 2;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.94);
}

.auth-register-text {
    color: #66666e;
    text-align: center;
    font-size: 13px;
}

.auth-register-text a {
    margin-left: 7px;
    color: var(--color-main);
    font-weight: 800;
}

.auth-register-text a:hover {
    text-decoration: underline;
}

.auth-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
    color: #9999a2;
    font-size: 11px;
}


/* ========================================
   認証ページフッター
======================================== */

.auth-footer {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 max(24px, calc((100vw - var(--content-width)) / 2));
    border-top: 1px solid rgba(17, 17, 17, 0.07);
    background: #ffffff;
    color: #92929a;
    font-size: 12px;
}

.auth-footer-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.auth-footer-links a {
    transition: color 0.25s ease;
}

.auth-footer-links a:hover {
    color: var(--color-main);
}


/* ========================================
   エラー・成功表示
======================================== */

.input-wrapper.error {
    border-color: #d54444;
    box-shadow: 0 0 0 4px rgba(213, 68, 68, 0.08);
}

.input-wrapper.success {
    border-color: #2ca46f;
    box-shadow: 0 0 0 4px rgba(44, 164, 111, 0.08);
}

.auth-message {
    display: none;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.7;
}

.auth-message.show {
    display: block;
}

.auth-message.error {
    border: 1px solid rgba(213, 68, 68, 0.16);
    background: rgba(213, 68, 68, 0.08);
    color: #b72f2f;
}

.auth-message.success {
    border: 1px solid rgba(44, 164, 111, 0.16);
    background: rgba(44, 164, 111, 0.08);
    color: #208356;
}


/* ========================================
   ログインページアニメーション
======================================== */

@keyframes auth-circle-floating {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, -25px, 0) scale(1.04);
    }
}


/* ========================================
   ログインページ タブレット対応
======================================== */

@media (max-width: 980px) {
    .auth-container {
        grid-template-columns: 1fr 420px;
        gap: 45px;
    }

    .auth-preview-card {
        padding: 24px;
    }

    .auth-card {
        padding: 34px;
    }
}


/* ========================================
   ログインページ スマホ対応
======================================== */

@media (max-width: 820px) {
    .auth-header {
        height: 68px;
    }

    .auth-header-inner {
        width: min(calc(100% - 32px), var(--content-width));
    }

    .auth-back-link {
        font-size: 0;
    }

    .auth-back-link span {
        font-size: 21px;
    }

    .auth-main {
        min-height: calc(100vh - 68px);
        padding: 64px 20px;
    }

    .auth-container {
        display: flex;
        flex-direction: column;
        gap: 42px;
    }

    .auth-introduction {
        max-width: 620px;
        text-align: center;
    }

    .auth-label {
        margin-right: auto;
        margin-left: auto;
    }

    .auth-description {
        margin-right: auto;
        margin-left: auto;
    }

    .auth-preview-card {
        display: none;
    }

    .auth-card {
        width: min(100%, 520px);
    }
}


/* ========================================
   ログインページ 小さいスマホ対応
======================================== */

@media (max-width: 520px) {
    .auth-main {
        padding: 48px 16px;
    }

    .auth-title {
        font-size: 42px;
    }

    .auth-description {
        font-size: 15px;
    }

    .auth-card {
        padding: 28px 22px;
        border-radius: 25px;
    }

    .auth-card-heading h2 {
        font-size: 28px;
    }

    .form-label-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .input-wrapper {
        min-height: 55px;
    }

    .input-wrapper input {
        height: 53px;
        font-size: 14px;
    }

    .auth-footer {
        align-items: flex-start;
        flex-direction: column;
        padding: 24px 20px;
    }

    .auth-footer-links {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}


/* ========================================
   新規登録ページ 特徴リスト
======================================== */

.register-benefits {
    display: grid;
    gap: 28px;
    margin-top: 44px;
}

.register-benefit {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    text-align: left;
}

.register-benefit-number {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--color-main-light);
    color: var(--color-main);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.register-benefit h2 {
    margin-bottom: 6px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.register-benefit p {
    color: var(--color-text-light);
    font-size: 13px;
    line-height: 1.8;
}


/* ========================================
   ユーザー名入力・使用確認
======================================== */

.username-input-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.username-input-wrapper {
    flex: 1;
    min-width: 0;
}

.username-check-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1px solid rgba(17, 17, 17, 0.11);
    border-radius: 17px;
    background: #ffffff;
    color: #2e2e34;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}

.username-check-button:hover {
    border-color: var(--color-main);
    color: var(--color-main);
}

.username-check-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.username-check-button.checked {
    border-color: rgba(44, 164, 111, 0.35);
    background: rgba(44, 164, 111, 0.08);
    color: #208356;
}

.form-help {
    color: var(--color-text-light);
    font-size: 12px;
    line-height: 1.6;
}

.form-success {
    min-height: 18px;
    color: #2ca46f;
    font-size: 12px;
    line-height: 1.5;
}


/* ========================================
   パスワード強度表示
======================================== */

.password-strength {
    display: grid;
    gap: 8px;
    margin-top: 2px;
}

.password-strength-bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.password-strength-bars span {
    height: 4px;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.08);
    transition: background 0.25s ease;
}

#password-strength-text {
    color: var(--color-text-light);
    font-size: 12px;
    line-height: 1.6;
    transition: color 0.25s ease;
}

.password-strength.level-weak .password-strength-bars span.active {
    background: #d54444;
}

.password-strength.level-weak #password-strength-text {
    color: #d54444;
}

.password-strength.level-fair .password-strength-bars span.active {
    background: #e08a3c;
}

.password-strength.level-fair #password-strength-text {
    color: #c97a2f;
}

.password-strength.level-strong .password-strength-bars span.active {
    background: var(--color-main);
}

.password-strength.level-strong #password-strength-text {
    color: var(--color-main);
}

.password-strength.level-very-strong .password-strength-bars span.active {
    background: #2ca46f;
}

.password-strength.level-very-strong #password-strength-text {
    color: #208356;
}


/* ========================================
   規約同意エリア
======================================== */

.register-agreement {
    width: 100%;
    align-items: flex-start;
    gap: 12px;
}

.register-agreement .custom-checkbox {
    margin-top: 2px;
}

.register-agreement a {
    color: var(--color-main);
    font-weight: 700;
}

.register-agreement a:hover {
    text-decoration: underline;
}


/* ========================================
   新規登録ページ スマホ対応
======================================== */

@media (max-width: 480px) {
    .username-input-row {
        flex-direction: column;
    }

    .username-check-button {
        width: 100%;
        min-height: 46px;
    }
}


/* ========================================
   特徴カードのホバー表示

   .fade-up.show の transform より後に指定し、
   スクロールアニメーション後も浮き上がるようにする。
======================================== */

@media (hover: hover) and (pointer: fine) {
    .feature-card.fade-up.show:hover {
        border-color: rgba(99, 91, 255, 0.24);
        box-shadow: 0 24px 58px rgba(99, 91, 255, 0.14);
        transform: translateY(-10px);
    }
}

/* ========================================
   公開プロフィールページ
======================================== */

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

.public-profile-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 5%, color-mix(in srgb, var(--profile-theme) 22%, transparent), transparent 36%),
        radial-gradient(circle at 85% 90%, rgba(109, 205, 255, 0.2), transparent 38%),
        #f5f5f8;
}

.public-profile-shell {
    width: 100%;
    min-height: 100vh;
    padding: 42px 18px;
}

.public-profile-card {
    position: relative;
    width: min(100%, 520px);
    margin: 0 auto;
    padding: 24px 24px 30px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 36px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 28px 80px rgba(38, 35, 70, 0.15);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.public-profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}

.profile-action-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 16px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #34343b;
    font-size: 13px;
    font-weight: 750;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.profile-qr-open {
    width: 42px;
    padding: 0;
}

.profile-action-button:hover {
    box-shadow: 0 13px 28px rgba(99, 91, 255, 0.15);
    transform: translateY(-3px);
}

.public-profile-header {
    padding: 14px 18px 8px;
    text-align: center;
}

.public-profile-avatar {
    display: grid;
    width: 122px;
    height: 122px;
    margin: 0 auto 18px;
    place-items: center;
    border: 6px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--profile-theme), #bd73ff);
    color: #fff;
    font-size: 44px;
    font-weight: 800;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 18px 42px color-mix(in srgb, var(--profile-theme) 28%, transparent);
}
.public-profile-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}
.profile-additional-links { display:contents; }

[data-social="line"] { order: 1; }
[data-social="instagram"] { order: 2; }
[data-social="tiktok"] { order: 3; }
[data-social="youtube"] { order: 4; }
[data-social="facebook"] { order: 5; }
[data-default-extra] { order: 6; }

#profile-edit-form input[name="line"] { order: 1; }
#profile-edit-form label:has(input[name="line"]) { order: 1; }
#profile-edit-form label:has(input[name="instagram"]) { order: 2; }
#profile-edit-form label:has(input[name="tiktok"]) { order: 3; }
#profile-edit-form label:has(input[name="youtube"]) { order: 4; }
#profile-edit-form label:has(input[name="facebook"]) { order: 5; }

.public-profile-header h1 {
    font-size: 31px;
    line-height: 1.25;
    letter-spacing: -0.04em;
}

.public-profile-furigana {
    margin-top: 4px;
    color: #96969e;
    font-size: 11px;
}

.public-profile-work {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 12px;
    margin-top: 12px;
    color: #55555d;
    font-size: 13px;
    font-weight: 700;
}

.public-profile-work[hidden],
.public-profile-work p[hidden] {
    display: none;
}

.public-profile-username {
    margin-top: 8px;
    color: var(--profile-theme);
    font-size: 14px;
    font-weight: 750;
}

.public-profile-bio {
    max-width: 390px;
    margin: 20px auto 0;
    color: #5f5f67;
    font-size: 14px;
    line-height: 1.85;
}

.profile-section {
    margin-top: 28px;
}

.profile-section-title {
    margin: 0 4px 10px;
    color: #8c8c94;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.public-profile-links {
    display: grid;
    gap: 11px;
}

.public-profile-link,
.profile-business-card-link {
    display: flex;
    min-height: 66px;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 9px 25px rgba(22, 20, 46, 0.055);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.profile-business-card-preview {
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 20px;
    background: #f3f3f6;
    box-shadow: 0 12px 30px rgba(22, 20, 46, 0.07);
}

.profile-business-card-preview > img,
.profile-business-card-preview > iframe {
    display: block;
    width: 100%;
    border: 0;
}

.profile-business-card-preview > img {
    height: auto;
}

.profile-business-card-preview > iframe {
    min-height: 430px;
    background: #fff;
}

.profile-business-card-sample {
    display: flex;
    aspect-ratio: 1.586 / 1;
    justify-content: space-between;
    flex-direction: column;
    padding: clamp(24px, 6vw, 42px);
    background: linear-gradient(145deg, #25252b, #0d0d10);
    color: #fff;
}

.profile-business-card-sample div {
    display: grid;
    gap: 5px;
}

.profile-business-card-sample strong {
    font-size: clamp(22px, 5vw, 34px);
}

.profile-business-card-sample b {
    font-size: clamp(13px, 3vw, 18px);
}

.profile-business-card-sample span {
    color: rgba(255, 255, 255, 0.62);
    font-size: clamp(9px, 2.2vw, 12px);
}

.profile-business-card-open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 10px;
    padding: 0 5px;
    color: #777780;
    font-size: 11px;
    font-weight: 700;
}

.profile-business-card-open:hover {
    color: var(--profile-theme);
}

.profile-business-card-open[hidden] {
    display: none;
}

.public-profile-link:hover,
.profile-business-card-link:hover {
    border-color: color-mix(in srgb, var(--profile-theme) 28%, transparent);
    box-shadow: 0 16px 32px color-mix(in srgb, var(--profile-theme) 13%, transparent);
    transform: translateY(-4px);
}

.profile-link-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    background: color-mix(in srgb, var(--profile-theme) 11%, white);
    color: var(--profile-theme);
    font-size: 17px;
    font-weight: 800;
}

.social-facebook { background: #edf3ff; color: #1877f2; }
.social-youtube { background: #fff0f0; color: #ff0033; }
.social-tiktok { background: #f0f0f2; color: #111; }
.social-instagram { background: #fff0f7; color: #d62976; }

.profile-link-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.profile-link-copy strong {
    color: #303037;
    font-size: 14px;
}

.profile-link-copy small {
    overflow: hidden;
    color: #919199;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-link-arrow {
    margin-left: auto;
    color: #a0a0a8;
    transition: transform 0.25s ease;
}

.public-profile-link:hover .profile-link-arrow,
.profile-business-card-link:hover .profile-link-arrow {
    transform: translateX(4px);
}

.public-profile-footer {
    padding: 36px 0 4px;
}

.public-profile-footer a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #8e8e96;
    font-size: 12px;
    font-weight: 700;
}

.public-profile-footer .logo-mark {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 13px;
}

/* QRモーダル */
.profile-modal[hidden] { display: none; }

.profile-modal {
    position: fixed;
    z-index: 2000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.profile-modal-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 13, 17, 0.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.profile-modal-panel {
    position: relative;
    z-index: 2;
    width: min(100%, 390px);
    padding: 34px;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.profile-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: #f1f1f4;
    color: #55555d;
    font-size: 23px;
}

.profile-modal-label {
    color: var(--profile-theme);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.profile-modal-panel h2 {
    margin-top: 7px;
    font-size: 27px;
}

.profile-qr-placeholder {
    display: grid;
    width: 210px;
    height: 210px;
    margin: 24px auto 17px;
    place-items: center;
    padding: 14px;
    outline: 1px solid #e3e3e8;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.1);
}

.profile-qr-placeholder img,
.profile-qr-placeholder canvas { display:block; width:100% !important; height:100% !important; }

.profile-qr-url {
    overflow-wrap: anywhere;
    color: #777780;
    font-size: 12px;
}

.profile-copy-button {
    width: 100%;
    min-height: 50px;
    margin-top: 18px;
    border-radius: 999px;
    background: var(--profile-theme);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.profile-download-button {
    width: 100%;
    min-height: 50px;
    margin-top: 10px;
    border: 1px solid color-mix(in srgb, var(--profile-theme) 25%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--profile-theme) 8%, white);
    color: var(--profile-theme);
    font-size: 14px;
    font-weight: 800;
}

.profile-copy-status {
    min-height: 19px;
    margin-top: 8px;
    color: #25835a;
    font-size: 12px;
}

body.profile-modal-open { overflow: hidden; }

/* PC用：横長プロフィール */
@media (min-width: 900px) {
    .public-profile-shell {
        display: grid;
        min-height: 100vh;
        place-items: center;
        padding: 24px;
    }

    .public-profile-card {
        display: grid;
        width: min(100%, 1200px);
        min-height: min(760px, calc(100vh - 64px));
        padding: 42px 48px;
        grid-template-columns: minmax(300px, 0.75fr) minmax(520px, 1.4fr);
        grid-template-rows: auto auto 1fr auto;
        column-gap: 60px;
        border-radius: 42px;
    }

    .public-profile-card::before {
        position: absolute;
        top: 48px;
        bottom: 82px;
        left: 35.5%;
        width: 1px;
        background: linear-gradient(180deg, transparent, rgba(17, 17, 17, 0.09) 12%, rgba(17, 17, 17, 0.09) 88%, transparent);
        content: "";
    }

    .public-profile-actions {
        position: absolute;
        z-index: 3;
        top: 26px;
        right: 28px;
    }

    .public-profile-header {
        display: flex;
        grid-column: 1;
        grid-row: 1 / 4;
        align-self: center;
        flex-direction: column;
        justify-content: center;
        padding: 42px 38px 42px 8px;
    }

    .public-profile-avatar {
        width: 160px;
        height: 160px;
        margin-bottom: 25px;
        font-size: 57px;
    }

    .public-profile-header h1 { font-size: 39px; }
    .public-profile-bio {
        max-width: 430px;
        font-size: 16px;
    }

    .profile-section {
        grid-column: 2;
        margin-top: 0;
    }

    .profile-business-card {
        grid-row: 1;
        margin-top: 40px;
    }

    .profile-section + .profile-section { margin-top: 24px; }

    .public-profile-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-business-card-link { min-height: 78px; }

    .public-profile-link {
        min-height: 72px;
        padding: 12px 18px;
    }

    .public-profile-footer {
        grid-column: 1 / -1;
        grid-row: 4;
        padding: 34px 0 0;
    }
}

@media (max-width: 560px) {
    .public-profile-shell { padding: 0; }
    .public-profile-card {
        min-height: 100vh;
        padding: 18px 16px 26px;
        border: 0;
        border-radius: 0;
    }
    .public-profile-header { padding-right: 8px; padding-left: 8px; }
    .profile-modal-panel { padding: 32px 22px 26px; }
}

/* プロフィール編集 */
.profile-edit-page { background:#f5f5f8; }
.edit-header { position:sticky; z-index:100; top:0; height:72px; border-bottom:1px solid rgba(17,17,17,.07); background:rgba(255,255,255,.88); backdrop-filter:blur(20px); }
.edit-header-inner { display:flex; width:min(calc(100% - 40px),1100px); height:100%; margin:auto; align-items:center; justify-content:space-between; }
.edit-preview-link { color:var(--color-main); font-size:13px; font-weight:750; }
.edit-main { width:min(calc(100% - 40px),900px); margin:auto; padding:70px 0 100px; }
.edit-heading { margin-bottom:38px; }
.edit-heading h1 { font-size:clamp(36px,5vw,56px); letter-spacing:-.045em; }
.edit-heading > p:last-child { margin-top:12px; color:var(--color-text-light); }
.edit-form { display:grid; gap:22px; }
.edit-panel { padding:34px; border:1px solid rgba(17,17,17,.07); border-radius:26px; background:#fff; box-shadow:0 12px 36px rgba(0,0,0,.045); }
.edit-panel-heading { display:flex; align-items:flex-start; gap:15px; margin-bottom:28px; }
.edit-panel-heading > span { display:grid; width:40px; height:40px; flex:0 0 auto; place-items:center; border-radius:12px; background:var(--color-main-light); color:var(--color-main); font-size:12px; font-weight:850; }
.edit-panel-heading h2 { font-size:22px; letter-spacing:-.03em; }
.edit-panel-heading p { margin-top:3px; color:#8c8c94; font-size:13px; }
.edit-avatar-row { display:flex; align-items:center; gap:22px; margin-bottom:26px; }
.edit-avatar-preview { display:grid; width:92px; height:92px; flex:0 0 auto; place-items:center; overflow:hidden; border-radius:50%; background:linear-gradient(135deg,#635bff,#bd73ff); color:#fff; font-size:34px; font-weight:800; }
.edit-avatar-preview img { width:100%; height:100%; object-fit:cover; }
.visually-hidden-input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
.edit-upload-button,.add-item-button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; padding:0 18px; border-radius:999px; background:#ededf3; color:#46464e; font-size:13px; font-weight:750; cursor:pointer; }
.edit-help { margin-top:7px; color:#9898a0; font-size:11px; }
.edit-fields { display:grid; gap:18px; }
.edit-fields.two-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
.edit-fields.three-columns { grid-template-columns:repeat(3,minmax(0,1fr)); }
.edit-field { display:grid; gap:8px; margin-top:18px; color:#35353c; font-size:13px; font-weight:750; }
.edit-field > span { display:flex; justify-content:space-between; }
.edit-field small { color:#9999a1; font-weight:500; }
.edit-field input,.edit-field textarea,.additional-item-row input,.additional-item-row select { width:100%; border:1px solid rgba(17,17,17,.11); border-radius:15px; outline:0; background:#fbfbfd; color:#222229; font-size:14px; font-weight:400; transition:.2s; }
.edit-field input { height:54px; padding:0 16px; }
.edit-field textarea { padding:14px 16px; resize:vertical; }
.edit-field input:focus,.edit-field textarea:focus,.additional-item-row input:focus,.additional-item-row select:focus { border-color:var(--color-main); box-shadow:0 0 0 4px rgba(99,91,255,.09); background:#fff; }
.theme-options { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.theme-options label { display:flex; min-height:76px; align-items:center; justify-content:center; flex-direction:column; gap:7px; border:1px solid rgba(17,17,17,.08); border-radius:16px; color:#66666e; font-size:11px; cursor:pointer; }
.theme-options input { position:absolute; opacity:0; }
.theme-options label > span { width:28px; height:28px; border-radius:50%; background:var(--swatch); }
.theme-options label:has(input:checked) { border-color:var(--profile-theme,var(--color-main)); box-shadow:0 0 0 3px rgba(99,91,255,.08); }
.edit-dropzone { display:flex; min-height:130px; align-items:center; justify-content:center; flex-direction:column; gap:5px; border:2px dashed rgba(99,91,255,.23); border-radius:20px; background:#faf9ff; color:#494950; cursor:pointer; }
.edit-dropzone small { color:#96969e; font-size:11px; }
.add-item-button { width:100%; margin-top:8px; border:1px dashed rgba(99,91,255,.28); background:#faf9ff; color:var(--color-main); }
.additional-item-row { display:grid; grid-template-columns:140px 1fr 1.4fr 42px; gap:10px; margin-bottom:12px; }
.additional-item-row input,.additional-item-row select { height:48px; padding:0 12px; }
.remove-item-button { border-radius:12px; background:#fff0f0; color:#c94545; }
.edit-form-actions { display:flex; justify-content:flex-end; gap:12px; padding-top:8px; }
.edit-cancel-button,.edit-save-button { display:inline-flex; min-height:54px; align-items:center; justify-content:center; padding:0 28px; border-radius:999px; font-size:14px; font-weight:800; }
.edit-cancel-button { border:1px solid rgba(17,17,17,.1); background:#fff; }
.edit-save-button { background:var(--color-main); color:#fff; box-shadow:0 14px 30px rgba(99,91,255,.24); }
.edit-save-status { min-height:22px; color:#25835a; text-align:right; font-size:13px; }
.edit-save-status.error { color:#c43b3b; font-weight:700; }
@media (max-width:700px) { .edit-main { width:min(calc(100% - 24px),900px); padding:42px 0 80px; } .edit-panel { padding:24px 18px; } .edit-fields.two-columns,.edit-fields.three-columns,.theme-options { grid-template-columns:1fr; } .theme-options { grid-template-columns:repeat(2,1fr); } .additional-item-row { grid-template-columns:1fr 42px; } .additional-item-row input,.additional-item-row select { grid-column:1; } .remove-item-button { grid-column:2; grid-row:1 / 4; } .edit-form-actions { flex-direction:column-reverse; } .edit-cancel-button,.edit-save-button { width:100%; } }

/* 管理画面 */
.admin-page { min-height:100vh; background:#f4f4f7; }
.sales-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:22px; }
.sales-stats article { display:grid; gap:8px; padding:22px; border:1px solid rgba(17,17,17,.07); border-radius:20px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.04); }
.sales-stats span { color:#777780; font-size:11px; font-weight:800; }
.sales-stats strong { color:#24242a; font-size:clamp(24px,3vw,34px); letter-spacing:-.04em; }
.sales-stats small { color:#a0a0a8; font-size:9px; }
.sales-layout { display:grid; grid-template-columns:320px minmax(0,1fr); gap:22px; }
.sales-chart-section { margin-bottom:22px; }
.sales-period-switch { display:flex; width:fit-content; gap:5px; margin-bottom:12px; padding:5px; border-radius:999px; background:#eeeef3; }
.sales-period-switch button { min-height:36px; padding:0 16px; border-radius:999px; color:#777780; font-size:10px; font-weight:800; }
.sales-period-switch button.active { background:#fff; color:var(--color-main); box-shadow:0 5px 15px rgba(0,0,0,.08); }
.sales-chart { display:grid; height:280px; grid-template-columns:repeat(7,minmax(48px,1fr)); align-items:end; gap:12px; overflow-x:auto; padding:20px 8px 0; border-bottom:1px solid #dedee5; }
.sales-chart-column { display:grid; height:100%; min-width:48px; grid-template-rows:26px 1fr 28px; align-items:end; justify-items:center; gap:6px; }
.sales-chart-value { color:#777780; font-size:9px; font-weight:750; white-space:nowrap; }
.sales-chart-track { position:relative; width:min(44px,72%); height:100%; overflow:hidden; border-radius:10px 10px 3px 3px; background:#f0efff; }
.sales-chart-bar { position:absolute; right:0; bottom:0; left:0; min-height:3px; border-radius:10px 10px 3px 3px; background:linear-gradient(180deg,#847dff,#635bff); box-shadow:0 8px 18px rgba(99,91,255,.22); transition:height .6s ease; }
.sales-chart-column strong { color:#777780; font-size:10px; }
.sales-layout .admin-section { margin:0; }
.sales-product-row { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px 0; border-bottom:1px solid #ececf1; }
.sales-product-row:last-child { border-bottom:0; }
.sales-product-row div { display:grid; gap:3px; }
.sales-product-row strong { font-size:12px; }
.sales-product-row small { color:#9999a1; font-size:9px; }
.sales-product-row b { color:var(--color-main); font-size:14px; }
.sales-history { display:grid; gap:9px; }
.sales-history-row { display:grid; grid-template-columns:1fr 1fr 1.2fr .8fr; gap:12px; align-items:center; padding:14px 16px; border:1px solid #ececf1; border-radius:15px; background:#fafafd; }
.sales-history-row div { display:grid; min-width:0; gap:3px; }
.sales-history-row strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.sales-history-row small { overflow:hidden; color:#92929a; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
@media(max-width:1000px){.sales-stats{grid-template-columns:repeat(2,1fr)}.sales-layout{grid-template-columns:1fr}}
@media(max-width:620px){.sales-stats{grid-template-columns:1fr 1fr}.sales-stats article{padding:17px 14px}.sales-period-switch{width:100%;overflow-x:auto}.sales-period-switch button{flex:1;white-space:nowrap}.sales-chart{height:230px}.sales-history-row{grid-template-columns:1fr 1fr}.sales-history-row div:nth-child(3){grid-column:1}.sales-history-row div:nth-child(4){grid-column:2}}
.admin-sidebar { position:fixed; z-index:20; top:0; bottom:0; left:0; display:flex; width:250px; padding:28px 20px; flex-direction:column; border-right:1px solid rgba(17,17,17,.08); background:#111115; color:#fff; }
.admin-logo { padding:0 8px; }.admin-logo .logo-mark { background:#fff; color:#111; }
.admin-navigation { display:grid; gap:7px; margin-top:45px; }.admin-navigation a { padding:13px 15px; border-radius:13px; color:rgba(255,255,255,.58); font-size:13px; font-weight:700; }.admin-navigation a:hover,.admin-navigation a.active { background:rgba(255,255,255,.1); color:#fff; }
.admin-exit-link { margin-top:auto; padding:12px; color:rgba(255,255,255,.55); font-size:12px; }
.admin-main { display:flex; margin-left:250px; padding:48px clamp(25px,5vw,72px) 90px; flex-direction:column; }
.admin-main > [hidden] { display:none !important; }
.admin-topbar { order:0; }
.admin-stats { order:1; }
.admin-dashboard-actions { order:2; }
#issue { order:2; }
#users { order:3; }
#cards { order:4; }
#pages { order:5; }
.admin-topbar { display:flex; align-items:center; justify-content:space-between; }.admin-topbar h1 { font-size:38px; letter-spacing:-.04em; }
.admin-account { display:flex; align-items:center; gap:10px; }.admin-account > span { display:grid; width:42px; height:42px; place-items:center; border-radius:50%; background:var(--color-main); color:#fff; font-weight:800; }.admin-account div { display:grid; }.admin-account strong { font-size:13px; }.admin-account small { color:#9999a1; font-size:10px; }
.admin-stats { display:grid; margin-top:36px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.admin-stat-card { display:grid; min-height:175px; padding:22px; border:1px solid rgba(17,17,17,.07); border-radius:21px; background:#fff; box-shadow:0 8px 28px rgba(0,0,0,.035); transition:transform .25s ease,box-shadow .25s ease; }
.admin-stat-card:hover { box-shadow:0 16px 38px rgba(0,0,0,.075); transform:translateY(-4px); }
.admin-stat-heading { display:flex; align-items:center; gap:10px; }
.admin-stat-heading b { display:grid; width:34px; height:34px; place-items:center; border-radius:11px; background:#eeeeF3; color:#65656d; font-size:12px; }
.admin-stat-heading span { color:#55555d; font-size:13px; font-weight:800; }
.admin-stat-card > strong { align-self:end; margin-top:18px; color:#24242a; font-size:42px; line-height:1; }
.admin-stat-card > small { margin-top:9px; color:#92929a; font-size:10px; line-height:1.55; }
.admin-stat-card.action { border-color:rgba(225,151,47,.18); background:linear-gradient(145deg,#fff,#fff9ef); }
.admin-stat-card.action .admin-stat-heading b { background:#fff0d8; color:#a76a13; }
.admin-stat-card.success { border-color:rgba(45,154,108,.18); background:linear-gradient(145deg,#fff,#effaf5); }
.admin-stat-card.success .admin-stat-heading b { background:#def4e9; color:#267e5b; }
.admin-stat-card.rate { border-color:rgba(99,91,255,.18); background:linear-gradient(145deg,#fff,#f2f0ff); }
.admin-stat-card.rate .admin-stat-heading b { background:var(--color-main-light); color:var(--color-main); }
.admin-stat-card.rate > strong { color:var(--color-main); }
.admin-dashboard-actions { margin-top:24px; padding:28px; border:1px solid rgba(17,17,17,.07); border-radius:24px; background:#fff; box-shadow:0 8px 28px rgba(0,0,0,.035); }
.admin-dashboard-actions-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.admin-dashboard-actions-heading h2 { font-size:24px; }
.admin-dashboard-actions-heading > p { color:#92929a; font-size:12px; }
.admin-dashboard-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.admin-dashboard-action-grid a { display:grid; min-height:92px; grid-template-columns:46px 1fr auto; align-items:center; gap:14px; padding:17px; border:1px solid #eaeaef; border-radius:18px; background:#fafafd; transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease; }
.admin-dashboard-action-grid a:hover { border-color:rgba(99,91,255,.24); background:#fff; box-shadow:0 14px 30px rgba(99,91,255,.1); transform:translateY(-3px); }
.admin-dashboard-action-grid a > span { display:grid; width:46px; height:46px; place-items:center; border-radius:14px; background:var(--color-main-light); color:var(--color-main); font-size:17px; font-weight:850; }
.admin-dashboard-action-grid a > div { display:grid; min-width:0; }
.admin-dashboard-action-grid strong { color:#303038; font-size:14px; }
.admin-dashboard-action-grid small { margin-top:4px; color:#92929a; font-size:10px; }
.admin-dashboard-action-grid a > b { color:#aaaab2; font-size:18px; transition:transform .25s ease; }
.admin-dashboard-action-grid a:hover > b { color:var(--color-main); transform:translateX(4px); }
.admin-dashboard-action-grid .issue > span { background:#fff0d8; color:#a76a13; }
.admin-dashboard-action-grid .cards > span { background:#e8efff; color:#5368c9; }
.admin-dashboard-action-grid .pages > span { background:#e6f7ef; color:#267e5b; }
.admin-section { margin-top:24px; padding:30px; border:1px solid rgba(17,17,17,.07); border-radius:24px; background:#fff; box-shadow:0 8px 28px rgba(0,0,0,.035); }.admin-section-heading { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:26px; }.admin-section-heading h2 { font-size:24px; }.admin-section-heading > p { color:#92929a; font-size:12px; }
.admin-page-links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }.admin-page-links a { display:flex; min-height:78px; align-items:center; gap:12px; padding:14px; border:1px solid #ededf1; border-radius:16px; background:#fafafd; transition:.25s; }.admin-page-links a:hover { border-color:rgba(99,91,255,.2); background:#fff; box-shadow:0 12px 28px rgba(99,91,255,.09); transform:translateY(-3px); }.admin-page-links a > span { display:grid; width:38px; height:38px; flex:0 0 auto; place-items:center; border-radius:12px; background:var(--color-main-light); color:var(--color-main); font-size:14px; font-weight:800; }.admin-page-links a div { display:grid; min-width:0; }.admin-page-links strong { font-size:12px; }.admin-page-links small { margin-top:2px; overflow:hidden; color:#9999a1; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.admin-card-workflow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:12px; }.admin-card-workflow article { display:flex; min-height:92px; align-items:center; gap:12px; padding:16px; border:1px solid #ededf1; border-radius:17px; background:#fafafd; }.admin-card-workflow article > span { display:grid; width:36px; height:36px; flex:0 0 auto; place-items:center; border-radius:12px; background:var(--color-main-light); color:var(--color-main); font-size:10px; font-weight:850; }.admin-card-workflow article div { display:grid; }.admin-card-workflow strong { font-size:12px; }.admin-card-workflow small { margin-top:3px; color:#9999a1; font-size:9px; line-height:1.5; }.admin-card-workflow > b { color:#b0b0b7; font-size:13px; }
.admin-nfc-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:22px; }.admin-nfc-summary > div { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; padding:12px 14px; border:1px solid #ececf1; border-radius:14px; background:#fafafd; }.admin-nfc-summary span { width:9px; height:9px; border-radius:50%; }.admin-nfc-summary small { color:#777780; font-size:9px; font-weight:700; }.admin-nfc-summary strong { font-size:18px; }.admin-nfc-summary .waiting span { background:#e49b39; }.admin-nfc-summary .written span { background:#6271df; }.admin-nfc-summary .tested span { background:#9a5ed5; }.admin-nfc-summary .shipped span { background:#2d9a6c; }
.admin-nfc-list { display:grid; gap:13px; margin-top:16px; }.admin-nfc-row { display:grid; grid-template-columns:minmax(210px,.85fr) minmax(210px,1fr) minmax(320px,1.45fr) auto; align-items:center; gap:18px; padding:18px; border:1px solid #e9e9ee; border-left:5px solid #e49b39; border-radius:18px; background:#fff; box-shadow:0 7px 22px rgba(0,0,0,.03); }.admin-nfc-row.stage-written { border-left-color:#6271df; }.admin-nfc-row.stage-tested { border-left-color:#9a5ed5; }.admin-nfc-row.stage-shipped { border-left-color:#2d9a6c; background:#fbfffd; }.admin-nfc-row-head { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:10px; }.admin-nfc-user,.admin-nfc-url { display:grid; min-width:0; }.admin-nfc-user strong,.admin-nfc-url strong { overflow:hidden; color:#303038; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.admin-nfc-user small,.admin-nfc-url small { margin-top:2px; overflow:hidden; color:#9898a0; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.admin-current-stage { flex:0 0 auto; padding:5px 8px; border-radius:999px; background:#fff3df; color:#a46c1b; font-size:8px; font-weight:850; }.admin-current-stage.written { background:#edf0ff; color:#5362ca; }.admin-current-stage.tested { background:#f4eaff; color:#8549bd; }.admin-current-stage.shipped { background:#e7f7ef; color:#237e59; }
.admin-nfc-progress { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; }.admin-nfc-progress::before { position:absolute; z-index:0; top:13px; right:12%; left:12%; height:2px; background:#e3e3e8; content:""; }.admin-nfc-step { position:relative; z-index:1; display:grid; justify-items:center; gap:5px; }.admin-nfc-step > span { display:grid; width:27px; height:27px; place-items:center; border:3px solid #fff; border-radius:50%; background:#e8e8ed; color:#919199; box-shadow:0 0 0 1px #dddde3; font-size:8px; font-weight:850; }.admin-nfc-step small { color:#9a9aa2; font-size:7px; font-weight:750; }.admin-nfc-step.done > span { background:#2d9a6c; color:#fff; box-shadow:0 0 0 1px #2d9a6c; }.admin-nfc-step.done small { color:#2d8b64; }.admin-nfc-step.current > span { background:var(--color-main); color:#fff; box-shadow:0 0 0 3px rgba(99,91,255,.15); }.admin-nfc-step.current small { color:var(--color-main); font-weight:850; }.admin-nfc-actions { display:flex; gap:6px; }.admin-nfc-actions button { min-height:38px; padding:0 12px; border-radius:999px; background:#eeeeF3; color:#55555d; font-size:9px; font-weight:800; white-space:nowrap; }.admin-nfc-actions button.primary { background:var(--color-main); color:#fff; }.admin-nfc-actions button:disabled { cursor:not-allowed; opacity:.45; }.admin-nfc-message { min-height:18px; margin-top:10px; color:#27825a; font-size:11px; text-align:right; }
.admin-issue-form { display:grid; grid-template-columns:1.2fr 1fr 1.3fr .8fr auto; align-items:end; gap:12px; }.admin-issue-form label { display:grid; gap:7px; color:#55555d; font-size:11px; font-weight:750; }.admin-issue-form input,.admin-issue-form select,.admin-search input { width:100%; height:48px; padding:0 13px; border:1px solid rgba(17,17,17,.1); border-radius:13px; outline:0; background:#fafafd; }.admin-issue-form input:focus,.admin-issue-form select:focus,.admin-search input:focus { border-color:var(--color-main); box-shadow:0 0 0 3px rgba(99,91,255,.08); }.admin-username-input { display:flex; align-items:center; height:48px; border:1px solid rgba(17,17,17,.1); border-radius:13px; background:#fafafd; overflow:hidden; }.admin-username-input b { padding-left:12px; color:#9999a1; font-size:11px; }.admin-username-input input { border:0; box-shadow:none!important; }.admin-issue-form button { min-height:48px; padding:0 19px; border-radius:999px; background:var(--color-main); color:#fff; font-size:12px; font-weight:800; }.admin-form-message { grid-column:1/-1; min-height:18px; color:#27825a; font-size:12px; }
.admin-pending-orders { width:100%; margin-bottom:20px; padding:18px; border:1px solid rgba(99,91,255,.13); border-radius:18px; background:#f9f8ff; }.admin-pending-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; }.admin-pending-heading > div { display:grid; }.admin-pending-heading strong { font-size:13px; }.admin-pending-heading small { margin-top:3px; color:#92929a; font-size:10px; }.admin-pending-heading > span { padding:5px 10px; border-radius:999px; background:var(--color-main-light); color:var(--color-main); font-size:10px; font-weight:800; }.admin-pending-list { display:grid; gap:10px; margin-top:15px; }.admin-pending-order { display:grid; grid-template-columns:1fr 1fr 1fr auto; align-items:center; gap:14px; padding:14px; border:1px solid #e9e8f2; border-radius:15px; background:#fff; }.admin-pending-order div { display:grid; min-width:0; }.admin-pending-order strong { overflow:hidden; color:#303038; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.admin-pending-order small { margin-top:2px; overflow:hidden; color:#9999a1; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.admin-pending-order button { min-height:40px; padding:0 18px; border-radius:999px; background:var(--color-main); color:#fff; font-size:11px; font-weight:800; }.admin-pending-empty { padding:25px 10px 8px; color:#9999a1; text-align:center; font-size:11px; }.admin-manual-issue { width:100%; margin-top:0; padding:18px; border:1px solid rgba(99,91,255,.13); border-radius:18px; background:#f9f8ff; }.admin-manual-heading { display:grid; }.admin-manual-heading strong { color:#35353d; font-size:13px; }.admin-manual-heading small { margin-top:3px; color:#96969e; font-size:10px; }.admin-manual-issue .admin-issue-form { width:100%; margin-top:18px; }
.admin-search { width:min(100%,340px); }.admin-search input { font-size:12px; }.admin-table-wrap { overflow-x:auto; }.admin-table { width:100%; min-width:880px; border-collapse:collapse; }.admin-table th { padding:13px 12px; border-bottom:1px solid #ededf1; color:#96969e; text-align:left; font-size:10px; letter-spacing:.08em; }.admin-table td { padding:16px 12px; border-bottom:1px solid #f0f0f3; color:#4f4f57; font-size:12px; }.admin-table td strong { display:block; color:#292930; font-size:13px; }.admin-table td small { display:block; margin-top:2px; color:#9b9ba3; }.admin-status { display:inline-flex; padding:5px 9px; border-radius:999px; background:#fff3dd; color:#a46a16; font-size:10px; font-weight:800; }.admin-status.done { background:#e8f8f0; color:#23805a; }.admin-table button { padding:7px 10px; border-radius:9px; background:#eeeeF3; color:#56565e; font-size:10px; font-weight:750; }.admin-row-actions { display:flex; gap:6px; white-space:nowrap; }.admin-table button.danger { background:#fff0f0; color:#c33f3f; }.admin-table button.danger:hover { background:#c94747; color:#fff; }.admin-empty { padding:35px; color:#9999a1; text-align:center; font-size:13px; }
.admin-user-tools { display:flex; align-items:center; gap:10px; }
.admin-filter { width:190px; }
.admin-filter select { width:100%; height:48px; padding:0 36px 0 13px; border:1px solid rgba(17,17,17,.1); border-radius:13px; outline:0; background:#fafafd; color:#55555d; font-size:11px; font-weight:700; }
.admin-filter select:focus { border-color:var(--color-main); box-shadow:0 0 0 3px rgba(99,91,255,.08); }
.admin-user-result-count { margin:-14px 0 12px; color:#92929a; font-size:11px; font-weight:700; }
@media(max-width:1050px){.admin-issue-form{grid-template-columns:repeat(2,1fr)}.admin-issue-form button{grid-column:1/-1}.admin-stats{grid-template-columns:repeat(2,1fr)}.admin-page-links{grid-template-columns:repeat(2,1fr)}.admin-card-workflow{grid-template-columns:1fr 1fr}.admin-card-workflow>b{display:none}.admin-pending-order{grid-template-columns:1fr 1fr}.admin-pending-order button{grid-column:1/-1}.admin-nfc-summary{grid-template-columns:1fr 1fr}.admin-nfc-row{grid-template-columns:1fr 1fr}.admin-nfc-actions{justify-content:flex-end}}
@media(max-width:720px){.admin-sidebar{position:static;width:100%;padding:18px}.admin-navigation{display:flex;margin-top:20px;overflow-x:auto}.admin-navigation a{white-space:nowrap}.admin-exit-link{display:none}.admin-main{margin-left:0;padding:30px 14px 70px}.admin-topbar{align-items:flex-start}.admin-account div{display:none}.admin-stats{grid-template-columns:1fr 1fr}.admin-dashboard-action-grid{grid-template-columns:1fr}.admin-dashboard-actions-heading{align-items:flex-start;flex-direction:column;gap:6px}.admin-section{padding:22px 16px}.admin-section-heading{align-items:flex-start;flex-direction:column}.admin-user-tools{width:100%;align-items:stretch;flex-direction:column}.admin-filter,.admin-search{width:100%}.admin-user-result-count{margin-top:-10px}.admin-issue-form{grid-template-columns:1fr}.admin-pending-order,.admin-nfc-row{grid-template-columns:1fr}.admin-nfc-actions{justify-content:stretch}.admin-nfc-actions button{flex:1}}
@media(max-width:480px){.admin-page-links,.admin-card-workflow,.admin-stats{grid-template-columns:1fr}.admin-stat-card{min-height:155px}.admin-dashboard-actions{padding:22px 16px}.admin-dashboard-action-grid a{grid-template-columns:42px 1fr auto;padding:14px}.admin-dashboard-action-grid a>span{width:42px;height:42px}}

/* カード有効化 */
.activation-main { position:relative; display:grid; min-height:calc(100vh - 76px); place-items:center; padding:70px 24px; overflow:hidden; background:radial-gradient(circle at 15% 20%,rgba(99,91,255,.17),transparent 32%),radial-gradient(circle at 90% 80%,rgba(77,202,255,.14),transparent 34%),#f6f6f9; }
.activation-layout { display:grid; width:min(100%,1080px); align-items:center; grid-template-columns:1fr 430px; gap:80px; }
.activation-guide h1 { font-size:clamp(44px,5vw,67px); line-height:1.14; letter-spacing:-.055em; }.activation-guide > p:not(.auth-label) { max-width:570px; margin-top:24px; color:#686870; font-size:16px; line-height:1.9; }
.activation-steps { display:grid; gap:17px; margin-top:38px; }.activation-steps li { display:flex; align-items:center; gap:15px; color:#92929a; }.activation-steps li > span { display:grid; width:39px; height:39px; flex:0 0 auto; place-items:center; border:1px solid rgba(17,17,17,.1); border-radius:50%; background:#fff; font-size:12px; font-weight:800; }.activation-steps li.active > span { border-color:var(--color-main); background:var(--color-main); color:#fff; }.activation-steps li div { display:grid; }.activation-steps strong { color:#44444b; font-size:14px; }.activation-steps small { margin-top:2px; font-size:11px; }
.activation-card { padding:38px; }.activation-card .input-wrapper input { text-transform:none; }.activation-card #activation-code { text-transform:uppercase; letter-spacing:.14em; font-weight:750; }
@media(max-width:850px){.activation-layout{display:flex; max-width:520px; flex-direction:column; gap:42px}.activation-guide{text-align:center}.activation-guide .auth-label{margin-right:auto;margin-left:auto}.activation-steps{text-align:left}.activation-card{width:100%}}
@media(max-width:520px){.activation-main{padding:45px 16px}.activation-guide h1{font-size:39px}.activation-card{padding:28px 22px}}

/* 購入申し込み */
.nfc-card,.product-nfc-card,.order-card-sample { overflow:hidden; border-radius:26px; background:linear-gradient(145deg,#27272d 0%,#0c0c0e 58%,#24242b 100%); color:#fff; }
.product-nfc-card.white,.order-card-sample.white { background:linear-gradient(145deg,#fff 0%,#e9e9ef 100%); color:#17171b; }
.nfc-design-top,.nfc-design-bottom { position:relative; z-index:2; display:flex; width:100%; }
.nfc-design-top { align-items:flex-start; justify-content:space-between; }
.nfc-design-top > b { font-size:22px; font-weight:850; letter-spacing:-.04em; }
.nfc-design-symbol { position:relative; display:flex; align-items:center; gap:3px; margin-top:7px; padding-left:7px; }
.nfc-design-symbol::before { position:absolute; top:50%; left:0; width:5px; height:5px; border-radius:50%; background:currentColor; content:""; opacity:.82; transform:translateY(-50%); }
.nfc-design-symbol i { display:block; border:2px solid currentColor; border-left:0; border-radius:0 100px 100px 0; opacity:.78; }
.nfc-design-symbol i:nth-child(1) { width:7px; height:12px; }
.nfc-design-symbol i:nth-child(2) { width:10px; height:20px; }
.nfc-design-symbol i:nth-child(3) { width:13px; height:28px; }
.nfc-design-bottom { align-items:flex-start; flex-direction:column; }
.nfc-design-bottom strong { color:inherit; font-size:15px; font-weight:800; letter-spacing:.1em; }
.nfc-design-bottom small { margin-top:5px; color:currentColor; font-size:9px; font-weight:700; letter-spacing:.18em; opacity:.52; }
.order-card-sample .nfc-design-top> b { font-size:17px; }
.order-card-sample .nfc-design-bottom strong { font-size:10px; }
.order-card-sample .nfc-design-bottom small { font-size:7px; }
.order-card-sample .nfc-design-symbol { gap:3px; transform:scale(.75); transform-origin:top right; }
.order-page { background:#f5f5f8; }.order-main { width:min(calc(100% - 40px),1160px); margin:auto; padding:65px 0 100px; }.order-heading { margin-bottom:38px; }.order-heading h1 { font-size:clamp(40px,5vw,62px); letter-spacing:-.05em; }.order-heading > p:last-child { margin-top:12px; color:#74747c; }
.order-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; align-items:start; gap:25px; }.order-form-column { display:grid; gap:22px; }.order-card-options { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.order-card-options label { display:grid; gap:10px; cursor:pointer; }.order-card-options input { position:absolute; opacity:0; }.order-card-sample { display:flex; aspect-ratio:1.586/1; flex-direction:column; justify-content:space-between; padding:20px; border:3px solid transparent; border-radius:26px; box-shadow:0 16px 36px rgba(0,0,0,.16); transition:.25s; }.order-card-sample.black { background:linear-gradient(145deg,#27272d 0%,#0c0c0e 58%,#24242b 100%); color:#fff; }.order-card-sample.white { border-color:#eeeef2; background:linear-gradient(145deg,#fff 0%,#e9e9ef 100%); color:#17171b; }.order-card-options input:checked + .order-card-sample { outline:4px solid rgba(99,91,255,.13); border-color:var(--color-main); transform:translateY(-4px); }.order-card-options label > strong { text-align:center; font-size:13px; }
.order-username-row { display:grid; grid-template-columns:1fr; gap:10px; }.order-field-message { min-height:18px; color:#c54444!important; }.order-field-message.success { color:#248158!important; }
.postal-code-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; }
.postal-code-row button { min-height:52px; padding:0 16px; border-radius:14px; background:#222227; color:#fff; font-size:11px; font-weight:800; white-space:nowrap; transition:background .2s ease,transform .2s ease; }
.postal-code-row button:hover { background:var(--color-main); transform:translateY(-1px); }
.postal-code-row button:disabled { cursor:wait; opacity:.6; transform:none; }
.postal-code-message { min-height:18px; margin-top:1px; color:#777780; font-size:10px; line-height:1.5; }
.postal-code-message.success { color:#248158; }
.postal-code-message.error { color:#c54444; }
.order-summary { position:sticky; top:92px; padding:28px; border:1px solid rgba(17,17,17,.07); border-radius:25px; background:#fff; box-shadow:0 16px 46px rgba(0,0,0,.07); }.order-summary h2 { font-size:25px; }.order-summary-card { display:flex; justify-content:space-between; margin-top:24px; padding:18px 0; border-bottom:1px solid #ededf1; font-size:13px; }.order-summary dl { display:grid; gap:12px; margin-top:20px; }.order-summary dl div { display:flex; justify-content:space-between; color:#777780; font-size:12px; }.order-summary dl .total { margin-top:6px; padding-top:16px; border-top:1px solid #ededf1; color:#222; font-size:17px; font-weight:800; }.order-agreement { align-items:flex-start; margin-top:24px; line-height:1.6; }.order-submit-button { width:100%; min-height:54px; margin-top:20px; border-radius:999px; background:var(--color-main); color:#fff; font-size:14px; font-weight:800; box-shadow:0 14px 30px rgba(99,91,255,.22); }.order-submit-message { min-height:20px; margin-top:8px; color:#c54444; font-size:11px; }.order-summary > small { display:block; margin-top:12px; color:#aaaab1; font-size:9px; line-height:1.6; }
.order-quantity { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:16px; color:#66666e; font-size:12px; font-weight:750; }
.order-quantity select { width:100px; height:42px; padding:0 12px; border:1px solid #dedee5; border-radius:12px; outline:0; background:#fafafd; color:#33333a; font-weight:750; }
.order-quantity select:focus { border-color:var(--color-main); box-shadow:0 0 0 3px rgba(99,91,255,.08); }
.order-complete { width:min(100%,650px); margin:40px auto; padding:60px 35px; border-radius:30px; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.09); text-align:center; }.order-complete > span { display:grid; width:70px; height:70px; margin:0 auto 22px; place-items:center; border-radius:50%; background:#e8f8f0; color:#23805a; font-size:30px; }.order-complete h2 { font-size:32px; }.order-complete p { margin-top:13px; color:#74747c; }.order-complete a { display:inline-flex; min-height:48px; align-items:center; margin-top:25px; padding:0 23px; border-radius:999px; background:#222227; color:#fff; font-size:13px; font-weight:800; }
@media(max-width:850px){.order-layout{grid-template-columns:1fr}.order-summary{position:static}.order-main{width:min(calc(100% - 24px),760px)}}@media(max-width:560px){.order-main{padding:42px 0 70px}.order-card-options{grid-template-columns:1fr 1fr}.order-card-sample{padding:14px;border-radius:15px}.order-username-row{grid-template-columns:1fr}.order-username-row button{min-height:45px}}

/* 注文完了ページ */
.order-complete-page { min-height:100vh; background:radial-gradient(circle at 20% 10%,rgba(99,91,255,.18),transparent 34%),radial-gradient(circle at 85% 90%,rgba(68,200,255,.14),transparent 36%),#f5f5f8; }
.order-complete-main { display:grid; min-height:calc(100vh - 76px); place-items:center; padding:55px 20px; }
.order-complete-card { width:min(100%,700px); padding:55px 60px; border:1px solid rgba(255,255,255,.8); border-radius:34px; background:rgba(255,255,255,.9); box-shadow:0 28px 85px rgba(35,31,73,.15); text-align:center; backdrop-filter:blur(22px); }
.order-complete-icon { display:grid; width:78px; height:78px; margin:0 auto 23px; place-items:center; border-radius:50%; background:#e6f8ef; color:#218158; font-size:33px; font-weight:850; box-shadow:0 12px 28px rgba(35,151,100,.14); }
.order-complete-card h1 { font-size:clamp(36px,5vw,54px); line-height:1.18; letter-spacing:-.05em; }
.order-complete-lead { max-width:550px; margin:22px auto 0; color:#707078; font-size:14px; line-height:1.9; }
.order-number-card { display:grid; gap:5px; margin:28px auto 0; padding:19px; border:1px solid rgba(99,91,255,.14); border-radius:18px; background:#f8f7ff; }.order-number-card span { color:#8e8e97; font-size:10px; font-weight:750; letter-spacing:.12em; }.order-number-card strong { color:var(--color-main); font-size:20px; letter-spacing:.06em; }
.order-next-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:28px; text-align:left; }.order-next-steps li { display:flex; align-items:flex-start; gap:10px; padding:15px; border:1px solid #ededf1; border-radius:16px; background:#fff; }.order-next-steps li > span { display:grid; width:27px; height:27px; flex:0 0 auto; place-items:center; border-radius:50%; background:var(--color-main-light); color:var(--color-main); font-size:10px; font-weight:800; }.order-next-steps li div { display:grid; }.order-next-steps strong { font-size:11px; }.order-next-steps small { margin-top:3px; color:#9999a1; font-size:9px; line-height:1.5; }
.order-complete-actions { display:flex; justify-content:center; gap:10px; margin-top:30px; }.order-complete-actions a { display:inline-flex; min-height:49px; align-items:center; justify-content:center; padding:0 21px; border:1px solid rgba(17,17,17,.1); border-radius:999px; background:#fff; color:#414149; font-size:12px; font-weight:800; }.order-complete-actions a.primary { border-color:#222227; background:#222227; color:#fff; }
.order-demo-note { margin-top:22px; color:#aaaab2; font-size:9px; }
@media(max-width:620px){.order-complete-main{padding:25px 12px}.order-complete-card{padding:38px 20px;border-radius:27px}.order-next-steps{grid-template-columns:1fr}.order-complete-actions{flex-direction:column}.order-complete-actions a{width:100%}}

/* 複数商品対応の注文表示 */
.legal-page { background:#f5f5f8; }
.legal-main { width:min(calc(100% - 36px),900px); margin:0 auto; padding:65px 0 90px; }
.legal-document { padding:clamp(28px,6vw,64px); border:1px solid rgba(17,17,17,.07); border-radius:30px; background:#fff; box-shadow:0 18px 55px rgba(0,0,0,.06); }
.legal-heading { padding-bottom:30px; border-bottom:1px solid #ececf1; }
.legal-heading h1 { font-size:clamp(38px,6vw,58px); letter-spacing:-.05em; }
.legal-heading>p:last-child { margin-top:12px; color:#92929a; font-size:11px; }
.legal-draft-note { margin:28px 0; padding:18px 20px; border:1px solid #f0d49f; border-radius:16px; background:#fff9ed; }
.legal-draft-note strong { color:#8d5d10; font-size:13px; }
.legal-draft-note p { margin-top:6px; color:#7b6849; font-size:11px; line-height:1.75; }
.legal-document section { margin-top:36px; }
.legal-document section h2 { color:#292930; font-size:19px; letter-spacing:-.02em; }
.legal-document section p,.legal-document section li { color:#62626a; font-size:13px; line-height:2; }
.legal-document section p,.legal-document section ul,.legal-document section ol { margin-top:12px; }
.legal-document section ul,.legal-document section ol { padding-left:1.5em; }
.legal-document section li+li { margin-top:5px; }
.legal-footer { display:flex; min-height:80px; align-items:center; justify-content:center; gap:24px; padding:20px; border-top:1px solid #e5e5ea; background:#fff; color:#777780; font-size:11px; }
.legal-footer a:hover { color:var(--color-main); }
.order-agreement a { color:var(--color-main); text-decoration:underline; text-underline-offset:2px; }
@media(max-width:560px){.legal-main{width:min(calc(100% - 20px),900px);padding:30px 0 60px}.legal-document{padding:28px 20px;border-radius:22px}.legal-footer{align-items:flex-start;flex-direction:column;gap:10px}}

/* ========================================
   お問い合わせページ
======================================== */

.contact-main {
    width: min(calc(100% - 36px), 760px);
    margin: 0 auto;
    padding: 65px 0 90px;
}

.contact-card {
    padding: clamp(28px, 6vw, 58px);
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.06);
}

.contact-introduction {
    margin: 18px 0 30px;
    color: #66666e;
    font-size: 14px;
    line-height: 1.9;
}

.contact-form {
    display: grid;
    gap: 22px;
}

.contact-form textarea {
    width: 100%;
    min-height: 180px;
    padding: 16px 18px;
    resize: vertical;
    border: 1px solid rgba(17, 17, 17, 0.11);
    border-radius: 17px;
    outline: none;
    background: #fff;
    color: var(--color-black);
    font: inherit;
    line-height: 1.7;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.contact-form textarea:focus {
    border-color: var(--color-main);
    box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.1);
}

.contact-form select {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    border: 0;
    outline: 0;
    border-radius: 17px;
    background: transparent;
    color: var(--color-black);
    font-size: 14px;
}

.contact-note {
    color: #8b8b94;
    font-size: 11px;
    line-height: 1.7;
}

@media (max-width: 560px) {
    .contact-main { width: min(calc(100% - 20px), 760px); padding: 30px 0 60px; }
    .contact-card { padding: 28px 20px; border-radius: 22px; }
}

/* プロフィール見本の勤務先情報 */
.phone-profile-work {
    margin-top: 8px;
    color: #72727a;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.55;
}

.phone-profile-username {
    margin-top: 7px;
    color: var(--color-main);
    font-size: 9px;
    font-weight: 800;
}

.preview-work {
    margin-top: 10px;
    color: #66666e;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}

.auth-preview-work {
    margin-top: 3px;
    color: #777780;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.45;
}

.profile-link-icon.social-brand {
    overflow: hidden;
    padding: 0;
    background: transparent;
}

.profile-link-icon.social-brand img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sample-social-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sample-social-label img {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* ========================================
   トップページ スマホ表示の安定化
======================================== */
@media (max-width: 820px) {
    .hero,
    .features,
    .how-to-use,
    .design,
    .purchase,
    .faq,
    .cta,
    .footer {
        max-width: 100%;
        overflow-x: clip;
    }

    .hero-inner,
    .hero-content,
    .section-inner,
    .design-content,
    .design-preview {
        min-width: 0;
    }

    .hero-title {
        width: 100%;
        font-size: clamp(36px, 10.5vw, 58px);
    }

    .hero-visual {
        width: min(100%, 430px);
        margin-right: auto;
        margin-left: auto;
    }

    .design-preview::before {
        width: min(520px, 120vw);
        height: min(520px, 120vw);
    }

    .preview-card {
        width: min(100%, 420px);
    }

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

@media (max-width: 520px) {
    .hero {
        padding-right: 16px;
        padding-left: 16px;
    }

    .hero-title {
        font-size: clamp(32px, 10vw, 48px);
    }

    .hero-label {
        max-width: 100%;
        padding: 0 12px;
        font-size: 9px;
        letter-spacing: 0.12em;
    }

    .hero-description {
        overflow-wrap: anywhere;
    }

    .hero-visual {
        min-height: 470px;
    }

    .nfc-card {
        top: 55%;
        left: 44%;
        width: min(245px, 74vw);
        padding: 20px;
    }

    .phone {
        right: -4px;
        width: min(200px, 60vw);
        padding: 8px;
        border-radius: 36px;
    }

    .phone::before {
        top: 14px;
        width: 70px;
        height: 20px;
    }

    .phone-screen {
        min-height: 430px;
        border-radius: 29px;
    }

    .phone-status-bar {
        height: 42px;
        padding: 0 18px;
    }

    .phone-profile {
        padding: 18px 12px 16px;
    }

    .phone-profile-image {
        width: 60px;
        height: 60px;
        margin-bottom: 10px;
    }

    .phone-profile h2 {
        font-size: 17px;
    }

    .phone-profile-work {
        margin-top: 5px;
        font-size: 8px;
    }

    .phone-profile-bio {
        margin-top: 9px;
        font-size: 9px;
    }

    .phone-profile-links {
        gap: 6px;
        margin-top: 12px;
    }

    .phone-profile-link {
        min-height: 34px;
        padding: 0 11px;
        font-size: 9px;
    }

    .sample-social-label img {
        width: 15px;
        height: 15px;
    }

    .footer-navigation {
        grid-template-columns: 1fr;
    }
}
.edit-header-actions { display:flex; align-items:center; gap:10px; }
.edit-logout-link { display:inline-flex; min-height:42px; align-items:center; padding:0 16px; border:1px solid #e1e1e7; border-radius:999px; color:#777780; font-size:11px; font-weight:750; }
.edit-logout-link:hover { border-color:#d65a5a; color:#c74646; }
@media(max-width:520px){.edit-header-actions{gap:5px}.edit-logout-link{padding:0 11px}.edit-preview-link{padding-right:12px;padding-left:12px}}
.forgot-password-container { grid-template-columns:minmax(0,1fr) minmax(400px,.82fr); }
@media(max-width:820px){.forgot-password-container{display:flex;flex-direction:column}}
.edit-business-card-preview { display:flex; min-height:80px; align-items:center; gap:14px; margin-top:14px; padding:13px; border:1px solid #e5e5eb; border-radius:15px; background:#fafafd; color:#55555d; font-size:12px; }
.edit-business-card-preview[hidden] { display:none; }
.edit-business-card-preview img { width:110px; max-height:72px; object-fit:cover; border-radius:9px; }
.edit-business-card-preview .pdf { display:grid; width:50px; height:50px; place-items:center; border-radius:10px; background:#fff0f0; color:#c33f3f; font-size:11px; font-weight:850; }
.admin-table { min-width:1040px; }
.admin-table td.admin-user-product { min-width:150px; }
.admin-table td.admin-user-product strong { color:var(--color-main); }
.admin-pending-order { grid-template-columns:.9fr .85fr 1.15fr 1fr auto; }
.admin-pending-order .admin-order-product { padding:9px 11px; border-radius:11px; background:#f5f3ff; }
.admin-pending-order .admin-order-product strong { color:var(--color-main); }
@media(max-width:1050px){.admin-pending-order{grid-template-columns:1fr 1fr}.admin-pending-order button{grid-column:1/-1}}
@media(max-width:720px){.admin-pending-order{grid-template-columns:1fr}}
.admin-nfc-message.error { color:#c43f3f; }

/* スマホのファーストビューは、カードイメージを先に表示する */
@media (max-width: 820px) {
    .hero-visual {
        order: 1;
    }

    .hero-content {
        order: 2;
    }
}