/* 本番トップ（案3・音更電設型を移植 2026-09-28）。寸法は1440幅の実測値を --u（1px相当）で写す */
:root{
  --navy:#15233b; --navy2:#22344f; --ink:#111827; --gray:#eff0f2; --rule:#d5d9e0;
  --gold:#c9a55c; --white:#fff;
  --u:calc(100vw / 1440);
  --jp:"Noto Sans JP",sans-serif; --en:"Albert Sans","Noto Sans JP",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--jp);font-weight:500;font-size:16px;line-height:1.8;letter-spacing:.02em;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.vt{writing-mode:vertical-rl;text-orientation:mixed}

/* ===== 固定の問い合わせ（音更電設のスクロール後ピル型ナビ） ===== */
.pill{position:fixed;z-index:50;top:14px;right:16px;display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--rule);border-radius:999px;padding:5px 5px 5px 18px}
.pill a{text-decoration:none;font-weight:700;font-size:14px;line-height:1}
.pill .tel{font-family:var(--en);font-weight:800;font-size:17px;letter-spacing:.02em;padding:10px 12px 10px 0}
.pill .tel small{font-family:var(--jp);font-size:11px;font-weight:500;margin-right:6px;color:#4b5563}
.pill .form{background:var(--navy);color:#fff;border-radius:999px;padding:14px 20px}

/* ===== ファーストビュー ===== */
.kv{--k:min(calc(100vw / 1440),calc(100svh / 1040));position:relative;height:100svh;min-height:640px;overflow:hidden;background:#fff}
.kv-beam{position:absolute;inset:0;background:url(/images/works/room-03.jpg) center/cover;filter:grayscale(1) blur(10px) brightness(1.1);clip-path:polygon(47% 13%,100% 13%,100% 58%,14% 92%);opacity:.3}
.kv-beam::after{content:"";position:absolute;inset:0;background:#e9ebef;mix-blend-mode:multiply}
.kv-ellipse{position:absolute;left:calc(232 * var(--k));top:calc(560 * var(--k));width:calc(1300 * var(--u));height:calc(470 * var(--k));border-radius:50%;transform:rotate(-15deg);transform-origin:20% 50%;overflow:hidden;background:#d3dbe7}
.kv-ellipse img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;mix-blend-mode:multiply;filter:grayscale(1) contrast(.8);opacity:.22}
.kv-shadow,.kv-swan{position:absolute;aspect-ratio:1733/2357;width:auto;overflow:visible}
.kv-shadow{left:calc(420 * var(--k));top:calc(250 * var(--k));height:calc(760 * var(--k));opacity:.12;transform:skewX(-16deg)}
.kv-swan{left:calc(560 * var(--k));top:calc(150 * var(--k));height:calc(860 * var(--k))}
.kv-mark{position:absolute;left:0;top:calc(-6 * var(--k));width:100%;overflow:hidden;pointer-events:none}
.kv-mark__track{display:flex;width:max-content;animation:mq 60s linear infinite}
.kv-mark__track span{font-family:var(--en);font-weight:800;font-size:calc(206 * var(--u));line-height:.82;letter-spacing:-.045em;color:var(--ink);white-space:nowrap;padding-right:.3em}
@keyframes mq{to{transform:translateX(-50%)}}
.kv-logo{position:absolute;left:calc(51 * var(--k));top:calc(218 * var(--k));width:calc(213 * var(--k));margin:0;display:flex;flex-direction:column;gap:calc(10 * var(--k))}
.kv-logo img{width:calc(92 * var(--k))}
.kv-logo b{font-size:calc(48 * var(--k));line-height:1;letter-spacing:.12em;font-weight:700}
.kv-logo small{font-size:calc(13 * var(--k));line-height:1.4;letter-spacing:.08em;font-weight:500}
.kv-scroll{position:absolute;left:calc(59 * var(--k));top:calc(488 * var(--k));height:calc(82 * var(--k));border-left:1px dashed #9aa1ad}
.kv-nav{position:absolute;left:calc(51 * var(--k));top:calc(640 * var(--k));display:flex;flex-direction:row-reverse;gap:14px;margin:0;padding:0;list-style:none}
.kv-nav li{display:flex;flex-direction:column;align-items:center;gap:12px}
.kv-nav li::before{content:"";width:12px;height:12px;border-radius:50%;background:#dfe2e7}
.kv-nav a{writing-mode:vertical-rl;text-decoration:none;font-size:15px;font-weight:700;letter-spacing:.12em}
.kv-nav li:hover::before{background:var(--gold)}
.kv-catch{position:absolute;right:calc(56 * var(--u));top:calc(206 * var(--k));margin:0;font-size:calc(34 * var(--k));font-weight:700;line-height:1.5;letter-spacing:.14em;color:var(--ink)}
.kv-catch span{display:block}
.kv-catch span+span{margin-top:calc(60 * var(--k))}
.kv-badge{position:absolute;right:calc(150 * var(--u));top:calc(640 * var(--k));width:calc(236 * var(--k));aspect-ratio:1;border-radius:50%;background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;line-height:1.2}
.kv-badge small{font-size:calc(15 * var(--k));letter-spacing:.1em}
.kv-badge b{font-family:var(--en);font-weight:800;font-size:calc(50 * var(--k));color:var(--gold);letter-spacing:-.02em;margin:calc(6 * var(--k)) 0}
.kv-badge b i{font-style:normal;font-family:var(--jp);font-size:.4em;font-weight:700}
.kv-doors{position:absolute;left:calc(300 * var(--k));bottom:calc(64 * var(--k));display:flex;gap:12px;z-index:3}
.door{display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:10px 26px;border-radius:999px;text-decoration:none;font-weight:700;font-size:17px;line-height:1.3}
.door small{font-size:12px;font-weight:500}
.door--biz{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.door--home{background:var(--navy);color:#fff;border:2px solid var(--navy)}
.door--biz:hover{background:var(--gold);border-color:var(--gold)}
.door--home:hover{background:var(--navy2)}

/* ===== 見出しの目印（音更電設の黄色い丸を金の小さい丸に） ===== */
.ttl{display:flex;align-items:center;gap:14px;margin:0;font-size:18px;font-weight:700;letter-spacing:.08em;line-height:1.4}
.ttl::before{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--gold);box-shadow:inset -6px -6px 0 rgba(0,0,0,.08)}

/* ===== しごと（写真が止まって、文が流れる） ===== */
.intro{position:relative;padding-top:calc(90 * var(--u))}
.intro .ttl{margin-left:calc(125 * var(--u));margin-bottom:calc(40 * var(--u))}
.intro-frame{position:relative;clip-path:inset(0 0 0 0 round calc(180 * var(--u)) calc(180 * var(--u)) 0 0);background:var(--navy)}
.intro-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.intro-sticky img{width:100%;height:100%;object-fit:cover;object-position:30% 55%;filter:grayscale(1) contrast(1.1);mix-blend-mode:luminosity;opacity:.4}
.intro-text{position:relative;margin-top:-100vh;margin-top:-100svh;padding:calc(460 * var(--u)) 0 calc(420 * var(--u)) calc(826 * var(--u));color:#fff}
.intro-text p{margin:0 0 calc(80 * var(--u));font-size:20px;line-height:2.3;letter-spacing:.12em}
.intro-text .bar{display:flex;align-items:center;gap:24px;margin:calc(40 * var(--u)) 0 0}
.intro-text .bar::before{content:"";width:72px;border-top:1px solid #fff}

/* ===== 会社のこと（灰色の地・縦の大見出し） ===== */
.about{position:relative;background:var(--gray);padding:calc(260 * var(--u)) calc(125 * var(--u)) calc(220 * var(--u));overflow:hidden}
.about-glow{position:absolute;border-radius:50%;background:#d6dce6;filter:blur(40px);transform:rotate(-30deg)}
.about-glow.g1{width:calc(700 * var(--u));height:calc(360 * var(--u));right:calc(-120 * var(--u));top:calc(160 * var(--u))}
.about-glow.g2{width:calc(260 * var(--u));height:calc(150 * var(--u));left:calc(300 * var(--u));top:calc(80 * var(--u))}
.about-head{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px}
.about-head h2{grid-column:2;grid-row:1/3;margin:0;font-size:calc(84 * var(--u));line-height:1.3;letter-spacing:.1em;font-weight:700;color:var(--navy);margin-right:calc(60 * var(--u))}
.about-lead{grid-column:1;grid-row:2;max-width:31em}
.about-lead .mark{display:flex;align-items:center;gap:14px;margin:0 0 28px;font-size:16px;font-weight:700;letter-spacing:.08em}
.about-lead .mark::before{content:"";width:26px;height:26px;border-radius:50%;background:var(--gold)}
.about-lead p{margin:0;font-size:16px;line-height:2.2}
.about-sub{position:relative;margin:calc(150 * var(--u)) 0 calc(70 * var(--u));font-size:clamp(20px,calc(29 * var(--u)),29px);line-height:2.1;letter-spacing:.08em;font-weight:700}
.doors2{position:relative;display:flex;gap:calc(88 * var(--u));padding-left:calc(45 * var(--u))}
.card{position:relative;display:block;width:calc(506 * var(--u));min-width:300px;padding:calc(43 * var(--u));background:#fff;border-radius:30px;text-decoration:none;box-shadow:0 20px 40px rgba(21,35,59,.08);transition:transform .4s}
.card:hover{transform:translateY(-6px)}
.card-top{display:flex;justify-content:space-between;min-height:calc(260 * var(--u))}
.card-top p{margin:0;font-size:14px;line-height:1.9;max-width:15em}
.card-top p b{display:block;font-size:20px;margin-bottom:8px;color:var(--navy)}
.card h3{margin:0;font-size:22px;line-height:1.2;letter-spacing:.14em}
.card img{width:100%;aspect-ratio:420/250;object-fit:cover;border-radius:14px;margin-top:20px}
.card .go{display:inline-block;margin-top:18px;font-weight:700;border-bottom:2px solid var(--gold);padding-bottom:2px}

/* ===== 実績（紺の地・扇に広がるカード） ===== */
.works{position:relative;background:var(--navy);color:#fff;padding:calc(300 * var(--u)) 0 calc(200 * var(--u));overflow:hidden}
.works::before{content:"";position:absolute;left:-10%;right:-10%;top:calc(-120 * var(--u));height:calc(300 * var(--u));background:var(--gray);border-radius:0 0 50% 50%}
.works-head{position:relative;display:flex;gap:calc(110 * var(--u));padding:0 calc(120 * var(--u)) 0 calc(210 * var(--u))}
.boxed{position:relative;flex:none;margin:0;transform:rotate(-3deg)}
.boxed span{display:table;background:#fff;color:var(--navy);font-weight:700;font-size:calc(92 * var(--u));line-height:1.08;letter-spacing:-.01em;padding:0 calc(14 * var(--u)) calc(4 * var(--u));margin-bottom:calc(6 * var(--u))}
.boxed span.en{font-family:var(--en);font-weight:800}
.boxed .seal{position:absolute;margin:0;right:calc(-40 * var(--u));bottom:calc(-70 * var(--u));width:calc(140 * var(--u));min-width:112px;padding:10px;aspect-ratio:1;border-radius:50%;background:var(--gold);color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;text-align:center;font-weight:700;transform:rotate(8deg)}
.boxed .seal b{font-family:var(--en);font-size:30px;line-height:1}
.boxed .seal b i{font-style:normal;font-family:var(--jp);font-size:14px}
.boxed .seal small{font-size:11px;line-height:1.35;margin-top:4px}
.works-text h2{margin:0 0 28px;font-size:clamp(20px,calc(26 * var(--u)),26px);line-height:1.7;letter-spacing:.06em}
.works-text ul{margin:0;padding:0;list-style:none;font-size:16px;line-height:2.1}
.works-text li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin:0 12px 3px 0}
.fan{position:relative;display:flex;justify-content:center;margin-top:calc(90 * var(--u));padding:40px 0 60px}
.fcard{position:relative;flex:none;width:calc(290 * var(--u));min-width:250px;margin:0 calc(-22 * var(--u));background:#fff;color:var(--ink);border-radius:26px 26px 90px 90px / 26px 26px 60px 60px;padding:18px 18px 34px;transform-origin:50% 120%}
.fcard .no{position:absolute;left:-14px;top:-18px;width:54px;height:54px;border-radius:50%;background:var(--navy);border:2px solid #fff;color:var(--gold);display:grid;place-items:center;font-family:var(--en);font-weight:800;font-size:18px;z-index:2}
.fcard .ph{position:relative}
.fcard .ph img.a{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:16px}
.fcard .ph img.b{position:absolute;right:-8px;bottom:-16px;width:46%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:4px solid #fff}
.fcard .ph .cap{position:absolute;left:10px;top:10px;background:#fff;color:var(--navy);font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;line-height:1.8}
.fcard .ph .cap-b{left:auto;top:auto;right:-4px;bottom:-12px;z-index:1}
.fcard h3{margin:26px 4px 6px;font-size:18px;line-height:1.5}
.fcard p{margin:0 4px;font-size:14px;line-height:1.8;color:#374151}
.fcard.txt{padding-top:44px}
.fcard.txt ul{margin:14px 4px 0;padding:0;list-style:none;font-size:15px;line-height:2.15;font-weight:700;color:var(--navy)}
.fcard.txt li{border-bottom:1px dashed var(--rule)}
@media (min-width:1280px){
  .fcard{width:calc(230 * var(--u));min-width:210px;margin:0 calc(-8 * var(--u))}
  .fcard h3{font-size:16px}
  .fcard:nth-child(1){transform:translateY(50px) rotate(-10deg);z-index:8}
  .fcard:nth-child(2){transform:translateY(14px) rotate(-5deg);z-index:9}
  .fcard:nth-child(3){z-index:10}
  .fcard:nth-child(4){transform:translateY(14px) rotate(5deg);z-index:9}
  .fcard:nth-child(5){transform:translateY(50px) rotate(10deg);z-index:8}
}
/* 1279px以下：扇に広げると両端が切れるので、横にスクロールする並びにする */
@media (max-width:1279px){
  .fan{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:40px 24px 40px 38px;gap:20px}
  .fcard{margin:0;width:260px;min-width:0;scroll-snap-align:center;transform:none!important}
}
.works-more{position:relative;display:flex;justify-content:center;margin-top:30px}
.works-more a{display:inline-flex;align-items:center;gap:14px;text-decoration:none;font-weight:700;padding:10px 4px;border-bottom:1px dashed rgba(255,255,255,.6)}

/* ===== 法人の帯（音更電設の SPECIAL CONTENTS の暗い写真2枚） ===== */
.biz{position:relative;display:grid;grid-template-columns:40% 60%;height:calc(1210 * var(--u));min-height:620px;background:#0b1322;color:#fff;overflow:hidden}
.biz figure{margin:0;position:relative;overflow:hidden}
.biz figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.5)}
.biz figure:first-child img{object-position:50% 70%}
.biz figure:nth-child(2) img{object-position:40% 50%;filter:grayscale(.2) brightness(.42)}
.biz figure::after{content:"";position:absolute;inset:0;background:var(--navy);mix-blend-mode:multiply;opacity:.55}
.biz-body{position:absolute;left:calc(96 * var(--u));bottom:calc(170 * var(--u));z-index:2}
.biz-body .meta{margin:0 0 18px;font-size:16px;letter-spacing:.08em}
.biz-body .meta i{font-style:normal;margin:0 12px;opacity:.6}
.biz-body h2{margin:0 0 calc(40 * var(--u));font-weight:300;font-size:calc(96 * var(--u));line-height:1.15;letter-spacing:.02em}
.biz-body ul{margin:0 0 36px;padding:0;list-style:none;font-size:16px;line-height:2.2}
.biz-body .btn{display:inline-flex;align-items:center;min-height:60px;padding:0 34px;border-radius:999px;background:#fff;color:var(--navy);text-decoration:none;font-weight:700}
.biz-body .btn:hover{background:var(--gold)}

/* ===== 相談の帯 ===== */
.cta{background:#fff;padding:calc(130 * var(--u)) calc(120 * var(--u));display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.cta h2{margin:0 0 20px;font-size:clamp(22px,calc(34 * var(--u)),34px);line-height:1.6;letter-spacing:.06em}
.cta p{margin:0;max-width:32em}
.cta-act{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cta-tel{text-decoration:none;font-family:var(--en);font-weight:800;font-size:clamp(40px,calc(64 * var(--u)),64px);line-height:1;letter-spacing:-.01em;color:var(--navy)}
.cta-tel small{display:block;font-family:var(--jp);font-weight:500;font-size:14px;letter-spacing:.06em;margin-bottom:10px;color:#374151}
.cta-form{display:inline-flex;align-items:center;min-height:64px;padding:0 40px;border-radius:999px;background:var(--navy);color:#fff;text-decoration:none;font-weight:700;font-size:17px}
.cta-form:hover{background:var(--navy2)}

/* ===== フッター（大きな白い社名） ===== */
.foot{background:var(--gray);padding:calc(70 * var(--u)) calc(96 * var(--u)) 40px;position:relative;overflow:hidden}
.foot-mark{font-family:var(--en);font-weight:800;font-size:calc(300 * var(--u));line-height:.8;letter-spacing:-.05em;color:#fff;margin:0;white-space:nowrap}
.foot-catch{position:absolute;left:calc(96 * var(--u));top:calc(130 * var(--u));margin:0;font-size:calc(30 * var(--u));font-weight:700;line-height:1.5;letter-spacing:.14em}
.foot-logo{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:calc(40 * var(--u));font-weight:700;font-size:22px;letter-spacing:.14em}
.foot-logo img{width:44px}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 28px;margin:50px 0 0;padding:26px 0;border-top:1px solid #c9ced6;border-bottom:1px solid #c9ced6;list-style:none;font-size:14px}
.foot-nav a{text-decoration:none;display:inline-block;padding:6px 0}
.foot-info{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:24px;font-size:14px}
.foot-info b{font-size:15px}
.foot small.copy{display:block;margin-top:16px;font-size:12px;color:#4b5563}

/* ===== タブレット以下 ===== */
@media (max-width:1023px){
  .kv-nav{display:none}
}
/* タブレット：縦長の画面で下に空白が残らないよう、最初の画面の高さを中身に合わせる */
@media (min-width:768px) and (max-width:1023px){
  .kv{height:calc(1040 * var(--k));min-height:0}
  .intro-text{padding-left:40%;padding-right:40px}
  .intro-text p{font-size:17px;letter-spacing:.08em}
}
/* ===== スマホ（音更電設のSP：社名2段・人物中央・縦のコピー右） ===== */
@media (max-width:767px){
  :root{--s:calc(100vw / 375)}
  .pill{top:8px;right:8px;padding:4px 4px 4px 12px}
  .pill .tel{font-size:15px;padding:8px 8px 8px 0}
  .pill .tel small{display:none}
  .pill .form{padding:12px 14px;font-size:13px}
  .kv{height:calc(100svh - 60px - env(safe-area-inset-bottom,0px));min-height:600px;max-height:900px}
  .kv-mark{top:calc(58 * var(--s))}
  .kv-mark__track span{font-size:calc(96 * var(--s))}
  .kv-beam{clip-path:polygon(40% 18%,100% 18%,100% 55%,0 80%,0 62%)}
  .kv-logo{left:calc(16 * var(--s));top:calc(150 * var(--s));width:auto;gap:4px}
  .kv-logo img{width:calc(40 * var(--s))}
  .kv-logo b{font-size:calc(24 * var(--s))}
  .kv-logo small{font-size:10px}
  .kv-scroll{display:none}
  .kv-ellipse{left:calc(-60 * var(--s));top:calc(360 * var(--s));width:calc(520 * var(--s));height:calc(250 * var(--s));transform:rotate(-24deg)}
  .kv-shadow{left:calc(-40 * var(--s));top:calc(270 * var(--s));height:calc(340 * var(--s))}
  .kv-swan{left:calc(8 * var(--s));top:calc(200 * var(--s));height:calc(400 * var(--s))}
  .kv-catch{right:calc(12 * var(--s));top:calc(156 * var(--s));font-size:calc(20 * var(--s));letter-spacing:.08em;line-height:1.45}
  .kv-catch span+span{margin-top:calc(34 * var(--s))}
  .kv-badge{right:calc(10 * var(--s));top:auto;bottom:calc(150 * var(--s));width:calc(112 * var(--s))}
  .kv-badge small{font-size:10px}
  .kv-badge b{font-size:calc(24 * var(--s));margin:2px 0}
  .kv-doors{left:16px;right:16px;bottom:16px;flex-direction:column;gap:8px}
  .door{min-height:58px;padding:8px 22px;font-size:16px}
  .door--home{background:var(--navy);border-color:var(--navy)}

  .intro{padding-top:56px}
  .intro .ttl{margin-left:16px;margin-bottom:20px}
  .intro-frame{clip-path:inset(0 0 0 0 round 56px 56px 0 0)}
  .intro-text{padding:55vh 20px 30vh 20px}
  .intro-text p{font-size:17px;line-height:2.1;letter-spacing:.08em;margin-bottom:48px}

  .about{padding:80px 20px 80px}
  .about-head{grid-template-columns:1fr;gap:32px}
  .about-head h2{grid-column:1;grid-row:1;font-size:calc(46 * var(--s));margin:0 auto 0 0;height:auto;justify-self:end}
  .about-lead{grid-row:2}
  .about-sub{margin:56px 0 32px;font-size:19px;line-height:1.9}
  .doors2{flex-direction:column;gap:24px;padding:0}
  .card{width:100%;min-width:0;padding:24px}
  .card-top{min-height:0;gap:12px}

  .works{padding:120px 0 80px}
  .works::before{top:-50px;height:110px}
  .works-head{flex-direction:column;gap:56px;padding:0 20px}
  .boxed span{font-size:calc(52 * var(--s))}
  .boxed .seal{right:-10px;bottom:-50px}
  .fan{padding:40px 20px 40px 34px;margin-top:40px}

  .biz{grid-template-columns:1fr;grid-template-rows:38% 62%;height:auto;min-height:760px}
  .biz-body{left:20px;right:20px;bottom:44px}
  .biz-body h2{font-size:40px;margin-bottom:20px}
  .biz-body ul{font-size:15px;line-height:2}

  .cta{grid-template-columns:1fr;padding:72px 20px}
  .foot{padding:40px 20px 30px}
  .foot-mark{font-size:calc(150 * var(--s))}
  .foot-catch{position:static;margin-top:20px;font-size:20px;writing-mode:horizontal-tb}
  .foot-logo{justify-content:flex-start;margin-top:24px}
}
@media (prefers-reduced-motion:reduce){
  .kv-mark__track{animation:none}
  *{transition:none!important;scroll-behavior:auto!important}
}

/* ===== スマホ画面下の固定ボタン（電話／お問い合わせ／LINE。旧トップから引き継ぎ） ===== */
.mobile-bar{display:none}
@media (max-width:767px){
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
  .mobile-bar{display:grid;grid-template-columns:1fr 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:55;height:calc(60px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:#fff;border-top:1px solid var(--rule)}
  .mobile-bar>*{display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;text-decoration:none}
  .mobile-bar-tel{color:var(--navy)}
  .mobile-bar-contact{background:var(--navy);color:#fff}
  .mobile-bar-line{background:#06C755;color:#fff}
}