:root {
    /* ==== 基本スケール（本文用） ==== */
    --scale: 1;

    /* ==== ロゴ＆軌道は “固定サイズ” に変更 ==== */
    --logo-base: 72px;
    /* ロゴ直径 */
    --orbit-pad-base: 18px;
    /* ロゴの外側に回転文字を回す余白 */
    --logo: var(--logo-base);
    /* ★ もう scale を掛けない */
    --orbit-pad: var(--orbit-pad-base);
    --orbit-size: calc(var(--logo-base) + var(--orbit-pad-base) * 2);
    --orbit-extra-gap: 8px;

    /* ==== ヘッダー上下パディングも固定 ==== */
    --header-pad-base: 18px;
    --header-pad-block: var(--header-pad-base);

    /* 以下は今まで通りでOK */
    --bg: #F1F5F2;
    --panel: #FFFFFF;
    --elev: #F3F7F4;
    --text: #243424;
    --muted: #5A6B60;
    --brand: #22c55e;
    --brand-2: #a3e635;
    --danger: #ff6b6b;
    --focus: #ffd43b;
    --radius: 20px;
    --maxw: 1100px;
    --shadow: 0 10px 30px rgba(0, 0, 0, .10);
    --ring: 0 0 0 4px rgba(255, 212, 59, .45);

    --fs-base: 18px;
    --fs-xl: clamp(28px, 5vw, 44px);
    --fs-2xl: clamp(40px, 8vw, 72px);
    --fs-cta: 22px;
    --fs-card-h3: 20px;
    --fs-note: 14px;
    --fs-brand: 22px;

    --bp-xs: 360px;
    --bp-sm: 480px;
    --bp-md: 720px;
    --bp-lg: 980px;
    --bp-xl: 1200px;
    --headerH: 84px;
}


/* Base */
html,
body {
    height: 100%
}

body {
    margin: 0;
    font-family: 'Noto Sans JP', system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo, sans-serif;
    background: radial-gradient(1200px 600px at 20% -10%, #E7F0E9 0%, var(--bg) 60%) no-repeat fixed;
    color: var(--text);
    font-size: calc(var(--fs-base)*var(--scale));
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

img,
svg,
video {
    max-width: 100%;
    height: auto
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.skip-link:focus {
    left: 16px;
    top: 16px;
    width: auto;
    height: auto;
    padding: 10px 14px;
    background: #000;
    color: #fff;
    z-index: 9999;
    border-radius: 12px;
    box-shadow: var(--ring)
}

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

/* Header */
header {
    position: fixed;
    inset: 0 auto auto 0;
    right: 0;
    z-index: 1000;
    background: rgb(255, 255, 255);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    padding-top: env(safe-area-inset-top, 0px);
    overflow: visible;
    --scale: 1;
}

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--header-pad-block) max(20px, env(safe-area-inset-right)) var(--header-pad-block) max(20px, env(safe-area-inset-left));
}

/* 行：拡大時に折り返し可能 */
.row {
    display: flex;
    align-items: center;
    gap: calc(16px * var(--scale));
    justify-content: space-between;
    flex-wrap: wrap;
}

/* ロゴ＋ブランドブロック */
.logoCluster {
    display: flex;
    align-items: center;
    gap: calc(20px * var(--scale));
    min-width: clamp(240px, 40vw, 520px);
    padding-block: calc(var(--orbit-pad) * 0.15);
}

.logoCluster>div {
    margin-left: calc(var(--orbit-pad) + var(--orbit-extra-gap));
}

@media (min-width:980px) {
    .logoCluster {
        gap: 24px
    }
}

/* ==== ロゴ＆回転文字：すべてスケール追従 ==== */
.logo {
    position: relative;
    width: var(--logo);
    height: var(--logo);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: transparent;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, .08), var(--shadow);
    transform: translateY(4px);
    padding-top: 10px;
}

.logo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block
}

.orbit {
    position: absolute;
    inset: calc(-1 * var(--orbit-pad));
    pointer-events: none;
    transform: translateY(4px);
}

.orbit svg {
    width: var(--orbit-size);
    height: var(--orbit-size)
}

.orbit text {
    font-size: 12px;
    letter-spacing: 0;
    fill: #2f5138;
    opacity: .85;
    text-rendering: geometricPrecision;
}

.spin {
    animation: spin 14s linear infinite;
    transform-origin: center
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.brandTitle {
    font-weight: 800;
    font-size: calc(var(--scale)*var(--fs-brand));
    letter-spacing: .04em
}

.brandSub {
    color: var(--muted);
    font-weight: 600;
    font-size: calc(14px * var(--scale))
}

.utility {
    display: flex;
    gap: calc(10px * var(--scale));
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}

.util-btn {
    border: 1px solid rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .85);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 14px;
    cursor: pointer;
    font-weight: 700
}

.util-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring)
}

/* 小〜中画面：ユーティリティを下段へ */
@media (max-width: 980px) {
    header .wrap {
        row-gap: 10px;
    }

    .utility {
        order: 3;
        width: 100%;
        justify-content: flex-end;
        padding-top: 6px;
    }

    .logoCluster {
        order: 1;
        width: 100%;
        min-width: 0;
    }
}

/* Layout */
main {
    padding-top: calc(var(--headerH) + env(safe-area-inset-top));
    scroll-margin-top: calc(var(--headerH)+12px)
}

section {
    padding: clamp(40px, 6vw, 84px) max(20px, env(safe-area-inset-right));
    padding-left: max(20px, env(safe-area-inset-left))
}

.section-inner {
    max-width: var(--maxw);
    margin: 0 auto
}

.h2 {
    font-size: calc(var(--scale)*var(--fs-xl));
    font-weight: 800;
    margin: 0 0 20px;
    letter-spacing: .02em
}

.lead {
    color: var(--muted);
    margin: 0 0 28px
}

.center {
    text-align: center
}

.small-muted {
    color: var(--muted)
}

.tiny-muted {
    color: #6c7a71;
    font-size: 13px
}

/* Hero & CTA */
.hero {
    padding: clamp(24px, 4vw, 40px) 20px clamp(40px, 6vw, 72px)
}

.hero-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    gap: 26px
}

.catch {
    font-size: calc(var(--scale)*var(--fs-2xl));
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .02em
}

.catchAccent {
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.sub {
    font-size: calc(var(--scale)*clamp(18px, 2.5vw, 22px));
    color: var(--muted)
}

.ctaBox {
    display: grid;
    gap: 14px
}

.cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 14px;
    text-decoration: none;
    font-weight: 800;
    font-size: calc(var(--scale)*var(--fs-cta));
    letter-spacing: .04em;
    border-radius: 16px;
    box-shadow: var(--shadow);
    text-align: center;
    min-height: 68px;
    border: 2px solid transparent;
    transition: .2s ease transform, .2s ease border-color, .2s ease background;
}

.cta svg {
    width: 20px;
    height: 20px
}

.cta.request {
    background: linear-gradient(180deg, #86efac, #22c55e);
    color: #06220f
}

.cta:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 0, 0, .12)
}

.cta .note {
    display: block;
    font-size: calc(var(--scale)*var(--fs-note));
    font-weight: 600;
    color: #2f5138;
    letter-spacing: .02em
}

.cta-bottom .large {
    min-height: 84px;
    font-size: clamp(18px, 2.2vw, 24px)
}

.note-under {
    color: var(--muted);
    font-weight: 600
}

/* Cards grid */
.grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr
}

@media (min-width:720px) {
    .grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:980px) {
    .grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.card {
    background: linear-gradient(180deg, var(--panel), var(--elev));
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow)
}

.card h3 {
    margin: 0 0 6px;
    font-size: calc(var(--scale)*var(--fs-card-h3))
}

.card p {
    margin: 0;
    color: #3a4a3e
}

.ic {
    width: 36px;
    height: 36px;
    margin-bottom: 8px
}

/* Safety */
.safety .safety-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center
}

.safety .safety-list li {
    background: linear-gradient(180deg, var(--panel), var(--elev));
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    padding: 10px 16px;
    box-shadow: var(--shadow);
    width: min(780px, 100%)
}

/* Story */
.story {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    align-items: start
}

.story .bubble {
    background: linear-gradient(180deg, #fff, #f3f7f4);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 20px
}

.story p {
    margin: .3em 0
}

/* ===== 料金表（テーブル版） ===== */
.price-section {
    --table-border: rgba(0, 0, 0, .08);
    --table-header-bg: #f8faf9;
    --table-row-alt: #f5f7f6;
    --table-text-muted: #6a6a6a;
}

.price-section .table-card {
    background: var(--panel);
    border-radius: 18px;
    border: 1px solid var(--table-border);
    box-shadow: var(--shadow);
    padding: 12px;
    overflow: auto;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
    font-size: 16px;
}

.price-table thead th {
    background: var(--table-header-bg);
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--table-border);
    font-weight: 700;
    white-space: nowrap;
}

.price-table tbody th[scope="row"] {
    font-weight: 700;
    padding: 10px 12px;
    border-bottom: 1px solid var(--table-border);
    background: rgba(255, 255, 255, .9);
    white-space: nowrap;
}

.price-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--table-border);
    color: #333;
}

.price-table tbody tr:nth-child(even) td,
.price-table tbody tr:nth-child(even) th[scope="row"] {
    background: var(--table-row-alt);
}

.price-table td:nth-child(2) {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.price-table td:nth-child(3) {
    color: var(--table-text-muted);
}

/* 見積もりボタン */
.price-cta {
    display: grid;
    place-items: center;
    margin-top: 20px
}

.price-cta .cta {
    width: min(420px, 100%)
}

.price-cta .large {
    min-height: 84px;
    font-size: clamp(18px, 2.2vw, 24px)
}

/* =========================
   Works（事例紹介）
   ========================= */

.works-section {
    margin-top: 40px;
}

.works-viewport {
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #f5f9f6);
    box-shadow: var(--shadow);
    padding: 14px;
}

/* スライド全体を動かすトラック */
.works-track {
    display: flex;
    flex-wrap: nowrap;
    /* 1行に並べる */
    gap: 16px;
    will-change: transform;
}

/* 1周分（A / B のかたまり） */
.work-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
}

/* 各カード（PC / タブレット） */
.work-card {
    flex: 0 0 min(360px, 34vw);
    height: clamp(180px, 22vw, 240px);
    border-radius: 18px;
    box-shadow: var(--shadow);
    background: #e8efe9;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: grid;
    grid-template-rows: 1fr auto;
}

.work-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    /* ← 少し下側を基準に表示 */
}


.work-card .thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.work-card .title {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}

/* =========================
   スマホ用（max-width: 600px）
   ========================= */
@media (max-width: 600px) {

    .works-viewport {
        padding: 12px;
    }

    .works-track {
        gap: 0;
        /* 余分な隙間なし */
    }

    .work-group {
        gap: 0;
        /* 「1枚 = ビューポート幅」にするため、グループ幅をビューに合わせる */
        width: 100%;
    }

    .work-card {
        flex: none;
        /* flex-basis を無効化 */
        width: 100%;
        /* ビューポート幅いっぱい */
        max-width: 100%;
        border-radius: 16px;
    }

    .work-card+.work-card {
        margin-left: 12px;
        /* 連続するカードの間隔は margin で */
    }
}


/* Modal */
dialog::backdrop {
    background: rgba(0, 0, 0, .4)
}

dialog {
    border: none;
    border-radius: 18px;
    padding: 0;
    max-width: min(920px, 92vw)
}

.modal-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0
}

.modal-body img {
    width: 100%;
    height: auto;
    display: block
}

.modal-meta {
    padding: 16px 18px
}

.modal-close {
    position: absolute;
    right: 8px;
    top: 8px;
    border: none;
    background: #fff;
    border-radius: 999px;
    width: 36px;
    height: 36px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: var(--shadow)
}

.modal-close:focus-visible {
    box-shadow: var(--ring)
}

/* Floating CTA */
.fab {
    position: fixed;
    right: 16px;
    bottom: 20px;
    z-index: 1200;
    background: linear-gradient(180deg, #86efac, #22c55e);
    color: #06220f;
    border: none;
    font-weight: 800;
    padding: 14px 18px;
    border-radius: 999px;
    box-shadow: var(--shadow);
    cursor: pointer
}

.fab:focus-visible {
    outline: none;
    box-shadow: var(--ring)
}

/* Reveal */
.reveal {
    opacity: 0;
    transform: translateY(14px)
}

.show {
    opacity: 1 !important;
    transform: none !important
}

/* Opening（画像3分割） */
#opening {
    position: fixed;
    inset: 0;
    background: radial-gradient(900px 400px at 50% -10%, #E7F0E9 0%, #F1F5F2 60%);
    display: grid;
    place-items: center;
    z-index: 9998
}

#opening[hidden] {
    display: none
}

.op-wrap {
    text-align: center
}

.hand {
    display: grid;
    place-items: center;
    text-shadow: 0 6px 30px rgba(0, 0, 0, .06)
}

.pieces {
    width: clamp(160px, 34vw, 280px);
    aspect-ratio: 1/1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: relative
}

.piece {
    position: relative;
    overflow: hidden
}

.piece .slice {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: 300% 100%;
    background-position: left center;
    clip-path: inset(0 100% 0 0)
}

.piece.middle .slice {
    background-position: center center
}

.piece.right .slice {
    background-position: right center
}

.scribble {
    margin-top: 12px;
    opacity: .85
}

.op-note {
    color: #6a7b70;
    margin-top: 10px;
    font-size: calc(var(--scale)*14px)
}

footer {
    color: var(--muted);
    padding: 24px 20px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    text-align: center
}

.footer-inner {
    max-width: var(--maxw);
    margin: 0 auto
}

/* 狭い時の微調整（ロゴまわり） */
@media (max-width:520px) {
    :root {
        --orbit-extra-gap: calc(6px * var(--scale));
    }

    .logoCluster {
        gap: 14px;
    }
}

/* ============================
   スマホ幅（〜480px）の見た目調整
   ・ヘッダーを少し小さく
   ・ヒーローの文字サイズを調整
   ・CTAボタン内の「依頼はこちら」を1行に収めやすく
   ============================ */
@media (max-width: 480px) {

    /* 全体の左右余白を少しだけ狭めて横幅を確保 */
    section {
        padding-right: 16px;
        padding-left: 16px;
    }

    .hero {
        padding: 24px 16px 40px;
    }

    /* ヘッダーコンパクト化 */
    header .wrap {
        padding-block: 10px;
    }

    .logo {
        width: 64px;
        height: 64px;
    }

    .brandTitle {
        font-size: 20px;
    }

    .brandSub {
        font-size: 12px;
    }

    /* キャッチコピーの字詰め＆サイズ調整（末尾1文字だけ残りにくく） */
    .catch {
        font-size: clamp(28px, 7vw, 32px);
        line-height: 1.35;
        letter-spacing: .01em;
    }

    .sub {
        font-size: 16px;
    }

    /* CTAボタン：ラベルを1行キープしつつ、ノートは折り返しOK */
    .cta {
        font-size: 16px;
        min-height: 56px;
        padding: 10px 12px;
        flex-direction: column;
        /* アイコン＋ラベル＋ノートを縦積み */
        white-space: nowrap;
        /* 本文（依頼はこちら）が途中で折れないように */
    }

    .cta svg {
        width: 18px;
        height: 18px;
    }

    .cta .note {
        font-size: 12px;
        white-space: normal;
        /* ノートの文章は普通に改行してOK */
    }
}

/* さらに幅が狭い時の微調整 */
@media (max-width:360px) {
    :root {
        --logo-base: 56px;
        --orbit-pad-base: 16px;
    }

    .hero {
        padding: 20px 14px 40px
    }

    .cta {
        min-height: 64px
    }

    .cta svg {
        width: 18px;
        height: 18px
    }

    .price-table {
        font-size: 14px;
    }
}

@media (max-width:480px) and (orientation:landscape) {
    .hero {
        padding: 16px 14px 28px
    }

    .catch {
        font-size: clamp(26px, 5vw, 30px);
    }

    .cta {
        min-height: 60px
    }
}

@media (min-width:600px) and (max-width:880px) and (orientation:portrait) {
    .hero {
        padding: 32px 20px 56px
    }
}

@media (min-width:768px) and (orientation:landscape) {
    :root {
        --maxw: 1180px
    }

    .hero-inner {
        gap: 32px
    }
}

@media (min-width:1200px) {
    :root {
        --maxw: 1200px
    }
}

@media (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .cta {
        font-size: calc(var(--scale)*22px);
        min-height: 74px
    }
}

/* アニメーション抑制 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

.sns-list {
    margin-top: 12px;
    padding-left: 0;
    list-style: none;
}

.sns-list li {
    margin: 8px 0;
}

.sns-list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text, #243424);
    font-weight: 600;
    text-decoration: none;
}

.sns-list a:hover {
    opacity: 0.7;
}

.sns-list svg {
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .work-card {
        flex: 0 0 70vw;
        /* ★ スマホ専用の幅固定（折り返さなくなる） */
        height: 180px;
        /* お好みで調整OK */
    }
}


/* 念のため：スライダーのトラックも 100% 幅以内に収める */
.works-viewport {
    position: relative;
    overflow: hidden;
}

.works-track {
    will-change: transform;
    display: flex;
    gap: 16px;
    /* track 自体が変な幅指定をしないように */
    width: auto;
}