/* ============================================
   NODEWORKS - Base Styles
   ============================================ */

/* Design Tokens */
:root {
    /* Color */
    --line--primary:     rgba(174, 174, 174, 1);
    --line--secondary:   rgba(17, 16, 16, 1);
    --line--teritary:    rgba(236, 236, 236, 1);
    --line--error:       rgba(255, 38, 38, 1);

    --surface--primary:  rgba(251, 251, 251, 1);
    --surface--secondary: rgba(17, 16, 16, 1);
    --surface--teritary: rgba(246, 244, 242, 1);
    --surface--hover:    rgba(246, 244, 242, 1);

    --text--primary:     rgba(17, 16, 16, 1);
    --text--secondary:   rgba(131, 131, 131, 1);
    --text--oncolor:     rgba(255, 255, 255, 1);
    --text--placeholder: rgba(166, 166, 166, 1);
    --text--link:        rgba(140, 140, 140, 1);
    --text--error:       rgba(255, 38, 38, 1);

    /* Text size */
    --label--navigation--r: 14px;
    --label--navigation--m: 14px;
    --label--caption--r:    8px;
    --label--caption--m:    8px;
    --label--button--r:     14px;
    --label--button--m:     14px;
    --label--button--l--r:  20px;

    --body--s--r:  12px;
    --body--m--r:  14px;
    --body--m--m:  14px;
    --body--l--r:  20px;
    --body--l--m:  20px;

    --heading--h3--r: 24px;
    --heading--h3--m: 24px;
    --heading--h2--r: 36px;
    --heading--h2--m: 36px;
    --heading--h1--r: 54px;
    --heading--h1--m: 54px;

    /* Spacing */
    --sp-body:    64px;
    --sp-section: 100px;
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    overflow: hidden;
    height: 100%;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

#smooth-wrapper {
    overflow: hidden;
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

/* スマホ（767px以下）はScrollSmootherを使わずブラウザ標準スクロールにするため、
   ScrollSmoother前提のロック（fixed配置・overflow:hidden）を解除する。
   html.no-smooth-scrollはJS側でScrollSmootherを作らなかった場合にのみ付与される */
html.no-smooth-scroll,
html.no-smooth-scroll body {
    overflow: visible;
    height: auto;
}

html.no-smooth-scroll #smooth-wrapper {
    overflow: visible;
    height: auto;
    position: static;
}

/* overflow:visible化で失われたBFC（ブロック整形コンテキスト）を、
   スクロールを妨げないdisplay:flow-rootで再確立する。子要素（.top-serviceの
   margin-top:100vh等）のマージンがこのコンテナを突き抜けてhtml全体の高さに
   加算されてしまい、フッター下に謎の余白ができる不具合があったため */
html.no-smooth-scroll #smooth-content {
    display: flow-root;
}

body {
    background-color: var(--surface--primary);
    color: var(--text--primary);
    font-family: 'Zen Kaku Gothic New', sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

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

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

ol, ul {
    list-style: none;
}


/* ============================================
   Header
   ============================================ */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000; /* blur(9998)・curtain(9999) より上 */
    opacity: 0;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 30px;
    position: relative;
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-logo img {
    width: 21px;
    height: 19px;
}

/* SNS Links — absolute center */
.header-sns {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    display: flex;
    align-items: center;
    gap: 32px;
}

.header-sns a {
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--s--r);
    font-weight: 400;
    color: var(--text--primary);
    line-height: 1.5;
    white-space: nowrap;
    transition: none;
}

.header-sns a::after {
    content: '';
    position: absolute;
    right: 0;
    left: auto;
    top: 50%;
    width: 0;
    height: 1px;
    background-color: var(--text--primary);
    transition: width 0.3s ease;

}

.header-sns a:hover::after {
    left: 0;
    right: auto;
    width: 100%;
}

/* Nav */
.header-nav__list {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-nav__list li {
    display: flex;
    align-items: center;
}

.header-nav__list li a {
    display: inline-flex;
    align-items: center;
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: var(--label--navigation--r);
    font-weight: 500;
    line-height: 1;
    color: var(--text--primary);
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: none;
}

.header-nav__list li a::after {
    content: '';
    position: absolute;
    right: 0;
    left: auto;
    top: 50%;
    width: 0;
    height: 1px;
    background-color: var(--text--primary);
    transition: width 0.3s ease;

}

.header-nav__list li a:hover::after {
    left: 0;
    right: auto;
    width: 100%;
}

/* Current page dot */
.header-nav__list .current-menu-item > a {
    gap: 5px;
}

.header-nav__list .current-menu-item > a::before {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--surface--secondary);
    flex-shrink: 0;
}

/* Contact button */
.header-nav__list .nav-contact > a {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    color: var(--text--oncolor);
    background-color: var(--surface--secondary);
    border: 1px solid var(--surface--secondary);
    border-radius: 40px;
    transition: opacity 0.2s ease;

}

.header-nav__list .nav-contact > a:hover {
    opacity: 0.75;
}

.header-nav__list .nav-contact > a::after {
    display: none;
}

/* 白反転レイヤー — JSでclip-pathを毎フレーム更新し暗いセクションとの重なりを追従 */
.site-header--white {
    pointer-events: none;
}

.site-header--white .header-inner {
    filter: invert(1);
}


/* ============================================
   FV (First View)
   ============================================ */

.fv {
    /* --fvs: ロゴ一式のスケール係数。レスポンシブ時にこの値だけ変えれば
       内部の絶対配置(px)がすべて追従する */
    --fvs: 1;
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.fv__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    filter: blur(16px);
    transform: scale(1.35);
    opacity: 0;
}

/* Logo — bottom-left（サイズはすべて --fvs 倍で算出。デスクトップは --fvs:1 で従来値と同一） */
.fv__logo {
    position: absolute;
    left: 52px;
    bottom: 40px;
    width: calc(398px * var(--fvs));
    height: calc(107px * var(--fvs));
}

.fv__logo-symbol {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(123px * var(--fvs));
    height: calc(107px * var(--fvs));
}

.fv__logo-type {
    position: absolute;
    left: calc(154px * var(--fvs));
    top: 0;
    width: calc(244px * var(--fvs));
    height: calc(107px * var(--fvs));
}

.fv__logo-node {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(181px * var(--fvs));
    height: calc(47px * var(--fvs));
}

.fv__logo-works {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(244px * var(--fvs));
    height: calc(47px * var(--fvs));
}

/* Text — bottom-right */
.fv__text {
    position: absolute;
    right: 52px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fv__catch p {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--s--r);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text--primary);
    white-space: nowrap;
}

.fv__desc p {
    font-family: 'Roboto', sans-serif;
    font-size: 9px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text--primary);
    white-space: nowrap;
}

/* ============================================
   Loader
   ============================================ */

#loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader__logo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    opacity: 0;
    animation: loaderLogoIn 0.6s ease forwards 0.3s;
}

.loader__symbol {
    width: 26px;
    height: 22px;
    flex-shrink: 0;
}

.loader__logotype {
    width: 210px;
    height: 22px;
}

@keyframes loaderLogoIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Strips — JSで生成 */
.loader__strips {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.loader__strip {
    position: absolute;
    left: 0;
    width: 100%;
    background-color: var(--surface--secondary);
    transform-origin: center;
}

/* ============================================
   FV Animations
   ============================================ */

@keyframes fvBlurClear {
    from { filter: blur(16px); transform: scale(1.35); }
    to   { filter: blur(0);    transform: scale(1); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDownItem {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 1. FV背景: ブラー解除 — ローダーのストリップ開始と同時。
   画像自体はいきなり出ると唐突なため、白い背景から短時間でフェードインさせてから
   ブラー解除の演出（こちらは従来どおりゆっくり）に入る */
body.is-img-loaded .fv__bg {
    animation: fvBlurClear 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 0s,
               fvFadeIn 1.2s ease both 0s;
}

@keyframes fvFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 2. ヘッダー全体: 瞬時に表示（コンテナのみ、各アイテムが個別にアニメーション） */
body.is-loaded .site-header {
    animation: fadeIn 0.01s ease both 0s;
}

/* 3. ヘッダー各item: 上から下へ、左から右の順にスタッガー */
.site-logo,
.header-sns,
.header-nav__list li {
    opacity: 0;
}

body.is-loaded .site-logo                        { animation: fadeInDownItem 1.0s ease both 0.10s; }
body.is-loaded .header-sns                       { animation: fadeInDownItem 1.0s ease both 0.25s; }
body.is-loaded .header-nav__list li:nth-child(1) { animation: fadeInDownItem 1.0s ease both 0.40s; }
body.is-loaded .header-nav__list li:nth-child(2) { animation: fadeInDownItem 1.0s ease both 0.55s; }
body.is-loaded .header-nav__list li:nth-child(3) { animation: fadeInDownItem 1.0s ease both 0.70s; }
body.is-loaded .header-nav__list li:nth-child(4) { animation: fadeInDownItem 1.0s ease both 0.85s; }

/* works-single ページ、および同一セッション内の2ページ目以降（header-preloaded）：
   ヘッダー入場アニメーションを抑制して即時表示 */
body.is-works-single .site-header,
body.is-works-single .site-logo,
body.is-works-single .header-sns,
body.is-works-single .header-nav__list li,
body.header-preloaded .site-header,
body.header-preloaded .site-logo,
body.header-preloaded .header-sns,
body.header-preloaded .header-nav__list li {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* 4. FVロゴ・テキスト: 下からスタッガー */
.fv__logo-symbol,
.fv__logo-type,
.fv__text-inner {
    opacity: 0;
}

body.is-loaded .fv__logo-symbol { animation: fadeInUp 1.2s ease both 0.08s; }
body.is-loaded .fv__logo-type   { animation: fadeInUp 1.2s ease both 0.20s; }
body.is-loaded .fv__text-inner  { animation: fadeInUp 1.2s ease both 0.30s; }


/* ============================================
   Top Service Section
   ============================================ */

.top-service {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--sp-section) var(--sp-body);
    background-color: var(--surface--primary);
    /* border-bottom: 1px solid var(--line--primary); */
}

.top-service__border {
    position: absolute;
    top: 0; /* セクション境界ちょうどに配置 */
    left: 0;
    width: 100%;
    height: 1px; /* 位置参照用のみ（高さはWebGLメッシュが管理） */
    pointer-events: none;
    opacity: 0;
}

.section-title p {
    font-family: 'Roboto', sans-serif;
    font-size: var(--heading--h2--r);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text--primary);
}

.top-service__body {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 32px;
}

.top-service__grid {
    display: flex;
    gap: 32px;
}

.top-service__item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

/* WebGL service image canvas */
#service-webgl-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 60;
    pointer-events: none;
}

[data-webgl-media] {
    opacity: 0;
}

.top-service__label {
    align-self: flex-start; /* shrink to text width so ::after matches text length */
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
}

.top-service__label::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 1px;
    background-color: var(--text--primary);

}

.top-service__item:hover .top-service__label::after {
    width: 100%;
    transition: width 0.2s ease;
}

.top-service__img {
    width: 129px;
    height: 168px;
    overflow: hidden;
}

.top-service__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* More ボタン */
.btn-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text--primary);
}

.btn-more__text {
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: var(--label--button--l--r);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
}

.btn-more__text::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 1px;
    background-color: var(--text--primary);

}

.btn-more:hover .btn-more__text::after {
    width: 100%;
    transition: width 0.3s ease;
}

.btn-more__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 9px;
    transition: transform 0.3s ease;

}

.btn-more:hover .btn-more__arrow {
    transform: translateX(4px);
}

.btn-more__arrow img {
    width: 9px;
    height: 15px;
    transform: rotate(90deg);
}

/* ============================================
   Top Projects
   ============================================ */
.top-projects {
    position: relative;
    z-index: 1;
    background-color: var(--surface--primary);
    padding: var(--sp-section) var(--sp-body);
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.top-projects__body {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

/* カテゴリー絞り込みメニュー（Projectsタイトルとリストの間） */
.top-projects__categories {
    display: flex;
    align-items: center;
    gap: 24px;
    list-style: none;
    margin-top: -56px; /* .top-projectsのgap:80pxを詰めて、タイトルとの間隔を24pxに */
}

.top-projects__category {
    position: relative;
    padding: 4px 8px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--text--primary);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.top-projects__category.is-active {
    background-color: var(--surface--hover, #F6F4F2);
}

/* ヘッダーメニューと同じ「取り消し線」演出。ホバー中は伸びて表示、
   アクティブなカテゴリーは常時表示のままにする */
.top-projects__category::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    height: 1px;
    background-color: var(--text--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.top-projects__category:hover::after,
.top-projects__category.is-active::after {
    transform: scaleX(1);
}

.top-projects__categories-divider {
    width: 22px;
    height: 1px;
    background-color: var(--text--primary);
    transform: rotate(90deg);
}

.top-projects__list {
    display: flex;
    flex-direction: column;
    width: 656px;
    list-style: none;
}

.top-projects__item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 0;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    transition: opacity 0.3s ease;
}


.top-projects__left {
    display: flex;
    gap: 112px;
    align-items: flex-start;
}

.top-projects__num {
    font-size: var(--body--s--r);
    line-height: 1.5;
    color: var(--text--primary);
    flex-shrink: 0;
    white-space: nowrap;
}

.top-projects__info {
    width: 185px;
    flex-shrink: 0;
}

.top-projects__title {
    font-size: var(--body--m--r);
    line-height: 1.7;
    color: var(--text--primary);
}

.top-projects__hot {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    border-radius: 3px;
    background-color: var(--text--primary);
    color: var(--surface--primary);
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
    vertical-align: middle;
}

.top-projects__cat {
    font-size: var(--body--s--r);
    line-height: 1.5;
    color: var(--text--secondary);
}

.top-projects__cat-link,
.works-single__meta-cat-link {
    color: inherit;
    text-decoration: none;
}

.top-projects__cat-link:hover,
.works-single__meta-cat-link:hover {
    text-decoration: underline;
}

.top-projects__date {
    font-size: var(--body--s--r);
    line-height: 1.5;
    color: var(--text--primary);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Underline on active item */
.top-projects__item.is-active .top-projects__num,
.top-projects__item.is-active .top-projects__title,
.top-projects__item.is-active .top-projects__date {
    text-decoration: underline;
}

/* 詳細ページから戻ってきた直後、直前まで見ていたprojectのテキストを
   別ページへ推移するまでずっと薄い色にしておく（ホバー時のような
   下線・ビューアー表示は付けず、色のみを変える） */
.top-projects__item.is-visited .top-projects__num,
.top-projects__item.is-visited .top-projects__title,
.top-projects__item.is-visited .top-projects__cat,
.top-projects__item.is-visited .top-projects__date {
    color: var(--text--secondary);
}

/* Right: fixed viewer — centered on screen, shown only while section is in viewport */
.top-projects__viewer {
    position: fixed;
    top: 50%;
    right: var(--sp-body);
    transform: translateY(-50%);
    width: 439px;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    z-index: 50;
    pointer-events: none;
}

.top-projects__img-wrap {
    width: 330px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.top-projects__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    visibility: hidden;
}

.top-projects__img.is-visible {
    visibility: visible;
}

/* ============================================
   Top Get in Touch
   ============================================ */
.top-get-in-touch {
    background-color: var(--surface--secondary);
    border-top: 1px solid var(--line--primary);
    border-bottom: 1px solid var(--line--primary);
}

.top-get-in-touch__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 48px;
    padding: var(--sp-section) var(--sp-body);
    overflow: hidden;
}

/* 背景ワイプ */
.top-get-in-touch__fill {
    position: absolute;
    inset: 0;
    right: auto;
    width: 0%;
    background-color: var(--surface--teritary);
    transition: width 0.5s cubic-bezier(0.76, 0, 0.24, 1);

}

/* ホバーで白くなるワイプ演出はPC（マウス操作）のみ。タブレット・SPはタップが
   :hoverとして残ってしまい、ワイプが押しっぱなしのように見えてしまうため対象外にする */
@media (min-width: 1025px) {
    .top-get-in-touch__link:hover .top-get-in-touch__fill {
        width: 100%;
    }
}

/* コンテンツ共通 */
.top-get-in-touch__inner {
    display: flex;
    align-items: center;
    gap: 48px;
    position: relative;
    z-index: 1;
}

.top-get-in-touch__label {
    font-family: 'Roboto', sans-serif;
    font-size: var(--heading--h2--r);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.top-get-in-touch__arrow img {
    display: block;
    width: 15px;
    height: 25px;
    transform: rotate(90deg);
    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);

}

@media (min-width: 1025px) {
    .top-get-in-touch__link:hover .top-get-in-touch__arrow img {
        transform: rotate(90deg) translateY(-8px);
    }
}

/* ベースレイヤー：oncolor（白） */
.top-get-in-touch__inner:not(.top-get-in-touch__inner--over) .top-get-in-touch__label {
    color: var(--text--oncolor);
}

.top-get-in-touch__inner:not(.top-get-in-touch__inner--over) .top-get-in-touch__arrow img {
    filter: invert(1);
}

/* オーバーレイヤー：コンテナ全幅に広げてclip-pathをfillと同期させる */
.top-get-in-touch__inner--over {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 var(--sp-body);
    gap: 48px;
    z-index: 2;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.5s cubic-bezier(0.76, 0, 0.24, 1);

}

@media (min-width: 1025px) {
    .top-get-in-touch__link:hover .top-get-in-touch__inner--over {
        clip-path: inset(0 0% 0 0);
    }
}

.top-get-in-touch__inner--over .top-get-in-touch__label {
    color: var(--text--primary);
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
    background-color: var(--surface--secondary);
}

.footer-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 40px 20px;
}

/* ── メインエリア（nav + ロゴタイポ） ── */
.footer-main {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
}

/* ── フッターナビ（縦積み・右寄せ） ── */
.footer-nav__list {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    width: 100%;
}

.footer-nav__list a {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    font-size: var(--label--navigation--m);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--text--oncolor);
    white-space: nowrap;
}

.footer-nav__list a::after {
    content: '';
    position: absolute;
    right: 0;
    left: auto;
    top: 50%;
    width: 0;
    height: 1px;
    background-color: var(--text--oncolor);
    transition: width 0.3s ease;

}

.footer-nav__list a:hover::after {
    left: 0;
    right: auto;
    width: 100%;
}

/* ── NODE WORKS 大タイポグラフィ（SVG） ── */
/*
 * SVG の viewBox でバンドごとの切り出し高さを定義。
 * text: y="148" font-size="208" → キャップ天頂が y=0、
 *   viewBox 高さ(18/50/67/148)まで切り出すことで各行を再現。
 * textLength="1400" で常にコンテナ幅いっぱいに描画。
 * clip-path アニメーションで下から順に出現。
 */
.footer-logo {
    width: 100%;
    user-select: none;
}

.footer-logo__band {
    width: 100%;
    /* JS が inset(100% 0 0 0) → inset(0 0 0 0) でアニメーションする */
    /* SVG内部のclip-pathだけに頼ると、浮かび上がりアニメーション中の
       transform（サブピクセルの丸め誤差）で文字の輪郭が帯の境界から
       わずかにはみ出て見えることがあるため、CSS側でも確実にクリップする。
       特に「O」など丸みのある文字は、カーブの頂点が帯の境界線ぎりぎりに
       設計されており、SVG内部のclip-pathと全く同じ境界でCSS側もクリップ
       するだけだとアンチエイリアシングの滲みが1px未満残ることがあるため、
       CSS側は上下をさらに少しだけ内側に削って確実に切り落とす */
    overflow: hidden;
    clip-path: inset(0.75px 0 0.75px 0);
}

.footer-logo__band + .footer-logo__band {
    /* 20/1400 = SVG内の帯間隔をそのまま再現 */
    margin-top: calc(20 / 1400 * 100%);
}

.footer-logo__band svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ── ボトムバー ── */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.footer-bottom__privacy {
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--s--r);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text--secondary);
    transition: color 0.2s ease;
}

.footer-bottom__privacy::after {
    content: '';
    position: absolute;
    right: 0;
    left: auto;
    top: 50%;
    width: 0;
    height: 1px;
    background-color: var(--text--oncolor);
    transition: width 0.3s ease;

}

.footer-bottom__privacy:hover {
    color: var(--text--oncolor);
}

.footer-bottom__privacy:hover::after {
    left: 0;
    right: auto;
    width: 100%;
}

.footer-bottom__sns {
    display: flex;
    align-items: center;
    gap: 32px;
}

.footer-bottom__sns a {
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--s--r);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text--secondary);
    transition: color 0.2s ease;
}

.footer-bottom__sns a::after {
    content: '';
    position: absolute;
    right: 0;
    left: auto;
    top: 50%;
    width: 0;
    height: 1px;
    background-color: var(--text--oncolor);
    transition: width 0.3s ease;

}

.footer-bottom__sns a:hover {
    color: var(--text--oncolor);
}

.footer-bottom__sns a:hover::after {
    left: 0;
    right: auto;
    width: 100%;
}

.footer-bottom__copy {
    font-family: 'Roboto', sans-serif;
    font-size: var(--label--caption--r);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--text--secondary);
}


/* ============================================
   Works Single
   ============================================ */

.works-single {
    position: relative;
    background-color: var(--surface--teritary);
    min-height: 100vh;
}

/* スクロールバー */
.works-scroll-bar {
    position: fixed;
    bottom: var(--sp-body);
    left: var(--sp-body);
    z-index: 110;
    display: none;
}

/* スライダードット（タブレット・SPの横スワイプスライダー用。デスクトップは非表示） */
.works-single__dots {
    display: none;
}

.works-single__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--line--primary);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.works-single__dot.is-active {
    background-color: var(--text--primary);
    transform: scale(1.3);
}

.works-scroll-bar__track {
    width: 1px;
    height: 120px;
    background-color: var(--line--primary);
    position: relative;
    overflow: hidden;
}

.works-scroll-bar__thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    min-height: 24px;
    background-color: var(--text--primary);
}

/* 「Back to All」リンク（固定ヘッダーの下、左上） */
.works-single__back {
    position: relative;
    z-index: 80; /* WebGL canvas(60)・info(70) より上 */
    /* 固定ヘッダー（高さ50px）の裏に隠れないよう、ブレークポイントに関わらず一定の余白を確保する */
    padding: 74px var(--sp-body) 0;
}

/* デスクトップではスクロールしても常に画面左上に留まるfixed配置にする。
   #smooth-content配下のtransformがposition:fixedを無効化するため、
   .works-single__nav・.works-scroll-barと同じくJSでbody直下へ移動して実現する
   （main.js側）。移動によって空く分の高さは.works-single__back-spacerで確保する */
body.is-works-single .works-single__back {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 110;
}

.works-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text--primary);
    text-decoration: none;
}

.works-back-link__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 9px;
    transition: transform 0.3s ease;

}

.works-back-link:hover .works-back-link__arrow {
    transform: translateX(-4px);
}

.works-back-link__arrow img {
    width: 9px;
    height: 15px;
    transform: rotate(-90deg);
}

.works-back-link__text {
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: var(--label--button--l--r);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
}

.works-back-link__text::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 1px;
    background-color: var(--text--primary);

}

.works-back-link:hover .works-back-link__text::after {
    width: 100%;
    transition: width 0.3s ease;
}

/* 2カラムレイアウト */
.works-single__body {
    display: flex;
    align-items: flex-start;
}

/* 左：画像スタック */
.works-single__images {
    flex: 1 1 0;
    min-width: 0;
}

/* 一番最初の画像の上だけ、余白を少し詰める */
.works-single__frame:first-child {
    padding-top: 0;
}

/* 一番最後の画像の下だけ、フッターに近づきすぎないよう余白を広めに取る。
   .works-single__frameは高さ固定(100vh - 101px)でjustify-content:centerのため、
   最後のframe自体にpadding-bottomを足すと画像側の表示スペースが圧迫されて
   中央寄せの位置が上にずれ、逆に直前の画像との間隔が詰まって見えてしまう。
   そのため高さ固定の対象外である.works-single__imagesの末尾に
   余白専用の要素分を足す形にする */
.works-single__images::after {
    content: '';
    display: block;
    height: 320px;
}

.works-single__frame {
    /* .works-single__back（All Projectsリンク・高さ101px）が.works-single__bodyの
       上に追加されたため、100vhのままだと最初の画像セクションがビューポートの
       下端をはみ出し、垂直方向の見え方が中央からずれてしまう（.works-single__infoの
       高さ調整と同じ原因の不具合） */
    height: calc(100vh - 101px);
    /* 画像と画像の間の余白（padding: 上下）。画像同士の間隔を狭めるため60pxに調整
       （frame-innerのwidth計算式の221px = 101px(.works-single__back) + 60px*2 と対応させている） */
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.works-single__frame-inner {
    flex: none;
    aspect-ratio: 16 / 9;
    /* 幅いっぱい（横基準）にすると上下paddingを突き破ることがあり、
       逆に高さいっぱい（縦基準）だけにすると横幅が余って画像が小さく見える。
       どちらの制約にも収まる大きい方のサイズ（=object-fit:containと同じ考え方）
       を選ぶため、幅の候補（100%）と高さ基準で算出した幅の候補を min() で比較する */
    width: min(100%, calc((100vh - 221px) * 16 / 9));
    height: auto;
    overflow: hidden;
}

.works-single__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* PCで一部環境（GPU/ドライバ依存）ではWebGLテクスチャ描画が失敗し画像が
       表示されない不具合が確認されたため、works-singleの画像は幅を問わず
       常に通常のimg表示にする（service-shader.js側でもメッシュ生成をスキップ） */
    opacity: 1 !important;
}

/* 右：情報パネル（ScrollSmoother 有効時は JS で transform 相殺して固定表示） */
.works-single__info {
    flex: 0 0 480px;
    width: 480px;
    /* .works-single__back（All Projectsリンク・高さ101px）が.works-single__bodyの
       上に追加されたため、100vhのままだと下端がビューポートの下端をはみ出し、
       一番下に配置されるprev/nextの矢印ボタンが画面下端で切れてしまう */
    height: calc(100vh - 101px);
    padding: 16px 64px 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 40px;
    border-left: 1px solid var(--line--tertiary);
    position: relative;
    z-index: 70; /* WebGL canvas(60) より上 */
    /* is-compactに切り替えても収まりきらない極端なケースの保険 */
    overflow-y: auto;
}

.works-single__info-inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* 画面が低くテキストが収まりきらない場合、JS(main.js)が付与するクラス。
   幅は元のまま（416px）統一し、余白だけ詰めて縦方向に収める
   （それでも収まらない場合の保険として .works-single__info 自体はスクロール可能にしてある） */
.works-single__info.is-compact {
    padding: 40px 56px;
    gap: 24px;
}
.works-single__info.is-compact .works-single__info-inner {
    gap: 12px;
}

/* JS(GSAP)のロード完了前に一瞬フルテキストが見えてしまわないよう、
   初期状態は CSS 側でも隠しておく（GSAP の fromTo と同じ状態に合わせる） */
.works-single__num,
.works-single__title,
.works-single__meta,
.works-single__section {
    clip-path: inset(0 100% 0 0);
}

/* 画像も同じ理由でCSS側に初期非表示状態を持たせる（JSのfromToと合わせる。
   PCは上から下。タブレット・SPは左から右になるため、下の Responsive
   セクション内の .works-single__frame-inner で上書きする） */
.works-single__frame-inner {
    clip-path: inset(0 0 100% 0);
}

.works-single__num {
    font-size: var(--body--s--r);
    line-height: 1.5;
    color: var(--text--primary);
    text-align: left;
}

.works-single__title {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--l--r);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text--primary);
}

.works-single__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.works-single__meta-item {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--s--r);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text--primary);
}

.works-single__meta-item a {
    color: var(--text--secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.works-single__section {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.works-single__section-label {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--s--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
}

.works-single__section-text {
    font-family: 'Roboto', 'Zen Kaku Gothic New', sans-serif;
    font-size: var(--body--s--r);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text--primary);
}

/* 前後ナビ：前/次の記事に移動しても同じ画面位置でクリックし続けられるよう、
   #smooth-content配下から抜けてbody直下に移動し(main.js)、ビューポート基準の
   position:fixedで置く（.works-scroll-barと同じ理由・同じ方式） */
.works-single__nav {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

body.is-works-single .works-single__nav {
    position: fixed;
    right: 64px;
    bottom: 80px;
    z-index: 110;
}

.works-single__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    background-color: var(--surface--secondary);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.works-single__nav-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--surface--primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    z-index: 0;
}

.works-single__nav-btn--prev::before {
    transform-origin: 100% 50%;
}

.works-single__nav-btn--next::before {
    transform-origin: 0% 50%;

}

.works-single__nav-btn:hover::before {
    transform: scaleX(1);
}

.works-single__nav-btn:hover {
    border-color: var(--line--primary);
}

.works-single__nav-btn img {
    width: 7px;
    height: 11px;
    display: block;
    filter: invert(1);
    position: relative;
    z-index: 1;
    transition: filter 0.3s ease;

}

.works-single__nav-btn:hover img {
    filter: invert(0);
}

.works-single__nav-btn--prev img {
    transform: rotate(-90deg);
}

.works-single__nav-btn--next img {
    transform: rotate(90deg);
}

.works-single__nav-btn.is-disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}


/* ============================================
   ページ遷移カーテン
   ============================================ */

#page-blur-layer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    /* 暗さはブラーと同じ進行度でJS側がbackground-colorのalphaを直接更新する */
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

#page-curtain {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: var(--surface--primary);
    pointer-events: none;
    /* clip-pathで作った波形の縁（幕が上がってくる先端）に沿って、うっすら影を落とす。
       box-shadowはclip-pathで切り取られた形を無視して元のボックス全体にかかって
       しまうため、切り取り後の見た目の形に沿うdrop-shadowを使う */
    filter: drop-shadow(0 -10px 18px rgba(0, 0, 0, 0.12));
}

/* ============================================
   Works Overlay
   ============================================ */

.works-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background-color: var(--surface--teritary);
    /* clip-path と overflow は JS が制御 */
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
}

.works-overlay.is-open {
    visibility: visible;
    pointer-events: auto;
    /* overflow-y は JS でアニメ完了後に auto に変更 */
}

/* オーバーレイ内は sticky が正常動作するためそのまま使用 */
.works-overlay .works-single__info {
    position: sticky;
    top: 0;
}

/* ヒーロー画像（遷移中に body に直接追加される浮遊img） */
.works-hero-img {
    position: fixed;
    z-index: 300;
    pointer-events: none;
    object-fit: cover;
    opacity: 0;
}


/* ============================================
   Service Page
   ============================================ */

/* ─── Page wrapper: start below fixed header ─── */
.service-page {
    padding-top: 50px;
}

/* ─── Page title ─── */
.service-page__title {
    padding: 64px var(--sp-body);
    background-color: var(--surface--primary);
}

.service-page__title-text {
    font-family: 'Roboto', sans-serif;
    font-size: 65px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text--primary);
    /* JS(GSAP)のロード完了前に一瞬フルテキストが見えてしまわないよう、
       初期状態はCSS側でも隠しておく（GSAPのfromToと同じ状態に合わせる） */
    clip-path: inset(0 0 100% 0);
}

/* ─── Section layout ─── */
.service-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 300px;
    background-color: var(--surface--primary);
}

.service-section--border {
    min-height: 900px;
}

/* Others（最後のセクション）：下余白なし・高さはコンテンツ依存 */
.service-section:not(.service-section--border) {
    padding-bottom: 0;
}

/* ─── Left column (sticky via JS) ─── */
.service-section__left {
    padding: 150px 64px 150px var(--sp-body);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.service-category__name {
    font-family: 'Roboto', sans-serif;
    font-size: var(--heading--h2--r);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text--primary);
    white-space: nowrap;
}

.service-category__sub {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
}

/* ─── Right column ─── */
.service-section__right {
    width: 860px;
    padding-right: var(--sp-body);
    padding-top: 150px;
    display: flex;
    flex-direction: column;
    gap: 80px;
    flex-shrink: 0;
    position: relative;
}

/* ボーダーライン（JS で scaleX アニメーション） */
.service-section__border-line {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line--primary);
}

.service-section--border + .service-section .service-section__border-line {
    display: block;
}


/* ─── Row (label + content) ─── */
.service-row {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    width: 100%;
}

.service-row__label {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--s--r);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text--primary);
    width: 102px;
    flex-shrink: 0;
}

.service-row__body {
    font-family: 'Roboto', 'Zen Kaku Gothic New', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
    flex: 1;
}

.service-row--intro .service-row__label {
    font-weight: 700;
}

/* ─── Price: Web design ─── */
.service-price {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.service-price__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.service-price__item {
    display: flex;
    gap: 70px;
    align-items: flex-end;
}

.service-price__name {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
    width: 96px;
    flex-shrink: 0;
}

.service-price__value {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
    white-space: nowrap;
}

.service-price__note {
    font-family: 'Roboto', 'Zen Kaku Gothic New', sans-serif;
    font-size: 8px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--text--secondary);
    white-space: nowrap;
}

.service-price__on-request {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
}

/* ─── Price: Logo design (plans) ─── */
.service-price--plans {
    align-items: flex-end;
}

.service-price__plan-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-end;
    width: 100%;
}

.service-price__plan {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.service-price__plan-info {
    display: flex;
    gap: 32px;
    align-items: center;
    width: 404px;
    flex-shrink: 0;
}

.service-price__plan-name {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
    width: 72px;
    flex-shrink: 0;
}

.service-price__plan-includes {
    font-family: 'Roboto', 'Zen Kaku Gothic New', sans-serif;
    font-size: var(--body--s--r);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text--primary);
    white-space: nowrap;
}

.service-price__plan-right {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
}

.service-price__plan-days {
    font-family: 'Roboto', sans-serif;
    font-size: 8px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--text--secondary);
}

.service-price__plan-value {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
}

/* ─── Price: Starting from ─── */
.service-price--from {
    flex: 0;
    flex-shrink: 0;
}

.service-price__from-row {
    display: flex;
    gap: 70px;
    align-items: center;
}

.service-price__from-label {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
    width: 96px;
    flex-shrink: 0;
}

.service-price__from-value {
    font-family: 'Roboto', 'Zen Kaku Gothic New', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
    white-space: nowrap;
}

.service-price__from-value span {
    font-size: var(--body--s--r);
    line-height: 1.5;
}

/* ─── Option ─── */
.service-option {
    background-color: var(--surface--teritary);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 40px 56px;
    flex: 1;
}

.service-option__item {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    font-family: 'Roboto', 'Zen Kaku Gothic New', sans-serif;
    font-size: var(--body--s--r);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text--primary);
    white-space: nowrap;
}

/* ─── Recently ─── */
.service-recently-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.service-recently__more {
    align-self: flex-end;
}

.service-recently {
    display: flex;
    gap: 40px;
    align-items: stretch;
    width: 100%;
}

.service-recently__item {
    /* 3件に満たない場合も引き伸ばさず、3件表示時と同じ幅のまま左詰めにする */
    flex: 0 0 calc((100% - 40px * 2) / 3);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

.service-recently__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;

}

a.service-recently__item:hover img {
    transform: scale(1.05);
}

/* ─── Everything on Record ─── */
.service-everything {
    background-color: var(--surface--primary);
    padding: var(--sp-section) var(--sp-body);
    overflow: hidden;
}

.service-everything__inner {
    background-color: var(--surface--secondary);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 64px;
    width: 100%;
    word-break: break-word;
}

.service-everything__heading {
    font-family: 'Roboto', sans-serif;
    /* 固定65px + nowrap だと、1024px超〜おおよそ1300px台の中間幅で
       本文（固定462px）と衝突してテキストが枠外に切れて見えていたため、
       画面幅に応じて縮み、折り返しも許可するようにした */
    font-size: clamp(40px, 5vw, 65px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text--oncolor);
    white-space: normal;
    flex-shrink: 1;
}

.service-everything__body {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--oncolor);
    flex: 1 1 320px;
    width: auto;
    max-width: 462px;
    min-width: 280px;
}

.service-everything__body p + p {
    margin-top: 0;
}


/* ============================================
   About Page
   ============================================ */

/* ─── Page wrapper: start below fixed header ─── */
.about-page {
    padding-top: 50px;
}

/* ─── Page title ─── */
.about-page__title {
    padding: 64px var(--sp-body);
    background-color: var(--surface--primary);
}

.about-page__title-text {
    font-family: 'Roboto', sans-serif;
    font-size: 65px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text--primary);
    clip-path: inset(0 0 100% 0);
}

/* ロゴ（1文字ずつクリップパスで出現）も同じ理由で初期状態を隠しておく */
.about-lead__logo-symbol path,
.about-lead__logo-node path,
.about-lead__logo-works path {
    clip-path: inset(0 0 100% 0);
}

/* ─── Lead section ─── */
.about-lead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background-color: var(--surface--primary);
    padding-bottom: var(--sp-section);
}

/* --- Left: logo + info --- */
.about-lead__left {
    flex-shrink: 0;
    width: 398px;
    height: calc(100vh - 50px); /* 1画面（ヘッダー分を除く）に収める */
    padding: 140px 0 60px var(--sp-body);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ロゴ一式は --als（スケール係数）倍で算出。デスクトップは --als:1 で従来値と同一 */
.about-lead__logo {
    --als: 1;
    position: relative;
    width: calc(398px * var(--als));
    height: calc(107px * var(--als));
}

.about-lead__logo-symbol {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(123px * var(--als));
    height: calc(107px * var(--als));
    overflow: visible;
}

.about-lead__logo-type {
    position: absolute;
    left: calc(154px * var(--als));
    top: 0;
    width: calc(244px * var(--als));
    height: calc(107px * var(--als));
}

.about-lead__logo-node {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(181px * var(--als));
    height: calc(47px * var(--als));
    overflow: visible;
}

.about-lead__logo-works {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(244px * var(--als));
    height: calc(47px * var(--als));
    overflow: visible;
}

.about-lead__info {
    display: flex;
    flex-direction: column;
    gap: 27px;
}

.about-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    clip-path: inset(0 100% 0 0);
}

.about-item__label {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--s--r);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text--primary);
    white-space: nowrap;
}

.about-item__value {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
    white-space: nowrap;
}

/* --- Right: About / Concept / What We Value --- */
.about-lead__right {
    width: 601px;
    padding-top: 150px;
    padding-right: var(--sp-body);
    display: flex;
    flex-direction: column;
    gap: 114px;
    flex-shrink: 0;
}

.about-lead__row {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    width: 100%;
    clip-path: inset(0 100% 0 0);
}

.about-lead__label {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--s--r);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text--primary);
    width: 102px;
    flex-shrink: 0;
}

.about-lead__body {
    flex: 1;
    font-family: 'Roboto', 'Zen Kaku Gothic New', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
}

/* ─── Member ─── */
.about-member {
    display: flex;
    flex-direction: column;
    gap: 44px;
    padding: var(--sp-section) var(--sp-body);
    background-color: var(--surface--primary);
}

.about-member__body {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    clip-path: inset(0 100% 0 0);
}

.about-member__profile {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
}

.about-member__photo {
    width: 242px;
    height: 316px;
    overflow: hidden;
}

.about-member__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-member__meta {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.about-member__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.about-member__name {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
}

.about-member__sns-list {
    display: flex;
    align-items: center;
    gap: 16px;
}

.about-member__sns {
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--s--r);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text--primary);
}

.about-member__sns::after {
    content: '';
    position: absolute;
    right: 0;
    left: auto;
    top: 50%;
    width: 0;
    height: 1px;
    background-color: var(--text--primary);
    transition: width 0.3s ease;

}

.about-member__sns:hover::after {
    left: 0;
    right: auto;
    width: 100%;
}

.about-member__role {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--s--r);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text--secondary);
}

.about-member__bio {
    width: 666px;
    font-family: 'Roboto', 'Zen Kaku Gothic New', sans-serif;
    font-size: var(--body--s--r);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text--primary);
}


/* ============================================
   Contact Page
   ============================================ */

.contact-page {
    padding-top: 50px;
}

.contact-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--sp-section) var(--sp-body);
    background-color: var(--surface--primary);
}

.contact-hero__intro {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-shrink: 0;
}

.contact-hero__title {
    font-family: 'Roboto', sans-serif;
    font-size: 65px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text--primary);
    white-space: nowrap;
    clip-path: inset(0 0 100% 0);
}

.contact-hero__desc {
    font-family: 'Roboto', 'Zen Kaku Gothic New', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
    width: 380px;
}

/* --- Form --- */
/* Contact Form 7 は .contact-form の中に .wpcf7 > form.wpcf7-form を差し込むため、
   実際にフィールドを並べるレイアウトは .wpcf7-form 側に適用する */
.contact-form {
    width: 800px;
    flex-shrink: 0;
}

/* JS(GSAP)のロード完了前に一瞬フル表示が見えてしまわないよう、
   初期状態はCSS側でも隠しておく（GSAPのgsap.setと同じ状態に合わせる） */
.contact-hero__desc {
    clip-path: inset(0 0 100% 0);
}

.contact-form {
    clip-path: inset(0 100% 0 0);
}

.contact-form .wpcf7-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 27px;
    width: 100%;
}

.contact-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.contact-form .screen-reader-response {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.contact-form .wpcf7-response-output {
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid #c0392b;
    border-radius: 4px;
    color: #c0392b;
    font-size: 14px;
    text-align: center;
}

.contact-form .wpcf7-form.sent .wpcf7-response-output {
    border-color: #2e7d32;
    color: #2e7d32;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.contact-field__label {
    display: flex;
    align-items: center;
    height: 27px;
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
}

.contact-field__required {
    color: var(--text--error);
}

.contact-field__input,
.contact-field__textarea {
    width: 100%;
    padding: 20px 24px;
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
    background-color: var(--surface--teritary);
    border: 1px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.contact-field__input::placeholder,
.contact-field__textarea::placeholder {
    color: var(--text--placeholder);
}

.contact-field__input:focus,
.contact-field__textarea:focus {
    outline: none;
    background-color: var(--surface--primary);
    border-color: var(--line--primary);
}

.contact-field__textarea {
    height: 238px;
    resize: none;
}

.contact-field__error {
    display: none;
    font-family: 'Roboto', 'Zen Kaku Gothic New', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--text--error);
}

.contact-field.is-error .contact-field__input,
.contact-field.is-error .contact-field__textarea,
.contact-field.is-error .contact-field__input:focus,
.contact-field.is-error .contact-field__textarea:focus {
    background-color: var(--surface--teritary);
    border-color: var(--line--error);
}

.contact-field.is-error .contact-checkbox__box {
    border-color: var(--line--error);
}

.contact-field.is-error .contact-field__error {
    display: block;
}

/* --- Checklist / Checkbox --- */
.contact-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    cursor: pointer;
}

.contact-checkbox input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.contact-checkbox__box {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-color: var(--surface--primary);
    border: 1px solid var(--line--primary);
}

.contact-checkbox__check {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.contact-checkbox input:checked + .contact-checkbox__box {
    background-color: var(--surface--secondary);
    border-color: var(--surface--secondary);
}

.contact-checkbox input:checked + .contact-checkbox__box .contact-checkbox__check {
    opacity: 1;
}

.contact-checkbox__label {
    font-family: 'Roboto', 'Zen Kaku Gothic New', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
}

.contact-checkbox__link {
    color: var(--text--link);
    text-decoration: underline;
}

.contact-field--privacy {
    gap: 8px;
    align-items: center;
    text-align: center;
}

/* --- Submit --- */
.contact-submit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.contact-submit__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 24px 32px;
    background-color: var(--surface--secondary);
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;

}

.contact-submit__btn:hover {
    opacity: 0.8;
}

.contact-submit__label {
    font-family: 'Roboto', sans-serif;
    font-size: var(--label--button--l--r);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--text--oncolor);
    white-space: nowrap;
}

.contact-submit__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 9px;
}

.contact-submit__arrow img {
    display: block;
    width: 9px;
    height: 15px;
    /* filter(invert)とtransform(rotate)を同時に使うSVG<img>は、iOS Safari等の
       WebKitで独自のGPU合成レイヤーが生成されず描画自体が消えてしまうことが
       ある既知の不具合がある。translateZ(0)で明示的にレイヤーを分離し、
       backface-visibility:hiddenを併用する定番の回避策を適用する */
    transform: rotate(90deg) translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    filter: invert(1);
}

.contact-submit__note {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--s--r);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text--primary);
}


/* ============================================
   Privacy Policy Popup
   ============================================ */

.privacy-modal {
    position: fixed;
    inset: 0;
    z-index: 10001; /* header(10000) より上 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.privacy-modal.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.privacy-modal__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(17, 16, 16, 0.6);
}

.privacy-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 1080px;
    max-width: 100%;
    max-height: calc(100vh - 64px);
}

/* 背景・スクロールバー・本文をまとめたラッパー。×ボタンはpanelの外側
   （right:-60px等）に配置されているため、クリップパス演出はこちら側だけに
   掛け、×ボタンが巻き込まれて消えないようにする */
.privacy-modal__body {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 62px 92px;
    background-color: var(--surface--primary);
    /* 開閉のクリップパス演出はJS(GSAP)側で制御する */
}

/* --- 実際にスクロールする内側コンテナ（スクロールバーはこの外に置き、追従しない） --- */
.privacy-modal__scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* ネイティブスクロールバーは非表示にし、独自スクロールバーに置き換える */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.privacy-modal__scroll::-webkit-scrollbar {
    display: none;
}

/* --- カスタムスクロールバー（works-single のバーと同じ見た目） --- */
/* panel の padding box が基準になるため top/bottom: 0 でコンテンツ全高に一致する */
.privacy-modal__scrollbar {
    position: absolute;
    top: 16px;
    bottom: 16px;
    right: 32px;
    display: none;
}

.privacy-modal__scrollbar.is-visible {
    display: block;
}

.privacy-modal__scrollbar-track {
    width: 1px;
    height: 100%;
    background-color: var(--line--primary);
    position: relative;
    overflow: hidden;
}

.privacy-modal__scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background-color: var(--text--primary);
}


.privacy-modal__close-x {
    position: absolute;
    top: 0;
    right: -60px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1;
}

/* .privacy-modal__panelはwidth:1080pxだがmax-width:100%でウィンドウ幅に応じて
   縮む。right:-60pxは「パネルの外」に固定オフセットしているため、パネルが
   1080pxいっぱいに表示されない中間幅（PCでもウィンドウを狭めた場合など）では
   ×ボタンが画面右端からはみ出してしまう。パネルが縮み始める境界
   （1080px + 左右padding64px = 1144px）を下回る間は、パネル内側に収める */
@media (min-width: 1025px) and (max-width: 1200px) {
    .privacy-modal__close-x {
        right: 0;
    }
}

.privacy-modal__close-x::before,
.privacy-modal__close-x::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 1px;
    background-color: var(--text--oncolor);
    transform-origin: center;
    transition: opacity 0.2s ease;
}

.privacy-modal__close-x::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.privacy-modal__close-x::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.privacy-modal__close-x:hover::before,
.privacy-modal__close-x:hover::after {
    opacity: 0.6;
}

.privacy-modal__header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    width: 100%;
}

.privacy-modal__title {
    font-family: 'Roboto', sans-serif;
    font-size: 45px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text--primary);
    white-space: nowrap;
}

.privacy-modal__intro {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 500;
    line-height: 1.7;
    color: var(--text--primary);
    width: 100%;
}

.privacy-modal__list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.privacy-modal__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.privacy-modal__item-label {
    display: flex;
    align-items: center;
    width: 100%;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line--primary);
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
}

.privacy-modal__item-body {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
}

.privacy-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 24px 32px;
    background-color: var(--surface--secondary);
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    font-family: 'Roboto', sans-serif;
    font-size: var(--label--button--l--r);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--text--oncolor);
    white-space: nowrap;

}

.privacy-modal__close:hover {
    opacity: 0.8;
}

/* ============================================
   Thanks Page
   ============================================ */

.thanks-page {
    padding-top: 50px;
}

.thanks-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
    padding: 160px var(--sp-body);
    background-color: var(--surface--primary);
}

.thanks-hero__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 38px;
    color: var(--text--primary);
    text-align: center;
}

.thanks-hero__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.thanks-hero__title {
    font-family: 'Roboto', sans-serif;
    font-size: 84px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    white-space: nowrap;
    clip-path: inset(0 0 100% 0);
}

.thanks-hero__lead {
    font-family: 'Roboto', 'Zen Kaku Gothic New', sans-serif;
    font-size: var(--body--l--m);
    font-weight: 500;
    line-height: 1.6;
}

.thanks-hero__desc {
    font-family: 'Roboto', 'Zen Kaku Gothic New', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
}

.thanks-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 24px 32px;
    background-color: var(--surface--secondary);
    color: var(--text--oncolor);
    font-family: 'Roboto', sans-serif;
    font-size: var(--label--button--l--r);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: opacity 0.2s ease;

}

.thanks-hero__btn:hover {
    opacity: 0.8;
}

/* ============================================
   404 Page
   ============================================ */

.error-page {
    padding-top: 50px;
}

.error-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 81px;
    padding: 160px var(--sp-body);
    background-color: var(--surface--primary);
}

.error-hero__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.error-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text--secondary);
    white-space: nowrap;
}

.error-num {
    font-family: 'Roboto', sans-serif;
    font-size: 134px;
    font-weight: 500;
    line-height: 0.8;
    letter-spacing: -0.02em;
}

.error-en {
    font-family: 'Roboto', sans-serif;
    font-size: var(--body--l--m);
    font-weight: 500;
    line-height: 1.6;
}

.error-ja {
    font-family: 'Roboto', 'Zen Kaku Gothic New', sans-serif;
    font-size: var(--body--m--r);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text--primary);
    width: 392px;
    text-align: center;
}

.error-page__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 24px 32px;
    background-color: var(--surface--secondary);
    color: var(--text--oncolor);
    font-family: 'Roboto', sans-serif;
    font-size: var(--label--button--l--r);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: opacity 0.2s ease;

}

.error-page__btn:hover {
    opacity: 0.8;
}

/* ============================================
   Works Archive（/works/ 一覧ページ）
   ============================================ */
.works-archive {
    padding: var(--sp-section) var(--sp-body);
}

.works-archive__filter {
    margin: 16px 0 40px;
    font-size: var(--body--m--r);
    color: var(--text--secondary);
}

.works-archive__filter-reset {
    color: var(--text--primary);
    text-decoration: underline;
}

.works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 40px;
}

.works-item__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.works-item__link img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.works-item .works-title {
    margin-top: 12px;
    font-size: var(--body--m--r);
    color: var(--text--primary);
}

.works-item__cat {
    margin-top: 4px;
    font-size: var(--body--s--r);
    color: var(--text--secondary);
}

.works-item__cat-link {
    color: inherit;
    text-decoration: none;

}

.works-item__cat-link:hover {
    text-decoration: underline;
}


/* ============================================
   Responsive — Tablet（〜1024px）
   デスクトップのルールは変更せず、ここでの上書きのみで対応する
   ============================================ */
@media (max-width: 1024px) {

    /* タブレット・SPはタッチ操作のためマウスホバー前提の演出
       （下線・取り消し線の伸縮、矢印の移動）は不要。タップ後に
       ホバー状態が残ってしまう挙動も避けるため、無効化する */
    .header-sns a:hover::after,
    .header-nav__list li a:hover::after,
    .top-service__item:hover .top-service__label::after,
    .btn-more:hover .btn-more__text::after,
    .top-projects__category:hover::after,
    .top-projects__cat-link:hover,
    .works-single__meta-cat-link:hover,
    .footer-nav__list a:hover::after,
    .footer-bottom__privacy:hover::after,
    .footer-bottom__sns a:hover::after,
    .works-back-link:hover .works-back-link__text::after,
    .about-member__sns:hover::after,
    .works-item__cat-link:hover {
        width: 0 !important;
        transform: scaleX(0) !important;
        text-decoration: none !important;
    }

    .btn-more:hover .btn-more__arrow,
    .works-back-link:hover .works-back-link__arrow {
        transform: none !important;
    }

    .works-single__nav-btn:hover::before {
        transform: scaleX(0) !important;
    }

    .works-single__nav-btn:hover img {
        filter: invert(1) !important;
    }

    :root {
        --sp-body:    40px;
        --sp-section: 80px;
    }

    /* ── FV ── */
    /* FVの下から白背景（.top-service）がせり上がってくるパララックスは、
       デスクトップではScrollSmootherのdata-speed（.fvに"0.5"指定）で実現しているが、
       タブレット・SPはScrollSmoother自体を作らずネイティブスクロールのため
       data-speedが効かない。
       position:stickyで代用を試みたが、モバイルブラウザのアドレスバーが
       スクロール中に自動で隠れる際、ビューポートサイズの変化に伴ってsticky要素の
       「閾値を超えたかどうか」の再計算がズレ、FV画像が本来の位置より下にドリフトして
       見える不具合が起きた。position:fixedであれば、この閾値判定を伴う特殊な
       計算が発生せず、常に「現在のビューポート」を基準に描画されるため、
       この種のドリフトが起きない。
       fixedにするとドキュメントフロー上の高さがゼロになる（後続要素が
       せり上がってこられない）ため、.top-serviceにFVの高さ分のmargin-topを
       スペーサーとして与えて元のレイアウト高さを維持する */
    .fv {
        --fvs: 0.8;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }

    .fv__logo {
        left: 40px;
        bottom: 120px;
    }

    .fv__text {
        right: 40px;
        bottom: 120px;
    }

    /* ── Service: タイトルとボディを縦積み。More はグリッドの下・右寄せ ── */
    .top-service {
        flex-direction: column;
        /* デスクトップ用の align-items:flex-start が残っていると、.top-service__body が
           コンテンツ幅にしか広がらず、下のalign-items:flex-endによるMoreボタンの
           右寄せがセクション本来の右端（画面右）まで届かなかったため、全幅にする */
        align-items: stretch;
        gap: 48px;
        /* セクション上端の WebGL 境界メッシュ（高さ80px・背景色で塗る）に
           見出しが被って欠けないよう、上だけ 100px を確保する */
        padding-top: 100px;
        /* .fvをposition:fixedにした分、ドキュメントフロー上で失われた高さ
           （FV自身の高さぶん）をここで補い、最初の1画面がFVで占められる
           従来のレイアウトを維持する。paddingだと.top-serviceのbackground-color
           （不透明）がこの分まで塗られてしまい、z-indexの関係でfixedなFVの上に
           白い背景が重なって見える不具合になったため、marginに戻す。
           marginがoverflow:visibleな祖先を突き抜けてhtml全体の高さに加算される
           問題は、#smooth-contentにdisplay:flow-rootを設定して
           マージン相殺（collapse）自体を止めることで解決する */
        margin-top: 100vh;
    }

    .top-service__body {
        flex-direction: column;
        align-items: flex-end;
        gap: 24px;
    }

    /* タブレットは最大4列のグリッドにし、5個目以降は自動的に折り返す */
    .top-service__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        width: 100%;
    }

    .top-service__img {
        width: 100%;
        height: auto;
        aspect-ratio: 129 / 168;
    }

    /* ── Projects: ホバー前提のビューアはタッチ主体のため非表示。リストを全幅に ── */
    /* タイトル下の余白をServiceと揃える（Serviceのタブレット時のgap:48pxと同じ値） */
    .top-projects {
        gap: 48px;
    }

    /* ベースの margin-top:-56px は desktop の gap:80px 用に計算された値のため、
       このgap:48pxのままだと余白が詰まりすぎる。タイトル直下の余白を
       gap:48pxそのまま活かすため打ち消す */
    .top-projects__categories {
        margin-top: 0;
    }

    .top-projects__list {
        width: 100%;
        max-width: 656px;
    }

    .top-projects__viewer {
        display: none;
    }

    .top-projects__left {
        gap: 64px;
    }

    /* ── Service page: 2カラム → 縦積み（左カラムの固定・切替は main.js 側でも無効化） ── */
    .service-page__title,
    .about-page__title {
        padding: 48px var(--sp-body);
    }

    .service-section {
        flex-direction: column;
        padding-bottom: 120px;
    }

    .service-section--border {
        min-height: 0;
    }

    /* 縦積みではセクション自体の上ボーダーで区切る（右カラム内のラインは非表示） */
    .service-section--border + .service-section {
        border-top: 1px solid var(--line--primary);
    }

    .service-section--border + .service-section .service-section__border-line {
        display: none;
    }

    .service-section__left {
        padding: 64px var(--sp-body) 0;
    }

    .service-section__right {
        width: 100%;
        padding: 48px var(--sp-body) 0;
        gap: 56px;
    }

    /* ── Everything on Record（service / about 共通）: 縦積み ── */
    .service-everything__inner {
        flex-direction: column;
        gap: 40px;
        padding: 48px;
    }

    .service-everything__heading {
        font-size: 48px;
        white-space: normal;
    }

    .service-everything__body {
        flex: none;
        width: 100%;
    }

    /* ── About page: 2カラム → 縦積み ── */
    .about-lead {
        flex-direction: column;
        gap: 64px;
    }

    .about-lead__left {
        width: 100%;
        height: auto;
        padding: 48px var(--sp-body) 0;
        gap: 48px;
        justify-content: flex-start;
    }

    .about-lead__right {
        width: 100%;
        /* 左カラム（Services項目）の直後に(About)がすぐ来て窮屈にならないよう
           上に十分な余白を確保する */
        padding: 64px var(--sp-body) 0;
        gap: 64px;
    }

    .about-member__bio {
        width: auto;
        flex: 1;
        min-width: 0;
    }

    /* ── Works detail: テキスト上・画像は縦並び（タブレット・SP共通デザイン） ── */
    .works-single__body {
        flex-direction: column;
    }

    body.is-works-single .works-single__back {
        position: static;
    }

    /* All Projectsボタン上の余白 */
    .works-single__back {
        padding-top: 98px;
    }

    .works-single__info {
        order: 1;
        flex: none;
        width: 100%;
        height: auto;
        padding: 88px var(--sp-body) 0;
        justify-content: flex-start;
        gap: 32px;
        border-left: none;
    }

    /* PC版のfixed配置（bodyへの移動）はタブレット・SPでは行わない（main.js側でも判定）ため、
       ここで通常配置に戻しておく */
    body.is-works-single .works-single__nav {
        position: static;
        right: auto;
        bottom: auto;
    }

    /* 並び順：All Projects → No/タイトル → Category等のリスト → 画像 → テキスト群 → 前後ナビ。
       .works-single__info・.works-single__info-innerをdisplay:contentsにして
       箱としての存在を消し、中の子要素を.works-single__bodyの直接の
       flexアイテムとして扱えるようにすることで、DOM移動を使わずCSSのorderだけで
       並び替えを実現する。ただしdisplay:contentsにした親のpadding・gapは効かなくなる
       （そもそもボックスが生成されないため）ので、左右の余白・要素間の余白は
       それぞれの子要素に個別に持たせ直す必要がある */
    .works-single__info,
    .works-single__info-inner {
        display: contents;
    }

    .works-single__num,
    .works-single__title,
    .works-single__meta,
    .works-single__section {
        padding-left: var(--sp-body);
        padding-right: var(--sp-body);
    }

    .works-single__num,
    .works-single__title {
        order: 1;
    }

    /* All Projectsのすぐ下に余白を作る */
    .works-single__num {
        margin-top: 48px;
    }

    .works-single__meta {
        /* タイトルの直後・画像より上に配置 */
        order: 2;
        margin-top: 16px;
        gap: 4px;
    }

    .works-single__images {
        order: 3;
        flex: none;
        width: 100%;
        /* 横スワイプスライダーではなく、画像を縦に並べるだけの普通のブロックにする */
        display: flex;
        flex-direction: column;
        gap: 24px;
        /* 画像とConceptの間隔は.works-single__section側のmargin-topで
           ちょうど40pxになるよう管理するため、ここでは下paddingを持たない */
        padding: 40px var(--sp-body) 0;
    }

    /* タブレット・SPではこのページの画像にWebGLメッシュを描画しない（service-shader.js側でスキップ）
       ため、全画面固定のcanvas自体を非表示にする。position:relativeやz-indexを
       画像側に付けて対処すると、GSAP ScrollSmootherのタッチスクロール判定に
       干渉する場合があるため、この方法にしている */
    body.is-works-single #service-webgl-canvas {
        display: none;
    }

    .works-single__frame {
        flex: none;
        width: 100%;
        height: auto;
        padding: 0;
    }

    .works-single__frame-inner {
        flex: none;
        aspect-ratio: 16 / 9;
        clip-path: inset(0 100% 0 0);
    }

    /* works-single__img は幅を問わず常時通常表示にしたため、ここでの上書きは不要
       （style.css内の.works-single__imgベース定義を参照） */

    /* TOP Serviceタイル・Aboutメンバー写真も同じ理由（ネイティブスクロール中の
       WebGL位置追従がメインスレッドを圧迫しカクつきの原因になる）でWebGL
       メッシュ生成をスキップするため、通常のimg表示に切り替える
       （service-shader.js側でも同じ条件でスキップ） */
    .top-service__img img,
    .about-member__photo img,
    .service-recently__item img {
        opacity: 1;
    }

    /* JS(GSAP)のクリップパス出現アニメーション実行前に、一瞬フル表示された画像が
       見えてしまわないよう、初期状態はCSS側でも隠しておく（GSAPのfromToと
       同じ状態に合わせる。works-single__num等と同じ理由・同じ対応） */
    .top-service__img img {
        clip-path: inset(0 100% 0 0);
    }

    /* 画像スタック用の縦スクロールバーは不要 */
    .works-scroll-bar {
        display: none !important;
    }

    /* 元は横スワイプスライダー用のドットだったが、タブレット・SPとも
       縦並びレイアウトに統一したため不要 */
    .works-single__dots {
        display: none;
    }

    /* このスペーサーは元々「画像の最後とフッターの間」の余白用だったが、
       画像の直後にテキスト群が続く並びのため、画像とテキストの間に
       余計な空白ができてしまう。無効化する */
    .works-single__images::after {
        content: none;
    }

    .works-single__section {
        order: 4;
        margin-top: 32px;
    }

    /* Conceptなど最初のセクションの上の余白だけ40pxにする。
       .works-single__meta・.works-single__sectionはどちらもdiv要素のため
       :first-of-typeだとタグ名だけで判定されmetaにマッチしてしまい効かない。
       metaの直後（＝最初のsection）だけを隣接セレクタで確実に狙う */
    .works-single__meta + .works-single__section {
        margin-top: 40px;
    }

    .works-single__nav {
        order: 5;
        /* .works-single__body の align-items:flex-start（デスクトップ設定）が
           縦積み時にも効いており、幅が内容分に縮んで space-between が効かなかったため
           align-selfでコンテナ幅いっぱいに広げる（width:100%だとmargin分はみ出すため） */
        align-self: stretch;
        justify-content: space-between;
        margin-top: 56px;
        margin-left: var(--sp-body);
        margin-right: var(--sp-body);
        margin-bottom: 56px;
    }

    /* ── Contact: ヒーロー2カラム → 縦積み・フォーム全幅 ── */
    .contact-hero {
        flex-direction: column;
        gap: 48px;
    }

    .contact-form {
        width: 100%;
    }

    /* プライバシーモーダル: パネル右外の×は画面外に出るため、パネルの真上に配置。
       外側paddingが32pxしかないと、固定ヘッダー(高さ50px)とパネル本体の両方に
       ×ボタンが被ってしまうため、上だけpaddingを広げてヘッダー分の余白を確保する */
    .privacy-modal {
        padding: 90px 32px 32px;
    }

    .privacy-modal__close-x {
        top: -32px;
        right: 0;
    }

    .privacy-modal__panel {
        max-height: calc(100vh - 122px);
    }

    .privacy-modal__body {
        padding: 48px 40px;
    }

    /* ── Thanks: 見出しが768px付近で収まるように ── */
    .thanks-hero__title {
        font-size: 64px;
    }
}


/* ============================================
   Responsive — SP（〜767px）
   ============================================ */
@media (max-width: 767px) {

    :root {
        --sp-body:    20px;
        --sp-section: 64px;
        /* セクション見出し（Service / Projects / Get in touch）を一括縮小 */
        --heading--h2--r: 28px;
        --heading--h2--m: 28px;
    }

    /* ── Header: 中央のSNSリンクはナビと干渉するため非表示 ── */
    .header-inner {
        padding: 0 20px;
    }

    .header-sns {
        display: none;
    }

    .header-nav__list {
        gap: 12px;
    }

    /* ── FV: ロゴを縮小し、テキストはロゴの上に縦積み（左揃え） ── */
    /* FVの下から白背景（.top-service）がせり上がってくるパララックスは、
       position:fixedで実現している（詳細はタブレットブロックのコメント参照。
       stickyだとアドレスバー自動非表示に伴うビューポート変化でFV画像が
       下にドリフトする不具合があったため、fixedに変更した） */
    .fv {
        --fvs: 0.62;
        height: 100svh; /* モバイルのアドレスバー分を考慮 */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }

    /* .fvをposition:fixedにした分のスペーサー（タブレットのmargin-top:100vhを
       SP用のheight（100svh）に合わせて上書き） */
    .top-service {
        margin-top: 100svh;
    }

    .fv__logo {
        left: 20px;
        bottom: 32px;
    }

    .fv__text {
        right: auto;
        left: 20px;
        bottom: calc(32px + 107px * var(--fvs) + 24px);
    }

    /* ── Service: 2列グリッド。画像は流動幅・比率維持 ── */
    .top-service {
        gap: 40px;
    }

    .top-service__body {
        align-items: stretch;
        width: 100%;
    }

    .top-service__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        width: 100%;
    }

    .top-service__img {
        width: 100%;
        height: auto;
        aspect-ratio: 129 / 168;
    }

    .btn-more {
        align-self: flex-end;
    }

    /* ── Projects ── */
    /* タイトル下の余白をServiceと揃える（Serviceの.top-service gap:40pxと同じ値） */
    .top-projects {
        gap: 40px;
    }

    /* カテゴリー絞り込みメニュー：横一列だと項目数が多く収まらないため折り返す。
       区切り線（Allと各カテゴリーの間の縦線）は折り返しレイアウトと相性が悪いため非表示にする。
       ベースのmargin-top:-56pxを打ち消し、gap:40pxをそのまま活かす */
    .top-projects__categories {
        margin-top: 0;
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .top-projects__category {
        font-size: 13px;
        padding: 4px 6px;
    }

    .top-projects__categories-divider {
        display: none;
    }

    .top-projects__item {
        gap: 24px;
    }

    .top-projects__left {
        gap: 20px;
        flex: 1;
        min-width: 0;
    }

    .top-projects__info {
        width: auto;
        flex: 1;
        min-width: 0;
    }

    /* ── Get in touch ── */
    .top-get-in-touch__link,
    .top-get-in-touch__inner,
    .top-get-in-touch__inner--over {
        gap: 24px;
    }

    /* ── Footer ── */
    .footer-inner {
        padding: 32px 16px;
        gap: 24px;
    }

    .footer-main {
        gap: 40px;
    }

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

    /* ── Service / About 共通: ページタイトル縮小 ── */
    .service-page__title-text,
    .about-page__title-text {
        font-size: 44px;
    }

    /* ── Service page ── */
    .service-section {
        padding-bottom: 80px;
        /* JS(GSAP)のクリップパス出現アニメーション実行前に、一瞬フル表示された
           コンテンツが見えてしまわないよう、初期状態はCSS側でも隠しておく */
        clip-path: inset(0 100% 0 0);
    }

    .service-section__left {
        padding-top: 48px;
    }

    .service-section__right {
        padding-top: 32px;
        gap: 40px;
    }

    /* 行はラベルと本文を縦積み。align-items:stretchで本文側（service-option等の背景）
       を行の幅いっぱいに広げる（デフォルトのflex-start だと内容幅に縮んでしまう） */
    .service-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    /* Logo design の料金プラン: 1件を「プラン名＋価格」→「内容」→「日数」の3行に組み替える。
       plan-info・plan-rightをdisplay:contentsで解除し、中の4つの<p>を直接
       .service-price__planのflexアイテムにして、orderで並び順を作る */
    .service-price__plan {
        flex-wrap: wrap;
        align-items: baseline;
        row-gap: 4px;
    }

    .service-price__plan-info,
    .service-price__plan-right {
        display: contents;
    }

    .service-price__plan-name {
        order: 1;
        width: auto;
    }

    .service-price__plan-value {
        order: 2;
    }

    .service-price__plan-includes {
        order: 3;
        flex: 0 0 100%;
        white-space: normal;
    }

    .service-price__plan-days {
        order: 4;
        flex: 0 0 100%;
    }

    /* 項目名列(1fr)・価格列(auto)のグリッドにして、価格の左端を全項目で揃える。
       auto列は全行の価格テキストの最大幅で決まるため、行ごとに位置がずれない。
       項目自体はdisplay:contentsで消え、中の<p>2つが直接グリッドセルになる */
    .service-option {
        padding: 24px 20px;
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 16px;
        row-gap: 16px;
    }

    .service-option__item {
        display: contents;
    }

    .service-option__item p {
        white-space: normal;
    }

    .service-option__item p:last-child {
        white-space: nowrap;
    }

    /* Recently: 横スワイプのスライダー（1枚を大きく見せ、右端で次をチラ見せ） */
    .service-recently {
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* 右側は画面端までスライドが流れるように見せる */
        margin-right: calc(-1 * var(--sp-body));
        padding-right: var(--sp-body);
    }

    .service-recently::-webkit-scrollbar {
        display: none;
    }

    .service-recently__item {
        flex: 0 0 78%;
        height: auto;
        aspect-ratio: 16 / 9;
        scroll-snap-align: start;
    }

    /* スライダー内は WebGL 描画ではなく通常の img を表示する
       （service-shader.js 側でも SP はメッシュ生成をスキップ） */
    .service-recently__item img {
        opacity: 1;
    }

    .service-everything__inner {
        padding: 32px 24px;
        gap: 32px;
    }

    .service-everything__heading {
        font-size: 32px;
    }

    /* ── About page ── */
    .about-lead {
        gap: 48px;
    }

    .about-lead__logo {
        --als: 0.78;
    }

    .about-lead__row {
        flex-direction: column;
        gap: 12px;
    }

    .about-lead__right {
        padding-top: 56px;
        gap: 48px;
    }

    .about-member__body {
        flex-direction: column;
        gap: 32px;
    }

    .about-member__bio {
        width: 100%;
        flex: none;
    }

    /* ── Contact ── */
    .contact-hero {
        gap: 40px;
    }

    .contact-hero__title {
        font-size: 44px;
    }

    .contact-hero__desc {
        width: 100%;
    }

    .contact-field__input,
    .contact-field__textarea {
        padding: 14px 16px;
    }

    /* プライバシーポリシーモーダル */
    .privacy-modal {
        padding: 16px;
    }

    .privacy-modal__panel {
        /* 上部の×ボタン（top:-44px）が画面外にはみ出さないよう、
           パネル自体の最大高さを抑えて上に十分な余白を確保する */
        max-height: calc(100vh - 120px);
    }

    .privacy-modal__body {
        padding: 40px 20px;
    }

    .privacy-modal__title {
        font-size: 28px;
    }

    .privacy-modal__close-x {
        top: -44px;
    }

    .privacy-modal__scrollbar {
        right: 8px;
    }

    /* ── 404 / Thanks ── */
    .error-hero,
    .thanks-hero {
        padding: 96px var(--sp-body);
    }

    .error-hero {
        gap: 56px;
    }

    .error-num {
        font-size: 96px;
    }

    .error-ja {
        width: 100%;
    }

    .thanks-hero__title {
        font-size: 36px;
    }
    /* Works detail のレイアウトはタブレット（1024px以下）ブロックで
       すでに縦並びに統一されているため、SP固有の上書きは不要 */
}