/* =========================================================== このサイトのアイコンの一部は Feather Icons の形を使っています。 Feather Icons Copyright (c) 2013-2023 Cole Bemis Released under the MIT License. https://github.com/feathericons/feather/blob/master/LICENSE MITは著作権表示を残すことを条件に商用利用を認めています。 この表記とフッターの1行を消さないでください。 =========================================================== */ /* =========================================================== クリーン工業 トップページ モックアップ 方針: - 写真を使わない。色面・タイポグラフィ・罫線で組む - 電話番号そのものを造形として使う（唯一の要望が問い合わせのしやすさ） - 文章は 2026-07 版から完全踏襲。新規の文章を足さない - 導線は電話・LINE・お問い合わせフォームの3種を常時出す - ヘッダー固定 + 下部バー固定（既存の2段構えを踏襲） 湯浅建設から引くのは写真以外の要素のみ: 巨大な英語見出し、縦書きの白帯ラベル、黄色い丸矢印、カード3枚の問い合わせ =========================================================== */ :root{ --navy:#073b68; /* 既存の濃紺 */ --navy-deep:#052b4c; --blue:#0878bd; /* 既存の主色 */ --blue-light:#1a8fd8; --ink:#16293a; --ink-soft:#5a7383; --bg:#f5f8fa; --paper:#fff; --accent:#ffc62e; /* 丸矢印と番号の下線。濃紺に対して最も目立つ */ --line:#06c755; --rule:rgba(7,59,104,.15); --pad-x:clamp(20px,5.6vw,48px); --sec-y:clamp(68px,13vw,120px); --wrap:1320px; --f:"Zen Kaku Gothic New","Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN",sans-serif; --f-en:"Helvetica Neue",Arial,sans-serif; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} /* ---------- フェードイン ---------- 1. ページ読み込み時に全体をふわっと出す 2. 各要素はスクロールで画面に入ったときに現れる JS が動かない環境では最初から見えるよう、opacity は JS で下げる */ body.js-fade{opacity:0} body.js-fade.is-loaded{opacity:1;transition:opacity .7s ease} .reveal{ opacity:0;transform:translateY(22px); transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1); } .reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none !important;transition:none !important} body.js-fade{opacity:1} .reveal{opacity:1;transform:none} .split-char{opacity:1;transform:none} } body{ margin:0; font-family:var(--f); color:var(--ink); background:var(--bg); line-height:2.05; font-size:14px; padding-bottom:54px; -webkit-font-smoothing:antialiased; overflow-x:hidden; } @media (min-width:1024px){ body{padding-bottom:0;font-size:15px} } a{color:inherit} :focus-visible{outline:3px solid var(--accent);outline-offset:2px} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)} .sec{position:relative;padding-block:var(--sec-y);overflow:hidden} .sec-paper{background:var(--paper)} [id]{scroll-margin-top:68px} @media (min-width:1024px){ [id]{scroll-margin-top:82px} } /* お問い合わせだけ止まる位置を下げる。68px のままだと、濃紺の上の余白が そのまま画面の頭に出て中途半端な帯になる。14px にすると固定ヘッダー（65px）が 余白の大半を覆い、見出しが画面の頭の少し下に来る */ #contact{scroll-margin-top:14px} /* ---------- セクション見出し ---------- */ .sec-head{ display:flex;align-items:flex-start;justify-content:space-between; gap:16px;margin-bottom:clamp(28px,5.8vw,48px); } .sec-en{ flex:0 1 auto;min-width:0; font-family:var(--f-en); font-size:clamp(46px,14vw,128px); font-weight:700;line-height:.92; letter-spacing:-.015em; color:rgba(7,59,104,.1); white-space:nowrap;margin-left:-.05em; pointer-events:none;user-select:none; } /* 既存の見出しは長いので折り返さず1列に流す */ .sec-ja{ flex:none; writing-mode:vertical-rl;white-space:nowrap; background:var(--navy);color:#fff; padding:18px 12px; font-size:clamp(12.5px,3.2vw,14px); font-weight:700;letter-spacing:.1em;line-height:1; } .sec-paper .sec-en{color:rgba(7,59,104,.08)} .lead{ margin:0 0 clamp(22px,5vw,32px); font-size:clamp(17px,4.8vw,28px); font-weight:700;line-height:1.85;letter-spacing:.01em; color:var(--navy); } .body-text{margin:0;font-size:clamp(13.5px,3.6vw,15px);line-height:2.15;color:var(--ink-soft)} .body-text + .body-text{margin-top:1.4em} .h3{margin:0;font-size:clamp(15.5px,4.2vw,18px);font-weight:700;line-height:1.6;color:var(--navy)} /* ---------- 導入（ABOUT）---------- 文字サイズと見出しの出方は楽遊山荘を踏襲。フォントと色は本サイトのまま。 参考: 見出し18→21.8px/行間1.75、本文14→17.8px/行間2.0 */ /* 中央1カラム。英語の大見出しと紺のラベル帯は置かない。 ラベルは小さな文字と黄色の短い罫線にして、見出しと役割が重ならないようにする */ /* 見出しは幅の制限を受けない。読み幅を絞るのは本文だけにする （34em を塊ごとに掛けると、見出しを大きくしたとき先に折り返してしまう） */ #about .about-in{text-align:center} .about-cap{ display:block;margin:0 0 clamp(18px,4vw,26px); font-size:clamp(14px,3.8vw,20px);font-weight:700; letter-spacing:.12em;line-height:1.7;color:var(--blue); } .about-cap::after{ content:"";display:block;width:32px;height:2px; background:var(--accent);margin:12px auto 0; } /* 下限を固定値で持つと、狭い画面で1行目（13文字）が入り切らず「を」だけ落ちる。 下限も画面幅に追従させる */ #about .lead{font-size:clamp(20px,6.2vw,52px);line-height:1.75} #about .body-text{ font-size:clamp(15px,4.6vw,24px);line-height:2; max-width:26em;margin-inline:auto; } /* 1文字ずつ出す。行内はランダム順、行ごとに遅れる。遅延は JS が振る */ .split-line{display:block} .split-char{ display:inline-block;white-space:pre; opacity:0;transform:translateY(5px); transition:opacity .6s ease,transform .6s ease; } .is-in .split-char{opacity:1;transform:none} /* ---------- 黄色い丸矢印 ---------- */ .arw{ width:30px;height:30px;flex:none;border-radius:50%; background:var(--accent);color:var(--navy); display:grid;place-items:center; } .arw svg{width:14px;height:14px} /* ---------- ヘッダー（固定） ---------- */ .hd{ position:sticky;top:0;z-index:9998; background:rgba(245,248,250,.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--rule); } .hd-in{display:flex;align-items:center;gap:12px;min-height:64px} /* PCはロゴが大きくなるぶん背を高くし、7項目のナビが入るよう横幅も広げる */ @media (min-width:1024px){ .hd-in{min-height:78px;max-width:1680px;padding-inline:clamp(16px,2vw,32px);gap:10px} } .hd-logo{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto} /* 既存サイトのロゴ。形とグラデーションは原本のまま、色だけサイトに寄せてある。 ロゴ自体が輪の形なので、背景に丸は敷かない */ .hd-mark{width:56px;height:56px;flex:none;object-fit:contain} @media (min-width:1024px){ .hd-mark{width:64px;height:64px} } /* ナビが8項目あるので、社名が折り返すとヘッダーが2段3段になる */ .hd-name{display:block;white-space:nowrap;font-weight:700;font-size:clamp(16px,4.2vw,19px);line-height:1.35;letter-spacing:.01em} .hd-sub{display:block;white-space:nowrap;font-size:11px;font-weight:500;color:var(--ink-soft);line-height:1.5} /* PCはロゴと社名を一段大きくする（13pxでは小さすぎた） */ @media (min-width:1024px){ .hd-name{font-size:22px} .hd-sub{font-size:12.5px} } /* 320px台は、ロゴ265px＋ハンバーガー44pxが使える幅280pxに入らず、 ボタンが21px画面から溢れていた。余白とロゴを詰め、サブは折り返す。 社名は nowrap のまま（折れると2段3段になる） */ @media (max-width:359px){ .hd-in{padding-inline:14px} .hd-mark{width:42px;height:42px} .hd-sub{font-size:10px} } /* ナビは5項目。対応エリアと会社案内は外した（2026-10-12）。 15.5pxで並べても1360pxに収まる（必要幅は実測で約1290px）。 外した2つはモバイルメニューとフッターから辿れる */ .hd-nav{display:none} @media (min-width:1360px){ .hd-nav{display:flex;gap:14px;margin-right:12px} .hd-nav a{ white-space:nowrap;text-decoration:none; font-size:15px;font-weight:700;padding:4px 0; border-bottom:2px solid transparent; } .hd-nav a:hover{border-bottom-color:var(--accent)} } .hd-tel,.hd-line,.hd-contact{display:none} @media (min-width:1024px){ /* 番号とアイコンだけ。説明テキストは置かない */ .hd-tel{ display:flex;align-items:center;gap:10px;white-space:nowrap; text-decoration:none;background:var(--blue);color:#fff; /* line-height を 1 にしないと body の 2.05 を継いでヘッダーと同じ高さになる */ padding:10px 20px;border-radius:40px;line-height:1; font-family:var(--f-en);font-weight:700;font-size:19px;letter-spacing:.01em; } .hd-tel:hover{background:var(--navy)} .hd-tel svg{width:18px;height:18px} /* 電話の左に置く。右端は要望の中心である電話番号に残す */ .hd-line{ display:flex;align-items:center;gap:8px;white-space:nowrap; text-decoration:none;background:var(--line);color:#fff; padding:11px 14px;border-radius:40px;line-height:1; font-weight:700;font-size:15px; } .hd-line:hover{background:#05a648} .hd-line svg{width:18px;height:18px} /* 電話の左、LINEの右。色は下部固定バーのお問い合わせと同じ黄色に揃える */ .hd-contact{ display:flex;align-items:center;gap:8px;white-space:nowrap; text-decoration:none;background:var(--accent);color:var(--navy); padding:11px 14px;border-radius:40px;line-height:1; font-weight:700;font-size:15px; } .hd-contact:hover{background:#ffd05e} .hd-contact svg{width:18px;height:18px} } .burger{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; width:44px;height:44px;flex:none;background:none;border:0;cursor:pointer;padding:0; } @media (min-width:1360px){ .burger{display:none} } .burger i{display:block;width:24px;height:2px;background:var(--navy);transition:transform .22s,opacity .22s} .burger[aria-expanded="true"] i:nth-of-type(1){transform:translateY(8px) rotate(45deg)} .burger[aria-expanded="true"] i:nth-of-type(2){opacity:0} .burger[aria-expanded="true"] i:nth-of-type(3){transform:translateY(-8px) rotate(-45deg)} /* ヘッダーの直下に浮かせる。以降のセクションを押し下げず、ヒーローの上にかぶせる。 display の none/block は動かせないので、grid の行を 0fr→1fr にして高さを出す （高さを決め打ちしなくて済む）。閉じている間は visibility でフォーカスも切る */ .mnav{ position:absolute;top:100%;left:0;right:0; display:grid;grid-template-rows:0fr; visibility:hidden; background:var(--paper);border-top:1px solid var(--rule); box-shadow:0 10px 24px rgba(7,59,104,.14); transition:grid-template-rows .28s ease,visibility .28s; } .mnav.is-open{grid-template-rows:1fr;visibility:visible} @media (min-width:1360px){ .mnav{display:none !important} } /* 画面が低いとき（横向きなど）に項目がはみ出さないようにする */ .mnav ul{list-style:none;margin:0;padding-inline:var(--pad-x);overflow:hidden auto;max-height:calc(100dvh - 80px)} /* 上下の余白は li 側に置く。ul に持たせると overflow で切られず、 閉じた状態でも帯が残って開いた瞬間にガタつく */ .mnav li:first-child{padding-top:6px} .mnav li:last-child{padding-bottom:16px} .mnav li+li{border-top:1px solid var(--rule)} .mnav a{display:block;padding:15px 2px;text-decoration:none;font-size:15px;font-weight:700} /* メニュー内の区切り。ここから下はトップとは別のページ */ .mnav-sep{padding:14px 2px 4px;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink-soft)} /* ---------- ヒーロー ---------- 写真がないぶん、電話番号そのものを造形として置く。 */ /* 既存サイトで使われているヒーロー画像をそのまま使う */ .hero{position:relative;color:#fff;overflow:hidden;background:var(--navy)} .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} /* 横長の画像を縦枠に収めると左右が大きく切れる。 スマホでは人物の顔が入る位置まで表示範囲を右へ寄せる */ @media (max-width:759px){ .hero-img{object-position:66% 32%} } /* 文字を読ませるため濃紺を重ねる。右下の作業員は残す */ .hero::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(100deg, rgba(5,43,76,.92) 0%, rgba(7,59,104,.84) 42%, rgba(7,59,104,.42) 72%, rgba(7,59,104,.3) 100%), linear-gradient(180deg, rgba(5,43,76,.3) 0%, rgba(5,43,76,0) 30%, rgba(5,43,76,.55) 100%); } .hero-in{position:relative;z-index:2;padding-block:clamp(52px,12vw,104px)} .hero-sub{ margin:0 0 18px;font-size:clamp(12px,3.2vw,14.5px); font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.82); } .hero h1{ margin:0 0 22px; font-size:clamp(34px,10.5vw,92px); font-weight:900;line-height:1.3;letter-spacing:.005em; } .hero-lead{ margin:0 0 clamp(34px,7vw,46px); font-size:clamp(13.5px,3.7vw,16.5px); line-height:2;color:rgba(255,255,255,.88); /* この1文（43字）が1行に収まる幅。狭い画面では自然に折り返す */ max-width:46em; } /* 電話番号の塊。画面の中心になる */ .telblock{ display:block;text-decoration:none;color:#fff; border-top:1px solid rgba(255,255,255,.3); border-bottom:1px solid rgba(255,255,255,.3); padding-block:clamp(18px,4.4vw,26px); margin-bottom:clamp(18px,4vw,24px); max-width:860px; } .telblock-label{ display:flex;align-items:center;gap:9px; font-size:clamp(11.5px,3vw,13px);font-weight:700;letter-spacing:.1em; color:rgba(255,255,255,.8);margin-bottom:6px; } .telblock-label svg{width:15px;height:15px} .telblock-num{ display:block; font-family:var(--f-en);font-weight:700; font-size:clamp(38px,11.5vw,96px); line-height:1.08;letter-spacing:-.01em; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:clamp(3px,.9vw,6px); text-underline-offset:clamp(6px,1.6vw,12px); } /* Arial の数字は等幅で、「1」は字形より字送りが約.13em広い。 下線は字送り幅で引かれるため、末尾の字送りだけ詰めて右のはみ出しを消す。 数字の位置は動かない */ .telblock-num-end{letter-spacing:-.13em} .telblock-note{ display:block;margin-top:clamp(12px,2.6vw,16px); font-size:clamp(11.5px,3vw,13px);color:rgba(255,255,255,.72); } /* 営業時間と定休日の区切り。全角スペースだと詰まって見えるので縦罫線で割る */ .telblock-note-sep{ margin-left:.85em;padding-left:.85em; border-left:1px solid rgba(255,255,255,.35); } /* ボタンは中身の幅に合わせる。列の幅いっぱいには広げない。 並んだボタンどうしは同じ幅に揃える（grid の auto 列が最大幅に合う） */ .acts{ display:inline-grid;grid-auto-flow:row;justify-items:stretch; gap:11px; } /* 横並びでも列幅を揃える。1fr が最も広い中身に合わせて均等割りする */ @media (min-width:760px){ .acts{grid-auto-flow:column;grid-auto-columns:1fr;justify-content:start} } .btn{ display:flex;align-items:center;justify-content:center;gap:11px; padding:14px 22px;border-radius:40px; text-decoration:none;font-weight:700;font-size:15px; border:1.5px solid transparent;transition:opacity .18s,background .18s; } .btn:hover{opacity:.9} .btn svg{width:18px;height:18px;flex:none} .btn-line{background:var(--line);color:#fff} /* お問い合わせは黄色。ヘッダー・下部固定バーと色をそろえ、押す先が同じだと分かるようにする */ .btn-form{background:var(--accent);color:var(--navy);border-color:transparent} .btn-blue{background:var(--blue);color:#fff} /* ---------- 信頼バッジ ---------- 参考: autoro.io「なぜ、現場で選ばれるのか」 大きな塗りのアイコン、中央揃え、列の間を縦の点線で区切る。 */ .badges{background:var(--paper);padding-block:clamp(48px,9vw,86px)} /* ここだけ画面いっぱいに使う。外側の余白を詰め、区切り線を端まで伸ばす */ .badges > .wrap{ max-width:1680px; padding-inline:clamp(14px,2vw,28px); } /* スマホから2列。広い画面で4列。 1列だとヒーローの直下で834px使っていたため、2列にして482pxに縮めた */ .badges-grid{display:grid;gap:0;grid-template-columns:repeat(2,1fr)} @media (min-width:1024px){ .badges-grid{grid-template-columns:repeat(4,1fr)} } .badge{ text-align:center; padding:clamp(26px,5vw,34px) clamp(10px,1.4vw,16px); } /* スマホは2列で左右が狭いので、横の余白を詰める */ @media (max-width:719px){ .badge{padding-inline:6px} } /* 区切りは点線。2列は十字、4列は縦線だけ */ .badge:nth-child(n+3){border-top:1px dashed rgba(7,59,104,.3)} .badge:nth-child(even){border-left:1px dashed rgba(7,59,104,.3)} @media (min-width:1024px){ .badge:nth-child(n+3){border-top:0} .badge + .badge{border-left:1px dashed rgba(7,59,104,.3)} } .badge-icon{ width:clamp(62px,15vw,100px);height:clamp(62px,15vw,100px); margin:0 auto clamp(16px,3.4vw,22px); display:block; } .badge b{ display:block; font-size:clamp(16px,4.4vw,22px);font-weight:700; color:var(--navy);line-height:1.5;letter-spacing:-.01em; margin-bottom:10px; } /* 2列にしたため、320px台では8文字の見出しが2行に折れる。1px落として1行に収める */ @media (max-width:359px){ .badge b{font-size:15px} } .badge span{ display:block;font-size:14.5px;line-height:1.95;color:var(--ink-soft); max-width:none;margin-inline:auto; } /* 2列で2行になるスマホだけ、一段落とす */ @media (max-width:719px){ .badge span{font-size:13px;line-height:1.8} } /* PCは他セクションの本文と同じ19px */ @media (min-width:900px){ .badge span{font-size:19px} } /* サービス内容から下は、信頼バッジと同じ横幅に揃える。 ヒーローと導入は従来どおり 1320px のまま */ #service > .wrap, #reason > .wrap, #flow > .wrap, #area > .wrap, #faq > .wrap, #company > .wrap, #contact > .wrap{ max-width:1680px; padding-inline:clamp(14px,2vw,28px); } /* ---------- サービス ---------- 写真枠を外し、アイコンと文字だけのカードを並べる。 セクションが白なので、カードは背景色で面を作る（枠線は使わない） */ .svc{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,2.6vw,20px)} @media (min-width:600px){ .svc{grid-template-columns:1fr 1fr} } @media (min-width:900px){ .svc{grid-template-columns:repeat(3,1fr)} } .svc-item{display:flex} /* スマホでは中身を中央に寄せる。導入・ご相談の流れが中央なので揃える。 PC（900px以上）は3列になり、カードが細長くなるので従来どおり左揃えに戻す */ .svc-link{ flex:1;display:flex;flex-direction:column;align-items:center;text-align:center; padding:clamp(22px,4vw,28px); background:var(--bg); } .svc-icon{ width:46px;height:46px;flex:none;border-radius:50%; display:grid;place-items:center; background:rgba(8,120,189,.1);color:var(--blue); margin-bottom:clamp(14px,2.6vw,18px); } .svc-icon svg{width:22px;height:22px} .svc-body{min-width:0} .svc-en{ display:block;font-family:var(--f-en);font-size:10.5px;font-weight:700; letter-spacing:.1em;color:var(--ink-soft);margin-bottom:3px; } .svc-text{margin:7px 0 0;font-size:13.5px;line-height:1.95;color:var(--ink-soft)} /* 詳しいページがあるカードだけリンクにする */ a.svc-link{text-decoration:none;color:inherit;transition:background .18s} a.svc-link:hover{background:#e9f1f7} .svc-more{ display:inline-flex;align-items:center;gap:8px;margin-top:14px; font-size:13px;font-weight:700;color:var(--blue); } .svc-more svg{width:16px;height:16px} /* PCは幅が広がったぶん、カードと中の文字を一段大きくする */ @media (min-width:900px){ .svc-link{align-items:flex-start;text-align:left;padding:48px} .svc-icon{width:70px;height:70px;margin-bottom:26px} .svc-icon svg{width:33px;height:33px} .svc-en{font-size:14px;margin-bottom:5px} #service .h3{font-size:27px} .svc-text{margin-top:10px;font-size:19px;line-height:2} .svc-more{margin-top:20px;font-size:16px} .svc-more svg{width:18px;height:18px} } .note{margin:clamp(24px,5vw,34px) 0 0;font-size:clamp(13px,3.4vw,16px);line-height:1.9;color:var(--ink-soft);text-align:center} @media (min-width:900px){ .note{text-align:left} } /* ---------- 選ばれる理由 ---------- */ .reasons{display:grid;gap:clamp(22px,4.6vw,34px)} @media (min-width:860px){ .reasons{grid-template-columns:repeat(3,1fr)} } .reason{padding-top:22px;border-top:3px solid var(--navy);position:relative;text-align:center} .reason-no{ display:block;font-family:var(--f-en);font-size:13px;font-weight:700; letter-spacing:.14em;color:var(--blue);margin-bottom:9px; } .reason p{margin:9px 0 0;font-size:13.5px;line-height:2;color:var(--ink-soft)} /* PCの文字サイズはサービス内容のカードに合わせる */ @media (min-width:900px){ .reason{text-align:left} .reason-no{font-size:26px;letter-spacing:.06em;line-height:1.2;margin-bottom:14px} #reason .h3{font-size:27px} .reason p{margin-top:12px;font-size:19px} } /* ---------- 流れ ---------- 参考: plus.okwave.jp/service/「導入までの流れ」 高さを揃えた箱を横に並べ、箱と箱の間をシェブロンでつなぐ。 角は直角（サイト全体に合わせる）。色とフォントは本サイトのもの。 */ .flow{display:flex;flex-direction:column;align-items:stretch} @media (min-width:900px){ .flow{flex-direction:row} } .flow-item{ flex:1;display:flex;flex-direction:column;align-items:center;text-align:center; background:var(--bg);padding:clamp(24px,4vw,32px) clamp(18px,2.4vw,24px); } .flow-no{ font-family:var(--f-en);font-size:17px;font-weight:700; letter-spacing:.14em;color:var(--blue);line-height:1; } #flow .h3{margin-top:10px} .flow-icon{ display:grid;place-items:center;color:var(--blue); margin:clamp(14px,2.4vw,20px) 0; } .flow-icon svg{width:clamp(48px,6vw,72px);height:clamp(48px,6vw,72px)} .flow-item p{margin:0;font-size:13px;line-height:1.95;color:var(--ink-soft)} /* 箱と箱の間の矢印。スマホは下向きにする */ .flow-arrow{ display:grid;place-items:center;color:var(--blue); padding:12px 0; } .flow-arrow svg{width:22px;height:22px;transform:rotate(90deg)} @media (min-width:900px){ .flow-arrow{padding:0 clamp(8px,1.2vw,16px)} .flow-arrow svg{transform:none} } /* PCの文字サイズはサービス内容・選ばれる理由に合わせる */ @media (min-width:900px){ .flow-no{font-size:22px} #flow .h3{font-size:27px;margin-top:12px} .flow-item p{font-size:19px;line-height:2} .flow-arrow svg{width:28px;height:28px} } /* ---------- 対応エリア ---------- 右の白いボックスはやめ、本文を見出しの下に続けて置く */ .area > .lead{font-size:clamp(24px,5.4vw,44px);line-height:1.6} /* 1行が長くなりすぎないよう読み幅を抑える。56em ＝ 全角56文字ぶん */ .area > .body-text{font-size:clamp(16px,4.2vw,22px);line-height:2;max-width:56em} /* ---------- FAQ ---------- */ .faq{border-top:2px solid var(--navy)} /* セクションが白なので、質問の行はグレーの面にして浮かせる */ .faq details{border-bottom:1px solid var(--rule);background:var(--bg)} .faq summary{ display:flex;align-items:flex-start;gap:14px; padding:clamp(18px,4.4vw,26px) clamp(16px,4vw,28px); cursor:pointer;list-style:none; font-weight:700;font-size:clamp(15px,4vw,22px);line-height:1.75;color:var(--navy); } .faq summary::-webkit-details-marker{display:none} .faq summary::before{content:"Q";flex:none;font-family:var(--f-en);font-weight:700;font-size:clamp(17px,4.4vw,24px);line-height:1.55;color:var(--blue)} .faq summary::after{ content:"";flex:none;margin-left:auto;margin-top:5px; width:26px;height:26px;border-radius:50%;background:var(--accent); background-image:linear-gradient(var(--navy),var(--navy)),linear-gradient(var(--navy),var(--navy)); background-size:11px 1.8px,1.8px 11px; background-position:center,center;background-repeat:no-repeat; transition:transform .22s; } .faq details[open] summary::after{transform:rotate(45deg)} /* 開閉を動かすための入れ物。高さは JS が変える。 padding を内側の .faq-a に持たせているので、高さ0でも余白が残らない */ .faq-body{overflow:hidden} .faq-a{ display:flex;gap:14px;margin:0; padding:0 clamp(16px,4vw,28px) clamp(20px,4.6vw,28px); font-size:clamp(14px,3.6vw,19px);line-height:2.05;color:var(--ink); } /* opacity で薄くしていたためコントラストが2.1しかなく、質問の「Q」だけが目立っていた。 実色の紺にしてコントラスト10.6にする */ .faq-a::before{content:"A";flex:none;font-family:var(--f-en);font-weight:700;font-size:clamp(17px,4.4vw,24px);line-height:1.5;color:var(--navy)} /* 回答が段落＋箇条書きになる場合。A のマークと横並びにならないよう1つの塊にする */ .faq-a > div{min-width:0} .faq-a p{margin:0} .faq-a ul{margin:.8em 0 0;padding-left:1.4em} .faq-a li{margin-top:.3em} /* ---------- 会社案内・アクセス ---------- */ .two{display:grid;gap:clamp(26px,5.5vw,48px)} @media (min-width:900px){ .two{grid-template-columns:1fr 1fr;align-items:start} } .dl{margin:0;border-top:2px solid var(--navy)} .dl-row{display:grid;grid-template-columns:5.5em 1fr;gap:14px;padding:15px 0;border-bottom:1px solid var(--rule);font-size:15px} .dl-row dt{margin:0;font-weight:700;color:var(--navy)} /* ラベル（会社名・所在地…）より、中身のほうを大きくする */ .dl-row dd{margin:0;color:var(--ink-soft);line-height:1.9;font-size:17px} .map{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--rule)} .map iframe{width:100%;height:100%;border:0;display:block} /* PCの文字サイズはサービス内容・選ばれる理由・ご相談の流れに合わせる */ @media (min-width:900px){ #company .lead{font-size:32px} #company .body-text{font-size:19px;line-height:2} .dl-row{font-size:19px;grid-template-columns:8em 1fr;padding:20px 0} .dl-row dd{font-size:23px} /* 左の表が伸びたぶん、地図も行の高さいっぱいまで伸ばす（右下に余白を残さない） */ #company .two{align-items:stretch} #company .map{aspect-ratio:auto;height:100%;min-height:420px} } /* ---------- お問い合わせ ---------- */ /* フォームの下はフッターの濃い帯が続くので、他のセクションほど余白が要らない。 下だけ半分ほどに詰める（上は見出しの逃げがあるので変えない） */ .contact{background:var(--navy);color:#fff;padding-bottom:clamp(36px,6vw,60px)} .contact .sec-en{color:rgba(255,255,255,.12)} .contact .sec-ja{background:#fff;color:var(--navy)} .contact-lead{margin:0 0 clamp(30px,6vw,42px);font-size:clamp(13.5px,3.7vw,15.5px);color:rgba(255,255,255,.88);max-width:34em} /* PCの文字サイズは他のセクションに合わせる。1行に収まるよう読み幅も広げる */ @media (min-width:900px){ .contact-lead{font-size:22px;max-width:40em} } /* 濃紺のセクションの中に白いパネルを置き、その中にフォームを組む。 本番は Jetpack の [contact-form] が吐く HTML に合わせ直す。 Jetpack 側のマークアップは変えられないので、構造に頼った装飾は使わない */ .cform-wrap{background:var(--paper);color:var(--ink);padding:clamp(22px,5vw,48px);max-width:900px} .cf-grid{display:grid;gap:clamp(16px,3vw,22px)} @media (min-width:760px){ .cf-grid{grid-template-columns:1fr 1fr} .cf-wide{grid-column:1 / -1} } .cf-row{display:flex;flex-direction:column;gap:8px} .cf-row label{ display:flex;align-items:center;gap:9px; font-weight:700;font-size:15px;line-height:1.5;color:var(--navy); } .cf-req,.cf-any{font-size:11px;font-weight:700;line-height:1;padding:4px 7px} .cf-req{background:var(--navy);color:#fff} .cf-any{background:var(--bg);color:var(--ink-soft)} /* grunion.css の `.contact-form :is(input[type=text],...)` が width:50% を 当ててくる。詳細度が同じ(0,2,1)で、あちらが後に読まれるため負ける。 .grunion-field-wrap を挟んで1段上げる。textarea は対象外なので元から100%。 16px 未満にすると iOS が入力時に画面を勝手に拡大する */ .cf-row input,.cf-row textarea{ font-family:inherit;font-size:16px;line-height:1.7;color:var(--ink); width:100%;padding:12px 14px; background:var(--paper);border:1px solid var(--rule);border-radius:0; } .cf-row textarea{min-height:150px;resize:vertical} /* 白いパネルの上では黄色の輪郭が見えないので、ここだけ紺にする */ .cf-row input:focus-visible,.cf-row textarea:focus-visible,.cf-send:focus-visible{ outline:3px solid var(--navy);outline-offset:2px; } .cf-note{margin:clamp(18px,3.4vw,24px) 0 0;font-size:12.5px;line-height:1.9;color:var(--ink-soft)} /* スマホは中央に置く。幅いっぱいにはせず、指で押せる大きさ（高さ45px）は保つ */ .cf-send{ margin:clamp(16px,3vw,22px) auto 0; display:flex;align-items:center;justify-content:center; width:100%;max-width:260px;padding:15px 24px; /* 他のボタンと同じ角丸にする。直角は「情報の面」、角丸は「押せるもの」 */ border-radius:40px; background:var(--accent);color:var(--navy);border:0;cursor:pointer; font-family:inherit;font-weight:700;font-size:15px;line-height:1; } /* 2列になる幅からは、フォームの左端に戻す */ @media (min-width:760px){ .cf-send{ margin-inline:0;display:inline-flex; width:auto;max-width:none;min-width:220px;padding:17px 34px;font-size:16px; } } .cf-send:hover{background:#ffd05e} /* ---------- フッター ---------- */ .ft{background:var(--navy-deep);color:rgba(255,255,255,.76);font-size:12.5px} .ft-in{padding-block:clamp(36px,7vw,56px);line-height:2} .ft-name{display:block;font-size:16px;font-weight:700;color:#fff;margin-bottom:10px} /* スマホでは出さない。同じ行き先がヘッダーのメニューから辿れるため（下層2ページも入っている） */ .ft-links{list-style:none;margin:26px 0 0;padding:0;display:none;gap:11px} @media (min-width:760px){ .ft-links{display:grid;grid-template-columns:repeat(3,1fr);max-width:620px} } .ft-links a{text-decoration:none;font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px} .ft-links a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none} /* アイコンの出所。MITは著作権表示を残す義務があるため、画面にも出す。 スマホではリンクの一覧を隠すが、この行は残す */ .ft-credit{margin:clamp(26px,5vw,38px) 0 0;font-size:11px;line-height:1.9;color:rgba(255,255,255,.6)} .ft-credit a{color:inherit} @media (min-width:900px){ .ft-credit{font-size:13px} } /* ---------- 下部固定バー ---------- */ /* 固定バーを置かないページ（ブログ）では、そのぶんの下余白も要らない */ body.no-bar{padding-bottom:0} .bar{ position:fixed;left:0;right:0;bottom:0;z-index:9999; display:grid;grid-template-columns:1fr 1fr 1fr;height:54px; } @media (min-width:1024px){ .bar{display:none} } /* アイコンと文字は横並び。縦に積むより帯を低くできる（指で押せる44pxは確保する） */ .bar a{display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;font-size:15px;font-weight:700} .bar svg{width:22px;height:22px} .bar-tel{background:var(--blue);color:#fff} .bar-line{background:var(--line);color:#fff} .bar-form{background:var(--accent);color:var(--navy)} /* ---------- 下層ページの見出し ---------- トップのセクション見出し（英字＋縦書きラベル）をそのまま使う。 その上にパンくずを置き、ここから来た道が分かるようにする */ .phead{padding-block:clamp(26px,5vw,44px) 0} .crumb{ display:flex;flex-wrap:wrap;align-items:center;gap:8px; margin-bottom:clamp(20px,4vw,30px); font-size:12px;line-height:1.8;color:var(--ink-soft); } /* PCは本文19pxの体系に合わせて、12pxだと小さすぎる */ @media (min-width:900px){ .crumb{gap:12px;font-size:17px} } .crumb a{text-decoration:none} .crumb a:hover{text-decoration:underline} .crumb-sep{color:rgba(7,59,104,.35)} /* 見出しの直後なので、本文側の上余白は詰める */ .phead + .sec{padding-top:clamp(8px,1.6vw,18px)} /* ---------- 工程（浄化槽点検作業内容） ---------- */ .steps{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy)} .step{ display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,2.6vw,24px); padding:clamp(18px,3.6vw,26px) 0;border-bottom:1px solid var(--rule); } .step-no{ font-family:var(--f-en);font-weight:700;color:var(--blue); font-size:clamp(17px,4.4vw,24px);line-height:1.6; } .step-body > p{margin:8px 0 0;font-size:13.5px;line-height:2;color:var(--ink-soft)} /* PCの文字サイズはトップの各セクションに合わせる */ @media (min-width:900px){ .step{gap:34px} .steps .h3{font-size:27px} .step-body > p{margin-top:12px;font-size:19px} } /* ---------- ブログ一覧 ---------- 日付と題名の2列。写真は使わず、罫線と余白で並べる */ .posts{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy)} .post-row{border-bottom:1px solid var(--rule)} .post-row a{ display:grid;gap:4px;padding:clamp(16px,3.4vw,24px) 0; text-decoration:none;color:inherit; } .post-row time{ font-family:var(--f-en);font-size:13px;font-weight:700; letter-spacing:.04em;color:var(--blue); } .post-title{font-weight:700;font-size:clamp(15px,4vw,18px);line-height:1.7;color:var(--navy)} .post-row a:hover .post-title{text-decoration:underline} @media (min-width:760px){ .post-row a{grid-template-columns:8em 1fr;gap:24px;align-items:baseline} } @media (min-width:900px){ .post-row time{font-size:16px} .post-title{font-size:21px} } /* ---------- 記事 ---------- 本文は読み物なので、他のセクションより読み幅を絞る */ /* WordPress は投稿の
に post クラスを付ける（post_class()）。 .post だけで書くと一覧の各行にも 820px が当たって罫線が短くなるため、 モックの
に限定する */ .wrap.post{max-width:820px} .post-date{font-family:var(--f-en);font-weight:700;font-size:14px;color:var(--blue);letter-spacing:.04em} .post-h1{margin:10px 0 0;font-size:clamp(21px,5.4vw,34px);line-height:1.6;color:var(--navy)} .post-body{ margin-top:clamp(22px,4.4vw,34px);padding-top:clamp(22px,4.4vw,34px); border-top:1px solid var(--rule); } .post-body p{margin:0 0 1.7em;font-size:clamp(14px,3.7vw,17px);line-height:2.1} .post-body .h3{margin:2.2em 0 .9em} .post-body figure{margin:0 0 1.8em} .post-body img{display:block;max-width:100%;height:auto;margin-inline:auto} .post-body strong{font-weight:700;color:var(--navy)} /* 記事末尾の「一覧へ戻る」。塗りの色は役割に取ってある（電話=青・LINE=緑・ お問い合わせ=黄）ので、ここは枠線のボタンにして役割色とぶつけない */ .post-back{display:flex;justify-content:center;margin:clamp(30px,6vw,46px) 0 clamp(20px,4vw,56px)} .post-back .btn{ display:inline-flex;padding-inline:28px; background:#fff;color:var(--navy);border-color:var(--navy); } .post-back .btn:hover{background:var(--navy);color:#fff;opacity:1} .post-back .btn svg{width:16px;height:16px} /* ---------- PCでのフォームとフッター ---------- どちらも本文19pxの体系に対して小さすぎたので、900px以上で一段上げる */ @media (min-width:900px){ .cf-grid{gap:34px} .cf-row{gap:13px} .cf-row label{font-size:21px;gap:12px} .cf-req,.cf-any{font-size:15px;padding:6px 11px} .cf-row input,.cf-row textarea{font-size:22px;padding:20px 22px} .cf-row textarea{min-height:240px} .cf-note{font-size:17px} .cf-send{min-width:320px;padding:26px 52px;font-size:24px} } /* フッターはタブレットから大きくする（従来は900px以上だけだった） */ @media (min-width:760px){ .ft{font-size:19px} .ft-name{font-size:26px;margin-bottom:16px} .ft-links{margin-top:36px;max-width:820px;gap:16px} .ft-links a{font-size:19px;gap:10px} .ft-links a::before{width:7px;height:7px} } @media (min-width:900px){ .ft{font-size:26px} .ft-name{font-size:44px;margin-bottom:24px} .ft-links{margin-top:52px;max-width:1120px;gap:24px} .ft-links a{font-size:26px;gap:14px} .ft-links a::before{width:9px;height:9px} } /* =================================================================== WordPress 側の打ち消し モックを WordPress に載せたときだけ必要になる指定をここに集める。 モックには該当する要素が無いので、単体で開いても何も変わらない。 =================================================================== */ /* 本文は wp:html で入れている。WordPress と Blocksy が .entry-content の直下に左右15.7pxのマージンと最大幅を入れてくるため、 本文の幅が32px狭くなり、行の折り返しがモックとずれる。 余白はこちら（.wrap）が持っているので、全部外す */ .entry-content.is-layout-constrained > *{ /* 相手は .is-layout-constrained > :where(...) で margin-left/right:auto !important を当ててくる。 :where() は詳細度0なので、クラス2つにしたうえで !important で返す */ /* 上下にもテーマの余白（--theme-content-spacing）が入る。 セクションは自前で padding-block を持っているので全部外す */ margin:0 !important; max-width:none; /* Blocksy は同じセレクタで width:var(--theme-block-width) も当ててくる。 これを外さないと本文の幅が343pxに縮んだままになる */ width:auto; } /* ヒーローの見出し。Blocksy が h1 に見出し色を直接当てており、 .hero の color:#fff（継承）に勝ってしまう。白を明示して戻す */ .hero h1{color:#fff} /* お問い合わせフォームは Jetpack のショートコードが描くので、 モックの .cf-* と同じ見た目を Jetpack のクラスに当て直す。 項目の並びは [contact-field] の順＝モックと同じ6つ。 */ form.contact-form{display:grid;gap:clamp(16px,3vw,22px);margin:0} /* モックでは注記は入力欄と送信ボタンの間にあるが、ショートコードが出す HTML の中には差し込めないため、WordPress ではフォームの前に置いている。 送信する前に目に入ればよいので位置は変えた。間隔だけ足す */ .entry-content .cf-note{margin-bottom:clamp(16px,3vw,22px)} @media (min-width:760px){ form.contact-form{grid-template-columns:1fr 1fr} /* 住所を全幅に。電話番号と同じ type='text' で型クラスが同じため、 ここだけ並び順（div の3番目）で指定している */ form.contact-form > div:nth-of-type(3), .grunion-field-textarea-wrap{grid-column:1 / -1} } /* 間隔を gap で作ると、空のエラー表示欄にも効いて8px余分に空く。 ラベルの下余白で作る */ form.contact-form .grunion-field-wrap{display:flex;flex-direction:column;gap:0;margin:0} form.contact-form .grunion-field-label{ display:flex;align-items:center;gap:9px;margin:0 0 8px; font-weight:700;font-size:15px;line-height:1.5;color:var(--navy); } form.contact-form .grunion-label-required{ font-size:11px;font-weight:700;line-height:1;padding:4px 7px; background:var(--navy);color:#fff; } /* 16px 未満にすると iOS が入力時に画面を勝手に拡大する */ form.contact-form .grunion-field-wrap .grunion-field{ font-family:inherit;font-size:16px;line-height:1.7;color:var(--ink); width:100%;padding:12px 14px;margin:0; /* Blocksy は入力欄に height を直接当ててくる（40px）。 モックは padding と line-height で高さが決まるので外す */ height:auto; background:var(--paper);border:1px solid var(--rule);border-radius:0; } form.contact-form .grunion-field-wrap textarea.grunion-field{min-height:150px;resize:vertical} /* 白いパネルの上では黄色の輪郭が見えないので、ここだけ紺にする */ form.contact-form .grunion-field-wrap .grunion-field:focus-visible, form.contact-form button.pushbutton-wide:focus-visible{ outline:3px solid var(--navy);outline-offset:2px; } /* 送信ボタン。スマホは中央、760px以上は左端（モックと同じ） */ form.contact-form button.pushbutton-wide{ margin:clamp(16px,3vw,22px) auto 0; display:flex;align-items:center;justify-content:center; height:auto;min-height:0;gap:normal; width:100%;max-width:260px;padding:15px 24px; border-radius:40px; background:var(--accent);color:var(--navy);border:0;cursor:pointer; font-family:inherit;font-weight:700;font-size:15px;line-height:1; } form.contact-form button.pushbutton-wide:hover{background:#ffd05e} @media (min-width:760px){ form.contact-form button.pushbutton-wide{ margin-inline:0;display:inline-flex;justify-self:start; width:auto;max-width:none;min-width:220px;padding:17px 34px;font-size:16px; } } /* Jetpack が出す空の p（送信ボタンの手前と末尾）。グリッドの枠を1つ占めて ボタンを2列目へ押し出すので、中身が無いときだけ畳む。 p.contact-submit は改行だけ入っていて :empty に当たらないため :has で判定する （将来ここにボタンが戻ったら、そのときは表示される） */ form.contact-form > p:empty, form.contact-form > p.contact-submit:not(:has(*)){display:none} /* 電話番号だけ任意。Jetpack は必須項目に「(必須)」を出すだけで、 任意項目には何も出さないので、モックと同じ「任意」バッジをこちらで足す。 住所と同じ type='text' で型クラスが同じため、並び順（div の4番目）で指定している。 ★ 項目を足し引きしたら、この数字も直すこと */ form.contact-form > div:nth-of-type(4) .grunion-field-label::after{ content:"任意"; font-size:11px;font-weight:700;line-height:1;padding:4px 7px; background:var(--bg);color:var(--ink-soft); } /* 本文を包む Blocksy のコンテナ。上下50pxの余白はモックに無い */ .ct-container-full{padding-block:0} /* Blocksy のページタイトルは、カスタマイザーの single_page_hero_enabled = no で 出力ごと止めている（CSSでは隠さない。h1 がHTMLに残るため）。 ブログ記事のページタイトルの扱いは工程Dで決める */ /* .sec-ja は下層ページでは h1 になる。h1 の既定の余白を消す */ .sec-ja{margin:0} /* ---------- ブログ一覧（Blocksy が描く部分） ---------- モックの .posts / .post-row と同じ見た目を、Blocksy のクラスに当て直す。 出る要素は functions.php のフィルタで日付とタイトルだけに絞ってある */ /* Blocksy が後から読む