/* ===================================================================== アシスポ 動き 共通CSS（2026-11-12 追加） 全ページの style.css の後に読み込む。対になるスクリプトは js/anim.js ・文字はタイプライター式（上から順番に1文字ずつ） ・スクロールに合わせて流れる背景グラデ＋上部の進捗バー ・実績数字のカウントアップ／カーソル／見出しの線／アイコンの線描き／下部ボタンの光（画像は動かさない） ・トップページの写真スライド（camera.js から置き換え） iPhone 実機で 60fps を確認済みの作り。重くなる書き方をしないこと（下の注意を参照） ===================================================================== */ /* body をスクロール箱にしない。 style.css の html,body{height:100%} に overflow-x:hidden を足すと、ページが body の中でスクロールする作りになり iPhone でスクロールがカクつく。横はみ出しは html=hidden（画面全体へ伝わる）、body=clip（スクロール箱を作らない）で止める */ html{overflow-x:hidden} body{height:auto;min-height:100%;overflow-x:clip;max-width:100%} #content,#header,#footer,.container,.box-2,.box-1,.cta-section,.stats-section,.hero-slider{max-width:100%} /* 画像は動かさず、常に元の大きさのまま表示する（2026-11-12：マスク・リビールとパララックスは 「スクロールで画像が隠される」「写真が切れて短く見える」ため廃止） */ /* トップページの事業画像：スマホ（画面いっぱいの表示）では上下の余白 30px を無くす。 元は背景が白で余白が画像の白地と一体に見えていたが、背景グラデを入れたことで「隙間」に見えるため */ @media only screen and (max-width:767px){ .img-fullwidth-sp{padding-top:0!important;padding-bottom:0!important} } /* 文字はタイプライター式：色の「透明⇔通常」の切り替えだけで出す。 【注意】文字1つ1つに transform / opacity / transition を付けないこと。 画面に固定した背景の上に transform 付きの要素が数百個あると、iPhone が1文字ずつ別レイヤーにして激しく重くなる（実機で確認済み） */ .rvchar .ch{color:transparent} /* タイプライターのカーソル（▍）。打っている間は点灯、止まると点滅。幅0なので文字の折り返しは変わらない */ .tw-caret{display:inline;border-left:2px solid currentColor;margin-right:-2px;animation:twblink 1s steps(1) infinite} .tw-caret.typing{animation:none} @keyframes twblink{50%{opacity:0}} /* 見出しの左の緑の線：見出しを打ち始めると上から下へ伸びる。js が線の太さと色を --bw / --bc に入れる */ .tw-bar{border-left-color:transparent!important;position:relative} .tw-bar::before{content:"";position:absolute;top:0;bottom:0;left:calc(-1 * var(--bw));width:var(--bw);background:var(--bc); transform:scaleY(0);transform-origin:top;transition:transform .45s cubic-bezier(.2,.8,.2,1)} .tw-bar.bar-on::before{transform:scaleY(1)} /* サービスのアイコン：線で描かれてから塗られる（Font Awesome が SVG で表示している時だけ）。 印は外側のリンク（.related-service-link）に付ける。SVG 自身の class を変えると Font Awesome が作り直してしまうため */ .tw-icon svg path{fill:transparent;stroke:currentColor;stroke-width:var(--sw,20);stroke-linejoin:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)} .tw-icon.draw svg path{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s ease-in-out} .tw-icon.filled svg path{fill:currentColor;stroke:none} /* 下の「電話で相談・お問合せ」ボタン：数秒に1回、光が横に走る */ @media only screen and (max-width:767px){ .mobile-action-bar .action-item{position:relative;overflow:hidden} .mobile-action-bar .action-item::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none; background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0)); transform:translateX(0) skewX(-18deg);animation:ctashine 5s ease-in-out infinite} .mobile-action-bar .action-mail::after{animation-delay:.3s} } @keyframes ctashine{0%,72%{transform:translateX(0) skewX(-18deg)}92%,100%{transform:translateX(520%) skewX(-18deg)}} /* 実績数字のカウントアップの着地 */ .stats-section .stat-number{display:inline-block} .stat-number.pop{animation:statpop .55s cubic-bezier(.3,1.2,.4,1)} @keyframes statpop{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}} /* 背景：光だまり3つ＋下地を「不透明な1枚」に描き、その1枚だけをスクロールに合わせて上へ流す */ body{background:linear-gradient(160deg,#f7faf1,#eef3e1)} /* 背景：大きな英語の文字の輪郭（2026-11-13 案3）。文字は js がページごとに入れる（トップ=ASISUPO など）。 不透明な1枚の中に横に何行か並べ（行の数・間隔・高さは js が決める）、その1枚をスクロールに合わせて上へ流す（動かし方は以前の光だまりと同じ） */ #bgfx2{position:fixed;left:0;right:0;top:0;height:160vh;z-index:-1;pointer-events:none;will-change:transform;overflow:hidden; background:linear-gradient(170deg,#f6f9f0,#e8f0d6)} #bgfx2 .bgw{position:absolute;white-space:nowrap;font-family:Ubuntu,Arial,sans-serif;font-weight:700;line-height:1;letter-spacing:.02em; font-size:clamp(70px,19vw,240px);color:transparent;-webkit-text-stroke:1.5px rgba(106,138,45,.14); left:0;right:0;text-align:center} /* 横向き・画面の幅いっぱいに収まる大きさで真ん中に（2026-11-13 ユーザー指定） */ /* 上部のスクロール進捗バー */ #scrollbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;background:linear-gradient(90deg,#89AA45,#6a8a2d)} /* ---- トップページの写真スライド（index.html の #heroSlider） ---- 写真は5秒ごとにクロスフェード。コピーは右上に、切り替わるたびに下から出る */ .hero-slider{position:relative;width:100%;height:clamp(340px,50vw,600px);overflow:hidden;background:#20250f} .hero-slider .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.3s ease} .hero-slider .slide.active{opacity:1;z-index:1} .hero-slider .bg{position:absolute;inset:0;background-size:cover;background-position:center} .hero-cap{position:absolute;top:18px;right:18px;z-index:3;max-width:72%;text-align:right} .hero-cap-bg{background:rgba(0,0,0,.22);padding:12px 18px;border-radius:8px;display:inline-block} .hero-cap .slider_txt1{display:block;color:#fff;font:700 clamp(13px,1.8vw,22px)/1.4 'Ubuntu',"メイリオ",sans-serif;text-shadow:1px 1px 3px rgba(0,0,0,.8)} .hero-cap .slider_txt2{display:block;color:#fff;font:700 clamp(17px,2.6vw,34px)/1.3 'Ubuntu',"メイリオ",sans-serif;text-shadow:1px 1px 4px rgba(0,0,0,.8);margin-top:4px} /* コピーもタイプライター：js が1文字ずつ .on を付ける。打つ前の文字は透明（影も消す） */ .hero-cap .ch{color:transparent;text-shadow:none} .hero-cap .ch.on{color:inherit;text-shadow:inherit}.hero-dots{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;gap:8px;justify-content:center} .hero-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:.3s} .hero-dots i.on{background:#89AA45;width:26px;border-radius:5px} /* コピーは折り返さず1行で（最後の1〜2文字だけ次の行に落ちる「字余り」を防ぐ） */ .hero-cap .slider_txt1,.hero-cap .slider_txt2{white-space:nowrap} @media (max-width:767px){ /* スマホは画面幅に合わせて文字を縮め、どの機種でも1行に収める */ .hero-cap{top:12px;right:12px;max-width:calc(100% - 24px)} .hero-cap .slider_txt1{font-size:min(12.5px,3.1vw)} .hero-cap .slider_txt2{font-size:min(18px,4.2vw)} .hero-cap-bg{padding:8px 12px} } /* ---- 大事な言葉の緑マーカー（2026-11-12 追加） ---- 段落を打ち終わると、HTML の data-mk に書いた言葉に左から1文字ずつ蛍光ペンが引かれる（js が .mk を付ける）。 文字の下側4割だけを薄い緑で塗る。動きは js が1文字ずつ付けるだけ（transition は使わない） */ /* 色はオレンジ（2026-11-12 ユーザー指定・打ち替え見出しと同じ）。文字の色は js が style で入れるので !important で上書き （言葉が消され始めると js がすぐ .mk を外すので、消える文字がオレンジのまま残ることはない） */ /* 見やすさ調整（2026-11-13 ユーザー「背景と馴染んで見にくい」）：色を濃いめのオレンジ #D96200 に（背景との差 2.5→3.3）、 太字は文字の幅が変わって行の折り返しがずれるので、影を横に少しずらして重ねる「太く見せる」方法にする（並びは動かない）。マーカーも濃く */ .rvchar .ch.mk{color:#D96200!important;text-shadow:.035em 0 0 #D96200;background:linear-gradient(transparent 55%,rgba(255,140,0,.34) 55%)} /* ---- トップページの打ち替え見出し（.tw-rot）---- 「〇〇の「困った」は、アシスポへ。」の〇〇を js が打ち替える。1行に収まるよう、文字の大きさは画面幅に合わせる */ .tw-rot{text-align:center;white-space:nowrap;font-weight:700;color:#303334;line-height:1.5; font-size:clamp(14px,4.4vw,30px);padding:36px 8px 4px;max-width:100%;overflow:hidden} /* 〇〇の言葉はオレンジ（2026-11-12 ユーザー指定）。お問合せボタンの #FF8C00 は白っぽい背景の文字だと薄いので、少し濃い #D96200（2026-11-13 さらに濃く） */ .tw-rot-word{color:#D96200;background:linear-gradient(transparent 60%,rgba(255,140,0,.34) 60%);padding:0 .12em;margin-right:.33em} /* ===== TYPESCALE スマホの文字サイズ（2026-11-13）===== 本文16px・小さめの段落14〜15px・小見出し18px。HTML内に直接書いた大きさ（style="font-size:…"）も上書きする */ @media only screen and (max-width:767px){ .content_pages p{font-size:16px} .content_pages p[style*="font-size:15px"],.content_pages p[style*="font-size: 15px"]{font-size:16px!important} .content_pages p[style*="font-size:14px"],.content_pages p[style*="font-size: 14px"],.content_pages p[style*="font-size:13px"],.content_pages p[style*="font-size: 13px"]{font-size:15px!important} .content_pages p[style*="font-size:12px"],.content_pages p[style*="font-size: 12px"]{font-size:14px!important} h3{font-size:18px} .content_pages h3[style*="font-size:16px"],.content_pages h3[style*="font-size: 16px"],.content_pages h3[style*="font-size:17px"],.content_pages h3[style*="font-size: 17px"]{font-size:18px!important} .related-service-title{font-size:17px} .related-service-desc{font-size:15px} .related-service-more{font-size:14px} .stats-section .stat-label{font-size:14px} .stats-section .stats-title{font-size:15px} .stats-section .stats-note{font-size:12px} table.demo01 td,table.demo01 th{font-size:15px} .content_pages .media-link{font-size:15px!important} .content_pages .media-tag{font-size:12px!important} .txt_priv{font-size:13px} body .content_pages .ct-note,body .content_pages .ct-side-list li{font-size:14px} body .content_pages .ct-lead,body .ct-label{font-size:15px} body .ct-chips span,body .ct-seg span{font-size:14px} } /* ===== /TYPESCALE ===== */ /* ===== BARHIDE 固定バーの隠れ方（2026-11-13）。js が .bar-hide を付け外し ===== */ @media only screen and (max-width:767px){.mobile-action-bar{transition:transform .28s cubic-bezier(.2,.7,.2,1)}.mobile-action-bar.bar-hide{transform:translateY(calc(100% + 14px))}} /* ===== REVEAL 写真のマスク・リビール（2026-11-13）：js が .mrv（隠す）→ .mrv-on（現れる）を付け外し。画面外に出たら隠し直すので何度でも現れる ===== */ #content img.mrv{clip-path:inset(0 100% 0 0 round 8px);transform:scale(1.06);transition:clip-path .8s cubic-bezier(.77,0,.18,1),transform 1.2s cubic-bezier(.2,.7,.2,1)} #content img.mrv.mrv-on{clip-path:inset(0 0 0 0 round 8px);transform:none} #content img.xp{will-change:clip-path} /* ===== IMGGAP 建設ページ上部の写真3枚がくっ付いていたので16px空ける（2026-11-13）。他ページの写真の間と同じ16px ===== */ .content_pages .img_holder img+img{margin-top:16px} @media only screen and (max-width:767px){.content_pages .img_holder{margin-bottom:16px}} /* ===== ABOUT トップ「株式会社アシスポとは」の小見出し・箇条書き（2026-11-13） ===== */ .abt{margin-top:22px} .abt p{line-height:2;margin:0 0 12px} .abt-h{position:relative;margin:30px 0 10px;padding-left:14px;font-size:19px;font-weight:700;color:#4d6b1f;line-height:1.5} .abt-h:first-child{margin-top:0} .abt-h:before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:4px;border-radius:2px;background:#89AA45} .abt-list{margin:0 0 12px;padding:0;list-style:none} .abt-list li{position:relative;padding:4px 0 4px 22px;line-height:1.7} .abt-list li:before{content:"";position:absolute;left:4px;top:.85em;width:8px;height:8px;border-radius:50%;background:#89AA45} .abt-worry li{font-weight:700;color:#333} .abt-strong{font-weight:700;color:#D96200} @media only screen and (max-width:767px){.abt-h{font-size:18px!important}.abt-list li{font-size:16px}} /* ===== CPCARD 会社案内の会社概要（2026-11-13 表 → 案B：数字を大きく＋カード）。スマホは1列、768px以上は2列 ===== */ .cp{display:grid;gap:14px;color:#2b2f26} .cp-box{background:#fff;border-radius:18px;padding:20px;box-shadow:0 1px 2px rgba(60,80,20,.06),0 8px 24px rgba(60,80,20,.07)} .cp h4{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.12em;color:#89AA45} .cp-name small{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;color:#89AA45} .cp-name strong{display:block;font-size:24px;font-weight:900;margin-top:4px;line-height:1.4} .cp-name em{display:block;font-style:normal;font-size:12px;letter-spacing:.2em;color:#6b7262} .cp-name p{margin:10px 0 0!important;font-size:15px!important;line-height:1.7} .cp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .cp-stat{background:#fff;border-radius:16px;padding:16px 6px;text-align:center;box-shadow:0 1px 2px rgba(60,80,20,.06),0 8px 24px rgba(60,80,20,.07)} .cp-stat .n{font-size:24px;font-weight:900;color:#4d6b1f;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap} .cp-stat .n small{font-size:13px;font-weight:700;margin-left:1px;vertical-align:baseline;position:static;top:auto;line-height:1} /* サイト全体の small 上付きを打ち消す */ .cp-stat .l{font-size:12px;color:#6b7262;margin-top:6px;font-weight:700;letter-spacing:.06em} .cp-addr{font-size:16px!important;line-height:1.8!important;margin:0 0 12px!important} .cp-btn{display:inline-block;border:1px solid #cfe0aa;border-radius:999px;padding:9px 16px;font-size:14px;font-weight:700;color:#4d6b1f!important;text-decoration:none!important;line-height:1} .cp-telbox{margin-top:16px;padding-top:14px;border-top:1px solid #e8eedd} .cp-tel{font-size:24px;font-weight:900;letter-spacing:.03em;color:#2b2f26!important;text-decoration:none!important;font-variant-numeric:tabular-nums} .cp-fax{font-size:13px;color:#6b7262;margin-top:2px} .cp-lic ul{margin:0;padding:0;list-style:none;display:grid;gap:12px} .cp-lic li{display:grid;gap:2px;list-style:none} .cp-lic b{font-size:15px} .cp-lic span{font-size:13px;color:#6b7262;font-variant-numeric:tabular-nums} .cp-svc{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;list-style:none} .cp-svc li{background:#f1f6e6;border-radius:12px;padding:12px;font-size:14px;font-weight:700;line-height:1.5;color:#3f5a17;list-style:none} @media (min-width:768px){ .cp{grid-template-columns:1fr 1fr;gap:18px} .cp-name{grid-column:1}.cp-stats{grid-column:2;align-self:stretch}.cp-stat{display:flex;flex-direction:column;justify-content:center} .cp-stat .n{font-size:30px} .cp-svcbox{grid-column:1 / -1}.cp-svc{grid-template-columns:repeat(3,1fr)} } @media (max-width:340px){.cp-stat .n{font-size:19px}.cp-svc{grid-template-columns:1fr}} /* ===== ICONDRAW アイコンを線で描いてから塗る（2026-11-13）。線の長さと data-icd は js/anim.js が入れる ===== */ svg.svg-inline--fa path[data-icd]{stroke:currentColor;stroke-linejoin:round;stroke-linecap:round;fill-opacity:0;stroke-opacity:1} svg.svg-inline--fa path[data-icd="1"]{stroke-dashoffset:0!important;fill-opacity:1;stroke-opacity:0; transition:stroke-dashoffset 1.6s cubic-bezier(.45,.05,.3,1),fill-opacity .7s ease 1.5s,stroke-opacity .5s ease 2.1s} /* 輪郭を描き切ってから塗る */ /* ===== TWMORE タイプライターを広げた分（2026-11-13）===== .wp-hl（見出しの緑の言葉）は背景を文字の形に切り抜く作りで、1文字ずつ隠せないので、普通の緑の文字にする */ .wp-hl{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:#6a8a2d!important} /* ===== SPGAP スマホの無駄な余白を詰める（2026-11-13 ユーザー指示「無意味な余白が多い」）===== headless Edge 390px で計測：区切りの境目が毎回 約110px（上56+下56）の空き、フッター周りも100px前後の空きがあった。 各ページの head の