/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties {
    @supports (((-webkit-hyphens: none)) and(not(margin-trim: inline))) or((-moz-orient: inline) and(not(color: rgb(from red r g b)))) {
        *, :before, :after, ::backdrop {
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-outline-style:solid
        }
    }
}

@layer theme {
    :root, :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --spacing: .25rem;
        --default-font-family: var(--font-sans);
        --default-mono-font-family:var(--font-mono)
    }
}

@layer base {
    *, :after, :before, ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding:0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding:0
    }

    html, :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color:transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width:1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration:underline dotted
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: inherit;
        font-weight:inherit
    }

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

    b, strong {
        font-weight:bolder
    }

    code, kbd, samp, pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size:1em
    }

    small {
        font-size:80%
    }

    sub, sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position:relative
    }

    sub {
        bottom:-.25em
    }

    sup {
        top:-.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse:collapse
    }

    :-moz-focusring {
        outline:auto
    }

    progress {
        vertical-align:baseline
    }

    summary {
        display:list-item
    }

    ol, ul, menu {
        list-style:none
    }

    img, svg, video, canvas, audio, iframe, embed, object {
        vertical-align: middle;
        display:block
    }

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

    button, input, select, optgroup, textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius:0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius:0
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight:bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start:20px
    }

    ::file-selector-button {
        margin-inline-end:4px
    }

    ::placeholder {
        opacity:1
    }

    @supports (not ((-webkit-appearance: -apple-pay-button))) or(contain-intrinsic-size: 1px) {
        ::placeholder {
            color:currentColor
        }

        @supports (color: color-mix(in lab, red, red)) {
            ::placeholder {
                color:color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize:vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance:none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align:inherit
    }

    ::-webkit-datetime-edit {
        display:inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding:0
    }

    ::-webkit-datetime-edit {
        padding-block:0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block:0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block:0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block:0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block:0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block:0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block:0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block:0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block:0
    }

    ::-webkit-calendar-picker-indicator {
        line-height:1
    }

    :-moz-ui-invalid {
        box-shadow:none
    }

    button, input:where([type=button], [type=reset], [type=submit]) {
        appearance:button
    }

    ::file-selector-button {
        appearance:button
    }

    ::-webkit-inner-spin-button {
        height:auto
    }

    ::-webkit-outer-spin-button {
        height:auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }
}

@layer components;
@layer utilities {
    .visible {
        visibility:visible
    }

    .relative {
        position:relative
    }

    .start {
        inset-inline-start:var(--spacing)
    }

    .end {
        inset-inline-end:var(--spacing)
    }

    .table {
        display:table
    }

    .resize {
        resize:both
    }

    .shadow {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .outline {
        outline-style: var(--tw-outline-style);
        outline-width:1px
    }
}

:root {
    --paper: #f5f1ec;
    --ink:#0a0a09
}

* {
    box-sizing:border-box
}

html, body {
    background: var(--paper);
    min-height: 100%;
    margin:0
}

body {
    color: var(--ink);
    font-family: Hiragino Kaku Gothic ProN, Yu Gothic, sans-serif;
    overflow:hidden
}

button, a {
    -webkit-tap-highlight-color:transparent
}

.site-shell {
    background: radial-gradient(circle at 45% 25%, #faf8f5 0, transparent 42%), var(--paper);
    place-items: start center;
    width: 100vw;
    height: 100svh;
    display: grid;
    overflow:hidden
}

.hero-canvas {
    /* 帯まわりを下げる量。「採用コンサルタント × AI × Web制作」と下段帯が
       近すぎたため（2026-08-23）。基準キャンバス1674pxで 1.8cqw ＝ 30px。
       ⚠️ px直書きにしないこと。FV全体は画面幅で伸縮するので、下げ幅だけ
          固定pxにすると小さい画面で相対的に大きくズレる */
    --ribbon-drop: 1.8cqw;
    /* 赤いSVGリボンの右ずらし量。帯本体の右ずらしはJSのジオメトリ側（+.024 / +.012） */
    --ribbon-shift-x: 0.6cqw;
    /* 下段帯だけをさらに下げる量。基準キャンバス1674pxで 0.6cqw ＝ 10px */
    --lower-drop: 0.6cqw;
    aspect-ratio: 1674/943;
    isolation: isolate;
    perspective: 1450px;
    background: radial-gradient(circle at 52% 31%, #ffffffeb, #0000 33%), radial-gradient(circle at 7% 23%, #ffffff94, #0000 24%), linear-gradient(115deg, #f5f1ec 0%, #f8f5f1 47%, #f1ece7 100%);
    width: min(100vw, 177.519svh);
    height: min(100svh, 56.3321vw);
    position: relative;
    overflow: hidden;
    container-type:inline-size
}

.ribbon-scene, .ribbon-cast-shadow-scene, .webgl-film {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset:0
}

.ribbon-cast-shadow-scene {
    z-index: 1;
    pointer-events: none;
    transform-origin: 50% 44%;
    filter: blur(1.35cqw);
    /* 薄く、かつ一様にしない。光は左上手前から来るので、
       影は右下へ落ちるほど遠く＝薄くなる。均一な影は「板」に見える */
    opacity: .32;
    -webkit-mask-image: linear-gradient(152deg, #000 0%, #000000d9 32%, #00000080 66%, #0000002e 100%);
            mask-image: linear-gradient(152deg, #000 0%, #000000d9 32%, #00000080 66%, #0000002e 100%);
    mix-blend-mode: multiply;
    overflow: visible;
    transform:translate(1.3cqw, calc(1.65cqw + var(--ribbon-drop)))scale(1.006)
}

.ribbon-cast-shadow-scene .webgl-film {
    filter:none
}

.upper-red-ribbon {
    /* 帯の右ずらしはWebGLのジオメトリ側でやるが、このSVGは別物なのでCSSで追随させる */
    transform: translateX(var(--ribbon-shift-x));
    z-index: 0;
    filter: drop-shadow(0 2px 3px #46160e14);
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    overflow:visible
}

.site-header {
    z-index: 7;
    justify-content: space-between;
    align-items: flex-start;
    height: 6.1%;
    display: flex;
    position: absolute;
    top: 1.9%;
    left: 2.35%;
    right:2.15%
}

/* ロゴは v3（/v3/index.html）から移植（2026-08-23）。
   v3: Didot / 500 / letter-spacing -.045em / font-size clamp(34px, 2.65vw, 43px)
   ⚠️ サイズは vw ではなく cqw に換算した。v4のFVは「キャンバスごと縮小」する作りで、
      ヘッダーもその中にある。vw のままだと、横長で背の低い画面
      （キャンバスが画面幅より狭くなる）でロゴだけ大きくなる。
      画面幅＝キャンバス幅のときは 2.65vw と同じ値になる（1440pxで38.2px）。
   ⚠️ 度記号は v3 が span（通常フロー）、v4 は sup（絶対配置）とマークアップが違う。
      v3の見え方に合わせるため、絶対配置をやめて vertical-align:top に戻している。 */
.brand {
    color: #0b0b0a;
    -webkit-text-stroke: 0;
    letter-spacing: -.045em;
    font-family: Didot, "Bodoni 72", Times New Roman, serif;
    font-size: 2.65cqw;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    display: inline-block;
    position:relative
}

.brand sup {
    vertical-align: top;
    margin: 0 0 0 .06em;
    font-size: .65em;
    line-height: 1;
    position: static;
    top: auto;
    left: auto
}

.site-nav {
    white-space: nowrap;
    align-items: center;
    gap: 3.08cqw;
    height: 100%;
    font-size: .76cqw;
    font-weight: 800;
    display:flex
}

.site-nav a, .site-nav button {
    color: #0b0b0a;
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0;
    text-decoration:none
}

.site-nav .header-cta {
    color: #fff;
    background: #10100f;
    justify-content: center;
    align-items: center;
    gap: .38cqw;
    width: 9.4cqw;
    height: 3.34cqw;
    margin-left: -.1cqw;
    font-family: Yu Mincho, Hiragino Mincho ProN, serif;
    font-size: .84cqw;
    font-weight: 500;
    display:flex
}

.site-nav .header-cta span {
    font-size:1.07cqw
}

.hero-copy {
    z-index: 2;
    width: 34.3%;
    position: absolute;
    top: 18.1%;
    left:3.88%
}

.eyebrow {
    color: #282623;
    letter-spacing: .14em;
    white-space: nowrap;
    align-items: center;
    gap: .72cqw;
    height: 1.28cqw;
    margin: 0;
    font-size: calc(.7 * var(--fv-u));
    display:flex
}

.eyebrow strong {
    font-weight:800
}

.eyebrow-line {
    background: #b54830;
    width: 2.92cqw;
    height:.25cqw
}

.eyebrow-dash {
    background: #8c8781;
    width: .72cqw;
    height:1px
}

.hero-copy h1 {
    color: #0a0a09;
    -webkit-text-stroke: .025cqw currentColor;
    letter-spacing: -.085em;
    white-space: nowrap;
    margin: 2.22cqw 0 0;
    font-family: Yu Mincho, Hiragino Mincho ProN, Noto Serif JP, serif;
    font-size: calc(5.18 * var(--fv-u));
    font-weight: 600;
    line-height:1.15
}

.hero-copy h1 span {
    display:block
}

.hero-copy h1 .accent {
    color:#b64b32
}

.lead {
    letter-spacing: .02em;
    white-space: nowrap;
    margin: 1.7cqw 0 0;
    font-family: Yu Mincho, Hiragino Mincho ProN, serif;
    font-size: calc(.97 * var(--fv-u));
    font-weight:700
}

.service-chip {
    color: #fff;
    letter-spacing: .01em;
    background: #10100f;
    width: max-content;
    margin: 1.45cqw 0 0;
    padding: .76cqw .86cqw .79cqw;
    font-size: calc(.99 * var(--fv-u));
    font-weight:800
}

.service-chip b {
    color: #b84a31;
    margin: 0 .55cqw;
    font-weight:800
}

.ribbon-scene {
    --scene-rx: 0deg;
    --scene-ry: 0deg;
    z-index: 3;
    transform-style: preserve-3d;
    transform: translateY(var(--ribbon-drop)) rotateX(var(--scene-rx)) rotateY(var(--scene-ry));
    pointer-events: none;
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
    overflow:visible
}

.webgl-film {
    filter:drop-shadow(4px 6px 4px #1d16121f)drop-shadow(12px 16px 11px #1d16122b)drop-shadow(32px 42px 42px #1d161236)
}

.webgl-film--upper {
    z-index: 1;
    filter:drop-shadow(4px 6px 4px #1d161221)drop-shadow(11px 15px 10px #1d16122e)drop-shadow(30px 40px 40px #1d16123b)
}

.webgl-film--lower {
    z-index: 2;
    filter:drop-shadow(3px 6px 4px #1d16121c)drop-shadow(10px 17px 12px #1d161229)drop-shadow(27px 43px 44px #1d161236);
    transform: translateY(var(--lower-drop))
}

.ribbon-glow {
    z-index: 2;
    filter: blur(18px);
    mix-blend-mode: screen;
    pointer-events: none;
    background: radial-gradient(#ffffff36, #0000 67%);
    border-radius: 50%;
    width: 75%;
    height: 34%;
    position: absolute;
    top: 34%;
    left:18%
}

.site-nav a:focus-visible, .site-nav button:focus-visible, .pricing-cta:focus-visible {
    outline-offset: -3px;
    outline:3px solid #bb4b30
}

.header-cta:hover, .pricing-cta:hover {
    box-shadow:inset 0 0 0 2px #ffffff8f
}

.pricing-strip {
    z-index: 6;
    background: #f8f5f1fb;
    border-top: 1px solid #d8d0c8;
    grid-template-columns: 32.35% 23.55% 23.8% 20.3%;
    height: 20.25%;
    display: grid;
    position: absolute;
    bottom: 0;
    left: 0;
    right:0
}

.price-card {
    border-left: 1px solid #d8d0c8;
    min-width: 0;
    padding:calc(1.8 * var(--fv-u)) 3.12cqw 0
}

.price-card:first-child {
    border-left: 0;
    padding-left:7.3cqw
}

.price-label {
    color: #1c1b19;
    margin: 0;
    font-size: calc(.63 * var(--fv-u));
    font-weight:700
}

.price-label span {
    margin-right: 1.18cqw;
    font-family: Georgia, serif;
    font-size: calc(.66 * var(--fv-u));
    font-weight:400
}

.price-value {
    color: #b64a31;
    white-space: nowrap;
    align-items: baseline;
    height: calc(5.6 * var(--fv-u));
    margin: calc(.58 * var(--fv-u)) 0 0;
    font-family: Yu Mincho, Hiragino Mincho ProN, serif;
    display:flex
}

.price-value strong {
    letter-spacing: .01em;
    font-family: Georgia, Times New Roman, serif;
    font-size: calc(4.24 * var(--fv-u));
    font-weight: 400;
    line-height:1
}

.price-value span {
    margin-left: .62cqw;
    font-size: calc(1.08 * var(--fv-u));
    font-weight:700
}

.price-value small {
    color: #252320;
    margin-left: .55cqw;
    font-size: calc(.48 * var(--fv-u));
    font-weight:500
}

.price-value--ink {
    color:#0a0a09
}

.price-value--ink strong {
    font-size:calc(4.52 * var(--fv-u))
}

.price-note {
    color: #4b4844;
    white-space: nowrap;
    margin: 0;
    font-family: Yu Mincho, Hiragino Mincho ProN, serif;
    font-size: calc(.56 * var(--fv-u));
    font-weight: 600;
    line-height:1.55
}

.pricing-cta {
    color: #fff;
    background: linear-gradient(135deg, #262523, #11110f);
    grid-template-rows: 66% 34%;
    font-family: Yu Mincho, Hiragino Mincho ProN, serif;
    text-decoration: none;
    display:grid
}

.pricing-cta-main, .pricing-cta-sub {
    justify-content: space-between;
    align-items: center;
    display:flex
}

.pricing-cta-main {
    border-bottom: 1px solid #ffffff2e;
    padding: 0 3.55cqw 0 2.7cqw;
    font-size:calc(1.3 * var(--fv-u))
}

.pricing-cta-main b {
    font-family: Arial, sans-serif;
    font-size: calc(1.7 * var(--fv-u));
    font-weight:300
}

.pricing-cta-sub {
    color: #ddd9d4;
    padding: 0 3.25cqw 0 2.7cqw;
    font-size:calc(.78 * var(--fv-u))
}

.pricing-cta-sub b {
    font-size:calc(1.05 * var(--fv-u))
}

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

@media (max-aspect-ratio: 4/3) {
    .site-shell {
        place-items:start center
    }

    .hero-canvas {
        width: min(100vw, 177.519svh);
        height: min(100svh, 56.3321vw);
        transform:none
    }
}

@media (prefers-reduced-motion: reduce) {
    .ribbon-scene {
        transition:none
    }
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value:0 0 #0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits:false
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value:100%
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value:0 0 #0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits:false
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value:100%
}

@property --tw-ring-color {
    syntax: "*";
    inherits:false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value:0 0 #0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits:false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value:0 0 #0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits:false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value:0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value:#fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value:0 0 #0000
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}