/* ============================================================
   サンプル行政書士事務所（見本）
   白と黒だけ。スイス・タイポグラフィの文字組み。
   12カラム／罫線は1px・区切りにだけ使う（見出しの下線・縦の色帯は使わない）
   ============================================================ */

:root{
  --ink:#0b0b0b;
  --paper:#ffffff;
  --gray:#f2f2f0;
  --sub:#5f5f5f;
  --rule:#0b0b0b;
  --hair:#d6d6d3;
  --en:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --ja:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  --gut:40px;
  --max:1360px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ja);font-size:15px;line-height:1.9;letter-spacing:.03em;
  font-feature-settings:"palt" 0;
  word-break:auto-phrase;line-break:strict;overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p,ul,ol,figure,table{margin:0;padding:0;}
ul,ol{list-style:none;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);}

/* ---------- 見本の帯 ---------- */
.demo{background:var(--ink);color:#fff;font-size:12px;line-height:1.6;text-align:center;padding:7px 16px;letter-spacing:.04em;}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  height:52px;padding:0 28px;font-size:14px;font-weight:500;letter-spacing:.08em;
  border:1px solid var(--ink);transition:background-color .35s var(--ease),color .35s var(--ease);
  white-space:nowrap;cursor:pointer;font-family:var(--ja);
}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover{background:#fff;color:var(--ink);}
.btn-line{background:transparent;color:var(--ink);font-family:var(--en);font-size:17px;font-weight:500;letter-spacing:.02em;}
.btn-line:hover{background:var(--ink);color:#fff;}
.btn-white{background:#fff;color:var(--ink);border-color:#fff;}
.btn-white:hover{background:transparent;color:#fff;}

/* ---------- ヘッダー ---------- */
.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid transparent;transition:border-color .4s;}
body.scrolled .hd{border-bottom-color:var(--hair);}
.hd-in{display:flex;align-items:center;height:76px;gap:32px;}
.logo{display:flex;align-items:baseline;gap:10px;margin-right:auto;line-height:1;}
.logo-en{font-family:var(--en);font-weight:600;font-size:26px;letter-spacing:-.03em;}
.logo-ja{font-size:12px;font-weight:500;letter-spacing:.12em;}
.nav{display:flex;align-items:center;gap:28px;font-size:13px;font-weight:500;letter-spacing:.06em;}
.nav a{position:relative;padding:6px 0;transition:opacity .3s;}
.nav a:hover{opacity:.5;}
.nav-tel{font-family:var(--en);font-size:15px;font-weight:500;letter-spacing:.02em;}
.hd-cta{height:44px;padding:0 22px;font-size:13px;}
.menu-btn{display:none;}

/* ---------- 表紙 ---------- */
.hero{padding:28px 0 0;}
.hero-meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  border-top:1px solid var(--rule);padding-top:12px;
  font-family:var(--en);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
}
.hero-meta span:last-child{font-family:var(--ja);text-transform:none;letter-spacing:.1em;}
.hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:40px;align-items:stretch;}
.hero-type{grid-column:1 / span 7;display:flex;flex-direction:column;justify-content:space-between;gap:48px;}
.hero-en{
  font-family:var(--en);font-weight:500;font-size:clamp(64px,10.2vw,148px);
  line-height:.9;letter-spacing:-.045em;
}
.line{display:block;overflow:hidden;padding-bottom:.06em;}
.line > span{display:block;}
.hero-copy h1{font-size:clamp(24px,2.35vw,34px);font-weight:700;line-height:1.55;letter-spacing:.06em;}
.hero-lead{margin-top:20px;max-width:34em;color:var(--sub);font-size:15px;}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
.hero-fig{grid-column:8 / span 5;overflow:hidden;min-height:560px;position:relative;background:#ddd;}
.hero-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%;}

.hero-index{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:64px;
}
.hero-index li{border-top:1px solid var(--rule);}
.hero-index a{display:grid;grid-template-columns:auto 1fr;column-gap:14px;padding:14px 0 18px;transition:opacity .3s;}
.hero-index a:hover{opacity:.55;}
.hero-index .n{font-family:var(--en);font-size:13px;font-weight:500;grid-row:span 2;padding-top:5px;}
.hero-index .t{font-size:18px;font-weight:700;letter-spacing:.06em;line-height:1.5;}
.hero-index .e{font-family:var(--en);font-size:12px;color:var(--sub);letter-spacing:.04em;}

/* ---------- セクション共通 ---------- */
.sec{padding:140px 0 0;}
.sec-gray{background:var(--gray);padding-bottom:120px;margin-top:140px;}
.sec-gray + .sec{padding-top:140px;}
.sec-head{
  display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;
  border-top:1px solid var(--rule);padding-top:14px;margin-bottom:64px;
}
.sec-no{grid-column:1 / span 3;align-self:start;font-family:var(--en);font-size:13px;font-weight:500;display:flex;gap:16px;align-items:baseline;}
.sec-no span{font-family:var(--ja);font-size:14px;font-weight:700;letter-spacing:.12em;}
.sec-en{
  grid-column:4 / span 9;font-family:var(--en);font-weight:500;
  font-size:clamp(56px,8.4vw,124px);line-height:.88;letter-spacing:-.045em;margin-top:28px;
}

/* ---------- 業務内容 ---------- */
.svc-lead{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;margin-bottom:72px;}
.svc-fig{grid-column:1 / span 7;overflow:hidden;aspect-ratio:16/10;background:#ddd;}
.svc-fig img{width:100%;height:100%;object-fit:cover;}
.svc-intro{grid-column:9 / span 4;font-size:17px;line-height:2;font-weight:500;letter-spacing:.05em;}

.svc{
  display:grid;grid-template-columns:repeat(12,1fr);gap:24px;
  border-top:1px solid var(--hair);padding:36px 0 44px;
  transition:background-color .5s var(--ease);
}
.svc:first-child{border-top-color:var(--rule);}
.svc-list{border-bottom:1px solid var(--rule);}
.svc-n{grid-column:1 / span 1;font-family:var(--en);font-size:15px;font-weight:500;padding-top:6px;}
.svc-t{grid-column:2 / span 3;font-size:28px;font-weight:700;letter-spacing:.06em;line-height:1.35;}
.svc-t span{display:block;margin-top:8px;font-family:var(--en);font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--sub);}
.svc-d{grid-column:5 / span 4;}
.svc-i{grid-column:9 / span 4;font-size:14px;}
.svc-i li{padding:7px 0;border-top:1px solid var(--hair);line-height:1.6;}
.svc-i li:first-child{border-top:0;padding-top:2px;}

/* ---------- 数字 ---------- */
.facts{padding-top:120px;}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.fact{border-top:1px solid var(--rule);padding-top:14px;}
.fact-n{font-family:var(--en);font-weight:500;font-size:clamp(64px,7.4vw,108px);line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;}
.fact-n small{font-family:var(--ja);font-size:18px;font-weight:700;letter-spacing:.06em;margin-left:8px;}
.fact-l{margin-top:14px;font-size:14px;font-weight:500;letter-spacing:.06em;}

.band{margin-top:120px;height:min(62vh,640px);overflow:hidden;background:#ccc;}
.band img{width:100%;height:100%;object-fit:cover;}

/* ---------- 流れ ---------- */
.proc{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start;}
.proc-fig{grid-column:1 / span 4;position:sticky;top:110px;overflow:hidden;aspect-ratio:4/5;background:#ddd;}
.proc-fig img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;}
.steps{grid-column:6 / span 7;border-bottom:1px solid var(--rule);}
.step{display:grid;grid-template-columns:72px 1fr 150px;gap:24px;padding:30px 0 34px;border-top:1px solid var(--hair);}
.step:first-child{border-top-color:var(--rule);}
.step-n{font-family:var(--en);font-size:40px;font-weight:500;line-height:1;letter-spacing:-.04em;}
.step h3{font-size:20px;font-weight:700;letter-spacing:.06em;line-height:1.5;margin-bottom:8px;}
.step p{color:var(--sub);}
.step .step-n{color:var(--ink);}
.step-t{font-size:13px;font-weight:500;color:var(--ink) !important;text-align:right;padding-top:4px;letter-spacing:.04em;}

/* ---------- 料金 ---------- */
.fee table{width:100%;border-collapse:collapse;}
.fee th,.fee td{text-align:left;vertical-align:baseline;padding:20px 0;border-top:1px solid var(--hair);font-weight:400;}
.fee thead th{font-size:12px;font-weight:500;color:var(--sub);letter-spacing:.1em;padding:0 0 12px;border-top:0;}
.fee tbody tr:first-child th,.fee tbody tr:first-child td{border-top-color:var(--rule);}
.fee tbody tr:last-child th,.fee tbody tr:last-child td{border-bottom:1px solid var(--rule);}
.fee tbody th{width:calc((100% - 264px) / 12 * 3 + 72px);font-size:17px;font-weight:700;letter-spacing:.05em;padding-right:24px;}
.fee td{color:var(--sub);padding-right:24px;}
.fee td.yen{text-align:right;color:var(--ink);font-family:var(--en);font-size:22px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;padding-right:0;}
.fee thead th:last-child{text-align:right;}
.fee-note{margin-top:22px;font-size:13px;color:var(--sub);max-width:52em;}

/* ---------- よくある質問 ---------- */
.faq{border-bottom:1px solid var(--rule);margin-left:calc((100% - 11 * 24px) / 12 * 3 + 72px);}
.faq details{border-top:1px solid var(--hair);}
.faq details:first-child{border-top-color:var(--rule);}
.faq summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:48px 1fr 24px;align-items:baseline;
  padding:26px 0;font-size:19px;font-weight:700;letter-spacing:.05em;line-height:1.55;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";justify-self:end;align-self:center;
  font-family:var(--en);font-weight:400;font-size:26px;line-height:1;
  transition:transform .4s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq .q{font-family:var(--en);font-weight:500;font-size:20px;}
.faq .a{padding:0 48px 30px;max-width:calc(48px + 44em);}
.faq .a p{color:var(--sub);}

/* ---------- 事務所案内 ---------- */
.office{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start;}
.office-l{grid-column:1 / span 6;}
.office-fig{overflow:hidden;aspect-ratio:3/2;background:#ddd;}
.office-fig img{width:100%;height:100%;object-fit:cover;}
.greet{margin-top:32px;max-width:36em;}
.greet p{font-size:15px;}
.greet-name{margin-top:20px;font-size:20px !important;font-weight:700;letter-spacing:.14em;}
.greet-name span{display:block;font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--sub);margin-bottom:2px;}
.info{grid-column:8 / span 5;border-collapse:collapse;width:100%;border-bottom:1px solid var(--rule);}
.info th,.info td{text-align:left;vertical-align:top;padding:16px 0;border-top:1px solid var(--hair);}
.info tr:first-child th,.info tr:first-child td{border-top-color:var(--rule);}
.info th{width:7.5em;font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--sub);padding-top:18px;}
.info td{font-size:15px;}
.info a{font-family:var(--en);font-size:17px;font-weight:500;}

/* ---------- お問い合わせ ---------- */
.contact{position:relative;margin-top:140px;padding:120px 0 120px;background:var(--ink);color:#fff;overflow:hidden;}
.contact-bg{position:absolute;inset:0;}
.contact-bg img{width:100%;height:100%;object-fit:cover;opacity:.16;}
.contact .wrap{position:relative;}
.sec-head-inv{border-top-color:rgba(255,255,255,.9);}
.ct{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start;}
.ct-l{grid-column:1 / span 5;}
.ct-h{font-size:22px;font-weight:700;line-height:1.7;letter-spacing:.06em;}
.ct-tel-l{margin-top:44px;font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.7);}
.ct-tel{display:inline-block;font-family:var(--en);font-weight:500;font-size:clamp(40px,4.4vw,64px);line-height:1.1;letter-spacing:-.03em;margin-top:6px;}
.ct-time{margin-top:8px;font-size:13px;color:rgba(255,255,255,.7);}

.form{grid-column:7 / span 6;}
.f-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.f-row{display:block;margin:0 0 26px;padding:0;border:0;min-width:0;}
.f-row > span,.f-row legend{display:block;font-size:12px;font-weight:500;letter-spacing:.1em;color:rgba(255,255,255,.75);margin-bottom:8px;padding:0;}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{
  width:100%;background:transparent;color:#fff;border:0;border-bottom:1px solid rgba(255,255,255,.55);
  font:inherit;font-size:16px;padding:8px 0 10px;border-radius:0;outline:none;transition:border-color .3s;
}
.form textarea{resize:vertical;border:1px solid rgba(255,255,255,.55);padding:12px 14px;}
.form input:focus,.form textarea:focus{border-color:#fff;}
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chips label{position:relative;cursor:pointer;}
.chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;}
.chips label{display:inline-flex;align-items:center;height:40px;padding:0 18px;border:1px solid rgba(255,255,255,.55);font-size:14px;transition:background-color .3s,color .3s;}
.chips label:has(input:checked){background:#fff;color:var(--ink);border-color:#fff;}
.chips label:has(input:focus-visible){outline:2px solid #fff;outline-offset:2px;}
.f-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:8px;}
.f-note{font-size:12px;color:rgba(255,255,255,.65);}

/* ---------- フッター ---------- */
.ft{padding:72px 0 40px;}
.ft-big{font-family:var(--en);font-weight:500;font-size:clamp(56px,15.9vw,230px);line-height:.85;letter-spacing:-.055em;white-space:nowrap;}
.ft-row{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:56px;border-top:1px solid var(--rule);padding-top:20px;}
.ft-addr{grid-column:1 / span 6;font-size:13px;color:var(--sub);}
.ft-name{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.08em;margin-bottom:6px;}
.ft-nav{grid-column:8 / span 5;display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;font-size:13px;font-weight:500;}
.ft-nav a:hover{opacity:.5;}
.ft-bottom{display:flex;justify-content:space-between;gap:16px;margin-top:48px;font-family:var(--en);color:var(--sub);}
.ft-bottom small{font-size:11px;letter-spacing:.04em;}

.sp-bar{display:none;}

/* ============================================================
   動き（参考：100年会モックの方式）
   同時に動かさない／距離は小さく／減速のみ
   JSが無い・動きを減らす設定の時は、最初から全部見える
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  body.js [data-r]{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
  body.js [data-r].in{opacity:1;transform:none;}
  [data-r][data-d="1"]{transition-delay:.08s;}
  [data-r][data-d="2"]{transition-delay:.16s;}
  [data-r][data-d="3"]{transition-delay:.24s;}
  [data-r][data-d="4"]{transition-delay:.32s;}

  /* 幕は中の写真に掛ける（枠に掛けるとIntersectionObserverが「見えていない」と判定して開かない） */
  body.js [data-mask] img{clip-path:inset(100% 0 0 0);transform:scale(1.12);transition:clip-path 1.2s var(--ease),transform 2.6s var(--ease);}
  body.js [data-mask].in img{clip-path:inset(0 0 0 0);transform:none;}

  body.js .hero-en .line > span{transform:translateY(105%);transition:transform 1.2s var(--ease);}
  body.js .hero-en.in .line > span{transform:none;}
  body.js .hero-en.in .line:nth-child(2) > span{transition-delay:.09s;}
  body.js .hero-en.in .line:nth-child(3) > span{transition-delay:.18s;}

  .svc-fig img,.office-fig img{transition:transform 1.4s var(--ease);}
}

/* ============================================================
   タブレット
   ============================================================ */
@media (max-width:1100px){
  :root{--gut:32px;}
  .nav{gap:20px;}
  .nav-tel{display:none;}
  .svc-t{grid-column:2 / span 4;}
  .svc-d{grid-column:6 / span 7;}
  .svc-i{grid-column:6 / span 7;display:grid;grid-template-columns:1fr 1fr;column-gap:24px;}
  .svc-i li:nth-child(2){border-top:0;padding-top:2px;}
  .step{grid-template-columns:56px 1fr;}
  .step-t{grid-column:2;text-align:left;padding-top:0;}
  .faq{margin-left:0;}
}

/* ============================================================
   スマホ
   ============================================================ */
@media (max-width:860px){
  :root{--gut:20px;}
  body{font-size:15px;padding-bottom:60px;}
  html{scroll-padding-top:68px;}
  .hd-in{height:62px;gap:12px;}
  .logo-en{font-size:23px;}
  .logo-ja{font-size:11px;}
  .hd-cta{display:none;}
  .menu-btn{
    display:flex;flex-direction:column;justify-content:center;gap:7px;width:44px;height:44px;margin-right:-10px;
    background:none;border:0;padding:0 10px;cursor:pointer;
  }
  .menu-btn span:not(.sr){display:block;height:1.5px;background:var(--ink);transition:transform .4s var(--ease);}
  .nav{
    position:fixed;left:0;right:0;top:0;bottom:0;z-index:-1;background:#fff;
    flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:80px var(--gut) 40px;
    font-size:22px;font-weight:700;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
  }
  .nav a{width:100%;padding:14px 0;border-top:1px solid var(--hair);}
  .nav a:first-child{border-top-color:var(--rule);}
  .nav-tel{display:block;font-size:26px;}
  body.menu-open{overflow:hidden;}
  body.menu-open .nav{opacity:1;visibility:visible;}
  body.menu-open .menu-btn span:nth-child(1){transform:translateY(4.25px) rotate(45deg);}
  body.menu-open .menu-btn span:nth-child(2){transform:translateY(-4.25px) rotate(-45deg);}

  .hero{padding-top:16px;}
  .hero-meta{grid-template-columns:1fr 1fr;gap:4px 16px;font-size:11px;}
  .hero-grid{display:flex;flex-direction:column;gap:28px;margin-top:28px;}
  .hero-type{gap:28px;}
  .hero-en{font-size:clamp(56px,18vw,96px);}
  .hero-copy h1{font-size:23px;}
  .hero-lead{font-size:14.5px;}
  .hero-btns{margin-top:24px;}
  .hero-btns .btn{flex:1 1 100%;}
  .hero-fig{min-height:0;aspect-ratio:4/3;}
  .hero-index{grid-template-columns:1fr 1fr;gap:0 16px;margin-top:40px;}
  .hero-index .t{font-size:16px;}

  .sec{padding-top:96px;}
  .sec-gray{margin-top:96px;padding-bottom:80px;}
  .sec-gray + .sec{padding-top:96px;}
  .sec-head{display:block;margin-bottom:40px;}
  .sec-en{font-size:clamp(52px,16vw,84px);margin-top:36px;}

  .svc-lead{display:block;margin-bottom:40px;}
  .svc-intro{margin-top:24px;font-size:16px;}
  .svc{display:block;padding:28px 0 32px;}
  .svc-n{padding:0;font-size:13px;}
  .svc-t{font-size:24px;margin-top:6px;}
  .svc-d{margin-top:14px;}
  .svc-i{display:block;margin-top:16px;}
  .svc-i li:nth-child(2){border-top:1px solid var(--hair);padding-top:7px;}

  .facts{padding-top:88px;}
  .facts .wrap{grid-template-columns:1fr 1fr;gap:36px 16px;}
  .fact-n{font-size:clamp(52px,15vw,72px);}
  .fact-n small{font-size:14px;margin-left:4px;}
  .fact-l{font-size:13px;margin-top:10px;}
  .band{margin-top:88px;height:46vh;}

  .proc{display:block;}
  .proc-fig{position:relative;top:0;aspect-ratio:16/10;margin-bottom:32px;}
  .step{grid-template-columns:48px 1fr;gap:0 12px;padding:24px 0 26px;}
  .step-n{font-size:28px;}
  .step h3{font-size:18px;}

  .fee table,.fee tbody,.fee tr{display:block;}
  .fee thead{display:none;}
  .fee tr{padding:18px 0;border-top:1px solid var(--hair);}
  .fee tbody tr:first-child{border-top-color:var(--rule);}
  .fee tbody tr:last-child{border-bottom:1px solid var(--rule);}
  .fee th,.fee td,.fee tbody tr:first-child th,.fee tbody tr:first-child td{display:block;border:0 !important;padding:0;width:auto;}
  .fee tbody th{font-size:16px;width:auto;}
  .fee td{font-size:13.5px;margin-top:4px;}
  .fee td.yen{text-align:left;font-size:20px;margin-top:8px;white-space:normal;}

  .faq summary{grid-template-columns:32px 1fr 20px;font-size:16px;padding:22px 0;}
  .faq .q{font-size:17px;}
  .faq .a{padding:0 0 24px 32px;}

  .office{display:block;}
  .info{margin-top:48px;}
  .info th{width:6em;}

  .contact{margin-top:96px;padding:88px 0 80px;}
  .ct{display:block;}
  .ct-h{font-size:19px;}
  .ct-tel-l{margin-top:28px;}
  .form{margin-top:48px;}
  .f-2{grid-template-columns:1fr;gap:0;}
  .f-foot .btn{width:100%;}

  .ft{padding:56px 0 32px;}
  .ft-big{font-size:clamp(40px,15.6vw,120px);}
  .ft-row{margin-top:32px;}
  .ft-row{display:block;}
  .ft-nav{margin-top:28px;grid-template-columns:1fr 1fr;}
  .ft-bottom{flex-direction:column;gap:4px;margin-top:32px;}

  .sp-bar{
    display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:40;
    height:60px;background:var(--ink);font-size:14px;font-weight:700;letter-spacing:.08em;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .sp-bar a{display:flex;align-items:center;justify-content:center;color:#fff;}
  .sp-bar a + a{background:#fff;color:var(--ink);border-top:1px solid var(--ink);}
}

/* 改行の出し分け */
@media (max-width:860px){ br.pc{display:none;} }