/* Nexus Engineering LP 1.4.0 — 写真とHTMLを完全に分離したレイアウト */
body.oktsw-page { margin:0; padding:0; background:#fff; }
.oktsw {
--oktsw-blue:#145bcc; --oktsw-navy:#123d78; --oktsw-ink:#173558;
--oktsw-muted:#526b87; --oktsw-line:#dfebf6; --oktsw-soft:#f2f8fd;
--oktsw-green:#06783f; --oktsw-header-offset:126px;
--oktsw-font:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
color:var(--oktsw-ink); background:#fff; font-family:var(--oktsw-font);
font-size:16px; font-weight:400; line-height:1.85; letter-spacing:.015em;
text-align:left; width:100%; max-width:none; margin:0; padding:0;
-webkit-text-size-adjust:100%; text-size-adjust:100%;
}
.oktsw *, .oktsw *::before, .oktsw *::after { box-sizing:border-box; }
.oktsw [hidden] { display:none !important; }
.oktsw h1, .oktsw h2, .oktsw h3, .oktsw h4 {
font-family:var(--oktsw-font); color:var(--oktsw-navy); font-weight:700; line-height:1.5;
margin:0; padding:0; border:0; background:none; box-shadow:none;
letter-spacing:.025em; text-decoration:none; text-transform:none; clear:none;
}
.oktsw h1::before, .oktsw h1::after, .oktsw h2::before, .oktsw h2::after, .oktsw h3::before, .oktsw h3::after { content:none; }
.oktsw h1 { font-size:38px; }
.oktsw h2 { font-size:30px; }
.oktsw h3 { font-size:18px; }
.oktsw p, .oktsw figure, .oktsw dl, .oktsw dd { margin:0; padding:0; }
.oktsw p { overflow-wrap:anywhere; word-break:normal; }
.oktsw img { display:block; max-width:100%; border:0; box-shadow:none; }
.oktsw a { color:inherit; text-decoration:none; }
.oktsw a:focus-visible, .oktsw button:focus-visible, .oktsw summary:focus-visible, .oktsw input:focus-visible, .oktsw textarea:focus-visible { outline:3px solid #5997eb; outline-offset:4px; }
.oktsw button, .oktsw input, .oktsw textarea { font:inherit; letter-spacing:inherit; }
.oktsw button, .oktsw summary { -webkit-tap-highlight-color:transparent; }
.oktsw button { cursor:pointer; }
.oktsw svg { display:block; }
.oktsw .oktsw-icon { width:32px; height:32px; flex:none; }
.oktsw .oktsw-container { width:calc(100% - 64px); max-width:1200px; margin-inline:auto; }
.oktsw .oktsw-container-narrow { max-width:900px; }
.oktsw section[id], .oktsw main[id], .oktsw [id="oktsw-line-info"] { scroll-margin-top:var(--oktsw-header-offset); }
.oktsw .oktsw-skip { position:absolute; left:20px; top:-100px; z-index:1000; background:#fff; padding:10px 20px; border:2px solid var(--oktsw-blue); }
.oktsw .oktsw-skip:focus { top:12px; }
/* ヘッダー：上段キャッチコピー／下段ロゴ・メニュー・小型CTA */
.oktsw .oktsw-header { position:sticky; top:0; z-index:90; background:rgba(255,255,255,.98); box-shadow:0 1px 0 var(--oktsw-line); }
.admin-bar .oktsw .oktsw-header { top:var(--wp-admin--admin-bar--height,32px); }
.oktsw .oktsw-header-top { background:#f0f6fc; border-bottom:1px solid #e6eff7; }
.oktsw .oktsw-header-top p { padding:5px 0; color:#48698e; font-size:11px; line-height:1.6; letter-spacing:.04em; }
.oktsw .oktsw-header-main { display:flex; align-items:center; gap:24px; min-height:78px; padding-block:12px; }
.oktsw .oktsw-brand { display:inline-flex; align-items:center; gap:10px; flex:none; min-width:0; }
.oktsw .oktsw-logo { width:38px; height:38px; object-fit:contain; flex:none; }
.oktsw .oktsw-logo-placeholder { flex:none; width:38px; height:38px; border:1px dashed #aec4dc; border-radius:8px; background:#f5f9fc; display:grid; place-items:center; color:#617e9e; font-size:10px; font-weight:500; letter-spacing:0; }
.oktsw .oktsw-brandtext { color:var(--oktsw-navy); font-size:21px; font-weight:700; line-height:1.2; white-space:nowrap; letter-spacing:-.02em; }
.oktsw .oktsw-menu { display:flex; gap:20px; align-items:center; justify-content:center; flex:1; margin:0; min-width:0; }
.oktsw .oktsw-menu a { color:#315276; font-size:12px; font-weight:700; white-space:nowrap; padding:8px 0; position:relative; }
.oktsw .oktsw-menu a:hover { color:var(--oktsw-blue); }
.oktsw .oktsw-menu a::after { content:""; position:absolute; bottom:0; left:0; width:100%; height:2px; background:currentColor; transform:scaleX(0); transition:transform .15s; }
.oktsw .oktsw-menu a:hover::after { transform:scaleX(1); }
.oktsw .oktsw-menu-toggle { display:none; align-items:center; justify-content:center; gap:6px; flex-direction:column; border:1px solid var(--oktsw-line); border-radius:8px; background:#fff; color:var(--oktsw-navy); padding:7px 9px; line-height:1; min-height:44px; }
.oktsw .oktsw-menu-label { font-size:9px; }
.oktsw .oktsw-menu-bars, .oktsw .oktsw-menu-bars::before, .oktsw .oktsw-menu-bars::after { display:block; width:18px; height:2px; background:currentColor; transition:transform .15s; }
.oktsw .oktsw-menu-bars { position:relative; margin:5px 0; }
.oktsw .oktsw-menu-bars::before, .oktsw .oktsw-menu-bars::after { content:""; position:absolute; left:0; }
.oktsw .oktsw-menu-bars::before { top:-5px; }
.oktsw .oktsw-menu-bars::after { top:5px; }
.oktsw .oktsw-menu-toggle[aria-expanded="true"] .oktsw-menu-bars { background:transparent; }
.oktsw .oktsw-menu-toggle[aria-expanded="true"] .oktsw-menu-bars::before { top:0; transform:rotate(45deg); }
.oktsw .oktsw-menu-toggle[aria-expanded="true"] .oktsw-menu-bars::after { top:0; transform:rotate(-45deg); }
/* CTAは同じ幅・高さ。無料相談とLINEは別々のリンク先。 */
.oktsw .oktsw-actions { display:flex; align-items:stretch; gap:12px; flex-wrap:wrap; }
.oktsw .oktsw-btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:46px; width:auto; padding:11px 22px; border-radius:999px; border:1px solid transparent; font:700 14px/1.5 var(--oktsw-font); letter-spacing:.015em; text-decoration:none; box-shadow:none; white-space:nowrap; transition:background .15s,box-shadow .15s; }
.oktsw .oktsw-btn span { display:inline-block; }
.oktsw .oktsw-btn-primary { color:#fff; background:linear-gradient(105deg,#2473e4,#124fae); box-shadow:0 6px 18px rgba(19,88,178,.13); }
.oktsw .oktsw-btn-primary:hover { color:#fff; background:#104d9f; box-shadow:0 7px 20px rgba(19,88,178,.2); }
.oktsw .oktsw-btn-line { color:#fff; background:var(--oktsw-green); border-color:var(--oktsw-green); }
.oktsw .oktsw-btn-line:hover { color:#fff; background:#055e33; border-color:#055e33; }
.oktsw .oktsw-btn-outline { color:var(--oktsw-blue); background:#fff; border-color:#c6daf0; }
.oktsw .oktsw-actions-header { flex:none; flex-wrap:nowrap; gap:8px; }
.oktsw .oktsw-actions-header .oktsw-btn { font-size:11px; min-height:38px; padding:8px 11px; width:132px; gap:6px; }
.oktsw .oktsw-actions-hero .oktsw-btn, .oktsw .oktsw-actions-onblue .oktsw-btn { width:184px; }
.oktsw .oktsw-small-note { color:var(--oktsw-muted); font-size:12px; margin-top:12px; }
/* アピール：写真2は右側の台形レイアウトで表示 */
.oktsw .oktsw-hero { background:linear-gradient(112deg,#fff 12%,#f1f7fe 100%); border-bottom:1px solid #eaf2fa; overflow:hidden; }
.oktsw .oktsw-hero-grid { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:center; gap:48px; padding-block:64px; }
.oktsw .oktsw-hero-copy, .oktsw .oktsw-hero-visual { min-width:0; }
.oktsw .oktsw-hero-visual { position:relative; display:flex; align-items:stretch; justify-content:flex-end; align-self:stretch; min-height:430px; }
.oktsw .oktsw-eyebrow { color:var(--oktsw-blue); font-size:12px; font-weight:700; line-height:1.6; letter-spacing:.08em; margin-bottom:14px; }
.oktsw .oktsw-hero h1 { font-size:clamp(29px,3vw,40px); line-height:1.45; letter-spacing:.015em; margin-bottom:22px; overflow-wrap:break-word; }
.oktsw .oktsw-hero-description { color:#4b6583; font-size:16px; line-height:1.95; max-width:570px; }
.oktsw .oktsw-hero-offer { margin:24px 0; border-left:3px solid #4388df; padding:1px 0 1px 16px; }
.oktsw .oktsw-hero-offer>p { font-size:13px; font-weight:700; color:var(--oktsw-navy); margin-bottom:3px; }
.oktsw .oktsw-hero-offer>div { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.oktsw .oktsw-hero-offer strong { font-size:35px; line-height:1.3; font-weight:700; color:var(--oktsw-blue); letter-spacing:-.02em; }
.oktsw .oktsw-hero-offer span { font-size:12px; color:#536e8a; }
.oktsw .oktsw-hero-offer .oktsw-offer-label { color:#4e6c8d; font-size:11px; background:#eaf3fd; padding:3px 8px; border-radius:4px; }
/* 写真2 / 写真3：文字を画像の上に置かない */
.oktsw .oktsw-photo { width:100%; margin:0; position:relative; border-radius:18px; min-width:0; }
.oktsw .oktsw-photo.has-image { overflow:hidden; }
.oktsw .oktsw-photo--2 { width:100%; height:100%; min-height:430px; aspect-ratio:auto; border-radius:0; background:transparent; clip-path:polygon(26% 0,100% 0,100% 100%,0 100%); isolation:isolate; }
.oktsw .oktsw-photo--2.has-image::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.98) 5%, rgba(255,255,255,.84) 11%, rgba(255,255,255,.35) 18%, rgba(255,255,255,.08) 26%, rgba(255,255,255,0) 34%); }
.oktsw .oktsw-photo--2.has-image::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(135deg, rgba(22,93,194,.06) 0%, rgba(22,93,194,0) 36%); }
.oktsw .oktsw-photo--2 .oktsw-slot-image { width:100%; height:100%; max-height:none; min-width:0; object-fit:cover; object-position:center center; }
.oktsw .oktsw-photo--2.oktsw-fit-contain .oktsw-slot-image { object-fit:contain; object-position:center right; background:transparent; }
.oktsw .oktsw-photo--2.is-placeholder { border:none; background:linear-gradient(135deg,#ff3b30 0%,#e30000 100%); clip-path:polygon(26% 0,100% 0,100% 100%,0 100%); }
.oktsw .oktsw-photo--2.is-placeholder::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.98) 6%, rgba(255,255,255,.72) 15%, rgba(255,255,255,.18) 26%, rgba(255,255,255,0) 36%); }
.oktsw .oktsw-photo--3 { aspect-ratio:16 / 11; }
.oktsw .oktsw-photo .oktsw-slot-image { width:100%; height:100%; max-height:none; min-width:0; object-fit:contain; }
.oktsw .oktsw-fit-cover .oktsw-slot-image { object-fit:cover; }
.oktsw .oktsw-photo.is-placeholder { border:1px dashed #b4cde5; background:linear-gradient(135deg,#fafdff,#e7f0fa); }
.oktsw .oktsw-photo-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; color:#6284a9; padding:18px; }
.oktsw .oktsw-photo-placeholder .oktsw-icon { width:48px; height:48px; stroke-width:1.25; color:#87a8cb; margin-bottom:8px; }
.oktsw .oktsw-photo-placeholder strong { font-size:18px; font-weight:600; letter-spacing:.04em; }
.oktsw .oktsw-photo-placeholder span { font-size:12px; }
.oktsw .oktsw-photo--2.is-placeholder .oktsw-photo-placeholder { color:#fff; z-index:2; }
.oktsw .oktsw-photo--2.is-placeholder .oktsw-photo-placeholder .oktsw-icon { color:#ffd4d0; }
.oktsw .oktsw-photo.oktsw-photo--2.is-placeholder { border:none; background:linear-gradient(135deg,#ff3b30 0%,#e30000 100%); }
/* サービスカード：中央アイコン、控えめな文字サイズ */
.oktsw .oktsw-section { padding:76px 0; }
.oktsw .oktsw-heading { margin-bottom:34px; text-align:center; }
.oktsw .oktsw-heading .oktsw-eyebrow { font-size:11px; letter-spacing:.16em; margin-bottom:10px; }
.oktsw .oktsw-heading h2, .oktsw .oktsw-heading h1 { font-size:30px; line-height:1.6; }
.oktsw .oktsw-heading h2 span { display:inline-block; }
.oktsw .oktsw-heading>p:not(.oktsw-eyebrow) { font-size:15px; color:var(--oktsw-muted); margin:12px auto 0; max-width:800px; }
.oktsw .oktsw-services { background:#f2f8fd; }
.oktsw .oktsw-service-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.oktsw .oktsw-service-card { min-width:0; padding:28px 22px; border:1px solid #dfebf7; border-radius:16px; background:#fff; box-shadow:0 5px 18px rgba(30,74,115,.025); text-align:center; }
.oktsw .oktsw-card-icon { width:62px; height:62px; display:grid; place-items:center; margin:0 auto 18px; border-radius:17px; background:#eff6ff; color:#2f7ce3; }
.oktsw .oktsw-card-icon .oktsw-icon { width:36px; height:36px; }
.oktsw .oktsw-service-card h3 { font-size:16px; line-height:1.65; min-height:3.3em; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.oktsw .oktsw-service-card p { font-size:14px; color:#526a86; line-height:1.95; text-align:left; }
/* パソコン紹介：2行を保ち、画像と干渉しない。 */
.oktsw .oktsw-band { background:linear-gradient(110deg,#0c3975,#0959b6); color:#fff; }
.oktsw .oktsw-band-grid { display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:56px; align-items:center; padding-block:56px; }
.oktsw .oktsw-band-visual, .oktsw .oktsw-band-copy { min-width:0; }
.oktsw .oktsw-band .oktsw-photo.is-placeholder { background:rgba(255,255,255,.055); border-color:rgba(221,237,255,.38); }
.oktsw .oktsw-band .oktsw-photo-placeholder, .oktsw .oktsw-band .oktsw-photo-placeholder .oktsw-icon { color:#c7def7; }
.oktsw .oktsw-band .oktsw-eyebrow { color:#b4d7ff; font-size:11px; letter-spacing:.11em; margin-bottom:16px; }
.oktsw .oktsw-band h2 { font-size:clamp(22px,2.5vw,32px); color:#fff; line-height:1.7; letter-spacing:.01em; }
.oktsw .oktsw-band h2 span { display:block; white-space:nowrap; }
.oktsw .oktsw-band-copy>p:not(.oktsw-eyebrow) { margin-top:18px; color:#e1ecfa; font-size:15px; line-height:1.95; }
.oktsw .oktsw-actions-onblue { margin-top:26px; }
.oktsw .oktsw-actions-onblue .oktsw-btn-primary { background:#fff; color:#0d4186; box-shadow:none; }
.oktsw .oktsw-actions-onblue .oktsw-btn-primary:hover { background:#ebf3ff; }
/* 実績は管理者が入力・公開指定した場合だけ表示 */
.oktsw .oktsw-stats { padding:28px 0; border-bottom:1px solid var(--oktsw-line); background:#fff; }
.oktsw .oktsw-stats-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.oktsw .oktsw-stats-grid>div { flex:1; min-width:0; text-align:center; padding:0 24px; }
.oktsw .oktsw-stats-grid>div+div { border-left:1px solid var(--oktsw-line); }
.oktsw .oktsw-stats-grid span { display:block; font-size:13px; font-weight:700; }
.oktsw .oktsw-stats-grid strong { display:block; color:var(--oktsw-blue); font-size:38px; line-height:1.45; overflow-wrap:anywhere; }
.oktsw .oktsw-stats .oktsw-small-note { text-align:center; }
/* 料金表：既存プランの範囲と実費・追加費用の案内を復元 */
.oktsw .oktsw-price-card { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); max-width:1000px; margin-inline:auto; border:1px solid #d3e4f7; border-radius:18px; background:#fff; overflow:hidden; }
.oktsw .oktsw-price-head { grid-column:1 / -1; padding:22px 24px; background:var(--oktsw-blue); text-align:center; }
.oktsw .oktsw-price-head p { margin:0 0 8px; color:#fff !important; -webkit-text-fill-color:#fff !important; font-size:13px; font-weight:600; line-height:1.6; }
.oktsw .oktsw-price-head h3 { margin:0; color:#fff !important; -webkit-text-fill-color:#fff !important; font-size:24px; font-weight:700; line-height:1.5; }
.oktsw .oktsw-price-main { padding:30px; background:#f1f7fe; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.oktsw .oktsw-price-tag { display:inline-block; border-radius:4px; background:#e0edfd; color:#2866b7; font-size:11px; font-weight:700; padding:3px 14px; margin-bottom:14px; }
.oktsw .oktsw-price-main h3 { font-size:19px; line-height:1.8; }
.oktsw .oktsw-price-amount { display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:12px; }
.oktsw .oktsw-price-amount strong { color:var(--oktsw-blue); font-size:44px; line-height:1.4; font-weight:700; letter-spacing:-.02em; }
.oktsw .oktsw-price-amount span { font-size:12px; color:#517197; }
.oktsw .oktsw-price-detail { padding:32px 38px; min-width:0; }
.oktsw .oktsw-price-detail h3 { font-size:16px; margin-bottom:16px; }
.oktsw .oktsw-checklist { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px; list-style:none; padding:0; margin:0; }
.oktsw .oktsw-checklist li { display:flex; gap:8px; align-items:flex-start; margin:0; font-size:13px; line-height:1.8; color:#3d5b7d; }
.oktsw .oktsw-checklist .oktsw-icon { width:17px; height:17px; margin-top:3px; color:#2a74cf; }
.oktsw .oktsw-price-note { margin-top:22px; padding-top:18px; border-top:1px solid var(--oktsw-line); font-size:12px; color:var(--oktsw-muted); line-height:1.9; }
/* お客様の声：実際の写真とテキストは別々に管理 */
.oktsw .oktsw-voices-section { background:#f2f8fd; }
.oktsw .oktsw-voice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.oktsw .oktsw-voice-card { min-width:0; display:flex; flex-direction:column; padding:28px; background:#fff; border:1px solid var(--oktsw-line); border-radius:16px; }
.oktsw .oktsw-voice-head { display:flex; gap:16px; align-items:center; margin-bottom:20px; }
.oktsw .oktsw-avatar { width:62px; height:62px; flex:none; display:grid; place-items:center; background:#f1f5fa; border:1px solid #e2ebf4; border-radius:50%; overflow:hidden; color:#93abc3; }
.oktsw .oktsw-avatar img { width:100%; height:100%; object-fit:cover; }
.oktsw .oktsw-avatar .oktsw-icon { width:34px; height:34px; }
.oktsw .oktsw-voice-head h3 { font-size:16px; line-height:1.75; overflow-wrap:anywhere; }
.oktsw .oktsw-voice-card>p { font-size:14px; color:var(--oktsw-muted); line-height:1.95; }
.oktsw .oktsw-voice-meta { margin-top:auto; padding-top:22px; font-size:12px; font-weight:700; color:#42698f; }
.oktsw .oktsw-voice-card.is-pending { min-height:212px; }
/* コラムは単体ショートコードでもJSなしで表示 */
.oktsw.oktsw-columns-embed { background:transparent; padding:12px 0; }
.oktsw .oktsw-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.oktsw .oktsw-column-card { min-width:0; border:1px solid var(--oktsw-line); border-radius:14px; background:#fff; overflow:hidden; display:flex; flex-direction:column; }
.oktsw .oktsw-column-thumb { display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:300/170; background:#fff; overflow:hidden; padding:0; }
.oktsw .oktsw-column-thumb img,
.oktsw .oktsw-column-thumb .oktsw-column-featured-image {
display:block !important;
width:100% !important;
height:100% !important;
max-width:100% !important;
max-height:100% !important;
min-width:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
object-fit:contain !important;
object-position:center center !important;
transform:none !important;
clip-path:none !important;
border-radius:0 !important;
}
.oktsw .oktsw-column-noimage { width:100%; height:100%; min-height:150px; display:grid; place-items:center; color:#9cbbdd; }
.oktsw .oktsw-column-noimage .oktsw-icon { width:42px; height:42px; }
.oktsw .oktsw-column-body { padding:22px; display:flex; flex-direction:column; flex:1; }
.oktsw .oktsw-column-body time { font-size:12px; color:#6c849f; margin-bottom:9px; }
.oktsw .oktsw-column-body h3 { font-size:17px; line-height:1.7; margin-bottom:12px; overflow-wrap:anywhere; }
.oktsw .oktsw-column-body>p { font-size:14px; color:var(--oktsw-muted); }
.oktsw .oktsw-column-body .oktsw-textlink { margin-top:auto; padding-top:16px; }
.oktsw .oktsw-textlink { color:var(--oktsw-blue); font-size:13px; font-weight:700; }
.oktsw .oktsw-textlink:hover { text-decoration:underline; }
.oktsw .oktsw-empty { grid-column:1/-1; text-align:center; width:100%; border:1px solid var(--oktsw-line); border-radius:14px; background:#fafcfe; padding:32px 20px; color:var(--oktsw-muted); }
.oktsw .oktsw-empty .oktsw-icon { margin:0 auto 14px; color:#8daed1; }
.oktsw .oktsw-empty h3 { font-size:17px; margin-bottom:8px; }
.oktsw .oktsw-empty p { font-size:14px; }
.oktsw .oktsw-section-link { text-align:center; margin-top:28px; }
/* FAQ */
.oktsw .oktsw-faq-section { padding-top:76px; }
.oktsw .oktsw-faq-list { border-top:1px solid var(--oktsw-line); }
.oktsw .oktsw-faq-list details { border-bottom:1px solid var(--oktsw-line); }
.oktsw .oktsw-faq-list summary { padding:20px 38px 20px 0; position:relative; font-size:15px; line-height:1.8; font-weight:600; color:var(--oktsw-navy); cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:15px; }
.oktsw .oktsw-faq-list summary::-webkit-details-marker { display:none; }
.oktsw .oktsw-faq-list summary>span { color:#3075c6; flex:none; font-size:17px; }
.oktsw .oktsw-faq-list summary::after { content:"＋"; position:absolute; right:4px; top:20px; font-weight:400; color:#5d83b0; }
.oktsw .oktsw-faq-list details[open]>summary::after { content:"−"; }
.oktsw .oktsw-faq-list details>div { padding:0 28px 24px 33px; color:var(--oktsw-muted); font-size:14px; }
/* 下部CTAにも文字入り背景は使用しない */
.oktsw .oktsw-bottom-cta { padding:48px 0; background:linear-gradient(110deg,#eaf4ff,#f4f9ff); border-block:1px solid #e1edf9; }
.oktsw .oktsw-bottom-grid { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:44px; }
.oktsw .oktsw-bottom-grid h2 { font-size:26px; line-height:1.65; }
.oktsw .oktsw-bottom-grid .oktsw-eyebrow { font-size:11px; margin-bottom:10px; }
.oktsw .oktsw-bottom-grid p:not(.oktsw-eyebrow) { margin-top:13px; font-size:13px; color:var(--oktsw-muted); }
.oktsw .oktsw-actions-bottom .oktsw-btn { width:184px; }
/* 問い合わせ */
.oktsw .oktsw-contact-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:70px; align-items:start; }
.oktsw .oktsw-contact-copy h2 { font-size:30px; margin-bottom:18px; }
.oktsw .oktsw-contact-copy>p:not(.oktsw-eyebrow) { font-size:15px; color:var(--oktsw-muted); }
.oktsw .oktsw-office-details { margin:30px 0; font-size:13px; }
.oktsw .oktsw-office-details>div { display:grid; grid-template-columns:60px minmax(0,1fr); padding:10px 0; border-bottom:1px solid var(--oktsw-line); gap:12px; }
.oktsw .oktsw-office-details dt { color:#7188a0; font-weight:500; }
.oktsw .oktsw-office-details dd { color:#365879; overflow-wrap:anywhere; }
.oktsw .oktsw-line-info { background:#f3f9f6; padding:22px; border:1px solid #deece4; border-radius:12px; }
.oktsw .oktsw-line-info h3 { font-size:16px; color:#226547; margin-bottom:8px; }
.oktsw .oktsw-line-info p { font-size:13px; color:#526e61; }
.oktsw .oktsw-line-info .oktsw-btn { margin-top:16px; font-size:13px; }
.oktsw .oktsw-form-panel { min-width:0; border:1px solid var(--oktsw-line); border-radius:18px; padding:32px; box-shadow:0 8px 28px rgba(42,85,128,.045); }
.oktsw .oktsw-form { margin:0; position:relative; }
.oktsw .oktsw-field { margin-bottom:20px; }
.oktsw .oktsw-field>label { display:flex; gap:10px; align-items:center; font-size:13px; font-weight:700; margin-bottom:8px; color:#375779; }
.oktsw .oktsw-inquiry-field { border:0; padding:0; min-width:0; margin:0; }
.oktsw .oktsw-inquiry-field legend { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:0; margin:0 0 12px; font-size:13px; font-weight:700; color:#375779; }
.oktsw .oktsw-multi-note { display:inline-flex; align-items:center; min-height:22px; padding:3px 8px; border-radius:999px; background:#eef5fc; color:#6e87a1; font-size:11px; font-weight:700; line-height:1.2; }
.oktsw .oktsw-inquiry-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.oktsw .oktsw-inquiry-option { position:relative; display:flex; align-items:flex-start; gap:12px; min-width:0; margin:0; padding:18px 18px 16px; border:1px solid #cad9e8; border-radius:10px; background:#fff; box-shadow:none; cursor:pointer; transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.oktsw .oktsw-inquiry-option:hover { border-color:#8eb2d8; background:#fbfdff; }
.oktsw .oktsw-inquiry-option:focus-within { border-color:var(--oktsw-blue); box-shadow:0 0 0 3px rgba(47,111,176,.12); }
.oktsw .oktsw-inquiry-option input { appearance:none; -webkit-appearance:none; width:17px; height:17px; min-height:0; flex:none; margin:4px 0 0; padding:0; border:1.5px solid #9ab3cb; border-radius:3px; background:#fff; box-shadow:none; }
.oktsw .oktsw-inquiry-option input:checked { background:var(--oktsw-blue); border-color:var(--oktsw-blue); box-shadow:inset 0 0 0 3px #fff; }
.oktsw .oktsw-inquiry-option:has(input:checked) { border-color:var(--oktsw-blue); background:#f4f9ff; box-shadow:0 6px 18px rgba(47,111,176,.08); }
.oktsw .oktsw-inquiry-copy { display:block; min-width:0; line-height:1.55; }
.oktsw .oktsw-inquiry-copy strong { display:block; font-size:15px; line-height:1.5; color:#274c71; font-weight:700; }
.oktsw .oktsw-inquiry-copy small { display:block; margin-top:6px; font-size:12px; line-height:1.6; color:#6e849b; font-weight:600; }
.oktsw .oktsw-other-detail { margin-top:4px; }
.oktsw .oktsw-other-detail[hidden] { display:none !important; }
.oktsw .oktsw-required, .oktsw .oktsw-optional { font-size:10px; font-weight:500; line-height:1.6; padding:1px 6px; border-radius:3px; }
.oktsw .oktsw-required { background:#e9f2ff; color:#3165a7; }
.oktsw .oktsw-optional { background:#f0f3f6; color:#657486; }
.oktsw .oktsw-field input, .oktsw .oktsw-field textarea { display:block; width:100%; min-width:0; color:var(--oktsw-ink); border:1px solid #cbdcec; border-radius:7px; padding:10px 12px; font-size:16px; line-height:1.65; background:#fbfdff; box-shadow:none; margin:0; }
.oktsw .oktsw-field input { min-height:46px; }
.oktsw .oktsw-field textarea { resize:vertical; min-height:140px; }
.oktsw .oktsw-field input::placeholder, .oktsw .oktsw-field textarea::placeholder { color:#91a1b2; font-size:13px; }
.oktsw .oktsw-privacy { margin:6px 0 22px; }
.oktsw .oktsw-privacy p { color:#697d92; font-size:12px; margin-bottom:12px; }
.oktsw .oktsw-privacy p>a { text-decoration:underline; color:var(--oktsw-blue); }
.oktsw .oktsw-privacy label { display:flex; gap:8px; align-items:flex-start; color:#496481; font-size:13px; line-height:1.8; }
.oktsw .oktsw-privacy input { width:17px; height:17px; flex:none; margin:3px 0 0; accent-color:var(--oktsw-blue); }
.oktsw .oktsw-honeypot { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.oktsw .oktsw-submit { width:100%; max-width:100%; }
.oktsw .oktsw-submit:disabled { opacity:.65; cursor:wait; }
.oktsw .oktsw-notice { border:1px solid #d0e1f1; padding:16px; border-radius:8px; font-size:14px; margin-bottom:22px; }
.oktsw .oktsw-notice-success { border-color:#b5d9c5; background:#f0faf4; color:#256542; }
.oktsw .oktsw-notice-error { border-color:#e9cccc; background:#fff7f7; color:#9b3838; }
/* フッターとコラム記事 */
.oktsw .oktsw-footer { background:#fff; border-top:1px solid var(--oktsw-line); padding:32px 0 20px; }
.oktsw .oktsw-footer-top { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.oktsw .oktsw-footer .oktsw-brandtext { font-size:18px; }
.oktsw .oktsw-footer .oktsw-logo, .oktsw .oktsw-footer .oktsw-logo-placeholder { width:32px; height:32px; }
.oktsw .oktsw-footer-menu { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px 18px; }
.oktsw .oktsw-footer-menu a { font-size:11px; color:#577393; }
.oktsw .oktsw-footer-menu a:hover { text-decoration:underline; }
.oktsw .oktsw-footer-bottom { display:flex; justify-content:space-between; gap:16px; margin-top:24px; padding-top:16px; border-top:1px solid #eef3f8; font-size:11px; color:#798da4; }
.oktsw .oktsw-single-heading { background:#f1f7fd; padding:48px 0; }
.oktsw .oktsw-single-heading time { display:block; font-size:13px; color:#748da6; margin:22px 0 12px; }
.oktsw .oktsw-single-heading h1 { font-size:clamp(25px,3vw,36px); line-height:1.6; overflow-wrap:anywhere; }
.oktsw .oktsw-single-content { max-width:900px; width:calc(100% - 64px); margin:44px auto 72px; font-size:16px; overflow-wrap:anywhere; }
.oktsw .oktsw-article-cover-frame {
width:100%;
aspect-ratio:300/170;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:#fff;
border-radius:12px;
margin-bottom:32px;
}
.oktsw .oktsw-article-cover,
.oktsw .oktsw-article-cover-frame img {
display:block !important;
width:100% !important;
height:100% !important;
max-width:100% !important;
max-height:100% !important;
margin:0 !important;
padding:0 !important;
object-fit:contain !important;
object-position:center center !important;
transform:none !important;
clip-path:none !important;
border-radius:0 !important;
}
.oktsw .oktsw-single-content p { margin:1.2em 0; }
.oktsw .oktsw-single-content h2 { font-size:26px; border-bottom:2px solid #d3e5f8; padding-bottom:12px; margin:44px 0 20px; }
.oktsw .oktsw-single-content h3 { font-size:21px; margin:30px 0 15px; }
.oktsw .oktsw-single-content a:not(.oktsw-btn) { color:var(--oktsw-blue); text-decoration:underline; }
.oktsw .oktsw-single-content img, .oktsw .oktsw-single-content iframe { max-width:100%; }
.oktsw .oktsw-single-content img { height:auto; margin-inline:auto; }
.oktsw .oktsw-single-content table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; }
.oktsw .oktsw-single-content td, .oktsw .oktsw-single-content th { border:1px solid var(--oktsw-line); padding:12px; }
.oktsw .oktsw-single-content pre { overflow-x:auto; max-width:100%; padding:18px; background:#f1f5f9; }
.oktsw .oktsw-pagination { margin-top:36px; text-align:center; }
.oktsw .oktsw-pagination .page-numbers { display:inline-block; padding:6px 14px; border:1px solid var(--oktsw-line); border-radius:6px; margin:3px; font-size:14px; }
.oktsw .oktsw-pagination .current { background:var(--oktsw-blue); color:#fff; }
/* ノートPC・タブレット */
@media (max-width:1180px) {
.oktsw .oktsw-header-main { gap:18px; }
.oktsw .oktsw-menu { gap:14px; }
.oktsw .oktsw-brandtext { font-size:19px; }
.oktsw .oktsw-actions-header .oktsw-btn { width:124px; font-size:10.5px; }
.oktsw .oktsw-hero-grid, .oktsw .oktsw-band-grid { gap:38px; }
.oktsw .oktsw-hero-visual { min-height:390px; }
.oktsw .oktsw-photo--2 { min-height:390px; clip-path:polygon(22% 0,100% 0,100% 100%,0 100%); }
.oktsw .oktsw-service-card { padding:25px 18px; }
.oktsw .oktsw-service-card h3 { font-size:15px; }
}
@media (max-width:1060px) {
.oktsw .oktsw-header-main { flex-wrap:wrap; gap:12px 20px; min-height:70px; }
.oktsw .oktsw-header-main>.oktsw-brand { margin-right:auto; }
.oktsw .oktsw-menu { order:4; width:100%; flex:none; padding:8px 0; justify-content:flex-start; }
.oktsw.is-enhanced .oktsw-menu { display:none; }
.oktsw.is-enhanced .oktsw-menu.is-open { display:flex; }
.oktsw.is-enhanced .oktsw-menu-toggle { display:flex; order:3; }
.oktsw .oktsw-actions-header { order:2; }
.oktsw .oktsw-service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.oktsw .oktsw-service-card { padding:28px; }
.oktsw .oktsw-service-card h3 { font-size:17px; min-height:3.3em; }
.oktsw .oktsw-band h2 { font-size:25px; }
.oktsw .oktsw-actions-onblue .oktsw-btn { width:calc(50% - 6px); padding:10px 9px; font-size:12px; gap:6px; }
.oktsw .oktsw-hero h1 { font-size:30px; }
.oktsw .oktsw-actions-hero .oktsw-btn { width:calc(50% - 6px); font-size:12px; padding:10px 8px; gap:6px; }
.oktsw .oktsw-voice-card { padding:22px; }
.oktsw .oktsw-voice-head { flex-direction:column; align-items:flex-start; gap:12px; }
.oktsw .oktsw-price-detail { padding:28px; }
.oktsw .oktsw-bottom-grid { gap:24px; }
.oktsw .oktsw-actions-bottom { flex-direction:column; }
.oktsw .oktsw-contact-grid { gap:40px; }
.oktsw .oktsw-footer-top { flex-direction:column; align-items:flex-start; gap:22px; }
.oktsw .oktsw-footer-menu { justify-content:flex-start; }
}
@media (max-width:820px) {
.oktsw .oktsw-container { width:calc(100% - 48px); }
.oktsw .oktsw-hero-grid { grid-template-columns:1fr; gap:30px; padding-block:42px; }
.oktsw .oktsw-hero-visual { width:100%; max-width:720px; margin-inline:auto; min-height:0; justify-content:center; }
.oktsw .oktsw-photo--2 { min-height:320px; clip-path:polygon(18% 0,100% 0,100% 100%,0 100%); }
.oktsw .oktsw-hero-description { max-width:none; }
.oktsw .oktsw-hero h1 { font-size:36px; }
.oktsw .oktsw-actions-hero .oktsw-btn { width:184px; font-size:13px; }
.oktsw .oktsw-band-grid { grid-template-columns:1fr; gap:30px; padding-block:44px; }
.oktsw .oktsw-band-visual { width:100%; max-width:560px; margin-inline:auto; }
.oktsw .oktsw-band h2 { font-size:30px; }
.oktsw .oktsw-actions-onblue .oktsw-btn { width:184px; font-size:13px; }
.oktsw .oktsw-section { padding:56px 0; }
.oktsw .oktsw-heading h2, .oktsw .oktsw-heading h1 { font-size:26px; }
.oktsw .oktsw-price-card { grid-template-columns:1fr; }
.oktsw .oktsw-price-main { padding:26px; }
.oktsw .oktsw-price-main h3 br { display:none; }
.oktsw .oktsw-voice-grid { grid-template-columns:1fr; gap:18px; }
.oktsw .oktsw-voice-head { flex-direction:row; align-items:center; }
.oktsw .oktsw-voice-card.is-pending { min-height:0; }
.oktsw .oktsw-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
.oktsw .oktsw-bottom-grid { grid-template-columns:1fr; gap:24px; }
.oktsw .oktsw-actions-bottom { flex-direction:row; }
.oktsw .oktsw-contact-grid { grid-template-columns:1fr; gap:30px; }
.oktsw .oktsw-contact-copy { max-width:none; }
.oktsw .oktsw-faq-section { padding-top:56px; }
.oktsw .oktsw-footer-bottom { flex-direction:column; gap:6px; }
}
@media (max-width:600px) {
.oktsw { font-size:15px; --oktsw-header-offset:18px; }
.oktsw .oktsw-container, .oktsw .oktsw-single-content { width:calc(100% - 36px); }
.oktsw .oktsw-header { position:relative; top:auto !important; }
.oktsw .oktsw-header-top p { font-size:10px; padding:6px 0; letter-spacing:0; }
.oktsw .oktsw-header-main { gap:12px; padding-block:12px; }
.oktsw .oktsw-brandtext { font-size:18px; }
.oktsw .oktsw-logo, .oktsw .oktsw-logo-placeholder { width:32px; height:32px; }
.oktsw .oktsw-brand { gap:8px; }
.oktsw .oktsw-actions-header { width:100%; order:4; gap:10px; }
.oktsw .oktsw-actions-header .oktsw-btn { flex:1; width:calc(50% - 5px); min-height:38px; font-size:11px; padding:8px; }
.oktsw .oktsw-menu { order:5; flex-wrap:wrap; gap:4px; padding-top:4px; }
.oktsw .oktsw-menu a { width:calc(50% - 2px); padding:10px 12px; background:#f5f9fd; border-radius:6px; font-size:12px; }
.oktsw .oktsw-menu a::after { content:none; }
.oktsw .oktsw-hero-grid { padding-block:32px 40px; }
.oktsw .oktsw-hero-visual { max-width:100%; }
.oktsw .oktsw-photo--2 { min-height:250px; clip-path:polygon(14% 0,100% 0,100% 100%,0 100%); }
.oktsw .oktsw-hero h1 { font-size:clamp(24px,7.3vw,33px); margin-bottom:18px; }
.oktsw .oktsw-hero .oktsw-eyebrow { font-size:11px; margin-bottom:12px; }
.oktsw .oktsw-hero-description { font-size:14px; line-height:1.95; }
.oktsw .oktsw-hero-offer { margin-block:22px; }
.oktsw .oktsw-hero-offer strong { font-size:32px; }
.oktsw .oktsw-hero-offer>div { gap:6px; }
.oktsw .oktsw-hero-offer .oktsw-offer-label { font-size:10px; }
.oktsw .oktsw-actions-hero, .oktsw .oktsw-actions-onblue, .oktsw .oktsw-actions-bottom { gap:10px; }
.oktsw .oktsw-actions-hero .oktsw-btn, .oktsw .oktsw-actions-onblue .oktsw-btn, .oktsw .oktsw-actions-bottom .oktsw-btn { width:calc(50% - 5px); padding:11px 8px; font-size:11.5px; min-height:44px; gap:6px; }
.oktsw .oktsw-photo { border-radius:12px; }
.oktsw .oktsw-photo-placeholder .oktsw-icon { width:40px; height:40px; }
.oktsw .oktsw-section { padding-block:44px; }
.oktsw .oktsw-heading { margin-bottom:26px; }
.oktsw .oktsw-heading h2, .oktsw .oktsw-heading h1 { font-size:23px; line-height:1.65; }
.oktsw .oktsw-heading>p:not(.oktsw-eyebrow) { font-size:13px; }
.oktsw .oktsw-desktop-br { display:none; }
.oktsw .oktsw-service-grid { grid-template-columns:1fr; gap:16px; }
.oktsw .oktsw-service-card { padding:24px; }
.oktsw .oktsw-service-card h3 { min-height:0; font-size:17px; margin-bottom:10px; display:block; }
.oktsw .oktsw-service-card h3 br { display:none; }
.oktsw .oktsw-service-card p { font-size:14px; }
.oktsw .oktsw-card-icon { margin-bottom:14px; }
.oktsw .oktsw-band h2 { font-size:clamp(18px,5.45vw,27px); }
.oktsw .oktsw-band-copy>p:not(.oktsw-eyebrow) { font-size:14px; }
.oktsw .oktsw-band .oktsw-eyebrow { font-size:10px; }
.oktsw .oktsw-checklist { grid-template-columns:1fr; gap:11px; }
.oktsw .oktsw-price-detail { padding:24px; }
.oktsw .oktsw-price-head { padding:18px 20px; }
.oktsw .oktsw-price-head p { font-size:12px; }
.oktsw .oktsw-price-head h3 { font-size:20px; }
.oktsw .oktsw-price-main h3 { font-size:17px; }
.oktsw .oktsw-price-amount strong { font-size:40px; }
.oktsw .oktsw-voice-card { padding:23px; }
.oktsw .oktsw-columns { grid-template-columns:1fr; }
.oktsw .oktsw-stats-grid { flex-direction:column; gap:20px; }
.oktsw .oktsw-stats-grid>div+div { border-left:0; border-top:1px solid var(--oktsw-line); padding-top:20px; }
.oktsw .oktsw-faq-section { padding-top:44px; }
.oktsw .oktsw-faq-list summary { font-size:14px; gap:11px; padding-block:18px; }
.oktsw .oktsw-faq-list details>div { padding-left:28px; padding-right:8px; font-size:13px; }
.oktsw .oktsw-bottom-grid h2 { font-size:23px; }
.oktsw .oktsw-bottom-cta { padding-block:36px; }
.oktsw .oktsw-contact-copy h2 { font-size:25px; }
.oktsw .oktsw-form-panel { padding:22px 18px; border-radius:12px; }
.oktsw .oktsw-office-details { margin-block:22px; }
.oktsw .oktsw-footer { padding-top:26px; }
.oktsw .oktsw-footer-menu { gap:10px 16px; }
.oktsw .oktsw-single-heading { padding-block:32px; }
.oktsw .oktsw-single-content { margin-top:30px; font-size:15px; }
.oktsw .oktsw-single-content h2 { font-size:23px; }
.oktsw .oktsw-single-content h3 { font-size:19px; }
}
@media (prefers-reduced-motion:reduce) {
.oktsw *, .oktsw *::before, .oktsw *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}
/* 1.4.1 写真3：切り抜き済みPC画像を、青い紹介帯で大きく見せる */
.oktsw .oktsw-band { overflow:hidden; }
.oktsw .oktsw-band-grid {
grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
gap:42px;
align-items:stretch;
padding-top:44px;
padding-bottom:42px;
}
.oktsw .oktsw-band-visual {
display:flex;
align-items:flex-end;
justify-content:flex-start;
align-self:stretch;
min-width:0;
margin-left:-44px;
}
.oktsw .oktsw-photo--3,
.oktsw .oktsw-photo--3.has-image {
width:100%;
height:100%;
min-height:360px;
aspect-ratio:auto;
border-radius:0;
overflow:visible;
background:transparent;
display:flex;
align-items:flex-end;
justify-content:flex-start;
}
.oktsw .oktsw-photo--3 .oktsw-slot-image,
.oktsw .oktsw-photo--3.oktsw-fit-cover .oktsw-slot-image {
width:116%;
max-width:none;
height:auto;
max-height:455px;
min-width:0;
object-fit:contain !important;
object-position:left bottom;
margin:0 0 -42px -6%;
border-radius:0;
}
.oktsw .oktsw-photo--3.is-placeholder {
width:100%;
min-height:360px;
aspect-ratio:16/10;
border-radius:16px;
overflow:hidden;
margin:0;
}
@media (max-width:1180px) {
.oktsw .oktsw-band-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; }
.oktsw .oktsw-band-visual { margin-left:-20px; }
.oktsw .oktsw-photo--3 .oktsw-slot-image,
.oktsw .oktsw-photo--3.oktsw-fit-cover .oktsw-slot-image { width:112%; margin-left:-4%; }
}
@media (max-width:820px) {
.oktsw .oktsw-band-grid { grid-template-columns:1fr; gap:28px; padding-block:42px; }
.oktsw .oktsw-band-visual { width:100%; max-width:620px; margin:0 auto; display:block; }
.oktsw .oktsw-photo--3,
.oktsw .oktsw-photo--3.has-image { min-height:0; height:auto; display:block; }
.oktsw .oktsw-photo--3 .oktsw-slot-image,
.oktsw .oktsw-photo--3.oktsw-fit-cover .oktsw-slot-image {
width:100%;
max-width:100%;
max-height:none;
height:auto;
margin:0;
object-position:center bottom;
}
}
@media (max-width:600px) {
.oktsw .oktsw-band-grid { padding-block:34px; }
.oktsw .oktsw-photo--3.is-placeholder { min-height:220px; }
}
@media (max-width:600px) {
.oktsw .oktsw-photo--2.has-image::before { background:linear-gradient(90deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.3) 14%, rgba(255,255,255,0) 28%); }
}
/* 1.4.3 アピールエリア右側：画面右端まで広げる台形＋透明フェード */
@media (min-width:821px) {
.oktsw .oktsw-hero {
position:relative;
overflow:hidden !important;
background:#fff !important;
}
.oktsw .oktsw-hero-grid {
width:100% !important;
max-width:none !important;
margin:0 !important;
padding-left:max(32px, calc((100vw - 1200px) / 2 + 32px)) !important;
padding-right:0 !important;
padding-top:0 !important;
padding-bottom:0 !important;
min-height:500px;
grid-template-columns:minmax(470px, 42%) minmax(0, 58%) !important;
gap:0 !important;
align-items:stretch !important;
}
.oktsw .oktsw-hero-copy {
position:relative;
z-index:5;
display:flex;
flex-direction:column;
justify-content:center;
padding:54px 54px 54px 0;
background:linear-gradient(90deg,#fff 0%,#fff 72%,rgba(255,255,255,.96) 86%,rgba(255,255,255,0) 100%);
}
.oktsw .oktsw-hero-visual {
position:relative !important;
z-index:1;
width:100% !important;
max-width:none !important;
min-height:500px !important;
height:100% !important;
margin:0 !important;
align-self:stretch !important;
overflow:hidden !important;
display:block !important;
}
.oktsw .oktsw-hero-visual .oktsw-photo--2,
.oktsw .oktsw-hero-visual .oktsw-photo--2.has-image,
.oktsw .oktsw-hero-visual .oktsw-photo--2.is-placeholder {
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
min-height:0 !important;
margin:0 !important;
border:0 !important;
border-radius:0 !important;
overflow:hidden !important;
clip-path:polygon(18% 0,100% 0,100% 100%,0 100%) !important;
background:transparent !important;
}
.oktsw .oktsw-hero-visual .oktsw-photo--2 .oktsw-slot-image,
.oktsw .oktsw-hero-visual .oktsw-photo--2.oktsw-fit-contain .oktsw-slot-image,
.oktsw .oktsw-hero-visual .oktsw-photo--2.oktsw-fit-cover .oktsw-slot-image {
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
max-width:none !important;
max-height:none !important;
object-fit:cover !important;
object-position:center center !important;
border-radius:0 !important;
-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 7%,rgba(0,0,0,.35) 14%,rgba(0,0,0,.82) 23%,#000 34%,#000 100%);
mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 7%,rgba(0,0,0,.35) 14%,rgba(0,0,0,.82) 23%,#000 34%,#000 100%);
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-size:100% 100%;
mask-size:100% 100%;
}
.oktsw .oktsw-hero-visual .oktsw-photo--2.has-image::before,
.oktsw .oktsw-hero-visual .oktsw-photo--2.has-image::after {
content:none !important;
display:none !important;
}
.oktsw .oktsw-hero-visual .oktsw-photo--2.is-placeholder {
background:linear-gradient(135deg,#ff2d22 0%,#e60000 100%) !important;
-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.1) 8%,rgba(0,0,0,.45) 17%,#000 30%,#000 100%);
mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.1) 8%,rgba(0,0,0,.45) 17%,#000 30%,#000 100%);
}
.oktsw .oktsw-hero-visual .oktsw-photo--2.is-placeholder::before { display:none !important; }
}
@media (min-width:821px) and (max-width:1100px) {
.oktsw .oktsw-hero-grid {
grid-template-columns:minmax(420px, 48%) minmax(0, 52%) !important;
min-height:470px;
padding-left:28px !important;
}
.oktsw .oktsw-hero-copy { padding-right:32px; }
.oktsw .oktsw-hero-visual { min-height:470px !important; }
.oktsw .oktsw-hero-visual .oktsw-photo--2,
.oktsw .oktsw-hero-visual .oktsw-photo--2.has-image,
.oktsw .oktsw-hero-visual .oktsw-photo--2.is-placeholder {
clip-path:polygon(14% 0,100% 0,100% 100%,0 100%) !important;
}
}
@media (max-width:820px) {
.oktsw .oktsw-hero-visual .oktsw-photo--2,
.oktsw .oktsw-hero-visual .oktsw-photo--2.has-image,
.oktsw .oktsw-hero-visual .oktsw-photo--2.is-placeholder {
width:100% !important;
min-height:300px !important;
border-radius:0 !important;
clip-path:polygon(12% 0,100% 0,100% 100%,0 100%) !important;
overflow:hidden !important;
}
.oktsw .oktsw-hero-visual .oktsw-photo--2 .oktsw-slot-image,
.oktsw .oktsw-hero-visual .oktsw-photo--2.oktsw-fit-contain .oktsw-slot-image,
.oktsw .oktsw-hero-visual .oktsw-photo--2.oktsw-fit-cover .oktsw-slot-image {
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center !important;
-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.7) 10%,#000 24%,#000 100%);
mask-image:linear-gradient(90deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.7) 10%,#000 24%,#000 100%);
}
.oktsw .oktsw-hero-visual .oktsw-photo--2.has-image::before,
.oktsw .oktsw-hero-visual .oktsw-photo--2.has-image::after { display:none !important; }
}
/* =========================================================
1.5.0 refinements
========================================================= */
/* ヘッダー最上段キャッチコピーを中央表示 */
.oktsw .oktsw-header-top p { text-align:center; }
/* アピール写真をさらに大きく：台形の左辺を画面中央寄りまで移動 */
@media (min-width:821px) {
.oktsw .oktsw-hero-grid {
grid-template-columns:minmax(430px, 36%) minmax(0, 64%) !important;
}
.oktsw .oktsw-hero-copy {
padding-right:34px !important;
background:linear-gradient(90deg,#fff 0%,#fff 74%,rgba(255,255,255,.93) 88%,rgba(255,255,255,0) 100%) !important;
}
.oktsw .oktsw-hero-visual .oktsw-photo--2,
.oktsw .oktsw-hero-visual .oktsw-photo--2.has-image,
.oktsw .oktsw-hero-visual .oktsw-photo--2.is-placeholder {
clip-path:polygon(8% 0,100% 0,100% 100%,0 100%) !important;
}
.oktsw .oktsw-hero-visual .oktsw-photo--2 .oktsw-slot-image,
.oktsw .oktsw-hero-visual .oktsw-photo--2.oktsw-fit-contain .oktsw-slot-image,
.oktsw .oktsw-hero-visual .oktsw-photo--2.oktsw-fit-cover .oktsw-slot-image {
-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.16) 4%,rgba(0,0,0,.55) 10%,rgba(0,0,0,.9) 18%,#000 26%,#000 100%) !important;
mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.16) 4%,rgba(0,0,0,.55) 10%,rgba(0,0,0,.9) 18%,#000 26%,#000 100%) !important;
}
}
@media (min-width:821px) and (max-width:1100px) {
.oktsw .oktsw-hero-grid { grid-template-columns:minmax(390px, 42%) minmax(0,58%) !important; }
.oktsw .oktsw-hero-visual .oktsw-photo--2,
.oktsw .oktsw-hero-visual .oktsw-photo--2.has-image,
.oktsw .oktsw-hero-visual .oktsw-photo--2.is-placeholder { clip-path:polygon(7% 0,100% 0,100% 100%,0 100%) !important; }
}
/* 手続きの流れ */
.oktsw .oktsw-flow-section { background:#fff; }
.oktsw .oktsw-flow-grid { counter-reset:flow; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; list-style:none; padding:0; margin:0; }
.oktsw .oktsw-flow-grid>li { position:relative; min-width:0; padding:26px 22px 24px; border:1px solid var(--oktsw-line); border-radius:16px; background:linear-gradient(180deg,#fff,#f8fbfe); }
.oktsw .oktsw-flow-grid>li:not(:last-child)::after { content:""; position:absolute; right:-11px; top:42px; width:20px; height:1px; background:#9fbfe0; z-index:2; }
.oktsw .oktsw-flow-grid>li>span { display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:30px; padding:0 10px; border-radius:999px; background:#e9f3ff; color:#1e66bf; font-size:12px; font-weight:700; letter-spacing:.08em; margin-bottom:14px; }
.oktsw .oktsw-flow-grid h3 { font-size:16px; line-height:1.65; margin-bottom:10px; }
.oktsw .oktsw-flow-grid p { color:var(--oktsw-muted); font-size:13px; line-height:1.9; }
/* 料金表：詳細アンカー */
.oktsw .oktsw-price-detail-link { margin-top:18px; min-height:40px; padding:8px 18px; font-size:12px; }
/* Google口コミ：横方向の連続自動スクロール */
.oktsw .oktsw-google-reviews { overflow:hidden; background:#f2f8fd; }
.oktsw .oktsw-review-window { width:100vw; margin-left:calc(50% - 50vw); overflow:hidden; padding:8px 0 14px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); }
.oktsw .oktsw-review-track { display:flex; width:max-content; gap:16px; animation:oktsw-review-marquee 48s linear infinite; will-change:transform; }
.oktsw .oktsw-review-window:hover .oktsw-review-track { animation-play-state:paused; }
.oktsw .oktsw-review-group { display:flex; gap:16px; flex:none; }
.oktsw .oktsw-google-review-card { width:330px; min-height:238px; flex:none; display:flex; flex-direction:column; padding:24px; border:1px solid #dce9f6; border-radius:16px; background:#fff; box-shadow:0 7px 22px rgba(28,72,112,.05); }
.oktsw .oktsw-google-review-top { display:flex; align-items:center; gap:8px; color:#5b7591; font-size:11px; font-weight:700; }
.oktsw .oktsw-google-mark { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#fff; border:1px solid #d9e2ec; color:#4285f4; font-size:15px; font-weight:800; }
.oktsw .oktsw-stars { color:#f3b300; letter-spacing:.09em; font-size:17px; margin:14px 0 12px; }
.oktsw .oktsw-google-review-card p { color:#425f7e; font-size:14px; line-height:1.95; }
.oktsw .oktsw-google-review-card strong { margin-top:auto; padding-top:18px; color:#173f6d; font-size:13px; }
.oktsw .oktsw-review-disclaimer { max-width:900px; margin:20px auto 0; color:#6c8298; font-size:11px; line-height:1.8; text-align:center; }
.oktsw .oktsw-review-link { margin-top:20px; text-align:center; }
@keyframes oktsw-review-marquee { from { transform:translateX(0); } to { transform:translateX(calc(-50% - 8px)); } }
/* プラン詳細 */
.oktsw .oktsw-plan-details { background:#fff; }
.oktsw .oktsw-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.oktsw .oktsw-detail-grid>article { min-width:0; padding:30px 26px; border:1px solid var(--oktsw-line); border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(30,74,115,.04); }
.oktsw .oktsw-detail-grid h3 { font-size:18px; margin-bottom:16px; }
.oktsw .oktsw-detail-grid ul { margin:0; padding:0; list-style:none; }
.oktsw .oktsw-detail-grid li { position:relative; padding-left:18px; margin:9px 0; color:#4c6682; font-size:13px; line-height:1.85; }
.oktsw .oktsw-detail-grid li::before { content:""; position:absolute; left:0; top:.78em; width:7px; height:7px; border-radius:50%; background:#4f8fdb; }
.oktsw .oktsw-not-included { margin-top:24px; padding:24px 26px; border-radius:14px; border:1px solid #e2eaf2; background:#f8fafc; }
.oktsw .oktsw-not-included h3 { font-size:15px; margin-bottom:8px; }
.oktsw .oktsw-not-included p { color:#60758c; font-size:13px; line-height:1.9; }
/* 法定表示 */
.oktsw .oktsw-reference-section { background:#fff; }
.oktsw .oktsw-reference-box { margin-top:24px; padding:22px 24px; background:#f5f9fc; border:1px solid #d5e3ee; border-radius:10px; }
.oktsw .oktsw-reference-box ul { margin:0; padding-left:1.4em; }
.oktsw .oktsw-reference-box li { margin:0 0 12px; color:#4c6885; font-size:14px; line-height:1.8; }
.oktsw .oktsw-reference-box li:last-child { margin-bottom:0; }
.oktsw .oktsw-reference-box a { position:relative; z-index:1; pointer-events:auto; color:var(--oktsw-blue) !important; -webkit-text-fill-color:var(--oktsw-blue) !important; font-weight:700; text-decoration:underline !important; text-underline-offset:3px; }
.oktsw .oktsw-reference-box a:hover { text-decoration-thickness:2px !important; }
.oktsw .oktsw-legal-section { padding-top:44px; padding-bottom:44px; background:#f8fbfe; border-top:1px solid var(--oktsw-line); }
.oktsw .oktsw-legal-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.oktsw .oktsw-legal-box { border:1px solid var(--oktsw-line); border-radius:12px; background:#fff; overflow:hidden; }
.oktsw .oktsw-legal-box summary { position:relative; list-style:none; cursor:pointer; padding:18px 52px 18px 20px; color:#254f7b; font-weight:700; font-size:14px; }
.oktsw .oktsw-legal-box summary::-webkit-details-marker { display:none; }
.oktsw .oktsw-legal-box summary::after { content:"＋"; position:absolute; right:20px; top:16px; color:#6485a7; font-size:18px; font-weight:400; }
.oktsw .oktsw-legal-box[open] summary::after { content:"−"; }
.oktsw .oktsw-legal-body { padding:2px 20px 24px; border-top:1px solid #eef3f8; }
.oktsw .oktsw-legal-body h3 { font-size:14px; margin:20px 0 8px; }
.oktsw .oktsw-legal-body p { color:#566f89; font-size:12px; line-height:1.9; }
.oktsw .oktsw-legal-dl { margin:18px 0 0; }
.oktsw .oktsw-legal-dl>div { display:grid; grid-template-columns:190px minmax(0,1fr); gap:18px; padding:12px 0; border-bottom:1px solid #eef3f8; }
.oktsw .oktsw-legal-dl dt { color:#516f8e; font-size:12px; font-weight:700; }
.oktsw .oktsw-legal-dl dd { color:#365572; font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
.oktsw .oktsw-legal-note { margin-top:16px; }
/* フッターの法定リンクが埋もれないように */
.oktsw .oktsw-footer-menu a[href*="privacy"],
.oktsw .oktsw-footer-menu a[href*="tokusho"] { font-weight:700; }
@media (max-width:1060px) {
.oktsw .oktsw-flow-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.oktsw .oktsw-flow-grid>li:not(:last-child)::after { display:none; }
.oktsw .oktsw-detail-grid { grid-template-columns:1fr 1fr; }
.oktsw .oktsw-detail-grid>article:last-child { grid-column:1/-1; }
}
@media (max-width:820px) {
.oktsw .oktsw-review-track { animation-duration:60s; }
.oktsw .oktsw-google-review-card { width:300px; min-height:228px; }
.oktsw .oktsw-detail-grid { grid-template-columns:1fr; }
.oktsw .oktsw-detail-grid>article:last-child { grid-column:auto; }
.oktsw .oktsw-legal-dl>div { grid-template-columns:150px minmax(0,1fr); }
}
@media (max-width:600px) {
.oktsw .oktsw-flow-grid { grid-template-columns:1fr; gap:12px; }
.oktsw .oktsw-flow-grid>li { padding:22px 20px; }
.oktsw .oktsw-review-window { -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%); }
.oktsw .oktsw-review-track { animation-duration:76s; gap:16px; }
.oktsw .oktsw-review-group { gap:12px; }
.oktsw .oktsw-google-review-card { width:272px; min-height:222px; padding:21px; }
.oktsw .oktsw-review-disclaimer { font-size:10.5px; padding-inline:8px; }
.oktsw .oktsw-legal-dl>div { grid-template-columns:1fr; gap:5px; }
}
@media (prefers-reduced-motion:reduce) {
.oktsw .oktsw-review-track { animation:none !important; }
.oktsw .oktsw-review-window { overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
}
/* =========================================================
1.6.0 refinements
========================================================= */
/* ヘッダーCTA：無料相談はメール、LINEはチャットのシンプルアイコン */
.oktsw .oktsw-actions-header .oktsw-icon,
.oktsw .oktsw-actions-menu .oktsw-icon { width:17px; height:17px; stroke-width:1.9; }
.oktsw .oktsw-actions-header .oktsw-btn { gap:7px; }
.oktsw .oktsw-mobile-phone,
.oktsw .oktsw-menu-cta { display:none; }
/* 制作イメージ（旧レイアウト互換スタイル。v1.6.2で下部から上書き） */
.oktsw .oktsw-works-section { background:#f7fbff; }
.oktsw .oktsw-works-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.oktsw .oktsw-work-card { min-width:0; overflow:hidden; border:1px solid var(--oktsw-line); border-radius:16px; background:#fff; box-shadow:0 7px 24px rgba(25,69,110,.045); }
.oktsw .oktsw-work-image { display:block; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,#eef6fd,#dceafb); }
.oktsw .oktsw-work-image img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.oktsw .oktsw-work-image:hover img { transform:scale(1.025); }
.oktsw .oktsw-work-image>span { width:100%; height:100%; display:grid; place-items:center; color:#87a8cb; }
.oktsw .oktsw-work-image .oktsw-icon { width:54px; height:54px; }
.oktsw .oktsw-work-body { padding:22px 22px 24px; }
.oktsw .oktsw-work-body h3 { font-size:17px; line-height:1.65; margin-bottom:9px; }
.oktsw .oktsw-work-body p { color:var(--oktsw-muted); font-size:13px; line-height:1.9; margin-bottom:14px; }
/* PC右下の追従バナー。画像未設定ならHTML自体を出力しない */
.oktsw .oktsw-floating-banner { position:fixed; right:22px; bottom:22px; z-index:80; width:164px; aspect-ratio:1/1; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 12px 35px rgba(13,52,92,.22); border:1px solid rgba(211,226,241,.9); transition:transform .18s ease,box-shadow .18s ease; }
.oktsw .oktsw-floating-banner:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(13,52,92,.28); }
.oktsw .oktsw-floating-banner img { width:100%; height:100%; object-fit:cover; }
/* フッターの法定ページリンクは通常メニューより前に独立表示 */
.oktsw .oktsw-footer-legal-links { display:flex; flex-wrap:wrap; gap:10px 24px; padding:0 0 18px; margin-bottom:22px; border-bottom:1px solid #e9f1f8; }
.oktsw .oktsw-footer-legal-links a { color:#315f91; font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
/* 独立固定ページ：プライバシーポリシー・特商法表記 */
.oktsw.oktsw-legal-page-wrap { background:#f8fbfe; padding:56px 0 76px; }
.oktsw .oktsw-legal-page { background:transparent; }
.oktsw .oktsw-legal-page h1 { font-size:clamp(28px,4vw,40px); margin-bottom:18px; }
.oktsw .oktsw-legal-lead { color:#506b88; font-size:15px; line-height:2; padding-bottom:28px; border-bottom:1px solid var(--oktsw-line); }
.oktsw .oktsw-legal-page section { padding:28px 0 0; }
.oktsw .oktsw-legal-page section h2 { font-size:19px; margin-bottom:10px; }
.oktsw .oktsw-legal-page section p,
.oktsw .oktsw-legal-page section li { color:#526b87; font-size:14px; line-height:2; }
.oktsw .oktsw-legal-page section ul { margin:10px 0 0; padding-left:1.4em; }
.oktsw .oktsw-legal-page section li { margin:4px 0; }
.oktsw .oktsw-legal-dl-large { margin-top:28px; border-top:1px solid var(--oktsw-line); }
.oktsw .oktsw-legal-dl-large>div { grid-template-columns:220px minmax(0,1fr); padding:16px 0; }
.oktsw .oktsw-legal-dl-large dt,.oktsw .oktsw-legal-dl-large dd { font-size:13px; }
.oktsw .oktsw-legal-updated { margin-top:34px; color:#7890a7; font-size:12px; }
.oktsw .oktsw-legal-back { margin-top:32px; display:flex; justify-content:center; text-align:center; }
/* スマホ：追従ヘッダー、電話番号、開いたメニュー内だけに相談ボタン */
@media (max-width:600px) {
.oktsw .oktsw-header { position:sticky !important; top:0 !important; z-index:120 !important; }
.admin-bar .oktsw .oktsw-header { top:46px !important; }
.oktsw .oktsw-header-top p { font-size:9.5px; padding:5px 2px; }
.oktsw .oktsw-header-main { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-block:9px; min-height:62px; }
.oktsw .oktsw-header-main>.oktsw-brand { margin-right:auto; gap:6px; }
.oktsw .oktsw-brandtext { font-size:14px; }
.oktsw .oktsw-logo,.oktsw .oktsw-logo-placeholder { width:28px; height:28px; border-radius:6px; }
.oktsw .oktsw-mobile-phone { display:flex; flex:none; flex-direction:column; align-items:flex-end; justify-content:center; line-height:1.15; }
.oktsw .oktsw-mobile-phone a { color:#174f95; font-size:12px; font-weight:800; letter-spacing:.01em; }
.oktsw .oktsw-mobile-phone span { color:#6d8298; font-size:8.5px; margin-top:4px; white-space:nowrap; }
.oktsw .oktsw-menu-toggle { padding:6px 8px; min-height:40px; }
.oktsw .oktsw-header-main>.oktsw-actions-header { display:none !important; }
.oktsw .oktsw-menu { order:5; width:100%; flex:none; flex-direction:column; align-items:stretch; gap:5px; padding:10px 0 2px; }
.oktsw .oktsw-menu a { width:100%; padding:10px 12px; background:#f5f9fd; border-radius:7px; font-size:12px; }
.oktsw .oktsw-menu-cta { display:block; padding-top:6px; }
.oktsw .oktsw-actions-menu { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.oktsw .oktsw-actions-menu .oktsw-btn { width:100%; min-width:0; min-height:42px; padding:8px 7px; gap:5px; font-size:10.5px; }
.oktsw .oktsw-actions-menu .oktsw-icon { width:15px; height:15px; }
.oktsw .oktsw-floating-banner { display:none !important; }
}
/* スマホ：アピール文と写真を同じエリア内で一体化。写真は右側に残し、左から白いぼかしを重ねる */
@media (max-width:820px) {
.oktsw .oktsw-hero { position:relative !important; overflow:hidden !important; background:#eef6fd !important; }
.oktsw .oktsw-hero::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.91) 34%,rgba(255,255,255,.72) 58%,rgba(255,255,255,.28) 82%,rgba(255,255,255,.08) 100%); }
.oktsw .oktsw-hero-grid { position:relative !important; display:block !important; width:calc(100% - 36px) !important; max-width:none !important; min-height:610px; margin-inline:auto !important; padding:46px 0 48px !important; }
.oktsw .oktsw-hero-copy { position:relative !important; z-index:4 !important; width:100% !important; max-width:100% !important; padding:0 !important; background:none !important; }
.oktsw .oktsw-hero-copy .oktsw-hero-description { max-width:94% !important; }
.oktsw .oktsw-hero-visual { position:absolute !important; z-index:1 !important; inset:0 -18px 0 18% !important; width:auto !important; max-width:none !important; min-height:100% !important; margin:0 !important; display:block !important; }
.oktsw .oktsw-hero-visual .oktsw-photo--2,
.oktsw .oktsw-hero-visual .oktsw-photo--2.has-image,
.oktsw .oktsw-hero-visual .oktsw-photo--2.is-placeholder { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; min-height:0 !important; border:0 !important; border-radius:0 !important; clip-path:none !important; overflow:hidden !important; }
.oktsw .oktsw-hero-visual .oktsw-photo--2 .oktsw-slot-image,
.oktsw .oktsw-hero-visual .oktsw-photo--2.oktsw-fit-contain .oktsw-slot-image,
.oktsw .oktsw-hero-visual .oktsw-photo--2.oktsw-fit-cover .oktsw-slot-image { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:cover !important; object-position:62% center !important; filter:saturate(.96) contrast(.98); -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 17%,rgba(0,0,0,.78) 43%,#000 65%,#000 100%) !important; mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 17%,rgba(0,0,0,.78) 43%,#000 65%,#000 100%) !important; }
.oktsw .oktsw-hero-visual .oktsw-photo--2.has-image::before,
.oktsw .oktsw-hero-visual .oktsw-photo--2.has-image::after { display:none !important; content:none !important; }
.oktsw .oktsw-hero-offer { max-width:310px; background:rgba(255,255,255,.58); backdrop-filter:blur(2px); }
.oktsw .oktsw-actions-hero { max-width:390px; }
}
@media (max-width:600px) {
.oktsw .oktsw-hero-grid { min-height:590px; padding-top:38px !important; }
.oktsw .oktsw-hero h1 { font-size:30px; }
.oktsw .oktsw-hero-description { font-size:13.5px; line-height:1.9; }
.oktsw .oktsw-hero-visual { inset:0 -18px 0 12% !important; }
.oktsw .oktsw-hero::after { background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.9) 42%,rgba(255,255,255,.65) 66%,rgba(255,255,255,.17) 100%); }
.oktsw .oktsw-works-grid { grid-template-columns:1fr; gap:16px; }
.oktsw .oktsw-work-body { padding:19px 19px 21px; }
.oktsw .oktsw-footer-legal-links { gap:10px 18px; }
.oktsw.oktsw-legal-page-wrap { padding:38px 0 54px; }
.oktsw .oktsw-legal-dl-large>div { grid-template-columns:1fr; gap:5px; }
}
@media (min-width:601px) and (max-width:1060px) {
.oktsw .oktsw-works-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px) {
.oktsw .oktsw-hero::after { -webkit-backdrop-filter:blur(.7px); backdrop-filter:blur(.7px); }
}
/* =========================================================
1.6.2 制作イメージ：PC版＋スマホ版の横自動スクロール
========================================================= */
.oktsw .oktsw-works-section {
overflow:hidden;
background:linear-gradient(180deg,#f7fbff 0%,#f2f8fd 100%);
}
.oktsw .oktsw-work-window {
width:100vw;
margin-left:calc(50% - 50vw);
overflow:hidden;
padding:8px 0 18px;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.oktsw .oktsw-work-track {
display:flex;
width:max-content;
gap:20px;
animation:oktsw-work-marquee 54s linear infinite;
will-change:transform;
}
.oktsw .oktsw-work-window:hover .oktsw-work-track { animation-play-state:paused; }
.oktsw .oktsw-work-group { display:flex; gap:20px; flex:none; align-items:stretch; }
.oktsw .oktsw-work-card {
width:460px;
min-width:460px;
overflow:hidden;
border:1px solid #d9e7f5;
border-radius:18px;
background:#fff;
box-shadow:0 9px 28px rgba(25,69,110,.07);
cursor:default;
user-select:none;
}
.oktsw .oktsw-work-device-set {
position:relative;
height:300px;
padding:26px 34px 20px 26px;
background:linear-gradient(145deg,#eef6fd 0%,#e4f0fb 56%,#d7e8f8 100%);
overflow:hidden;
}
.oktsw .oktsw-work-device-set::before {
content:"";
position:absolute;
width:230px;
height:230px;
right:-82px;
top:-86px;
border-radius:50%;
background:rgba(255,255,255,.44);
}
.oktsw .oktsw-work-desktop {
position:relative;
z-index:1;
width:86%;
height:230px;
margin-top:7px;
border:7px solid #243446;
border-bottom-width:12px;
border-radius:12px 12px 7px 7px;
background:#fff;
box-shadow:0 16px 28px rgba(24,54,89,.18);
overflow:hidden;
}
.oktsw .oktsw-work-browserbar {
height:20px;
display:flex;
gap:5px;
align-items:center;
padding:0 8px;
background:#eef2f6;
border-bottom:1px solid #dce4ec;
}
.oktsw .oktsw-work-browserbar i { width:5px; height:5px; border-radius:50%; background:#9fb0c0; }
.oktsw .oktsw-work-screen { height:calc(100% - 20px); background:#fff; overflow:hidden; }
.oktsw .oktsw-work-screen img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.oktsw .oktsw-work-mobile {
position:absolute;
z-index:3;
right:28px;
bottom:18px;
width:94px;
height:188px;
padding:5px;
border-radius:17px;
background:#1d2a38;
box-shadow:0 14px 30px rgba(13,44,77,.28);
}
.oktsw .oktsw-work-mobile-notch {
position:absolute;
z-index:4;
top:8px;
left:50%;
width:31px;
height:5px;
transform:translateX(-50%);
border-radius:999px;
background:#1d2a38;
}
.oktsw .oktsw-work-mobile-screen {
width:100%;
height:100%;
overflow:hidden;
border-radius:12px;
background:#fff;
}
.oktsw .oktsw-work-mobile-screen img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.oktsw .oktsw-work-placeholder {
width:100%;
height:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
color:#84a5c7;
background:linear-gradient(135deg,#f8fbfe,#e8f2fb);
}
.oktsw .oktsw-work-placeholder .oktsw-icon { width:34px; height:34px; }
.oktsw .oktsw-work-placeholder small { font-size:10px; font-weight:700; }
.oktsw .oktsw-work-body { padding:20px 22px 22px; min-height:102px; }
.oktsw .oktsw-work-body h3 { margin:0; color:#173f6d; font-size:16px; line-height:1.65; }
.oktsw .oktsw-work-body p { margin:8px 0 0; color:#5a728c; font-size:12px; line-height:1.85; }
.oktsw .oktsw-work-note {
max-width:960px;
margin:22px auto 0;
color:#657c94;
font-size:11.5px;
line-height:1.9;
text-align:center;
}
@keyframes oktsw-work-marquee {
from { transform:translateX(0); }
to { transform:translateX(calc(-50% - 10px)); }
}
@media (max-width:820px) {
.oktsw .oktsw-work-track { animation-duration:66s; }
.oktsw .oktsw-work-card { width:390px; min-width:390px; }
.oktsw .oktsw-work-device-set { height:270px; padding:24px 28px 18px 22px; }
.oktsw .oktsw-work-desktop { width:87%; height:207px; }
.oktsw .oktsw-work-mobile { right:22px; bottom:16px; width:84px; height:168px; }
}
@media (max-width:600px) {
.oktsw .oktsw-work-window {
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2%,#000 98%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 2%,#000 98%,transparent 100%);
}
.oktsw .oktsw-work-track { animation-duration:84s; gap:14px; }
.oktsw .oktsw-work-group { gap:14px; }
.oktsw .oktsw-work-card { width:304px; min-width:304px; border-radius:15px; }
.oktsw .oktsw-work-device-set { height:228px; padding:19px 20px 15px 16px; }
.oktsw .oktsw-work-desktop { width:88%; height:174px; border-width:5px; border-bottom-width:9px; border-radius:9px 9px 5px 5px; }
.oktsw .oktsw-work-browserbar { height:16px; padding-inline:6px; gap:4px; }
.oktsw .oktsw-work-browserbar i { width:4px; height:4px; }
.oktsw .oktsw-work-screen { height:calc(100% - 16px); }
.oktsw .oktsw-work-mobile { right:16px; bottom:13px; width:69px; height:139px; padding:4px; border-radius:13px; }
.oktsw .oktsw-work-mobile-screen { border-radius:9px; }
.oktsw .oktsw-work-mobile-notch { top:6px; width:24px; height:4px; }
.oktsw .oktsw-work-body { min-height:92px; padding:16px 17px 18px; }
.oktsw .oktsw-work-body h3 { font-size:14px; }
.oktsw .oktsw-work-body p { font-size:11px; }
.oktsw .oktsw-work-note { font-size:10.5px; padding-inline:4px; }
}
@media (prefers-reduced-motion:reduce) {
.oktsw .oktsw-work-track { animation:none !important; }
.oktsw .oktsw-work-window {
overflow-x:auto;
-webkit-mask-image:none;
mask-image:none;
-webkit-overflow-scrolling:touch;
}
}
/* =========================================================
1.6.4 制作イメージ：完成済み画像だけを横自動スクロール
- カード、タイトル、説明文、PC/スマホ端末枠は付けない
- PC/スマホとも同じ画像を使用
========================================================= */
.oktsw .oktsw-works-section {
overflow:hidden;
background:linear-gradient(180deg,#f7fbff 0%,#f2f8fd 100%);
}
.oktsw .oktsw-work-window {
width:100vw;
margin-left:calc(50% - 50vw);
overflow:hidden;
padding:4px 0 14px;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
}
.oktsw .oktsw-work-track {
display:flex;
width:max-content;
gap:34px;
align-items:center;
animation:oktsw-work-marquee-v164 52s linear infinite;
will-change:transform;
}
.oktsw .oktsw-work-window:hover .oktsw-work-track { animation-play-state:paused; }
.oktsw .oktsw-work-group {
display:flex;
gap:34px;
flex:none;
align-items:center;
}
.oktsw .oktsw-work-image-item {
width:560px;
min-width:560px;
height:390px;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
overflow:visible;
user-select:none;
}
.oktsw .oktsw-work-image-item img {
display:block;
width:100%;
height:100%;
max-width:100%;
max-height:100%;
object-fit:contain;
object-position:center;
pointer-events:none;
}
.oktsw .oktsw-work-note {
max-width:960px;
margin:18px auto 0;
color:#657c94;
font-size:11.5px;
line-height:1.9;
text-align:center;
}
@keyframes oktsw-work-marquee-v164 {
from { transform:translateX(0); }
to { transform:translateX(calc(-50% - 17px)); }
}
@media (max-width:1060px) {
.oktsw .oktsw-work-track,
.oktsw .oktsw-work-group { gap:24px; }
.oktsw .oktsw-work-track { animation-duration:60s; }
.oktsw .oktsw-work-image-item {
width:470px;
min-width:470px;
height:330px;
}
@keyframes oktsw-work-marquee-v164 {
from { transform:translateX(0); }
to { transform:translateX(calc(-50% - 12px)); }
}
}
@media (max-width:600px) {
.oktsw .oktsw-work-window {
padding:0 0 10px;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 1.5%,#000 98.5%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 1.5%,#000 98.5%,transparent 100%);
}
.oktsw .oktsw-work-track,
.oktsw .oktsw-work-group { gap:16px; }
.oktsw .oktsw-work-track { animation-duration:68s; }
.oktsw .oktsw-work-image-item {
width:86vw;
min-width:86vw;
max-width:350px;
height:270px;
}
.oktsw .oktsw-work-note { font-size:10.5px; padding-inline:4px; }
@keyframes oktsw-work-marquee-v164 {
from { transform:translateX(0); }
to { transform:translateX(calc(-50% - 8px)); }
}
}
@media (prefers-reduced-motion:reduce) {
.oktsw .oktsw-work-track { animation:none !important; }
.oktsw .oktsw-work-window {
overflow-x:auto;
-webkit-mask-image:none;
mask-image:none;
}
}
/* =========================================================
1.6.8 サイト制作コラム：アイキャッチ見切れ防止（最終上書き）
- 300:170 の枠は維持
- 元画像全体を contain で表示
- WordPress/テーマ側の cover・transform を強制解除
========================================================= */
.oktsw .oktsw-column-thumb,
.oktsw .oktsw-article-cover-frame {
box-sizing:border-box !important;
aspect-ratio:300 / 170 !important;
overflow:hidden !important;
background:#fff !important;
}
.oktsw .oktsw-column-thumb > img.oktsw-featured-original,
.oktsw .oktsw-article-cover-frame > img.oktsw-featured-original {
display:block !important;
width:100% !important;
height:100% !important;
max-width:100% !important;
max-height:100% !important;
object-fit:contain !important;
object-position:50% 50% !important;
transform:none !important;
scale:1 !important;
translate:none !important;
clip-path:none !important;
}
/* =========================================================
1.6.9 サイト制作コラム：300×170をそのまま表示
実画像が300:170なら、固定高を使わず width:100%; height:auto にするのが
最も確実。3:2の親要素や cover の影響を受けても左右を切らない。
========================================================= */
.oktsw .oktsw-column-thumb {
display:block !important;
width:100% !important;
height:auto !important;
aspect-ratio:300 / 170 !important;
overflow:hidden !important;
background:#fff !important;
line-height:0 !important;
}
.oktsw .oktsw-column-thumb > img,
.oktsw img.oktsw-column-featured-image,
.oktsw img.oktsw-featured-original,
.oktsw img.oktsw-article-cover {
display:block !important;
width:100% !important;
height:auto !important;
max-width:100% !important;
max-height:none !important;
aspect-ratio:300 / 170 !important;
object-fit:contain !important;
object-position:center center !important;
margin:0 !important;
padding:0 !important;
transform:none !important;
scale:1 !important;
translate:none !important;
clip-path:none !important;
}
.oktsw img.oktsw-article-cover { margin-bottom:32px !important; border-radius:12px !important; }
.oktsw .oktsw-article-cover-frame { height:auto !important; max-height:none !important; aspect-ratio:auto !important; overflow:visible !important; }
/* =========================================================
1.7.1 コラム固定ページ／法定ページ導線
========================================================= */
.oktsw .oktsw-column-index-page .oktsw-heading { margin-bottom:30px; }
.oktsw .oktsw-column-index-back { display:flex; justify-content:center; margin-top:36px; text-align:center; }
.oktsw .oktsw-legal-back { display:flex !important; justify-content:center !important; text-align:center !important; }
@media (max-width:600px) {
.oktsw .oktsw-legal-back .oktsw-btn,
.oktsw .oktsw-column-index-back .oktsw-btn { width:auto; max-width:100%; justify-content:center; }
}
/* =========================================================
1.7.2 Reveal motion + PC flow arrows
- Standard content: left -> right fade
- Card content: bottom -> top fade
- Google reviews / work-image marquees remain untouched
========================================================= */
.oktsw.oktsw-reveal-ready .oktsw-reveal {
opacity:0;
transition:
opacity .64s cubic-bezier(.2,.72,.2,1),
transform .64s cubic-bezier(.2,.72,.2,1);
transition-delay:var(--oktsw-reveal-delay,0ms);
will-change:opacity,transform;
}
.oktsw.oktsw-reveal-ready .oktsw-reveal-left { transform:translate3d(-36px,0,0); }
.oktsw.oktsw-reveal-ready .oktsw-reveal-up { transform:translate3d(0,34px,0); }
.oktsw.oktsw-reveal-ready .oktsw-reveal.is-visible {
opacity:1;
transform:translate3d(0,0,0);
will-change:auto;
}
/* 横スクロールそのものには reveal を一切適用しない。 */
.oktsw .oktsw-review-window,
.oktsw .oktsw-review-window *,
.oktsw .oktsw-work-window,
.oktsw .oktsw-work-window * {
--oktsw-reveal-delay:0ms;
}
/* モバイル／タブレットのメニュー項目も、開いた時に左から右へ。 */
@media (max-width:1060px) {
.oktsw.is-enhanced .oktsw-menu.is-open > a,
.oktsw.is-enhanced .oktsw-menu.is-open > .oktsw-menu-cta {
opacity:0;
transform:translateX(-22px);
animation:oktsw-menu-fade-right .42s cubic-bezier(.2,.72,.2,1) forwards;
}
.oktsw.is-enhanced .oktsw-menu.is-open > :nth-child(2) { animation-delay:45ms; }
.oktsw.is-enhanced .oktsw-menu.is-open > :nth-child(3) { animation-delay:90ms; }
.oktsw.is-enhanced .oktsw-menu.is-open > :nth-child(4) { animation-delay:135ms; }
.oktsw.is-enhanced .oktsw-menu.is-open > :nth-child(5) { animation-delay:180ms; }
.oktsw.is-enhanced .oktsw-menu.is-open > :nth-child(6) { animation-delay:225ms; }
.oktsw.is-enhanced .oktsw-menu.is-open > :nth-child(7) { animation-delay:270ms; }
}
@keyframes oktsw-menu-fade-right {
from { opacity:0; transform:translateX(-22px); }
to { opacity:1; transform:translateX(0); }
}
/* PCのみ：流れカードの間隔を広げ、謎の棒線を青い矢印へ置換。 */
@media (min-width:1061px) {
.oktsw .oktsw-flow-grid { gap:42px; }
.oktsw .oktsw-flow-grid > li:not(:last-child)::after {
content:"→";
position:absolute;
right:-35px;
top:50%;
width:28px;
height:34px;
display:flex;
align-items:center;
justify-content:center;
transform:translateY(-50%);
background:none;
color:#2f7ce3;
font-size:28px;
font-weight:800;
line-height:1;
z-index:3;
}
}
@media (prefers-reduced-motion:reduce) {
.oktsw.oktsw-reveal-ready .oktsw-reveal,
.oktsw.oktsw-reveal-ready .oktsw-reveal-left,
.oktsw.oktsw-reveal-ready .oktsw-reveal-up,
.oktsw.oktsw-reveal-ready .oktsw-reveal.is-visible {
opacity:1 !important;
transform:none !important;
transition:none !important;
}
.oktsw.is-enhanced .oktsw-menu.is-open > a,
.oktsw.is-enhanced .oktsw-menu.is-open > .oktsw-menu-cta {
opacity:1 !important;
transform:none !important;
animation:none !important;
}
}
/* =========================================================
1.7.3 サイト制作コラム：記事ヘッダー／参考リンク／一覧ボタン
========================================================= */
.oktsw .oktsw-single-heading .oktsw-column-kicker {
display:block;
margin:0 auto;
text-align:center;
color:var(--oktsw-blue);
font-size:13px;
line-height:1.4;
font-weight:800;
letter-spacing:.18em;
}
.oktsw .oktsw-single-heading time {
display:block;
margin:9px 0 16px !important;
text-align:center;
}
.oktsw .oktsw-single-content a:not(.oktsw-btn) {
position:relative;
z-index:1;
pointer-events:auto !important;
color:var(--oktsw-blue) !important;
-webkit-text-fill-color:var(--oktsw-blue) !important;
text-decoration:underline !important;
text-underline-offset:3px;
cursor:pointer;
}
.oktsw .oktsw-single-content a:not(.oktsw-btn):hover {
text-decoration-thickness:2px !important;
}
.oktsw .oktsw-column-back {
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:48px 0 0;
text-align:center;
}
.oktsw .oktsw-column-back .oktsw-btn {
width:auto;
min-width:190px;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
text-decoration:none !important;
}
@media (max-width:600px) {
.oktsw .oktsw-column-back { margin-top:38px; }
.oktsw .oktsw-column-back .oktsw-btn { width:auto; max-width:100%; }
}
/* =========================================================
1.7.4 スマホ追従相談バー／メニューCTA整理／電話アイコン
========================================================= */
/* ヒーロー（10万円表示直下）の相談ボタンは、追従バーとの重複を避けて非表示。 */
.oktsw .oktsw-actions-hero { display:none !important; }
/* スマホメニュー内の相談ボタンは使用しない。旧キャッシュ／旧HTMLが残っても非表示。 */
.oktsw .oktsw-menu-cta,
.oktsw .oktsw-actions-menu { display:none !important; }
/* スマホ追従バーはPC／タブレットでは表示しない。 */
.oktsw .oktsw-mobile-sticky-actions { display:none; }
/* 電話番号の前に同系統の線画アイコンを表示。 */
.oktsw .oktsw-mobile-phone a {
display:inline-flex;
align-items:center;
justify-content:flex-end;
gap:5px;
}
.oktsw .oktsw-mobile-phone a .oktsw-icon {
width:14px;
height:14px;
flex:none;
stroke-width:2;
}
.oktsw .oktsw-mobile-phone-number { display:inline-block; }
@media (max-width:600px) {
/* 画面下に常時追従。iPhone等のセーフエリアも考慮する。 */
.oktsw .oktsw-mobile-sticky-actions {
display:block;
position:fixed;
left:0;
right:0;
bottom:0;
z-index:220;
padding:8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
background:rgba(255,255,255,.98);
border-top:1px solid #dbe8f5;
box-shadow:0 -5px 20px rgba(19,61,120,.12);
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
}
.oktsw .oktsw-actions-mobile-sticky {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:8px;
width:100%;
max-width:560px;
margin:0 auto;
}
.oktsw .oktsw-actions-mobile-sticky .oktsw-btn {
width:100%;
min-width:0;
min-height:48px;
padding:10px 8px;
border-radius:10px;
gap:7px;
font-size:12.5px;
line-height:1.35;
white-space:nowrap;
box-shadow:none;
}
.oktsw .oktsw-actions-mobile-sticky .oktsw-icon {
width:18px;
height:18px;
flex:none;
stroke-width:1.9;
}
/* 固定バーでフッター最下部の内容が隠れないように余白を確保。 */
.oktsw .oktsw-footer {
padding-bottom:calc(86px + env(safe-area-inset-bottom));
}
}
@media (max-width: 640px) {
.oktsw .oktsw-inquiry-options { grid-template-columns:1fr; gap:12px; }
.oktsw .oktsw-inquiry-option { padding:14px 13px; }
.oktsw .oktsw-inquiry-field legend { flex-wrap:wrap; }
}
/* v1.7.7 contact plan field redesign: mirror reference plugin UI */
.oktsw .oktsw-plan-field{border:0;padding:0;margin:0 0 20px;}
.oktsw .oktsw-plan-field legend{display:block;width:100%;font-size:13px;font-weight:800;color:#284a68;margin-bottom:9px;}
.oktsw .oktsw-plan-field legend span{display:inline-block;font-size:10px;font-weight:700;color:#607c94;background:#eef5fb;border-radius:12px;padding:3px 8px;margin-left:6px;vertical-align:middle;}
.oktsw .oktsw-plan-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
.oktsw .oktsw-plan-options label{display:flex;align-items:flex-start;gap:10px;padding:13px 14px;border:1px solid #d7e4ef;border-radius:5px;background:#fbfdff;cursor:pointer;transition:.2s;}
.oktsw .oktsw-plan-options label:hover{border-color:#91b7d7;background:#f4f9fd;}
.oktsw .oktsw-plan-options input{width:auto !important;min-height:0 !important;margin-top:3px;accent-color:#075aa6;flex:none;padding:0;border:0;box-shadow:none;background:transparent;}
.oktsw .oktsw-plan-options span{display:block;min-width:0;}
.oktsw .oktsw-plan-options b{display:block;font-size:12px;color:#1f486c;line-height:1.5;font-weight:700;}
.oktsw .oktsw-plan-options small{display:block;color:#71879a;font-size:11px;margin-top:3px;line-height:1.5;}
.oktsw .oktsw-plan-options label:has(input:checked){border-color:#91b7d7;background:#f4f9fd;}
.oktsw .oktsw-other-detail{margin-top:-6px;}
@media (max-width:760px){
.oktsw .oktsw-plan-options{grid-template-columns:1fr;}
}
/* v1.7.8: 料金プランは排他的に1つだけ選択 */
.oktsw .oktsw-plan-options input[type="radio"]{
appearance:auto!important;
-webkit-appearance:radio!important;
width:16px!important;
height:16px!important;
min-height:0!important;
margin:3px 0 0!important;
padding:0!important;
accent-color:#075aa6;
flex:none;
}
/* =========================================================
1.7.9 スマホのアピールエリア高さ調整
下部の余分な画像領域をカットし、テキスト直下でコンパクトに終了。
========================================================= */
@media (max-width:600px) {
.oktsw .oktsw-hero-grid {
min-height:445px !important;
padding-top:30px !important;
padding-bottom:24px !important;
}
.oktsw .oktsw-hero-visual,
.oktsw .oktsw-hero-visual .oktsw-photo--2,
.oktsw .oktsw-hero-visual .oktsw-photo--2.has-image,
.oktsw .oktsw-hero-visual .oktsw-photo--2.is-placeholder {
height:100% !important;
min-height:0 !important;
}
}
/* ===== 戸籍取り寄せ代行LP 2.0.0 ===== */
.oktsw--koseki{--oktsw-blue:#176b87;--oktsw-navy:#163f50;--oktsw-ink:#203d49;--oktsw-muted:#5b727b;--oktsw-line:#dce9e8;--oktsw-soft:#f3f9f8;--oktsw-green:#1b7b69;background:#fff}
.oktsw--koseki .oktsw-header-top{background:#edf7f5;border-color:#dcebe8}.oktsw--koseki .oktsw-eyebrow{color:#287765}.oktsw--koseki .oktsw-koseki-hero{background:linear-gradient(135deg,#f4faf9 0%,#fff 58%,#eef7f6 100%);position:relative;overflow:hidden}.oktsw--koseki .oktsw-koseki-hero:after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-180px;top:-240px;background:rgba(43,139,119,.08);pointer-events:none}.oktsw--koseki .oktsw-hero-copy{position:relative;z-index:1}.oktsw--koseki .oktsw-hero-copy h1{font-size:clamp(34px,4.3vw,58px);line-height:1.42;letter-spacing:.015em}.oktsw--koseki .oktsw-hero-description{max-width:720px}
.oktsw .oktsw-koseki-price-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:28px 0 20px;max-width:650px}.oktsw .oktsw-koseki-price-pills>div{padding:17px 19px;border:1px solid #cfe3df;border-radius:14px;background:rgba(255,255,255,.9);box-shadow:0 10px 30px rgba(38,89,82,.06)}.oktsw .oktsw-koseki-price-pills span,.oktsw .oktsw-koseki-price-pills small{display:block;color:#58736e;font-size:12px;font-weight:700}.oktsw .oktsw-koseki-price-pills strong{display:inline-block;margin-right:6px;color:#176b87;font-size:26px;line-height:1.35}.oktsw .oktsw-koseki-price-pills small{display:inline;color:#6e807d}
.oktsw .oktsw-koseki-price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:960px;margin:0 auto}.oktsw .oktsw-koseki-price-card{padding:34px;border:1px solid var(--oktsw-line);border-radius:20px;background:#fff;box-shadow:0 14px 36px rgba(35,88,79,.06)}.oktsw .oktsw-koseki-price-card.is-featured{border:2px solid #72b7a7;background:linear-gradient(180deg,#f5fbf9,#fff)}.oktsw .oktsw-koseki-price-card h3{font-size:21px;margin:9px 0 14px}.oktsw .oktsw-koseki-price-card>p:last-child{font-size:14px;color:var(--oktsw-muted)}.oktsw .oktsw-koseki-cost-note{max-width:960px;margin:24px auto 0;padding:24px 28px;border-radius:14px;background:#f6faf8;border-left:4px solid #5ca38f}.oktsw .oktsw-koseki-cost-note h3{font-size:16px;margin-bottom:8px}.oktsw .oktsw-koseki-cost-note p{font-size:13px;color:#4f6964}
.oktsw .oktsw-flow-six{grid-template-columns:repeat(3,minmax(0,1fr))}.oktsw .oktsw-koseki-band{background:linear-gradient(135deg,#164b56,#1f756c)}.oktsw .oktsw-koseki-band h2,.oktsw .oktsw-koseki-band p{color:#fff}.oktsw .oktsw-koseki-band .oktsw-eyebrow{color:#bbede1}.oktsw--koseki .oktsw-service-card{border-color:#d8e9e5}.oktsw--koseki .oktsw-card-icon{color:#237b6c;background:#edf7f4}.oktsw--koseki .oktsw-price-tag{background:#e8f5f2;color:#277565}.oktsw--koseki .oktsw-price-amount strong{color:#176b87}.oktsw--koseki .oktsw-line-info{background:#eff8f4;border-color:#d7ebe2}.oktsw--koseki .oktsw-line-info h3{color:#216c58}
.oktsw .oktsw-legal-page h1{font-size:clamp(28px,4vw,42px);margin:5px 0 34px}.oktsw .oktsw-legal-body h2{font-size:21px;margin:34px 0 10px}.oktsw .oktsw-legal-body p{color:#49636a}.oktsw .oktsw-legal-dl{margin-top:28px;border-top:1px solid var(--oktsw-line)}.oktsw .oktsw-legal-dl>div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;padding:18px 0;border-bottom:1px solid var(--oktsw-line)}.oktsw .oktsw-legal-dl dt{font-weight:700;color:var(--oktsw-navy)}.oktsw .oktsw-legal-dl dd{color:#536b72}.oktsw .oktsw-legal-note{margin-top:20px;font-size:12px;color:#6b7d82}.oktsw .oktsw-legal-back{margin-top:36px}
@media(max-width:900px){.oktsw .oktsw-flow-six{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.oktsw .oktsw-koseki-price-pills,.oktsw .oktsw-koseki-price-grid,.oktsw .oktsw-flow-six{grid-template-columns:1fr}.oktsw .oktsw-koseki-price-card{padding:26px 22px}.oktsw .oktsw-koseki-price-pills strong{font-size:24px}.oktsw .oktsw-legal-dl>div{grid-template-columns:1fr;gap:6px}.oktsw--koseki .oktsw-hero-copy h1{font-size:32px}}
/* v2.1.0 戸籍取り寄せ代行サイト調整 */
.oktsw {
--oktsw-font:"Yu Gothic","YuGothic","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
font-weight:400;
}
.oktsw h1,.oktsw h2,.oktsw h3,.oktsw h4 { font-weight:600; letter-spacing:.015em; }
.oktsw .oktsw-brand-imageonly { width:250px; max-width:25vw; min-width:190px; }
.oktsw .oktsw-header-brand-image { width:100%; height:50px; object-fit:contain; object-position:left center; }
.oktsw .oktsw-header-brand-placeholder { width:100%; min-height:48px; padding:5px 12px; border:1px dashed #afc8df; border-radius:10px; background:#f7fbff; display:flex; align-items:flex-start; justify-content:center; flex-direction:column; color:#557694; line-height:1.2; }
.oktsw .oktsw-header-brand-placeholder strong { font-size:12px; }
.oktsw .oktsw-header-brand-placeholder small { font-size:9px; margin-top:3px; }
@media (min-width: 1101px){
.oktsw .oktsw-koseki-hero .oktsw-container { max-width:1280px; }
.oktsw .oktsw-koseki-hero .oktsw-hero-grid { grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr); gap:20px; }
.oktsw .oktsw-koseki-hero .oktsw-hero-copy { margin-left:-24px; position:relative; z-index:3; }
.oktsw .oktsw-koseki-hero .oktsw-hero h1 { font-size:clamp(34px,3.15vw,46px); line-height:1.35; letter-spacing:.005em; width:max-content; max-width:720px; }
.oktsw .oktsw-koseki-hero .oktsw-hero h1 br { display:block; }
.oktsw .oktsw-koseki-hero .oktsw-eyebrow { margin-left:-18px; padding-left:18px; position:relative; }
.oktsw .oktsw-koseki-hero .oktsw-eyebrow::before { content:""; position:absolute; left:-48px; top:50%; width:52px; height:1px; background:#5d91cc; }
}
.oktsw .oktsw-office-section { background:linear-gradient(135deg,#f7fbff,#eef6fc); }
.oktsw .oktsw-office-grid { display:grid; grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr); gap:58px; align-items:center; }
.oktsw .oktsw-office-photo { min-height:410px; border-radius:24px; overflow:hidden; background:#fff; box-shadow:0 16px 42px rgba(36,82,126,.10); }
.oktsw .oktsw-office-photo img { width:100%; height:100%; min-height:410px; object-fit:cover; object-position:center top; }
.oktsw .oktsw-office-placeholder { min-height:410px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#6985a3; border:1px dashed #aec6dc; }
.oktsw .oktsw-office-placeholder .oktsw-icon { width:62px; height:62px; }
.oktsw .oktsw-office-placeholder strong { font-size:18px; }
.oktsw .oktsw-office-placeholder span { font-size:12px; }
.oktsw .oktsw-office-copy h2 { font-size:32px; margin-bottom:18px; }
.oktsw .oktsw-office-name { font-size:20px; color:var(--oktsw-navy); font-weight:600; margin-bottom:4px; }
.oktsw .oktsw-office-person { color:#456789; margin-bottom:20px; }
.oktsw .oktsw-office-profile { margin:24px 0; border-top:1px solid #d9e8f4; }
.oktsw .oktsw-office-profile>div { display:grid; grid-template-columns:112px 1fr; gap:16px; padding:11px 0; border-bottom:1px solid #d9e8f4; }
.oktsw .oktsw-office-profile dt { font-size:12px; font-weight:700; color:#507495; }
.oktsw .oktsw-office-profile dd { font-size:14px; color:#294d70; }
.oktsw .oktsw-column-category-block { margin-top:54px; }
.oktsw .oktsw-column-category-block + .oktsw-column-category-block { margin-top:76px; padding-top:64px; border-top:1px solid #dce9f4; }
.oktsw .oktsw-column-category-head { margin-bottom:28px; }
.oktsw .oktsw-column-category-head>span { display:inline-block; padding:5px 12px; border-radius:999px; background:#eaf3fc; color:#175db2; font-size:11px; font-weight:700; margin-bottom:8px; }
.oktsw .oktsw-column-category-head h2 { font-size:28px; margin-bottom:8px; }
.oktsw .oktsw-column-category-head p { color:#607a94; font-size:14px; }
.oktsw .oktsw-legal-lead { margin:18px 0 30px; padding:18px 20px; background:#f4f9fd; border-left:4px solid #3c80ce; color:#405f7d; }
.oktsw .oktsw-legal-body>p:first-child { margin-top:20px; padding:18px 20px; background:#f7fafc; border-radius:12px; }
@media (max-width:1100px){
.oktsw .oktsw-brand-imageonly { width:220px; max-width:32vw; min-width:175px; }
.oktsw .oktsw-header-brand-image { height:46px; }
}
@media (max-width:820px){
.oktsw .oktsw-office-grid { grid-template-columns:1fr; gap:30px; }
.oktsw .oktsw-office-photo,.oktsw .oktsw-office-photo img,.oktsw .oktsw-office-placeholder { min-height:0; aspect-ratio:4/3; }
.oktsw .oktsw-office-photo { max-width:620px; width:100%; margin-inline:auto; }
.oktsw .oktsw-koseki-hero .oktsw-hero h1 { max-width:100%; }
}
@media (max-width:640px){
.oktsw .oktsw-brand-imageonly { width:172px; min-width:150px; max-width:52vw; }
.oktsw .oktsw-header-brand-image { height:42px; }
.oktsw .oktsw-koseki-hero .oktsw-hero h1 { font-size:clamp(25px,7.4vw,32px); line-height:1.42; }
.oktsw .oktsw-office-copy h2 { font-size:26px; }
.oktsw .oktsw-office-profile>div { grid-template-columns:92px 1fr; gap:10px; }
}
/* =========================================================
v2.1.1 アピールエリア・料金詳細導線調整
========================================================= */
/* 「行政書士が全国対応」は線ではなくバッジ表示 */
.oktsw .oktsw-koseki-hero .oktsw-hero-badge {
display:inline-flex;
align-items:center;
width:auto;
margin:0 0 16px 0 !important;
padding:7px 15px !important;
border:1px solid rgba(35,123,108,.22);
border-radius:999px;
background:linear-gradient(135deg,#237b6c,#319883);
color:#fff !important;
font-size:12px;
font-weight:700;
line-height:1.4;
letter-spacing:.08em;
box-shadow:0 7px 20px rgba(35,123,108,.14);
}
.oktsw .oktsw-koseki-hero .oktsw-hero-badge::before,
.oktsw .oktsw-koseki-hero .oktsw-hero-badge::after {
display:none !important;
content:none !important;
}
/* 写真2との境界は斜めの切り取り線を使わず、ぼかし（フェード）のみ */
.oktsw .oktsw-koseki-hero .oktsw-hero-visual .oktsw-photo--2,
.oktsw .oktsw-koseki-hero .oktsw-hero-visual .oktsw-photo--2.has-image,
.oktsw .oktsw-koseki-hero .oktsw-hero-visual .oktsw-photo--2.is-placeholder {
clip-path:none !important;
}
.oktsw .oktsw-koseki-hero .oktsw-hero-visual .oktsw-photo--2.has-image::before,
.oktsw .oktsw-koseki-hero .oktsw-hero-visual .oktsw-photo--2.has-image::after {
display:none !important;
content:none !important;
}
.oktsw .oktsw-koseki-hero .oktsw-hero-visual .oktsw-photo--2 .oktsw-slot-image,
.oktsw .oktsw-koseki-hero .oktsw-hero-visual .oktsw-photo--2.oktsw-fit-contain .oktsw-slot-image,
.oktsw .oktsw-koseki-hero .oktsw-hero-visual .oktsw-photo--2.oktsw-fit-cover .oktsw-slot-image {
-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.13) 5%,rgba(0,0,0,.46) 12%,rgba(0,0,0,.82) 21%,#000 31%,#000 100%) !important;
mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.13) 5%,rgba(0,0,0,.46) 12%,rgba(0,0,0,.82) 21%,#000 31%,#000 100%) !important;
}
@media (min-width:1101px) {
/* 画面を広く使い、見出し・説明文を従来より約90px左へ */
.oktsw .oktsw-koseki-hero .oktsw-container {
width:calc(100% - 40px);
max-width:1440px;
}
.oktsw .oktsw-koseki-hero .oktsw-hero-grid {
grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
gap:14px;
}
.oktsw .oktsw-koseki-hero .oktsw-hero-copy {
margin-left:-40px;
padding-right:34px !important;
}
.oktsw .oktsw-koseki-hero .oktsw-hero-copy h1 {
width:auto;
max-width:820px;
}
.oktsw .oktsw-koseki-hero .oktsw-hero-description {
max-width:790px;
}
}
@media (min-width:821px) and (max-width:1100px) {
.oktsw .oktsw-koseki-hero .oktsw-container { width:calc(100% - 34px); }
.oktsw .oktsw-koseki-hero .oktsw-hero-copy { margin-left:-12px; }
}
/* 定額報酬の直下に、各プランの利用例を表示 */
.oktsw .oktsw-price-case-details {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px;
max-width:960px;
margin:28px auto 0;
}
.oktsw .oktsw-price-case-card {
scroll-margin-top:calc(var(--oktsw-header-offset) + 18px);
padding:28px 30px;
border:1px solid #d7e7e3;
border-radius:18px;
background:#fbfefd;
box-shadow:0 12px 30px rgba(35,88,79,.045);
}
.oktsw .oktsw-price-case-card.is-featured { border-color:#9ccdc2; background:linear-gradient(180deg,#f1faf7,#fff); }
.oktsw .oktsw-price-case-head { margin-bottom:15px; }
.oktsw .oktsw-price-case-head>span {
display:inline-block;
margin-bottom:8px;
padding:4px 10px;
border-radius:999px;
background:#e7f5f1;
color:#276f62;
font-size:11px;
font-weight:700;
}
.oktsw .oktsw-price-case-head h3 { font-size:18px; line-height:1.65; }
.oktsw .oktsw-price-case-card>p { color:#526d68; font-size:13.5px; line-height:1.9; }
.oktsw .oktsw-price-case-card ul { margin:17px 0; padding:0; list-style:none; }
.oktsw .oktsw-price-case-card li {
position:relative;
margin:8px 0;
padding-left:24px;
color:#345b54;
font-size:13.5px;
line-height:1.75;
}
.oktsw .oktsw-price-case-card li::before {
content:"✓";
position:absolute;
left:0;
top:0;
color:#22806e;
font-weight:700;
}
.oktsw .oktsw-price-case-card .oktsw-price-case-note {
margin-top:16px;
padding-top:14px;
border-top:1px solid #e0ece9;
color:#6a7e7a;
font-size:11.5px;
}
@media (max-width:760px) {
.oktsw .oktsw-price-case-details { grid-template-columns:1fr; }
.oktsw .oktsw-price-case-card { padding:23px 21px; }
.oktsw .oktsw-koseki-hero .oktsw-hero-badge { padding:6px 12px !important; font-size:11px; }
}
/* =========================================================
v2.1.3 バッジ・料金ボックス・口コミ導線調整
========================================================= */
/* バッジは文字量ぴったりの幅に固定し、右側の余白を作らない */
.oktsw .oktsw-koseki-hero .oktsw-hero-badge {
display:inline-flex !important;
width:max-content !important;
min-width:0 !important;
max-width:max-content !important;
align-self:flex-start !important;
flex:0 0 auto !important;
padding:6px 11px !important;
white-space:nowrap;
letter-spacing:.045em;
}
/* 料金カードを内容に合う幅へ詰め、左右の余分な空白を抑える */
.oktsw .oktsw-koseki-price-grid {
grid-template-columns:repeat(2,minmax(0,390px));
justify-content:center;
gap:18px;
max-width:810px;
}
.oktsw .oktsw-koseki-price-card {
width:100%;
padding:30px 28px;
}
/* 詳細アンカーは廃止し、利用例をそのまま続けて読める構成 */
.oktsw .oktsw-price-case-heading {
max-width:900px;
margin:34px auto 0;
text-align:center;
}
.oktsw .oktsw-price-case-heading .oktsw-eyebrow { margin-bottom:7px; }
.oktsw .oktsw-price-case-heading h3 {
margin:0;
color:var(--oktsw-navy);
font-size:clamp(22px,2.3vw,30px);
line-height:1.55;
}
.oktsw .oktsw-price-case-heading>p:not(.oktsw-eyebrow) {
max-width:720px;
margin:10px auto 0;
color:var(--oktsw-muted);
font-size:13.5px;
line-height:1.85;
}
.oktsw .oktsw-price-case-details { margin-top:20px; max-width:900px; }
/* 口コミ件数と外部口コミへの導線 */
.oktsw .oktsw-google-reviews .oktsw-review-count-copy {
max-width:760px;
margin:12px auto 0 !important;
color:#3f5f78 !important;
font-size:14px !important;
line-height:1.85;
}
.oktsw .oktsw-google-reviews .oktsw-review-count-copy strong {
color:#176b87;
font-weight:800;
}
.oktsw .oktsw-review-link-buttons {
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:12px;
margin:4px auto 26px;
}
.oktsw .oktsw-review-link-button {
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-width:220px;
padding:12px 18px;
border:1px solid #c7dfe9;
border-radius:999px;
background:#fff;
color:#1b6176;
font-size:13px;
font-weight:700;
line-height:1.4;
box-shadow:0 7px 20px rgba(27,97,118,.07);
transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.oktsw .oktsw-review-link-button.is-google {
border-color:#9fcfc4;
color:#226f61;
}
.oktsw .oktsw-review-link-button:hover {
transform:translateY(-1px);
border-color:#7fb5c4;
box-shadow:0 10px 24px rgba(27,97,118,.11);
}
@media (max-width:760px) {
.oktsw .oktsw-koseki-price-grid { grid-template-columns:1fr; max-width:430px; gap:16px; }
.oktsw .oktsw-koseki-price-card { padding:26px 22px; }
.oktsw .oktsw-price-case-heading { margin-top:28px; }
.oktsw .oktsw-price-case-heading h3 { font-size:23px; }
.oktsw .oktsw-review-link-buttons { gap:9px; margin-bottom:22px; }
.oktsw .oktsw-review-link-button { width:100%; max-width:330px; min-width:0; }
}
/* =========================================================
v2.1.4 ヘッダー・FV見出し・サービス画像・事務所紹介調整
========================================================= */
/* ロゴ＋サイト名画像は一段大きくし、元画像の解像度を活かして表示 */
.oktsw .oktsw-brand-imageonly {
width:300px !important;
max-width:30vw !important;
min-width:230px !important;
}
.oktsw .oktsw-header-brand-image {
width:100% !important;
height:62px !important;
max-height:62px !important;
object-fit:contain !important;
object-position:left center !important;
image-rendering:auto;
}
/* ファーストビュー見出し：細めの明朝体で上品に */
.oktsw .oktsw-koseki-hero .oktsw-hero-copy h1 {
font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif !important;
font-weight:500 !important;
letter-spacing:.025em !important;
line-height:1.46 !important;
text-wrap:balance;
}
.oktsw .oktsw-koseki-hero .oktsw-hero-admin {
color:#237b6c;
font-weight:600;
}
/* サービス4項目：指定画像を同じ大きさ・同じ見せ方で使用 */
.oktsw .oktsw-service-card .oktsw-card-illustration {
width:112px;
height:112px;
margin:0 auto 20px;
border-radius:26px;
overflow:hidden;
background:#eef9f6;
box-shadow:0 8px 22px rgba(34,111,96,.08);
}
.oktsw .oktsw-service-card .oktsw-card-illustration img {
display:block;
width:100%;
height:100%;
object-fit:cover;
}
@media (max-width:1100px) {
.oktsw .oktsw-brand-imageonly { width:260px !important; max-width:36vw !important; min-width:205px !important; }
.oktsw .oktsw-header-brand-image { height:56px !important; max-height:56px !important; }
}
@media (max-width:640px) {
.oktsw .oktsw-brand-imageonly { width:196px !important; min-width:170px !important; max-width:57vw !important; }
.oktsw .oktsw-header-brand-image { height:48px !important; max-height:48px !important; }
.oktsw .oktsw-service-card .oktsw-card-illustration { width:96px; height:96px; margin-bottom:16px; border-radius:22px; }
.oktsw .oktsw-koseki-hero .oktsw-hero-copy h1 { font-weight:500 !important; letter-spacing:.018em !important; }
}
/* =========================================================
v2.1.5 コラム本文用 共通BOX・表デザイン
========================================================= */
.oktsw .oktsw-single-content .oktsw-article-box,
.oktsw .oktsw-single-content .oktsw-price-box,
.oktsw .oktsw-single-content .oktsw-law-box,
.oktsw .oktsw-single-content .oktsw-related-box,
.oktsw .oktsw-single-content .oktsw-reference-box {
margin:28px 0;
padding:22px 24px;
border:1px solid #d7e9e4;
border-radius:16px;
background:#f8fcfb;
box-shadow:0 6px 20px rgba(24,92,82,.05);
}
.oktsw .oktsw-single-content .oktsw-article-box {
border-left:5px solid #77b9aa;
}
.oktsw .oktsw-single-content .oktsw-price-box {
border:2px solid #83bdae;
background:linear-gradient(180deg,#f5fcfa,#fff);
}
.oktsw .oktsw-single-content .oktsw-price-box strong {
color:#1f7465;
}
.oktsw .oktsw-single-content .oktsw-law-box {
border:1px solid #cbddeb;
border-left:5px solid #4f83b3;
background:linear-gradient(180deg,#f5f9fd,#fff);
}
.oktsw .oktsw-single-content .oktsw-law-box .oktsw-law-title {
margin:0 0 10px;
color:#245b8d;
font-weight:800;
font-size:16px;
}
.oktsw .oktsw-single-content .oktsw-law-box blockquote {
margin:12px 0;
padding:14px 16px;
border-left:3px solid #9ebbd5;
border-radius:8px;
background:#fff;
color:#38566f;
font-size:14px;
line-height:1.9;
}
.oktsw .oktsw-single-content .oktsw-law-box .oktsw-law-note {
margin-top:10px;
color:#526c82;
font-size:14px;
}
.oktsw .oktsw-single-content .oktsw-related-box {
background:#f5f9fd;
border-color:#d7e5f1;
}
.oktsw .oktsw-single-content .oktsw-reference-box {
background:#fbfbfb;
border-color:#e1e6ea;
}
/* v2.1.12: 参考リンクは「・」とリンク文字を同一段落内に固定 */
.oktsw .oktsw-single-content .oktsw-reference-box p {
display:block !important;
margin:.65em 0 !important;
padding:0 !important;
}
.oktsw .oktsw-single-content .oktsw-reference-box p > a {
display:inline !important;
margin:0 !important;
padding:0 !important;
}
.oktsw .oktsw-single-content .oktsw-article-box > :first-child,
.oktsw .oktsw-single-content .oktsw-price-box > :first-child,
.oktsw .oktsw-single-content .oktsw-law-box > :first-child,
.oktsw .oktsw-single-content .oktsw-related-box > :first-child,
.oktsw .oktsw-single-content .oktsw-reference-box > :first-child {
margin-top:0;
}
.oktsw .oktsw-single-content .oktsw-article-box > :last-child,
.oktsw .oktsw-single-content .oktsw-price-box > :last-child,
.oktsw .oktsw-single-content .oktsw-law-box > :last-child,
.oktsw .oktsw-single-content .oktsw-related-box > :last-child,
.oktsw .oktsw-single-content .oktsw-reference-box > :last-child {
margin-bottom:0;
}
.oktsw .oktsw-single-content .oktsw-related-box ul,
.oktsw .oktsw-single-content .oktsw-reference-box ul {
margin:12px 0 0;
padding-left:1.25em;
}
.oktsw .oktsw-single-content .oktsw-related-box li,
.oktsw .oktsw-single-content .oktsw-reference-box li {
margin:.55em 0;
}
.oktsw .oktsw-single-content table.oktsw-data-table {
display:table;
width:100%;
border-collapse:separate;
border-spacing:0;
overflow:hidden;
border:1px solid #d8e5e2;
border-radius:12px;
background:#fff;
}
.oktsw .oktsw-single-content table.oktsw-data-table th {
background:#edf7f4;
color:#285f56;
font-weight:700;
}
.oktsw .oktsw-single-content table.oktsw-data-table th,
.oktsw .oktsw-single-content table.oktsw-data-table td {
padding:13px 14px;
border:0;
border-right:1px solid #e2ece9;
border-bottom:1px solid #e2ece9;
vertical-align:top;
}
.oktsw .oktsw-single-content table.oktsw-data-table tr:last-child > * { border-bottom:0; }
.oktsw .oktsw-single-content table.oktsw-data-table tr > *:last-child { border-right:0; }
@media (max-width:640px) {
.oktsw .oktsw-single-content .oktsw-article-box,
.oktsw .oktsw-single-content .oktsw-price-box,
.oktsw .oktsw-single-content .oktsw-law-box,
.oktsw .oktsw-single-content .oktsw-related-box,
.oktsw .oktsw-single-content .oktsw-reference-box { padding:18px 17px; border-radius:13px; }
.oktsw .oktsw-single-content table.oktsw-data-table { display:block; overflow-x:auto; }
}
/* 2.1.17 記事用：料金・問い合わせCTAボタン */
/* 記事本文内のCTAは、単独表示でも中央寄せ＋本文との上下余白を確保する。 */
.oktsw .oktsw-single-content a.oktsw-btn {
display:flex;
width:fit-content;
max-width:100%;
margin-top:24px;
margin-bottom:24px;
margin-left:auto;
margin-right:auto;
}
/* ラッパーを付け忘れた連続ボタンも、ボタン同士が詰まらないよう広めに離す。 */
.oktsw .oktsw-single-content a.oktsw-btn + a.oktsw-btn {
margin-top:24px;
}
.oktsw .oktsw-single-content .oktsw-article-actions {
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
column-gap:20px;
row-gap:24px;
margin:32px 0;
text-align:center;
}
/* wpautop等でCTA内に空段落・改行が入っても、ボタン間に余計な空白を作らない。 */
.oktsw .oktsw-single-content .oktsw-article-actions > p {
margin:0 !important;
padding:0 !important;
}
.oktsw .oktsw-single-content .oktsw-article-actions > br {
display:none !important;
}
.oktsw .oktsw-single-content .oktsw-article-actions .oktsw-btn {
display:flex !important;
align-items:center !important;
justify-content:center !important;
align-self:center;
box-sizing:border-box;
min-width:210px;
min-height:48px;
margin:0 !important;
padding:12px 22px;
text-align:center;
text-decoration:none !important;
line-height:1.5;
vertical-align:middle;
transform:none !important;
position:relative;
top:auto;
bottom:auto;
}
.oktsw .oktsw-single-content .oktsw-price-box .oktsw-article-actions {
margin-top:28px;
margin-bottom:8px;
}
/* 2.1.14 記事用FAQ：クリック／タップで回答を開閉 */
.oktsw .oktsw-single-content .oktsw-article-faq {
margin:28px 0;
}
.oktsw .oktsw-single-content .oktsw-article-faq details {
margin:0 0 12px;
border:1px solid #d8e7e3;
border-radius:13px;
background:#fff;
overflow:hidden;
box-shadow:0 4px 14px rgba(24,92,82,.04);
}
.oktsw .oktsw-single-content .oktsw-article-faq details:last-child {
margin-bottom:0;
}
.oktsw .oktsw-single-content .oktsw-article-faq summary {
position:relative;
display:block;
padding:16px 50px 16px 18px;
color:#214e49;
font-weight:700;
line-height:1.75;
cursor:pointer;
list-style:none;
background:#f8fcfb;
}
.oktsw .oktsw-single-content .oktsw-article-faq summary::-webkit-details-marker {
display:none;
}
.oktsw .oktsw-single-content .oktsw-article-faq summary::after {
content:"＋";
position:absolute;
top:50%;
right:18px;
transform:translateY(-50%);
color:#397f73;
font-size:22px;
font-weight:500;
line-height:1;
}
.oktsw .oktsw-single-content .oktsw-article-faq details[open] > summary::after {
content:"−";
}
.oktsw .oktsw-single-content .oktsw-article-faq-answer {
padding:16px 18px 18px;
color:#4b6260;
line-height:1.9;
border-top:1px solid #e5efec;
}
.oktsw .oktsw-single-content .oktsw-article-faq-answer > :first-child { margin-top:0; }
.oktsw .oktsw-single-content .oktsw-article-faq-answer > :last-child { margin-bottom:0; }
@media (max-width:640px) {
.oktsw .oktsw-single-content a.oktsw-btn + a.oktsw-btn {
margin-top:20px;
}
.oktsw .oktsw-single-content .oktsw-article-actions {
display:grid;
grid-template-columns:1fr;
gap:20px;
margin:30px 0;
}
.oktsw .oktsw-single-content .oktsw-article-actions > p {
margin:0 !important;
}
.oktsw .oktsw-single-content .oktsw-article-actions .oktsw-btn {
width:100%;
min-width:0;
white-space:normal;
}
.oktsw .oktsw-single-content .oktsw-article-faq summary {
padding:15px 46px 15px 15px;
font-size:14px;
}
.oktsw .oktsw-single-content .oktsw-article-faq summary::after {
right:15px;
}
.oktsw .oktsw-single-content .oktsw-article-faq-answer {
padding:15px;
font-size:14px;
}
}
/* 2.1.6 スマホ専用アピールエリア差し替え */
.oktsw .oktsw-mobile-hero-image { display:none; }
.oktsw .oktsw-mobile-hero-image img {
display:block;
width:100%;
height:auto;
}
@media (max-width:820px) {
.oktsw .oktsw-mobile-hero-image {
display:block;
width:100%;
max-width:100%;
background:#ffffff;
}
.oktsw .oktsw-hero .oktsw-hero-grid {
display:none !important;
}
.oktsw .oktsw-hero {
padding:0 !important;
background:#fff !important;
}
}
/* 2.1.7 スマホのアピールエリア：装飾用の緑色ぼかしを非表示 */
@media (max-width:820px) {
.oktsw--koseki .oktsw-koseki-hero::after,
.oktsw .oktsw-koseki-hero::after {
content:none !important;
display:none !important;
background:none !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
}
}
/* 2.1.8 記事用：目次・公式書式ダウンロード */
.oktsw .oktsw-single-content .oktsw-toc-box,
.oktsw .oktsw-single-content .oktsw-download-box {
margin:30px 0;
padding:22px 24px;
border:1px solid #d7e5df;
border-radius:14px;
background:#f7fbf9;
box-shadow:0 8px 24px rgba(30,91,69,.05);
}
.oktsw .oktsw-single-content .oktsw-toc-box > :first-child,
.oktsw .oktsw-single-content .oktsw-download-box > :first-child { margin-top:0; }
.oktsw .oktsw-single-content .oktsw-toc-box > :last-child,
.oktsw .oktsw-single-content .oktsw-download-box > :last-child { margin-bottom:0; }
.oktsw .oktsw-single-content .oktsw-toc-box h2,
.oktsw .oktsw-single-content .oktsw-toc-box h3,
.oktsw .oktsw-single-content .oktsw-download-box h2,
.oktsw .oktsw-single-content .oktsw-download-box h3 {
margin:0 0 14px;
padding:0;
border:0;
font-size:20px;
color:#1f4f3e;
}
.oktsw .oktsw-single-content .oktsw-toc-box ol,
.oktsw .oktsw-single-content .oktsw-toc-box ul { margin:0; padding-left:1.45em; }
.oktsw .oktsw-single-content .oktsw-toc-box li { margin:7px 0; line-height:1.7; }
.oktsw .oktsw-single-content .oktsw-toc-box a {
color:#245f4c !important;
-webkit-text-fill-color:#245f4c !important;
font-weight:700;
text-decoration:none !important;
}
.oktsw .oktsw-single-content .oktsw-toc-box a:hover { text-decoration:underline !important; text-underline-offset:3px; }
.oktsw .oktsw-single-content .oktsw-download-box { background:#fff; border-color:#cfe0eb; }
.oktsw .oktsw-single-content .oktsw-download-list { display:grid; gap:10px; margin:16px 0 0; padding:0; list-style:none; }
.oktsw .oktsw-single-content .oktsw-download-list li { margin:0; }
.oktsw .oktsw-single-content .oktsw-download-box a.oktsw-download-link {
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:13px 15px;
border:1px solid #cfe0eb;
border-radius:10px;
background:#f7fafc;
color:#17639a !important;
-webkit-text-fill-color:#17639a !important;
font-weight:700;
text-decoration:none !important;
}
.oktsw .oktsw-single-content .oktsw-download-box a.oktsw-download-link:hover { background:#eef6fb; border-color:#a9c9df; }
.oktsw .oktsw-single-content .oktsw-download-meta { display:block; margin-top:5px; color:#687f91; font-size:12px; font-weight:400; }
@media (max-width:600px) {
.oktsw .oktsw-single-content .oktsw-toc-box,
.oktsw .oktsw-single-content .oktsw-download-box { padding:18px 17px; border-radius:12px; }
.oktsw .oktsw-single-content .oktsw-toc-box h2,
.oktsw .oktsw-single-content .oktsw-toc-box h3,
.oktsw .oktsw-single-content .oktsw-download-box h2,
.oktsw .oktsw-single-content .oktsw-download-box h3 { font-size:18px; }
}