/* ===== ルブリコーティング 下層ページ共通 ===== */
:root{
  --yoru:#0e1319; --sora:#eef0ed; --kami:#f7f6f2; --sumi:#262b30;
  --usuzumi:#5d6670; --mizu:#4a7fae; --kin:#a8823f; --line:#dcdfd9;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:"Zen Kaku Gothic Antique","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:#1d2226;line-height:2;font-size:16px;font-weight:400;background:var(--sora);overflow-x:hidden}
a{color:inherit}
img,svg{max-width:100%}
.nb{display:inline-block}
.wrap{max-width:960px;margin:0 auto;padding:0 28px}
.gar{font-family:"Marcellus",serif;letter-spacing:.18em}
.koto{font-family:"Zen Kaku Gothic Antique",sans-serif;font-size:12px;letter-spacing:.34em;color:#8a6c34;font-weight:500}
h1,h2,h3{font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;font-weight:800;color:#1f2429}

/* 紙の粒子 */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}

/* ===== ヘッダー（下層は常に昼） ===== */
header{position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(247,246,242,.92);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(38,43,48,.08)}
.nav{display:flex;justify-content:space-between;align-items:center;height:76px;max-width:1200px;
  margin:0 auto;padding:0 28px;font-size:11.5px;letter-spacing:.22em;color:#262b30}
.logo{font-family:"Marcellus";font-size:20px;letter-spacing:.34em;text-decoration:none;color:inherit}
.logosub{font-family:"Zen Kaku Gothic Antique",sans-serif;font-size:10.5px;letter-spacing:.18em;margin-left:14px;opacity:.85}
.menu{display:flex;gap:10px}
.menu a{text-decoration:none;border:1px solid currentColor;border-radius:999px;padding:7px 18px;
  opacity:.9;transition:background .3s ease,opacity .3s ease;white-space:nowrap}
.menu a:hover{opacity:1;background:rgba(168,130,63,.14)}
.menu a[aria-current="page"]{background:#262b30;color:var(--kami);border-color:#262b30}

main{padding-top:76px}

/* ===== ページ見出し ===== */
.p-head{padding:88px 0 64px;background:var(--kami);border-bottom:1px solid var(--line)}
.p-head .koto{display:block}
.p-head h1{font-size:clamp(28px,4.4vw,44px);letter-spacing:.12em;line-height:1.7;margin-top:12px}
.p-head .lead{margin-top:22px;font-size:15px;color:#31383e;max-width:40em}
.p-head .wrap{transform:rotate(-.25deg)}

/* ===== セクション ===== */
.sec{padding:84px 0}
.sec + .sec{border-top:1px solid var(--line)}
.sec.kami{background:var(--kami)}
.sec-hd{margin-bottom:38px}
.sec-hd .koto{display:block;margin-bottom:8px}
.sec-hd h2{font-size:clamp(21px,3vw,29px);letter-spacing:.12em;line-height:1.8}
.sec p{color:#2a3035}
.sec p + p{margin-top:14px}
.note{font-size:13px;color:#5a6068;margin-top:18px;line-height:1.9}

/* 断面図 */
.danmen{background:#fff;border:1px solid var(--line);padding:32px 28px 26px;margin-top:34px;
  box-shadow:0 14px 30px rgba(93,102,112,.1);transform:rotate(.3deg)}
.danmen svg{display:block;width:100%;height:auto}
.danmen figcaption{font-size:13px;color:#4a5056;margin-top:14px;text-align:center}

/* 試験表 */
.tbl{width:100%;border-collapse:collapse;margin-top:8px;font-size:14.5px;background:#fff}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:16px 18px;text-align:left;vertical-align:top}
.tbl th{width:34%;font-weight:500;color:#3a4147;background:rgba(238,240,237,.6)}
.tbl td b{color:#8a6c34;font-weight:700}
.tbl caption{caption-side:bottom;text-align:left;font-size:12.5px;color:#5a6068;padding-top:12px}

/* 施工できるもの */
.mono{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.mono div{background:#fff;border:1px solid var(--line);padding:22px 24px}
.mono h3{font-size:16px;letter-spacing:.12em}
.mono p{font-size:14px;margin-top:6px}

/* 三本柱 */
.hashira{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hashira div{background:#fff;border:1px solid var(--line);padding:26px 24px}
.hashira div:nth-child(2){transform:translateY(8px) rotate(.3deg)}
.hashira h3{font-size:17px;letter-spacing:.12em}
.hashira p{font-size:14px;margin-top:8px}

/* 流れ */
.nagare{list-style:none;counter-reset:st}
.nagare li{counter-increment:st;position:relative;padding:18px 0 18px 84px;border-bottom:1px dashed var(--line)}
.nagare li::before{content:"STEP 0" counter(st);position:absolute;left:0;top:21px;
  font-family:"Marcellus",serif;font-size:12px;letter-spacing:.14em;color:var(--kin)}

/* FAQ */
.faq dt{font-weight:700;color:#1f2429;padding-top:18px}
.faq dt::before{content:"問　";color:var(--kin)}
.faq dd{padding:4px 0 18px 2em;border-bottom:1px solid var(--line);color:#2a3035}

/* お知らせ */
.news{list-style:none}
.news li{display:flex;gap:28px;padding:22px 0;border-bottom:1px solid var(--line)}
.news time{font-family:"Marcellus",serif;letter-spacing:.12em;color:#8a6c34;flex:0 0 auto}

/* ボタン */
.btn{display:inline-block;background:#262b30;color:var(--kami);text-decoration:none;
  font-size:13px;letter-spacing:.2em;padding:16px 40px;border:0;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--kin)}
.cta{text-align:center;padding:72px 0 84px;background:var(--kami);border-top:1px solid var(--line)}
.cta p{margin-bottom:24px;color:#31383e}

/* フォーム */
.form{background:#fff;border:1px solid var(--line);padding:40px 36px}
.row{margin-bottom:26px}
.row label.lb{display:block;font-size:14px;font-weight:500;margin-bottom:8px;color:#262b30}
.req,.opt{font-size:11px;letter-spacing:.1em;margin-left:8px;padding:1px 8px;border-radius:999px}
.req{background:#262b30;color:#fff}
.opt{border:1px solid #9aa0a6;color:#5a6068}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{
  width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid #c9cdc7;background:var(--kami);color:#1d2226;border-radius:0}
.form textarea{min-height:180px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid rgba(168,130,63,.5);outline-offset:1px}
.agree{font-size:14px}
.agree input{margin-right:8px;transform:scale(1.2)}
.form .btn{margin-top:8px}
.sent{display:none;margin-top:22px;padding:18px 20px;border:1px solid rgba(168,130,63,.5);background:var(--kami);font-size:14px}
.sent.on{display:block}

/* フッター */
footer{background:#262b30;padding:42px 28px;font-size:12px;color:#9aa2a9;text-align:center;letter-spacing:.14em}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-bottom:18px}
footer nav a{color:#d6dbe0;text-decoration:none}

/* ===== スマホ ===== */
@media(max-width:820px){
  .wrap{padding:0 18px}
  .nav{flex-wrap:wrap;height:auto;padding:10px 16px;row-gap:8px}
  .logo{display:flex;flex-direction:column;gap:1px;font-size:17px;line-height:1.4}
  .logosub{margin-left:0;font-size:9.5px;letter-spacing:.14em;white-space:nowrap}
  .menu{width:100%;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .menu::-webkit-scrollbar{display:none}
  .menu a{flex:0 0 auto;padding:5px 12px;font-size:11px;letter-spacing:.08em}
  main{padding-top:104px}
  .p-head{padding:56px 0 44px}
  .sec{padding:60px 0}
  .mono,.hashira{grid-template-columns:1fr}
  .hashira div:nth-child(2){transform:none}
  .tbl th,.tbl td{display:block;width:100%;padding:10px 14px}
  .tbl th{border-bottom:0;padding-bottom:2px}
  .danmen{padding:20px 14px 18px}
  .nagare li{padding-left:0;padding-top:40px}
  .nagare li::before{top:14px}
  .news li{flex-direction:column;gap:2px}
  .form{padding:26px 18px}
}

/* ロゴを楕円プレートに（トップと統一） */
.logo{border:1px solid currentColor;border-radius:999px;padding:6px 26px}
@media(max-width:820px){
  .logo{width:100%;align-items:center;text-align:center;padding:8px 12px 6px}
  .menu{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;overflow:visible}
  .menu a{padding:6px 2px;font-size:10.5px;letter-spacing:0;text-align:center}
}
@media(max-width:820px){main{padding-top:124px}}

/* 製品紹介のCTA見出し */
.cta p.cta-hd{font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;font-weight:800;
  font-size:clamp(21px,3.4vw,30px);letter-spacing:.14em;color:#1f2429;line-height:1.8;margin-bottom:10px}
.cta p.cta-sub{font-size:14px;color:#4a5056;margin-bottom:26px}

/* 迷惑送信対策の隠し欄 */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.agree a{color:#8a6c34}
/* プライバシーポリシー */
.policy h2{font-size:18px;letter-spacing:.1em;margin:44px 0 10px}
.policy h2 .no{font-family:"Marcellus",serif;color:#8a6c34;margin-right:.6em}
.policy p,.policy li{color:#2a3035;font-size:15px}
.policy ul{margin:8px 0 0 1.4em}
.policy .date{margin-top:48px;font-size:13px;color:#5a6068}
/* 404 */
.nf{text-align:center;padding:120px 0 140px}
.nf h1{font-size:clamp(24px,4vw,36px);letter-spacing:.12em;line-height:1.8}
.nf p{margin:18px 0 34px;color:#4a5056}

/* SIAA証明書 */
.cert{margin:30px auto 0;max-width:420px;background:#fff;border:1px solid var(--line);padding:14px;box-shadow:0 14px 30px rgba(93,102,112,.1);transform:rotate(.4deg)}
.cert img{display:block;width:100%}
.cert figcaption{font-size:12px;color:#5a6068;text-align:center;margin-top:10px;letter-spacing:.1em}

/* ===================================================================
   v7（2026-10-13）下層の作り込み：コーポレートサイトの学びを反映
   =================================================================== */

/* --- 着いたとき：雨上がりの光がふわっと入る --- */
@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
main{animation:arrive .4s cubic-bezier(.2,.7,.3,1) both}

/* --- ページ遷移の雫 --- */
.veil{position:fixed;z-index:100;left:50%;top:50%;width:0;height:0;border-radius:50%;pointer-events:none;
  background:var(--kami);transform:translate(-50%,-50%) scale(0);
  box-shadow:0 0 0 1px rgba(168,130,63,.35),0 0 0 14px rgba(74,127,174,.06)}
.veil.on{transform:translate(-50%,-50%) scale(1);transition:transform .45s cubic-bezier(.6,0,.35,1)}

/* --- ページ見出しの雨上がり --- */
.p-head{position:relative;overflow:hidden}
.p-head .wrap{position:relative;z-index:2}
.p-rain{position:absolute;inset:0;pointer-events:none;z-index:1;transition:opacity 1.6s ease}
.p-rain .ame{position:absolute;top:-14%;width:1.5px;height:9vh;
  background:linear-gradient(to bottom,transparent,rgba(74,84,96,.34));animation:pfall linear infinite;transition:opacity 1.4s ease}
@keyframes pfall{to{transform:translateY(60vh)}}
.p-rain.yamu .ame{opacity:0}
.p-drop{position:absolute;top:-24px;width:3px;height:20px;border-radius:3px;
  background:linear-gradient(to bottom,rgba(74,127,174,0),rgba(74,127,174,.75));
  transition:transform 1.1s cubic-bezier(.55,0,.9,.6)}
.p-ring{position:absolute;width:12px;height:12px;border:1px solid rgba(74,84,96,.5);border-radius:50%;
  transform:translate(-50%,-50%);animation:pring 2.8s ease-out forwards}
.p-ring.p-ring2{border-color:rgba(168,130,63,.5);animation-delay:.35s;animation-duration:3.2s;opacity:0;animation-fill-mode:both}
@keyframes pring{0%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(12);opacity:0}}

/* --- スクロールで浮かぶ --- */
/* 時間・移動量は「たかゆ」さんのUI演出の目安（見出し250〜400ms・移動8〜16px、並びは40〜70msずらす）に合わせた。
   本文を長く隠さないよう短め。 */
.rv{opacity:0;transform:translateY(12px);transition:opacity .4s ease-out,transform .4s cubic-bezier(.2,.7,.3,1)}
.rv.on{opacity:1;transform:none}

/* --- パンくず --- */
.crumbs{font-size:12px;letter-spacing:.12em;color:#6a7178;margin-bottom:18px}
.crumbs a{text-decoration:none;border-bottom:1px solid rgba(106,113,120,.35)}
.crumbs span{margin:0 .7em;opacity:.6}

/* --- ページ内目次（製品紹介） --- */
.toc{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:30px}
.toc a{font-size:12.5px;letter-spacing:.14em;text-decoration:none;border:1px solid var(--line);
  background:#fff;border-radius:999px;padding:6px 16px;color:#3a4147;transition:border-color .3s,background .3s}
.toc a:hover{border-color:var(--kin);background:rgba(168,130,63,.08)}
[id]{scroll-margin-top:96px}
@media(max-width:820px){[id]{scroll-margin-top:136px}}

/* --- 八つの守り --- */
.mamori{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;counter-reset:mm}
.mamori li{counter-increment:mm;display:grid;grid-template-columns:52px 1fr;gap:4px 14px;
  padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.mamori .ro{grid-row:span 2;font-family:"Marcellus",serif;font-size:13px;letter-spacing:.12em;color:var(--kin);
  width:44px;height:44px;border:1px solid rgba(168,130,63,.55);border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  display:flex;align-items:center;justify-content:center}
.mamori .ro span{transform:rotate(45deg)}
.mamori h3{font-size:17px;letter-spacing:.12em;line-height:1.7}
.mamori p{font-size:14.5px;line-height:1.95}
.mamori li.top3 h3::after{content:"重点";font-family:"Zen Kaku Gothic Antique",sans-serif;font-size:10.5px;font-weight:500;
  letter-spacing:.14em;color:#8a6c34;border:1px solid rgba(168,130,63,.55);border-radius:999px;padding:1px 9px;margin-left:10px;vertical-align:3px}

/* --- 施工の流れ（お客様向け・3ステップ） --- */
.ayumi{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:ay}
.ayumi li{counter-increment:ay;background:#fff;border:1px solid var(--line);padding:26px 24px 22px;position:relative}
.ayumi li::before{content:"0" counter(ay);font-family:"Marcellus",serif;font-size:13px;letter-spacing:.16em;color:var(--kin);display:block;margin-bottom:6px}
.ayumi h3{font-size:17px;letter-spacing:.12em}
.ayumi p{font-size:14px;margin-top:6px}
.ayumi li:not(:last-child)::after{content:"";position:absolute;right:-13px;top:50%;width:8px;height:8px;
  border-top:1px solid var(--kin);border-right:1px solid var(--kin);transform:translateY(-50%) rotate(45deg);z-index:1}
.ayumi-photo{margin-top:30px;display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center}
.ayumi-photo img{width:100%;height:auto;display:block;border:1px solid var(--line);background:#fff;padding:6px;transform:rotate(-.6deg)}
.ayumi-photo p{font-size:13.5px;color:#4a5056}

/* --- うらづけ（試験・評価・技術協力） --- */
.ura{list-style:none;display:grid;gap:0}
.ura li{display:grid;grid-template-columns:200px 1fr;gap:6px 24px;padding:20px 0;border-bottom:1px solid var(--line)}
.ura .yaku{font-size:12.5px;letter-spacing:.14em;color:#8a6c34;padding-top:3px}
.ura b{font-weight:500;color:#1f2429}
.ura a{font-size:12px;color:#8a6c34;margin-left:.6em;white-space:nowrap}
.ura li.kyoryoku{background:linear-gradient(90deg,rgba(168,130,63,.07),transparent 70%)}

/* --- 代理店：こんなお店に／選ばれる理由 --- */
.mise{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.mise span{border:1px solid var(--line);background:#fff;padding:8px 18px;border-radius:999px;font-size:14px;letter-spacing:.08em}
.riyuu{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.riyuu div{background:#fff;border:1px solid var(--line);padding:26px 24px}
.riyuu .num{font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:30px;color:#8a6c34;line-height:1.3;letter-spacing:.04em}
.riyuu .num small{font-size:14px;margin-left:2px}
.riyuu h3{font-size:16px;letter-spacing:.12em;margin-top:6px}
.riyuu p{font-size:14px;margin-top:6px}

/* --- お知らせ（一覧・記事） --- */
.news a{text-decoration:none}
.news a:hover span.t{border-bottom:1px solid currentColor}
.news .ntag{font-size:11px;letter-spacing:.14em;border:1px solid rgba(168,130,63,.55);color:#8a6c34;border-radius:999px;padding:0 10px;margin-right:12px;white-space:nowrap}
.entry-meta{display:flex;gap:14px;align-items:center;margin-top:6px}
.entry-meta time{font-family:"Marcellus",serif;letter-spacing:.12em;color:#8a6c34}
.entry-body p{font-size:15.5px}
.entry-body p + p{margin-top:16px}
.entry-nav{display:flex;flex-wrap:wrap;gap:14px;margin-top:48px}
.btn.ghost{background:transparent;color:#262b30;border:1px solid #262b30}
.btn.ghost:hover{background:#262b30;color:var(--kami)}

/* --- フォーム：項目ごとのエラー --- */
.row .msg{display:block;font-size:12.5px;color:#a2463a;margin-top:6px;min-height:0}
.row.err input,.row.err textarea,.row.err select{border-color:#c0675a;background:#fdf6f4}
.hint{font-size:13px;color:#4a5056;background:var(--kami);border-left:2px solid var(--kin);padding:10px 14px;margin:-8px 0 24px}
.toiawase-mae{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:34px}
.toiawase-mae a{display:block;background:#fff;border:1px solid var(--line);padding:18px 18px 16px;text-decoration:none;transition:border-color .3s}
.toiawase-mae a:hover,.toiawase-mae a.on{border-color:var(--kin)}
.toiawase-mae b{display:block;font-family:"Shippori Mincho B1",serif;font-size:16px;letter-spacing:.1em}
.toiawase-mae small{display:block;font-size:12.5px;color:#5a6068;line-height:1.8;margin-top:4px}

/* --- フッター：販売元 --- */
footer .hanbai{margin:0 auto 16px;line-height:2;letter-spacing:.1em;color:#b4bbc1}
footer .hanbai b{font-weight:500;color:#d6dbe0}
footer .totop{display:inline-block;margin-top:14px;color:#d6dbe0;text-decoration:none;font-family:"Marcellus",serif;letter-spacing:.2em}

/* --- スマホ --- */
@media(max-width:820px){
  .mamori{grid-template-columns:1fr}
  .mamori li{grid-template-columns:46px 1fr;padding:18px 0}
  .mamori .ro{width:38px;height:38px;font-size:12px}
  .ayumi{grid-template-columns:1fr;gap:22px}
  .ayumi li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-15px;transform:translateX(-50%) rotate(135deg)}
  .ayumi-photo{grid-template-columns:1fr}
  .ayumi-photo img{max-width:240px}
  .ura li{grid-template-columns:1fr;gap:2px}
  .riyuu{grid-template-columns:1fr}
  .toiawase-mae{grid-template-columns:1fr}
  .crumbs{margin-bottom:12px}
}

/* --- ボタンの手応え：押した瞬間に少し沈んで戻る（入力確認の目安0.1〜0.2秒） --- */
.btn,.toc a,.toiawase-mae a,.menu a{transition:background .3s ease,color .3s ease,border-color .3s ease,transform .14s ease-out}
.btn:active,.toc a:active,.toiawase-mae a:active,.menu a:active{transform:scale(.96)}
.btn:disabled{opacity:.6;cursor:wait}
/* --- 送信の状態：処理中・成功・エラーを見分ける --- */
.sent.ok{border-color:rgba(74,127,174,.6);background:#f1f6fa}
.sent.ng{border-color:#c0675a;background:#fdf6f4;color:#7d3329}
.sent.wait{border-style:dashed}
.ura b .nb{margin-right:.45em}
@media(max-width:820px){.toc{gap:6px}.toc a{font-size:11.5px;padding:4px 12px;letter-spacing:.08em}}

/* ===================================================================
   v8（2026-10-13）作り込み第2弾：意味のある動きを各ページ1〜2か所
   =================================================================== */

/* --- 製品紹介：しくみ（スクロールで被膜が組み上がる図解） --- */
.shikumi{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:start}
.sk-fig{position:sticky;top:120px;background:#fff;border:1px solid var(--line);padding:26px 22px 16px;margin:0;
  box-shadow:0 14px 30px rgba(93,102,112,.1);transform:rotate(-.3deg)}
.sk-fig svg{display:block;width:100%;height:auto;stroke-width:1.2;overflow:visible}
.sk-fig text{font-family:"Zen Kaku Gothic Antique",sans-serif;font-size:14px;fill:#3a4147;stroke:none;letter-spacing:.06em}
.sk-fig text.kin{fill:#8a6c34}.sk-fig text.mizu{fill:#4a7fae}.sk-fig text.nm{font-family:"Marcellus",serif;font-size:15px;fill:#262b30}
.sk-fig figcaption{font-size:12px;color:#5a6068;text-align:center;margin-top:8px;letter-spacing:.08em}
.sk-steps{list-style:none}
.sk-steps li{min-height:46vh;padding:6px 0 0;border-top:1px solid var(--line);transition:opacity .4s ease}
.sk-steps li:last-child{min-height:0;padding-bottom:10px}
.sk-steps .no{font-family:"Marcellus",serif;font-size:13px;letter-spacing:.18em;color:var(--kin);display:block;margin-top:14px}
.sk-steps h3{font-size:clamp(18px,2.2vw,22px);letter-spacing:.12em;line-height:1.7;margin-top:2px}
.sk-steps p{font-size:15px;margin-top:8px}
/* JSが動いているときだけ「今の段」以外を薄く */
.shikumi.js .sk-steps li{opacity:.32}
.shikumi.js .sk-steps li.now{opacity:1}
/* 図の各パーツ：段に応じて現れる */
.sk-fig g{transition:opacity .45s ease}
.sk-fig .sk-bond,.sk-fig .sk-mu text,.sk-fig .sk-yu text,.sk-fig .sk-mizu,.sk-fig .sk-abura,.sk-fig .sk-nm{opacity:0}
.sk-fig rect[pathLength]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1)}
.sk-fig .sk-bo path{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);
  transition:transform .35s cubic-bezier(.2,.7,.3,1.3);transition-delay:calc(var(--i)*35ms)}
.sk-fig .fall{transform:translateY(-130px);opacity:0;transition:transform .7s cubic-bezier(.5,0,.75,0),opacity .2s ease}
.sk-fig .sk-abura .fall{transition-delay:.25s}
.sk-fig[data-step="2"] .sk-bond,.sk-fig[data-step="3"] .sk-bond,.sk-fig[data-step="4"] .sk-bond{opacity:1}
.sk-fig[data-step="2"] .sk-mu rect,.sk-fig[data-step="3"] .sk-mu rect,.sk-fig[data-step="4"] .sk-mu rect{stroke-dashoffset:0}
.sk-fig[data-step="2"] .sk-mu text,.sk-fig[data-step="3"] .sk-mu text,.sk-fig[data-step="4"] .sk-mu text{opacity:1}
.sk-fig[data-step="3"] .sk-yu rect,.sk-fig[data-step="4"] .sk-yu rect{stroke-dashoffset:0}
.sk-fig[data-step="3"] .sk-yu text,.sk-fig[data-step="4"] .sk-yu text{opacity:1}
.sk-fig[data-step="3"] .sk-bo path,.sk-fig[data-step="4"] .sk-bo path{transform:scaleY(1)}
.sk-fig[data-step="4"] .sk-mizu,.sk-fig[data-step="4"] .sk-abura,.sk-fig[data-step="4"] .sk-nm{opacity:1}
.sk-fig[data-step="4"] .fall{transform:none;opacity:1;animation:tama .6s .7s ease-out}
.sk-fig[data-step="4"] .sk-abura .fall{animation-delay:.95s}
@keyframes tama{0%{transform:scale(1.18,.8)}45%{transform:scale(.94,1.07)}100%{transform:none}}
.sk-fig .fall{transform-box:fill-box;transform-origin:50% 100%}

/* --- 製品紹介：摩擦の比較バー --- */
.masatsu{background:#fff;border:1px solid var(--line);padding:26px 28px 22px;margin-bottom:26px}
.ms-hd{font-size:14px;font-weight:500;letter-spacing:.1em;color:#262b30}
.ms-hd small{font-size:12px;font-weight:400;color:#5a6068;margin-left:.6em;letter-spacing:.04em}
.ms-row{display:grid;grid-template-columns:7.5em 1fr 4em;gap:14px;align-items:center;margin-top:16px}
.ms-name{font-size:13.5px;color:#3a4147}
.ms-track{height:10px;background:rgba(220,223,217,.55);position:relative;overflow:hidden}
.ms-track i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--w));background:#8b9197}
.ms-row.lubri .ms-track i{background:var(--kin)}
.ms-row.lubri .ms-track i::after{content:"";position:absolute;right:-1px;top:-4px;bottom:-4px;width:2px;background:var(--kin)}
.ms-val{font-family:"Marcellus",serif;font-size:20px;font-weight:400;letter-spacing:.06em;text-align:right;color:#262b30}
.ms-row.lubri .ms-val{color:#8a6c34}
.ms-kotae{margin-top:18px;font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:clamp(18px,2.4vw,22px);letter-spacing:.12em;color:#1f2429}
.ms-kotae b{color:#8a6c34}
.masatsu.js .ms-track i{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.masatsu.js.on .ms-track i{transform:scaleX(var(--w))}
.masatsu.js .ms-row.lubri .ms-track i{transition-delay:.25s;transition-duration:.5s}

@media(max-width:820px){
  .shikumi{grid-template-columns:1fr;gap:0}
  .sk-fig{top:128px;z-index:3;padding:14px 12px 8px;transform:none}
  .sk-fig figcaption{font-size:11px;margin-top:4px}
  .sk-fig text{font-size:17px}.sk-fig text.nm{font-size:16px}
  .sk-steps{position:relative;z-index:1;margin-top:18px}
  .sk-steps li{min-height:42vh}
  .masatsu{padding:20px 16px 18px}
  .ms-row{grid-template-columns:5.6em 1fr 3.4em;gap:10px}
  .ms-name{font-size:12px}
  .ms-val{font-size:17px}
}

/* --- 代理店様向け：三つのお手伝い（カードではなく、縦罫の段組。真ん中だけ少し下げる） --- */
.tetsudai{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #262b30}
.tetsudai li{padding:26px 28px 30px;border-right:1px solid var(--line)}
.tetsudai li:last-child{border-right:0}
.tetsudai li:first-child{padding-left:0}
.tetsudai li:nth-child(2){margin-top:34px}
.tetsudai .no{font-family:"Marcellus",serif;font-size:34px;line-height:1;color:var(--kin);letter-spacing:.06em}
.tetsudai h3{font-size:19px;letter-spacing:.14em;margin-top:14px}
.tetsudai p{font-size:14.5px;margin-top:8px}

/* --- 代理店様向け：5分の時計＋理由 --- */
.susume{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}
.gofun{margin:0;position:sticky;top:120px;text-align:center}
.gofun svg{width:100%;max-width:260px;display:block;margin:0 auto;fill:none;stroke-linecap:round}
.g-base{stroke:var(--line);stroke-width:1}
.g-ticks path{stroke:#9aa0a6;stroke-width:1}
.g-arc{stroke:var(--kin);stroke-width:10;stroke-dasharray:5 60;stroke-dashoffset:0;opacity:.85}
.g-hand{stroke:#262b30;stroke-width:2;transform-origin:100px 100px;transform:rotate(30deg)}
.g-pin{fill:#262b30}
.gofun.js .g-arc{stroke-dasharray:0 60;transition:stroke-dasharray 1.6s cubic-bezier(.3,0,.2,1)}
.gofun.js .g-hand{transform:rotate(0deg);transition:transform 1.6s cubic-bezier(.3,0,.2,1)}
.gofun.js.on .g-arc{stroke-dasharray:5 60}
.gofun.js.on .g-hand{transform:rotate(30deg)}
.gofun figcaption{margin-top:6px}
.gf-num{display:block;font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:22px;letter-spacing:.1em;color:#1f2429}
.gf-num b{font-size:64px;line-height:1;color:#8a6c34;font-family:"Marcellus",serif;font-weight:400;margin:0 .06em;letter-spacing:0}
.gf-cap{display:block;font-size:12.5px;color:#5a6068;letter-spacing:.14em}
.riyuu2{list-style:none;border-top:1px solid #262b30}
.riyuu2 li{display:grid;grid-template-columns:8.5em 1fr;gap:4px 24px;padding:22px 0;border-bottom:1px solid var(--line)}
.riyuu2 .k{font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:18px;letter-spacing:.1em;color:#1f2429;line-height:1.7}
.riyuu2 .k b{font-family:"Marcellus",serif;font-weight:400;font-size:28px;color:#8a6c34;margin-right:2px;vertical-align:-2px}
.riyuu2 p{font-size:14.5px}
.riyuu2 .more{display:inline-block;margin-left:.4em;color:#8a6c34;font-size:13px;white-space:nowrap}

/* --- 代理店様向け：流れ（読んだぶんだけ金の線が伸びる） --- */
.suji{position:relative}
.suji::before,.suji::after{content:"";position:absolute;left:-26px;top:22px;bottom:22px;width:1px;background:var(--line)}
.suji::after{background:var(--kin);transform-origin:50% 0;transform:scaleY(var(--p,1));width:2px;left:-26.5px}
.suji li{transition:color .3s}
.suji li .dot{position:absolute;left:-30px;top:27px;width:9px;height:9px;border-radius:50%;background:var(--kami);border:1px solid var(--kin);transition:background .3s}
.suji li.lit .dot{background:var(--kin)}

@media(max-width:820px){
  .tetsudai{grid-template-columns:1fr}
  .tetsudai li,.tetsudai li:first-child{padding:20px 0 22px;border-right:0;border-bottom:1px solid var(--line)}
  .tetsudai li:nth-child(2){margin-top:0;padding-left:22px}
  .tetsudai .no{font-size:28px}
  .susume{grid-template-columns:1fr;gap:26px}
  .gofun{position:static}
  .gofun svg{max-width:190px}
  .gf-num b{font-size:52px}
  .riyuu2 li{grid-template-columns:1fr;gap:2px}
  .suji{margin-left:22px}
  .suji::before,.suji::after{left:-16px}.suji::after{left:-16.5px}
  .suji li .dot{left:-20px}
}

/* --- 全体：見出しは、筆で引くように左から現れる --- */
.sec-hd.rv{opacity:1;transform:none}
.sec-hd.rv h2{clip-path:inset(0 100% 0 0);transition:clip-path .7s cubic-bezier(.65,0,.35,1) .1s}
.sec-hd.rv.on h2{clip-path:inset(0 -2% 0 0)}
.sec-hd.rv .koto{display:inline-flex;align-items:center;gap:12px}
.sec-hd.rv .koto::after{content:"";height:1px;width:34px;background:var(--kin);transform-origin:0 50%;transform:scaleX(0);transition:transform .5s ease .5s}
.sec-hd.rv.on .koto::after{transform:scaleX(1)}

/* --- 全体：ページ見出しの欧文の透かし（大きく、少しはみ出させる） --- */
.p-head .sukashi{position:absolute;right:-.06em;bottom:-.24em;z-index:0;font-family:"Marcellus",serif;
  font-size:clamp(84px,17vw,230px);line-height:1;letter-spacing:.02em;color:rgba(38,43,48,.05);
  white-space:nowrap;pointer-events:none;transform:rotate(-2deg);user-select:none}

/* --- 全体：ヘッダーの水位線（どこまで読んだか） --- */
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--kin);opacity:.75;
  transform-origin:0 50%;transform:scaleX(var(--yomi,0))}

/* --- 製品紹介：八つの守りの雫に、色が満ちる --- */
.mamori .ro{position:relative;overflow:hidden}
.mamori .ro::before{content:"";position:absolute;inset:0;background:rgba(168,130,63,.18);border-radius:inherit;transform:scale(0);transition:transform .5s cubic-bezier(.2,.7,.3,1.2) .25s}
.mamori li.on .ro::before{transform:scale(1)}

/* --- お問い合わせ：選んだ札に雫が落ちる --- */
.toiawase-mae a{position:relative;overflow:hidden}
.toiawase-mae .rip{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:1px solid rgba(168,130,63,.6);
  pointer-events:none;animation:prip .9s ease-out forwards}
@keyframes prip{to{transform:scale(26);opacity:0}}
.toiawase-mae a.on b::after{content:"✓";font-family:"Zen Kaku Gothic Antique",sans-serif;font-size:13px;color:#8a6c34;margin-left:.6em}

/* ===================================================================
   v9（2026-10-13）ページごとの空模様：トップの「雨→雨上がり→快晴」の続き
   色は既存の3色の中でトーンだけ変える。グラデーション・すりガラスは使わない
   =================================================================== */

/* 製品紹介「雨上がり直後」：青みの空色＋研究ノートの方眼。雨が止み、最後の一滴 */
.pg-product .p-head{background-color:#e8edef;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0v24' fill='none' stroke='%234a7fae' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E");
  border-bottom-color:#d5dde1}
.pg-product .p-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(74,127,174,.25)}
.pg-product .p-head .sukashi{color:rgba(74,127,174,.07)}

/* 代理店様向け「店先」：温かい紙色＋証書のような金の二重罫。見出しは縦書き */
.pg-agents .p-head{background:#f3eee3;border-bottom-color:#e2d8c4}
.pg-agents .p-head::before,.pg-agents .p-head::after{content:"";position:absolute;pointer-events:none;z-index:1}
.pg-agents .p-head::before{inset:16px;border:1px solid rgba(168,130,63,.45)}
.pg-agents .p-head::after{inset:21px;border:1px solid rgba(168,130,63,.22)}
.pg-agents .p-head .sukashi{color:rgba(168,130,63,.08)}
.tate-row{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:flex-start;gap:44px;margin-top:18px}
.tate{writing-mode:vertical-rl;font-size:clamp(30px,4.2vw,44px)!important;letter-spacing:.22em!important;line-height:1.5!important;
  margin:0!important;white-space:nowrap}
.tate span{display:block}
.tate span + span{margin-top:2.2em}  /* 2列目（承ります。）を少し下げて、相合傘の段差をつくる */
.tate-row .lead{margin-top:6px;max-width:26em}

/* お知らせ「快晴」：雨なし。いちばん明るい紙に、細い地平線と日 */
.pg-news .p-head{background:#fbfaf6;padding-bottom:52px}
.pg-news .p-head::before{content:"";position:absolute;left:0;right:0;bottom:64px;height:1px;background:rgba(168,130,63,.35);z-index:1}
.pg-news .p-head::after{content:"";position:absolute;right:12%;bottom:64px;width:64px;height:32px;border:1px solid rgba(168,130,63,.6);border-bottom:0;
  border-radius:64px 64px 0 0;z-index:1;animation:hinode 1.6s cubic-bezier(.2,.7,.3,1) .2s both}
@keyframes hinode{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}

/* お問い合わせ「水たまり」：雨は降らない。足元の水たまりに、ときどき波紋 */
.pg-contact .p-head{background:#eef1f0}
.mizutamari{position:absolute;right:9%;bottom:30px;width:220px;height:46px;z-index:1;pointer-events:none}
.mizutamari::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(74,127,174,.28);background:rgba(74,127,174,.05)}
.mizutamari i{position:absolute;left:50%;top:50%;width:24px;height:5px;margin:-2.5px 0 0 -12px;border-radius:50%;border:1px solid rgba(74,127,174,.55);
  animation:hamon 2.8s ease-out forwards}
.mizutamari i.b{animation-delay:.35s;border-color:rgba(168,130,63,.5);opacity:0;animation-fill-mode:both}
@keyframes hamon{0%{transform:scale(.3);opacity:1}100%{transform:scale(7);opacity:0}}

@media(max-width:820px){
  .pg-agents .p-head::before{inset:10px}.pg-agents .p-head::after{inset:14px}
  .tate-row{gap:22px;margin-top:10px}
  .tate{font-size:30px!important;letter-spacing:.16em!important}
  .tate-row .lead{font-size:14px;line-height:2}
  .pg-news .p-head::after{right:8%;width:44px;height:22px}
  .pg-news .p-head::before,.pg-news .p-head::after{bottom:40px}
  .pg-news .p-head{padding-bottom:40px}
  .mizutamari{right:6%;bottom:14px;width:150px;height:32px}
}

/* 文節の区切り（<wbr>）以外では折り返さない。スマホで「リニューア｜ル」のような切れ方を防ぐ */
.bx{word-break:keep-all;overflow-wrap:anywhere}
.entry-body p,.news .t,#e-title,#e-crumb{word-break:keep-all;overflow-wrap:anywhere}
@supports (word-break:auto-phrase){ .entry-body p,.news .t,#e-title,#e-crumb{word-break:auto-phrase} }
/* 見出しは行の長さをそろえ、本文は最後の行が1語だけ残らないように（対応ブラウザのみ。非対応でも崩れない） */
main h2,main h3,.cta-hd{text-wrap:balance}
main p,main li,main dd{text-wrap:pretty}

/* --- お問い合わせ：水たまりに映る、傘の彼女（トップ映像のシルエット。②幻想＝水の中にだけ現れる） --- */
.mizutamari{width:300px;height:92px;bottom:20px;overflow:hidden;border-radius:50%}
.mizutamari::before{z-index:0}
.mizutamari .kage{position:absolute;left:62%;top:84px;width:84px;height:126px;z-index:1;
  background:#4a7fae;-webkit-mask:url(/kasa_kage.png) center/contain no-repeat;mask:url(/kasa_kage.png) center/contain no-repeat;
  transform-origin:50% 0;transform:translateX(-50%) scaleY(-.6);opacity:0;filter:blur(1.5px);
  transition:opacity 1.8s ease,filter 1.8s ease;animation:kage-sway 7s ease-in-out infinite}
.mizutamari .kage.mie{opacity:.26;filter:blur(.5px)}
.mizutamari .kage.yure{animation:kage-yure 1.6s ease-out,kage-sway 7s ease-in-out 1.6s infinite}
@keyframes kage-sway{0%,100%{transform:translateX(-50%) scaleY(-.6) skewX(0)}50%{transform:translateX(-50%) scaleY(-.61) skewX(1.5deg)}}
@keyframes kage-yure{0%{transform:translateX(-50%) scaleY(-.6) scaleX(1)}25%{transform:translateX(-50%) scaleY(-.56) scaleX(1.05) skewX(-2deg)}55%{transform:translateX(-50%) scaleY(-.62) scaleX(.97) skewX(1.5deg)}100%{transform:translateX(-50%) scaleY(-.6) scaleX(1)}}
/* 乾き：--kawaki 0（ぬれている）→ 1（乾きかけ）。大きさは半分まで、ふちも薄くなる */
.mizutamari{transform:scale(calc(1 - var(--kawaki,0)*.5));transform-origin:50% 60%;transition:transform .6s ease-out}
.mizutamari::before{opacity:calc(1 - var(--kawaki,0)*.5)}
.mizutamari i{z-index:2}
@media(max-width:820px){
  .pg-contact .p-head{padding-bottom:118px}
  .mizutamari{width:230px;height:72px;bottom:18px;right:6%}
  .mizutamari .kage{width:66px;height:100px;top:66px}
}

/* ===== v12 ===== */
/* 文字のにじみ対策：紙の粒子を文字より下へ（前は全体の一番上に重なり、文字までざらついて見えた） */
body::after{z-index:-1}
/* 説明文の薄墨を少し濃く。細い書体でも、ぼやけず読めるように */
:root{--usuzumi:#454c53}
/* 水たまりを見つけやすく：水面を少し濃く、ふちをはっきり、波紋も濃く */
.mizutamari::before{border-color:rgba(74,127,174,.5);
  background:radial-gradient(ellipse at 50% 40%,rgba(74,127,174,.18),rgba(74,127,174,.08) 65%,rgba(74,127,174,.04))}
.mizutamari i{border-color:rgba(74,127,174,.8)}
/* 映り込みも濃く、くっきり */
.mizutamari .kage{background:#2f5f8a}
.mizutamari .kage.mie{opacity:.55;filter:blur(.3px)}
/* 文字のにじみ対策②：文字の入った箱は傾けない（0.25度でも、傾けると文字の輪郭がぼやける）。傾きは写真・証明書だけに残す */
.p-head .wrap{transform:none}
.hashira div:nth-child(2){transform:translateY(8px)}
/* 製品紹介の見出し「ルブリコーティングのこと。」は、スマホでも1行に収める（「こと。」だけが次の行に落ちないように） */
@media(max-width:480px){ .pg-product .p-head h1{font-size:min(28px,6.5vw);letter-spacing:.06em} }