/* 通報文書サポートLP — 写真とHTMLを分離したレイアウト */
body.oktsuho-page { margin:0; padding:0; background:#fff; }
.oktsuho {
--oktsuho-blue:#145bcc; --oktsuho-navy:#123d78; --oktsuho-ink:#173558;
--oktsuho-muted:#526b87; --oktsuho-line:#dfebf6; --oktsuho-soft:#f2f8fd;
--oktsuho-deep:#183b62; --oktsuho-header-offset:126px;
--oktsuho-font:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
color:var(--oktsuho-ink); background:#fff; font-family:var(--oktsuho-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%;
}
.oktsuho *, .oktsuho *::before, .oktsuho *::after { box-sizing:border-box; }
.oktsuho [hidden] { display:none !important; }
.oktsuho h1, .oktsuho h2, .oktsuho h3, .oktsuho h4 {
font-family:var(--oktsuho-font); color:var(--oktsuho-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;
}
.oktsuho h1::before, .oktsuho h1::after, .oktsuho h2::before, .oktsuho h2::after, .oktsuho h3::before, .oktsuho h3::after { content:none; }
.oktsuho h1 { font-size:38px; }
.oktsuho h2 { font-size:30px; }
.oktsuho h3 { font-size:18px; }
.oktsuho p, .oktsuho figure, .oktsuho dl, .oktsuho dd { margin:0; padding:0; }
.oktsuho p { overflow-wrap:anywhere; word-break:normal; }
.oktsuho img { display:block; max-width:100%; border:0; box-shadow:none; }
.oktsuho a { color:inherit; text-decoration:none; }
.oktsuho a:focus-visible, .oktsuho button:focus-visible, .oktsuho summary:focus-visible, .oktsuho input:focus-visible, .oktsuho textarea:focus-visible { outline:3px solid #5997eb; outline-offset:4px; }
.oktsuho button, .oktsuho input, .oktsuho textarea { font:inherit; letter-spacing:inherit; }
.oktsuho button, .oktsuho summary { -webkit-tap-highlight-color:transparent; }
.oktsuho button { cursor:pointer; }
.oktsuho svg { display:block; }
.oktsuho .oktsuho-icon { width:32px; height:32px; flex:none; }
.oktsuho .oktsuho-container { width:calc(100% - 64px); max-width:1200px; margin-inline:auto; }
.oktsuho .oktsuho-container-narrow { max-width:900px; }
.oktsuho section[id], .oktsuho main[id], .oktsuho [id="oktsuho-line-info"] { scroll-margin-top:var(--oktsuho-header-offset); }
.oktsuho .oktsuho-skip { position:absolute; left:20px; top:-100px; z-index:1000; background:#fff; padding:10px 20px; border:2px solid var(--oktsuho-blue); }
.oktsuho .oktsuho-skip:focus { top:12px; }
/* ヘッダー：上段キャッチコピー／下段ロゴ・メニュー・小型CTA */
.oktsuho .oktsuho-header { position:sticky; top:0; z-index:90; background:rgba(255,255,255,.98); box-shadow:0 1px 0 var(--oktsuho-line); }
.admin-bar .oktsuho .oktsuho-header { top:var(--wp-admin--admin-bar--height,32px); }
.oktsuho .oktsuho-header-top { background:#f0f6fc; border-bottom:1px solid #e6eff7; }
.oktsuho .oktsuho-header-top p { padding:5px 0; color:#48698e; font-size:11px; line-height:1.6; letter-spacing:.04em; }
.oktsuho .oktsuho-header-main { display:flex; align-items:center; gap:24px; min-height:78px; padding-block:12px; }
.oktsuho .oktsuho-brand { display:inline-flex; align-items:center; gap:10px; flex:none; min-width:0; }
.oktsuho .oktsuho-logo { width:38px; height:38px; object-fit:contain; flex:none; }
.oktsuho .oktsuho-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; }
.oktsuho .oktsuho-brandtext { color:var(--oktsuho-navy); font-size:21px; font-weight:700; line-height:1.2; white-space:nowrap; letter-spacing:-.02em; }
.oktsuho .oktsuho-menu { display:flex; gap:20px; align-items:center; justify-content:center; flex:1; margin:0; min-width:0; }
.oktsuho .oktsuho-menu a { color:#315276; font-size:12px; font-weight:700; white-space:nowrap; padding:8px 0; position:relative; }
.oktsuho .oktsuho-menu a:hover { color:var(--oktsuho-blue); }
.oktsuho .oktsuho-menu a::after { content:""; position:absolute; bottom:0; left:0; width:100%; height:2px; background:currentColor; transform:scaleX(0); transition:transform .15s; }
.oktsuho .oktsuho-menu a:hover::after { transform:scaleX(1); }
.oktsuho .oktsuho-menu-toggle { display:none; align-items:center; justify-content:center; gap:6px; flex-direction:column; border:1px solid var(--oktsuho-line); border-radius:8px; background:#fff; color:var(--oktsuho-navy); padding:7px 9px; line-height:1; min-height:44px; }
.oktsuho .oktsuho-menu-label { font-size:9px; }
.oktsuho .oktsuho-menu-bars, .oktsuho .oktsuho-menu-bars::before, .oktsuho .oktsuho-menu-bars::after { display:block; width:18px; height:2px; background:currentColor; transition:transform .15s; }
.oktsuho .oktsuho-menu-bars { position:relative; margin:5px 0; }
.oktsuho .oktsuho-menu-bars::before, .oktsuho .oktsuho-menu-bars::after { content:""; position:absolute; left:0; }
.oktsuho .oktsuho-menu-bars::before { top:-5px; }
.oktsuho .oktsuho-menu-bars::after { top:5px; }
.oktsuho .oktsuho-menu-toggle[aria-expanded="true"] .oktsuho-menu-bars { background:transparent; }
.oktsuho .oktsuho-menu-toggle[aria-expanded="true"] .oktsuho-menu-bars::before { top:0; transform:rotate(45deg); }
.oktsuho .oktsuho-menu-toggle[aria-expanded="true"] .oktsuho-menu-bars::after { top:0; transform:rotate(-45deg); }
/* CTAは同じ幅・高さ。無料相談とLINEは別々のリンク先。 */
.oktsuho .oktsuho-actions { display:flex; align-items:stretch; gap:12px; flex-wrap:wrap; }
.oktsuho .oktsuho-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(--oktsuho-font); letter-spacing:.015em; text-decoration:none; box-shadow:none; white-space:nowrap; transition:background .15s,box-shadow .15s; }
.oktsuho .oktsuho-btn span { display:inline-block; }
.oktsuho .oktsuho-btn-primary { color:#fff; background:linear-gradient(105deg,#2473e4,#124fae); box-shadow:0 6px 18px rgba(19,88,178,.13); }
.oktsuho .oktsuho-btn-primary:hover { color:#fff; background:#104d9f; box-shadow:0 7px 20px rgba(19,88,178,.2); }
.oktsuho .oktsuho-btn-line { color:#fff; background:var(--oktsuho-deep); border-color:var(--oktsuho-deep); }
.oktsuho .oktsuho-btn-line:hover { color:#fff; background:#183b62; border-color:#183b62; }
.oktsuho .oktsuho-btn-outline { color:var(--oktsuho-blue); background:#fff; border-color:#c6daf0; }
.oktsuho .oktsuho-actions-header { flex:none; flex-wrap:nowrap; gap:8px; }
.oktsuho .oktsuho-actions-header .oktsuho-btn { font-size:11px; min-height:38px; padding:8px 11px; width:132px; gap:6px; }
.oktsuho .oktsuho-actions-hero .oktsuho-btn, .oktsuho .oktsuho-actions-onblue .oktsuho-btn { width:184px; }
.oktsuho .oktsuho-small-note { color:var(--oktsuho-muted); font-size:12px; margin-top:12px; }
/* アピール：写真2は右側の台形レイアウトで表示 */
.oktsuho .oktsuho-hero { background:linear-gradient(112deg,#fff 12%,#f1f7fe 100%); border-bottom:1px solid #eaf2fa; overflow:hidden; }
.oktsuho .oktsuho-hero-grid { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:center; gap:48px; padding-block:64px; }
.oktsuho .oktsuho-hero-copy, .oktsuho .oktsuho-hero-visual { min-width:0; }
.oktsuho .oktsuho-hero-visual { position:relative; display:flex; align-items:stretch; justify-content:flex-end; align-self:stretch; min-height:430px; }
.oktsuho .oktsuho-eyebrow { color:var(--oktsuho-blue); font-size:12px; font-weight:700; line-height:1.6; letter-spacing:.08em; margin-bottom:14px; }
.oktsuho .oktsuho-hero h1 { font-size:clamp(29px,3vw,40px); line-height:1.45; letter-spacing:.015em; margin-bottom:22px; overflow-wrap:break-word; }
.oktsuho .oktsuho-hero-description { color:#4b6583; font-size:16px; line-height:1.95; max-width:570px; }
.oktsuho .oktsuho-hero-offer { margin:24px 0; border-left:3px solid #4388df; padding:1px 0 1px 16px; }
.oktsuho .oktsuho-hero-offer>p { font-size:13px; font-weight:700; color:var(--oktsuho-navy); margin-bottom:3px; }
.oktsuho .oktsuho-hero-offer>div { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.oktsuho .oktsuho-hero-offer strong { font-size:35px; line-height:1.3; font-weight:700; color:var(--oktsuho-blue); letter-spacing:-.02em; }
.oktsuho .oktsuho-hero-offer span { font-size:12px; color:#536e8a; }
.oktsuho .oktsuho-hero-offer .oktsuho-offer-label { color:#4e6c8d; font-size:11px; background:#eaf3fd; padding:3px 8px; border-radius:4px; }
/* 写真2 / 写真3：文字を画像の上に置かない */
.oktsuho .oktsuho-photo { width:100%; margin:0; position:relative; border-radius:18px; min-width:0; }
.oktsuho .oktsuho-photo.has-image { overflow:hidden; }
.oktsuho .oktsuho-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; }
.oktsuho .oktsuho-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%); }
.oktsuho .oktsuho-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%); }
.oktsuho .oktsuho-photo--2 .oktsuho-slot-image { width:100%; height:100%; max-height:none; min-width:0; object-fit:cover; object-position:center center; }
.oktsuho .oktsuho-photo--2.oktsuho-fit-contain .oktsuho-slot-image { object-fit:contain; object-position:center right; background:transparent; }
.oktsuho .oktsuho-photo--2.is-placeholder { border:none; background:linear-gradient(135deg,#faf2dd 0%,#faf2dd 100%); clip-path:polygon(26% 0,100% 0,100% 100%,0 100%); }
.oktsuho .oktsuho-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%); }
.oktsuho .oktsuho-photo--3 { aspect-ratio:16 / 11; }
.oktsuho .oktsuho-photo .oktsuho-slot-image { width:100%; height:100%; max-height:none; min-width:0; object-fit:contain; }
.oktsuho .oktsuho-fit-cover .oktsuho-slot-image { object-fit:cover; }
.oktsuho .oktsuho-photo.is-placeholder { border:1px dashed #b4cde5; background:linear-gradient(135deg,#fafdff,#e7f0fa); }
.oktsuho .oktsuho-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; }
.oktsuho .oktsuho-photo-placeholder .oktsuho-icon { width:48px; height:48px; stroke-width:1.25; color:#87a8cb; margin-bottom:8px; }
.oktsuho .oktsuho-photo-placeholder strong { font-size:18px; font-weight:600; letter-spacing:.04em; }
.oktsuho .oktsuho-photo-placeholder span { font-size:12px; }
.oktsuho .oktsuho-photo--2.is-placeholder .oktsuho-photo-placeholder { color:#fff; z-index:2; }
.oktsuho .oktsuho-photo--2.is-placeholder .oktsuho-photo-placeholder .oktsuho-icon { color:#ffd4d0; }
.oktsuho .oktsuho-photo.oktsuho-photo--2.is-placeholder { border:none; background:linear-gradient(135deg,#faf2dd 0%,#faf2dd 100%); }
/* サービスカード：中央アイコン、控えめな文字サイズ */
.oktsuho .oktsuho-section { padding:76px 0; }
.oktsuho .oktsuho-heading { margin-bottom:34px; text-align:center; }
.oktsuho .oktsuho-heading .oktsuho-eyebrow { font-size:11px; letter-spacing:.16em; margin-bottom:10px; }
.oktsuho .oktsuho-heading h2, .oktsuho .oktsuho-heading h1 { font-size:30px; line-height:1.6; }
.oktsuho .oktsuho-heading h2 span { display:inline-block; }
.oktsuho .oktsuho-heading>p:not(.oktsuho-eyebrow) { font-size:15px; color:var(--oktsuho-muted); margin:12px auto 0; max-width:800px; }
.oktsuho .oktsuho-services { background:#f2f8fd; }
.oktsuho .oktsuho-service-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.oktsuho .oktsuho-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; }
.oktsuho .oktsuho-card-icon { width:62px; height:62px; display:grid; place-items:center; margin:0 auto 18px; border-radius:17px; background:#eff6ff; color:#2f7ce3; }
.oktsuho .oktsuho-card-icon .oktsuho-icon { width:36px; height:36px; }
.oktsuho .oktsuho-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; }
.oktsuho .oktsuho-service-card p { font-size:14px; color:#526a86; line-height:1.95; text-align:left; }
/* パソコン紹介：2行を保ち、画像と干渉しない。 */
.oktsuho .oktsuho-band { background:linear-gradient(110deg,#0c3975,#0959b6); color:#fff; }
.oktsuho .oktsuho-band-grid { display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:56px; align-items:center; padding-block:56px; }
.oktsuho .oktsuho-band-visual, .oktsuho .oktsuho-band-copy { min-width:0; }
.oktsuho .oktsuho-band .oktsuho-photo.is-placeholder { background:rgba(255,255,255,.055); border-color:rgba(221,237,255,.38); }
.oktsuho .oktsuho-band .oktsuho-photo-placeholder, .oktsuho .oktsuho-band .oktsuho-photo-placeholder .oktsuho-icon { color:#c7def7; }
.oktsuho .oktsuho-band .oktsuho-eyebrow { color:#b4d7ff; font-size:11px; letter-spacing:.11em; margin-bottom:16px; }
.oktsuho .oktsuho-band h2 { font-size:clamp(22px,2.5vw,32px); color:#fff; line-height:1.7; letter-spacing:.01em; }
.oktsuho .oktsuho-band h2 span { display:block; white-space:nowrap; }
.oktsuho .oktsuho-band-copy>p:not(.oktsuho-eyebrow) { margin-top:18px; color:#e1ecfa; font-size:15px; line-height:1.95; }
.oktsuho .oktsuho-actions-onblue { margin-top:26px; }
.oktsuho .oktsuho-actions-onblue .oktsuho-btn-primary { background:#fff; color:#0d4186; box-shadow:none; }
.oktsuho .oktsuho-actions-onblue .oktsuho-btn-primary:hover { background:#ebf3ff; }
/* 実績は管理者が入力・公開指定した場合だけ表示 */
.oktsuho .oktsuho-stats { padding:28px 0; border-bottom:1px solid var(--oktsuho-line); background:#fff; }
.oktsuho .oktsuho-stats-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.oktsuho .oktsuho-stats-grid>div { flex:1; min-width:0; text-align:center; padding:0 24px; }
.oktsuho .oktsuho-stats-grid>div+div { border-left:1px solid var(--oktsuho-line); }
.oktsuho .oktsuho-stats-grid span { display:block; font-size:13px; font-weight:700; }
.oktsuho .oktsuho-stats-grid strong { display:block; color:var(--oktsuho-blue); font-size:38px; line-height:1.45; overflow-wrap:anywhere; }
.oktsuho .oktsuho-stats .oktsuho-small-note { text-align:center; }
/* 料金表：既存プランの範囲と実費・追加費用の案内を復元 */
.oktsuho .oktsuho-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; }
.oktsuho .oktsuho-price-head { grid-column:1 / -1; padding:22px 24px; background:var(--oktsuho-blue); text-align:center; }
.oktsuho .oktsuho-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; }
.oktsuho .oktsuho-price-head h3 { margin:0; color:#fff !important; -webkit-text-fill-color:#fff !important; font-size:24px; font-weight:700; line-height:1.5; }
.oktsuho .oktsuho-price-main { padding:30px; background:#f1f7fe; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.oktsuho .oktsuho-price-tag { display:inline-block; border-radius:4px; background:#e0edfd; color:#2866b7; font-size:11px; font-weight:700; padding:3px 14px; margin-bottom:14px; }
.oktsuho .oktsuho-price-main h3 { font-size:19px; line-height:1.8; }
.oktsuho .oktsuho-price-amount { display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:12px; }
.oktsuho .oktsuho-price-amount strong { color:var(--oktsuho-blue); font-size:44px; line-height:1.4; font-weight:700; letter-spacing:-.02em; }
.oktsuho .oktsuho-price-amount span { font-size:12px; color:#517197; }
.oktsuho .oktsuho-price-detail { padding:32px 38px; min-width:0; }
.oktsuho .oktsuho-price-detail h3 { font-size:16px; margin-bottom:16px; }
.oktsuho .oktsuho-checklist { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px; list-style:none; padding:0; margin:0; }
.oktsuho .oktsuho-checklist li { display:flex; gap:8px; align-items:flex-start; margin:0; font-size:13px; line-height:1.8; color:#3d5b7d; }
.oktsuho .oktsuho-checklist .oktsuho-icon { width:17px; height:17px; margin-top:3px; color:#2a74cf; }
.oktsuho .oktsuho-price-note { margin-top:22px; padding-top:18px; border-top:1px solid var(--oktsuho-line); font-size:12px; color:var(--oktsuho-muted); line-height:1.9; }
/* お客様の声：実際の写真とテキストは別々に管理 */
.oktsuho .oktsuho-voices-section { background:#f2f8fd; }
.oktsuho .oktsuho-voice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.oktsuho .oktsuho-voice-card { min-width:0; display:flex; flex-direction:column; padding:28px; background:#fff; border:1px solid var(--oktsuho-line); border-radius:16px; }
.oktsuho .oktsuho-voice-head { display:flex; gap:16px; align-items:center; margin-bottom:20px; }
.oktsuho .oktsuho-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; }
.oktsuho .oktsuho-avatar img { width:100%; height:100%; object-fit:cover; }
.oktsuho .oktsuho-avatar .oktsuho-icon { width:34px; height:34px; }
.oktsuho .oktsuho-voice-head h3 { font-size:16px; line-height:1.75; overflow-wrap:anywhere; }
.oktsuho .oktsuho-voice-card>p { font-size:14px; color:var(--oktsuho-muted); line-height:1.95; }
.oktsuho .oktsuho-voice-meta { margin-top:auto; padding-top:22px; font-size:12px; font-weight:700; color:#42698f; }
.oktsuho .oktsuho-voice-card.is-pending { min-height:212px; }
/* コラムは単体ショートコードでもJSなしで表示 */
.oktsuho.oktsuho-columns-embed { background:transparent; padding:12px 0; }
.oktsuho .oktsuho-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.oktsuho .oktsuho-column-card { min-width:0; border:1px solid var(--oktsuho-line); border-radius:14px; background:#fff; overflow:hidden; display:flex; flex-direction:column; }
.oktsuho .oktsuho-column-thumb { display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:300/170; background:#fff; overflow:hidden; padding:0; }
.oktsuho .oktsuho-column-thumb img,
.oktsuho .oktsuho-column-thumb .oktsuho-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;
}
.oktsuho .oktsuho-column-noimage { width:100%; height:100%; min-height:150px; display:grid; place-items:center; color:#9cbbdd; }
.oktsuho .oktsuho-column-noimage .oktsuho-icon { width:42px; height:42px; }
.oktsuho .oktsuho-column-body { padding:22px; display:flex; flex-direction:column; flex:1; }
.oktsuho .oktsuho-column-body time { font-size:12px; color:#6c849f; margin-bottom:9px; }
.oktsuho .oktsuho-column-body h3 { font-size:17px; line-height:1.7; margin-bottom:12px; overflow-wrap:anywhere; }
.oktsuho .oktsuho-column-body>p { font-size:14px; color:var(--oktsuho-muted); }
.oktsuho .oktsuho-column-body .oktsuho-textlink { margin-top:auto; padding-top:16px; }
.oktsuho .oktsuho-textlink { color:var(--oktsuho-blue); font-size:13px; font-weight:700; }
.oktsuho .oktsuho-textlink:hover { text-decoration:underline; }
.oktsuho .oktsuho-empty { grid-column:1/-1; text-align:center; width:100%; border:1px solid var(--oktsuho-line); border-radius:14px; background:#fafcfe; padding:32px 20px; color:var(--oktsuho-muted); }
.oktsuho .oktsuho-empty .oktsuho-icon { margin:0 auto 14px; color:#8daed1; }
.oktsuho .oktsuho-empty h3 { font-size:17px; margin-bottom:8px; }
.oktsuho .oktsuho-empty p { font-size:14px; }
.oktsuho .oktsuho-section-link { text-align:center; margin-top:28px; }
/* FAQ */
.oktsuho .oktsuho-faq-section { padding-top:76px; }
.oktsuho .oktsuho-faq-list { border-top:1px solid var(--oktsuho-line); }
.oktsuho .oktsuho-faq-list details { border-bottom:1px solid var(--oktsuho-line); }
.oktsuho .oktsuho-faq-list summary { padding:20px 38px 20px 0; position:relative; font-size:15px; line-height:1.8; font-weight:600; color:var(--oktsuho-navy); cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:15px; }
.oktsuho .oktsuho-faq-list summary::-webkit-details-marker { display:none; }
.oktsuho .oktsuho-faq-list summary>span { color:#3075c6; flex:none; font-size:17px; }
.oktsuho .oktsuho-faq-list summary::after { content:"＋"; position:absolute; right:4px; top:20px; font-weight:400; color:#5d83b0; }
.oktsuho .oktsuho-faq-list details[open]>summary::after { content:"−"; }
.oktsuho .oktsuho-faq-list details>div { padding:0 28px 24px 33px; color:var(--oktsuho-muted); font-size:14px; }
/* 下部CTAにも文字入り背景は使用しない */
.oktsuho .oktsuho-bottom-cta { padding:48px 0; background:linear-gradient(110deg,#eaf4ff,#f4f9ff); border-block:1px solid #e1edf9; }
.oktsuho .oktsuho-bottom-grid { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:44px; }
.oktsuho .oktsuho-bottom-grid h2 { font-size:26px; line-height:1.65; }
.oktsuho .oktsuho-bottom-grid .oktsuho-eyebrow { font-size:11px; margin-bottom:10px; }
.oktsuho .oktsuho-bottom-grid p:not(.oktsuho-eyebrow) { margin-top:13px; font-size:13px; color:var(--oktsuho-muted); }
.oktsuho .oktsuho-actions-bottom .oktsuho-btn { width:184px; }
/* 問い合わせ */
.oktsuho .oktsuho-contact-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:70px; align-items:start; }
.oktsuho .oktsuho-contact-copy h2 { font-size:30px; margin-bottom:18px; }
.oktsuho .oktsuho-contact-copy>p:not(.oktsuho-eyebrow) { font-size:15px; color:var(--oktsuho-muted); }
.oktsuho .oktsuho-office-details { margin:30px 0; font-size:13px; }
.oktsuho .oktsuho-office-details>div { display:grid; grid-template-columns:60px minmax(0,1fr); padding:10px 0; border-bottom:1px solid var(--oktsuho-line); gap:12px; }
.oktsuho .oktsuho-office-details dt { color:#7188a0; font-weight:500; }
.oktsuho .oktsuho-office-details dd { color:#365879; overflow-wrap:anywhere; }
.oktsuho .oktsuho-line-info { background:#fffaee; padding:22px; border:1px solid #faf2dd; border-radius:12px; }
.oktsuho .oktsuho-line-info h3 { font-size:16px; color:#183b62; margin-bottom:8px; }
.oktsuho .oktsuho-line-info p { font-size:13px; color:#183b62; }
.oktsuho .oktsuho-line-info .oktsuho-btn { margin-top:16px; font-size:13px; }
.oktsuho .oktsuho-form-panel { min-width:0; border:1px solid var(--oktsuho-line); border-radius:18px; padding:32px; box-shadow:0 8px 28px rgba(42,85,128,.045); }
.oktsuho .oktsuho-form { margin:0; position:relative; }
.oktsuho .oktsuho-field { margin-bottom:20px; }
.oktsuho .oktsuho-field>label { display:flex; gap:10px; align-items:center; font-size:13px; font-weight:700; margin-bottom:8px; color:#375779; }
.oktsuho .oktsuho-inquiry-field { border:0; padding:0; min-width:0; margin:0; }
.oktsuho .oktsuho-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; }
.oktsuho .oktsuho-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; }
.oktsuho .oktsuho-inquiry-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.oktsuho .oktsuho-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; }
.oktsuho .oktsuho-inquiry-option:hover { border-color:#8eb2d8; background:#fbfdff; }
.oktsuho .oktsuho-inquiry-option:focus-within { border-color:var(--oktsuho-blue); box-shadow:0 0 0 3px rgba(47,111,176,.12); }
.oktsuho .oktsuho-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; }
.oktsuho .oktsuho-inquiry-option input:checked { background:var(--oktsuho-blue); border-color:var(--oktsuho-blue); box-shadow:inset 0 0 0 3px #fff; }
.oktsuho .oktsuho-inquiry-option:has(input:checked) { border-color:var(--oktsuho-blue); background:#f4f9ff; box-shadow:0 6px 18px rgba(47,111,176,.08); }
.oktsuho .oktsuho-inquiry-copy { display:block; min-width:0; line-height:1.55; }
.oktsuho .oktsuho-inquiry-copy strong { display:block; font-size:15px; line-height:1.5; color:#274c71; font-weight:700; }
.oktsuho .oktsuho-inquiry-copy small { display:block; margin-top:6px; font-size:12px; line-height:1.6; color:#6e849b; font-weight:600; }
.oktsuho .oktsuho-other-detail { margin-top:4px; }
.oktsuho .oktsuho-other-detail[hidden] { display:none !important; }
.oktsuho .oktsuho-required, .oktsuho .oktsuho-optional { font-size:10px; font-weight:500; line-height:1.6; padding:1px 6px; border-radius:3px; }
.oktsuho .oktsuho-required { background:#e9f2ff; color:#3165a7; }
.oktsuho .oktsuho-optional { background:#f0f3f6; color:#657486; }
.oktsuho .oktsuho-field input, .oktsuho .oktsuho-field textarea { display:block; width:100%; min-width:0; color:var(--oktsuho-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; }
.oktsuho .oktsuho-field input { min-height:46px; }
.oktsuho .oktsuho-field textarea { resize:vertical; min-height:140px; }
.oktsuho .oktsuho-field input::placeholder, .oktsuho .oktsuho-field textarea::placeholder { color:#91a1b2; font-size:13px; }
.oktsuho .oktsuho-privacy { margin:6px 0 22px; }
.oktsuho .oktsuho-privacy p { color:#697d92; font-size:12px; margin-bottom:12px; }
.oktsuho .oktsuho-privacy p>a { text-decoration:underline; color:var(--oktsuho-blue); }
.oktsuho .oktsuho-privacy label { display:flex; gap:8px; align-items:flex-start; color:#496481; font-size:13px; line-height:1.8; }
.oktsuho .oktsuho-privacy input { width:17px; height:17px; flex:none; margin:3px 0 0; accent-color:var(--oktsuho-blue); }
.oktsuho .oktsuho-honeypot { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.oktsuho .oktsuho-submit { width:100%; max-width:100%; }
.oktsuho .oktsuho-submit:disabled { opacity:.65; cursor:wait; }
.oktsuho .oktsuho-notice { border:1px solid #d0e1f1; padding:16px; border-radius:8px; font-size:14px; margin-bottom:22px; }
.oktsuho .oktsuho-notice-success { border-color:#dae4ee; background:#fffaee; color:#183b62; }
.oktsuho .oktsuho-notice-error { border-color:#e9cccc; background:#fff7f7; color:#9b3838; }
/* フッターとコラム記事 */
.oktsuho .oktsuho-footer { background:#fff; border-top:1px solid var(--oktsuho-line); padding:32px 0 20px; }
.oktsuho .oktsuho-footer-top { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.oktsuho .oktsuho-footer .oktsuho-brandtext { font-size:18px; }
.oktsuho .oktsuho-footer .oktsuho-logo, .oktsuho .oktsuho-footer .oktsuho-logo-placeholder { width:32px; height:32px; }
.oktsuho .oktsuho-footer-menu { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px 18px; }
.oktsuho .oktsuho-footer-menu a { font-size:11px; color:#577393; }
.oktsuho .oktsuho-footer-menu a:hover { text-decoration:underline; }
.oktsuho .oktsuho-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; }
.oktsuho .oktsuho-single-heading { background:#f1f7fd; padding:48px 0; }
.oktsuho .oktsuho-single-heading time { display:block; font-size:13px; color:#748da6; margin:22px 0 12px; }
.oktsuho .oktsuho-single-heading h1 { font-size:clamp(25px,3vw,36px); line-height:1.6; overflow-wrap:anywhere; }
.oktsuho .oktsuho-single-content { max-width:900px; width:calc(100% - 64px); margin:44px auto 72px; font-size:16px; overflow-wrap:anywhere; }
.oktsuho .oktsuho-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;
}
.oktsuho .oktsuho-article-cover,
.oktsuho .oktsuho-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;
}
.oktsuho .oktsuho-single-content p { margin:1.2em 0; }
.oktsuho .oktsuho-single-content h2 { font-size:26px; border-bottom:2px solid #d3e5f8; padding-bottom:12px; margin:44px 0 20px; }
.oktsuho .oktsuho-single-content h3 { font-size:21px; margin:30px 0 15px; }
.oktsuho .oktsuho-single-content a:not(.oktsuho-btn) { color:var(--oktsuho-blue); text-decoration:underline; }
.oktsuho .oktsuho-single-content img, .oktsuho .oktsuho-single-content iframe { max-width:100%; }
.oktsuho .oktsuho-single-content img { height:auto; margin-inline:auto; }
.oktsuho .oktsuho-single-content table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; }
.oktsuho .oktsuho-single-content td, .oktsuho .oktsuho-single-content th { border:1px solid var(--oktsuho-line); padding:12px; }
.oktsuho .oktsuho-single-content pre { overflow-x:auto; max-width:100%; padding:18px; background:#f1f5f9; }
.oktsuho .oktsuho-pagination { margin-top:36px; text-align:center; }
.oktsuho .oktsuho-pagination .page-numbers { display:inline-block; padding:6px 14px; border:1px solid var(--oktsuho-line); border-radius:6px; margin:3px; font-size:14px; }
.oktsuho .oktsuho-pagination .current { background:var(--oktsuho-blue); color:#fff; }
/* ノートPC・タブレット */
@media (max-width:1180px) {
.oktsuho .oktsuho-header-main { gap:18px; }
.oktsuho .oktsuho-menu { gap:14px; }
.oktsuho .oktsuho-brandtext { font-size:19px; }
.oktsuho .oktsuho-actions-header .oktsuho-btn { width:124px; font-size:10.5px; }
.oktsuho .oktsuho-hero-grid, .oktsuho .oktsuho-band-grid { gap:38px; }
.oktsuho .oktsuho-hero-visual { min-height:390px; }
.oktsuho .oktsuho-photo--2 { min-height:390px; clip-path:polygon(22% 0,100% 0,100% 100%,0 100%); }
.oktsuho .oktsuho-service-card { padding:25px 18px; }
.oktsuho .oktsuho-service-card h3 { font-size:15px; }
}
@media (max-width:1060px) {
.oktsuho .oktsuho-header-main { flex-wrap:wrap; gap:12px 20px; min-height:70px; }
.oktsuho .oktsuho-header-main>.oktsuho-brand { margin-right:auto; }
.oktsuho .oktsuho-menu { order:4; width:100%; flex:none; padding:8px 0; justify-content:flex-start; }
.oktsuho.is-enhanced .oktsuho-menu { display:none; }
.oktsuho.is-enhanced .oktsuho-menu.is-open { display:flex; }
.oktsuho.is-enhanced .oktsuho-menu-toggle { display:flex; order:3; }
.oktsuho .oktsuho-actions-header { order:2; }
.oktsuho .oktsuho-service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.oktsuho .oktsuho-service-card { padding:28px; }
.oktsuho .oktsuho-service-card h3 { font-size:17px; min-height:3.3em; }
.oktsuho .oktsuho-band h2 { font-size:25px; }
.oktsuho .oktsuho-actions-onblue .oktsuho-btn { width:calc(50% - 6px); padding:10px 9px; font-size:12px; gap:6px; }
.oktsuho .oktsuho-hero h1 { font-size:30px; }
.oktsuho .oktsuho-actions-hero .oktsuho-btn { width:calc(50% - 6px); font-size:12px; padding:10px 8px; gap:6px; }
.oktsuho .oktsuho-voice-card { padding:22px; }
.oktsuho .oktsuho-voice-head { flex-direction:column; align-items:flex-start; gap:12px; }
.oktsuho .oktsuho-price-detail { padding:28px; }
.oktsuho .oktsuho-bottom-grid { gap:24px; }
.oktsuho .oktsuho-actions-bottom { flex-direction:column; }
.oktsuho .oktsuho-contact-grid { gap:40px; }
.oktsuho .oktsuho-footer-top { flex-direction:column; align-items:flex-start; gap:22px; }
.oktsuho .oktsuho-footer-menu { justify-content:flex-start; }
}
@media (max-width:820px) {
.oktsuho .oktsuho-container { width:calc(100% - 48px); }
.oktsuho .oktsuho-hero-grid { grid-template-columns:1fr; gap:30px; padding-block:42px; }
.oktsuho .oktsuho-hero-visual { width:100%; max-width:720px; margin-inline:auto; min-height:0; justify-content:center; }
.oktsuho .oktsuho-photo--2 { min-height:320px; clip-path:polygon(18% 0,100% 0,100% 100%,0 100%); }
.oktsuho .oktsuho-hero-description { max-width:none; }
.oktsuho .oktsuho-hero h1 { font-size:36px; }
.oktsuho .oktsuho-actions-hero .oktsuho-btn { width:184px; font-size:13px; }
.oktsuho .oktsuho-band-grid { grid-template-columns:1fr; gap:30px; padding-block:44px; }
.oktsuho .oktsuho-band-visual { width:100%; max-width:560px; margin-inline:auto; }
.oktsuho .oktsuho-band h2 { font-size:30px; }
.oktsuho .oktsuho-actions-onblue .oktsuho-btn { width:184px; font-size:13px; }
.oktsuho .oktsuho-section { padding:56px 0; }
.oktsuho .oktsuho-heading h2, .oktsuho .oktsuho-heading h1 { font-size:26px; }
.oktsuho .oktsuho-price-card { grid-template-columns:1fr; }
.oktsuho .oktsuho-price-main { padding:26px; }
.oktsuho .oktsuho-price-main h3 br { display:none; }
.oktsuho .oktsuho-voice-grid { grid-template-columns:1fr; gap:18px; }
.oktsuho .oktsuho-voice-head { flex-direction:row; align-items:center; }
.oktsuho .oktsuho-voice-card.is-pending { min-height:0; }
.oktsuho .oktsuho-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
.oktsuho .oktsuho-bottom-grid { grid-template-columns:1fr; gap:24px; }
.oktsuho .oktsuho-actions-bottom { flex-direction:row; }
.oktsuho .oktsuho-contact-grid { grid-template-columns:1fr; gap:30px; }
.oktsuho .oktsuho-contact-copy { max-width:none; }
.oktsuho .oktsuho-faq-section { padding-top:56px; }
.oktsuho .oktsuho-footer-bottom { flex-direction:column; gap:6px; }
}
@media (max-width:600px) {
.oktsuho { font-size:15px; --oktsuho-header-offset:18px; }
.oktsuho .oktsuho-container, .oktsuho .oktsuho-single-content { width:calc(100% - 36px); }
.oktsuho .oktsuho-header { position:relative; top:auto !important; }
.oktsuho .oktsuho-header-top p { font-size:10px; padding:6px 0; letter-spacing:0; }
.oktsuho .oktsuho-header-main { gap:12px; padding-block:12px; }
.oktsuho .oktsuho-brandtext { font-size:18px; }
.oktsuho .oktsuho-logo, .oktsuho .oktsuho-logo-placeholder { width:32px; height:32px; }
.oktsuho .oktsuho-brand { gap:8px; }
.oktsuho .oktsuho-actions-header { width:100%; order:4; gap:10px; }
.oktsuho .oktsuho-actions-header .oktsuho-btn { flex:1; width:calc(50% - 5px); min-height:38px; font-size:11px; padding:8px; }
.oktsuho .oktsuho-menu { order:5; flex-wrap:wrap; gap:4px; padding-top:4px; }
.oktsuho .oktsuho-menu a { width:calc(50% - 2px); padding:10px 12px; background:#f5f9fd; border-radius:6px; font-size:12px; }
.oktsuho .oktsuho-menu a::after { content:none; }
.oktsuho .oktsuho-hero-grid { padding-block:32px 40px; }
.oktsuho .oktsuho-hero-visual { max-width:100%; }
.oktsuho .oktsuho-photo--2 { min-height:250px; clip-path:polygon(14% 0,100% 0,100% 100%,0 100%); }
.oktsuho .oktsuho-hero h1 { font-size:clamp(24px,7.3vw,33px); margin-bottom:18px; }
.oktsuho .oktsuho-hero .oktsuho-eyebrow { font-size:11px; margin-bottom:12px; }
.oktsuho .oktsuho-hero-description { font-size:14px; line-height:1.95; }
.oktsuho .oktsuho-hero-offer { margin-block:22px; }
.oktsuho .oktsuho-hero-offer strong { font-size:32px; }
.oktsuho .oktsuho-hero-offer>div { gap:6px; }
.oktsuho .oktsuho-hero-offer .oktsuho-offer-label { font-size:10px; }
.oktsuho .oktsuho-actions-hero, .oktsuho .oktsuho-actions-onblue, .oktsuho .oktsuho-actions-bottom { gap:10px; }
.oktsuho .oktsuho-actions-hero .oktsuho-btn, .oktsuho .oktsuho-actions-onblue .oktsuho-btn, .oktsuho .oktsuho-actions-bottom .oktsuho-btn { width:calc(50% - 5px); padding:11px 8px; font-size:11.5px; min-height:44px; gap:6px; }
.oktsuho .oktsuho-photo { border-radius:12px; }
.oktsuho .oktsuho-photo-placeholder .oktsuho-icon { width:40px; height:40px; }
.oktsuho .oktsuho-section { padding-block:44px; }
.oktsuho .oktsuho-heading { margin-bottom:26px; }
.oktsuho .oktsuho-heading h2, .oktsuho .oktsuho-heading h1 { font-size:23px; line-height:1.65; }
.oktsuho .oktsuho-heading>p:not(.oktsuho-eyebrow) { font-size:13px; }
.oktsuho .oktsuho-desktop-br { display:none; }
.oktsuho .oktsuho-service-grid { grid-template-columns:1fr; gap:16px; }
.oktsuho .oktsuho-service-card { padding:24px; }
.oktsuho .oktsuho-service-card h3 { min-height:0; font-size:17px; margin-bottom:10px; display:block; }
.oktsuho .oktsuho-service-card h3 br { display:none; }
.oktsuho .oktsuho-service-card p { font-size:14px; }
.oktsuho .oktsuho-card-icon { margin-bottom:14px; }
.oktsuho .oktsuho-band h2 { font-size:clamp(18px,5.45vw,27px); }
.oktsuho .oktsuho-band-copy>p:not(.oktsuho-eyebrow) { font-size:14px; }
.oktsuho .oktsuho-band .oktsuho-eyebrow { font-size:10px; }
.oktsuho .oktsuho-checklist { grid-template-columns:1fr; gap:11px; }
.oktsuho .oktsuho-price-detail { padding:24px; }
.oktsuho .oktsuho-price-head { padding:18px 20px; }
.oktsuho .oktsuho-price-head p { font-size:12px; }
.oktsuho .oktsuho-price-head h3 { font-size:20px; }
.oktsuho .oktsuho-price-main h3 { font-size:17px; }
.oktsuho .oktsuho-price-amount strong { font-size:40px; }
.oktsuho .oktsuho-voice-card { padding:23px; }
.oktsuho .oktsuho-columns { grid-template-columns:1fr; }
.oktsuho .oktsuho-stats-grid { flex-direction:column; gap:20px; }
.oktsuho .oktsuho-stats-grid>div+div { border-left:0; border-top:1px solid var(--oktsuho-line); padding-top:20px; }
.oktsuho .oktsuho-faq-section { padding-top:44px; }
.oktsuho .oktsuho-faq-list summary { font-size:14px; gap:11px; padding-block:18px; }
.oktsuho .oktsuho-faq-list details>div { padding-left:28px; padding-right:8px; font-size:13px; }
.oktsuho .oktsuho-bottom-grid h2 { font-size:23px; }
.oktsuho .oktsuho-bottom-cta { padding-block:36px; }
.oktsuho .oktsuho-contact-copy h2 { font-size:25px; }
.oktsuho .oktsuho-form-panel { padding:22px 18px; border-radius:12px; }
.oktsuho .oktsuho-office-details { margin-block:22px; }
.oktsuho .oktsuho-footer { padding-top:26px; }
.oktsuho .oktsuho-footer-menu { gap:10px 16px; }
.oktsuho .oktsuho-single-heading { padding-block:32px; }
.oktsuho .oktsuho-single-content { margin-top:30px; font-size:15px; }
.oktsuho .oktsuho-single-content h2 { font-size:23px; }
.oktsuho .oktsuho-single-content h3 { font-size:19px; }
}
@media (prefers-reduced-motion:reduce) {
.oktsuho *, .oktsuho *::before, .oktsuho *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}
/* 1.4.1 写真3：切り抜き済みPC画像を、青い紹介帯で大きく見せる */
.oktsuho .oktsuho-band { overflow:hidden; }
.oktsuho .oktsuho-band-grid {
grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
gap:42px;
align-items:stretch;
padding-top:44px;
padding-bottom:42px;
}
.oktsuho .oktsuho-band-visual {
display:flex;
align-items:flex-end;
justify-content:flex-start;
align-self:stretch;
min-width:0;
margin-left:-44px;
}
.oktsuho .oktsuho-photo--3,
.oktsuho .oktsuho-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;
}
.oktsuho .oktsuho-photo--3 .oktsuho-slot-image,
.oktsuho .oktsuho-photo--3.oktsuho-fit-cover .oktsuho-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;
}
.oktsuho .oktsuho-photo--3.is-placeholder {
width:100%;
min-height:360px;
aspect-ratio:16/10;
border-radius:16px;
overflow:hidden;
margin:0;
}
@media (max-width:1180px) {
.oktsuho .oktsuho-band-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; }
.oktsuho .oktsuho-band-visual { margin-left:-20px; }
.oktsuho .oktsuho-photo--3 .oktsuho-slot-image,
.oktsuho .oktsuho-photo--3.oktsuho-fit-cover .oktsuho-slot-image { width:112%; margin-left:-4%; }
}
@media (max-width:820px) {
.oktsuho .oktsuho-band-grid { grid-template-columns:1fr; gap:28px; padding-block:42px; }
.oktsuho .oktsuho-band-visual { width:100%; max-width:620px; margin:0 auto; display:block; }
.oktsuho .oktsuho-photo--3,
.oktsuho .oktsuho-photo--3.has-image { min-height:0; height:auto; display:block; }
.oktsuho .oktsuho-photo--3 .oktsuho-slot-image,
.oktsuho .oktsuho-photo--3.oktsuho-fit-cover .oktsuho-slot-image {
width:100%;
max-width:100%;
max-height:none;
height:auto;
margin:0;
object-position:center bottom;
}
}
@media (max-width:600px) {
.oktsuho .oktsuho-band-grid { padding-block:34px; }
.oktsuho .oktsuho-photo--3.is-placeholder { min-height:220px; }
}
@media (max-width:600px) {
.oktsuho .oktsuho-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) {
.oktsuho .oktsuho-hero {
position:relative;
overflow:hidden !important;
background:#fff !important;
}
.oktsuho .oktsuho-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;
}
.oktsuho .oktsuho-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%);
}
.oktsuho .oktsuho-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;
}
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.has-image,
.oktsuho .oktsuho-hero-visual .oktsuho-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;
}
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2 .oktsuho-slot-image,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.oktsuho-fit-contain .oktsuho-slot-image,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.oktsuho-fit-cover .oktsuho-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%;
}
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.has-image::before,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.has-image::after {
content:none !important;
display:none !important;
}
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.is-placeholder {
background:linear-gradient(135deg,#faf2dd 0%,#faf2dd 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%);
}
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.is-placeholder::before { display:none !important; }
}
@media (min-width:821px) and (max-width:1100px) {
.oktsuho .oktsuho-hero-grid {
grid-template-columns:minmax(420px, 48%) minmax(0, 52%) !important;
min-height:470px;
padding-left:28px !important;
}
.oktsuho .oktsuho-hero-copy { padding-right:32px; }
.oktsuho .oktsuho-hero-visual { min-height:470px !important; }
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.has-image,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.is-placeholder {
clip-path:polygon(14% 0,100% 0,100% 100%,0 100%) !important;
}
}
@media (max-width:820px) {
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.has-image,
.oktsuho .oktsuho-hero-visual .oktsuho-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;
}
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2 .oktsuho-slot-image,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.oktsuho-fit-contain .oktsuho-slot-image,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.oktsuho-fit-cover .oktsuho-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%);
}
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.has-image::before,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.has-image::after { display:none !important; }
}
/* =========================================================
1.5.0 refinements
========================================================= */
/* ヘッダー最上段キャッチコピーを中央表示 */
.oktsuho .oktsuho-header-top p { text-align:center; }
/* アピール写真をさらに大きく：台形の左辺を画面中央寄りまで移動 */
@media (min-width:821px) {
.oktsuho .oktsuho-hero-grid {
grid-template-columns:minmax(430px, 36%) minmax(0, 64%) !important;
}
.oktsuho .oktsuho-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;
}
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.has-image,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.is-placeholder {
clip-path:polygon(8% 0,100% 0,100% 100%,0 100%) !important;
}
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2 .oktsuho-slot-image,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.oktsuho-fit-contain .oktsuho-slot-image,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.oktsuho-fit-cover .oktsuho-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) {
.oktsuho .oktsuho-hero-grid { grid-template-columns:minmax(390px, 42%) minmax(0,58%) !important; }
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.has-image,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.is-placeholder { clip-path:polygon(7% 0,100% 0,100% 100%,0 100%) !important; }
}
/* 手続きの流れ */
.oktsuho .oktsuho-flow-section { background:#fff; }
.oktsuho .oktsuho-flow-grid { counter-reset:flow; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; list-style:none; padding:0; margin:0; }
.oktsuho .oktsuho-flow-grid>li { position:relative; min-width:0; padding:26px 22px 24px; border:1px solid var(--oktsuho-line); border-radius:16px; background:linear-gradient(180deg,#fff,#f8fbfe); }
.oktsuho .oktsuho-flow-grid>li:not(:last-child)::after { content:""; position:absolute; right:-11px; top:42px; width:20px; height:1px; background:#9fbfe0; z-index:2; }
.oktsuho .oktsuho-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; }
.oktsuho .oktsuho-flow-grid h3 { font-size:16px; line-height:1.65; margin-bottom:10px; }
.oktsuho .oktsuho-flow-grid p { color:var(--oktsuho-muted); font-size:13px; line-height:1.9; }
/* 料金表：詳細アンカー */
.oktsuho .oktsuho-price-detail-link { margin-top:18px; min-height:40px; padding:8px 18px; font-size:12px; }
/* Google口コミ：横方向の連続自動スクロール */
.oktsuho .oktsuho-google-reviews { overflow:hidden; background:#f2f8fd; }
.oktsuho .oktsuho-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%); }
.oktsuho .oktsuho-review-track { display:flex; width:max-content; gap:16px; animation:oktsuho-review-marquee 48s linear infinite; will-change:transform; }
.oktsuho .oktsuho-review-window:hover .oktsuho-review-track { animation-play-state:paused; }
.oktsuho .oktsuho-review-group { display:flex; gap:16px; flex:none; }
.oktsuho .oktsuho-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); }
.oktsuho .oktsuho-google-review-top { display:flex; align-items:center; gap:8px; color:#5b7591; font-size:11px; font-weight:700; }
.oktsuho .oktsuho-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; }
.oktsuho .oktsuho-stars { color:#f3b300; letter-spacing:.09em; font-size:17px; margin:14px 0 12px; }
.oktsuho .oktsuho-google-review-card p { color:#425f7e; font-size:14px; line-height:1.95; }
.oktsuho .oktsuho-google-review-card strong { margin-top:auto; padding-top:18px; color:#173f6d; font-size:13px; }
.oktsuho .oktsuho-review-disclaimer { max-width:900px; margin:20px auto 0; color:#6c8298; font-size:11px; line-height:1.8; text-align:center; }
.oktsuho .oktsuho-review-link { margin-top:20px; text-align:center; }
@keyframes oktsuho-review-marquee { from { transform:translateX(0); } to { transform:translateX(calc(-50% - 8px)); } }
/* プラン詳細 */
.oktsuho .oktsuho-plan-details { background:#fff; }
.oktsuho .oktsuho-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.oktsuho .oktsuho-detail-grid>article { min-width:0; padding:30px 26px; border:1px solid var(--oktsuho-line); border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(30,74,115,.04); }
.oktsuho .oktsuho-detail-grid h3 { font-size:18px; margin-bottom:16px; }
.oktsuho .oktsuho-detail-grid ul { margin:0; padding:0; list-style:none; }
.oktsuho .oktsuho-detail-grid li { position:relative; padding-left:18px; margin:9px 0; color:#4c6682; font-size:13px; line-height:1.85; }
.oktsuho .oktsuho-detail-grid li::before { content:""; position:absolute; left:0; top:.78em; width:7px; height:7px; border-radius:50%; background:#4f8fdb; }
.oktsuho .oktsuho-not-included { margin-top:24px; padding:24px 26px; border-radius:14px; border:1px solid #e2eaf2; background:#f8fafc; }
.oktsuho .oktsuho-not-included h3 { font-size:15px; margin-bottom:8px; }
.oktsuho .oktsuho-not-included p { color:#60758c; font-size:13px; line-height:1.9; }
/* 法定表示 */
.oktsuho .oktsuho-reference-section { background:#fff; }
.oktsuho .oktsuho-reference-box { margin-top:24px; padding:22px 24px; background:#f5f9fc; border:1px solid #d5e3ee; border-radius:10px; }
.oktsuho .oktsuho-reference-box ul { margin:0; padding-left:1.4em; }
.oktsuho .oktsuho-reference-box li { margin:0 0 12px; color:#4c6885; font-size:14px; line-height:1.8; }
.oktsuho .oktsuho-reference-box li:last-child { margin-bottom:0; }
.oktsuho .oktsuho-reference-box a { position:relative; z-index:1; pointer-events:auto; color:var(--oktsuho-blue) !important; -webkit-text-fill-color:var(--oktsuho-blue) !important; font-weight:700; text-decoration:underline !important; text-underline-offset:3px; }
.oktsuho .oktsuho-reference-box a:hover { text-decoration-thickness:2px !important; }
.oktsuho .oktsuho-legal-section { padding-top:44px; padding-bottom:44px; background:#f8fbfe; border-top:1px solid var(--oktsuho-line); }
.oktsuho .oktsuho-legal-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.oktsuho .oktsuho-legal-box { border:1px solid var(--oktsuho-line); border-radius:12px; background:#fff; overflow:hidden; }
.oktsuho .oktsuho-legal-box summary { position:relative; list-style:none; cursor:pointer; padding:18px 52px 18px 20px; color:#254f7b; font-weight:700; font-size:14px; }
.oktsuho .oktsuho-legal-box summary::-webkit-details-marker { display:none; }
.oktsuho .oktsuho-legal-box summary::after { content:"＋"; position:absolute; right:20px; top:16px; color:#6485a7; font-size:18px; font-weight:400; }
.oktsuho .oktsuho-legal-box[open] summary::after { content:"−"; }
.oktsuho .oktsuho-legal-body { padding:2px 20px 24px; border-top:1px solid #eef3f8; }
.oktsuho .oktsuho-legal-body h3 { font-size:14px; margin:20px 0 8px; }
.oktsuho .oktsuho-legal-body p { color:#566f89; font-size:12px; line-height:1.9; }
.oktsuho .oktsuho-legal-dl { margin:18px 0 0; }
.oktsuho .oktsuho-legal-dl>div { display:grid; grid-template-columns:190px minmax(0,1fr); gap:18px; padding:12px 0; border-bottom:1px solid #eef3f8; }
.oktsuho .oktsuho-legal-dl dt { color:#516f8e; font-size:12px; font-weight:700; }
.oktsuho .oktsuho-legal-dl dd { color:#365572; font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
.oktsuho .oktsuho-legal-note { margin-top:16px; }
/* フッターの法定リンクが埋もれないように */
.oktsuho .oktsuho-footer-menu a[href*="privacy"],
.oktsuho .oktsuho-footer-menu a[href*="tokusho"] { font-weight:700; }
@media (max-width:1060px) {
.oktsuho .oktsuho-flow-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.oktsuho .oktsuho-flow-grid>li:not(:last-child)::after { display:none; }
.oktsuho .oktsuho-detail-grid { grid-template-columns:1fr 1fr; }
.oktsuho .oktsuho-detail-grid>article:last-child { grid-column:1/-1; }
}
@media (max-width:820px) {
.oktsuho .oktsuho-review-track { animation-duration:60s; }
.oktsuho .oktsuho-google-review-card { width:300px; min-height:228px; }
.oktsuho .oktsuho-detail-grid { grid-template-columns:1fr; }
.oktsuho .oktsuho-detail-grid>article:last-child { grid-column:auto; }
.oktsuho .oktsuho-legal-dl>div { grid-template-columns:150px minmax(0,1fr); }
}
@media (max-width:600px) {
.oktsuho .oktsuho-flow-grid { grid-template-columns:1fr; gap:12px; }
.oktsuho .oktsuho-flow-grid>li { padding:22px 20px; }
.oktsuho .oktsuho-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%); }
.oktsuho .oktsuho-review-track { animation-duration:76s; gap:16px; }
.oktsuho .oktsuho-review-group { gap:12px; }
.oktsuho .oktsuho-google-review-card { width:272px; min-height:222px; padding:21px; }
.oktsuho .oktsuho-review-disclaimer { font-size:10.5px; padding-inline:8px; }
.oktsuho .oktsuho-legal-dl>div { grid-template-columns:1fr; gap:5px; }
}
@media (prefers-reduced-motion:reduce) {
.oktsuho .oktsuho-review-track { animation:none !important; }
.oktsuho .oktsuho-review-window { overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
}
/* =========================================================
1.6.0 refinements
========================================================= */
/* ヘッダーCTA：無料相談はメール、LINEはチャットのシンプルアイコン */
.oktsuho .oktsuho-actions-header .oktsuho-icon,
.oktsuho .oktsuho-actions-menu .oktsuho-icon { width:17px; height:17px; stroke-width:1.9; }
.oktsuho .oktsuho-actions-header .oktsuho-btn { gap:7px; }
.oktsuho .oktsuho-mobile-phone,
.oktsuho .oktsuho-menu-cta { display:none; }
/* 制作イメージ（旧レイアウト互換スタイル。v1.6.2で下部から上書き） */
.oktsuho .oktsuho-works-section { background:#f7fbff; }
.oktsuho .oktsuho-works-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.oktsuho .oktsuho-work-card { min-width:0; overflow:hidden; border:1px solid var(--oktsuho-line); border-radius:16px; background:#fff; box-shadow:0 7px 24px rgba(25,69,110,.045); }
.oktsuho .oktsuho-work-image { display:block; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,#eef6fd,#dceafb); }
.oktsuho .oktsuho-work-image img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.oktsuho .oktsuho-work-image:hover img { transform:scale(1.025); }
.oktsuho .oktsuho-work-image>span { width:100%; height:100%; display:grid; place-items:center; color:#87a8cb; }
.oktsuho .oktsuho-work-image .oktsuho-icon { width:54px; height:54px; }
.oktsuho .oktsuho-work-body { padding:22px 22px 24px; }
.oktsuho .oktsuho-work-body h3 { font-size:17px; line-height:1.65; margin-bottom:9px; }
.oktsuho .oktsuho-work-body p { color:var(--oktsuho-muted); font-size:13px; line-height:1.9; margin-bottom:14px; }
/* PC右下の追従バナー。画像未設定ならHTML自体を出力しない */
.oktsuho .oktsuho-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; }
.oktsuho .oktsuho-floating-banner:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(13,52,92,.28); }
.oktsuho .oktsuho-floating-banner img { width:100%; height:100%; object-fit:cover; }
/* フッターの法定ページリンクは通常メニューより前に独立表示 */
.oktsuho .oktsuho-footer-legal-links { display:flex; flex-wrap:wrap; gap:10px 24px; padding:0 0 18px; margin-bottom:22px; border-bottom:1px solid #e9f1f8; }
.oktsuho .oktsuho-footer-legal-links a { color:#315f91; font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
/* 独立固定ページ：プライバシーポリシー・特商法表記 */
.oktsuho.oktsuho-legal-page-wrap { background:#f8fbfe; padding:56px 0 76px; }
.oktsuho .oktsuho-legal-page { background:transparent; }
.oktsuho .oktsuho-legal-page h1 { font-size:clamp(28px,4vw,40px); margin-bottom:18px; }
.oktsuho .oktsuho-legal-lead { color:#506b88; font-size:15px; line-height:2; padding-bottom:28px; border-bottom:1px solid var(--oktsuho-line); }
.oktsuho .oktsuho-legal-page section { padding:28px 0 0; }
.oktsuho .oktsuho-legal-page section h2 { font-size:19px; margin-bottom:10px; }
.oktsuho .oktsuho-legal-page section p,
.oktsuho .oktsuho-legal-page section li { color:#526b87; font-size:14px; line-height:2; }
.oktsuho .oktsuho-legal-page section ul { margin:10px 0 0; padding-left:1.4em; }
.oktsuho .oktsuho-legal-page section li { margin:4px 0; }
.oktsuho .oktsuho-legal-dl-large { margin-top:28px; border-top:1px solid var(--oktsuho-line); }
.oktsuho .oktsuho-legal-dl-large>div { grid-template-columns:220px minmax(0,1fr); padding:16px 0; }
.oktsuho .oktsuho-legal-dl-large dt,.oktsuho .oktsuho-legal-dl-large dd { font-size:13px; }
.oktsuho .oktsuho-legal-updated { margin-top:34px; color:#7890a7; font-size:12px; }
.oktsuho .oktsuho-legal-back { margin-top:32px; display:flex; justify-content:center; text-align:center; }
/* スマホ：追従ヘッダー、電話番号、開いたメニュー内だけに相談ボタン */
@media (max-width:600px) {
.oktsuho .oktsuho-header { position:sticky !important; top:0 !important; z-index:120 !important; }
.admin-bar .oktsuho .oktsuho-header { top:46px !important; }
.oktsuho .oktsuho-header-top p { font-size:9.5px; padding:5px 2px; }
.oktsuho .oktsuho-header-main { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-block:9px; min-height:62px; }
.oktsuho .oktsuho-header-main>.oktsuho-brand { margin-right:auto; gap:6px; }
.oktsuho .oktsuho-brandtext { font-size:14px; }
.oktsuho .oktsuho-logo,.oktsuho .oktsuho-logo-placeholder { width:28px; height:28px; border-radius:6px; }
.oktsuho .oktsuho-mobile-phone { display:flex; flex:none; flex-direction:column; align-items:flex-end; justify-content:center; line-height:1.15; }
.oktsuho .oktsuho-mobile-phone a { color:#174f95; font-size:12px; font-weight:800; letter-spacing:.01em; }
.oktsuho .oktsuho-mobile-phone span { color:#6d8298; font-size:8.5px; margin-top:4px; white-space:nowrap; }
.oktsuho .oktsuho-menu-toggle { padding:6px 8px; min-height:40px; }
.oktsuho .oktsuho-header-main>.oktsuho-actions-header { display:none !important; }
.oktsuho .oktsuho-menu { order:5; width:100%; flex:none; flex-direction:column; align-items:stretch; gap:5px; padding:10px 0 2px; }
.oktsuho .oktsuho-menu a { width:100%; padding:10px 12px; background:#f5f9fd; border-radius:7px; font-size:12px; }
.oktsuho .oktsuho-menu-cta { display:block; padding-top:6px; }
.oktsuho .oktsuho-actions-menu { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.oktsuho .oktsuho-actions-menu .oktsuho-btn { width:100%; min-width:0; min-height:42px; padding:8px 7px; gap:5px; font-size:10.5px; }
.oktsuho .oktsuho-actions-menu .oktsuho-icon { width:15px; height:15px; }
.oktsuho .oktsuho-floating-banner { display:none !important; }
}
/* スマホ：アピール文と写真を同じエリア内で一体化。写真は右側に残し、左から白いぼかしを重ねる */
@media (max-width:820px) {
.oktsuho .oktsuho-hero { position:relative !important; overflow:hidden !important; background:#eef6fd !important; }
.oktsuho .oktsuho-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%); }
.oktsuho .oktsuho-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; }
.oktsuho .oktsuho-hero-copy { position:relative !important; z-index:4 !important; width:100% !important; max-width:100% !important; padding:0 !important; background:none !important; }
.oktsuho .oktsuho-hero-copy .oktsuho-hero-description { max-width:94% !important; }
.oktsuho .oktsuho-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; }
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.has-image,
.oktsuho .oktsuho-hero-visual .oktsuho-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; }
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2 .oktsuho-slot-image,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.oktsuho-fit-contain .oktsuho-slot-image,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.oktsuho-fit-cover .oktsuho-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; }
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.has-image::before,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.has-image::after { display:none !important; content:none !important; }
.oktsuho .oktsuho-hero-offer { max-width:310px; background:rgba(255,255,255,.58); backdrop-filter:blur(2px); }
.oktsuho .oktsuho-actions-hero { max-width:390px; }
}
@media (max-width:600px) {
.oktsuho .oktsuho-hero-grid { min-height:590px; padding-top:38px !important; }
.oktsuho .oktsuho-hero h1 { font-size:30px; }
.oktsuho .oktsuho-hero-description { font-size:13.5px; line-height:1.9; }
.oktsuho .oktsuho-hero-visual { inset:0 -18px 0 12% !important; }
.oktsuho .oktsuho-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%); }
.oktsuho .oktsuho-works-grid { grid-template-columns:1fr; gap:16px; }
.oktsuho .oktsuho-work-body { padding:19px 19px 21px; }
.oktsuho .oktsuho-footer-legal-links { gap:10px 18px; }
.oktsuho.oktsuho-legal-page-wrap { padding:38px 0 54px; }
.oktsuho .oktsuho-legal-dl-large>div { grid-template-columns:1fr; gap:5px; }
}
@media (min-width:601px) and (max-width:1060px) {
.oktsuho .oktsuho-works-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px) {
.oktsuho .oktsuho-hero::after { -webkit-backdrop-filter:blur(.7px); backdrop-filter:blur(.7px); }
}
/* =========================================================
1.6.2 制作イメージ：PC版＋スマホ版の横自動スクロール
========================================================= */
.oktsuho .oktsuho-works-section {
overflow:hidden;
background:linear-gradient(180deg,#f7fbff 0%,#f2f8fd 100%);
}
.oktsuho .oktsuho-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%);
}
.oktsuho .oktsuho-work-track {
display:flex;
width:max-content;
gap:20px;
animation:oktsuho-work-marquee 54s linear infinite;
will-change:transform;
}
.oktsuho .oktsuho-work-window:hover .oktsuho-work-track { animation-play-state:paused; }
.oktsuho .oktsuho-work-group { display:flex; gap:20px; flex:none; align-items:stretch; }
.oktsuho .oktsuho-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;
}
.oktsuho .oktsuho-work-device-set {
position:relative;
height:300px;
padding:26px 34px 20px 26px;
background:linear-gradient(145deg,#eef6fd 0%,#e4f0fb 56%,#d7e8f8 100%);
overflow:hidden;
}
.oktsuho .oktsuho-work-device-set::before {
content:"";
position:absolute;
width:230px;
height:230px;
right:-82px;
top:-86px;
border-radius:50%;
background:rgba(255,255,255,.44);
}
.oktsuho .oktsuho-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;
}
.oktsuho .oktsuho-work-browserbar {
height:20px;
display:flex;
gap:5px;
align-items:center;
padding:0 8px;
background:#eef2f6;
border-bottom:1px solid #dce4ec;
}
.oktsuho .oktsuho-work-browserbar i { width:5px; height:5px; border-radius:50%; background:#9fb0c0; }
.oktsuho .oktsuho-work-screen { height:calc(100% - 20px); background:#fff; overflow:hidden; }
.oktsuho .oktsuho-work-screen img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.oktsuho .oktsuho-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);
}
.oktsuho .oktsuho-work-mobile-notch {
position:absolute;
z-index:4;
top:8px;
left:50%;
width:31px;
height:5px;
transform:translateX(-50%);
border-radius:999px;
background:#1d2a38;
}
.oktsuho .oktsuho-work-mobile-screen {
width:100%;
height:100%;
overflow:hidden;
border-radius:12px;
background:#fff;
}
.oktsuho .oktsuho-work-mobile-screen img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.oktsuho .oktsuho-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);
}
.oktsuho .oktsuho-work-placeholder .oktsuho-icon { width:34px; height:34px; }
.oktsuho .oktsuho-work-placeholder small { font-size:10px; font-weight:700; }
.oktsuho .oktsuho-work-body { padding:20px 22px 22px; min-height:102px; }
.oktsuho .oktsuho-work-body h3 { margin:0; color:#173f6d; font-size:16px; line-height:1.65; }
.oktsuho .oktsuho-work-body p { margin:8px 0 0; color:#5a728c; font-size:12px; line-height:1.85; }
.oktsuho .oktsuho-work-note {
max-width:960px;
margin:22px auto 0;
color:#657c94;
font-size:11.5px;
line-height:1.9;
text-align:center;
}
@keyframes oktsuho-work-marquee {
from { transform:translateX(0); }
to { transform:translateX(calc(-50% - 10px)); }
}
@media (max-width:820px) {
.oktsuho .oktsuho-work-track { animation-duration:66s; }
.oktsuho .oktsuho-work-card { width:390px; min-width:390px; }
.oktsuho .oktsuho-work-device-set { height:270px; padding:24px 28px 18px 22px; }
.oktsuho .oktsuho-work-desktop { width:87%; height:207px; }
.oktsuho .oktsuho-work-mobile { right:22px; bottom:16px; width:84px; height:168px; }
}
@media (max-width:600px) {
.oktsuho .oktsuho-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%);
}
.oktsuho .oktsuho-work-track { animation-duration:84s; gap:14px; }
.oktsuho .oktsuho-work-group { gap:14px; }
.oktsuho .oktsuho-work-card { width:304px; min-width:304px; border-radius:15px; }
.oktsuho .oktsuho-work-device-set { height:228px; padding:19px 20px 15px 16px; }
.oktsuho .oktsuho-work-desktop { width:88%; height:174px; border-width:5px; border-bottom-width:9px; border-radius:9px 9px 5px 5px; }
.oktsuho .oktsuho-work-browserbar { height:16px; padding-inline:6px; gap:4px; }
.oktsuho .oktsuho-work-browserbar i { width:4px; height:4px; }
.oktsuho .oktsuho-work-screen { height:calc(100% - 16px); }
.oktsuho .oktsuho-work-mobile { right:16px; bottom:13px; width:69px; height:139px; padding:4px; border-radius:13px; }
.oktsuho .oktsuho-work-mobile-screen { border-radius:9px; }
.oktsuho .oktsuho-work-mobile-notch { top:6px; width:24px; height:4px; }
.oktsuho .oktsuho-work-body { min-height:92px; padding:16px 17px 18px; }
.oktsuho .oktsuho-work-body h3 { font-size:14px; }
.oktsuho .oktsuho-work-body p { font-size:11px; }
.oktsuho .oktsuho-work-note { font-size:10.5px; padding-inline:4px; }
}
@media (prefers-reduced-motion:reduce) {
.oktsuho .oktsuho-work-track { animation:none !important; }
.oktsuho .oktsuho-work-window {
overflow-x:auto;
-webkit-mask-image:none;
mask-image:none;
-webkit-overflow-scrolling:touch;
}
}
/* =========================================================
1.6.4 制作イメージ：完成済み画像だけを横自動スクロール
- カード、タイトル、説明文、PC/スマホ端末枠は付けない
- PC/スマホとも同じ画像を使用
========================================================= */
.oktsuho .oktsuho-works-section {
overflow:hidden;
background:linear-gradient(180deg,#f7fbff 0%,#f2f8fd 100%);
}
.oktsuho .oktsuho-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%);
}
.oktsuho .oktsuho-work-track {
display:flex;
width:max-content;
gap:34px;
align-items:center;
animation:oktsuho-work-marquee-v164 52s linear infinite;
will-change:transform;
}
.oktsuho .oktsuho-work-window:hover .oktsuho-work-track { animation-play-state:paused; }
.oktsuho .oktsuho-work-group {
display:flex;
gap:34px;
flex:none;
align-items:center;
}
.oktsuho .oktsuho-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;
}
.oktsuho .oktsuho-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;
}
.oktsuho .oktsuho-work-note {
max-width:960px;
margin:18px auto 0;
color:#657c94;
font-size:11.5px;
line-height:1.9;
text-align:center;
}
@keyframes oktsuho-work-marquee-v164 {
from { transform:translateX(0); }
to { transform:translateX(calc(-50% - 17px)); }
}
@media (max-width:1060px) {
.oktsuho .oktsuho-work-track,
.oktsuho .oktsuho-work-group { gap:24px; }
.oktsuho .oktsuho-work-track { animation-duration:60s; }
.oktsuho .oktsuho-work-image-item {
width:470px;
min-width:470px;
height:330px;
}
@keyframes oktsuho-work-marquee-v164 {
from { transform:translateX(0); }
to { transform:translateX(calc(-50% - 12px)); }
}
}
@media (max-width:600px) {
.oktsuho .oktsuho-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%);
}
.oktsuho .oktsuho-work-track,
.oktsuho .oktsuho-work-group { gap:16px; }
.oktsuho .oktsuho-work-track { animation-duration:68s; }
.oktsuho .oktsuho-work-image-item {
width:86vw;
min-width:86vw;
max-width:350px;
height:270px;
}
.oktsuho .oktsuho-work-note { font-size:10.5px; padding-inline:4px; }
@keyframes oktsuho-work-marquee-v164 {
from { transform:translateX(0); }
to { transform:translateX(calc(-50% - 8px)); }
}
}
@media (prefers-reduced-motion:reduce) {
.oktsuho .oktsuho-work-track { animation:none !important; }
.oktsuho .oktsuho-work-window {
overflow-x:auto;
-webkit-mask-image:none;
mask-image:none;
}
}
/* =========================================================
1.6.8 サイト制作コラム：アイキャッチ見切れ防止（最終上書き）
- 300:170 の枠は維持
- 元画像全体を contain で表示
- WordPress/テーマ側の cover・transform を強制解除
========================================================= */
.oktsuho .oktsuho-column-thumb,
.oktsuho .oktsuho-article-cover-frame {
box-sizing:border-box !important;
aspect-ratio:300 / 170 !important;
overflow:hidden !important;
background:#fff !important;
}
.oktsuho .oktsuho-column-thumb > img.oktsuho-featured-original,
.oktsuho .oktsuho-article-cover-frame > img.oktsuho-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 の影響を受けても左右を切らない。
========================================================= */
.oktsuho .oktsuho-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;
}
.oktsuho .oktsuho-column-thumb > img,
.oktsuho img.oktsuho-column-featured-image,
.oktsuho img.oktsuho-featured-original,
.oktsuho img.oktsuho-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;
}
.oktsuho img.oktsuho-article-cover { margin-bottom:32px !important; border-radius:12px !important; }
.oktsuho .oktsuho-article-cover-frame { height:auto !important; max-height:none !important; aspect-ratio:auto !important; overflow:visible !important; }
/* =========================================================
1.7.1 コラム固定ページ／法定ページ導線
========================================================= */
.oktsuho .oktsuho-column-index-page .oktsuho-heading { margin-bottom:30px; }
.oktsuho .oktsuho-column-index-back { display:flex; justify-content:center; margin-top:36px; text-align:center; }
.oktsuho .oktsuho-legal-back { display:flex !important; justify-content:center !important; text-align:center !important; }
@media (max-width:600px) {
.oktsuho .oktsuho-legal-back .oktsuho-btn,
.oktsuho .oktsuho-column-index-back .oktsuho-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
========================================================= */
.oktsuho.oktsuho-reveal-ready .oktsuho-reveal {
opacity:0;
transition:
opacity .64s cubic-bezier(.2,.72,.2,1),
transform .64s cubic-bezier(.2,.72,.2,1);
transition-delay:var(--oktsuho-reveal-delay,0ms);
will-change:opacity,transform;
}
.oktsuho.oktsuho-reveal-ready .oktsuho-reveal-left { transform:translate3d(-36px,0,0); }
.oktsuho.oktsuho-reveal-ready .oktsuho-reveal-up { transform:translate3d(0,34px,0); }
.oktsuho.oktsuho-reveal-ready .oktsuho-reveal.is-visible {
opacity:1;
transform:translate3d(0,0,0);
will-change:auto;
}
/* 横スクロールそのものには reveal を一切適用しない。 */
.oktsuho .oktsuho-review-window,
.oktsuho .oktsuho-review-window *,
.oktsuho .oktsuho-work-window,
.oktsuho .oktsuho-work-window * {
--oktsuho-reveal-delay:0ms;
}
/* モバイル／タブレットのメニュー項目も、開いた時に左から右へ。 */
@media (max-width:1060px) {
.oktsuho.is-enhanced .oktsuho-menu.is-open > a,
.oktsuho.is-enhanced .oktsuho-menu.is-open > .oktsuho-menu-cta {
opacity:0;
transform:translateX(-22px);
animation:oktsuho-menu-fade-right .42s cubic-bezier(.2,.72,.2,1) forwards;
}
.oktsuho.is-enhanced .oktsuho-menu.is-open > :nth-child(2) { animation-delay:45ms; }
.oktsuho.is-enhanced .oktsuho-menu.is-open > :nth-child(3) { animation-delay:90ms; }
.oktsuho.is-enhanced .oktsuho-menu.is-open > :nth-child(4) { animation-delay:135ms; }
.oktsuho.is-enhanced .oktsuho-menu.is-open > :nth-child(5) { animation-delay:180ms; }
.oktsuho.is-enhanced .oktsuho-menu.is-open > :nth-child(6) { animation-delay:225ms; }
.oktsuho.is-enhanced .oktsuho-menu.is-open > :nth-child(7) { animation-delay:270ms; }
}
@keyframes oktsuho-menu-fade-right {
from { opacity:0; transform:translateX(-22px); }
to { opacity:1; transform:translateX(0); }
}
/* PCのみ：流れカードの間隔を広げ、謎の棒線を青い矢印へ置換。 */
@media (min-width:1061px) {
.oktsuho .oktsuho-flow-grid { gap:42px; }
.oktsuho .oktsuho-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) {
.oktsuho.oktsuho-reveal-ready .oktsuho-reveal,
.oktsuho.oktsuho-reveal-ready .oktsuho-reveal-left,
.oktsuho.oktsuho-reveal-ready .oktsuho-reveal-up,
.oktsuho.oktsuho-reveal-ready .oktsuho-reveal.is-visible {
opacity:1 !important;
transform:none !important;
transition:none !important;
}
.oktsuho.is-enhanced .oktsuho-menu.is-open > a,
.oktsuho.is-enhanced .oktsuho-menu.is-open > .oktsuho-menu-cta {
opacity:1 !important;
transform:none !important;
animation:none !important;
}
}
/* =========================================================
1.7.3 サイト制作コラム：記事ヘッダー／参考リンク／一覧ボタン
========================================================= */
.oktsuho .oktsuho-single-heading .oktsuho-column-kicker {
display:block;
margin:0 auto;
text-align:center;
color:var(--oktsuho-blue);
font-size:13px;
line-height:1.4;
font-weight:800;
letter-spacing:.18em;
}
.oktsuho .oktsuho-single-heading time {
display:block;
margin:9px 0 16px !important;
text-align:center;
}
.oktsuho .oktsuho-single-content a:not(.oktsuho-btn) {
position:relative;
z-index:1;
pointer-events:auto !important;
color:var(--oktsuho-blue) !important;
-webkit-text-fill-color:var(--oktsuho-blue) !important;
text-decoration:underline !important;
text-underline-offset:3px;
cursor:pointer;
}
.oktsuho .oktsuho-single-content a:not(.oktsuho-btn):hover {
text-decoration-thickness:2px !important;
}
.oktsuho .oktsuho-column-back {
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:48px 0 0;
text-align:center;
}
.oktsuho .oktsuho-column-back .oktsuho-btn {
width:auto;
min-width:190px;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
text-decoration:none !important;
}
@media (max-width:600px) {
.oktsuho .oktsuho-column-back { margin-top:38px; }
.oktsuho .oktsuho-column-back .oktsuho-btn { width:auto; max-width:100%; }
}
/* =========================================================
1.7.4 スマホ追従相談バー／メニューCTA整理／電話アイコン
========================================================= */
/* ヒーロー（10万円表示直下）の相談ボタンは、追従バーとの重複を避けて非表示。 */
.oktsuho .oktsuho-actions-hero { display:none !important; }
/* スマホメニュー内の相談ボタンは使用しない。旧キャッシュ／旧HTMLが残っても非表示。 */
.oktsuho .oktsuho-menu-cta,
.oktsuho .oktsuho-actions-menu { display:none !important; }
/* スマホ追従バーはPC／タブレットでは表示しない。 */
.oktsuho .oktsuho-mobile-sticky-actions { display:none; }
/* 電話番号の前に同系統の線画アイコンを表示。 */
.oktsuho .oktsuho-mobile-phone a {
display:inline-flex;
align-items:center;
justify-content:flex-end;
gap:5px;
}
.oktsuho .oktsuho-mobile-phone a .oktsuho-icon {
width:14px;
height:14px;
flex:none;
stroke-width:2;
}
.oktsuho .oktsuho-mobile-phone-number { display:inline-block; }
@media (max-width:600px) {
/* 画面下に常時追従。iPhone等のセーフエリアも考慮する。 */
.oktsuho .oktsuho-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);
}
.oktsuho .oktsuho-actions-mobile-sticky {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:8px;
width:100%;
max-width:560px;
margin:0 auto;
}
.oktsuho .oktsuho-actions-mobile-sticky .oktsuho-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;
}
.oktsuho .oktsuho-actions-mobile-sticky .oktsuho-icon {
width:18px;
height:18px;
flex:none;
stroke-width:1.9;
}
/* 固定バーでフッター最下部の内容が隠れないように余白を確保。 */
.oktsuho .oktsuho-footer {
padding-bottom:calc(86px + env(safe-area-inset-bottom));
}
}
@media (max-width: 640px) {
.oktsuho .oktsuho-inquiry-options { grid-template-columns:1fr; gap:12px; }
.oktsuho .oktsuho-inquiry-option { padding:14px 13px; }
.oktsuho .oktsuho-inquiry-field legend { flex-wrap:wrap; }
}
/* v1.7.7 contact plan field redesign: mirror reference plugin UI */
.oktsuho .oktsuho-plan-field{border:0;padding:0;margin:0 0 20px;}
.oktsuho .oktsuho-plan-field legend{display:block;width:100%;font-size:13px;font-weight:800;color:#284a68;margin-bottom:9px;}
.oktsuho .oktsuho-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;}
.oktsuho .oktsuho-plan-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
.oktsuho .oktsuho-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;}
.oktsuho .oktsuho-plan-options label:hover{border-color:#91b7d7;background:#f4f9fd;}
.oktsuho .oktsuho-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;}
.oktsuho .oktsuho-plan-options span{display:block;min-width:0;}
.oktsuho .oktsuho-plan-options b{display:block;font-size:12px;color:#1f486c;line-height:1.5;font-weight:700;}
.oktsuho .oktsuho-plan-options small{display:block;color:#71879a;font-size:11px;margin-top:3px;line-height:1.5;}
.oktsuho .oktsuho-plan-options label:has(input:checked){border-color:#91b7d7;background:#f4f9fd;}
.oktsuho .oktsuho-other-detail{margin-top:-6px;}
@media (max-width:760px){
.oktsuho .oktsuho-plan-options{grid-template-columns:1fr;}
}
/* v1.7.8: 料金プランは排他的に1つだけ選択 */
.oktsuho .oktsuho-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) {
.oktsuho .oktsuho-hero-grid {
min-height:445px !important;
padding-top:30px !important;
padding-bottom:24px !important;
}
.oktsuho .oktsuho-hero-visual,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.has-image,
.oktsuho .oktsuho-hero-visual .oktsuho-photo--2.is-placeholder {
height:100% !important;
min-height:0 !important;
}
}
/* ===== 通報文書サイトの共通レイアウト ===== */
.oktsuho--contract{--oktsuho-blue:#176b87;--oktsuho-navy:#163f50;--oktsuho-ink:#203d49;--oktsuho-muted:#5b727b;--oktsuho-line:#faf2dd;--oktsuho-soft:#fffaee;--oktsuho-deep:#183b62;background:#fff}
.oktsuho--contract .oktsuho-header-top{background:#fffaee;border-color:#faf2dd}.oktsuho--contract .oktsuho-eyebrow{color:#183b62}.oktsuho--contract .oktsuho-contract-hero{background:linear-gradient(135deg,#fffaee 0%,#fff 58%,#fffaee 100%);position:relative;overflow:hidden}.oktsuho--contract .oktsuho-contract-hero:after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-180px;top:-240px;background:rgba(40,76,113,.08);pointer-events:none}.oktsuho--contract .oktsuho-hero-copy{position:relative;z-index:1}.oktsuho--contract .oktsuho-hero-copy h1{font-size:clamp(34px,4.3vw,58px);line-height:1.42;letter-spacing:.015em}.oktsuho--contract .oktsuho-hero-description{max-width:720px}
.oktsuho .oktsuho-contract-price-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:28px 0 20px;max-width:650px}.oktsuho .oktsuho-contract-price-pills>div{padding:17px 19px;border:1px solid #dae4ee;border-radius:14px;background:rgba(255,255,255,.9);box-shadow:0 10px 30px rgba(24,59,98,.06)}.oktsuho .oktsuho-contract-price-pills span,.oktsuho .oktsuho-contract-price-pills small{display:block;color:#183b62;font-size:12px;font-weight:700}.oktsuho .oktsuho-contract-price-pills strong{display:inline-block;margin-right:6px;color:#176b87;font-size:26px;line-height:1.35}.oktsuho .oktsuho-contract-price-pills small{display:inline;color:#183b62}
.oktsuho .oktsuho-contract-price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:960px;margin:0 auto}.oktsuho .oktsuho-contract-price-card{padding:34px;border:1px solid var(--oktsuho-line);border-radius:20px;background:#fff;box-shadow:0 14px 36px rgba(24,59,98,.06)}.oktsuho .oktsuho-contract-price-card.is-featured{border:2px solid #6f879f;background:linear-gradient(180deg,#fffaee,#fff)}.oktsuho .oktsuho-contract-price-card h3{font-size:21px;margin:9px 0 14px}.oktsuho .oktsuho-contract-price-card>p:last-child{font-size:14px;color:var(--oktsuho-muted)}.oktsuho .oktsuho-contract-cost-note{max-width:960px;margin:24px auto 0;padding:24px 28px;border-radius:14px;background:#fffaee;border-left:4px solid #284c71}.oktsuho .oktsuho-contract-cost-note h3{font-size:16px;margin-bottom:8px}.oktsuho .oktsuho-contract-cost-note p{font-size:13px;color:#183b62}
.oktsuho .oktsuho-flow-six{grid-template-columns:repeat(3,minmax(0,1fr))}.oktsuho .oktsuho-contract-band{background:linear-gradient(135deg,#164b56,#183b62)}.oktsuho .oktsuho-contract-band h2,.oktsuho .oktsuho-contract-band p{color:#fff}.oktsuho .oktsuho-contract-band .oktsuho-eyebrow{color:#faf2dd}.oktsuho--contract .oktsuho-service-card{border-color:#faf2dd}.oktsuho--contract .oktsuho-card-icon{color:#183b62;background:#fffaee}.oktsuho--contract .oktsuho-price-tag{background:#faf2dd;color:#183b62}.oktsuho--contract .oktsuho-price-amount strong{color:#176b87}.oktsuho--contract .oktsuho-line-info{background:#fffaee;border-color:#faf2dd}.oktsuho--contract .oktsuho-line-info h3{color:#183b62}
.oktsuho .oktsuho-legal-page h1{font-size:clamp(28px,4vw,42px);margin:5px 0 34px}.oktsuho .oktsuho-legal-body h2{font-size:21px;margin:34px 0 10px}.oktsuho .oktsuho-legal-body p{color:#49636a}.oktsuho .oktsuho-legal-dl{margin-top:28px;border-top:1px solid var(--oktsuho-line)}.oktsuho .oktsuho-legal-dl>div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;padding:18px 0;border-bottom:1px solid var(--oktsuho-line)}.oktsuho .oktsuho-legal-dl dt{font-weight:700;color:var(--oktsuho-navy)}.oktsuho .oktsuho-legal-dl dd{color:#536b72}.oktsuho .oktsuho-legal-note{margin-top:20px;font-size:12px;color:#6b7d82}.oktsuho .oktsuho-legal-back{margin-top:36px}
@media(max-width:900px){.oktsuho .oktsuho-flow-six{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.oktsuho .oktsuho-contract-price-pills,.oktsuho .oktsuho-contract-price-grid,.oktsuho .oktsuho-flow-six{grid-template-columns:1fr}.oktsuho .oktsuho-contract-price-card{padding:26px 22px}.oktsuho .oktsuho-contract-price-pills strong{font-size:24px}.oktsuho .oktsuho-legal-dl>div{grid-template-columns:1fr;gap:6px}.oktsuho--contract .oktsuho-hero-copy h1{font-size:32px}}
/* レスポンシブ表示補正 */
.oktsuho {
--oktsuho-font:"Yu Gothic","YuGothic","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
font-weight:400;
}
.oktsuho h1,.oktsuho h2,.oktsuho h3,.oktsuho h4 { font-weight:600; letter-spacing:.015em; }
.oktsuho .oktsuho-brand-imageonly { width:250px; max-width:25vw; min-width:190px; }
.oktsuho .oktsuho-header-brand-image { width:100%; height:50px; object-fit:contain; object-position:left center; }
.oktsuho .oktsuho-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; }
.oktsuho .oktsuho-header-brand-placeholder strong { font-size:12px; }
.oktsuho .oktsuho-header-brand-placeholder small { font-size:9px; margin-top:3px; }
@media (min-width: 1101px){
.oktsuho .oktsuho-contract-hero .oktsuho-container { max-width:1280px; }
.oktsuho .oktsuho-contract-hero .oktsuho-hero-grid { grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr); gap:20px; }
.oktsuho .oktsuho-contract-hero .oktsuho-hero-copy { margin-left:-24px; position:relative; z-index:3; }
.oktsuho .oktsuho-contract-hero .oktsuho-hero h1 { font-size:clamp(34px,3.15vw,46px); line-height:1.35; letter-spacing:.005em; width:max-content; max-width:720px; }
.oktsuho .oktsuho-contract-hero .oktsuho-hero h1 br { display:block; }
.oktsuho .oktsuho-contract-hero .oktsuho-eyebrow { margin-left:-18px; padding-left:18px; position:relative; }
.oktsuho .oktsuho-contract-hero .oktsuho-eyebrow::before { content:""; position:absolute; left:-48px; top:50%; width:52px; height:1px; background:#5d91cc; }
}
.oktsuho .oktsuho-office-section { background:linear-gradient(135deg,#f7fbff,#eef6fc); }
.oktsuho .oktsuho-office-grid { display:grid; grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr); gap:58px; align-items:center; }
.oktsuho .oktsuho-office-photo { min-height:410px; border-radius:24px; overflow:hidden; background:#fff; box-shadow:0 16px 42px rgba(36,82,126,.10); }
.oktsuho .oktsuho-office-photo img { width:100%; height:100%; min-height:410px; object-fit:cover; object-position:center top; }
.oktsuho .oktsuho-office-placeholder { min-height:410px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#6985a3; border:1px dashed #aec6dc; }
.oktsuho .oktsuho-office-placeholder .oktsuho-icon { width:62px; height:62px; }
.oktsuho .oktsuho-office-placeholder strong { font-size:18px; }
.oktsuho .oktsuho-office-placeholder span { font-size:12px; }
.oktsuho .oktsuho-office-copy h2 { font-size:32px; margin-bottom:18px; }
.oktsuho .oktsuho-office-name { font-size:20px; color:var(--oktsuho-navy); font-weight:600; margin-bottom:4px; }
.oktsuho .oktsuho-office-person { color:#456789; margin-bottom:20px; }
.oktsuho .oktsuho-office-profile { margin:24px 0; border-top:1px solid #d9e8f4; }
.oktsuho .oktsuho-office-profile>div { display:grid; grid-template-columns:112px 1fr; gap:16px; padding:11px 0; border-bottom:1px solid #d9e8f4; }
.oktsuho .oktsuho-office-profile dt { font-size:12px; font-weight:700; color:#507495; }
.oktsuho .oktsuho-office-profile dd { font-size:14px; color:#294d70; }
.oktsuho .oktsuho-column-category-block { margin-top:54px; }
.oktsuho .oktsuho-column-category-block + .oktsuho-column-category-block { margin-top:76px; padding-top:64px; border-top:1px solid #dce9f4; }
.oktsuho .oktsuho-column-category-head { margin-bottom:28px; }
.oktsuho .oktsuho-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; }
.oktsuho .oktsuho-column-category-head h2 { font-size:28px; margin-bottom:8px; }
.oktsuho .oktsuho-column-category-head p { color:#607a94; font-size:14px; }
.oktsuho .oktsuho-legal-lead { margin:18px 0 30px; padding:18px 20px; background:#f4f9fd; border-left:4px solid #3c80ce; color:#405f7d; }
.oktsuho .oktsuho-legal-body>p:first-child { margin-top:20px; padding:18px 20px; background:#f7fafc; border-radius:12px; }
@media (max-width:1100px){
.oktsuho .oktsuho-brand-imageonly { width:220px; max-width:32vw; min-width:175px; }
.oktsuho .oktsuho-header-brand-image { height:46px; }
}
@media (max-width:820px){
.oktsuho .oktsuho-office-grid { grid-template-columns:1fr; gap:30px; }
.oktsuho .oktsuho-office-photo,.oktsuho .oktsuho-office-photo img,.oktsuho .oktsuho-office-placeholder { min-height:0; aspect-ratio:4/3; }
.oktsuho .oktsuho-office-photo { max-width:620px; width:100%; margin-inline:auto; }
.oktsuho .oktsuho-contract-hero .oktsuho-hero h1 { max-width:100%; }
}
@media (max-width:640px){
.oktsuho .oktsuho-brand-imageonly { width:172px; min-width:150px; max-width:52vw; }
.oktsuho .oktsuho-header-brand-image { height:42px; }
.oktsuho .oktsuho-contract-hero .oktsuho-hero h1 { font-size:clamp(25px,7.4vw,32px); line-height:1.42; }
.oktsuho .oktsuho-office-copy h2 { font-size:26px; }
.oktsuho .oktsuho-office-profile>div { grid-template-columns:92px 1fr; gap:10px; }
}
/* =========================================================
v2.1.1 アピールエリア・料金詳細導線調整
========================================================= */
/* 「行政書士が全国対応」は線ではなくバッジ表示 */
.oktsuho .oktsuho-contract-hero .oktsuho-hero-badge {
display:inline-flex;
align-items:center;
width:auto;
margin:0 0 16px 0 !important;
padding:7px 15px !important;
border:1px solid rgba(24,59,98,.22);
border-radius:999px;
background:linear-gradient(135deg,#183b62,#284c71);
color:#fff !important;
font-size:12px;
font-weight:700;
line-height:1.4;
letter-spacing:.08em;
box-shadow:0 7px 20px rgba(24,59,98,.14);
}
.oktsuho .oktsuho-contract-hero .oktsuho-hero-badge::before,
.oktsuho .oktsuho-contract-hero .oktsuho-hero-badge::after {
display:none !important;
content:none !important;
}
/* 写真2との境界は斜めの切り取り線を使わず、ぼかし（フェード）のみ */
.oktsuho .oktsuho-contract-hero .oktsuho-hero-visual .oktsuho-photo--2,
.oktsuho .oktsuho-contract-hero .oktsuho-hero-visual .oktsuho-photo--2.has-image,
.oktsuho .oktsuho-contract-hero .oktsuho-hero-visual .oktsuho-photo--2.is-placeholder {
clip-path:none !important;
}
.oktsuho .oktsuho-contract-hero .oktsuho-hero-visual .oktsuho-photo--2.has-image::before,
.oktsuho .oktsuho-contract-hero .oktsuho-hero-visual .oktsuho-photo--2.has-image::after {
display:none !important;
content:none !important;
}
.oktsuho .oktsuho-contract-hero .oktsuho-hero-visual .oktsuho-photo--2 .oktsuho-slot-image,
.oktsuho .oktsuho-contract-hero .oktsuho-hero-visual .oktsuho-photo--2.oktsuho-fit-contain .oktsuho-slot-image,
.oktsuho .oktsuho-contract-hero .oktsuho-hero-visual .oktsuho-photo--2.oktsuho-fit-cover .oktsuho-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左へ */
.oktsuho .oktsuho-contract-hero .oktsuho-container {
width:calc(100% - 40px);
max-width:1440px;
}
.oktsuho .oktsuho-contract-hero .oktsuho-hero-grid {
grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
gap:14px;
}
.oktsuho .oktsuho-contract-hero .oktsuho-hero-copy {
margin-left:-40px;
padding-right:34px !important;
}
.oktsuho .oktsuho-contract-hero .oktsuho-hero-copy h1 {
width:auto;
max-width:820px;
}
.oktsuho .oktsuho-contract-hero .oktsuho-hero-description {
max-width:790px;
}
}
@media (min-width:821px) and (max-width:1100px) {
.oktsuho .oktsuho-contract-hero .oktsuho-container { width:calc(100% - 34px); }
.oktsuho .oktsuho-contract-hero .oktsuho-hero-copy { margin-left:-12px; }
}
/* 定額報酬の直下に、各プランの利用例を表示 */
.oktsuho .oktsuho-price-case-details {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px;
max-width:960px;
margin:28px auto 0;
}
.oktsuho .oktsuho-price-case-card {
scroll-margin-top:calc(var(--oktsuho-header-offset) + 18px);
padding:28px 30px;
border:1px solid #faf2dd;
border-radius:18px;
background:#fbfefd;
box-shadow:0 12px 30px rgba(24,59,98,.045);
}
.oktsuho .oktsuho-price-case-card.is-featured { border-color:#6f879f; background:linear-gradient(180deg,#fffaee,#fff); }
.oktsuho .oktsuho-price-case-head { margin-bottom:15px; }
.oktsuho .oktsuho-price-case-head>span {
display:inline-block;
margin-bottom:8px;
padding:4px 10px;
border-radius:999px;
background:#faf2dd;
color:#183b62;
font-size:11px;
font-weight:700;
}
.oktsuho .oktsuho-price-case-head h3 { font-size:18px; line-height:1.65; }
.oktsuho .oktsuho-price-case-card>p { color:#183b62; font-size:13.5px; line-height:1.9; }
.oktsuho .oktsuho-price-case-card ul { margin:17px 0; padding:0; list-style:none; }
.oktsuho .oktsuho-price-case-card li {
position:relative;
margin:8px 0;
padding-left:24px;
color:#183b62;
font-size:13.5px;
line-height:1.75;
}
.oktsuho .oktsuho-price-case-card li::before {
content:"✓";
position:absolute;
left:0;
top:0;
color:#183b62;
font-weight:700;
}
.oktsuho .oktsuho-price-case-card .oktsuho-price-case-note {
margin-top:16px;
padding-top:14px;
border-top:1px solid #faf2dd;
color:#183b62;
font-size:11.5px;
}
@media (max-width:760px) {
.oktsuho .oktsuho-price-case-details { grid-template-columns:1fr; }
.oktsuho .oktsuho-price-case-card { padding:23px 21px; }
.oktsuho .oktsuho-contract-hero .oktsuho-hero-badge { padding:6px 12px !important; font-size:11px; }
}
/* =========================================================
v2.1.3 バッジ・料金ボックス・口コミ導線調整
========================================================= */
/* バッジは文字量ぴったりの幅に固定し、右側の余白を作らない */
.oktsuho .oktsuho-contract-hero .oktsuho-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;
}
/* 料金カードを内容に合う幅へ詰め、左右の余分な空白を抑える */
.oktsuho .oktsuho-contract-price-grid {
grid-template-columns:repeat(2,minmax(0,390px));
justify-content:center;
gap:18px;
max-width:810px;
}
.oktsuho .oktsuho-contract-price-card {
width:100%;
padding:30px 28px;
}
/* 詳細アンカーは廃止し、利用例をそのまま続けて読める構成 */
.oktsuho .oktsuho-price-case-heading {
max-width:900px;
margin:34px auto 0;
text-align:center;
}
.oktsuho .oktsuho-price-case-heading .oktsuho-eyebrow { margin-bottom:7px; }
.oktsuho .oktsuho-price-case-heading h3 {
margin:0;
color:var(--oktsuho-navy);
font-size:clamp(22px,2.3vw,30px);
line-height:1.55;
}
.oktsuho .oktsuho-price-case-heading>p:not(.oktsuho-eyebrow) {
max-width:720px;
margin:10px auto 0;
color:var(--oktsuho-muted);
font-size:13.5px;
line-height:1.85;
}
.oktsuho .oktsuho-price-case-details { margin-top:20px; max-width:900px; }
/* 口コミ件数と外部口コミへの導線 */
.oktsuho .oktsuho-google-reviews .oktsuho-review-count-copy {
max-width:760px;
margin:12px auto 0 !important;
color:#3f5f78 !important;
font-size:14px !important;
line-height:1.85;
}
.oktsuho .oktsuho-google-reviews .oktsuho-review-count-copy strong {
color:#176b87;
font-weight:800;
}
.oktsuho .oktsuho-review-link-buttons {
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:12px;
margin:4px auto 26px;
}
.oktsuho .oktsuho-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;
}
.oktsuho .oktsuho-review-link-button.is-google {
border-color:#6f879f;
color:#183b62;
}
.oktsuho .oktsuho-review-link-button:hover {
transform:translateY(-1px);
border-color:#7fb5c4;
box-shadow:0 10px 24px rgba(27,97,118,.11);
}
@media (max-width:760px) {
.oktsuho .oktsuho-contract-price-grid { grid-template-columns:1fr; max-width:430px; gap:16px; }
.oktsuho .oktsuho-contract-price-card { padding:26px 22px; }
.oktsuho .oktsuho-price-case-heading { margin-top:28px; }
.oktsuho .oktsuho-price-case-heading h3 { font-size:23px; }
.oktsuho .oktsuho-review-link-buttons { gap:9px; margin-bottom:22px; }
.oktsuho .oktsuho-review-link-button { width:100%; max-width:330px; min-width:0; }
}
/* =========================================================
v2.1.4 ヘッダー・FV見出し・サービス画像・事務所紹介調整
========================================================= */
/* ロゴ＋サイト名画像は一段大きくし、元画像の解像度を活かして表示 */
.oktsuho .oktsuho-brand-imageonly {
width:300px !important;
max-width:30vw !important;
min-width:230px !important;
}
.oktsuho .oktsuho-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;
}
/* ファーストビュー見出し：細めの明朝体で上品に */
.oktsuho .oktsuho-contract-hero .oktsuho-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;
}
.oktsuho .oktsuho-contract-hero .oktsuho-hero-admin {
color:#183b62;
font-weight:600;
}
/* サービス4項目：指定画像を同じ大きさ・同じ見せ方で使用 */
.oktsuho .oktsuho-service-card .oktsuho-card-illustration {
width:112px;
height:112px;
margin:0 auto 20px;
border-radius:26px;
overflow:hidden;
background:#fffaee;
box-shadow:0 8px 22px rgba(24,59,98,.08);
}
.oktsuho .oktsuho-service-card .oktsuho-card-illustration img {
display:block;
width:100%;
height:100%;
object-fit:cover;
}
@media (max-width:1100px) {
.oktsuho .oktsuho-brand-imageonly { width:260px !important; max-width:36vw !important; min-width:205px !important; }
.oktsuho .oktsuho-header-brand-image { height:56px !important; max-height:56px !important; }
}
@media (max-width:640px) {
.oktsuho .oktsuho-brand-imageonly { width:196px !important; min-width:170px !important; max-width:57vw !important; }
.oktsuho .oktsuho-header-brand-image { height:48px !important; max-height:48px !important; }
.oktsuho .oktsuho-service-card .oktsuho-card-illustration { width:96px; height:96px; margin-bottom:16px; border-radius:22px; }
.oktsuho .oktsuho-contract-hero .oktsuho-hero-copy h1 { font-weight:500 !important; letter-spacing:.018em !important; }
}
/* =========================================================
v2.1.5 コラム本文用 共通BOX・表デザイン
========================================================= */
.oktsuho .oktsuho-single-content .oktsuho-article-box,
.oktsuho .oktsuho-single-content .oktsuho-price-box,
.oktsuho .oktsuho-single-content .oktsuho-law-box,
.oktsuho .oktsuho-single-content .oktsuho-related-box,
.oktsuho .oktsuho-single-content .oktsuho-reference-box {
margin:28px 0;
padding:22px 24px;
border:1px solid #faf2dd;
border-radius:16px;
background:#fffaee;
box-shadow:0 6px 20px rgba(24,59,98,.05);
}
.oktsuho .oktsuho-single-content .oktsuho-article-box {
border-left:5px solid #6f879f;
}
.oktsuho .oktsuho-single-content .oktsuho-price-box {
border:2px solid #6f879f;
background:linear-gradient(180deg,#fffaee,#fff);
}
.oktsuho .oktsuho-single-content .oktsuho-price-box strong {
color:#183b62;
}
.oktsuho .oktsuho-single-content .oktsuho-law-box {
border:1px solid #cbddeb;
border-left:5px solid #4f83b3;
background:linear-gradient(180deg,#f5f9fd,#fff);
}
.oktsuho .oktsuho-single-content .oktsuho-law-box .oktsuho-law-title {
margin:0 0 10px;
color:#245b8d;
font-weight:800;
font-size:16px;
}
.oktsuho .oktsuho-single-content .oktsuho-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;
}
.oktsuho .oktsuho-single-content .oktsuho-law-box .oktsuho-law-note {
margin-top:10px;
color:#526c82;
font-size:14px;
}
.oktsuho .oktsuho-single-content .oktsuho-related-box {
background:#f5f9fd;
border-color:#d7e5f1;
}
.oktsuho .oktsuho-single-content .oktsuho-reference-box {
background:#fbfbfb;
border-color:#e1e6ea;
}
/* v2.1.12: 参考リンクは「・」とリンク文字を同一段落内に固定 */
.oktsuho .oktsuho-single-content .oktsuho-reference-box p {
display:block !important;
margin:.65em 0 !important;
padding:0 !important;
}
.oktsuho .oktsuho-single-content .oktsuho-reference-box p > a {
display:inline !important;
margin:0 !important;
padding:0 !important;
}
.oktsuho .oktsuho-single-content .oktsuho-article-box > :first-child,
.oktsuho .oktsuho-single-content .oktsuho-price-box > :first-child,
.oktsuho .oktsuho-single-content .oktsuho-law-box > :first-child,
.oktsuho .oktsuho-single-content .oktsuho-related-box > :first-child,
.oktsuho .oktsuho-single-content .oktsuho-reference-box > :first-child {
margin-top:0;
}
.oktsuho .oktsuho-single-content .oktsuho-article-box > :last-child,
.oktsuho .oktsuho-single-content .oktsuho-price-box > :last-child,
.oktsuho .oktsuho-single-content .oktsuho-law-box > :last-child,
.oktsuho .oktsuho-single-content .oktsuho-related-box > :last-child,
.oktsuho .oktsuho-single-content .oktsuho-reference-box > :last-child {
margin-bottom:0;
}
.oktsuho .oktsuho-single-content .oktsuho-related-box ul,
.oktsuho .oktsuho-single-content .oktsuho-reference-box ul {
margin:12px 0 0;
padding-left:1.25em;
}
.oktsuho .oktsuho-single-content .oktsuho-related-box li,
.oktsuho .oktsuho-single-content .oktsuho-reference-box li {
margin:.55em 0;
}
.oktsuho .oktsuho-single-content table.oktsuho-data-table {
display:table;
width:100%;
border-collapse:separate;
border-spacing:0;
overflow:hidden;
border:1px solid #dae4ee;
border-radius:12px;
background:#fff;
}
.oktsuho .oktsuho-single-content table.oktsuho-data-table th {
background:#fffaee;
color:#183b62;
font-weight:700;
}
.oktsuho .oktsuho-single-content table.oktsuho-data-table th,
.oktsuho .oktsuho-single-content table.oktsuho-data-table td {
padding:13px 14px;
border:0;
border-right:1px solid #faf2dd;
border-bottom:1px solid #faf2dd;
vertical-align:top;
}
.oktsuho .oktsuho-single-content table.oktsuho-data-table tr:last-child > * { border-bottom:0; }
.oktsuho .oktsuho-single-content table.oktsuho-data-table tr > *:last-child { border-right:0; }
@media (max-width:640px) {
.oktsuho .oktsuho-single-content .oktsuho-article-box,
.oktsuho .oktsuho-single-content .oktsuho-price-box,
.oktsuho .oktsuho-single-content .oktsuho-law-box,
.oktsuho .oktsuho-single-content .oktsuho-related-box,
.oktsuho .oktsuho-single-content .oktsuho-reference-box { padding:18px 17px; border-radius:13px; }
.oktsuho .oktsuho-single-content table.oktsuho-data-table { display:block; overflow-x:auto; }
}
/* 2.1.17 記事用：料金・問い合わせCTAボタン */
/* 記事本文内のCTAは、単独表示でも中央寄せ＋本文との上下余白を確保する。 */
.oktsuho .oktsuho-single-content a.oktsuho-btn {
display:flex;
width:fit-content;
max-width:100%;
margin-top:24px;
margin-bottom:24px;
margin-left:auto;
margin-right:auto;
}
/* ラッパーを付け忘れた連続ボタンも、ボタン同士が詰まらないよう広めに離す。 */
.oktsuho .oktsuho-single-content a.oktsuho-btn + a.oktsuho-btn {
margin-top:24px;
}
.oktsuho .oktsuho-single-content .oktsuho-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内に空段落・改行が入っても、ボタン間に余計な空白を作らない。 */
.oktsuho .oktsuho-single-content .oktsuho-article-actions > p {
margin:0 !important;
padding:0 !important;
}
.oktsuho .oktsuho-single-content .oktsuho-article-actions > br {
display:none !important;
}
.oktsuho .oktsuho-single-content .oktsuho-article-actions .oktsuho-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;
}
.oktsuho .oktsuho-single-content .oktsuho-price-box .oktsuho-article-actions {
margin-top:28px;
margin-bottom:8px;
}
/* 2.1.14 記事用FAQ：クリック／タップで回答を開閉 */
.oktsuho .oktsuho-single-content .oktsuho-article-faq {
margin:28px 0;
}
.oktsuho .oktsuho-single-content .oktsuho-article-faq details {
margin:0 0 12px;
border:1px solid #faf2dd;
border-radius:13px;
background:#fff;
overflow:hidden;
box-shadow:0 4px 14px rgba(24,59,98,.04);
}
.oktsuho .oktsuho-single-content .oktsuho-article-faq details:last-child {
margin-bottom:0;
}
.oktsuho .oktsuho-single-content .oktsuho-article-faq summary {
position:relative;
display:block;
padding:16px 50px 16px 18px;
color:#183b62;
font-weight:700;
line-height:1.75;
cursor:pointer;
list-style:none;
background:#fffaee;
}
.oktsuho .oktsuho-single-content .oktsuho-article-faq summary::-webkit-details-marker {
display:none;
}
.oktsuho .oktsuho-single-content .oktsuho-article-faq summary::after {
content:"＋";
position:absolute;
top:50%;
right:18px;
transform:translateY(-50%);
color:#183b62;
font-size:22px;
font-weight:500;
line-height:1;
}
.oktsuho .oktsuho-single-content .oktsuho-article-faq details[open] > summary::after {
content:"−";
}
.oktsuho .oktsuho-single-content .oktsuho-article-faq-answer {
padding:16px 18px 18px;
color:#183b62;
line-height:1.9;
border-top:1px solid #faf2dd;
}
.oktsuho .oktsuho-single-content .oktsuho-article-faq-answer > :first-child { margin-top:0; }
.oktsuho .oktsuho-single-content .oktsuho-article-faq-answer > :last-child { margin-bottom:0; }
@media (max-width:640px) {
.oktsuho .oktsuho-single-content a.oktsuho-btn + a.oktsuho-btn {
margin-top:20px;
}
.oktsuho .oktsuho-single-content .oktsuho-article-actions {
display:grid;
grid-template-columns:1fr;
gap:20px;
margin:30px 0;
}
.oktsuho .oktsuho-single-content .oktsuho-article-actions > p {
margin:0 !important;
}
.oktsuho .oktsuho-single-content .oktsuho-article-actions .oktsuho-btn {
width:100%;
min-width:0;
white-space:normal;
}
.oktsuho .oktsuho-single-content .oktsuho-article-faq summary {
padding:15px 46px 15px 15px;
font-size:14px;
}
.oktsuho .oktsuho-single-content .oktsuho-article-faq summary::after {
right:15px;
}
.oktsuho .oktsuho-single-content .oktsuho-article-faq-answer {
padding:15px;
font-size:14px;
}
}
/* 2.1.6 スマホ専用アピールエリア差し替え */
.oktsuho .oktsuho-mobile-hero-image { display:none; }
.oktsuho .oktsuho-mobile-hero-image img {
display:block;
width:100%;
height:auto;
}
@media (max-width:820px) {
.oktsuho .oktsuho-mobile-hero-image {
display:block;
width:100%;
max-width:100%;
background:#ffffff;
}
.oktsuho .oktsuho-hero .oktsuho-hero-grid {
display:none !important;
}
.oktsuho .oktsuho-hero {
padding:0 !important;
background:#fff !important;
}
}
/* スマホのアピールエリア：装飾用のぼかしを非表示 */
@media (max-width:820px) {
.oktsuho--contract .oktsuho-contract-hero::after,
.oktsuho .oktsuho-contract-hero::after {
content:none !important;
display:none !important;
background:none !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
}
}
/* 2.1.8 記事用：目次・公式書式ダウンロード */
.oktsuho .oktsuho-single-content .oktsuho-toc-box,
.oktsuho .oktsuho-single-content .oktsuho-download-box {
margin:30px 0;
padding:22px 24px;
border:1px solid #dae4ee;
border-radius:14px;
background:#fffaee;
box-shadow:0 8px 24px rgba(24,59,98,.05);
}
.oktsuho .oktsuho-single-content .oktsuho-toc-box > :first-child,
.oktsuho .oktsuho-single-content .oktsuho-download-box > :first-child { margin-top:0; }
.oktsuho .oktsuho-single-content .oktsuho-toc-box > :last-child,
.oktsuho .oktsuho-single-content .oktsuho-download-box > :last-child { margin-bottom:0; }
.oktsuho .oktsuho-single-content .oktsuho-toc-box h2,
.oktsuho .oktsuho-single-content .oktsuho-toc-box h3,
.oktsuho .oktsuho-single-content .oktsuho-download-box h2,
.oktsuho .oktsuho-single-content .oktsuho-download-box h3 {
margin:0 0 14px;
padding:0;
border:0;
font-size:20px;
color:#183b62;
}
.oktsuho .oktsuho-single-content .oktsuho-toc-box ol,
.oktsuho .oktsuho-single-content .oktsuho-toc-box ul {
margin:0;
padding-left:1.7em;
list-style-type:decimal;
}
.oktsuho .oktsuho-single-content .oktsuho-toc-box li {
margin:3px 0;
padding-left:.08em;
line-height:1.5;
}
.oktsuho .oktsuho-single-content .oktsuho-toc-box li::marker {
color:#183b62;
font-weight:800;
}
.oktsuho .oktsuho-single-content .oktsuho-toc-box a {
color:#183b62 !important;
-webkit-text-fill-color:#183b62 !important;
font-weight:700;
text-decoration:none !important;
}
.oktsuho .oktsuho-single-content .oktsuho-toc-box a:hover { text-decoration:underline !important; text-underline-offset:3px; }
.oktsuho .oktsuho-single-content .oktsuho-download-box { background:#fff; border-color:#cfe0eb; }
.oktsuho .oktsuho-single-content .oktsuho-download-list { display:grid; gap:10px; margin:16px 0 0; padding:0; list-style:none; }
.oktsuho .oktsuho-single-content .oktsuho-download-list li { margin:0; }
.oktsuho .oktsuho-single-content .oktsuho-download-box a.oktsuho-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;
}
.oktsuho .oktsuho-single-content .oktsuho-download-box a.oktsuho-download-link:hover { background:#eef6fb; border-color:#a9c9df; }
.oktsuho .oktsuho-single-content .oktsuho-download-meta { display:block; margin-top:5px; color:#687f91; font-size:12px; font-weight:400; }
@media (max-width:600px) {
.oktsuho .oktsuho-single-content .oktsuho-toc-box,
.oktsuho .oktsuho-single-content .oktsuho-download-box { padding:18px 17px; border-radius:12px; }
.oktsuho .oktsuho-single-content .oktsuho-toc-box h2,
.oktsuho .oktsuho-single-content .oktsuho-toc-box h3,
.oktsuho .oktsuho-single-content .oktsuho-download-box h2,
.oktsuho .oktsuho-single-content .oktsuho-download-box h3 { font-size:18px; }
}
/* Construction contract support: preserve source layout, fix responsive hero and add new controls. */
.oktsuho .oktsuho-brand-text{display:flex;flex-direction:column;line-height:1.4;color:#183b62;text-align:left;white-space:nowrap}
.oktsuho .oktsuho-brand-text small{font-size:11px;letter-spacing:.09em;font-weight:600}
.oktsuho .oktsuho-brand-text strong{font-size:22px;font-weight:800;letter-spacing:0}
.oktsuho .oktsuho-brand.oktsuho-brand-imageonly{min-width:0;width:auto}
.oktsuho .oktsuho-mobile-photo{display:none}
.oktsuho .oktsuho-visual-placeholder{width:100%;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px;text-align:center;background:linear-gradient(145deg,#faf2dd,#faf2dd);color:#183b62;border-radius:8px}
.oktsuho .oktsuho-visual-placeholder svg{width:70px;height:70px;opacity:.65}
.oktsuho .oktsuho-visual-placeholder small{font-size:10px;letter-spacing:.16em}
.oktsuho .oktsuho-visual-placeholder strong{font-size:28px;line-height:1.9;font-family:"Yu Mincho","Hiragino Mincho ProN",serif}
.oktsuho .oktsuho-visual-placeholder>span{font-size:13px}
.oktsuho .oktsuho-service-icon{display:flex;width:94px;height:94px;align-items:center;justify-content:center;background:#faf2dd;border:1px solid #dae4ee;border-radius:50%;color:#183b62;margin:22px auto}
.oktsuho .oktsuho-service-icon svg{width:44px;height:44px}
.oktsuho .oktsuho-contract-price-pills strong{font-size:24px;white-space:normal}
.oktsuho .oktsuho-contract-price-pills>div{min-width:0}
.oktsuho .oktsuho-price-amount strong{font-size:clamp(26px,3vw,40px)}
.oktsuho .oktsuho-photo.is-placeholder::before,.oktsuho .oktsuho-photo.is-placeholder::after{display:none}
.oktsuho .oktsuho-independent-note{font-size:12px;line-height:1.8;border-top:1px solid rgba(40,76,113,.3);padding-top:24px;margin-top:24px}
.oktsuho .oktsuho-column-tabs{display:flex;gap:14px;justify-content:center;margin:0 0 28px;flex-wrap:wrap}
.oktsuho .oktsuho-column-tabs a{border:1px solid #dae4ee;padding:12px 24px;border-radius:8px;color:#183b62;background:white;font-weight:700;text-decoration:none}
.oktsuho .oktsuho-column-thumb img{width:100%;height:auto;display:block;object-fit:contain}
.oktsuho .oktsuho-column-category-block{margin:36px 0 56px;scroll-margin-top:150px}
.oktsuho .oktsuho-area-filter{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:20px 0;padding:20px;background:#fffaee;border:1px solid #faf2dd;border-radius:10px}
.oktsuho .oktsuho-area-filter select{padding:12px;min-width:190px;font:inherit;border:1px solid #6f879f;background:#fff;border-radius:5px}
.oktsuho .oktsuho-area-filter .oktsuho-btn{margin:0;min-height:46px}
.oktsuho .oktsuho-pref-list{margin:24px 0;padding:18px 22px;background:#fff;border:1px solid #faf2dd;border-radius:10px}
.oktsuho .oktsuho-pref-list summary{cursor:pointer;font-weight:700}
.oktsuho .oktsuho-pref-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;padding-top:18px}
.oktsuho .oktsuho-pref-grid a{padding:10px 4px;background:#faf2dd;text-align:center;color:#183b62;font-size:14px;text-decoration:none;border-radius:4px}
.oktsuho .oktsuho-pagination{display:flex;justify-content:center;gap:8px;margin:30px 0;flex-wrap:wrap}
.oktsuho .oktsuho-pagination .page-numbers{padding:8px 15px;border:1px solid #dae4ee;border-radius:6px;text-decoration:none}
.oktsuho .oktsuho-pagination .current{background:#183b62;color:white}
.oktsuho .oktsuho-single-content{overflow-wrap:anywhere}
.oktsuho .oktsuho-single-content>h2{scroll-margin-top:160px}
.oktsuho .oktsuho-toc{margin:28px 0;padding:20px 24px;background:#fffaee;border:1px solid #dae4ee;border-radius:12px}
.oktsuho .oktsuho-toc>strong{font-size:19px}
.oktsuho .oktsuho-toc ol{list-style:decimal;margin:10px 0 0;padding-left:1.7em}
.oktsuho .oktsuho-toc li{margin:3px 0;line-height:1.65}
.oktsuho .oktsuho-toc a{color:#183b62;text-decoration:none;font-size:15px}
.oktsuho .oktsuho-toc li::marker{color:#183b62;font-weight:700}
.oktsuho .oktsuho-article-price,.oktsuho .oktsuho-article-cta,.oktsuho .oktsuho-hall-info,.oktsuho .oktsuho-service-reference,.oktsuho .oktsuho-article-office{margin:36px 0;padding:26px;border:1px solid #dae4ee;border-radius:14px;background:#fffaee}
.oktsuho .oktsuho-single-content aside h2,.oktsuho .oktsuho-service-reference h2,.oktsuho .oktsuho-article-office h2{margin:0 0 16px;padding:0;border:0;background:none;color:#183b62;box-shadow:none;font-size:22px}
.oktsuho .oktsuho-single-content aside h2::before,.oktsuho .oktsuho-single-content aside h2::after{display:none}
.oktsuho .oktsuho-article-cta{text-align:center;background:#faf2dd}
.oktsuho .oktsuho-article-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center}
.oktsuho .oktsuho-article-price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.oktsuho .oktsuho-article-price-grid>div{padding:18px;background:#fff;border-radius:8px;border:1px solid #faf2dd}
.oktsuho .oktsuho-article-price-grid p{font-size:24px;font-weight:800;margin:10px 0 0;color:#183b62}
.oktsuho .oktsuho-article-price-grid small{font-size:12px;font-weight:400}
.oktsuho .oktsuho-hall-info dl div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid #faf2dd}
.oktsuho .oktsuho-hall-info dt{font-weight:700}.oktsuho .oktsuho-hall-info dd{margin:0}
.oktsuho .oktsuho-single-content details{border:1px solid #dae4ee;border-radius:8px;background:#fff;margin:12px 0;overflow:hidden}
.oktsuho .oktsuho-single-content details summary{padding:18px 22px;cursor:pointer;background:#fffaee;font-weight:700;line-height:1.6}
.oktsuho .oktsuho-single-content details>p{padding:5px 22px 16px;margin:0}
.oktsuho .oktsuho-single-content .oktsuho-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
.oktsuho .oktsuho-single-content .oktsuho-column-body h3{margin-top:8px;padding:0;border:0;font-size:18px}
.oktsuho .oktsuho-map-consent iframe{width:100%;height:300px;border:0;border-radius:10px;display:block}
.oktsuho .oktsuho-reply-options{display:flex;gap:26px}.oktsuho .oktsuho-reply-options label{display:flex;align-items:center;gap:6px}
.oktsuho .oktsuho-form input[type=radio],.oktsuho .oktsuho-form input[type=checkbox]{width:auto;min-width:18px;flex-shrink:0;accent-color:#183b62}
.oktsuho .oktsuho-floating-banner{position:fixed;right:15px;bottom:100px;width:150px;z-index:20}
.oktsuho .oktsuho-floating-banner img{width:100%;height:auto;display:block;box-shadow:0 5px 20px #0002}
.oktsuho .oktsuho-legal-body table{width:100%;border-collapse:collapse}
.oktsuho .oktsuho-legal-body th,.oktsuho .oktsuho-legal-body td{padding:16px;border:1px solid #dae4ee;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.oktsuho .oktsuho-legal-body th{width:28%;background:#faf2dd}
.oktsuho :focus-visible{outline:3px solid #183b62;outline-offset:4px}
@media(max-width:1060px){
.oktsuho .oktsuho-brand-text strong{font-size:21px}.oktsuho .oktsuho-brand-text small{font-size:10px}
.oktsuho .oktsuho-floating-banner{display:none}
}
@media(max-width:820px){
.oktsuho .oktsuho-hero .oktsuho-hero-grid{display:grid!important;grid-template-columns:1fr!important;gap:24px;padding-top:34px;padding-bottom:32px}
.oktsuho .oktsuho-hero .oktsuho-hero-copy{order:1}.oktsuho .oktsuho-hero .oktsuho-hero-visual{order:2;display:block!important;height:auto;min-height:0;max-width:100%;width:100%;position:relative;inset:auto;transform:none;clip-path:none}
.oktsuho .oktsuho-hero{padding:0!important;background:#fffaee!important}
.oktsuho .oktsuho-mobile-photo{display:block;width:100%;height:auto;object-fit:contain;border-radius:10px}
.oktsuho .oktsuho-hero-visual.has-mobile-photo>.oktsuho-photo{display:none!important}
.oktsuho .oktsuho-visual-placeholder{min-height:220px;padding:24px}
.oktsuho .oktsuho-visual-placeholder strong{font-size:24px;line-height:1.7}
.oktsuho .oktsuho-visual-placeholder svg{width:45px;height:45px}
.oktsuho .oktsuho-hero .oktsuho-photo{width:100%;max-width:100%;min-height:0}
.oktsuho .oktsuho-contract-price-pills strong{font-size:22px}
.oktsuho .oktsuho-pref-grid{grid-template-columns:repeat(4,1fr)}
.oktsuho .oktsuho-brand-text strong{font-size:18px}.oktsuho .oktsuho-brand-text small{font-size:9px;letter-spacing:0}
}
@media(max-width:600px){
.oktsuho .oktsuho-header-main{gap:8px}.oktsuho .oktsuho-brand-text strong{font-size:16px}
.oktsuho .oktsuho-brand-text small{font-size:8px}.oktsuho .oktsuho-mobile-phone-number{font-size:14px!important}
.oktsuho .oktsuho-mobile-phone>span{font-size:8px!important;white-space:nowrap}
.oktsuho .oktsuho-hero h1{font-size:clamp(26px,7.2vw,34px)!important;line-height:1.65!important;white-space:normal!important;overflow-wrap:normal}
.oktsuho .oktsuho-hero-description{font-size:14px;line-height:1.95}
.oktsuho .oktsuho-article-price,.oktsuho .oktsuho-article-cta,.oktsuho .oktsuho-hall-info,.oktsuho .oktsuho-service-reference,.oktsuho .oktsuho-article-office{padding:20px 16px}
.oktsuho .oktsuho-article-price-grid,.oktsuho .oktsuho-single-content .oktsuho-columns{grid-template-columns:1fr}
.oktsuho .oktsuho-hall-info dl div{grid-template-columns:1fr;gap:4px}
.oktsuho .oktsuho-area-filter{padding:16px}.oktsuho .oktsuho-area-filter select{flex:1;min-width:0;width:100%}
.oktsuho .oktsuho-toc{padding:18px}.oktsuho .oktsuho-pref-grid{grid-template-columns:repeat(3,1fr)}
.oktsuho .oktsuho-reply-options{gap:16px}.oktsuho .oktsuho-legal-body th{width:32%;min-width:84px}
.oktsuho .oktsuho-legal-body th,.oktsuho .oktsuho-legal-body td{padding:12px 10px;font-size:14px}
}
@media(max-width:360px){
.oktsuho .oktsuho-brand-text strong{font-size:14px}.oktsuho .oktsuho-brand-text small{font-size:7px}
.oktsuho .oktsuho-mobile-phone-number{font-size:12px!important}.oktsuho .oktsuho-header-main{gap:5px}
.oktsuho .oktsuho-menu-toggle{min-width:36px;width:36px;padding:4px}.oktsuho .oktsuho-menu-label{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.oktsuho *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Reset only the inherited full-bleed hero's size/debug-placeholder overrides. */
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-container.oktsuho-hero-grid{display:grid!important;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)!important;width:calc(100% - 80px)!important;max-width:1240px!important;margin:0 auto!important;padding:52px 0!important;gap:28px!important;min-height:580px;position:relative!important}
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-hero-copy{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column;justify-content:center;background:none!important;z-index:3}
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-hero-copy h1{font-size:clamp(32px,3.15vw,46px)!important;line-height:1.6!important;text-wrap:wrap!important;width:100%!important;max-width:100%!important;letter-spacing:0!important}
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-hero-visual{position:relative!important;inset:auto!important;min-height:440px!important;height:100%!important;width:100%!important;max-width:100%!important;margin:0!important;overflow:hidden!important}
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-hero-visual .oktsuho-photo--2{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-width:100%!important;border:0!important;background:transparent!important;clip-path:none!important;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%)!important;mask-image:linear-gradient(90deg,transparent 0%,#000 18%)!important}
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-photo--2 .oktsuho-visual-placeholder{height:100%;min-height:440px;border-radius:12px;background:linear-gradient(145deg,#faf2dd,#faf2dd)}
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-photo--2 .oktsuho-slot-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;mask-image:none!important;-webkit-mask-image:none!important}
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-photo--2.oktsuho-fit-cover .oktsuho-slot-image{object-fit:cover!important}
.oktsuho.oktsuho--contract .oktsuho-photo--3 .oktsuho-slot-image{display:block;width:100%;height:100%;object-fit:contain}.oktsuho.oktsuho--contract .oktsuho-photo--3.oktsuho-fit-cover .oktsuho-slot-image{object-fit:cover}
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-actions-hero{display:flex!important;gap:12px;flex-wrap:wrap;margin:8px 0 18px}
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-actions-hero .oktsuho-btn{white-space:normal;font-size:14px;padding:13px 20px;min-width:0}
.oktsuho .oktsuho-field>label{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;white-space:normal}
.oktsuho .oktsuho-required,.oktsuho .oktsuho-optional{white-space:normal;font-size:11px!important;max-width:100%;line-height:1.6}
@media(max-width:820px){
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-container.oktsuho-hero-grid{grid-template-columns:1fr!important;width:calc(100% - 36px)!important;max-width:620px!important;padding:32px 0!important;min-height:0!important;gap:26px!important}
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-hero-copy h1{font-size:clamp(26px,6.6vw,34px)!important;line-height:1.6!important}
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-hero-visual{min-height:0!important;height:auto!important;align-self:auto!important}
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-hero-visual .oktsuho-photo--2{position:relative!important;inset:auto!important;height:auto!important;mask-image:none!important;-webkit-mask-image:none!important}
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-photo--2 .oktsuho-visual-placeholder{height:auto;min-height:230px}
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-photo--2 .oktsuho-slot-image{position:relative!important;inset:auto!important;height:auto!important;max-height:420px!important}
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-hero-visual.has-mobile-photo>.oktsuho-photo--2{display:none!important}
}
.oktsuho .oktsuho-honeypot{display:none!important}
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-actions-hero .oktsuho-btn{width:auto!important;min-width:210px!important;max-width:100%!important;min-height:54px!important;gap:10px;flex:0 1 auto;white-space:nowrap}
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-actions-hero .oktsuho-btn>span{white-space:nowrap}
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-actions-hero .oktsuho-btn .oktsuho-icon{width:21px;height:21px;flex:0 0 21px}
@media(max-width:600px){.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-actions-hero .oktsuho-btn{width:100%!important;min-width:0!important}}
/* v1.0.1 — restore the reference site's unified photo/copy layout, without baked-in text. */
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(120deg,#fffaee,#fff 60%,#fffaee)!important}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-container.oktsuho-hero-grid{display:block!important;position:relative!important;width:calc(100% - 80px)!important;max-width:1240px!important;min-height:610px!important;padding:60px 0!important}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-hero-copy{position:relative!important;z-index:4!important;width:56%!important;max-width:700px!important;padding:0!important;min-height:480px;justify-content:center}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-hero-copy h1{font-size:clamp(32px,3.15vw,46px)!important;line-height:1.6!important;max-width:100%!important}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-hero-description{max-width:100%;line-height:1.95}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-hero-visual{position:absolute!important;z-index:1;inset:0 -10vw 0 40%!important;width:auto!important;height:100%!important;max-width:none!important;min-height:100%!important;margin:0!important;pointer-events:none}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-hero-visual .oktsuho-photo--2{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-width:none!important;border-radius:0!important;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)!important;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 10%,#000 28%)!important;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 10%,#000 28%)!important}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-photo--2 .oktsuho-slot-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important;object-position:center!important}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-photo--2.oktsuho-fit-cover .oktsuho-slot-image{object-fit:cover!important}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-photo--2 .oktsuho-visual-placeholder{height:100%;min-height:100%;border-radius:0;padding-left:24%;padding-right:12%}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-mobile-photo{display:none}
@media(max-width:1060px) and (min-width:821px){
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-container.oktsuho-hero-grid{width:calc(100% - 48px)!important;padding:40px 0!important;min-height:560px!important}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-hero-copy{width:62%!important}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-hero-visual{left:42%!important;opacity:.85}
}
@media(max-width:820px){
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-container.oktsuho-hero-grid{width:calc(100% - 36px)!important;max-width:620px!important;min-height:0!important;padding:32px 0!important}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-hero-copy{width:100%!important;max-width:100%!important;min-height:0;padding:0!important;background:transparent!important}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-hero-copy h1{font-size:clamp(26px,6.6vw,34px)!important;line-height:1.6!important}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-hero-visual{position:absolute!important;inset:0 -18px 0 20%!important;width:auto!important;height:100%!important;min-height:100%!important;opacity:.17}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-hero-visual .oktsuho-photo--2{position:absolute!important;inset:0!important;height:100%!important;clip-path:none!important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 52%)!important;mask-image:linear-gradient(90deg,transparent,#000 52%)!important}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-photo--2 .oktsuho-slot-image{position:absolute!important;inset:0!important;height:100%!important;max-height:none!important}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-hero-visual .oktsuho-photo--2.is-placeholder{display:none!important}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-hero-visual.has-mobile-photo .oktsuho-photo--2{display:none!important}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-mobile-photo{display:block;position:absolute;inset:0;width:100%;height:100%;border-radius:0;object-fit:cover;object-position:65% center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 52%);mask-image:linear-gradient(90deg,transparent,#000 52%)}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-mobile-fit-contain .oktsuho-mobile-photo{object-fit:contain}
}
/* Scoped article filters: ordinary posts, themes and other plugins are untouched. */
.oktsuho .oktsuho-area-filter{display:grid;grid-template-columns:minmax(150px,1fr) minmax(155px,1fr) minmax(200px,1.6fr) auto;gap:16px;align-items:end}
.oktsuho .oktsuho-search-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.oktsuho .oktsuho-search-field label{font-size:14px;font-weight:700}
.oktsuho .oktsuho-search-field select,.oktsuho .oktsuho-search-field input{width:100%;min-width:0;max-width:100%;min-height:48px;border:1px solid #dae4ee;border-radius:8px;background:#fff;padding:10px 12px;color:#183b62;font:inherit;font-size:15px;box-sizing:border-box}
.oktsuho .oktsuho-search-actions{display:flex;flex-direction:column;align-items:center;gap:5px}
.oktsuho .oktsuho-search-actions .oktsuho-btn{min-height:48px;min-width:110px;padding:10px 18px;white-space:nowrap}
.oktsuho .oktsuho-search-actions>a{font-size:12px;text-underline-offset:3px}
.oktsuho .oktsuho-search-count{margin:18px 0;color:#183b62;font-size:14px;overflow-wrap:anywhere}
.oktsuho .oktsuho-pref-grid a[aria-current=true]{background:#183b62;color:#fff}
.oktsuho .oktsuho-pagination{gap:8px;flex-wrap:wrap}
.oktsuho .post-password-form{padding:24px;border:1px solid #dae4ee;border-radius:12px}
.oktsuho .post-password-form input{max-width:100%;min-height:44px}
@media(max-width:1060px){.oktsuho .oktsuho-area-filter{grid-template-columns:repeat(2,minmax(0,1fr))}.oktsuho .oktsuho-search-actions{flex-direction:row;gap:18px}}
@media(max-width:600px){.oktsuho .oktsuho-area-filter{grid-template-columns:1fr;gap:14px}.oktsuho .oktsuho-search-field select,.oktsuho .oktsuho-search-field input{font-size:16px}.oktsuho .oktsuho-search-actions{justify-content:space-between}}
/* v1.0.2: 管理画面のロゴサイズ設定を優先 */
.oktsuho .oktsuho-brand.oktsuho-brand-imageonly { width:var(--oktsuho-logo-pc,300px) !important; max-width:min(var(--oktsuho-logo-pc,300px),42vw) !important; min-width:0 !important; }
.oktsuho .oktsuho-header-brand-image { width:100% !important; }
@media (max-width:760px){ .oktsuho .oktsuho-brand.oktsuho-brand-imageonly { width:var(--oktsuho-logo-sp,196px) !important; max-width:min(var(--oktsuho-logo-sp,196px),62vw) !important; } }
/* v1.0.3: editable guarantees, responsive image sizes and accessible review loop. */
.oktsuho.oktsuho--contract .oktsuho-hero-price-note {margin:12px 0 10px;font-size:13px;line-height:1.85;color:#183b62;max-width:590px}
.oktsuho.oktsuho--contract .oktsuho-hero-guarantee-link {display:flex;gap:9px;align-items:flex-start;text-decoration:none;color:#183b62;border-top:1px solid #dae4ee;border-bottom:1px solid #dae4ee;padding:12px 0;font-weight:700;font-size:15px;line-height:1.7;max-width:600px}
.oktsuho.oktsuho--contract .oktsuho-hero-guarantee-link>svg {width:24px;height:24px;flex:none;margin-top:2px}
.oktsuho.oktsuho--contract .oktsuho-hero-guarantee-link small {display:block;color:#183b62;font-size:12px;font-weight:400;line-height:1.7}
.oktsuho.oktsuho--contract .oktsuho-price-offer-note {margin:20px auto 0;text-align:center;max-width:880px;font-size:14px;line-height:1.9;color:#183b62}
.oktsuho.oktsuho--contract .oktsuho-guarantee-section {background:#183b62;color:#fff;padding:66px 0 64px;overflow:hidden}
.oktsuho.oktsuho--contract .oktsuho-guarantee-heading {max-width:920px;margin:0 auto 34px;text-align:center}
.oktsuho.oktsuho--contract .oktsuho-guarantee-heading .oktsuho-eyebrow {color:#e7d7a4;letter-spacing:.16em}
.oktsuho.oktsuho--contract .oktsuho-guarantee-heading h2 {margin:8px 0 12px;color:#fff;font-size:clamp(25px,3.2vw,38px);font-weight:700;line-height:1.6;background:none;border:0;padding:0}
.oktsuho.oktsuho--contract .oktsuho-guarantee-heading>p:last-child {color:#faf2dd;font-size:15px;line-height:1.9}
.oktsuho.oktsuho--contract .oktsuho-guarantee-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.oktsuho.oktsuho--contract .oktsuho-guarantee-card {position:relative;min-width:0;padding:32px;border:1px solid #ead8a0;border-radius:14px;background:#fbfaf5;color:#183b62;box-shadow:0 12px 28px #183b6226;overflow-wrap:anywhere}
.oktsuho.oktsuho--contract .oktsuho-guarantee-number {display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #9e8650;border-radius:50%;color:#725e32;font-size:14px;letter-spacing:.04em;margin-bottom:18px}
.oktsuho.oktsuho--contract .oktsuho-guarantee-condition {font-size:15px;font-weight:700;line-height:1.8;margin:0 0 10px}
.oktsuho.oktsuho--contract .oktsuho-guarantee-card h3 {margin:0 0 20px;font-size:clamp(28px,3.2vw,44px);color:#183b62;font-weight:800;line-height:1.45;border:0;padding:0;background:none}
.oktsuho.oktsuho--contract .oktsuho-aftercare-card h3 {font-size:clamp(26px,2.7vw,36px)}
.oktsuho.oktsuho--contract .oktsuho-guarantee-body {font-size:15px;color:#183b62;line-height:1.95;margin:0}
.oktsuho.oktsuho--contract .oktsuho-guarantee-terms {border-top:1px solid #dae4ee;margin-top:20px;padding-top:18px;font-size:13px;line-height:1.85;color:#183b62}
.oktsuho.oktsuho--contract .oktsuho-guarantee-terms p {margin:6px 0 0}
.oktsuho.oktsuho--contract .oktsuho-aftercare-details {margin-top:28px;padding:30px 32px;background:#fff;border-radius:14px;color:#183b62}
.oktsuho.oktsuho--contract .oktsuho-aftercare-details>h3 {margin:0 0 24px;font-size:24px;line-height:1.6;color:#183b62;font-weight:700;background:none;border:0;padding:0}
.oktsuho.oktsuho--contract .oktsuho-aftercare-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 28px}
.oktsuho.oktsuho--contract .oktsuho-aftercare-item {display:flex;align-items:flex-start;gap:12px;min-width:0}
.oktsuho.oktsuho--contract .oktsuho-aftercare-check {display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#faf2dd;flex:none;margin-top:3px}
.oktsuho.oktsuho--contract .oktsuho-aftercare-check svg {width:20px;height:20px}
.oktsuho.oktsuho--contract .oktsuho-aftercare-item h4 {color:#183b62;margin:0 0 6px;font-size:17px;font-weight:700;line-height:1.8;border:0;padding:0;background:none}
.oktsuho.oktsuho--contract .oktsuho-aftercare-item p {margin:0;color:#183b62;font-size:14px;line-height:1.95}
.oktsuho.oktsuho--contract .oktsuho-aftercare-cost {background:#f5f1e5;border-left:4px solid #a89454;border-radius:4px;padding:18px 20px;margin-top:26px;font-size:14px;color:#4c492e;line-height:1.9}
.oktsuho.oktsuho--contract .oktsuho-aftercare-cost p {margin:5px 0 0}
.oktsuho.oktsuho--contract .oktsuho-aftercare-scope {font-size:12px;line-height:1.9;color:#183b62;margin:18px 0 0}
.oktsuho.oktsuho--contract .oktsuho-service-card .oktsuho-card-illustration {width:min(var(--oktsuho-service-pc,128px),100%)!important;height:auto!important;aspect-ratio:1;margin:0 auto 22px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.oktsuho.oktsuho--contract .oktsuho-service-card .oktsuho-card-illustration img {width:100%!important;height:100%!important;max-width:100%!important;max-height:none!important;object-fit:var(--oktsuho-service-fit,contain)!important}
.oktsuho.oktsuho--contract .oktsuho-service-card .oktsuho-service-icon {width:100%;height:100%;margin:0;display:flex;align-items:center;justify-content:center}
.oktsuho.oktsuho--contract .oktsuho-service-card .oktsuho-service-icon svg {width:48%;height:48%}
.oktsuho.oktsuho--contract .oktsuho-header-brand-image {display:block;height:auto!important;max-height:none!important;object-fit:contain}
.oktsuho .is-unconfigured {cursor:default;opacity:.7;box-shadow:none;pointer-events:none}
.oktsuho .is-unconfigured small {display:block;font-size:11px;line-height:1.6;text-align:center}
.oktsuho .oktsuho-review-controls {display:flex;justify-content:flex-end;gap:12px;margin:12px 0}
.oktsuho .oktsuho-review-pause {border:1px solid #6f879f;border-radius:7px;background:#fff;color:#183b62;font:inherit;font-size:12px;padding:9px 14px;min-height:38px;cursor:pointer}
.oktsuho .oktsuho-review-pause[hidden] {display:none}
.oktsuho .oktsuho-review-pause:focus-visible,.oktsuho .oktsuho-review-source:focus-visible {outline:3px solid #b79542;outline-offset:3px}
.oktsuho.oktsuho--contract .oktsuho-review-window[data-oktsuho-marquee] {overflow-x:auto;mask-image:none;-webkit-mask-image:none}
.oktsuho.oktsuho--contract .oktsuho-review-window[data-oktsuho-marquee] .oktsuho-review-track {gap:0;animation:none;width:max-content;will-change:auto}
.oktsuho.oktsuho--contract .oktsuho-review-window[data-oktsuho-marquee] .oktsuho-review-group {gap:20px;padding-right:20px;box-sizing:border-box;align-items:stretch}
.oktsuho.oktsuho--contract .oktsuho-review-window.has-marquee {overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.oktsuho.oktsuho--contract .oktsuho-review-window.has-marquee .oktsuho-review-track {animation:oktsuho-reviews-103 var(--oktsuho-review-duration,40s) linear infinite;will-change:transform}
.oktsuho.oktsuho--contract .oktsuho-review-window.has-marquee:hover .oktsuho-review-track {animation-play-state:running}
.oktsuho.oktsuho--contract .oktsuho-review-window.has-marquee.is-paused .oktsuho-review-track,.oktsuho.oktsuho--contract .oktsuho-review-window.has-marquee:focus-within .oktsuho-review-track {animation-play-state:paused}
.oktsuho.oktsuho--contract .oktsuho-review-window[data-oktsuho-marquee] .oktsuho-google-review-card {display:flex;flex-direction:column;width:330px;flex:0 0 330px;min-height:200px;height:auto}
.oktsuho.oktsuho--contract .oktsuho-review-window[data-oktsuho-marquee] .oktsuho-google-review-card>p {flex:1;white-space:pre-line;overflow-wrap:anywhere}
.oktsuho .oktsuho-review-source {display:inline-block;margin-top:12px;text-decoration:underline;text-underline-offset:4px;font-size:12px;color:#183b62;align-self:flex-start}
@keyframes oktsuho-reviews-103 {from{transform:translateX(0)}to{transform:translateX(var(--oktsuho-review-distance,-350px))}}
@media(max-width:820px){
.oktsuho.oktsuho--contract .oktsuho-guarantee-section {padding:45px 0}
.oktsuho.oktsuho--contract .oktsuho-guarantee-grid,.oktsuho.oktsuho--contract .oktsuho-aftercare-grid {grid-template-columns:1fr}
.oktsuho.oktsuho--contract .oktsuho-guarantee-card {padding:26px}
.oktsuho.oktsuho--contract .oktsuho-aftercare-details {padding:26px}
.oktsuho.oktsuho--contract .oktsuho-service-card .oktsuho-card-illustration {width:min(var(--oktsuho-service-sp,104px),100%)!important}
}
@media(max-width:480px){
.oktsuho.oktsuho--contract .oktsuho-guarantee-card {padding:24px 20px}
.oktsuho.oktsuho--contract .oktsuho-aftercare-details {padding:24px 18px}
.oktsuho.oktsuho--contract .oktsuho-guarantee-grid {gap:18px}
.oktsuho.oktsuho--contract .oktsuho-guarantee-heading {margin-bottom:26px}
.oktsuho.oktsuho--contract .oktsuho-guarantee-heading h2 {font-size:24px}
.oktsuho.oktsuho--contract .oktsuho-aftercare-details>h3 {font-size:21px}
.oktsuho.oktsuho--contract .oktsuho-aftercare-cost {padding:16px}
.oktsuho.oktsuho--contract .oktsuho-review-window[data-oktsuho-marquee] .oktsuho-google-review-card {width:280px;flex-basis:280px}
.oktsuho.oktsuho--contract .oktsuho-hero-guarantee-link {font-size:14px}
}
@media(prefers-reduced-motion:reduce){
.oktsuho.oktsuho--contract .oktsuho-review-window.has-marquee {overflow-x:auto;mask-image:none;-webkit-mask-image:none}
.oktsuho.oktsuho--contract .oktsuho-review-window.has-marquee .oktsuho-review-track {animation:none!important;transform:none!important}
.oktsuho .oktsuho-review-group[data-marquee-clone] {display:none!important}
}
/* Keep the adjustable logo, phone and menu on one row without cropping the logo. */
@media(max-width:820px){
.oktsuho.oktsuho--contract.is-enhanced .oktsuho-header-main {display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}
.oktsuho.oktsuho--contract.is-enhanced .oktsuho-header-main>.oktsuho-brand {grid-column:1;grid-row:1;margin-right:0;min-width:0!important;max-width:100%!important}
.oktsuho.oktsuho--contract.is-enhanced .oktsuho-header-main>.oktsuho-brand-imageonly {width:var(--oktsuho-logo-sp,196px)!important}
.oktsuho.oktsuho--contract.is-enhanced .oktsuho-header-main>.oktsuho-mobile-phone {grid-column:2;grid-row:1}
.oktsuho.oktsuho--contract.is-enhanced .oktsuho-header-main>.oktsuho-menu-toggle {grid-column:3;grid-row:1}
.oktsuho.oktsuho--contract.is-enhanced .oktsuho-header-main>.oktsuho-menu {grid-column:1 / -1;grid-row:2;width:100%;min-width:0}
}
/* Hero full-bleed photo crossfade. */
.oktsuho.oktsuho--contract .oktsuho-hero-title-accent {color:#183b62!important}
.oktsuho.oktsuho--contract .oktsuho-hero:after {content:none!important}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero>.oktsuho-hero-media-v104 {
position:absolute!important;inset:0 0 0 40%!important;width:auto!important;height:100%!important;
min-height:100%!important;max-width:none!important;transform:none!important;opacity:1;z-index:1;
}
.oktsuho.oktsuho--contract .oktsuho-hero-slides {position:absolute;inset:0;overflow:hidden;isolation:isolate}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero-slides {
clip-path:polygon(14% 0,100% 0,100% 100%,0 100%);
-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 10%,#000 28%);
mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 10%,#000 28%);
}
.oktsuho.oktsuho--contract .oktsuho-hero-slide {position:absolute!important;inset:0!important;margin:0!important;width:100%;height:100%;opacity:0;z-index:0;pointer-events:none;transition:opacity var(--oktsuho-slide-fade,1200ms) ease-in-out}
.oktsuho.oktsuho--contract .oktsuho-hero-slide.is-active {opacity:1;z-index:2}
.oktsuho.oktsuho--contract .oktsuho-hero-slide.is-previous {opacity:1;z-index:1;transition:none}
.oktsuho.oktsuho--contract .oktsuho-hero-slide picture {display:block;width:100%;height:100%}
.oktsuho.oktsuho--contract .oktsuho-hero-slide .oktsuho-hero-slide-image {
display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
min-width:0!important;max-width:none!important;max-height:none!important;object-fit:cover!important;
object-position:var(--slide-x,50%) var(--slide-y,50%)!important;border-radius:0!important;
filter:none!important;transform:none!important;mask-image:none!important;-webkit-mask-image:none!important;
}
.oktsuho.oktsuho--contract .oktsuho-hero-image-fallback {position:absolute;inset:0;z-index:3;background:linear-gradient(135deg,#fffaee,#faf2dd)}
.oktsuho.oktsuho--contract .oktsuho-hero-image-fallback .oktsuho-visual-placeholder {height:100%;min-height:100%;padding-left:24%;border:0;border-radius:0;background:none}
.oktsuho.oktsuho--contract .oktsuho-hero-slide-controls {position:absolute;right:24px;bottom:18px;display:flex;align-items:center;gap:10px;z-index:5;max-width:calc(100% - 36px);padding:4px 10px;border:1px solid #dae4ee;border-radius:30px;background:rgba(255,255,255,.94);color:#183b62;box-shadow:0 3px 15px #183b620a}
.oktsuho.oktsuho--contract .oktsuho-hero-slide-dots {display:flex;gap:0}
.oktsuho.oktsuho--contract .oktsuho-hero-slide-dots button {appearance:none;display:grid;place-items:center;border:0;background:none;width:32px;height:32px;padding:0}
.oktsuho.oktsuho--contract .oktsuho-hero-slide-dots span {display:block;width:7px;height:7px;border-radius:50%;background:#6f879f;transition:width .3s,background .3s}
.oktsuho.oktsuho--contract .oktsuho-hero-slide-dots button[aria-current=true] span {width:19px;border-radius:10px;background:#284c71}
.oktsuho.oktsuho--contract .oktsuho-hero-slide-pause {appearance:none;min-height:32px;background:none;border:0;border-left:1px solid #dae4ee;border-radius:0;padding:3px 6px 3px 12px;font-size:11px;line-height:1.5;color:#183b62}
.oktsuho.oktsuho--contract.oktsuho-layout-split .oktsuho-hero .oktsuho-hero-media-v104 {min-height:440px!important;transform:none!important}
.oktsuho.oktsuho--contract.oktsuho-layout-split .oktsuho-hero-slide .oktsuho-hero-slide-image {object-fit:var(--hero-split-fit,contain)!important}
.oktsuho.oktsuho--contract .oktsuho-review-sample-notice {max-width:820px;margin:0 auto 16px;padding:13px 20px;border:1px solid #dae4ee;border-radius:10px;background:#fffaee;color:#183b62;font-size:13px;line-height:1.85;text-align:center}
.oktsuho.oktsuho--contract .oktsuho-review-sample-notice strong {display:block;color:#183b62}
.oktsuho.oktsuho--contract .oktsuho-google-review-card.is-sample .oktsuho-google-review-top {font-size:11px;line-height:1.6;color:#183b62}
.oktsuho.oktsuho--contract .oktsuho-google-review-card.is-sample {border-color:#faf2dd;background:linear-gradient(145deg,#fff,#fffaee)}
.oktsuho.oktsuho--contract .oktsuho-review-link-buttons {margin-top:26px}
@media(max-width:1060px) and (min-width:821px){
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero>.oktsuho-hero-media-v104 {left:42%!important;opacity:.85}
}
@media(max-width:820px){
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero>.oktsuho-hero-media-v104 {inset:0 0 0 20%!important;opacity:.17}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero-slides {clip-path:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 52%);mask-image:linear-gradient(90deg,transparent,#000 52%)}
.oktsuho.oktsuho--contract .oktsuho-hero-slide .oktsuho-hero-slide-image {object-position:var(--slide-mx,50%) var(--slide-my,50%)!important}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero .oktsuho-container.oktsuho-hero-grid {padding-bottom:70px!important}
.oktsuho.oktsuho--contract .oktsuho-hero-slide-controls {right:18px;bottom:12px;padding:3px 8px}
.oktsuho.oktsuho--contract.oktsuho-layout-split .oktsuho-hero .oktsuho-hero-media-v104 {height:340px!important;min-height:260px!important}
.oktsuho.oktsuho--contract.oktsuho-layout-split .oktsuho-hero-slide .oktsuho-hero-slide-image {object-fit:var(--hero-split-mobile-fit,cover)!important}
}
@media(prefers-reduced-motion:reduce){
.oktsuho.oktsuho--contract .oktsuho-hero-slide {transition:none!important}
.oktsuho.oktsuho--contract .oktsuho-hero-slide-dots span {transition:none!important}
}
/* Centred price offers and eight-step service flow. */
.oktsuho.oktsuho--contract .oktsuho-contract-price-pills > div {
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.oktsuho.oktsuho--contract .oktsuho-contract-price-pills > div > span,
.oktsuho.oktsuho--contract .oktsuho-contract-price-pills > div > strong,
.oktsuho.oktsuho--contract .oktsuho-contract-price-pills > div > small {text-align:center;margin-right:0}
.oktsuho.oktsuho--contract .oktsuho-contract-price-pills small:empty,
.oktsuho.oktsuho--contract .oktsuho-price-amount > span:empty {display:none}
.oktsuho.oktsuho--contract .oktsuho-contract-price-card {
display:flex;flex-direction:column;align-items:center;text-align:center;
}
.oktsuho.oktsuho--contract .oktsuho-contract-price-card h3,
.oktsuho.oktsuho--contract .oktsuho-contract-price-card .oktsuho-price-amount {text-align:center;width:100%}
.oktsuho.oktsuho--contract .oktsuho-contract-price-card .oktsuho-price-amount {justify-content:center}
.oktsuho.oktsuho--contract .oktsuho-contract-price-card .oktsuho-price-summary {
width:100%;text-align:left;margin:14px 0 22px;font-size:14px;line-height:1.95;
}
.oktsuho.oktsuho--contract .oktsuho-price-consult-btn {
width:100%;max-width:280px;min-height:48px;margin-top:auto;white-space:normal;
color:#fff;background:#183b62;border:1px solid #183b62;
box-shadow:0 5px 14px rgba(24,59,98,.12);text-align:center;
}
.oktsuho.oktsuho--contract .oktsuho-price-consult-btn:hover,
.oktsuho.oktsuho--contract .oktsuho-price-consult-btn:focus-visible {color:#fff;background:#183b62;border-color:#183b62}
.oktsuho.oktsuho--contract .oktsuho-guarantee-heading,
.oktsuho.oktsuho--contract .oktsuho-guarantee-heading > h2,
.oktsuho.oktsuho--contract .oktsuho-guarantee-heading > p,
.oktsuho.oktsuho--contract .oktsuho-guarantee-card > h3,
.oktsuho.oktsuho--contract .oktsuho-guarantee-card > .oktsuho-guarantee-condition {text-align:center}
.oktsuho.oktsuho--contract .oktsuho-guarantee-number {display:flex;margin:0 auto 18px}
.oktsuho.oktsuho--contract .oktsuho-guarantee-heading > h2 {text-wrap:balance}
.oktsuho.oktsuho--contract .oktsuho-flow-eight {grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li {padding:25px 20px}
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li::after {display:none;content:none}
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li > span {background:#faf2dd;color:#183b62}
.oktsuho.oktsuho--contract .oktsuho-flow-eight h3 {font-size:16px;line-height:1.7;overflow-wrap:anywhere}
.oktsuho.oktsuho--contract .oktsuho-flow-eight p {font-size:14px;line-height:1.95}
@media (max-width:1060px) {
.oktsuho.oktsuho--contract .oktsuho-flow-eight {grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
}
@media (max-width:600px) {
.oktsuho.oktsuho--contract .oktsuho-flow-eight {grid-template-columns:1fr;gap:14px}
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li {padding:24px 22px}
}
/* v1.0.6: original Google review attribution and verified hall map/table. */
.oktsuho.oktsuho--contract .oktsuho-review-controls {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.oktsuho.oktsuho--contract .oktsuho-review-attribution {margin:0;color:#183b62;font-size:13px;font-weight:700}
.oktsuho.oktsuho--contract .oktsuho-google-review-top {gap:12px;align-items:center;justify-content:flex-start}
.oktsuho.oktsuho--contract .oktsuho-review-avatar {position:relative;display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;overflow:hidden;border-radius:50%;background:#faf2dd;color:#183b62;font-size:19px;font-weight:700}
.oktsuho.oktsuho--contract .oktsuho-review-avatar img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.oktsuho.oktsuho--contract .oktsuho-review-author {min-width:0;line-height:1.65}
.oktsuho.oktsuho--contract .oktsuho-review-author a {font-size:15px;font-weight:700;color:#183b62;text-decoration:none;overflow-wrap:anywhere}
.oktsuho.oktsuho--contract .oktsuho-review-author a:hover {text-decoration:underline}
.oktsuho.oktsuho--contract .oktsuho-review-author>span {display:block;font-size:11px;font-weight:400;color:#183b62}
.oktsuho.oktsuho--contract .oktsuho-review-meta {display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 0;min-height:23px}
.oktsuho.oktsuho--contract .oktsuho-review-rating {color:#96701e;font-size:17px;letter-spacing:.08em;white-space:nowrap}
.oktsuho.oktsuho--contract .oktsuho-review-meta time {font-size:11px;color:#183b62}
.oktsuho.oktsuho--contract .oktsuho-google-review-card .oktsuho-review-body {flex:1;margin:14px 0 20px;padding:0;border:0;background:none;box-shadow:none;color:#183b62;font-size:14px;font-style:normal;line-height:1.95;overflow-wrap:anywhere}
.oktsuho.oktsuho--contract .oktsuho-review-body::before,.oktsuho.oktsuho--contract .oktsuho-review-body::after {content:none}
.oktsuho.oktsuho--contract .oktsuho-review-card-footer {margin-top:auto;padding-top:14px;border-top:1px solid #faf2dd;font-size:12px;line-height:1.8}
.oktsuho.oktsuho--contract .oktsuho-review-excerpt {display:block;color:#183b62;font-size:11px}
.oktsuho.oktsuho--contract .oktsuho-review-source {display:inline-block;margin-top:4px;color:#183b62;text-underline-offset:3px;font-size:12px}
.oktsuho.oktsuho--contract .oktsuho-hall-info-mapped {padding:26px;background:#f7faf8;border:1px solid #dae4ee;border-radius:16px;margin:28px 0 36px}
.oktsuho.oktsuho--contract .oktsuho-hall-info-mapped h2 {margin:0 0 20px;color:#183b62;line-height:1.6;font-size:clamp(20px,2.5vw,27px)}
.oktsuho.oktsuho--contract .oktsuho-hall-map {width:100%;border:1px solid #dae4ee;background:#faf2dd;border-radius:10px;overflow:hidden}
.oktsuho.oktsuho--contract .oktsuho-hall-map iframe {display:block;width:100%;max-width:100%;height:360px;border:0}
.oktsuho.oktsuho--contract .oktsuho-hall-map-link {margin:10px 0 20px;text-align:right;font-size:13px}
.oktsuho.oktsuho--contract .oktsuho-hall-map-link a {color:#183b62}
.oktsuho.oktsuho--contract .oktsuho-hall-table {width:100%;table-layout:fixed;border-collapse:collapse;background:#fff;font-size:14px;line-height:1.85;margin:0 0 16px}
.oktsuho.oktsuho--contract .oktsuho-hall-table th,.oktsuho.oktsuho--contract .oktsuho-hall-table td {padding:14px 16px;border:1px solid #dae4ee;vertical-align:top;text-align:left;overflow-wrap:anywhere}
.oktsuho.oktsuho--contract .oktsuho-hall-table th {width:30%;color:#183b62;background:#faf2dd;font-weight:700}
.oktsuho.oktsuho--contract .oktsuho-hall-map-note {font-size:12px;color:#183b62;line-height:1.9}
.oktsuho.oktsuho--contract .oktsuho-hall-info-mapped>p:last-child {font-size:13px;line-height:1.9;color:#183b62}
.oktsuho .screen-reader-text {position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){
.oktsuho.oktsuho--contract .oktsuho-hall-info-mapped {padding:16px;margin:22px 0}
.oktsuho.oktsuho--contract .oktsuho-hall-map iframe {height:270px}
.oktsuho.oktsuho--contract .oktsuho-hall-table {font-size:13px}
.oktsuho.oktsuho--contract .oktsuho-hall-table th,.oktsuho.oktsuho--contract .oktsuho-hall-table td {padding:10px}
.oktsuho.oktsuho--contract .oktsuho-hall-table th {width:34%}
}
/* =========================================================
v1.0.7: flow connectors, mobile office order and control cleanup
========================================================= */
/* The review marquee and hero slideshow remain automatic; visitor stop/resume buttons were removed. */
.oktsuho.oktsuho--contract .oktsuho-review-controls { justify-content:flex-start; }
.oktsuho.oktsuho--contract .oktsuho-review-pause,
.oktsuho.oktsuho--contract .oktsuho-hero-slide-pause { display:none !important; }
/* Flow: spacing and connectors between consecutive steps. */
.oktsuho.oktsuho--contract .oktsuho-flow-eight {
column-gap:64px;
row-gap:58px;
}
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li::after {
display:flex;
align-items:center;
justify-content:center;
position:absolute;
z-index:3;
width:38px;
height:38px;
padding:0;
border:0;
background:transparent;
color:#284c71;
font-size:31px;
font-weight:700;
line-height:1;
pointer-events:none;
}
/* Desktop follows a serpentine path: 1→2→3→4, then down, then 5→6→7→8 from right to left. */
@media (min-width:1061px) {
.oktsuho.oktsuho--contract .oktsuho-flow-eight { grid-template-columns:repeat(4,minmax(0,1fr)); }
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(1) { grid-column:1; grid-row:1; }
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(2) { grid-column:2; grid-row:1; }
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(3) { grid-column:3; grid-row:1; }
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(4) { grid-column:4; grid-row:1; }
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(5) { grid-column:4; grid-row:2; }
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(6) { grid-column:3; grid-row:2; }
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(7) { grid-column:2; grid-row:2; }
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(8) { grid-column:1; grid-row:2; }
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(1)::after,
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(2)::after,
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(3)::after {
content:"→";
top:50%; right:-51px; bottom:auto; left:auto;
transform:translateY(-50%);
}
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(4)::after {
content:"↓";
top:auto; right:auto; bottom:-49px; left:50%;
transform:translateX(-50%);
}
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(5)::after,
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(6)::after,
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(7)::after {
content:"←";
top:50%; right:auto; bottom:auto; left:-51px;
transform:translateY(-50%);
}
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(8)::after { content:none; display:none; }
}
/* Tablet uses the same sequential snake in two columns. */
@media (min-width:601px) and (max-width:1060px) {
.oktsuho.oktsuho--contract .oktsuho-flow-eight { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:64px; row-gap:58px; }
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(1) { grid-column:1; grid-row:1; }
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(2) { grid-column:2; grid-row:1; }
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(3) { grid-column:2; grid-row:2; }
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(4) { grid-column:1; grid-row:2; }
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(5) { grid-column:1; grid-row:3; }
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(6) { grid-column:2; grid-row:3; }
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(7) { grid-column:2; grid-row:4; }
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(8) { grid-column:1; grid-row:4; }
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(1)::after,
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(5)::after {
content:"→"; top:50%; right:-51px; bottom:auto; left:auto; transform:translateY(-50%);
}
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(2)::after,
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(4)::after,
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(6)::after {
content:"↓"; top:auto; right:auto; bottom:-49px; left:50%; transform:translateX(-50%);
}
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(3)::after,
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(7)::after {
content:"←"; top:50%; right:auto; bottom:auto; left:-51px; transform:translateY(-50%);
}
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:nth-child(8)::after { content:none; display:none; }
}
/* Mobile: one clear vertical path. */
@media (max-width:600px) {
.oktsuho.oktsuho--contract .oktsuho-flow-eight { grid-template-columns:1fr; gap:58px; }
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li { grid-column:1 !important; grid-row:auto !important; }
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:not(:last-child)::after {
content:"↓";
display:flex;
top:auto; right:auto; bottom:-49px; left:50%;
transform:translateX(-50%);
}
.oktsuho.oktsuho--contract .oktsuho-flow-eight > li:last-child::after { content:none; display:none; }
}
/* Office: desktop remains photo-left/copy-right; mobile becomes heading → photo → details. */
.oktsuho.oktsuho--contract .oktsuho-office-grid {
grid-template-rows:auto 1fr;
column-gap:58px;
row-gap:0;
}
.oktsuho.oktsuho--contract .oktsuho-office-heading { grid-column:2; grid-row:1; align-self:end; }
.oktsuho.oktsuho--contract .oktsuho-office-heading h2 { font-size:32px; margin-bottom:18px; }
.oktsuho.oktsuho--contract .oktsuho-office-photo { grid-column:1; grid-row:1 / span 2; align-self:center; }
.oktsuho.oktsuho--contract .oktsuho-office-copy { grid-column:2; grid-row:2; }
/* LINE consultation button is centred without changing the surrounding copy alignment. */
.oktsuho.oktsuho--contract .oktsuho-line-info .oktsuho-btn-line {
display:flex;
width:max-content;
max-width:100%;
margin-left:auto;
margin-right:auto;
}
@media (max-width:820px) {
.oktsuho.oktsuho--contract .oktsuho-office-grid {
grid-template-columns:1fr;
grid-template-rows:auto auto auto;
gap:24px;
}
.oktsuho.oktsuho--contract .oktsuho-office-heading { grid-column:1; grid-row:1; }
.oktsuho.oktsuho--contract .oktsuho-office-heading h2 { font-size:26px; margin-bottom:0; }
.oktsuho.oktsuho--contract .oktsuho-office-photo { grid-column:1; grid-row:2; margin-top:0; }
.oktsuho.oktsuho--contract .oktsuho-office-copy { grid-column:1; grid-row:3; }
.oktsuho.oktsuho--contract .oktsuho-actions-office { display:none !important; }
}
/* Mobile header phone number and reception hours: force readable black text. */
@media (max-width:600px) {
.oktsuho.oktsuho--contract .oktsuho-mobile-phone a,
.oktsuho.oktsuho--contract .oktsuho-mobile-phone .oktsuho-mobile-phone-number,
.oktsuho.oktsuho--contract .oktsuho-mobile-phone > span {
color:#111 !important;
-webkit-text-fill-color:#111 !important;
}
}
/* =========================================================
v1.0.8 GPT作成記事：関連記事・強調・戻るボタン
========================================================= */
.oktsuho .oktsuho-single-content .oktsuho-managed-related {
margin:30px 0;
padding:18px 22px;
border:1px solid #dae4ee;
border-left:5px solid #183b62;
border-radius:14px;
background:#fffaee;
box-shadow:0 5px 18px rgba(24,59,98,.05);
}
.oktsuho .oktsuho-single-content .oktsuho-managed-related .oktsuho-related-label {
margin:0 0 10px;
color:#183b62;
font-size:15px;
font-weight:800;
letter-spacing:.08em;
}
.oktsuho .oktsuho-single-content .oktsuho-managed-related ul { margin:0; padding-left:1.25em; }
.oktsuho .oktsuho-single-content .oktsuho-managed-related li { margin:.5em 0; }
.oktsuho .oktsuho-single-content .oktsuho-emphasis-red {
color:#b42318 !important;
-webkit-text-fill-color:#b42318 !important;
font-weight:800;
}
.oktsuho .oktsuho-column-back .oktsuho-column-return-btn {
display:inline-flex;
align-items:center;
justify-content:center;
min-width:190px;
min-height:48px;
padding:12px 24px;
border:1px solid #183b62 !important;
border-radius:8px;
background:#183b62 !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
text-decoration:none !important;
font-weight:800;
line-height:1.5;
}
.oktsuho .oktsuho-column-back .oktsuho-column-return-btn:hover {
background:#183b62 !important;
border-color:#183b62 !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
}
@media(max-width:600px){
.oktsuho .oktsuho-single-content .oktsuho-managed-related {padding:16px 15px;margin:24px 0;}
.oktsuho .oktsuho-column-back .oktsuho-column-return-btn {width:min(100%,280px);}
}
/* ===== 通報文書サイト：サブセクション共通レイアウト ===== */
.oktsuho.oktsuho--contract .oktsuho-contract-fit-section{
position:relative;
padding:82px 0;
overflow:hidden;
background:linear-gradient(135deg,#173d56 0%,#183b62 55%,#183b62 100%);
color:#fff;
}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-wrap{position:relative;z-index:1}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-copy{max-width:820px;margin:0 auto 34px;text-align:center}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-copy .oktsuho-eyebrow{color:#faf2dd}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-copy h2{margin:0 0 18px;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:clamp(30px,4vw,46px);line-height:1.35}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-copy>p:last-child{margin:0;color:#fffaee!important;font-size:15px;line-height:2}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-card{
min-width:0;padding:26px 22px;border:1px solid rgba(255,255,255,.55);border-radius:16px;
background:#fff;color:#203f4f;box-shadow:0 14px 34px rgba(3,31,42,.14)
}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-card>span{display:inline-grid;place-items:center;width:34px;height:34px;margin-bottom:14px;border-radius:50%;background:#faf2dd;color:#183b62;font-weight:800;font-size:12px}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-card h3{margin:0 0 10px;color:#173e55!important;-webkit-text-fill-color:#173e55!important;font-size:18px;line-height:1.5}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-card p{margin:0;color:#526a76!important;font-size:13px;line-height:1.9}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-bottom{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:32px;align-items:center;margin-top:26px;padding:26px;border:1px solid rgba(255,255,255,.26);border-radius:18px;background:rgba(255,255,255,.08);backdrop-filter:blur(5px)}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-bottom h3{margin:0 0 10px;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:24px}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-bottom p{color:#fffaee!important;line-height:1.95}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-photo{overflow:hidden;border-radius:13px;background:rgba(255,255,255,.12);min-height:190px}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-photo img{display:block;width:100%;height:100%;min-height:190px;object-fit:cover}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-placeholder{display:grid;place-items:center;min-height:190px;color:#faf2dd}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-placeholder svg{width:72px;height:72px}
/* Google口コミは見出し直下 → 右から左へシームレス循環 → 2ボタンの順で固定 */
.oktsuho.oktsuho--contract .oktsuho-google-reviews{padding-top:78px;padding-bottom:74px;background:#fffaee}
.oktsuho.oktsuho--contract .oktsuho-review-heading{margin-bottom:22px}
.oktsuho.oktsuho--contract .oktsuho-review-controls{justify-content:center;margin:0 0 16px}
.oktsuho.oktsuho--contract .oktsuho-review-attribution{margin:0;color:#183b62;font-size:12px;font-weight:700}
.oktsuho.oktsuho--contract .oktsuho-review-window{margin-bottom:18px}
.oktsuho.oktsuho--contract .oktsuho-review-link-buttons{margin-top:24px;margin-bottom:0}
.oktsuho.oktsuho--contract .oktsuho-review-link-button{min-width:230px;min-height:46px}
.oktsuho.oktsuho--contract .oktsuho-review-link-button.is-other{border-color:#a8c2d4;color:#245873}
/* Footer */
.oktsuho.oktsuho--contract .oktsuho-contract-footer{padding:58px 0 22px;background:#102d3b;color:#dbe9ee;border-top:0}
.oktsuho.oktsuho--contract .oktsuho-footer-grid{display:grid;grid-template-columns:minmax(260px,1.7fr) repeat(3,minmax(150px,1fr));gap:38px;padding-bottom:38px}
.oktsuho.oktsuho--contract .oktsuho-contract-footer .oktsuho-brand-text,
.oktsuho.oktsuho--contract .oktsuho-contract-footer .oktsuho-brand-text strong,
.oktsuho.oktsuho--contract .oktsuho-contract-footer .oktsuho-brand-text span{color:#fff!important;-webkit-text-fill-color:#fff!important}
.oktsuho.oktsuho--contract .oktsuho-footer-brand>p{color:#bfd3dc;font-size:13px;line-height:1.85}
.oktsuho.oktsuho--contract .oktsuho-footer-office{margin-top:16px}
.oktsuho.oktsuho--contract .oktsuho-footer-column{display:flex;flex-direction:column;gap:10px}
.oktsuho.oktsuho--contract .oktsuho-footer-column h2{margin:0 0 5px;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:14px;letter-spacing:.04em}
.oktsuho.oktsuho--contract .oktsuho-footer-column a{color:#d6e7ed!important;text-decoration:none;font-size:13px;line-height:1.7}
.oktsuho.oktsuho--contract .oktsuho-footer-column a:hover{text-decoration:underline;text-underline-offset:3px}
.oktsuho.oktsuho--contract .oktsuho-contract-footer .oktsuho-footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);color:#9eb8c2;font-size:11px}
.oktsuho.oktsuho--contract .oktsuho-contract-footer .oktsuho-footer-bottom p{margin:0;color:inherit}
@media(max-width:980px){
.oktsuho.oktsuho--contract .oktsuho-contract-fit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.oktsuho.oktsuho--contract .oktsuho-footer-grid{grid-template-columns:1.4fr 1fr 1fr}
.oktsuho.oktsuho--contract .oktsuho-footer-column:last-child{grid-column:2/4}
}
@media(max-width:700px){
.oktsuho.oktsuho--contract .oktsuho-contract-fit-section{padding:58px 0}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-grid{grid-template-columns:1fr}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-bottom{grid-template-columns:1fr;padding:18px}
.oktsuho.oktsuho--contract .oktsuho-review-link-buttons{align-items:stretch;flex-direction:column}
.oktsuho.oktsuho--contract .oktsuho-review-link-button{width:100%}
.oktsuho.oktsuho--contract .oktsuho-footer-grid{grid-template-columns:1fr 1fr;gap:28px}
.oktsuho.oktsuho--contract .oktsuho-footer-brand{grid-column:1/-1}
.oktsuho.oktsuho--contract .oktsuho-footer-column:last-child{grid-column:auto}
.oktsuho.oktsuho--contract .oktsuho-contract-footer .oktsuho-footer-bottom{display:block}
.oktsuho.oktsuho--contract .oktsuho-contract-footer .oktsuho-footer-bottom p+p{margin-top:8px}
}
@media(max-width:460px){
.oktsuho.oktsuho--contract .oktsuho-footer-grid{grid-template-columns:1fr}
.oktsuho.oktsuho--contract .oktsuho-footer-column:last-child{grid-column:auto}
}
/* ===== 通報文書サイト：UI補助調整 ===== */
/* Dark-background LINE CTA: gold/navy contrast. */
.oktsuho.oktsuho--contract .oktsuho-contract-fit-bottom .oktsuho-actions-onblue .oktsuho-btn-line{
background:#faf2dd!important;
border-color:#faf2dd!important;
color:#183b62!important;
-webkit-text-fill-color:#183b62!important;
box-shadow:0 6px 18px rgba(24,59,98,.18);
}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-bottom .oktsuho-actions-onblue .oktsuho-btn-line:hover{
background:#dae4ee!important;
border-color:#dae4ee!important;
color:#183b62!important;
-webkit-text-fill-color:#183b62!important;
}
/* 法定・方針ページの長文を読みやすく整理。 */
.oktsuho.oktsuho--contract .oktsuho-legal-body ul,
.oktsuho.oktsuho--contract .oktsuho-legal-body ol{
margin:14px 0 24px;
padding-left:1.45em;
color:#49636a;
font-size:14px;
line-height:1.95;
}
.oktsuho.oktsuho--contract .oktsuho-legal-body li+li{margin-top:7px}
.oktsuho.oktsuho--contract .oktsuho-legal-body h2{padding-bottom:8px;border-bottom:1px solid #faf2dd}
/* スマホヘッダー：タイトルは2行固定、電話番号を小さくして重なりを防止。 */
@media(max-width:600px){
.oktsuho.oktsuho--contract.is-enhanced .oktsuho-header-main{
grid-template-columns:minmax(0,1fr) minmax(74px,auto) 40px!important;
gap:4px!important;
padding-left:0!important;
padding-right:0!important;
}
.oktsuho.oktsuho--contract .oktsuho-brand-text{
min-width:0!important;
max-width:100%!important;
line-height:1.16!important;
white-space:normal!important;
}
.oktsuho.oktsuho--contract .oktsuho-brand-text small,
.oktsuho.oktsuho--contract .oktsuho-brand-text strong{
display:block!important;
white-space:nowrap!important;
overflow:visible!important;
}
.oktsuho.oktsuho--contract .oktsuho-brand-text small{
font-size:8.5px!important;
letter-spacing:.03em!important;
margin-bottom:2px;
}
.oktsuho.oktsuho--contract .oktsuho-brand-text strong{
font-size:clamp(12.5px,3.65vw,14px)!important;
letter-spacing:-.035em!important;
line-height:1.2!important;
}
.oktsuho.oktsuho--contract .oktsuho-mobile-phone{
min-width:0!important;
max-width:88px!important;
align-items:flex-end!important;
}
.oktsuho.oktsuho--contract .oktsuho-mobile-phone a{
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
gap:2px!important;
white-space:nowrap!important;
line-height:1.1!important;
}
.oktsuho.oktsuho--contract .oktsuho-mobile-phone a .oktsuho-icon{
width:11px!important;
height:11px!important;
}
.oktsuho.oktsuho--contract .oktsuho-mobile-phone .oktsuho-mobile-phone-number{
font-size:11.5px!important;
letter-spacing:-.04em!important;
}
.oktsuho.oktsuho--contract .oktsuho-mobile-phone>span{
margin-top:2px!important;
font-size:7px!important;
letter-spacing:-.02em!important;
}
.oktsuho.oktsuho--contract .oktsuho-menu-toggle{
min-width:38px!important;
width:38px!important;
padding:5px 4px!important;
}
.oktsuho.oktsuho--contract .oktsuho-brand.oktsuho-brand-imageonly{
max-width:100%!important;
}
}
@media(max-width:360px){
.oktsuho.oktsuho--contract.is-enhanced .oktsuho-header-main{
grid-template-columns:minmax(0,1fr) minmax(68px,auto) 36px!important;
gap:3px!important;
}
.oktsuho.oktsuho--contract .oktsuho-brand-text strong{font-size:11.8px!important}
.oktsuho.oktsuho--contract .oktsuho-brand-text small{font-size:7.6px!important}
.oktsuho.oktsuho--contract .oktsuho-mobile-phone{max-width:76px!important}
.oktsuho.oktsuho--contract .oktsuho-mobile-phone .oktsuho-mobile-phone-number{font-size:10.4px!important}
.oktsuho.oktsuho--contract .oktsuho-mobile-phone>span{font-size:6.4px!important}
}
/* v1.2.2 — construction-experience emphasis and compact, content-height Google review cards. */
.oktsuho.oktsuho--contract .oktsuho-construction-experience-note{display:flex;align-items:center;justify-content:center;gap:10px 16px;flex-wrap:wrap;max-width:790px;margin:20px auto 0;padding:14px 18px;border:1px solid rgba(255,255,255,.34);border-radius:12px;background:rgba(255,255,255,.10);color:#fff}
.oktsuho.oktsuho--contract .oktsuho-construction-experience-note strong{display:inline-flex;align-items:center;min-height:30px;padding:4px 10px;border-radius:999px;background:#fffaee;color:#183b62;font-size:13px;white-space:nowrap}
.oktsuho.oktsuho--contract .oktsuho-construction-experience-note span{color:#fffaee;font-size:13px;line-height:1.8}
.oktsuho.oktsuho--contract .oktsuho-office-experience-badge{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 16px;padding:10px 13px;border:1px solid #dae4ee;border-radius:10px;background:#fffaee;color:#183b62}
.oktsuho.oktsuho--contract .oktsuho-office-experience-badge span{font-size:11px;font-weight:700;letter-spacing:.05em}
.oktsuho.oktsuho--contract .oktsuho-office-experience-badge strong{font-size:14px;color:#183b62}
/* Short reviews should not inherit the height of the longest review in the row. */
.oktsuho.oktsuho--contract .oktsuho-review-window[data-oktsuho-marquee] .oktsuho-review-group{align-items:flex-start!important}
.oktsuho.oktsuho--contract .oktsuho-review-window[data-oktsuho-marquee] .oktsuho-google-review-card{min-height:0!important;height:auto!important;padding:20px 20px 16px!important}
.oktsuho.oktsuho--contract .oktsuho-google-review-card .oktsuho-review-body{flex:0 0 auto!important;margin:12px 0 12px!important;line-height:1.82!important}
.oktsuho.oktsuho--contract .oktsuho-review-card-footer{margin-top:0!important;padding-top:10px!important}
.oktsuho.oktsuho--contract .oktsuho-review-source{margin-top:8px!important}
@media(max-width:480px){
.oktsuho.oktsuho--contract .oktsuho-review-window[data-oktsuho-marquee] .oktsuho-google-review-card{padding:18px 17px 14px!important}
.oktsuho.oktsuho--contract .oktsuho-construction-experience-note{display:block;text-align:left;padding:14px 15px}
.oktsuho.oktsuho--contract .oktsuho-construction-experience-note strong{margin-bottom:8px}
.oktsuho.oktsuho--contract .oktsuho-construction-experience-note span{display:block}
}
/* v1.2.3 — hero diagonal boundary and compact mobile header. */
@media(min-width:821px){
/* Desktop: the diagonal begins around the visual centre at the top, then falls toward the left at the bottom. */
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero>.oktsuho-hero-media-v104{
inset:0 0 0 40%!important;
}
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero-slides{
clip-path:polygon(16.667% 0,100% 0,100% 100%,0 100%)!important;
-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 10%,#000 28%)!important;
mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 10%,#000 28%)!important;
}
}
@media(max-width:600px){
/* Give the logo/title a little more room on the left and keep phone/menu clear of it. */
.oktsuho.oktsuho--contract .oktsuho-header .oktsuho-container.oktsuho-header-main{
width:calc(100% - 10px)!important;
max-width:none!important;
margin-left:3px!important;
margin-right:7px!important;
}
.oktsuho.oktsuho--contract.is-enhanced .oktsuho-header-main{
grid-template-columns:minmax(0,1fr) minmax(70px,84px) 44px!important;
gap:2px!important;
}
.oktsuho.oktsuho--contract .oktsuho-header-main>.oktsuho-brand{
transform:translateX(-2px);
}
.oktsuho.oktsuho--contract .oktsuho-mobile-phone{
transform:translateX(-2px);
max-width:84px!important;
}
.oktsuho.oktsuho--contract .oktsuho-menu-toggle{
min-width:44px!important;
width:44px!important;
padding:5px 2px!important;
}
.oktsuho.oktsuho--contract .oktsuho-menu-label{
display:block!important;
width:100%!important;
white-space:nowrap!important;
word-break:keep-all!important;
overflow:visible!important;
font-size:8px!important;
line-height:1.15!important;
letter-spacing:-.02em!important;
writing-mode:horizontal-tb!important;
}
}
@media(max-width:360px){
.oktsuho.oktsuho--contract.is-enhanced .oktsuho-header-main{
grid-template-columns:minmax(0,1fr) minmax(66px,76px) 42px!important;
gap:1px!important;
}
.oktsuho.oktsuho--contract .oktsuho-menu-toggle{min-width:42px!important;width:42px!important}
.oktsuho.oktsuho--contract .oktsuho-mobile-phone{max-width:76px!important}
}
/* =========================================================
v1.2.4 — requested header/footer/review refinements
========================================================= */
/* Mobile: move the phone/reception block slightly left so it has more breathing room from the menu button. */
@media(max-width:600px){
.oktsuho.oktsuho--contract .oktsuho-mobile-phone{
transform:translateX(-7px)!important;
}
}
@media(max-width:360px){
.oktsuho.oktsuho--contract .oktsuho-mobile-phone{
transform:translateX(-5px)!important;
}
}
/* Footer: keep the original text title even when a header logo image is configured. */
.oktsuho.oktsuho--contract .oktsuho-contract-footer .oktsuho-footer-brand-title{
display:inline-flex;
width:auto;
max-width:100%;
margin-bottom:10px;
}
.oktsuho.oktsuho--contract .oktsuho-contract-footer .oktsuho-footer-brand-title .oktsuho-brand-text{
white-space:normal;
}
/* Google reviews: every card matches the height of the longest comment in the row. */
.oktsuho.oktsuho--contract .oktsuho-review-window[data-oktsuho-marquee] .oktsuho-review-group{
align-items:stretch!important;
}
.oktsuho.oktsuho--contract .oktsuho-review-window[data-oktsuho-marquee] .oktsuho-google-review-card{
height:auto!important;
align-self:stretch!important;
}
.oktsuho.oktsuho--contract .oktsuho-google-review-card .oktsuho-review-body{
flex:1 1 auto!important;
}
.oktsuho.oktsuho--contract .oktsuho-review-card-footer{
margin-top:auto!important;
}
/* v1.2.7 記事内CONSULTATION：間隔、料金カード、PCボタン幅 */
.oktsuho .oktsuho-single-content .oktsuho-article-cta {
margin-top:64px;
margin-bottom:64px;
padding:30px 28px;
}
.oktsuho .oktsuho-article-cta .oktsuho-consult-price-cards {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
max-width:660px;
margin:22px auto 16px;
}
.oktsuho .oktsuho-article-cta .oktsuho-consult-price-card {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:112px;
padding:18px 16px;
border:1px solid #dae4ee;
border-radius:13px;
background:#fff;
box-shadow:0 5px 16px rgba(24,59,98,.06);
}
.oktsuho .oktsuho-article-cta .oktsuho-consult-price-card span {
display:block;
margin-bottom:7px;
color:#183b62;
font-size:14px;
font-weight:700;
line-height:1.6;
}
.oktsuho .oktsuho-article-cta .oktsuho-consult-price-card strong {
display:block;
color:#183b62;
font-size:25px;
font-weight:800;
line-height:1.25;
}
.oktsuho .oktsuho-article-cta .oktsuho-consult-note {
max-width:660px;
margin:14px auto 0;
}
.oktsuho .oktsuho-article-cta .oktsuho-actions-article-cta {
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:12px;
margin-top:22px;
}
.oktsuho .oktsuho-article-cta .oktsuho-actions-article-cta .oktsuho-btn {
width:auto;
min-width:168px;
min-height:46px;
padding:10px 17px;
font-size:13px;
}
@media (max-width:640px) {
.oktsuho .oktsuho-single-content .oktsuho-article-cta {
margin-top:46px;
margin-bottom:46px;
padding:22px 16px;
}
.oktsuho .oktsuho-article-cta .oktsuho-consult-price-cards {
grid-template-columns:1fr;
gap:10px;
}
.oktsuho .oktsuho-article-cta .oktsuho-consult-price-card { min-height:0; }
.oktsuho .oktsuho-article-cta .oktsuho-actions-article-cta {
display:grid;
grid-template-columns:1fr;
gap:10px;
}
.oktsuho .oktsuho-article-cta .oktsuho-actions-article-cta .oktsuho-btn {
width:100%;
min-width:0;
}
}
/* v1.2.8 記事内CONSULTATION：PC/スマホのCTAボタン間隔を縮小。
記事本文の汎用 .oktsuho-btn に付く auto / 上下marginをここで打ち消すため、
既に公開済みの記事にある [oktsuho_article_cta] にも即時反映される。 */
.oktsuho .oktsuho-single-content .oktsuho-article-cta .oktsuho-actions-article-cta {
gap:10px;
}
.oktsuho .oktsuho-single-content .oktsuho-article-cta .oktsuho-actions-article-cta .oktsuho-btn {
margin:0 !important;
}
@media (max-width:640px) {
.oktsuho .oktsuho-single-content .oktsuho-article-cta .oktsuho-actions-article-cta {
gap:8px;
}
.oktsuho .oktsuho-single-content .oktsuho-article-cta .oktsuho-actions-article-cta .oktsuho-btn {
margin:0 !important;
}
}
/* ========================================================================
通報文書作成サポート v1.0.0 : Midnight Navy x Golden Yellow
All styles are scoped to the new plugin. They never recolor the source site.
======================================================================== */
.oktsuho,
.oktsuho.oktsuho--contract {
--oktsuho-blue:#193f70;
--oktsuho-navy:#102744;
--oktsuho-ink:#1a2d49;
--oktsuho-muted:#56657c;
--oktsuho-line:#d9e3ee;
--oktsuho-soft:#fff9eb;
--oktsuho-deep:#1a446d;
--oktsuho-yellow:#f0c330;
--oktsuho-gold:#e2ad18;
background:#fff;
color:var(--oktsuho-ink);
}
.oktsuho .oktsuho-header-top,
.oktsuho.oktsuho--contract .oktsuho-header-top {
background:#102744;
border-color:#102744;
}
.oktsuho .oktsuho-header-top p,
.oktsuho.oktsuho--contract .oktsuho-header-top p {
color:#fff4cd;
letter-spacing:.055em;
}
.oktsuho .oktsuho-header {border-bottom:2px solid #f0c330;}
.oktsuho .oktsuho-header-main {background:#fff;}
.oktsuho .oktsuho-menu a {color:#183859;}
.oktsuho .oktsuho-menu a:hover {color:#b38108;}
.oktsuho .oktsuho-brand-text,
.oktsuho .oktsuho-brand-text strong,
.oktsuho .oktsuho-brandtext {color:#102744;}
.oktsuho .oktsuho-eyebrow,
.oktsuho.oktsuho--contract .oktsuho-eyebrow {color:#966a04;}
.oktsuho h1,.oktsuho h2,.oktsuho h3 {color:#142c4c;}
.oktsuho .oktsuho-heading h2::after {background:var(--oktsuho-yellow);}
.oktsuho.oktsuho--contract .oktsuho-contract-hero,
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-hero {
background:linear-gradient(119deg,#fff 5%,#fffdf8 56%,#f7ecd0 100%) !important;
border-bottom:1px solid #e7dfcb;
}
.oktsuho.oktsuho--contract .oktsuho-contract-hero::after {background:rgba(240,195,48,.09);}
.oktsuho.oktsuho--contract .oktsuho-contract-hero .oktsuho-hero-badge {
background:#102744 !important;
border:1px solid #102744 !important;
color:#ffdf76 !important;
-webkit-text-fill-color:#ffdf76 !important;
border-radius:999px;
}
.oktsuho.oktsuho--contract .oktsuho-contract-hero .oktsuho-hero-badge::before,
.oktsuho.oktsuho--contract .oktsuho-contract-hero .oktsuho-hero-badge::after {background:#f0c330 !important;}
.oktsuho .oktsuho-hero-title-accent,
.oktsuho.oktsuho--contract .oktsuho-hero-title-accent {
color:#b28305 !important;
-webkit-text-fill-color:#b28305 !important;
}
.oktsuho .oktsuho-hero-description,
.oktsuho.oktsuho--contract .oktsuho-hero-price-note {color:#4c5e76;}
.oktsuho.oktsuho--contract .oktsuho-hero-image-fallback {
background:linear-gradient(137deg,#faf3df,#e8d9a7 75%,#d8b656);
}
.oktsuho.oktsuho--contract .oktsuho-hero-image-fallback .oktsuho-visual-placeholder {
color:#133252;
}
.oktsuho.oktsuho--contract .oktsuho-hero-image-fallback .oktsuho-visual-placeholder strong {
color:#143552;
}
.oktsuho.oktsuho--contract .oktsuho-hero-image-fallback .oktsuho-visual-placeholder svg {
color:#af8617;
}
.oktsuho .oktsuho-contract-price-pills>div,
.oktsuho.oktsuho--contract .oktsuho-contract-price-pills>div {
background:rgba(255,255,255,.96);
border:1px solid #ead7a7;
box-shadow:0 10px 23px rgba(32,42,65,.08);
}
.oktsuho .oktsuho-contract-price-pills strong,
.oktsuho.oktsuho--contract .oktsuho-contract-price-pills strong {
color:#123763 !important;
-webkit-text-fill-color:#123763 !important;
}
.oktsuho .oktsuho-contract-price-pills span {color:#5d5e65;}
.oktsuho .oktsuho-btn-primary,
.oktsuho .oktsuho-price-consult-btn,
.oktsuho .oktsuho-submit,
.oktsuho.oktsuho--contract .oktsuho-btn-primary {
background:#f0c330 !important;
border-color:#dbad19 !important;
color:#122945 !important;
-webkit-text-fill-color:#122945 !important;
box-shadow:0 8px 19px rgba(161,120,17,.15);
font-weight:800;
}
.oktsuho .oktsuho-btn-primary:hover,
.oktsuho .oktsuho-price-consult-btn:hover,
.oktsuho .oktsuho-submit:hover {
background:#ddb11c !important;
border-color:#c49b0c !important;
color:#102744 !important;
-webkit-text-fill-color:#102744 !important;
}
.oktsuho .oktsuho-btn-line,
.oktsuho.oktsuho--contract .oktsuho-contract-fit-bottom .oktsuho-actions-onblue .oktsuho-btn-line {
background:#fff !important;
border:1px solid #b8c8d8 !important;
color:#173b62 !important;
-webkit-text-fill-color:#173b62 !important;
}
.oktsuho .oktsuho-btn-line:hover,
.oktsuho.oktsuho--contract .oktsuho-contract-fit-bottom .oktsuho-actions-onblue .oktsuho-btn-line:hover {
background:#ecf1f7 !important;
border-color:#abc0d2 !important;
color:#102744 !important;
-webkit-text-fill-color:#102744 !important;
}
.oktsuho .oktsuho-btn-outline,
.oktsuho .oktsuho-column-return-btn {border-color:#d4b24f;color:#1c4367;}
.oktsuho .oktsuho-service-card {
background:#fff;
border-color:#d8e3ec;
box-shadow:0 10px 24px rgba(16,39,68,.06);
}
.oktsuho .oktsuho-service-icon,
.oktsuho .oktsuho-card-icon {
background:#fff7de !important;
color:#1c456d !important;
}
.oktsuho .oktsuho-card-illustration .oktsuho-icon {color:#b78a0a;}
.oktsuho .oktsuho-price-section {background:#f5f8fc;}
.oktsuho .oktsuho-contract-price-card,
.oktsuho.oktsuho--contract .oktsuho-contract-price-card {
background:#fff;
border-color:#cbd9e6;
box-shadow:0 10px 32px rgba(16,39,68,.07);
}
.oktsuho .oktsuho-contract-price-card.is-featured,
.oktsuho.oktsuho--contract .oktsuho-contract-price-card.is-featured {
background:linear-gradient(180deg,#fff8de,#fff 56%);
border:2px solid #e8bb34;
}
.oktsuho.oktsuho--contract .oktsuho-price-tag {
color:#173e69;
background:#fff1bf;
}
.oktsuho .oktsuho-price-amount strong,
.oktsuho.oktsuho--contract .oktsuho-price-amount strong {
color:#102f55 !important;
-webkit-text-fill-color:#102f55 !important;
}
.oktsuho .oktsuho-contract-cost-note {
background:#fffbef;
border-left:5px solid #f0c330;
}
.oktsuho .oktsuho-contract-cost-note p {color:#526175;}
.oktsuho .oktsuho-flow-grid li > span {
background:#163f6b;
color:#ffdf6a;
border-color:#163f6b;
}
.oktsuho .oktsuho-flow-grid li {border-color:#e1e7ed;}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-section {
background:linear-gradient(132deg,#0a1d36 0%,#163859 55%,#1b426e 100%) !important;
}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-copy .oktsuho-eyebrow {
color:#f0c330;
}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-copy>p:last-child,
.oktsuho.oktsuho--contract .oktsuho-contract-fit-bottom p {
color:#f0f3f8 !important;
}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-grid {
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-card {
background:#fff;
border:1px solid #b9cde1;
border-top:4px solid #f0c330;
box-shadow:0 10px 30px rgba(1,19,40,.2);
}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-card>span {
background:#f9e5a1;
color:#122945;
}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-card h3 {
color:#12304f !important;
-webkit-text-fill-color:#12304f !important;
}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-card p {
color:#526379 !important;
}
.oktsuho.oktsuho--contract .oktsuho-construction-experience-note {
border-color:rgba(240,195,48,.55);
background:rgba(255,244,205,.1);
}
.oktsuho.oktsuho--contract .oktsuho-construction-experience-note strong,
.oktsuho.oktsuho--contract .oktsuho-construction-experience-note span {
color:#ffefbf !important;
}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-placeholder {color:#f0c330;}
.oktsuho.oktsuho--contract .oktsuho-google-reviews {
background:#f7f8fb;
}
.oktsuho.oktsuho--contract .oktsuho-review-attribution {color:#4d6077;}
.oktsuho .oktsuho-google-review-card {border-color:#e4e9f2;}
.oktsuho.oktsuho--contract .oktsuho-office-section {
background:linear-gradient(135deg,#fffdf8,#f3f6fb);
}
.oktsuho.oktsuho--contract .oktsuho-office-experience-badge {
border-color:#e8d49d;
background:#fff5d3;
color:#173552;
}
.oktsuho.oktsuho--contract .oktsuho-office-experience-badge strong {color:#173552;}
.oktsuho .oktsuho-faq-list summary span {background:#fff2b8;color:#173c61;}
.oktsuho .oktsuho-contact-section {background:linear-gradient(130deg,#f6f9fc,#fffdf6);}
.oktsuho .oktsuho-form-panel {border:1px solid #d7e1ec;box-shadow:0 14px 40px rgba(16,39,68,.07);}
.oktsuho .oktsuho-field input:not([type=radio]):not([type=checkbox]),
.oktsuho .oktsuho-field textarea,
.oktsuho .oktsuho-field select {
width:100%;
max-width:100%;
min-height:46px;
border:1px solid #c6d5e3;
border-radius:8px;
background:#fff;
padding:10px 13px;
color:#192e4a;
font-family:inherit;
font-size:15px;
box-sizing:border-box;
}
.oktsuho .oktsuho-field textarea {min-height:150px;}
.oktsuho .oktsuho-field select:focus-visible,
.oktsuho .oktsuho-field input:focus-visible,
.oktsuho .oktsuho-field textarea:focus-visible {
outline:3px solid rgba(240,195,48,.52);
border-color:#ad851a;
outline-offset:2px;
}
.oktsuho .oktsuho-field input[type=radio],
.oktsuho .oktsuho-field input[type=checkbox],
.oktsuho .oktsuho-privacy input {accent-color:#163f6b;}
.oktsuho.oktsuho--contract .oktsuho-contract-footer {
background:#0b1e35;
border-top:4px solid #f0c330;
}
.oktsuho.oktsuho--contract .oktsuho-contract-footer .oktsuho-footer-column a:hover {
color:#ffdf7b !important;
}
.oktsuho .oktsuho-legal-body h2 {
border-bottom:1px solid #eadcae;
color:#163555;
}
.oktsuho .oktsuho-legal-body a {color:#1c4c78;text-decoration:underline;}
.oktsuho .oktsuho-article-cta,
.oktsuho .oktsuho-consult-price-card {
border-color:#e7d7a7;
background:#fffaf0;
}
.oktsuho .oktsuho-article-cta .oktsuho-consult-price-card strong {color:#163e65;}
@media(max-width:980px){
.oktsuho.oktsuho--contract .oktsuho-contract-fit-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:700px){
.oktsuho.oktsuho--contract .oktsuho-contract-fit-grid {grid-template-columns:1fr;}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-card {padding:23px 22px;}
}
@media(max-width:600px){
.oktsuho .oktsuho-menu a {background:#fff8e5;}
.oktsuho.oktsuho--contract .oktsuho-hero-badge {white-space:normal!important;max-width:100%!important;}
.oktsuho.oktsuho--contract .oktsuho-contract-price-pills>div {padding:12px 14px;}
.oktsuho.oktsuho--contract .oktsuho-contract-price-card {padding:23px 20px;}
}
/* ========================================================================
v1.1.0 ACCESSIBLE CONTRAST — Navy / Yellow only
Explicit foreground+background pairs prevent white-on-white text from
inherited selectors. No legacy floating decoration is emitted.
======================================================================== */
.oktsuho,
.oktsuho.oktsuho--contract {
--oktsuho-blue:#173b65;
--oktsuho-navy:#102744;
--oktsuho-ink:#192f4c;
--oktsuho-muted:#485c76;
--oktsuho-line:#d4deeb;
--oktsuho-soft:#fff8e8;
--oktsuho-yellow:#f0c330;
--oktsuho-deep:#173b65;
color:#192f4c;
background:#fff;
}
.oktsuho .oktsuho-hero,
.oktsuho .oktsuho-hero-copy,
.oktsuho .oktsuho-service-card,
.oktsuho .oktsuho-contract-price-card,
.oktsuho .oktsuho-flow-grid>li,
.oktsuho .oktsuho-google-review-card,
.oktsuho .oktsuho-form-panel,
.oktsuho .oktsuho-legal-page,
.oktsuho .oktsuho-faq-list>details,
.oktsuho .oktsuho-single-content,
.oktsuho .oktsuho-office-copy {
color:#192f4c;
}
.oktsuho .oktsuho-hero h1,
.oktsuho .oktsuho-service-card h3,
.oktsuho .oktsuho-contract-price-card h3,
.oktsuho .oktsuho-office-section h2,
.oktsuho .oktsuho-faq-section h2,
.oktsuho .oktsuho-contact-section h2,
.oktsuho .oktsuho-column-section h2,
.oktsuho .oktsuho-legal-page h1 {
color:#102744 !important;
-webkit-text-fill-color:#102744 !important;
}
.oktsuho .oktsuho-hero-description,
.oktsuho .oktsuho-service-card p,
.oktsuho .oktsuho-price-summary,
.oktsuho .oktsuho-contract-price-card p,
.oktsuho .oktsuho-office-copy p,
.oktsuho .oktsuho-contact-copy > p:not(.oktsuho-eyebrow),
.oktsuho .oktsuho-legal-body p,
.oktsuho .oktsuho-faq-list details div p {
color:#455972;
-webkit-text-fill-color:#455972;
}
.oktsuho .oktsuho-hero-title-accent,
.oktsuho.oktsuho--contract .oktsuho-hero-title-accent {
color:#976904 !important;
-webkit-text-fill-color:#976904 !important;
}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-section {
background:linear-gradient(130deg,#0b1c33 0%,#12345b 54%,#1d446f 100%) !important;
color:#fff;
}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-copy h2,
.oktsuho.oktsuho--contract .oktsuho-contract-fit-bottom h3 {
color:#fff !important;
-webkit-text-fill-color:#fff !important;
}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-copy>p:not(.oktsuho-eyebrow),
.oktsuho.oktsuho--contract .oktsuho-contract-fit-bottom p {
color:#f3f6ff !important;
-webkit-text-fill-color:#f3f6ff !important;
}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-copy .oktsuho-eyebrow {
color:#ffdf77 !important;
-webkit-text-fill-color:#ffdf77 !important;
}
/* Specific fix: "事実を正確に伝える文書作成" used a pale badge with pale text. */
.oktsuho.oktsuho--contract .oktsuho-construction-experience-note {
background:#091d35 !important;
border:2px solid #e9ba32 !important;
box-shadow:0 12px 24px rgba(0,0,0,.15);
color:#fff !important;
}
.oktsuho.oktsuho--contract .oktsuho-construction-experience-note strong {
background:#f0c330 !important;
color:#102744 !important;
-webkit-text-fill-color:#102744 !important;
border-radius:999px;
font-weight:800;
white-space:normal;
}
.oktsuho.oktsuho--contract .oktsuho-construction-experience-note span {
color:#fff !important;
-webkit-text-fill-color:#fff !important;
}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-card {
background:#fff !important;
color:#192f4c !important;
border:1px solid #c9d5e4;
border-top:4px solid #f0c330;
}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-card h3 {
color:#142f51 !important;
-webkit-text-fill-color:#142f51 !important;
}
.oktsuho.oktsuho--contract .oktsuho-contract-fit-card p {
color:#455b78 !important;
-webkit-text-fill-color:#455b78 !important;
}
.oktsuho .oktsuho-btn-primary,
.oktsuho .oktsuho-price-consult-btn,
.oktsuho .oktsuho-submit {
background:#f0c330 !important;
border:1px solid #bc8f00 !important;
color:#102744 !important;
-webkit-text-fill-color:#102744 !important;
}
.oktsuho .oktsuho-btn-primary:hover,
.oktsuho .oktsuho-price-consult-btn:hover,
.oktsuho .oktsuho-submit:hover {background:#e2b522!important;color:#102744!important;-webkit-text-fill-color:#102744!important;}
.oktsuho .oktsuho-actions {gap:10px;align-items:stretch;}
.oktsuho .oktsuho-btn {text-decoration:none !important;}
.oktsuho .oktsuho-btn-line,
.oktsuho.oktsuho--contract .oktsuho-contract-fit-bottom .oktsuho-actions-onblue .oktsuho-btn-line {
background:#fff !important;
border:2px solid #183e66 !important;
color:#173b65 !important;
-webkit-text-fill-color:#173b65 !important;
box-shadow:0 8px 19px rgba(16,39,68,.1);
}
.oktsuho .oktsuho-btn-line:hover {background:#fff6dc!important;color:#173b65!important;-webkit-text-fill-color:#173b65!important;}
.oktsuho .oktsuho-btn-unavailable,
.oktsuho .oktsuho-btn-unavailable:hover {
background:#f1f3f7 !important;
border:2px solid #b9c5d3 !important;
color:#53657b !important;
-webkit-text-fill-color:#53657b !important;
box-shadow:none !important;
opacity:1;
cursor:not-allowed;
user-select:none;
}
.oktsuho .oktsuho-actions-header .oktsuho-btn {
font-size:11px;
min-height:39px;
width:126px;
padding:8px 9px;
}
.oktsuho .oktsuho-contact-section,
.oktsuho .oktsuho-office-section,
.oktsuho .oktsuho-google-reviews {color:#192f4c;}
.oktsuho .oktsuho-review-link-button,
.oktsuho .oktsuho-column-return-btn,
.oktsuho .oktsuho-btn-outline {
background:#fff;
border:1px solid #a7bdcf;
color:#173b65;
-webkit-text-fill-color:#173b65;
}
.oktsuho .oktsuho-article-cta {
background:#fff7e0 !important;
border:2px solid #e3bd4b !important;
color:#192f4c !important;
}
.oktsuho .oktsuho-article-cta h2 {color:#102744!important;-webkit-text-fill-color:#102744!important;}
.oktsuho .oktsuho-consult-price-card {background:#fff!important;border:1px solid #d9c687!important;}
.oktsuho .oktsuho-consult-price-card strong {color:#173b65!important;-webkit-text-fill-color:#173b65!important;}
@media(max-width:700px) {
.oktsuho .oktsuho-actions-hero,
.oktsuho .oktsuho-actions-office,
.oktsuho .oktsuho-actions-onblue,
.oktsuho .oktsuho-actions-article-cta {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.oktsuho .oktsuho-actions-hero .oktsuho-btn,
.oktsuho .oktsuho-actions-office .oktsuho-btn,
.oktsuho .oktsuho-actions-onblue .oktsuho-btn,
.oktsuho .oktsuho-actions-article-cta .oktsuho-btn {min-width:0;width:100%;padding:10px 8px;gap:6px;font-size:12px;white-space:normal;text-align:center;}
}
@media(max-width:370px) {
.oktsuho .oktsuho-actions-hero,
.oktsuho .oktsuho-actions-office,
.oktsuho .oktsuho-actions-onblue,
.oktsuho .oktsuho-actions-article-cta {grid-template-columns:1fr;}
}
/* Contrast finishing touches for placeholder text and form annotations. */
.oktsuho .oktsuho-office-placeholder strong,
.oktsuho .oktsuho-office-placeholder span {color:#405a77 !important;-webkit-text-fill-color:#405a77 !important;}
.oktsuho .oktsuho-optional {color:#3c5270 !important;-webkit-text-fill-color:#3c5270 !important;}
.oktsuho .oktsuho-plan-field legend span {color:#3c5270 !important;-webkit-text-fill-color:#3c5270 !important;}
/* Small-screen hero: keep placeholder illustrations from showing through copy. */
@media(max-width:820px) {
.oktsuho.oktsuho--contract.oktsuho-layout-reference .oktsuho-contract-hero .oktsuho-hero-image-fallback {
display:none !important;
}
}
@media(max-width:600px) {
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-actions-hero {
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
width:100%;
max-width:100%;
margin:8px 0 20px;
}
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-actions-hero .oktsuho-btn {
display:inline-flex !important;
width:100% !important;
min-width:0 !important;
min-height:48px !important;
padding:10px 7px !important;
gap:5px !important;
font-size:12px !important;
}
}
@media(max-width:370px){
.oktsuho.oktsuho--contract .oktsuho-hero .oktsuho-actions-hero{grid-template-columns:1fr;}
}
/* ========================================================================
v1.1.1 requested refinements — mobile header / icon frame / review buttons
======================================================================== */
@media (max-width:600px){
.oktsuho.oktsuho--contract .oktsuho-header .oktsuho-container.oktsuho-header-main{
width:calc(100% - 18px)!important;
margin-left:auto!important;
margin-right:auto!important;
}
.oktsuho.oktsuho--contract.is-enhanced .oktsuho-header-main{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto auto!important;
column-gap:10px!important;
row-gap:8px!important;
align-items:center!important;
}
.oktsuho.oktsuho--contract .oktsuho-header-main>.oktsuho-brand{
grid-column:1!important;
grid-row:1!important;
min-width:0!important;
transform:none!important;
margin-right:0!important;
}
.oktsuho.oktsuho--contract .oktsuho-header-main>.oktsuho-mobile-phone{
grid-column:2!important;
grid-row:1!important;
justify-self:end!important;
align-items:flex-end!important;
transform:none!important;
max-width:none!important;
min-width:72px!important;
}
.oktsuho.oktsuho--contract .oktsuho-header-main>.oktsuho-menu-toggle{
grid-column:3!important;
grid-row:1!important;
justify-self:end!important;
align-self:center!important;
min-width:44px!important;
width:44px!important;
padding:6px 4px!important;
}
.oktsuho.oktsuho--contract .oktsuho-mobile-phone a{
gap:3px!important;
font-size:11.5px!important;
}
.oktsuho.oktsuho--contract .oktsuho-mobile-phone .oktsuho-mobile-phone-number{
font-size:11.5px!important;
letter-spacing:-.03em!important;
}
.oktsuho.oktsuho--contract .oktsuho-mobile-phone>span{
margin-top:3px!important;
font-size:6.9px!important;
text-align:right!important;
}
.oktsuho.oktsuho--contract .oktsuho-menu-label{
font-size:8px!important;
letter-spacing:-.01em!important;
}
.oktsuho.oktsuho--contract.is-enhanced .oktsuho-header-main>.oktsuho-menu{
grid-column:1 / -1!important;
grid-row:2!important;
}
}
@media (max-width:360px){
.oktsuho.oktsuho--contract.is-enhanced .oktsuho-header-main{
grid-template-columns:minmax(0,1fr) minmax(74px,auto) 42px!important;
column-gap:7px!important;
}
.oktsuho.oktsuho--contract .oktsuho-header-main>.oktsuho-menu-toggle{
min-width:42px!important;
width:42px!important;
}
.oktsuho.oktsuho--contract .oktsuho-mobile-phone .oktsuho-mobile-phone-number{
font-size:10.8px!important;
}
}
.oktsuho.oktsuho--contract .oktsuho-service-card .oktsuho-card-illustration{
width:74px!important;
height:74px!important;
margin:0 auto 16px!important;
padding:0!important;
aspect-ratio:1!important;
border:none!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
overflow:visible!important;
}
.oktsuho.oktsuho--contract .oktsuho-service-card .oktsuho-service-icon{
width:74px!important;
height:74px!important;
margin:0 auto!important;
background:#fff7da!important;
border:1px solid #e1c874!important;
border-radius:50%!important;
color:#b78a0a!important;
box-shadow:none!important;
}
.oktsuho.oktsuho--contract .oktsuho-service-card .oktsuho-service-icon svg{
width:30px!important;
height:30px!important;
}
@media (max-width:600px){
.oktsuho.oktsuho--contract .oktsuho-service-card .oktsuho-card-illustration{
width:62px!important;
height:62px!important;
}
.oktsuho.oktsuho--contract .oktsuho-service-card .oktsuho-service-icon{
width:62px!important;
height:62px!important;
}
.oktsuho.oktsuho--contract .oktsuho-service-card .oktsuho-service-icon svg{
width:26px!important;
height:26px!important;
}
}
@media (max-width:700px){
.oktsuho.oktsuho--contract .oktsuho-review-link-buttons{
align-items:center!important;
justify-content:center!important;
text-align:center!important;
}
.oktsuho.oktsuho--contract .oktsuho-review-link-button,
.oktsuho.oktsuho--contract .oktsuho-review-link-button.is-other,
.oktsuho.oktsuho--contract .oktsuho-review-link-button.is-google{
width:min(100%,330px)!important;
margin-inline:auto!important;
}
}
/* ========================================================================
v1.1.2 — GPT article structure: clear navy/yellow boxes, data tables, TOC
======================================================================== */
.oktsuho.oktsuho--contract .oktsuho-single-content .oktsuho-toc-box {
border:1px solid #c8d6e6;
border-left:5px solid #e7ba36;
background:#f5f8fc;
color:#192f4c;
}
.oktsuho.oktsuho--contract .oktsuho-single-content .oktsuho-article-box {
border:1px solid #bdcee2;
border-left:5px solid #173b65;
background:#f6f9fd;
color:#192f4c;
}
.oktsuho.oktsuho--contract .oktsuho-single-content .oktsuho-law-box {
border:1px solid #e5d096;
border-left:5px solid #e7ba36;
background:#fff8e5;
color:#192f4c;
}
.oktsuho.oktsuho--contract .oktsuho-single-content .oktsuho-related-box {
border:1px solid #dfcf9e;
border-left:5px solid #e7ba36;
background:#fffaf0;
color:#192f4c;
padding:18px 22px;
}
.oktsuho.oktsuho--contract .oktsuho-single-content .oktsuho-article-box strong,
.oktsuho.oktsuho--contract .oktsuho-single-content .oktsuho-law-box strong,
.oktsuho.oktsuho--contract .oktsuho-single-content .oktsuho-related-box strong,
.oktsuho.oktsuho--contract .oktsuho-single-content .oktsuho-toc-box strong {
color:#102744;
-webkit-text-fill-color:#102744;
}
.oktsuho.oktsuho--contract .oktsuho-single-content .oktsuho-related-box a {
color:#164676!important;
-webkit-text-fill-color:#164676!important;
text-decoration:underline!important;
text-underline-offset:3px;
overflow-wrap:anywhere;
}
.oktsuho.oktsuho--contract .oktsuho-single-content .oktsuho-related-box li {
line-height:1.75;
margin:.45em 0;
}
.oktsuho.oktsuho--contract .oktsuho-single-content table.oktsuho-data-table {
width:100%;
border:1px solid #c8d4e3;
border-radius:10px;
background:#fff;
}
.oktsuho.oktsuho--contract .oktsuho-single-content table.oktsuho-data-table th {
background:#fff0bd;
color:#102744!important;
-webkit-text-fill-color:#102744!important;
text-align:left;
}
.oktsuho.oktsuho--contract .oktsuho-single-content table.oktsuho-data-table td {
background:#fff;
color:#263c57;
text-align:left;
}
.oktsuho.oktsuho--contract .oktsuho-single-content table.oktsuho-data-table th,
.oktsuho.oktsuho--contract .oktsuho-single-content table.oktsuho-data-table td {
border-color:#e5e8ed;
padding:12px 14px;
vertical-align:top;
white-space:normal;
overflow-wrap:anywhere;
}
@media(max-width:640px){
.oktsuho.oktsuho--contract .oktsuho-single-content .oktsuho-toc-box,
.oktsuho.oktsuho--contract .oktsuho-single-content .oktsuho-article-box,
.oktsuho.oktsuho--contract .oktsuho-single-content .oktsuho-law-box,
.oktsuho.oktsuho--contract .oktsuho-single-content .oktsuho-related-box{
box-sizing:border-box;
max-width:100%;
padding:16px 15px;
border-radius:10px;
}
.oktsuho.oktsuho--contract .oktsuho-single-content table.oktsuho-data-table{
display:block;
max-width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.oktsuho.oktsuho--contract .oktsuho-single-content table.oktsuho-data-table th,
.oktsuho.oktsuho--contract .oktsuho-single-content table.oktsuho-data-table td{
min-width:100px;
padding:10px 12px;
font-size:13px;
}
}
/* 1.2.0: 迷惑営業電話・事業者宛通知セクション。既存レイアウトに非干渉。 */
.oktsuho.oktsuho--contract .oktsuho-business-section{background:#f3f6fb;border-top:1px solid #dce4ee;border-bottom:1px solid #dce4ee;scroll-margin-top:90px}
.oktsuho.oktsuho--contract .oktsuho-business-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}
.oktsuho.oktsuho--contract .oktsuho-business-card{min-width:0;background:#fff;border:1px solid #d7e1ef;border-radius:13px;padding:28px 26px;box-shadow:0 7px 22px rgba(12,34,66,.055);border-top:4px solid #e6b93c}
.oktsuho.oktsuho--contract .oktsuho-business-card>span{display:inline-flex;justify-content:center;align-items:center;border-radius:100px;background:#122f54;color:#f9d36a;font-size:12px;font-weight:800;letter-spacing:.07em;min-width:38px;height:34px;padding:0 8px}
.oktsuho.oktsuho--contract .oktsuho-business-card h3{font-size:clamp(17px,1.7vw,20px);line-height:1.55;letter-spacing:.015em;color:#102a48;margin:18px 0 10px;overflow-wrap:anywhere}
.oktsuho.oktsuho--contract .oktsuho-business-card p{font-size:14px;color:#34506a;line-height:1.9;margin:0;overflow-wrap:anywhere}
.oktsuho.oktsuho--contract .oktsuho-business-caution{font-size:13px;line-height:1.9;max-width:1080px;margin:23px auto 2px;color:#284564}
.oktsuho.oktsuho--contract .oktsuho-case-options{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin:10px 0 5px}
.oktsuho.oktsuho--contract .oktsuho-case-options label{max-width:100%;white-space:normal;overflow-wrap:anywhere;font-size:14px;line-height:1.7}
.oktsuho.oktsuho--contract .oktsuho-case-options input[type="radio"]{width:18px;min-width:18px;min-height:18px;height:18px;flex:0 0 18px;padding:0;margin:0;accent-color:#143f72}
@media(max-width:920px){.oktsuho.oktsuho--contract .oktsuho-business-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.oktsuho.oktsuho--contract .oktsuho-business-cards{grid-template-columns:1fr;gap:13px;margin-top:22px}.oktsuho.oktsuho--contract .oktsuho-business-card{padding:23px 20px}.oktsuho.oktsuho--contract .oktsuho-business-caution{font-size:12px}.oktsuho.oktsuho--contract .oktsuho-case-options{display:grid;grid-template-columns:1fr;gap:11px}}
/* v1.2.2 — LP two clear service pillars, directly below the hero. */
.oktsuho.oktsuho--contract .oktsuho-overview-section{padding:76px 0 64px;background:linear-gradient(180deg,#fffaf0 0%,#fff 80%);scroll-margin-top:95px;border-bottom:1px solid #e9e2d5}
.oktsuho.oktsuho--contract .oktsuho-overview-heading{margin:0 auto 32px;max-width:840px}
.oktsuho.oktsuho--contract .oktsuho-overview-heading>p:last-child{font-size:15px;line-height:1.95;color:#405269}
.oktsuho.oktsuho--contract .oktsuho-overview-heading strong{color:#173c66;font-weight:800}
.oktsuho.oktsuho--contract .oktsuho-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
.oktsuho.oktsuho--contract .oktsuho-overview-card{min-width:0;display:flex;flex-direction:column;position:relative;overflow:hidden;background:#fff;border:1px solid #d4dfea;border-top:5px solid #e6b83b;border-radius:16px;padding:29px clamp(20px,2.7vw,36px) 28px;box-shadow:0 13px 35px rgba(11,34,64,.075)}
.oktsuho.oktsuho--contract .oktsuho-overview-card:nth-child(2){border-top-color:#214a75}
.oktsuho.oktsuho--contract .oktsuho-overview-card-top{display:flex;align-items:center;gap:12px;margin-bottom:21px}
.oktsuho.oktsuho--contract .oktsuho-overview-no{font-size:12px;letter-spacing:.11em;font-weight:800;border-radius:999px;background:#123456;color:#ffe28f;padding:8px 12px}
.oktsuho.oktsuho--contract .oktsuho-overview-kind{font-size:12px;letter-spacing:.07em;color:#48627d;font-weight:750}
.oktsuho.oktsuho--contract .oktsuho-overview-card-title{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.oktsuho.oktsuho--contract .oktsuho-overview-icon{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border:1px solid #f0dc9d;border-radius:12px;background:#fff7d9;color:#143d66}
.oktsuho.oktsuho--contract .oktsuho-overview-icon svg{width:29px;height:29px}
.oktsuho.oktsuho--contract .oktsuho-overview-card h3{margin:0;font-size:clamp(19px,2.25vw,24px);font-weight:800;line-height:1.48;letter-spacing:.012em;overflow-wrap:anywhere;color:#132f53}
.oktsuho.oktsuho--contract .oktsuho-overview-card p{margin:0 0 16px;font-size:14px;line-height:1.95;color:#3b536c;overflow-wrap:anywhere}
.oktsuho.oktsuho--contract .oktsuho-overview-card p strong{color:#193c65;font-weight:800}
.oktsuho.oktsuho--contract .oktsuho-overview-card ul{padding:0;margin:0 0 23px;list-style:none;display:grid;gap:9px}
.oktsuho.oktsuho--contract .oktsuho-overview-card li{position:relative;padding-left:23px;line-height:1.75;font-size:13px;color:#36526d}
.oktsuho.oktsuho--contract .oktsuho-overview-card li::before{content:'✓';position:absolute;left:0;top:0;color:#aa7910;font-weight:800}
.oktsuho.oktsuho--contract .oktsuho-overview-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:auto;padding-top:20px;border-top:1px solid #e5ecf3}
.oktsuho.oktsuho--contract .oktsuho-overview-links a{font-weight:800;text-decoration:none;font-size:13px;line-height:1.5}
.oktsuho.oktsuho--contract .oktsuho-overview-more{color:#194777;text-underline-offset:4px}
.oktsuho.oktsuho--contract .oktsuho-overview-more:hover{text-decoration:underline}
.oktsuho.oktsuho--contract .oktsuho-overview-contact{background:#f0c330;color:#173250!important;padding:11px 15px;border-radius:8px;box-shadow:0 4px 10px rgba(100,76,20,.08)}
.oktsuho.oktsuho--contract .oktsuho-overview-contact:hover{background:#dfb31a}
.oktsuho.oktsuho--contract .oktsuho-overview-note{margin:22px 0 0;font-size:12px;line-height:1.85;color:#54667b}
.oktsuho.oktsuho--contract .oktsuho-overview-next{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:24px;padding:17px 23px;background:#eaf0f6;border-radius:10px;font-size:13px;line-height:1.65;color:#183b62;font-weight:650}
.oktsuho.oktsuho--contract .oktsuho-overview-next a{color:#164b7f;font-weight:800;text-underline-offset:4px}
/* v1.2.2 — user-provided Google profile screenshot in the reviews section. */
.oktsuho.oktsuho--contract .oktsuho-review-snapshot-panel{display:grid;grid-template-columns:minmax(270px,435px) minmax(0,1fr);align-items:center;gap:clamp(22px,4.5vw,60px);background:#fff;border:1px solid #e0e7ee;border-radius:18px;padding:clamp(18px,3vw,34px);margin:0 auto 34px;max-width:1080px;box-shadow:0 12px 34px rgba(22,47,76,.055)}
.oktsuho.oktsuho--contract .oktsuho-review-snapshot-figure{margin:0;min-width:0}
.oktsuho.oktsuho--contract .oktsuho-review-snapshot-figure>a{display:block;line-height:0}
.oktsuho.oktsuho--contract .oktsuho-review-snapshot-image{display:block;width:100%;height:auto;max-width:492px;border:1px solid #edf0f5;border-radius:12px;object-fit:contain;box-shadow:0 5px 16px rgba(15,29,46,.07)}
.oktsuho.oktsuho--contract .oktsuho-review-snapshot-figure figcaption{margin:9px 0 0;font-size:11px;line-height:1.6;color:#68788b;text-align:center}
.oktsuho.oktsuho--contract .oktsuho-review-snapshot-kicker{margin:0 0 11px;font-size:11px;letter-spacing:.13em;font-weight:800;color:#a47810}
.oktsuho.oktsuho--contract .oktsuho-review-snapshot-copy h3{font-size:clamp(19px,2.4vw,24px);font-weight:800;line-height:1.5;margin:0 0 14px;color:#173352}
.oktsuho.oktsuho--contract .oktsuho-review-snapshot-copy p:not(.oktsuho-review-snapshot-kicker){font-size:14px;line-height:1.85;margin:0 0 12px;color:#425670}
.oktsuho.oktsuho--contract .oktsuho-review-snapshot-copy p.oktsuho-review-snapshot-caution{font-size:12px;color:#5b6a80}
.oktsuho.oktsuho--contract .oktsuho-review-snapshot-link{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin-top:9px;padding:12px 17px;border:1px solid #ccdee9;border-radius:9px;background:#eff5fa;font-size:13px;font-weight:800;color:#1b4b78;text-decoration:none}
.oktsuho.oktsuho--contract .oktsuho-review-snapshot-link:hover{background:#e6eef5}
@media(max-width:820px){
.oktsuho.oktsuho--contract .oktsuho-overview-section{padding:55px 0}
.oktsuho.oktsuho--contract .oktsuho-overview-grid{gap:14px}
.oktsuho.oktsuho--contract .oktsuho-overview-card{padding:22px 18px 21px}
.oktsuho.oktsuho--contract .oktsuho-review-snapshot-panel{grid-template-columns:minmax(0,1fr);gap:22px;max-width:550px}
.oktsuho.oktsuho--contract .oktsuho-review-snapshot-image{margin-inline:auto}
}
@media(max-width:680px){
.oktsuho.oktsuho--contract .oktsuho-overview-section{padding:43px 0 45px}
.oktsuho.oktsuho--contract .oktsuho-overview-heading{margin-bottom:22px}
.oktsuho.oktsuho--contract .oktsuho-overview-heading>p:last-child{font-size:14px}
.oktsuho.oktsuho--contract .oktsuho-overview-grid{grid-template-columns:minmax(0,1fr);gap:17px}
.oktsuho.oktsuho--contract .oktsuho-overview-card{padding:24px 21px}
.oktsuho.oktsuho--contract .oktsuho-overview-card-title{gap:10px}
.oktsuho.oktsuho--contract .oktsuho-overview-icon{flex-basis:43px;width:43px;height:43px}
.oktsuho.oktsuho--contract .oktsuho-overview-card h3{font-size:20px}
.oktsuho.oktsuho--contract .oktsuho-overview-links{flex-direction:column;align-items:stretch;text-align:center}
.oktsuho.oktsuho--contract .oktsuho-overview-contact{padding:13px 14px}
.oktsuho.oktsuho--contract .oktsuho-overview-note{font-size:12px}
.oktsuho.oktsuho--contract .oktsuho-overview-next{text-align:center;padding:18px 14px}
.oktsuho.oktsuho--contract .oktsuho-review-snapshot-panel{padding:16px;gap:17px}
.oktsuho.oktsuho--contract .oktsuho-review-snapshot-copy h3{font-size:20px}
.oktsuho.oktsuho--contract .oktsuho-review-snapshot-link{width:100%;justify-content:center;text-align:center}
}
/* v1.2.5 会社別記事：公開所在地の確認表とGoogleマップ検索リンク */
.oktsuho .oktsuho-single-content .oktsuho-company-info-heading {margin-top:20px;}
.oktsuho .oktsuho-single-content .oktsuho-company-info-table th[scope="row"] {width:30%;min-width:110px;white-space:normal;}
.oktsuho .oktsuho-single-content .oktsuho-company-info-table th,
.oktsuho .oktsuho-single-content .oktsuho-company-info-table td {text-align:left !important;word-break:break-word;overflow-wrap:anywhere;}
.oktsuho .oktsuho-single-content .oktsuho-company-info-table td a {color:#145b91;text-decoration:underline;text-underline-offset:3px;}
.oktsuho .oktsuho-single-content .oktsuho-company-info-note {color:#475b70;font-size:13px;line-height:1.8;margin:12px 0 24px;}
/* v1.2.5 過去のh3 Q/Aも書き換えなしで開閉式にする */
.oktsuho .oktsuho-single-content details.oktsuho-article-faq-item {
display:block;margin:0 0 12px;border:1px solid #e5d7ab;border-radius:13px;
background:#fff;overflow:hidden;box-shadow:0 4px 14px rgba(24,59,98,.04);
}
.oktsuho .oktsuho-single-content details.oktsuho-article-faq-item > summary {
display:block;position:relative;padding:16px 50px 16px 18px;background:#fffaee;
color:#183b62;font-weight:700;line-height:1.75;cursor:pointer;list-style:none;
}
.oktsuho .oktsuho-single-content details.oktsuho-article-faq-item > summary::-webkit-details-marker{display:none;}
.oktsuho .oktsuho-single-content details.oktsuho-article-faq-item > summary::after{
content:"＋";position:absolute;top:50%;right:18px;transform:translateY(-50%);
color:#183b62;font-size:22px;font-weight:500;line-height:1;
}
.oktsuho .oktsuho-single-content details.oktsuho-article-faq-item[open] > summary::after{content:"−";}
@media(max-width:640px){
.oktsuho .oktsuho-single-content .oktsuho-company-info-table th[scope="row"]{min-width:95px;}
.oktsuho .oktsuho-single-content details.oktsuho-article-faq-item > summary{padding:15px 46px 15px 15px;font-size:14px;}
}