/*
 * AUTOBOOST フォームLP form-wp-3mab スタイル
 * 出典: STUDIO 由来 (https://www.autoboost.jp/form-wp-3mab) - 2026-06-25 取得
 * 旧HTML <style>ブロック14個を抽出し media クエリ復元 / @font-face は <link> 化
 */

/* === block 3 .fa-x === */
.fa-x:before { content: "\58"; }

/* === block 4 Material Symbols visibility === */
/* Material Symbols - 基本スタイル */ [class*="material-symbols-"] { font-style: normal; font-variation-settings: "FILL" var(--material-symbol-fill, 0), "wght" var(--material-symbol-weight, 400); visibility: hidden; } /* Material Symbolsフォント読み込み完了後 */ body[data-material-symbols-loaded="true"] [class*="material-symbols-"] { visibility: visible; }

/* === block 6 base / html / .box / .text === */
html { height: 100%; padding: 0; margin: 0; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { display: block; min-height: 100vh; background: #fff; font-family: sans-serif; line-height: 1; transition: background 0.5s cubic-bezier(0.4, 0.4, 0, 1); padding: 0; margin: 0; } a { background: transparent; color: rgb(51, 51, 51); font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; border: none; text-decoration: none; } button { background: transparent; color: inherit; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; border: none; } button { pointer-events: all; cursor: pointer; user-select: none; } hr { border: 0; border-top: 1px solid #ccc; display: block; height: 1px; margin: 1em 0; padding: 0; } h1, h2, h3, h4, h5, h6 { color: rgb(51, 51, 51); line-height: 1; } /* --- Common Base Styles --- */ .img, .box, .text, .frame, .section, .section-inner, .input, .toggle, .icon, .video, .video-container { border: 0; box-sizing: border-box; max-width: 100%; z-index: 0; position: relative; margin: 0; padding: 0; flex: none; } .img { height: auto; } .img, .box, .text, .frame, .section, .section-inner, .toggle, .icon, .video-container { transition: all 0.3s cubic-bezier(0.4, 0.4, 0, 1); transition-property: all, --g-angle, --g-color-0, --g-position-0, --g-color-1, --g-position-1, --g-color-2, --g-position-2, --g-color-3, --g-position-3, --g-color-4, --g-position-4, --g-color-5, --g-position-5, --g-color-6, --g-position-6, --g-color-7, --g-position-7, --g-color-8, --g-position-8, --g-color-9, --g-position-9, --g-color-10, --g-position-10, --g-color-11, --g-position-11; list-style: none; margin: 0; padding: 0; text-decoration: none; align-content: center; } .input, .select { /* TypeSquareの ts-unused インライン上書きからフォーム要素を保護するため !important で防衛。 詳細度は同じなのでノード固有の .sd-N 側も !important 付与が必要（$StyleBundle.formFontImportant）。 a11y トレードオフ: ブラウザ設定 UI の「標準フォント」指定（author normal 相当）は本ルールで上書きされる。 一方、User Style Sheet + !important（OpenDyslexic 等の a11y 拡張）は CSS カスケードの origin 順位 （user !important > author !important）により依然として勝つ。TypeSquare 干渉対策として意図的に受容する。 */ font-family: inherit !important; font-size: inherit; font-style: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; } .input, .richText * { transition: all 0.3s cubic-bezier(0.4, 0.4, 0, 1); transition-property: all, --g-angle, --g-color-0, --g-position-0, --g-color-1, --g-position-1, --g-color-2, --g-position-2, --g-color-3, --g-position-3, --g-color-4, --g-position-4, --g-color-5, --g-position-5, --g-color-6, --g-position-6, --g-color-7, --g-position-7, --g-color-8, --g-position-8, --g-color-9, --g-position-9, --g-color-10, --g-position-10, --g-color-11, --g-position-11; list-style: none; margin: 0; padding: 0; text-decoration: none; align-content: normal; z-index: 0; } /* Restore text decoration for semantic HTML elements */ .richText s, .richText del, .richText u { text-decoration: revert; } /* sd-base equivalent: column segment containers (see JSDoc) */ .box, .frame, .section, .toggle, .video-container { display: flex; flex-direction: column; align-items: center; } .img, .text, .icon { align-items: center; display: flex; flex-direction: row; justify-content: center; overflow-wrap: anywhere; word-break: break-word; z-index: 0; } .box::-webkit-scrollbar { display: none; } /* --- Rich Text --- */ .richText { display: block; /* Workaround: レスポンシブCSSで display:flex に切り替わった際に flex-direction がデフォルト row になるのを防止する。 display:block 時は無視され、display:flex 時のみ有効。 HRC ではノードCSS生成時に flex-direction を補完すると ユーザー設定の flex-direction を上書きするリスクがあるため、 低優先度のデフォルト値としてここで設定する。 */ flex-direction: column; flex: none; word-break: break-word; -webkit-font-smoothing: antialiased; box-sizing: border-box; line-height: 1; * { border: 0; list-style: none; margin: 0; padding: 0; text-decoration: none; -webkit-font-smoothing: antialiased; -webkit-backface-visibility: hidden; box-sizing: border-box; word-spacing: 1px; backface-visibility: visible; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; text-align: inherit; } h1 { font-size: 3em; font-weight: 700; margin: 20px 0; } h2, h3 { font-weight: 700; margin: 10px 0; } h2 { font-size: 2em; } h3 { font-size: 1em; } h4, h5, h6 { display: block; font-size: 1em; margin: 10px 0; } h4, h5 { font-weight: 600; } h6 { font-weight: 500; } p { margin: 10px 0; } > p { min-height: 1em; } hr { border-top: 1px solid #ccc; margin: 10px 0; } em { font-style: italic; } > blockquote { border-left: 3px solid rgba(0, 0, 0, 0.15); font-style: italic; margin: 10px 0; padding: 10px 15px; } strong { color: inherit; display: inline; font-family: inherit; font-weight: 900; } /* Table of Contents */ > [data-type="table_of_contents"] { line-height: 1; list-style: none; padding: 24px 24px 8px; margin: 0; border-radius: 2px; font-size: 16px; background-color: #f5f5f5; text-decoration: underline; color: #616161; .toc_list { margin: 0; padding: 0; } .toc_item { font-size: inherit; font-weight: inherit; color: currentColor; list-style: none; margin: 0 0 16px 0; /* Default padding */ padding-left: 2rem; &.toc_item--1 { margin: 0 0 16px 0; /* Level 1 items might not need extra padding beyond the default */ padding-left: 0; /* Reset or adjust as needed */ } &.toc_item--2 { margin: 0 0 16px 0; padding-left: 2rem; /* Already default, explicit for clarity */ } &.toc_item--3 { margin: 0 0 16px 0; padding-left: 4rem; } > a { font-size: inherit; font-weight: inherit; color: currentColor; border: none; text-decoration: none; } } } > [data-type="table"] { overflow-x: auto; p { white-space: pre-line; word-break: break-all; } } table { table-layout: auto; border-collapse: collapse; border-spacing: unset; margin: 10px 0 10px 0; font-size: 14px; border: 1px solid #f2f2f2; color: #1a1a1a; line-height: 1.4; } th { background: rgba(245, 245, 245, 0.5); } th, td { min-width: 100px; max-width: 240px; border: 1px solid #f2f2f2; padding: 12px; p { margin: 0; } } p > code { background: #eee; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; display: inline; margin: 2px; padding: 0 5px; } ol { margin: 0 0 0 20px; padding: 0; list-style: none; li { list-style: decimal; margin: 10px 0; } } ul { margin: 0 0 0 20px; padding: 0; list-style: none; li { list-style: disc; margin: 10px 0; } } li > p { margin: 0; } pre { margin: 20px 0 20px 0; padding: 25px 35px 25px 35px; background: #eeeeee; border-radius: 6px; white-space: pre-wrap; font-family: Menlo, Monaco, "Courier New", monospace; code { padding: 0; border: none; } } /* Images & Videos */ img, video { height: auto; max-width: 100%; vertical-align: bottom; } /* Links */ a { color: #007cff; display: inline; text-decoration: underline; } /* Embedded Code */ [data-type="embed_code"] { position: relative; margin: 20px 0; .height-adjuster { max-width: 1280px; position: relative; .wrapper { position: relative; } .wrapper[style*='padding-top'] { iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } } } } /* --- Section --- */ .section { width: 100%; } /* section-inner のスタイル * position: static は studio-preview との表示互換性のために維持している。 * 元々は考慮漏れで設定されたものだが、既に使用されているため互換性維持のために必要。 * .box クラスも同時に付与されるため、display: flex 等の基本レイアウトは継承される。 */ .section-inner { position: static; } /* --- Dialog --- */ dialog { border: none; background-color: transparent; padding: 0; margin: 0; width: 100%; height: 100%; position: fixed; max-width: none; max-height: none; box-sizing: border-box; /* UA stylesheet の overflow: auto を打ち消し、モーダル内コンテンツがはみ出した際の水平パンを防ぐ (#2438) */ /* コンテンツが dialog 表示領域を超える場合は overflow: auto に戻さず、子要素側で内部スクロール領域を確保する (studio-preview 互換) */ overflow: visible; &[open] { display: flex; } &::backdrop { background: transparent; } } .modal-container { /* width/height:100% に padding を含め、dialog（viewport）幅・高さを超えないようにする。 content-box だと padding が 100% の外側に加算され、右・下にはみ出す (#2920, studio-preview 互換) */ box-sizing: border-box; position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; /* backdropクリックをdialogに透過 */ z-index: 1; } .modal-container > * { pointer-events: auto; /* コンテンツ内のクリックを有効化 */ } .modal-backdrop { position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* --- Modal Transition --- */ /* モーダルトランジション中の子要素transition無効化（ちらつき防止） */ /* modal-readyが付くまで子要素のtransitionを無効化し、 */ /* appearアニメーションとの競合を防ぐ */ /* NOTE: modal-closing時も:not(.modal-ready)に該当するため、閉じるアニメーション中も適用される */ dialog[open][data-modal-transition-base]:not(.modal-ready) .modal-container * { transition: none !important; } /* 開いた直後の初期状態: modal-containerとmodal-backdropをopacity 0に */ /* dialog自体は常にopacity 1（二重掛け防止） */ dialog[open][data-modal-transition-base] > .modal-container { opacity: 0; /* transformはdata-modal-transition-baseのJSON値を使用するためJSで設定 */ } dialog[open][data-modal-transition-base] > .modal-backdrop { opacity: 0; } /* 準備完了: トランジションでopacity 1, transform noneへ */ dialog[open][data-modal-transition-base].modal-ready > .modal-container { opacity: 1; transform: none; transition: opacity 400ms cubic-bezier(.4,.4,0,1), transform 400ms cubic-bezier(.4,.4,0,1); } dialog[open][data-modal-transition-base].modal-ready > .modal-backdrop { opacity: 1; transition: opacity 400ms cubic-bezier(.4,.4,0,1); } /* 閉じるアニメーション */ dialog[data-modal-transition-base].modal-closing > .modal-container { opacity: 0; transition: opacity 400ms cubic-bezier(.4,.4,0,1), transform 400ms cubic-bezier(.4,.4,0,1); } dialog[data-modal-transition-base].modal-closing > .modal-backdrop { opacity: 0; transition: opacity 400ms cubic-bezier(.4,.4,0,1); } /* アクセシビリティ: モーション軽減 */ @media (prefers-reduced-motion: reduce) { dialog[open][data-modal-transition-base] > .modal-container, dialog[open][data-modal-transition-base].modal-ready > .modal-container, dialog[data-modal-transition-base].modal-closing > .modal-container { transition: none; opacity: 1; transform: none !important; } dialog[open][data-modal-transition-base] > .modal-backdrop, dialog[open][data-modal-transition-base].modal-ready > .modal-backdrop, dialog[data-modal-transition-base].modal-closing > .modal-backdrop { transition: none; opacity: 1; } } /* --- Image Background Element --- */ /* .image__bg-container 単体構造で::before疑似要素を使用 */ .image__bg-container { container-type: size; /* 幅と高さを監視（aspect-ratioクエリに必要） */ container-name: image-container; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -2; border-radius: inherit; transition: inherit; } .image__bg-container::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: var(--img-current); background-position: 50%; background-size: cover; border-radius: inherit; transition-duration: inherit; transition-timing-function: inherit; transition-delay: inherit; /* background-image を除外: WebKit が transition: all 継承時に container query による --img-current 変更を cross-fade() でアニメーションし、 低解像度バリアントが表示され続ける問題を回避 (issue #2389) */ transition-property: filter, backdrop-filter, opacity, color, background-color, background-position, background-size, border, border-color, border-width, border-radius, outline, outline-color, outline-width, outline-offset, box-shadow, text-shadow, transform, transform-origin, width, height, margin, padding, top, left, right, bottom, z-index, gap, letter-spacing, word-spacing, line-height, font-size, font-weight, clip-path; } /* IMPORTANT: 3つの DPR tier はソース順に依存 — ÷2.0 → ÷1.5 → ÷1.0 の順で配置し、 境界値(DPR 1.0, 1.5)での overlap を後段 tier の勝ちで解決する。並び替え禁止。 */ /* DPR 2x（÷2.0）: 背景画像用 - 閾値（300px/500px/900px）= DPR 1x閾値 ÷ 2.0 */ @media (min-resolution: 1.5dppx) { /* --- horizontal (横長/正方形) - DPR 2x --- */ /* デフォルト: < 300px → small */ .image--horizontal .image__bg-container::before { --img-current: var(--img-small); } /* aspect-ratio < 1 補正: small → middle (300px未満) */ @container (aspect-ratio < 1) and (width < 300px) { .image--horizontal .image__bg-container::before { --img-current: var(--img-middle); } } /* aspect-ratio < 0.5 補正: small → regular (300px未満、2段階アップ) */ @container (aspect-ratio < 0.5) and (width < 300px) { .image--horizontal .image__bg-container::before { --img-current: var(--img-regular); } } /* 300px以上 + aspect-ratio >= 1 → middle horizontalはmax-widthなし: aspect-ratio >= 1 が自然にスコープし、 後続の幅帯ルールがソース順で上書きするためmax-width不要。 verticalは明示的範囲限定（min-width + max-width + aspect-ratio >= 0.5）を使用。 */ @container (300px <= width) and (aspect-ratio >= 1) { .image--horizontal .image__bg-container::before { --img-current: var(--img-middle); } } /* 300px以上500px未満 + aspect-ratio < 1 補正: middle → regular */ @container (300px <= width < 500px) and (aspect-ratio < 1) { .image--horizontal .image__bg-container::before { --img-current: var(--img-regular); } } /* 300px以上500px未満 + aspect-ratio < 0.5 補正: middle → origin (2段階アップ) */ @container (300px <= width < 500px) and (aspect-ratio < 0.5) { .image--horizontal .image__bg-container::before { --img-current: var(--img-origin); } } /* 500px以上 + aspect-ratio >= 1 → regular */ @container (500px <= width) and (aspect-ratio >= 1) { .image--horizontal .image__bg-container::before { --img-current: var(--img-regular); } } /* 500px以上901px未満 + aspect-ratio < 1 補正: regular → origin */ @container (500px <= width < 901px) and (aspect-ratio < 1) { .image--horizontal .image__bg-container::before { --img-current: var(--img-origin); } } /* 500px以上 + aspect-ratio < 0.5: origin で上限キャップ（aspect-ratio < 1 と同じ結果） */ /* 901px以上 → origin */ @container (901px <= width) { .image--horizontal .image__bg-container::before { --img-current: var(--img-origin); } } /* --- vertical (縦長) - DPR 2x --- */ /* デフォルト: < 300px → small（aspect-ratioガードなし: 補正CQがカスケードで上書きする） */ .image--vertical .image__bg-container::before { --img-current: var(--img-small); } /* aspect-ratio < 0.5 補正: small → middle (300px未満) */ @container (aspect-ratio < 0.5) and (width < 300px) { .image--vertical .image__bg-container::before { --img-current: var(--img-middle); } } /* aspect-ratio < 0.25 補正: small → regular (300px未満、2段階アップ) */ @container (aspect-ratio < 0.25) and (width < 300px) { .image--vertical .image__bg-container::before { --img-current: var(--img-regular); } } /* 300px以上500px未満 + aspect-ratio >= 0.5 → middle */ @container (300px <= width < 500px) and (aspect-ratio >= 0.5) { .image--vertical .image__bg-container::before { --img-current: var(--img-middle); } } /* 300px以上500px未満 + aspect-ratio < 0.5 補正: middle → regular */ @container (300px <= width < 500px) and (aspect-ratio < 0.5) { .image--vertical .image__bg-container::before { --img-current: var(--img-regular); } } /* 300px以上500px未満 + aspect-ratio < 0.25 補正: middle → origin (2段階アップ) */ @container (300px <= width < 500px) and (aspect-ratio < 0.25) { .image--vertical .image__bg-container::before { --img-current: var(--img-origin); } } /* 500px以上901px未満 + aspect-ratio >= 0.5 → regular */ @container (500px <= width < 901px) and (aspect-ratio >= 0.5) { .image--vertical .image__bg-container::before { --img-current: var(--img-regular); } } /* 500px以上901px未満 + aspect-ratio < 0.5 補正: regular → origin */ @container (500px <= width < 901px) and (aspect-ratio < 0.5) { .image--vertical .image__bg-container::before { --img-current: var(--img-origin); } } /* 901px以上 → origin */ @container (901px <= width) { .image--vertical .image__bg-container::before { --img-current: var(--img-origin); } } } /* DPR 1.5x（÷1.5）: DPR 1.01-1.5 の Android 端末等向け。 対象デバイスは限定的だが、÷1.0 では解像度不足、÷2.0 では過剰ダウンスケールとなるため独立 tier として設置。 閾値 = DPR 1x閾値 ÷ 1.5（端数は切り上げ: 600/1.5=400, 1000/1.5≈667, 1801/1.5≈1201） */ /* @media matches 1.0 ≤ DPR ≤ 1.5, effective 1.0 < DPR ≤ 1.5（DPR 1.0 は後段の ÷1.0 tier がソース順で勝つ） */ @media (min-resolution: 1dppx) and (max-resolution: 1.5dppx) { /* --- horizontal (横長/正方形) - DPR 1.5x --- */ /* デフォルト: < 400px → small */ .image--horizontal .image__bg-container::before { --img-current: var(--img-small); } /* aspect-ratio < 1 補正: small → middle (400px未満) */ @container (aspect-ratio < 1) and (width < 400px) { .image--horizontal .image__bg-container::before { --img-current: var(--img-middle); } } /* aspect-ratio < 0.5 補正: small → regular (400px未満、2段階アップ) */ @container (aspect-ratio < 0.5) and (width < 400px) { .image--horizontal .image__bg-container::before { --img-current: var(--img-regular); } } /* 400px以上 + aspect-ratio >= 1 → middle */ @container (400px <= width) and (aspect-ratio >= 1) { .image--horizontal .image__bg-container::before { --img-current: var(--img-middle); } } /* 400px以上667px未満 + aspect-ratio < 1 補正: middle → regular */ @container (400px <= width < 667px) and (aspect-ratio < 1) { .image--horizontal .image__bg-container::before { --img-current: var(--img-regular); } } /* 400px以上667px未満 + aspect-ratio < 0.5 補正: middle → origin (2段階アップ) */ @container (400px <= width < 667px) and (aspect-ratio < 0.5) { .image--horizontal .image__bg-container::before { --img-current: var(--img-origin); } } /* 667px以上 + aspect-ratio >= 1 → regular */ @container (667px <= width) and (aspect-ratio >= 1) { .image--horizontal .image__bg-container::before { --img-current: var(--img-regular); } } /* 667px以上1201px未満 + aspect-ratio < 1 補正: regular → origin */ @container (667px <= width < 1201px) and (aspect-ratio < 1) { .image--horizontal .image__bg-container::before { --img-current: var(--img-origin); } } /* 667px以上 + aspect-ratio < 0.5: origin で上限キャップ（aspect-ratio < 1 と同じ結果） */ /* 1201px以上 → origin */ @container (1201px <= width) { .image--horizontal .image__bg-container::before { --img-current: var(--img-origin); } } /* --- vertical (縦長) - DPR 1.5x --- */ /* デフォルト: < 400px → small（aspect-ratioガードなし: 補正CQがカスケードで上書きする） */ .image--vertical .image__bg-container::before { --img-current: var(--img-small); } /* aspect-ratio < 0.5 補正: small → middle (400px未満) */ @container (aspect-ratio < 0.5) and (width < 400px) { .image--vertical .image__bg-container::before { --img-current: var(--img-middle); } } /* aspect-ratio < 0.25 補正: small → regular (400px未満、2段階アップ) */ @container (aspect-ratio < 0.25) and (width < 400px) { .image--vertical .image__bg-container::before { --img-current: var(--img-regular); } } /* 400px以上667px未満 + aspect-ratio >= 0.5 → middle */ @container (400px <= width < 667px) and (aspect-ratio >= 0.5) { .image--vertical .image__bg-container::before { --img-current: var(--img-middle); } } /* 400px以上667px未満 + aspect-ratio < 0.5 補正: middle → regular */ @container (400px <= width < 667px) and (aspect-ratio < 0.5) { .image--vertical .image__bg-container::before { --img-current: var(--img-regular); } } /* 400px以上667px未満 + aspect-ratio < 0.25 補正: middle → origin (2段階アップ) */ @container (400px <= width < 667px) and (aspect-ratio < 0.25) { .image--vertical .image__bg-container::before { --img-current: var(--img-origin); } } /* 667px以上1201px未満 + aspect-ratio >= 0.5 → regular */ @container (667px <= width < 1201px) and (aspect-ratio >= 0.5) { .image--vertical .image__bg-container::before { --img-current: var(--img-regular); } } /* 667px以上1201px未満 + aspect-ratio < 0.5 補正: regular → origin */ @container (667px <= width < 1201px) and (aspect-ratio < 0.5) { .image--vertical .image__bg-container::before { --img-current: var(--img-origin); } } /* 1201px以上 → origin */ @container (1201px <= width) { .image--vertical .image__bg-container::before { --img-current: var(--img-origin); } } } /* DPR 1x（÷1.0）: 背景画像用 - 閾値（600px/1000px/1801px） */ @media (max-resolution: 1dppx) { /* --- horizontal (横長/正方形) - DPR 1x --- */ /* デフォルト: < 600px → small */ .image--horizontal .image__bg-container::before { --img-current: var(--img-small); } /* aspect-ratio < 1 補正: small → middle (600px未満) */ @container (aspect-ratio < 1) and (width < 600px) { .image--horizontal .image__bg-container::before { --img-current: var(--img-middle); } } /* aspect-ratio < 0.5 補正: small → regular (600px未満、2段階アップ) */ @container (aspect-ratio < 0.5) and (width < 600px) { .image--horizontal .image__bg-container::before { --img-current: var(--img-regular); } } /* 600px以上 + aspect-ratio >= 1 → middle */ @container (600px <= width) and (aspect-ratio >= 1) { .image--horizontal .image__bg-container::before { --img-current: var(--img-middle); } } /* 600px以上1000px未満 + aspect-ratio < 1 補正: middle → regular */ @container (600px <= width < 1000px) and (aspect-ratio < 1) { .image--horizontal .image__bg-container::before { --img-current: var(--img-regular); } } /* 600px以上1000px未満 + aspect-ratio < 0.5 補正: middle → origin (2段階アップ) */ @container (600px <= width < 1000px) and (aspect-ratio < 0.5) { .image--horizontal .image__bg-container::before { --img-current: var(--img-origin); } } /* 1000px以上 + aspect-ratio >= 1 → regular */ @container (1000px <= width) and (aspect-ratio >= 1) { .image--horizontal .image__bg-container::before { --img-current: var(--img-regular); } } /* 1000px以上1801px未満 + aspect-ratio < 1 補正: regular → origin */ @container (1000px <= width < 1801px) and (aspect-ratio < 1) { .image--horizontal .image__bg-container::before { --img-current: var(--img-origin); } } /* 1000px以上 + aspect-ratio < 0.5: origin で上限キャップ（aspect-ratio < 1 と同じ結果） */ /* 1801px以上 → origin */ @container (1801px <= width) { .image--horizontal .image__bg-container::before { --img-current: var(--img-origin); } } /* --- vertical (縦長) - DPR 1x --- */ /* デフォルト: < 600px → small（aspect-ratioガードなし: 補正CQがカスケードで上書きする） */ .image--vertical .image__bg-container::before { --img-current: var(--img-small); } /* aspect-ratio < 0.5 補正: small → middle (600px未満) */ @container (aspect-ratio < 0.5) and (width < 600px) { .image--vertical .image__bg-container::before { --img-current: var(--img-middle); } } /* aspect-ratio < 0.25 補正: small → regular (600px未満、2段階アップ) */ @container (aspect-ratio < 0.25) and (width < 600px) { .image--vertical .image__bg-container::before { --img-current: var(--img-regular); } } /* 600px以上1000px未満 + aspect-ratio >= 0.5 → middle */ @container (600px <= width < 1000px) and (aspect-ratio >= 0.5) { .image--vertical .image__bg-container::before { --img-current: var(--img-middle); } } /* 600px以上1000px未満 + aspect-ratio < 0.5 補正: middle → regular */ @container (600px <= width < 1000px) and (aspect-ratio < 0.5) { .image--vertical .image__bg-container::before { --img-current: var(--img-regular); } } /* 600px以上1000px未満 + aspect-ratio < 0.25 補正: middle → origin (2段階アップ) */ @container (600px <= width < 1000px) and (aspect-ratio < 0.25) { .image--vertical .image__bg-container::before { --img-current: var(--img-origin); } } /* 1000px以上1801px未満 + aspect-ratio >= 0.5 → regular */ @container (1000px <= width < 1801px) and (aspect-ratio >= 0.5) { .image--vertical .image__bg-container::before { --img-current: var(--img-regular); } } /* 1000px以上1801px未満 + aspect-ratio < 0.5 補正: regular → origin */ @container (1000px <= width < 1801px) and (aspect-ratio < 0.5) { .image--vertical .image__bg-container::before { --img-current: var(--img-origin); } } /* 1801px以上 → origin */ @container (1801px <= width) { .image--vertical .image__bg-container::before { --img-current: var(--img-origin); } } } /* --- Shift Classes for Background Images --- */ /* 注意: shift classesはDPR非依存で、常にDPR 1x相当の閾値（600px/1000px）を使用 */ /* shift-1: 1段階上のバリエーション */ .image--shift-1 .image__bg-container::before { --img-current: var(--img-middle); } @container (min-width: 600px) { .image--shift-1 .image__bg-container::before { --img-current: var(--img-regular); } } @container (min-width: 1000px) { .image--shift-1 .image__bg-container::before { --img-current: var(--img-origin); } } /* shift-2: 2段階上のバリエーション */ .image--shift-2 .image__bg-container::before { --img-current: var(--img-regular); } @container (min-width: 600px) { .image--shift-2 .image__bg-container::before { --img-current: var(--img-origin); } } /* --- Text Specific --- */ .text { /* Note: Base styles are defined above in common group */ /* Specific styles for .text */ -webkit-font-smoothing: antialiased; position: relative; /* Already defined in base, maybe redundant */ line-height: 1; word-spacing: 1px; /* margin: 0; is already defined in base */ } /* --- Frame --- */ .frame { display: block; overflow: hidden; /* iframe は display: inline のため、親の line-height が iframe 下の baseline descent gap を決定する。studio-preview はリセットで広範に line-height: 1 を適用しており、HRC でも .frame に同等の値を設定して挙動を一致させる。 */ line-height: 1; /* Note: Base styles are defined above in common group */ } /* biome-ignore lint/style/noDescendingSpecificity: 異なるコンテキストでのiframeスタイル */ .frame > iframe { border: none; width: 100%; height: 100%; } /* --- Studio Specific --- */ /* --- Toggle --- */ /* Base styles are shared with other segment containers (see JSDoc). Toggle-specific rules (open/closing state) are defined below. */ /* --- Input File --- */ .file { box-sizing: border-box; display: flex; align-items: center; flex-direction: row; word-break: break-word; overflow-wrap: anywhere; cursor: pointer; outline: 2px solid transparent; outline-offset: -1px; position: relative; /* TypeSquareの ts-unused インライン上書きから label を保護（.input/.select と同方針） */ font-family: inherit !important; } .file:focus-within { outline-color: rgba(56, 110, 220, 0.5); } .file > input[type='file'] { opacity: 0; position: absolute; pointer-events: none; inset: 0; width: 100%; height: 100%; } .toggle[data-toggle-closing] [data-show-toggle="open"], .toggle[open]:not([data-toggle-closing]) [data-show-toggle="close"], .toggle:not([open]):not([data-toggle-closing]) [data-show-toggle="open"] { display: none; } /* out-of-flow（absolute/fixed）トグルに限り、閉じた（遷移中でない）コンテンツをレイアウトから除外する。 height:0 + overflow:hidden だけでは、position:absolute で複数トグルを重ねたメガメニュー等で コンテンツが幅を保持し続け、トグル root（width:auto の flex 親）の shrink-to-fit が全幅へ膨らむ。 その全幅 root box が、DOM 順で後ろに来る閉トグルとして、前にある開トグルのはみ出しコンテンツへ 最前面で重なり（同 z-index・position:absolute）、メニュー項目のクリックを奪う（#2952）。 studio-preview は閉トグルがコンテンツをレイアウトしないため root が trigger 幅に収まり重ならない。 [data-toggle-overlay] は ToggleBundleBuilder が out-of-flow トグルにのみ付与する。 in-flow（position:relative 等）トグルでは閉コンテンツの幅が root 幅の確定要素として機能しており （横並びナビ等）、一律 display:none にすると root が trigger 幅へ潰れて隣項目と重なる（#2985 回帰）。 そのため本規則は out-of-flow に限定する。 遷移中は [open] / [data-toggle-closing] が付くためこの規則は当たらず開閉アニメーションを壊さない。 trigger は常時表示・クリック可能。閉コンテンツは既に inert + aria-hidden + height:0 で不可視・非対話。 */ .toggle[data-toggle-overlay]:not([open]):not([data-toggle-closing]) > [data-toggle-content] { display: none; } /* --- sd-video Custom Element --- */ /* object-fitはnon-inheritedかつreplaced element専用プロパティのため、 * 非replaced要素であるsd-video自身には視覚効果を持たない。 * ここでの宣言は子<video>が object-fit: inherit で参照するための値供給源として機能する。 * これにより<video> UA stylesheetデフォルト(object-fit: contain)をsd-video階層で再現し、 * objectFit未指定のレガシーデータでもstudio-previewと等価な表示となる。 */ sd-video { display: block; overflow: hidden; object-fit: contain; } /* studio-preview互換: ネイティブ<video>のように振る舞う * width:100%ではなくmax-width:100%を使用し、 * sd-videoのwidth:auto時に循環依存を防ぐ（Safari互換 #2312） * max-height:100%で親sd-videoの高さに収める * （親height:auto時はpercentageがnoneにフォールバックするCSS仕様） * object-fit:inheritで親sd-videoのobject-fitを継承する */ sd-video > video { display: block; max-width: 100%; max-height: 100%; object-fit: inherit; } /* --- Video Container --- */ /* Video inside video-container - disable text selection */ .video-container { user-select: none; } /* Video label toggle based on container state */ .video-container[data-video-state="paused"] [data-video-label="pause"], .video-container[data-video-state="playing"] [data-video-label="play"] { display: none; } .video-container[data-video-state="paused"] [data-video-label="play"], .video-container[data-video-state="playing"] [data-video-label="pause"] { display: inline; } /* --- Carousel Custom Element --- */ sd-carousel { display: flex; flex-direction: column; align-items: center; } /* is-playing属性に基づくslot表示制御 */ sd-carousel:not([is-playing]) [slot="pause"], sd-carousel[is-playing] [slot="play"] { display: none !important; } /* カルーセルのコントロール（prev/next/play-toggle）は指カーソルにする（studio-preview 互換）。 * studio-preview はクリック可能要素に .button / .link クラスを付与し、HTML タグに依存せず * cursor:pointer を当てる。HRC のデフォルト CSS は button タグにのみ cursor:pointer を当てるため、 * V2 カルーセル（コントロールが <button>）では指になるが、V1 カルーセルはコントロールが * <div class="box"> で出力され button セレクタに当たらず指にならない（studio-preview 互換性のずれ）。 * ここでタグ非依存に補う。slot 名は CAROUSEL_SLOT（studio-domain）と対。 * :where() で詳細度を 0 に保ち（全体は sd-carousel の (0,0,1) のみ）、ノード個別スタイル * （.sd-N の cursor、(0,1,0)）が上書きできるようにする（studio-preview のインライン style 優先と等価）。 */ sd-carousel :where([slot="prev"], [slot="next"], [slot="play-toggle"]) { cursor: pointer; } /** root-element */ .sd-1 { min-height: 100vh; overflow: clip; } /* --- CSS Custom Properties for Gradient Animation --- */ @property --g-angle { syntax: "<angle>"; inherits: false; initial-value: 180deg; } @property --g-color-0 { syntax: "<color>"; inherits: false; initial-value: transparent; } @property --g-position-0 { syntax: "<percentage>"; inherits: false; initial-value: 0.01%; } @property --g-color-1 { syntax: "<color>"; inherits: false; initial-value: transparent; } @property --g-position-1 { syntax: "<percentage>"; inherits: false; initial-value: 100%; } @property --g-color-2 { syntax: "<color>"; inherits: false; initial-value: transparent; } @property --g-position-2 { syntax: "<percentage>"; inherits: false; initial-value: 100%; } @property --g-color-3 { syntax: "<color>"; inherits: false; initial-value: transparent; } @property --g-position-3 { syntax: "<percentage>"; inherits: false; initial-value: 100%; } @property --g-color-4 { syntax: "<color>"; inherits: false; initial-value: transparent; } @property --g-position-4 { syntax: "<percentage>"; inherits: false; initial-value: 100%; } @property --g-color-5 { syntax: "<color>"; inherits: false; initial-value: transparent; } @property --g-position-5 { syntax: "<percentage>"; inherits: false; initial-value: 100%; } @property --g-color-6 { syntax: "<color>"; inherits: false; initial-value: transparent; } @property --g-position-6 { syntax: "<percentage>"; inherits: false; initial-value: 100%; } @property --g-color-7 { syntax: "<color>"; inherits: false; initial-value: transparent; } @property --g-position-7 { syntax: "<percentage>"; inherits: false; initial-value: 100%; } @property --g-color-8 { syntax: "<color>"; inherits: false; initial-value: transparent; } @property --g-position-8 { syntax: "<percentage>"; inherits: false; initial-value: 100%; } @property --g-color-9 { syntax: "<color>"; inherits: false; initial-value: transparent; } @property --g-position-9 { syntax: "<percentage>"; inherits: false; initial-value: 100%; } @property --g-color-10 { syntax: "<color>"; inherits: false; initial-value: transparent; } @property --g-position-10 { syntax: "<percentage>"; inherits: false; initial-value: 100%; } @property --g-color-11 { syntax: "<color>"; inherits: false; initial-value: transparent; } @property --g-position-11 { syntax: "<percentage>"; inherits: false; initial-value: 100%; } /* ループ帯(loop-track, position:absolute)はボックスより広くなるため、はみ出しをクリップする。 studio-preview の LoopBoxRenderer が node style の後に overflow:hidden を inline 強制するのと同等。 sd-loop-box は .box 由来で position:relative のため absolute な track の包含ブロックとしてクリップが効く。 !important は、ノード個別/レスポンシブの overflow（.sd-N { overflow-x/y } (0,1,0)）に対し type selector (0,0,1) が specificity・出力順の両方で負けるのを防ぐため。ループのクリップは 機能上の不変条件であり、studio-preview の inline 強制（ユーザーの overflow 設定より常に優先）と等価。 */ sd-loop-box { overflow: hidden !important; } /* LoopBox内のnative imgがJS初期化前に固有サイズで膨張するのを防止 */ sd-loop-box > .img { max-width: 100%; height: auto; }

/* === block 7 noscript image === */
img[data-sd-img-src]{display}

/* === block 8 color vars === */
:root { --s-color-169e4d40: #ff4d15ff; --s-color-1da01785: #333333ff; --s-color-b099e3e9: #717171ff; --s-color-1bbc7ab6: #ffffffff; --s-color-d3b3be1c: #eaeaeaf5; }

/* === block 9 .theme-* base === */
.text.theme-92a7fbc3 { font-family:var(--s-font-4496c9a5); font-feature-settings:normal; font-size:16px; font-style:normal; font-weight:500; letter-spacing:normal; line-height:1.50; } .text.theme-4688fa6c { font-family:var(--s-font-4496c9a5); font-size:14px; font-style:normal; font-weight:700; letter-spacing:-0.02em; line-height:1.4; }

/* === block 10 .theme-* @ 840px (media="(max-width: 840px)") === */
@media (max-width: 840px) {
.text.theme-4688fa6c { font-size:13px; }
}

/* === block 11 .theme-* @ 540px (media="(max-width: 540px)") === */
@media (max-width: 540px) {
.text.theme-92a7fbc3 { font-size:14px; } .text.theme-4688fa6c { font-size:13px; }
}

/* === block 12 .sd-* / .symbol-* / .modal-* base === */
.sd-1 { align-content:center; align-items:center; background:#f5f5f5f5; border-radius:0; flex-direction:column; flex-wrap:nowrap; height:100%; justify-content:center; margin:0; opacity:1; padding:0; width:100%; max-width:100%; } body { background:#f5f5f5f5; } .symbol-1 { align-content:center; align-items:center; background:rgb(255, 255, 255); display:flex; flex:none; flex-direction:row; flex-wrap:nowrap; gap:72px; height:98px; justify-content:space-between; left:0px; padding:0px 140px; position:fixed; top:0px; width:100%; z-index:2; max-width:100%; } .symbol-1 > * { --gap-h:72px; --gap-v:0px; } .symbol-1__sd-1 { height:31px; width:223px; max-width:100%; } .symbol-1__sd-2 { align-content:center; align-items:center; display:flex; flex-direction:row; flex-wrap:nowrap; gap:50px; justify-content:space-between; padding:0px; } .symbol-1__sd-2 > * { --gap-h:50px; --gap-v:0px; } .symbol-1__sd-3 { align-content:center; align-items:center; -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px); background:rgba(255, 255, 255, 0.4000000059604645); border-radius:100px; display:flex; flex:none; flex-direction:row; flex-wrap:nowrap; gap:27px; height:auto; justify-content:flex-start; overflow-x:hidden; overflow-y:hidden; padding:20px 24px; width:auto; max-width:100%; } .symbol-1__sd-3 > * { --gap-h:27px; --gap-v:0px; } .symbol-1__sd-4 { color:#000000; flex:none; font-family:var(--s-font-5b93b829); font-size:14px; font-style:normal; font-weight:700; height:auto; letter-spacing:-0.02em; line-height:1.4; text-align:center; width:auto; justify-content:center; max-width:100%; } .symbol-1__sd-4:hover { color:#11111199; transition-duration:300ms; transition-timing-function:ease-in-out; --ha:1; } .symbol-1__sd-5 { color:#000000; flex:none; font-family:var(--s-font-5b93b829); font-size:14px; font-style:normal; font-weight:700; height:auto; letter-spacing:-0.02em; line-height:1.4; text-align:center; width:auto; justify-content:center; max-width:100%; } .symbol-1__sd-5:hover { color:#11111199; transition-duration:300ms; transition-timing-function:ease-in-out; --ha:1; } .symbol-1__sd-6 { color:#000000ff; flex:none; font-family:var(--s-font-5b93b829); font-size:14px; font-style:normal; font-weight:700; height:auto; letter-spacing:-0.02em; line-height:1.4; text-align:center; width:auto; justify-content:center; max-width:100%; } .symbol-1__sd-6:hover { color:#00000099; transition-duration:300ms; transition-timing-function:ease-in-out; --ha:1; } .symbol-1__sd-7 { color:#000000; flex:none; font-family:var(--s-font-5b93b829); font-size:14px; font-style:normal; font-weight:700; height:auto; letter-spacing:-0.02em; line-height:1.4; text-align:center; width:auto; justify-content:center; max-width:100%; } .symbol-1__sd-7:hover { color:#00000099; transition-duration:300ms; transition-timing-function:ease-in-out; --ha:1; } .symbol-1__sd-8 { color:#000000; flex:none; font-family:var(--s-font-5b93b829); font-size:14px; font-style:normal; font-weight:700; height:auto; letter-spacing:-0.02em; line-height:1.4; text-align:center; width:auto; justify-content:center; max-width:100%; } .symbol-1__sd-8:hover { color:#00000099; transition-duration:300ms; transition-timing-function:ease-in-out; --ha:1; } .symbol-1__sd-9 { align-content:center; align-items:center; flex-direction:row; flex-wrap:nowrap; gap:16px; justify-content:center; padding:0px; } .symbol-1__sd-9 > * { --gap-h:16px; --gap-v:0px; } .symbol-1__sd-10 { align-content:center; align-items:center; background:#FF4D15; border-radius:1000px; flex:none; flex-direction:row; gap:2px; height:38px; justify-content:center; padding:14px 22px; width:170px; max-width:100%; } .symbol-1__sd-10:hover { box-shadow:0 4px 8px rgba(0, 0, 0, 0.2); transition-duration:300ms; transition-timing-function:ease-in-out; --ha:1; } .symbol-1__sd-10 > * { --gap-h:2px; --gap-v:0px; } .symbol-1__sd-10:hover > * { --gap-h:2px; --gap-v:0px; } .symbol-1__sd-11 { color:#FFFFFF; flex:none; font-family:var(--s-font-ea89f43e); font-size:14px; font-style:normal; font-weight:600; height:auto; letter-spacing:-0.02em; line-height:1.4; margin:0px; text-align:center; width:auto; justify-content:center; max-width:100%; } .symbol-1__sd-12 { color:var(--s-color-1bbc7ab6); font-size:16px; --material-symbol-weight:400; } .symbol-1__sd-13 { color:#222222ff; display:none; font-size:24px; } .modal-1__backdrop { background:rgba(0,0,0,0.16); } .modal-1__container { height:100%; justify-content:center; width:100%; } .modal-1__sd-1 { background:#FFFFFF; border-radius:10px; box-shadow:0px 6px 15px 0px rgba(0,0,0,0.2); height:240px; margin:20px; width:400px; max-width:calc(100% - 40px); } .modal-1__sd-2 { align-content:center; align-items:center; flex-wrap:nowrap; justify-content:center; padding:0px; } .modal-1__sd-3 { align-content:center; align-items:center; flex-wrap:nowrap; justify-content:center; padding:0px; } .modal-1__sd-4 { height:auto; width:223px; max-width:100%; } .modal-1__sd-5 { align-content:center; align-items:center; flex-wrap:nowrap; justify-content:center; padding:0px; } .modal-1__sd-6 { align-content:center; align-items:center; flex-wrap:nowrap; justify-content:center; padding:0px; } .modal-1__sd-7 { color:#333333; font-size:24px; } .modal-1__sd-8 { align-content:center; align-items:center; flex-wrap:nowrap; justify-content:center; padding:0px; } .modal-1__sd-8 > * { --gap-h:0px; --gap-v:0px; } .modal-1__sd-9 { align-content:center; align-items:center; flex-wrap:nowrap; justify-content:center; padding:0px; } .modal-1__sd-9 > * { --gap-h:0px; --gap-v:0px; } .modal-1__sd-10 { align-content:center; align-items:center; flex-wrap:nowrap; justify-content:center; padding:0px; } .modal-1__sd-10 > * { --gap-h:0px; --gap-v:0px; } .modal-1__sd-11 { align-content:center; align-items:center; flex-wrap:nowrap; justify-content:center; padding:0px; } .modal-1__sd-11 > * { --gap-h:0px; --gap-v:0px; } .modal-1__sd-12 { color:#333333; font-family:var(--s-font-9d9e02e5); font-size:20px; font-weight:400; height:auto; line-height:1.4; text-align:center; width:auto; justify-content:center; max-width:100%; } .modal-1__sd-13 { color:#333333; font-family:var(--s-font-9d9e02e5); font-size:20px; font-weight:400; height:auto; line-height:1.4; text-align:center; width:auto; justify-content:center; max-width:100%; } .modal-1__sd-14 { color:#333333; font-family:var(--s-font-9d9e02e5); font-size:20px; font-weight:400; height:auto; line-height:1.4; text-align:center; width:auto; justify-content:center; max-width:100%; } .modal-1__sd-15 { color:#333333; font-family:var(--s-font-9d9e02e5); font-size:20px; font-weight:400; height:auto; line-height:1.4; text-align:center; width:auto; justify-content:center; max-width:100%; } .modal-1__sd-16 { color:#333333; font-family:var(--s-font-9d9e02e5); font-size:20px; font-weight:400; height:auto; line-height:1.4; text-align:center; width:auto; justify-content:center; max-width:100%; } .sd-2 { align-content:flex-start; align-items:flex-start; display:flex; flex-direction:row; flex-wrap:nowrap; height:auto; justify-content:flex-start; padding:0px; width:auto; max-width:100%; } .sd-3 { align-content:flex-start; align-items:flex-start; background:#ffffffff; display:flex; flex:none; flex-direction:row; flex-wrap:nowrap; gap:0px 0px; height:2384px; justify-content:flex-start; padding:100px 0px 0px; width:1280px; max-width:100%; } .sd-3 > * { --gap-h:0px; --gap-v:0px; } .sd-4 { align-content:flex-start; align-items:flex-start; background:#ffffffff; flex:none; flex-direction:column; flex-wrap:nowrap; height:2284px; justify-content:flex-start; padding:0px; width:896px; max-width:100%; } .sd-5 { align-content:flex-start; align-items:flex-start; flex:none; flex-direction:column; flex-wrap:nowrap; height:2284px; justify-content:flex-start; padding:0px; width:100%; max-width:100%; } .sd-6 { align-content:center; align-items:center; flex:none; flex-direction:column; flex-wrap:nowrap; height:305px; justify-content:flex-end; padding:0px; width:896px; max-width:100%; } .sd-6 > .image__bg-container::before { background-position:left center; } .sd-7 { align-content:center; align-items:center; flex:none; flex-direction:column; flex-wrap:nowrap; height:364px; justify-content:flex-end; padding:0px; width:100%; max-width:100%; } .sd-7 > .image__bg-container::before { background-position:left center; } .sd-8 { align-content:center; align-items:center; flex:none; flex-direction:column; flex-wrap:nowrap; height:1416px; justify-content:flex-end; padding:0px; width:100%; max-width:100%; } .sd-8 > .image__bg-container::before { background-position:left center; } .sd-9 { height:196px; margin:0px; width:100%; max-width:100%; } .sd-9 > .image__bg-container::before { background-position:left center; } .sd-10 { align-content:center; align-items:center; background:#ffffffff; flex:none; flex-direction:column; flex-wrap:nowrap; height:100%; justify-content:flex-start; margin:0px; padding:0px; width:384px; max-width:100%; } .sd-11 { background:#ffffffff; border-bottom:0px solid var(--s-color-d3b3be1c); border-left:1px solid var(--s-color-d3b3be1c); border-radius:0px; border-right:0px solid var(--s-color-d3b3be1c); border-top:0px solid var(--s-color-d3b3be1c); height:auto; margin:0px; opacity:1; padding:40px 26px; width:384px; max-width:100%; } .sd-12 { align-content:flex-start; align-items:flex-start; display:none; flex:none; flex-direction:row; flex-wrap:nowrap; height:auto; justify-content:center; padding:100px 0px 0px; width:100%; max-width:100%; } .sd-13 { background:#ffffffff; display:none; flex:none; height:1204px; margin:0px; padding:0px; width:50%; max-width:50%; } .sd-14 { align-content:center; align-items:center; background:#ffffffff; display:none; flex:none; flex-direction:column; flex-wrap:nowrap; gap:0px; height:100%; justify-content:flex-start; padding:0px 0px 32px; width:100%; max-width:100%; } .sd-14 > * { --gap-h:0px; --gap-v:0px; } .sd-15 { align-content:center; align-items:center; flex-direction:column; flex-wrap:nowrap; height:auto; justify-content:flex-end; padding:0px; width:auto; max-width:100%; } .sd-15 { aspect-ratio:auto 750 / 422; } .sd-16 { align-content:flex-start; align-items:flex-start; background:rgb(255, 255, 255); display:none; flex:none; flex-direction:row; flex-wrap:nowrap; height:1204px; justify-content:center; padding:0px; width:auto; max-width:100%; } .sd-17 { background:#ffffffff; border-bottom:0px solid var(--s-color-d3b3be1c); border-left:1px solid var(--s-color-d3b3be1c); border-radius:0px; border-right:0px solid var(--s-color-d3b3be1c); border-top:0px solid var(--s-color-d3b3be1c); flex:none; height:100%; margin:0px; opacity:1; padding:0px 16px; width:384px; max-width:100%; } .sd-18 { height:auto; width:160px; max-width:100%; } .sd-18 { aspect-ratio:auto 750 / 3229; } .sd-19 { height:auto; width:160px; max-width:100%; } .sd-19 { aspect-ratio:auto 750 / 803; } .sd-20 { height:auto; width:160px; max-width:100%; } .sd-20 { aspect-ratio:auto 750 / 566; } .sd-21 { align-content:flex-start; align-items:flex-start; background:rgb(255, 255, 255); display:none; flex:none; flex-direction:row; flex-wrap:nowrap; height:1204px; justify-content:center; padding:0px; width:auto; max-width:100%; } .sd-22 { background:#ffffffff; border-bottom:0px solid var(--s-color-d3b3be1c); border-left:1px solid var(--s-color-d3b3be1c); border-radius:0px; border-right:0px solid var(--s-color-d3b3be1c); border-top:0px solid var(--s-color-d3b3be1c); flex:none; height:100%; margin:0px; opacity:1; padding:0px 16px; width:384px; max-width:100%; } .symbol-2 { align-content:center; align-items:center; background:#FFFFFF; border-bottom:1px solid rgb(230, 230, 230); border-left:1px solid rgb(230, 230, 230); border-right:1px solid rgb(230, 230, 230); border-top:1px solid rgb(230, 230, 230); display:flex; flex-direction:column; flex-wrap:nowrap; gap:0px; height:auto; justify-content:flex-start; padding:40px 40px 0px; width:100%; max-width:100%; } .symbol-2 > * { --gap-h:0px; --gap-v:0px; } .symbol-2__sd-1 { align-content:center; align-items:center; flex-direction:row; flex-wrap:nowrap; gap:24px; height:auto; justify-content:space-between; padding:0px 0px 20px; width:100%; max-width:100%; } .symbol-2__sd-1 > * { --gap-h:24px; --gap-v:0px; } .symbol-2__sd-2 { align-content:flex-start; align-items:flex-start; flex:none; flex-direction:column; flex-wrap:nowrap; gap:16px; height:auto; justify-content:flex-start; padding:0px; width:449px; max-width:100%; } .symbol-2__sd-2 > * { --gap-h:0px; --gap-v:16px; } .symbol-2__sd-3 { align-items:center; flex-direction:column; height:46px; justify-content:center; width:327px; max-width:100%; } .symbol-2__sd-4 { align-content:center; align-items:center; flex-direction:row; flex-wrap:nowrap; gap:433px; height:auto; justify-content:space-between; padding:20px 0px; width:100%; max-width:100%; } .symbol-2__sd-4 > * { --gap-h:433px; --gap-v:0px; } .symbol-2__sd-5 { align-content:flex-end; align-items:flex-end; flex:none; flex-direction:row; flex-wrap:nowrap; gap:24px; height:auto; justify-content:flex-start; padding:0px; width:auto; max-width:100%; } .symbol-2__sd-5 > * { --gap-h:24px; --gap-v:0px; } .symbol-2__sd-6 { color:#323232; font-family:var(--s-font-4496c9a5); font-size:10px; font-style:normal; font-weight:400; height:14px; letter-spacing:0em; line-height:40px; text-align:left; width:auto; justify-content:flex-start; max-width:100%; } .symbol-2__sd-7 { color:#323232; font-family:var(--s-font-4496c9a5); font-size:10px; font-style:normal; font-weight:400; height:14px; letter-spacing:0em; line-height:40px; text-align:left; width:auto; justify-content:flex-start; max-width:100%; } .symbol-2__sd-8 { color:#323232; font-family:var(--s-font-4496c9a5); font-size:10px; font-style:normal; font-weight:400; height:15px; letter-spacing:0em; line-height:40px; text-align:left; width:auto; justify-content:flex-start; max-width:100%; } .symbol-2__sd-9 { color:#323232; font-family:var(--s-font-4496c9a5); font-size:10px; font-style:normal; font-weight:400; height:15px; letter-spacing:0em; line-height:40px; text-align:left; width:auto; justify-content:flex-start; max-width:100%; } .symbol-2__sd-10 { color:#323232; font-family:var(--s-font-4496c9a5); font-size:10px; font-style:normal; font-weight:400; height:15px; letter-spacing:0em; line-height:40px; text-align:left; width:auto; justify-content:flex-start; max-width:100%; } .symbol-2__sd-11 { color:#323232; flex:none; font-family:var(--s-font-b0a15dad); font-size:9px; font-style:normal; font-weight:400; height:12px; letter-spacing:0em; line-height:18px; text-align:left; width:125px; justify-content:flex-start; max-width:100%; }

/* === block 13 .symbol-* responsive @ 840px (media="(max-width: 840px)") === */
@media (max-width: 840px) {
.symbol-1 { display:flex; flex-wrap:wrap; width:1126px; } .symbol-1 > * { --gap-h:72px; --gap-v:72px; } .symbol-1__sd-2 { display:flex; } .symbol-1__sd-2 > * { --gap-h:50px; --gap-v:0px; } .symbol-1__sd-3 { display:none; flex:none; flex-wrap:wrap; gap:27px 0px; width:100%; max-width:100%; } .symbol-1__sd-3 > * { --gap-h:0px; --gap-v:27px; } .symbol-1__sd-4 { flex:none; font-size:13px; width:100%; max-width:100%; } .symbol-1__sd-5 { flex:none; font-size:13px; width:100%; max-width:100%; } .symbol-1__sd-6 { flex:none; font-size:13px; width:100%; max-width:100%; } .symbol-1__sd-7 { flex:none; font-size:13px; width:100%; max-width:100%; } .symbol-1__sd-8 { flex:none; font-size:13px; width:100%; max-width:100%; } .symbol-1__sd-11 { font-size:13px; } .symbol-1__sd-13 { display:none; } .sd-2 { display:flex; } .sd-3 { display:flex; flex-direction:column; flex-wrap:nowrap; } .sd-3 > * { --gap-h:0px; --gap-v:0px; } .sd-5 { flex-direction:row; } .sd-10 { flex-direction:column; } .sd-12 { display:none; flex-direction:column; flex-wrap:nowrap; } .sd-13 { display:none; } .sd-14 { display:none; padding:100px 0px 120px; } .sd-14 > * { --gap-h:0px; --gap-v:0px; } .sd-16 { display:none; } .sd-21 { display:none; } .symbol-2 { display:flex; } .symbol-2 > * { --gap-h:0px; --gap-v:0px; } .symbol-2__sd-1 { flex-wrap:wrap; } .symbol-2__sd-1 > * { --gap-h:24px; --gap-v:24px; } .symbol-2__sd-2 { flex:none; width:100%; max-width:100%; } .symbol-2__sd-2 > * { --gap-h:0px; --gap-v:16px; } .symbol-2__sd-4 { flex-wrap:wrap; gap:433px 0px; } .symbol-2__sd-4 > * { --gap-h:0px; --gap-v:433px; } .symbol-2__sd-5 { flex:none; width:100%; max-width:100%; } .symbol-2__sd-5 > * { --gap-h:24px; --gap-v:0px; } .symbol-2__sd-6 { font-size:13px; } .symbol-2__sd-7 { font-size:13px; } .symbol-2__sd-8 { font-size:13px; } .symbol-2__sd-9 { font-size:13px; } .symbol-2__sd-10 { font-size:13px; } .symbol-2__sd-11 { flex:none; font-size:13px; width:100%; max-width:100%; }
}

/* === block 14 .symbol-* responsive @ 540px (media="(max-width: 540px)") === */
@media (max-width: 540px) {
.symbol-1 { background:rgb(255, 255, 255); display:flex; flex-direction:row; flex-wrap:nowrap; gap:0px; height:auto; justify-content:space-between; left:0px; padding:20px; position:fixed; top:0px; width:100%; z-index:2; max-width:100%; } .symbol-1 > * { --gap-h:0px; --gap-v:0px; } .symbol-1__sd-2 { display:none; flex-direction:row; gap:48px; justify-content:space-between; } .symbol-1__sd-2 > * { --gap-h:48px; --gap-v:0px; } .symbol-1__sd-3 { display:none; gap:12px 0px; padding:8px 10px; } .symbol-1__sd-3 > * { --gap-h:0px; --gap-v:0px; } .symbol-1__sd-4 { font-size:13px; } .symbol-1__sd-5 { font-size:13px; } .symbol-1__sd-6 { font-size:13px; } .symbol-1__sd-7 { font-size:13px; } .symbol-1__sd-8 { font-size:13px; } .symbol-1__sd-9 { flex-direction:row; gap:48px; justify-content:space-between; } .symbol-1__sd-9 > * { --gap-h:48px; --gap-v:0px; } .symbol-1__sd-10 { padding:6px 10px; } .symbol-1__sd-10 > * { --gap-h:2px; --gap-v:0px; } .symbol-1__sd-10:hover > * { --gap-h:2px; --gap-v:0px; } .symbol-1__sd-11 { font-size:13px; } .symbol-1__sd-13 { display:flex; } .modal-1__sd-1 { align-content:flex-start; align-items:flex-start; flex-direction:column; flex-wrap:nowrap; height:100%; justify-content:flex-start; margin:0px; width:100%; max-width:100%; } .modal-1__sd-2 { align-content:center; align-items:center; flex-direction:row; flex-wrap:nowrap; height:94px; justify-content:space-between; width:100%; max-width:100%; } .modal-1__sd-3 { align-content:center; align-items:center; flex-direction:row; justify-content:space-between; } .modal-1__sd-4 { margin:0px 20px; padding:0px; max-width:calc(100% - 40px); } .modal-1__sd-5 { align-content:flex-start; align-items:flex-start; flex-direction:column; height:24px; justify-content:flex-start; margin:35px 30px; width:22px; max-width:calc(100% - 60px); } .modal-1__sd-6 { align-content:flex-end; align-items:flex-end; flex-direction:row-reverse; flex-wrap:nowrap; justify-content:flex-start; width:524px; max-width:100%; } .modal-1__sd-8 { align-content:flex-start; align-items:flex-start; flex-direction:column; gap:48px 0px; justify-content:flex-start; padding:72px 0px 0px 51px; } .modal-1__sd-8 > * { --gap-h:0px; --gap-v:48px; } .modal-1__sd-9 { align-content:flex-start; align-items:flex-start; flex-direction:column; gap:96px 0px; justify-content:flex-start; padding:0px; } .modal-1__sd-9 > * { --gap-h:0px; --gap-v:96px; } .modal-1__sd-10 { align-content:flex-start; align-items:flex-start; flex-direction:column; gap:48px 0px; justify-content:flex-start; } .modal-1__sd-10 > * { --gap-h:0px; --gap-v:48px; } .modal-1__sd-11 { align-content:flex-start; align-items:flex-start; flex-direction:column; gap:60px 0px; justify-content:center; } .modal-1__sd-11 > * { --gap-h:0px; --gap-v:60px; } .modal-1__sd-12 { font-family:var(--s-font-ea89f43e); font-size:24px; font-weight:600; } .modal-1__sd-13 { font-family:var(--s-font-ea89f43e); font-size:24px; font-weight:600; } .modal-1__sd-14 { font-family:var(--s-font-ea89f43e); font-size:24px; font-weight:600; } .modal-1__sd-15 { font-family:var(--s-font-ea89f43e); font-size:24px; font-weight:600; } .modal-1__sd-16 { font-family:var(--s-font-ea89f43e); font-size:24px; font-weight:600; } .sd-2 { display:none; } .sd-3 { display:none; flex-direction:column; flex-wrap:nowrap; padding:0px; } .sd-3 > * { --gap-h:0px; --gap-v:0px; } .sd-5 { flex-direction:row; } .sd-6 { height:auto; width:auto; max-width:100%; } .sd-7 { height:auto; width:auto; max-width:100%; } .sd-8 { height:auto; width:auto; max-width:100%; } .sd-10 { flex-direction:column; } .sd-11 { flex:none; height:auto; width:100%; max-width:100%; } .sd-12 { display:flex; flex-direction:column; flex-wrap:nowrap; padding:0px; } .sd-13 { display:flex; flex:none; height:376px; width:100%; max-width:100%; } .sd-14 { display:flex; flex:none; height:100%; padding:72px 0px 0px; width:100%; max-width:100%; } .sd-14 > * { --gap-h:0px; --gap-v:0px; } .sd-15 { height:auto; margin:0px; width:auto; max-width:100%; } .sd-16 { display:flex; height:1046px; width:100%; max-width:100%; } .sd-17 { flex:none; height:auto; width:100%; max-width:100%; } .sd-18 { flex:none; width:100%; max-width:100%; } .sd-19 { height:auto; width:100%; max-width:100%; } .sd-20 { height:auto; width:100%; max-width:100%; } .sd-21 { display:flex; height:1046px; width:100%; max-width:100%; } .sd-22 { flex:none; height:auto; width:100%; max-width:100%; } .symbol-2 { border-bottom:0px solid rgb(230, 230, 230); border-left:0px solid rgb(230, 230, 230); border-right:0px solid rgb(230, 230, 230); border-top:1px solid rgb(230, 230, 230); display:flex; padding:16px 20px 0px; } .symbol-2 > * { --gap-h:0px; --gap-v:0px; } .symbol-2__sd-1 { gap:120px; padding:20px 0px 8px; } .symbol-2__sd-1 > * { --gap-h:120px; --gap-v:0px; } .symbol-2__sd-2 { gap:6px; padding:0px; } .symbol-2__sd-2 > * { --gap-h:0px; --gap-v:6px; } .symbol-2__sd-4 { flex:none; gap:64px 0px; height:252px; padding:8px 0px 0px; width:100%; max-width:100%; } .symbol-2__sd-4 > * { --gap-h:0px; --gap-v:0px; } .symbol-2__sd-5 { align-content:flex-start; align-items:flex-start; flex-direction:column; flex-wrap:nowrap; gap:16px; justify-content:flex-start; padding:0px; } .symbol-2__sd-5 > * { --gap-h:0px; --gap-v:16px; } .symbol-2__sd-6 { font-size:13px; } .symbol-2__sd-7 { font-size:13px; } .symbol-2__sd-8 { font-size:13px; } .symbol-2__sd-9 { font-size:13px; } .symbol-2__sd-10 { font-size:13px; } .symbol-2__sd-11 { font-size:13px; }
}

/* === block 15 SP order swap: A(.sd-19「こんな課題ありますか？」) を B(.sd-18「AUTOBOOSTは、決裁者を特定し直接アプローチできるサービスです」) より前に表示 (SP ≤540px 限定) === */
/* PC/DS では .sd-12 が display:none なので order は無効。SP時のみ flex-direction:column の並びを制御。 */
@media (max-width: 540px) {
  .sd-13 { order: 0; }
  .sd-16 { order: 1; }
  .sd-19 { order: 2; }
  .sd-18 { order: 3; }
  .sd-20 { order: 4; }
  .sd-21 { order: 5; }
}

/* === block 16 PC ≥841px 限定: .sd-3 の base padding-top 100px を除去 ===
   partials/header.html (position:fixed 61px) + .site-header-spacer 61px で
   ヘッダー分の縦余白は既に確保済み。STUDIO が .symbol-1 (position:fixed height:98px) 用に
   生成した base .sd-3 padding:100px 0 0 は PC 表示では redundant となり
   ヘッダーと FV の間に不要な白い余白を発生させるため PC 限定で 0 に上書き。
   541–840px (tablet) と ≤540px (SP: .sd-3 は display:none) は現行維持。 */
@media (min-width: 841px) {
  .sd-3 { padding-top: 0; }
}