:root{--blue:#1577be;--blue2:#2e8acb;--hero1:#1a6cae;--navy:#0b3a68;--blueDeep:#0e4f8f;--accent:#7cbf3f;--accent2:#67ab33;--sky:#cfe6f8;--tint:#e8f1fa;--tint2:#d7e7f5;--soft:#f4f8fc;--soft2:#eaf2fa;--ink:#1e2d3b;--muted:#5e7790;--line:#d2ddea} /* cyrillic */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic-ext */ /* cyrillic */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic-ext */ /* cyrillic */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic-ext */ /* cyrillic */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic-ext */ /* cyrillic */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic-ext */ /* cyrillic */ /* vietnamese */ /* latin-ext */ /* latin */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:'Noto Sans JP',sans-serif;-webkit-font-smoothing:antialiased;color:#1e2d3b} p,h1,h2,h3,h4,li,dd,blockquote{word-break:auto-phrase;line-break:strict;overflow-wrap:break-word;} @media(max-width:980px){.sub-intro{text-align:left !important;}.crumb-rule{display:inline-block !important;}.footer-sitemap{grid-template-columns:1fr !important;}} @keyframes lineUp{from{transform:translateY(120%)}to{transform:translateY(0)}} @keyframes lineIn{from{transform:translateX(-32px);opacity:0}to{transform:translateX(0);opacity:1}} @keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes glowPulse{0%,100%{opacity:.4}50%{opacity:.75}} @keyframes scrollDot{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(40px);opacity:0}} @keyframes kenburns{0%{transform:scale(1.05)}100%{transform:scale(1.15)}} @keyframes drift{0%{transform:translate(0,0)}50%{transform:translate(-1.6%,1%)}100%{transform:translate(0,0)}} @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}} @keyframes bubbleRise{0%{transform:translate(0,0) scale(.5);opacity:0}12%{opacity:.6}50%{transform:translate(10px,-360px) scale(.92)}85%{opacity:.45}100%{transform:translate(-8px,-720px) scale(1.06);opacity:0}} @keyframes bubbleRiseSoft{0%{transform:translate(0,0) scale(.5);opacity:0}18%{opacity:.55}55%{transform:translate(-6px,-200px) scale(.95);opacity:.32}100%{transform:translate(-10px,-340px) scale(1);opacity:0}} @keyframes shunUp{0%{opacity:0;transform:translateY(28px)}60%{opacity:1}100%{opacity:1;transform:translateY(0)}} @keyframes shunUpHint{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @keyframes ldDrain{from{transform:translateY(0)}to{transform:translateY(112%)}} @keyframes ldWave{0%{transform:translateX(0)}50%{transform:translateX(-10%)}100%{transform:translateX(0)}} @keyframes ldRing{0%{transform:scale(.65);opacity:.7}100%{transform:scale(1.7);opacity:0}} @keyframes ldSpin{to{transform:rotate(360deg)}} @keyframes ldFill{from{width:6%}to{width:100%}} .sz-loader-out{animation:ldDrain 1.1s cubic-bezier(.7,0,.3,1) forwards;} .sz-arrow{display:inline-flex;align-items:center;justify-content:center;transition:transform .32s cubic-bezier(.16,1,.3,1);} .sz-arrowbtn:hover .sz-arrow{transform:translateX(6px);} .sz-guidecard:hover .sz-arrow{transform:translateX(5px);} .szu{position:relative;} .szu::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--navy);transform:scaleX(0);transform-origin:right center;transition:transform .36s cubic-bezier(.16,1,.3,1);} .szu:hover::after{transform:scaleX(1);transform-origin:left center;} .szu-on::after{transform:scaleX(1);transform-origin:left center;background:var(--navy);} .szud::after{background:#fff;} @keyframes ddIn{from{opacity:0;transform:translateY(-12px) scaleY(.85)}to{opacity:1;transform:translateY(0) scaleY(1)}} .sz-caret{display:inline-block;transition:transform .3s ease;} .sz-navitem:hover .sz-caret{transform:translateY(2px);} .sz-outline{color:var(--blue);background:transparent;} .sz-outline:hover{background:var(--blue);color:#fff;} .sz-outline-light{color:#fff;background:transparent;} .sz-outline-light:hover{background:#0e4f8f;color:#fff;} .sz-srow{transition:background .3s ease;} .sz-srow:hover{background:rgba(255,255,255,.06);} .sz-srow:hover .sz-snum{color:var(--accent);} .sz-srow .sz-snum{transition:color .3s ease;} .sz-srow:hover .sz-sarrow{transform:translateX(7px);background:var(--accent);border-color:var(--accent);} .sz-sarrow{transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s;} /* ===== CueZilla 化のための追加CSS（site.js と対） ===== */ html{scroll-behavior:smooth} img{max-width:100%} [data-href]{cursor:pointer} .szr-desk{display:contents} .szr-mob{display:none} @media(max-width:979px){ .szr-desk{display:none} .szr-mob{display:contents} header{padding-right:clamp(14px,2.4vw,38px) !important;} } @media(max-width:640px){ .sz-work-grid{grid-template-columns:1fr !important;} } /* 右レール(お問い合わせ/お電話/ページトップ): CueZilla既定スタイルに勝ってアイコン・縦書きテキストを幅の中央に固定 */ .sz-railbtn{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;text-align:center !important;} .sz-railbtn > span{margin:0 auto !important;} /* desktop dropdown（hover で表示） */ .sz-ddwrap{display:none} .sz-navitem:hover .sz-ddwrap{display:block} /* mobile drawer（site.js が .open を付与） */ .sz-drawerwrap{display:none} .sz-drawerwrap.open{display:block} /* header はデフォルト solid。home(/) のみ site.js が最上部で透過にする */ header.sz-home-top{background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;box-shadow:none !important;} header.sz-home-top a,header.sz-home-top .szu,header.sz-home-top span{color:#fff !important;} header.sz-home-top img{filter:brightness(0) invert(1) !important;} /* トップページのドロップダウン: 白背景を透明にして白文字を視認可能にする */ header.sz-home-top .sz-ddwrap > div{background:transparent !important;box-shadow:none !important;border:none !important;} /* スクロール後（背景色あり）: ドロップダウンに白背景を明示 */ header:not(.sz-home-top) .sz-ddwrap > div{background:#fff !important;box-shadow:0 14px 34px rgba(11,58,104,.2) !important;border:1px solid var(--line) !important;} /* current nav 強調 */ .szu.sz-active{font-weight:700 !important;color:var(--navy) !important;} .szu.sz-active::after{transform:scaleX(1) !important;transform-origin:left center;background:var(--navy);} /* CueZilla デフォルトパンくず非表示（ページHTML内にカスタムパンくず埋め込み済みのため） */ .parts231_breadcrumb{display:none !important;} /* 右レール（clamp(58px,4.4vw,76px)）との重なり防止：右端ウォーターマークの right 値を底上げ */ @media(min-width:980px){ section [aria-hidden="true"][style*="right:clamp(14px"]{right:clamp(80px,6.5vw,96px)!important;} } /* ===== ヒーロー入場アニメーション (data-fv) ===== */ /* ローダーが消えるまで opacity:0 を保持し、sz-page-ready 付与後にCSSアニメで入場する */ [data-fv-init]{opacity:0;} @keyframes szFvY{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes szFvYb{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes szFvX{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:none}} .sz-page-ready [data-fv-init="translateY(16px)"]{animation:szFvY .85s cubic-bezier(.16,1,.3,1) both;} .sz-page-ready [data-fv-init="translateY(18px)"]{animation:szFvYb .85s cubic-bezier(.16,1,.3,1) both;} .sz-page-ready [data-fv-init="translateX(-32px)"]{animation:szFvX .9s cubic-bezier(.16,1,.3,1) both;} /* ===== スクロールリベール (data-rv-init) — transition を CSS で保証 ===== */ /* CueZilla がインラインの transition を除去した場合でも動作するよう CSS 側で定義 */ [data-rv-init]{transition:opacity 1.1s ease,transform 1.2s cubic-bezier(.16,1,.3,1);} /* ブログ一覧(parts222) 背景・BLOGウォーターマーク・h2非表示 */ /* ※ ::before content はAddCssInfoで除去されるためSVGをbackground-imageで代替。 SVG内ではGoogleFontsが読めないためImpact（OSデフォルトの幅狭ディスプレイ体）を使用し viewBoxをArialフォールバック幅でも収まる十分な広さに設定する */ .parts222_section{ position:relative; overflow:hidden; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 660 220'%3E%3Ctext x='648' y='195' font-family='Impact%2CArial Narrow%2Csans-serif' font-weight='700' font-size='200' text-anchor='end' fill='rgba(21%2C119%2C190%2C.05)'%3EBLOG%3C/text%3E%3C/svg%3E") right clamp(80px,6.5vw,96px) top 0 / 42% auto no-repeat, linear-gradient(180deg,var(--tint) 0%,var(--soft) 100%) !important; } .parts222_section > h2{display:none !important;} /* 施工事例一覧(parts228) 背景・WORKSウォーターマーク・h2非表示 */ .parts228_section{ position:relative; overflow:hidden; padding:clamp(46px,6vw,88px) clamp(20px,5vw,40px) clamp(56px,7vw,96px) !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 820 220'%3E%3Ctext x='808' y='195' font-family='Impact%2CArial Narrow%2Csans-serif' font-weight='700' font-size='200' text-anchor='end' fill='rgba(21%2C119%2C190%2C.05)'%3EWORKS%3C/text%3E%3C/svg%3E") right clamp(80px,6.5vw,96px) top 0 / 42% auto no-repeat, linear-gradient(180deg,var(--tint) 0%,var(--soft) 100%) !important; } .parts228_section > h2{display:none !important;} /* ===== サブページヒーローテキスト：左スライドイン ===== */ /* fadeUp(.8s) はヒーローwrapper専用。FAQアコーディオン等の fadeUp(.4s) には干渉しない */ @keyframes szHeroIn{from{opacity:0;transform:translateX(-52px)}to{opacity:1;transform:none}} [style*="animation:fadeUp .8s ease both"]{animation:szHeroIn .85s cubic-bezier(.16,1,.3,1) both !important;} /* CTA上端ウェーブ: fill を #e8f1fa (=var(--tint)) に統一 */ [data-sec-label="相談"] > [aria-hidden="true"]:first-child svg, [data-sec-label="相談"] > [aria-hidden="true"]:first-child path{fill:#e8f1fa;}