/* shared-proof.css — 自己完結テンプレ（自前 の LP）で共有部品を使うための切り出し（2026-09-15・元は style.css の p-field-strip/p-photo/p-cta-team/p-media/p-proof-band/l-bleed/c-btn と :root・keyframes）。style.css 側を直したらここも再生成する: 0_Inbox/20260915_site_rich/patch_rich_batch1.py 参照 */ /* --- Hamburger Menu Button --- */ .c-btn-menu { display: none; width: 30px; height: 24px; position: relative; z-index: 1100; /* 2026-08-28 mobile: 44x44 hit area (visual 30x24 unchanged) */ box-sizing: content-box; padding: 10px 7px; margin: -10px -7px; } .c-btn-menu__line, .c-btn-menu__line::before, .c-btn-menu__line::after { display: block; width: 30px; height: 2px; background: var(--color-text); position: absolute; transition: all var(--transition-base); } .c-btn-menu__line { top: 50%; transform: translateY(-50%); } .c-btn-menu__line::before { content: ''; top: -8px; } .c-btn-menu__line::after { content: ''; top: 8px; } .c-btn-menu.is-active .c-btn-menu__line { background: transparent; } .c-btn-menu.is-active .c-btn-menu__line::before { top: 0; transform: rotate(45deg); } .c-btn-menu.is-active .c-btn-menu__line::after { top: 0; transform: rotate(-45deg); } /* --- Button --- */ .c-btn { display: inline-block; font-family: var(--font-en); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 16px 48px; border-radius: var(--radius-btn); background: var(--color-primary); color: var(--ink); /* AA: cyan地に navy 文字（warm-white文字はコントラスト不足） */ transition: all var(--transition-base); position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(10, 22, 40, 0.14); } .c-btn:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(10, 22, 40, 0.20); } .c-btn--transparent { background: transparent; border: 2px solid var(--color-text-white); color: var(--color-text-white); box-shadow: none; } .c-btn--transparent:hover { background: var(--color-text-white); color: var(--accent-deep); box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3); } .c-btn--outline { background: transparent; border: 2px solid var(--accent-deep); /* AA: warm-white上のcyan生テキスト禁止 → accent-deep */ color: var(--accent-deep); box-shadow: none; } .c-btn--outline:hover { background: var(--accent-deep); color: var(--color-surface); box-shadow: 0 4px 15px rgba(0, 110, 143, 0.3); } .c-btn--white { background: var(--color-surface); color: var(--accent-deep); /* AA: 白地のcyan生テキスト禁止 → accent-deep */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .c-btn--white:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); } .c-btn--outline-white { background: transparent; color: var(--color-text-white); border: 1.5px solid rgba(255, 255, 255, 0.6); } .c-btn--outline-white:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; transform: translateY(-2px); } @media screen and (max-width: 1400px){ .c-btn-menu { display: block; } } @media screen and (max-width: 768px){ .c-btn-menu { display: block; } } @media screen and (max-width: 480px){ .c-btn { padding: 14px 36px; font-size: 1.3rem; } } .c-btn .c-ripple { background: rgba(0, 229, 255, 0.6); box-shadow: 0 0 20px rgba(0, 229, 255, 0.8); } /* ============================================ Media (Owned Media) - Archive & Single ============================================ */ /* --- Category Filter Tags --- */ .p-media-category-desc { margin-bottom: 32px; padding: 20px 24px; background: var(--color-primary-bg); border-left: 4px solid var(--color-primary); border-radius: 0 var(--radius-card) var(--radius-card) 0; font-size: 1.5rem; line-height: 1.8; color: var(--ink-2); } .p-media-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; } .p-media-filter__tag { display: inline-block; padding: 8px 20px; font-size: 1.3rem; font-weight: 500; color: var(--ink-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 100px; text-decoration: none; transition: all var(--transition-base); } .p-media-filter__tag:hover { border-color: var(--accent); color: var(--accent); } .p-media-filter__tag.is-active { background: var(--accent); color: #fff; border-color: var(--accent); } .l-contents--media-archive .p-media-cta { padding: 40px 0; } @media screen and (max-width: 768px){ .l-contents--media-archive .p-media-cta { padding: 28px 0; } } /* --- Featured Hero Article --- */ .p-media-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--color-surface); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); text-decoration: none; color: inherit; margin-bottom: 0; transition: box-shadow var(--transition-base), transform var(--transition-base); } .p-media-featured:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); } .p-media-featured__img { aspect-ratio: 16 / 9; overflow: hidden; } .p-media-featured__img-el { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .p-media-featured:hover .p-media-featured__img-el { transform: scale(1.05); } .p-media-featured__placeholder { height: 100%; aspect-ratio: auto; } .p-media-featured__body { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; } .p-media-featured__label { display: inline-block; font-family: var(--font-en); font-size: 1.2rem; font-weight: 700; letter-spacing: 0.15em; color: var(--accent); border: 1px solid var(--accent); padding: 3px 10px; border-radius: 3px; margin-bottom: 12px; width: fit-content; } .p-media-featured__title { font-size: 2rem; font-weight: 700; line-height: 1.5; margin: 10px 0 14px; } .p-media-featured__excerpt { font-size: 1.3rem; color: var(--color-text-light); line-height: 1.8; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media screen and (max-width: 768px){ .p-media-featured { grid-template-columns: 1fr; margin-bottom: 36px; } .p-media-featured__body { padding: 24px 20px; } .p-media-featured__title { font-size: 1.7rem; } } /* --- Article Card Grid --- */ .p-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 16px; } .p-media-card { display: block; text-decoration: none; color: inherit; } .p-media-card__img-wrapper { aspect-ratio: 16 / 9; } .p-media-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .p-media-card:hover .p-media-card__img { transform: scale(1.05); } .p-media-card__img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--accent-bg) 0%, var(--color-bg-alt) 100%); display: flex; align-items: center; justify-content: center; } .p-media-card__img-placeholder span { font-family: var(--font-en); font-size: 1.6rem; font-weight: 700; letter-spacing: 0.15em; color: var(--accent); opacity: 0.4; } .p-media-card__body { padding: 20px 24px 24px; } .p-media-card__category { display: inline-block; font-size: 1.2rem; font-weight: 600; color: var(--accent); background: var(--accent-bg); padding: 4px 12px; min-height: 24px; border-radius: 4px; margin-bottom: 10px; text-decoration: none; } .p-media-card__title { font-size: 1.5rem; font-weight: 700; line-height: 1.6; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .p-media-card__date { font-size: 1.2rem; color: var(--color-text-light); font-family: var(--font-en); } /* --- Category Navigation Grid --- */ .p-media-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; } .p-media-category-card { display: flex; align-items: center; gap: 14px; padding: 16px 20px; text-decoration: none; color: var(--color-text); transition: transform var(--transition-base), box-shadow var(--transition-base); } .p-media-category-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } .p-media-category-card__icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--accent-bg); color: var(--accent); border-radius: 10px; } .p-media-category-card__info { display: flex; flex-direction: column; gap: 2px; } .p-media-category-card__name { font-size: 1.3rem; font-weight: 600; line-height: 1.4; } .p-media-category-card__count { font-size: 1.2rem; color: var(--color-text-light); font-family: var(--font-en); } /* --- Category Pills (horizontal scroll) --- */ .p-media-category-pills { display: flex; flex-wrap: wrap; gap: 10px; } .p-media-category-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 100px; background: var(--color-surface); border: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); font-size: 1.4rem; font-weight: 500; white-space: nowrap; transition: border-color var(--transition-base), background var(--transition-base); } .p-media-category-pill:hover { border-color: var(--accent); background: var(--accent-bg, rgba(0, 217, 255, 0.05)); } .p-media-category-pill__count { font-size: 1.2rem; color: var(--color-text-light); font-family: var(--font-en); } @media screen and (max-width: 768px){ .p-media-category-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; } .p-media-category-pills::-webkit-scrollbar { display: none; } .p-media-category-pill { font-size: 1.3rem; padding: 6px 14px; } } .p-media-section-more { position: absolute; right: 0; bottom: 0; font-size: 1.3rem; font-weight: 600; color: var(--accent); text-decoration: none; transition: color var(--transition-base); } .p-media-section-more:hover { color: var(--accent-dark); } /* --- Mid-page CTA --- */ .p-media-cta__inner { text-align: center; padding: 50px 32px; background: linear-gradient(135deg, var(--accent-bg) 0%, var(--color-bg-alt) 100%); } .p-media-cta__label { font-size: 1.2rem; font-weight: 700; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 8px; font-family: var(--font-ja); } .p-media-cta__title { font-size: 2.2rem; font-weight: 800; margin-bottom: 12px; } .p-media-cta__text { font-size: 1.4rem; color: var(--color-text-light); margin-bottom: 24px; line-height: 1.7; } .p-media-cta__buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* --- Ranking / おすすめ記事 --- */ .p-media-ranking { display: flex; flex-direction: column; gap: 1px; background: var(--color-border); border-radius: var(--radius-card); overflow: hidden; } .p-media-ranking__item { display: flex; align-items: center; gap: 16px; padding: 18px 24px; background: var(--color-surface); text-decoration: none; color: inherit; transition: background var(--transition-base); } .p-media-ranking__item:hover { background: var(--color-bg); } .p-media-ranking__number { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-size: 1.5rem; font-weight: 800; color: var(--accent); background: var(--accent-bg); border-radius: 8px; } .p-media-ranking__item:first-child .p-media-ranking__number { background: var(--accent); color: #fff; } .p-media-ranking__thumb { flex-shrink: 0; width: 100px; height: 56px; border-radius: 8px; overflow: hidden; } .p-media-ranking__thumb img { width: 100%; height: 100%; object-fit: cover; } .p-media-ranking__thumb-placeholder { width: 100%; height: 100%; background: var(--color-bg-alt); } .p-media-ranking__body { flex: 1; min-width: 0; } .p-media-ranking__category { display: inline-block; font-size: 1.2rem; font-weight: 600; color: var(--accent); margin-bottom: 4px; } .p-media-ranking__title { font-size: 1.4rem; font-weight: 700; line-height: 1.5; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .p-media-ranking__date { font-size: 1.2rem; color: var(--color-text-light); font-family: var(--font-en); } @media screen and (max-width: 480px){ .p-media-categories { grid-template-columns: 1fr; } } /* --- Single Article: Media Meta --- */ .p-media-single__meta { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } /* --- Author Box --- */ .p-media-author { margin-top: 50px; padding-top: 40px; border-top: 1px solid var(--color-border); } .p-media-author__inner { display: flex; gap: 24px; align-items: flex-start; } .p-media-author__avatar { flex-shrink: 0; } .p-media-author__avatar img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; } .p-media-author__label { display: block; font-size: 1.2rem; color: var(--color-text-light); margin-bottom: 4px; } .p-media-author__name { display: block; font-size: 1.6rem; font-weight: 700; margin-bottom: 8px; } .p-media-author__bio { font-size: 1.3rem; color: var(--color-text-light); line-height: 1.8; margin: 0; } .p-media-author__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; } .p-media-author__link { display: inline-flex; align-items: center; gap: 5px; font-size: 1.2rem; color: var(--accent); text-decoration: none; padding: 4px 10px; border: 1px solid var(--accent); border-radius: 20px; transition: background .2s, color .2s; } .p-media-author__link:hover { background: var(--accent); color: #fff; } .p-media-author__link svg { flex-shrink: 0; } /* --- Button Badge (FREE label) --- */ .c-btn__badge { display: inline-block; background: rgba(255, 255, 255, 0.2); font-size: 1.2rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-right: 6px; letter-spacing: 0.05em; vertical-align: middle; } /* --- Related Articles --- */ .p-media-related { margin-top: 60px; } .p-media-related__heading { font-size: 2rem; font-weight: 700; margin-bottom: 30px; padding-bottom: 12px; border-bottom: 2px solid var(--accent); display: inline-block; } /* --- Empty State --- */ .p-media-empty { padding: 60px 30px; text-align: center; font-size: 1.5rem; color: var(--color-text-light); } @media screen and (max-width: 768px){ .p-media-grid { grid-template-columns: 1fr; gap: 20px; } .p-media-card__title { font-size: 1.4rem; } .p-media-filter { gap: 8px; margin-bottom: 30px; } .p-media-filter__tag { font-size: 1.2rem; padding: 6px 14px; } .p-media-author__inner { flex-direction: column; align-items: center; text-align: center; } .p-media-related { margin-top: 40px; } } .urv-cta-row .c-btn--primary { background: var(--color-primary, #0066cc); color: #fff; } .urv-cta-row .c-btn--outline { background: transparent; color: var(--color-primary, #0066cc); border: 2px solid var(--color-primary, #0066cc); } .p-deck-download__actions .c-btn svg { vertical-align: -0.15em; margin-right: 6px; } /* Download form submit button — scoped enhancement * Issue: global .c-btn box-shadow renders as a washed-out white halo on * the white form card background, blurring the button outline. Sharpen * the shadow and bulk up the button for clear affordance. */ .p-download-form__card .c-form__submit { min-width: 280px; padding: 18px 56px; font-size: 1.6rem; letter-spacing: 0.08em; border: 2px solid var(--color-primary); box-shadow: 0 6px 18px rgba(0, 153, 204, 0.35); } .p-hero--split .c-btn--primary { background: var(--accent); color: var(--ink); border: none; border-radius: var(--radius-btn); font-weight: 700; padding: 16px 34px; box-shadow: var(--shadow-btn); } .p-hero--split .c-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-btn-hover); } .p-hero--split .c-btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid rgba(10,22,40,.22); border-radius: var(--radius-btn); font-weight: 600; padding: 16px 30px; } .p-hero--split .c-btn--ghost:hover { border-color: var(--accent-deep); color: var(--accent-deep); } .c-btn--ghost-ink { display: inline-block; background: transparent; color: var(--ink); border: 1.5px solid var(--color-border); border-radius: var(--radius-btn); font-weight: 700; padding: 14px 30px; transition: all var(--transition-base); } .c-btn--ghost-ink:hover { border-color: var(--accent); color: var(--accent-deep); transform: translateY(-2px); } /* ============================================ AA contrast — trust-refresh.css 上書きへの対抗 （trust-refresh が最後に読み込まれるため特異性で勝つ） ============================================ */ .c-btn.c-btn--primary { color: var(--ink); /* cyan地 × white文字(1.6:1)をnavy文字へ */ } .p-contact-cta .c-btn.c-btn--white, .p-article-cta-banner .c-btn.c-btn--white { color: var(--accent-deep); /* 白地 × accent-dark(3.0:1) → accent-deep(4.9:1) */ } .c-btn.c-btn--outline { border-color: var(--accent-deep); /* warm-white上のcyan生テキスト禁止 → accent-deep */ color: var(--accent-deep); } .c-btn.c-btn--outline::before { background: var(--accent-deep); } .c-btn.c-btn--outline:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--color-surface); } /* ============================================ 顔が見えるCTAバンド (p-cta-team) — navy地・共有部品 左=実顔1〜2名（角丸16px+cyan下線） / 右=コピー+CTA2 ============================================ */ .p-cta-team { background: var(--ink); background-image: radial-gradient(circle at 86% 8%, rgba(0, 217, 255, 0.16), transparent 46%); color: var(--color-text-white); padding-block: clamp(72px, 10vw, 140px); overflow: hidden; } .p-cta-team__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(36px, 5vw, 64px); align-items: center; } .p-cta-team__faces { display: flex; gap: 24px; justify-content: center; } .p-cta-team__face { margin: 0; text-align: center; max-width: 200px; flex: 1 1 0; } .p-cta-team__faces--rotator .p-cta-team__face { max-width: none; width: min(240px, 64vw); flex: none; } .p-cta-team__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-card); border-bottom: 3px solid var(--accent); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); display: block; } .p-cta-team__face-caption { margin-top: 12px; } .p-cta-team__name { display: block; font-size: 1.55rem; font-weight: 800; color: var(--color-text-white); } .p-cta-team__role { display: block; font-family: var(--font-en); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.06em; color: var(--accent-soft); margin-top: 2px; } .p-cta-team__eyebrow { font-family: var(--font-en); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; } .p-cta-team__title { font-family: var(--font-ja); font-weight: 800; font-size: clamp(2.6rem, 3.4vw, 3.8rem); line-height: 1.35; color: var(--color-text-white); margin: 0 0 16px; } .p-cta-team__text { font-size: 1.5rem; line-height: 1.9; color: rgba(245, 241, 232, 0.82); max-width: 560px; margin: 0 0 28px; } .p-cta-team__actions { display: flex; gap: 16px; flex-wrap: wrap; } .p-cta-team .c-btn.c-btn--primary, .p-cta-team__btn-primary { background: var(--accent); color: var(--ink); border: none; box-shadow: var(--shadow-btn); } .p-cta-team .c-btn.c-btn--primary:hover { background: var(--accent-soft); transform: translateY(-2px); box-shadow: var(--shadow-btn-hover); } .p-cta-team .c-btn.c-btn--outline-white { background: transparent; color: var(--color-text-white); border: 1.5px solid rgba(245, 241, 232, 0.55); } .p-cta-team .c-btn.c-btn--outline-white:hover { background: rgba(245, 241, 232, 0.1); border-color: var(--color-text-white); } .p-cta-team__note { font-size: 1.25rem; color: rgba(245, 241, 232, 0.6); margin: 18px 0 0; } @media (max-width: 900px){ .p-cta-team__grid { grid-template-columns: 1fr; gap: 36px; } .p-cta-team__faces { order: -1; } .p-cta-team__face { max-width: 168px; } .p-cta-team__copy { text-align: center; } .p-cta-team__text { margin-inline: auto; } .p-cta-team__actions { justify-content: center; } } @media (max-width: 480px){ .p-cta-team__faces { gap: 16px; } .p-cta-team__face { max-width: 140px; } .p-cta-team__actions .c-btn { width: 100%; text-align: center; justify-content: center; } } @media (max-width: 480px){ .p-leadmagnet-band__actions .c-btn { width: 100%; text-align: center; justify-content: center; } } /* ------------------------------------------------------------ §2.4 p-photo — navy寒色グレーディング（全実写必須の統一レシピ） ------------------------------------------------------------ */ .p-photo { position: relative; overflow: hidden; border-radius: var(--radius-card); } .p-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.06) brightness(.96); } .p-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 160deg, color-mix(in srgb, var(--ink) 38%, transparent), color-mix(in srgb, var(--ink) 8%, transparent) 55%, color-mix(in srgb, var(--accent) 6%, transparent) ); mix-blend-mode: multiply; pointer-events: none; } .p-photo { isolation: isolate; transform: translateZ(0); } /* multiply+filterの初回描画黒箱バグ対策: レイヤー昇格が必須(isolation単体では不可・実機検証済) */ .p-photo--bleed { border-radius: 0; } /* §2.4 メタスタンプ — 実在の場所・年のみ（写真を「記録」に変える） */ .p-photo__meta { position: absolute; left: 14px; bottom: 12px; z-index: 2; margin: 0; font-family: var(--font-en); font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--accent); /* navy地・写真上 = cyan可 */ text-shadow: 0 1px 6px color-mix(in srgb, var(--ink) 85%, transparent); pointer-events: none; } .p-photo__meta--deep { /* cream地の枠外スタンプ用（cyan生テキスト禁止） */ color: var(--accent-deep); text-shadow: none; } /* §2.4 ノッチ角 — 右上を1箇所だけ欠く（1ページ1回まで） */ .p-photo--notch { clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); } /* ------------------------------------------------------------ §2.4 l-bleed — フルブリード・ブレイクアウト ------------------------------------------------------------ */ .l-bleed { width: 100vw; margin-inline: calc(50% - 50vw); } .p-hero--field .c-btn--primary { background: var(--accent); color: var(--ink); /* AA: cyan地×navy文字 */ border: none; border-radius: var(--radius-btn); font-weight: 700; padding: 16px 34px; box-shadow: var(--shadow-btn); } .p-hero--field .c-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-btn-hover); } .p-hero--field .c-btn--ghost { background: transparent; color: var(--color-text-white); border: 1.5px solid color-mix(in srgb, var(--color-text-white) 50%, transparent); border-radius: var(--radius-btn); font-weight: 600; padding: 16px 30px; box-shadow: none; } .p-hero--field .c-btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } /* ============================================================ §3 #4 FIELD STRIP — p-field-strip（低速マーキー・navy→cream跨ぎ） ============================================================ */ .p-field-strip { position: relative; overflow: hidden; /* navy(CASE FIELD)→cream(ABOUT=--color-bg-alt) を跨ぐ split 背景 */ background: linear-gradient(to bottom, var(--ink) 0%, var(--ink) 52%, var(--color-bg-alt) 52%, var(--color-bg-alt) 100%); padding-block: clamp(36px, 5vw, 72px); margin-block-start: clamp(-96px, -6vw, -48px); /* §2.2 段差食い込み（前のnavy帯へ） */ } /* 直前がライト背景のstatsの場合、負マージンが実績注記テキストを飲み込むため食い込みを無効化 2026-07-06 */ .p-stats + .p-field-strip { margin-block-start: 0; } .p-field-strip__label { position: absolute; top: clamp(12px, 2vw, 28px); right: clamp(12px, 3vw, 40px); z-index: 2; writing-mode: vertical-rl; font-feature-settings: "palt"; font-family: var(--font-ja); font-weight: 700; font-size: 13px; letter-spacing: .5em; color: var(--accent); /* navy上半分に載る = cyan可 */ } .p-field-strip__viewport { overflow: hidden; } .p-field-strip__track { display: flex; gap: 1px; /* 写真間に1px罫（navy）が走る */ background: var(--ink); width: max-content; animation: field-strip-move 60s linear infinite; } .p-field-strip:hover .p-field-strip__track { animation-play-state: paused; } .p-field-strip__item { margin: 0; flex: 0 0 auto; width: clamp(240px, 30vw, 400px); aspect-ratio: 3 / 2; border-radius: 0; } .p-field-strip .p-photo { border-radius: 0; } @keyframes field-strip-move { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================ §3 #7 CLIENTS + MEDIA + AI TOOLS 統合帯 — p-proof-band（圧縮） ============================================================ */ .p-proof-band { position: relative; z-index: 1; overflow: hidden; background: linear-gradient(180deg, #fff 0%, rgba(246, 252, 253, .78) 100%); } .p-proof-band { padding: clamp(28px, 3.2vw, 40px) 0; } .p-proof-band .p-clients.l-section, .p-proof-band .p-media.l-section, .p-proof-band .p-ai-services.l-section { padding: clamp(10px, 1.2vw, 14px) 0; /* CLS対策(2026-08-05): マーキー初期化前の高さ予約。実測 mobile126px/desktop136px */ min-height: clamp(126px, 10vw, 136px); } .p-proof-band .p-clients .l-inner, .p-proof-band .p-media .l-inner, .p-proof-band .p-ai-services .l-inner { display: block; } .p-proof-band + .p-field-strip { margin-block-start: 0; } .p-proof-band .p-clients__heading, .p-proof-band .p-media__heading, .p-proof-band .p-ai-services__heading { display: flex; align-items: baseline; justify-content: center; gap: 10px; text-align: center; min-height: 30px; margin-bottom: clamp(10px, 1.3vw, 14px); } .p-proof-band .p-clients__title, .p-proof-band .p-media__title, .p-proof-band .p-ai-services__title { font-family: var(--font-en); font-size: clamp(17px, 1.25vw, 19px); font-weight: 800; line-height: 1; letter-spacing: .11em; color: var(--ink); } .p-proof-band .p-clients__subtitle, .p-proof-band .p-media__subtitle, .p-proof-band .p-ai-services__subtitle { margin-top: 0; color: rgba(9, 22, 37, .66); font-size: clamp(12px, .9vw, 12px); font-weight: 700; letter-spacing: .03em; } .p-proof-band .p-media .l-inner, .p-proof-band .p-ai-services .l-inner { padding-top: 0; border-top: 0; } .p-proof-band .p-clients__marquee, .p-proof-band .p-media__marquee, .p-proof-band .p-ai-services__marquee { overflow: hidden; box-sizing: border-box; height: 64px; padding: 0; mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); } .p-proof-band .p-clients__track, .p-proof-band .p-media__track, .p-proof-band .p-ai-services__track { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 16px); width: max-content; animation: proof-logo-marquee 46s linear infinite; will-change: transform; } /* 各 track の item 数が異なる (clients=20, media=10, ai-services=28) ため、 1 item あたりの通過時間を 2.3s で統一。translateX(-50%) 距離が違うぶん duration も比例させないと列によって見た目速度がバラバラに見える。 */ .p-proof-band .p-clients__track { animation-duration: 46s; } .p-proof-band .p-media__track { animation-duration: 23s; animation-direction: reverse; } .p-proof-band .p-ai-services__track { animation-duration: 64s; } .p-proof-band .p-clients__item, .p-proof-band .p-media__item, .p-proof-band .p-ai-services__item { flex: 0 0 clamp(178px, 13.5vw, 198px); width: clamp(178px, 13.5vw, 198px); min-width: 0; max-width: clamp(178px, 13.5vw, 198px); display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; height: 64px; min-height: 64px; max-height: 64px; padding: 12px 18px; border: 1px solid rgba(9, 22, 37, .08); border-radius: 10px; background: rgba(255, 255, 255, .82); box-shadow: 0 10px 28px rgba(9, 22, 37, .045); } .p-proof-band .p-clients__logo, .p-proof-band .p-media__logo, .p-proof-band .p-ai-services__logo { display: block; width: min(100%, 168px); height: 38px; max-width: 100%; max-height: 38px; object-fit: contain; filter: none; opacity: 1; transition: filter var(--transition-base), transform var(--transition-base); } .p-proof-band .p-clients__logo[alt="Saiteki"] { width: min(100%, 178px); height: auto; max-height: 40px; } .p-proof-band .p-clients__item:has(.p-clients__logo[alt="徳清倉庫"]) { padding-block: 8px; } .p-proof-band .p-clients__logo[alt="徳清倉庫"] { width: min(100%, 170px); height: 48px; max-height: 48px; object-fit: contain; } .p-proof-band .p-media__logo[alt="AINOW"] { width: auto; height: 48px; max-width: 92px; max-height: 48px; } .p-proof-band .p-media__logo[alt="SB Creative"] { width: min(100%, 180px); height: auto; max-height: 34px; } .p-proof-band .p-ai-services__logo { width: 28px; height: 28px; max-width: 28px; max-height: 28px; } .p-proof-band .p-ai-services__name { color: rgba(10, 22, 40, .82); font-family: var(--font-en); font-size: clamp(12px, .92vw, 14px); font-weight: 800; line-height: 1.15; letter-spacing: 0; white-space: nowrap; } .p-proof-band .p-clients__item:hover .p-clients__logo, .p-proof-band .p-media__item:hover .p-media__logo, .p-proof-band .p-ai-services__item:hover .p-ai-services__logo { filter: none; opacity: 1; transform: translateY(-1px); } @keyframes proof-logo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 768px){ /* §2.4 常時アニメは768px以下で停止（iOS Safari実績ルール） */ .p-field-strip__track { animation: none; width: auto; } .p-field-strip__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; } .p-field-strip { margin-block-start: 0; } .p-proof-band .p-clients .l-inner, .p-proof-band .p-media .l-inner, .p-proof-band .p-ai-services .l-inner { display: block; } .p-proof-band .p-clients__heading, .p-proof-band .p-media__heading, .p-proof-band .p-ai-services__heading { text-align: center; margin-bottom: 12px; } .p-proof-band .p-clients__item, .p-proof-band .p-media__item, .p-proof-band .p-ai-services__item { flex-basis: min(48vw, 190px); min-height: 58px; padding: 10px 15px; } .p-proof-band .p-clients__track, .p-proof-band .p-media__track, .p-proof-band .p-ai-services__track { animation-duration: 34s; } } @media (max-width: 640px){ .p-field-strip__item { width: min(72vw, 320px); } } @media (max-width: 480px){ .p-hero--field .c-btn { text-align: center; } .p-field-strip__label { display: none; } } @keyframes roleux-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .p-case-deep__link .c-btn--outline-white { border-color: var(--ink); color: var(--ink); background: transparent; } .p-case-deep__link .c-btn--outline-white:hover { background: var(--ink); color: var(--color-text-white); } .p-hero--field-bright .c-btn--ghost { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 35%, transparent); } .p-hero--field-bright .c-btn--ghost:hover { border-color: var(--accent-deep); color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 10%, transparent); } /* ============================================================ B1 (2026-07-04): hero 最上位「30秒で商談前リサーチAIを体験」CTA Above-the-fold の CV 一次導線を Sales X-Ray 体験に集約。 ============================================================ */ .c-btn--experience { position: relative; gap: 10px; padding-left: 20px; padding-right: 22px; } .c-btn--experience .c-btn__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 22px; padding: 0 8px; font-size: 12px; font-weight: 900; letter-spacing: 0.04em; color: var(--field-ink, #0b1220); background: #B9F3D1; border-radius: 999px; box-shadow: 0 1px 0 rgba(9, 22, 37, 0.06); line-height: 1; flex: 0 0 auto; } .p-hero--field-bright .c-btn--experience .c-btn__badge { color: #0b1220; } @media screen and (max-width: 640px){ .c-btn--experience .c-btn__badge { min-width: 34px; height: 20px; font-size: 12px; padding: 0 6px; } } /* 3つ目のCTAは静かなテキストリンクに格下げ(ボタン3連の圧を抜く) */ .p-hero--field .p-hero__actions .c-btn--ghost[data-cta="hero_works"] { border: none; background: none; padding: 14px 6px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(10, 22, 40, .3); } .p-hero--field .p-hero__actions .c-btn--ghost[data-cta="hero_works"]:hover { text-decoration-color: rgba(10, 22, 40, .8); } .p-hero--split .c-btn--primary { padding: 15px 26px; } .p-hero--split .c-btn--ghost { padding: 15px 22px; } /* 帯のシート演出(角丸+重なり)は split では平坦に接続 */ .is-motion-page .p-hero--split + .p-proof-band { margin-top: 0; border-radius: 0; box-shadow: none; } @media (max-width: 600px){ .p-hero--split .p-hero__actions .c-btn { justify-content: center; text-align: center; } } /* TRUSTED BY 見出し → 日本語1文(100社以上)。TRUSTED BY は小さなアイブロウへ */ .p-proof-band .p-clients__heading { flex-direction: column; align-items: center; gap: 6px; min-height: 0; } .p-proof-band .p-clients__subtitle--eyebrow { order: -1; font-family: var(--font-en); font-size: 12px; letter-spacing: .14em; color: var(--accent-deep); font-weight: 700; } .p-proof-band .p-clients__title--ja { font-family: var(--font-ja); font-size: clamp(17px, 1.65vw, 23px); font-weight: 800; letter-spacing: .01em; line-height: 1.45; color: var(--ink); text-align: center; padding: 0 16px; } :root{--accent:#00D9FF;--accent-bg:rgba(0, 217, 255, 0.06);--accent-dark:#0099CC;--accent-deep:#006E8F;--accent-soft:#7EE8FF;--color-bg:#F5F1E8;--color-bg-alt:#EFEADF;--color-border:rgba(10, 22, 40, 0.10);--color-primary:#00D9FF;--color-primary-bg:rgba(0, 217, 255, 0.06);--color-primary-dark:#0099CC;--color-surface:#FFFFFF;--color-text:#0A1628;--color-text-light:#5B6675;--color-text-white:#FFFFFF;--font-en:'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;--font-ja:-apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;--ink:#0A1628;--ink-2:#16233D;--radius-btn:12px;--radius-card:16px;--shadow-2:0 20px 60px rgba(10, 22, 40, 0.16), 0 1px 0 rgba(255, 255, 255, 0.5) inset;--shadow-btn:0 8px 24px rgba(10, 22, 40, 0.14);--shadow-btn-hover:0 12px 32px rgba(10, 22, 40, 0.20);--shadow-card:0 6px 24px rgba(10, 22, 40, 0.08);--shadow-card-hover:0 20px 60px rgba(10, 22, 40, 0.16);--transition-base:0.25s cubic-bezier(0.2, 0.6, 0, 1);--transition-slow:0.5s cubic-bezier(0.2, 0.6, 0, 1);} /* js-reveal は main.js 無しの LP では隠さない */ .js-reveal{opacity:1 !important;transform:none !important;} /* main.js 無しの LP では顔ローテーターを先頭（佐藤）1 枚に固定＝テーマの JS 無効時と同じ見え方 */ .p-cta-team__faces--rotator .js-face-rotator__item:not(.is-active){display:none !important;} /* utility（2026-09-15 リッチ化 第2弾・cta-team の見出し改行用・style.css 2550/3891 行と同じ） */ .u-sp-only{display:none} @media (max-width:768px){.u-sp-only{display:inline}}