:root {
    --bg: #efefef;
    /* 全体に薄いグレー（指定） */
    --text: #121212;
    --muted: #6c707a;
    --line: white;
    /* hr用：薄いグレー（紫なし） */
    --navy: #1f2c4c;

    --w: 420px;
    /* スマホ時の“縦長カラム感” */
    --w-wide: 960px;
    /* 760px〜の最大幅（指定） */

    --pad: 18px;
    /* 基本左右余白 */
    --cta-gap: 18px;
    /* CTA左右の空き（指定） */
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
    line-height: 1.9;
    letter-spacing: .02em;
}

/* ページ本体：白紙をやめて “全体グレー” に統一
   → 余白の見え方をスクショに近づける */
.page {
    width: min(100% - 24px, var(--w));
    margin: 18px auto 0;
    background: transparent;
    /* ★白を消す（要望1） */
    border: 0;
    box-shadow: none;
    padding-bottom: 110px;
    /* fixed CTA分の逃げ */
}

/* ---- HERO ---- */
.hero {
    padding: 18px var(--pad) 0;
}

.hero__img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0;
    /* 四角 */
}

/* ---- TOP ---- */
.top {
    padding: 16px var(--pad) 0;
}

.top__kicker {
    margin: 6px 0 10px;
    font-size: 13px;
    color: var(--navy);
    font-weight: 400;
    letter-spacing: .1em;
}

.brand__logo {
    margin: 0 0 4px;
    font-size: 50px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: .07em;
    color: var(--navy);
}

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

.brand {
    margin-bottom: 18px;
}

.brand__logo img {
    display: block;
    height: auto;
}

.brand__logo img:hover {
    opacity: .85;
}

.brand__play {
    display: inline-block;
    transform: translateY(-2px);
    font-size: .62em;
    margin: 0 2px;
}

.brand__domain {
    margin: 0;
    font-size: 14px;
    color: var(--navy);
    letter-spacing: .03em;
}

.lead p {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--text);
}

/* ---- separators ----
   2) 左右に空き / 色は薄グレー / 上下余白を増やす */
.sep {
    border: 0;
    height: 2px;
    /* 2px → 1px */
    background: var(--line);
    /* 薄グレー */
    margin: 38px var(--pad);
    /* 上下にゆとり */
    opacity: .5;
    /* さらに薄く */
}

/* ---- section headings ---- */
.section {
    padding: 0 var(--pad);
}

.h2 {
    margin: 0 0 18px;
    /* 下の余白を少し増やす */
    font-size: 20px;
    /* 18px → 20px */
    font-weight: 800;
    letter-spacing: .035em;
    /* わずかに詰めて品を保つ */
    color: var(--navy);
}

.feature + .feature {
    margin-top: 18px;
}

/* ---- Works ---- */
.works {
    display: flex;
    flex-direction: column;
    gap: 36px;
    /* ← ここをベースに入れる */
    margin: 0 0 36px;
}


.work {
    background: transparent;
}

.work__frame {
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 0;
    /* 四角 */
    overflow: hidden;
    background: #fff;
    /* 動画枠は白で締める */
}

.work__frame iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border: 0;
}

.works__more {
    text-align: center;
    padding: 6px 0 0;
}

.more-link {
    display: inline-block;
    font-size: 13px;
    color: var(--text);
    letter-spacing: .02em;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, .35);
}

/* ---- Features ---- */
.feature {
    padding: 6px 0 18px;
}

.feature__title {
    margin: 8px 0 14px;
    /* 上下の呼吸を追加 */
    font-size: 17px;
    /* 15px → 17px */
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--navy);
}

.feature__text {
    margin: 0 0 12px;
    /* 10px → 12px */
}

.check {
    color: var(--navy);
    margin-right: 6px;
    font-weight: 900;
}

.feature__text {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--text);
}

/* ---- Price ---- */
.price {
    list-style: disc;
    padding-left: 18px;
    margin: 0 0 14px;
}

.price__item {
    margin: 18px 0 22px;
    /* ★ 各価格の“塊” */
}

.price__label {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
    /* ★ 行間を詰める */
    color: var(--text);
}

.price__yen {
    display: block;
    font-size: 18px;
    font-weight: 400;
    /* ★ 細くする（指定） */
    letter-spacing: .01em;
    line-height: 1.2;
    /* ★ 金額をキュッと */
}

.notes p {
    margin: 6px 0;
    font-size: 12px;
    color: var(--muted);
}

/* ---- pre CTA text ---- */
.precta {
    margin: 10px 0;
    font-size: 14px;
    color: var(--text);
}

.section--last {
    padding-bottom: 18px;
}

.copyright {
    margin: 24px 0 0;
    text-align: center;
    font-size: 11px;
    color: #9aa0aa;
}

/* ---- Fixed CTA (下部固定 / 1つのみ) ----
   3) 左右に空き */
.fixed-cta {
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);

    /* ★ 横幅を固定寄りに（広がらない） */
    width: auto;
    min-width: 240px;
    max-width: 280px;

    padding: 14px 24px;
    /* ★ 上下左右に余白 */
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    color: var(--navy);
    border: 3px solid var(--navy);
    border-radius: 22px;

    font-size: 14px;
    font-weight: 900;
    letter-spacing: .06em;
    text-decoration: none;

    box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
}

.fixed-cta:active {
    transform: translateX(-50%) scale(.99);
}

/* ---- Contact form (minimal) ---- */
.form {
    margin-top: 6px;
}

.field {
    margin-bottom: 18px;
}

.label {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px;
    letter-spacing: .03em;
}

.input,
.textarea {
    width: 100%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 0;
    /* 四角 */
    padding: 12px 12px;
    font-size: 14px;
    line-height: 1.6;
    outline: none;
}

.input:focus,
.textarea:focus {
    border-color: rgba(31, 44, 76, .55);
}

.form-actions {
    margin-top: 8px;
}

.submit {
    width: 100%;
    padding: 14px 12px;
    background: #fff;
    color: var(--navy);
    border: 2px solid var(--navy);
    border-radius: 0;
    /* 四角（画像/枠の思想に合わせる） */
    font-weight: 800;
    letter-spacing: .06em;
}

.submit:hover {
    opacity: .9;
}

.form-note {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.8;
}

/* ---- Contact info (footer-like) ---- */
.contact-info {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.contact-info__place {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--muted);
}

.contact-info__item {
    margin: 6px 0;
    font-size: 14px;
    color: var(--text);
}

.contact-info__item a {
    color: var(--navy);
    text-decoration: none;
    border-bottom: 1px solid rgba(31, 44, 76, .3);
    padding-bottom: 2px;
}

.contact-info__item a:hover {
    opacity: .85;
}

.work__frame video {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- video base ---- */
.video-wrap {
    position: relative;
}

.work__video {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- play overlay ---- */
.play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity .25s ease;
}

/* 非表示状態（JSで付与） */
.play-overlay.is-hidden {
    opacity: 0;
}

/* ○（白地＋太め罫線） */
.play-overlay::before {
    content: "";
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, .65);
    border: 3px solid var(--navy);
    border-radius: 50%;
    box-sizing: border-box;
    opacity: .95;
    transition: transform .25s ease, opacity .25s ease;
}

/* ▶ */
.play-overlay::after {
    content: "";
    position: absolute;
    width: 30px;
    /* ▶ 全体サイズ（少し大きく） */
    height: 35px;
    background: var(--navy);
    margin-left: 5px;
    /* 円の中央よりほんの少し右 */
    clip-path: polygon(20% 10%,
            20% 90%,
            85% 50%);
    border-radius: 10px;
    /* ★角丸 */
}

/* hover時（再生前のみ意味を持つ） */
.video-wrap:hover .play-overlay::before,
.video-wrap:hover .play-overlay::after {
    transform: scale(1.05);
}


/* ---- Responsive（760px〜：最大960pxまで広げる） ---- */
@media (min-width: 760px) {
    .page {
        width: min(100% - 48px, var(--w-wide));
    }

    /* PC時は余白もちょい増やす（上質感） */
    :root {
        --pad: 24px;
    }

    /* CTAはスマホと同じ“コンパクト”を維持したいなら、ここは触らない方が良い */
    /* もしPCでも幅固定にしたいなら、このままでOK（今の指定を残す） */
    /* .fixed-cta { ... } */

    .works {
        gap: 44px;
        /* ★PCは少し広げる（好みで36のままでもOK） */
    }
}