/**
 * main.css — BELIMO エナジーバルブ LP 本体スタイル
 *
 * 使用箇所: index.html 全ページ（セクション別対応は下部コメントおよび
 *           CSS-JS対応表.md を参照）
 *
 * フォント: Google Fonts（Inter / DM Mono / Noto Sans JP）を index.html で読込
 *
 * セクション対応:
 *   HEADER …………… .hdr / .drawer / .lang-tog
 *   ① mv …………… .mv / .mv-net / .mv-valve
 *   ② 課題提起 ……… #pain / .pain-*
 *   ③ NUMBER BAND … .nband（CSS内）
 *   ④ STRENGTH ……… #strength / .str-*
 *   正規代理店証明 … #cert / .cert-*
 *   ⑤ MAP …………… #strength .im-c#map / .net-map
 *   ⑥ ABOUT EV …… #about / .about-* / .ev-*
 *   現場バンド ……… .field-band
 *   ⑦ APPLY ……… #apply / .apply-* / .viz
 *   ⑧ PRODUCTS …… #products / .prod-*
 *   ⑨ FLOW ………… #flow / .flow-*
 *   ⑩ FAQ …………… #faq / .faq-*
 *   ⑪ CONTACT …… #contact / .contact-* / form
 *   FOOTER ………… .ftr / .m-cta（モバイル固定CTA）
 *   RESPONSIVE …… メディアクエリ一式
 */

/* ============================================================
   BELIMO エナジーバルブ LP — 菱東産業
   Restrained / authentic BtoB. Flat, structured, photo-led.
   ============================================================ */


html, a, form, div, table, ul, ol, li, dl, h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
  border: 0 none;
}
:root{
  --ink:#13202c;
  --ink-2:#333333;
  --ink-3:#205591;
  --line:#C1C1C1;
  --line-2:#edf1f4;
  --white:#ffffff;
  --paper:#f7f4ec;
  --paper-2:#efe9dc;
  --orange:#FD8800;
  --orange-d:#FF6600;
  --orange-wash:#fff5ee;
  --orange-line:#ffd9bd;
  --blue:#00A0E9;
  --blue-d:#0082bd;
  --green:#1f8a5b;
  --green-d:#16704a;
  --green-wash:#edf6f1;
  --green-line:#bfe0cf;
  --sky-1:#f3f9fd;
  --sky-2:#e2f0f9;
  --sky-3:#cfe6f4;
  --navy:#22507D;
  --navy-2:#173c5e;
  --sans:'Noto Sans JP',-apple-system,'Hiragino Kaku Gothic ProN',sans-serif;
  --maxw:1000px;
  --pad:clamp(20px,5vw,60px);
  --contents: calc(100% - 40px);
  --contentssp: calc(100% - 30px);
}
*{
  margin:0;
  padding:0;
  list-style-type: none;  
}
html,
body,
body *{
  box-sizing:border-box;
}
header,
header *{
  box-sizing:content-box;
}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:80px;
  overflow-x:hidden;
  font-size:10px;
}
body{
  font-family:var(--sans);
  font-size: 14px;
  font-size: 1.4rem;
  color:var(--ink);
  overflow-x:hidden;
  max-width:100%;
}
main {
  padding-bottom: 60px;
}
a{
  color:inherit;
  text-decoration:none;
}
img{
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  width:100%;
}
/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--sans);
  font-weight:700;
  font-size:15px;
  letter-spacing:.02em;
  padding:14px 26px;
  border-radius:3px;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:background .18s,border-color .18s,color .18s;
  white-space:nowrap;
}
.btn-sm{
  padding:10px 18px;
  font-size:14px;
}
.btn-orange{
  background:var(--orange-d);
  color:#fff;
}
.btn-orange:hover{
  background:var(--orange-d);
}
.btn-line{
  background:#fff;
  color:var(--ink);
  border-color:var(--line);
}
.btn-line:hover{
  border-color:var(--ink);
}
.btn-ghost-d{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.4);
}
.btn-ghost-d:hover{
  border-color:#fff;
  background:rgba(255,255,255,.08);
}
.btn .ar{

  font-size:.92em;
}
/* photo placeholder */
.photo{
  position:relative;
  background:var(--paper-2);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.photo::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 13px,rgba(19,32,44,.035) 13px 14px);
}
.photo .cap{
  position:relative;
  text-align:center;
  color:var(--ink-3);
  padding:18px;
}
.photo .cap .t{

  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--ink-2);
}
.photo .cap .s{
  font-size:11px;
  margin-top:5px;
  color:var(--ink-3);
  letter-spacing:.02em;
}

.back_fix{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  background:linear-gradient(to bottom right,#fff, #F0F7FF);
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index:-999;
}

/* ============ ① mv ============ */
.mv{
  position:relative;
  overflow:hidden;
  width:100%;
  height:100%;
  aspect-ratio: 350/191;
}
.mv-vid{
  position:absolute;
  inset:0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:var(--contents);
  height:calc(100% - 20px);
  margin: 0 auto;
  object-fit:cover;
  pointer-events:none;
  border-radius:5px;
}
.mv-in{
  position:absolute;
  bottom: 50px;
  left:7vw;
  height: auto;
  z-index:1;
  margin: 0;
  padding: 0;
}
.mv-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:26px;
  font-size:18px;
  font-weight:600;
  color: #FFF;
  letter-spacing:.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.mv-eyebrow .rule{
  width:8px;
  height:8px;
  background:var(--orange-d);
}
.mv-eyebrow b{
  color:#FFF;
  font-weight:700;
}
h1.mv-h{
  font-weight:700;
  font-size:56px;
  line-height:1.26;
  letter-spacing:.005em;
  color:#FFF;
  margin-bottom:26px;
  text-wrap:balance;
  white-space:nowrap;
  width: fit-content;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--orange-d);
}
h1.mv-h .u{
  background:linear-gradient(transparent 68%,rgba(255,107,0,.20) 68%);
  padding-inline:2px;
}
.mv-sub{
  font-size:18px;
  line-height:2;
  color:#FFF;
  max-width:30em;
  font-weight:500;
  margin-bottom:34px;
  text-wrap:pretty;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.mv-cta{
  display:flex;
  flex-wrap:wrap;
  gap:13px;
  margin-bottom:30px;
}
.mv-facts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 18px;
  font-size:13.5px;
  color:var(--ink-2);
  font-weight:600;
}
.mv-facts .it{
  display:flex;
  align-items:center;
  gap:8px;
}
.mv-facts .dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--orange);
}
.mv-facts .sep{
  width:1px;
  height:13px;
  background:var(--line);
}
.mv-fig{
  position:relative;
}
.mv-fig .frame{
  background:#fff;
  border:1px solid var(--line);
  border-radius:5px;
  box-shadow:0 26px 50px -34px rgba(16,49,73,.4);
  overflow:hidden;
}
.mv-fig .photo{
  aspect-ratio:4/2.5;
}
.mv-fig .figcap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 20px;
  border-top:1px solid var(--line-2);
}
.mv-fig .figcap .nm{
  font-size:14px;
  font-weight:700;
  color:var(--ink);
}
.mv-fig .figcap .ty{

  font-size:11.5px;
  color:var(--ink-3);
  letter-spacing:.02em;
}
.mv-fig .tag{
  position:absolute;
  top:14px;
  left:14px;
  background:var(--orange);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.05em;
  padding:5px 11px;
  border-radius:2px;
  z-index:2;
  white-space:nowrap;
}

/* ============ SECTION SCAFFOLD ============ */
.section{
  position:relative;
}
.section.paper{
  background:var(--paper);
}
.section.sky{
  background:linear-gradient(180deg,var(--sky-1),#fff);
}
.section.tight{
  padding-block:100px;

}
.section.dense{
  padding-block:clamp(46px,5vw,74px);
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
  font-size:20px;
  font-weight:700;
  color:#FFF;
  letter-spacing:.05em;
  background:var(--orange);
  padding: 2px 8px 2px 10px;
}
.kicker .no{

  font-weight:500;
  color:var(--orange);
}
.kicker .rule{
  width:8px;
  height:8px;
  background:#FFF;
}
.sec-lead{
  font-size: 38px;
  font-weight:700;
  line-height:1.42;
  letter-spacing:.005em;
  color:var(--ink);
}
.sec-lead .o{
  color:var(--orange);
}
.map-copy .sec-lead,
.apply .sec-lead{
  white-space:nowrap;
}
.sec-desc{
  font-size:16px;
  color:var(--ink-2);
  margin-top:40px;
  font-weight:500;
  line-height:1.8;
}

/* ============ ② 課題提起 ============ */
.issues{
  background:transparent;
  position:relative;
  overflow:visible;
}
#issues{
  position: relative;
    z-index: 0;
    background: transparent;
    margin-top: 0px;
    padding-inline: 20px;
    padding-block: 90px 80px;
}
/* 現行の紙面背景を前後へ50pxずつ延ばす（前面の下に潜る） */
#issues::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-100px;
  bottom:-100px;
  border-radius:10px;
  z-index:-1;
  pointer-events:none;
  background:#FFFDF8;
}
.mv,
#strength{
  position:relative;
  z-index:1;
}
#issues > .wrap{
  max-width:var(--maxw);
}
#strength > .wrap{
  max-width:var(--maxw);
}
/* 左：見出し＋転換コピー ／ 右：3つの不安カード（縦積み）— 横幅をしっかり使う */
.issues-in{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 0;
  gap: 40px;
}
.issues-head{
  position:relative;
  text-align:center;
  max-width:820px;
}
.issues-tag{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:22px;

  font-size:12px;
  font-weight:500;
  color:var(--orange-d);
  letter-spacing:.16em;
}
.issues-tag .rule{
  width:26px;
  height:1px;
  background:var(--orange);
}
.issues .q{
  font-weight:700;
  font-size:34px;
  line-height:1.32;
  color:var(--ink);
  letter-spacing:.012em;
  margin-inline:auto;
  max-width:100%;
}
.issues .q .o{
  color:var(--orange-d);
  font-size:42px;
}
.issues .sub{
  margin-top:18px;
  color:var(--ink-2);
  font-size:15.5px;
  font-weight:500;
  line-height:1.9;
  max-width:min(800px,100%);
  margin-inline:auto;
}
.issues .turn{
  margin-top:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.issues .turn .ar{

  color:var(--orange);
  font-size:24px;
  line-height:1.4;
  flex:none;
}
.issues .turn .t{
  font-size: 27px;
  font-weight:700;
  color:var(--ink);
  line-height:1.62;
}
.issues .turn .t .o{
  color:var(--orange-d);
  font-size:32px;
}
.issue-list{
  display:flex;
  gap:14px;
  width:100%;
  max-width:940px;
}
.issue{
  display:flex;
  flex-direction:column;
  flex:1 1 0;
  min-width:0;
  align-items:center;
  gap: 10px;
  background:#fff;
  border-radius:15px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  padding:clamp(20px,2vw,27px) clamp(22px,2.3vw,32px);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease,border-color .3s ease;
  text-align:center;
}
.issue .no{
  font-family: figtree , sans-serif;
  font-size:38px;
  color:var(--orange-d);
  font-weight:600;
  line-height:1;
  letter-spacing:.02em;
  text-align:center;
}
.issue .tx{
  font-size:18px;
  font-weight:500;
  color: #000;
  line-height:1.6;
  letter-spacing:.01em;
}
.issue .mk{
  width:46px;
  height:46px;
  border-radius:13px;
  border:1.5px solid var(--orange-line);
  background:var(--orange-wash);
  position:relative;
  flex:none;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),background .3s ease;
}
.issue:hover .mk{
  transform:rotate(90deg);
  background:var(--orange);
}
.issue:hover .mk::before,.issue:hover .mk::after{
  background:#fff;
}
.issue .mk::before,.issue .mk::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:16px;
  height:2px;
  background:var(--orange);
  border-radius:2px;
  transition:background .3s ease;
}
.issue .mk::before{
  transform:translate(-50%,-50%) rotate(45deg);
}
.issue .mk::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}
@media(max-width:980px){
  .issues-in{
    gap:clamp(26px,5vw,38px);
  }
}
@media screen and (max-width:768px){
  .issue{
    gap:12px;
  }
  .issue .mk{
    display:none;
  }
}

/* ============ ③ NUMBER BAND ============ */
.band{
  position:relative;
  background:var(--navy);
  color:#fff;
}
.band-in{
  display:flex;
  align-items:center;
  gap:clamp(24px,5vw,56px);
  padding-block:clamp(40px,5.5vw,64px);
  flex-wrap:wrap;
}
.band-lead{
  display:flex;
  align-items:baseline;
  gap:16px;
}
.band-num{

  font-weight:500;
  line-height:.9;
  font-size:clamp(64px,11vw,118px);
  letter-spacing:-.03em;
  color:#fff;
  display:flex;
  align-items:baseline;
  gap:.1em;
}
.band-num .unit{
  font-size:.28em;
  font-weight:500;
  letter-spacing:.02em;
}
.band-dual{
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,26px);
  flex-wrap:wrap;
}
.band-dual .bn{
  display:flex;
  align-items:baseline;
  gap:.12em;

  color:#fff;
  line-height:.9;
}
.band-dual .bnum{
  font-weight:500;
  font-size:clamp(52px,8.5vw,96px);
  letter-spacing:-.03em;
}
.band-dual .bnum.svc{
  color:var(--orange);
}
.band-dual .bunit{
  font-size:clamp(13px,1.5vw,17px);
  font-weight:600;
  letter-spacing:.04em;
  color:rgba(255,255,255,.78);
  align-self:flex-end;
  padding-bottom:.55em;
}
.band-dual .bplus{

  font-size:clamp(30px,4.5vw,52px);
  color:rgba(255,255,255,.5);
  font-weight:300;
}
.band-div{
  width:1px;
  align-self:stretch;
  background:rgba(255,255,255,.16);
}
.band-cities{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.band-cities .ttl{
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,.6);
  letter-spacing:.04em;
}
.band-cities .row{

  font-size:clamp(15px,1.7vw,19px);
  color:#fff;
  letter-spacing:.06em;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
}
.band-cities .sub{
  font-size:14px;
  color:rgba(255,255,255,.82);
  font-weight:500;
  letter-spacing:.02em;
}
.band-cities .row .d{
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--orange);
}
.band-note{
  margin-left:auto;
  font-size:11.5px;
  color:rgba(255,255,255,.4);
  align-self:flex-end;
  letter-spacing:.03em;
}
.supply-live{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:8px;
  font-family:var(--sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  color:#a9e8c7;
  background:rgba(31,138,91,.22);
  border:1px solid rgba(31,138,91,.5);
  border-radius:100px;
  padding:2px 10px 2px 8px;
}
.supply-live::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#37d98a;
  box-shadow:0 0 0 3px rgba(55,217,138,.25);
}

/* ============ ④ STRENGTH ============ */
.strength{
  background:
    radial-gradient(circle at center, rgba(253,136,0,.22) 1px, transparent 1.5px) 0 0/27px 27px,
    #F7F4EC;
  width: var(--contents);
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  padding: 72px 0;
  overflow:hidden;
}
.strength .sec-top{
  max-width:var(--maxw);
  margin-inline:auto;
  margin-bottom:clamp(30px,3.6vw,44px);
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.strength .sec-lead{
  max-width:none;
  white-space:nowrap;
}
/* 参照スタイル: ミュートの英字アイブロウ＋大きな見出し */
.kicker.eyebrow-en{
  font-size:clamp(14px,1.4vw,16px);
  font-weight:600;
  color:var(--ink-3);
  letter-spacing:.16em;
  gap:15px;
  margin-bottom:16px;
}
.kicker.eyebrow-en .rule{
  width:4px;
  height:16px;
}
.strength .sec-lead{
  font-size:42px;
  line-height:1.28;
  letter-spacing:.008em;
}
.strength .lead-note{
  color:var(--ink-2);
  font-size:14.5px;
  line-height:1.95;
  font-weight:500;
  background:var(--paper);
  border-left:3px solid var(--orange-line);
  border-radius:0 6px 6px 0;
  padding:20px 24px;
}
/* サービス網ブロック（テキスト + 画像/マップ） */
.service {
  max-width: var(--maxw);
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:40px;
  align-items:center;
  margin-bottom:40px;
  background:linear-gradient(to right, #fff, #F0F7FF);
  border-radius:10px;
  padding:35px 40px;
  margin-inline:auto;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  position:relative;
  z-index:0;
  overflow:visible;
}
/* 01・03（.im-b あり）のみ：カード全体の背後に平行四辺形 */
.service:has(.im-b){
  background:transparent;
  box-shadow:none;
}
.service:has(.im-b)::before{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  width:55%;
  height:85%;
  max-height:173px;
  max-width:204px;
  background:rgba(255,124,14,.25);
  transform:skewX(-35deg);
  transform-origin:center center;
  bottom: 10%;
  right:-20%;
}
/* 01（先頭）は左側へ */
.tier-bar + .service:has(.im-b)::before{
  top:10%;
  bottom:auto;
  left:-20%;
  right:auto;
}
/* カード面（装飾の上・コンテンツの下） */
.service:has(.im-b)::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to right, #fff, #F0F7FF);
  border-radius:10px;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.service:has(.im-b) > *{
  position:relative;
  z-index:2;
}
.tier-bar + .service{
  margin-top:clamp(8px,1.2vw,16px);
}
.service .tx-a {
  min-width:0;
}
.service .tx-a > .ti{
  display:flex;
  align-items: center;
  gap:12px;
  margin-bottom:14px;
}
.service .tx-a > .ti > .ti{
  font-family: figtree , sans-serif;
  font-size:clamp(22px,2.5vw,30px);
  font-weight:600;
  color:var(--orange-d);
  line-height:1;
}
.service .tx-a .e{
  font-family: figtree , sans-serif;
  font-size:17px;
  letter-spacing:.08em;
  color:var(--ink-3);
  font-weight:600;
}
.service .tx-a .h{
  font-size:30px;
  font-weight:700;
  line-height:1.45;
  margin-bottom:30px;
  color:#000;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  letter-spacing:.04em;
}
.service .tx-a .h .b{
  color:var(--blue);
  font-size:45px;
}
.service .tx-a .h .o{
  color:var(--orange-d);
  font-size:45px;
}
.service .tx-a .d{
  font-size:15px;
  color:var(--ink-2);
  line-height:1.9;
  font-weight:500;
}
.service .tx-a .d p{
  margin:0;
  font-size:18px;
  line-height:1.6;
}
.im-b{
  height:312px;
}
.im-b img{
  width:auto;
  height:100%;
  display:block;
  object-fit:contain;
  margin:0 auto;
}
.im-b.certificate img {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
}
/* strength内マップ（旧 #map セクションから移植） */
#map{
  scroll-margin-top:88px;
}
.im-c{
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
}
.strength .im-c .map-field{
  height:clamp(280px,34vw,400px);
  margin:0;
  border-radius:10px;
}
.strength .im-c .map-legend{
  margin-top:0;
}
.tier-bar{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  margin-bottom:22px;
}
.tier-top + .tier-bar{
  margin-top:42px;
}
.tier-bar .t{
  font-size:28px;
  font-weight:700;
  color:#000;
  letter-spacing:.04em;
  white-space:nowrap;
  flex:none;
}
/* 左右の点線。space で端の半円切り欠けを出さない */
.tier-bar::before,
.tier-bar .l{
  content:"";
  flex:1 1 0;
  min-width:0;
  height:8px;
  background-image:radial-gradient(circle 3px at 50% 50%,
    var(--orange) 0%,
    var(--orange) 68%,
    rgba(255,107,0,0) 100%);
  /* タイル＝1個分。space は収まる整数個だけ並べ、端で切らない */
  background-size:10px 8px;
  background-repeat:space no-repeat;
  background-position:center;
}
.tier-top{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.scard{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:11px;
  padding:30px 28px 32px;
  box-shadow:0 12px 26px -20px rgba(34,80,125,.4);
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.scard:hover{
  border-color:var(--line);
  transform:translateY(-3px);
  box-shadow:0 20px 38px -22px rgba(34,80,125,.5);
}
.scard .idx{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13.5px;
  color:var(--ink-2);
  font-weight:700;
  padding-bottom:16px;
  margin-bottom:18px;
  border-bottom:1px solid var(--line-2);
}
.scard .idx::before{
  content:"";
  flex:none;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--orange);
}
.scard h3{
  font-size:18px;
  font-weight:700;
  line-height:1.55;
  margin-bottom:13px;
}
.scard p{
  font-size:14px;
  color:var(--ink-2);
  line-height:1.9;
  font-weight:500;
}
.scard .cities{
  margin-top:auto;
  padding-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.chip{

  font-size:11.5px;
  color:var(--ink-2);
  background:var(--paper);
  border:1px solid var(--line);
  padding:4px 9px;
  border-radius:2px;
}
.chip-green{
  color:var(--green-d);
  background:var(--green-wash);
  border-color:var(--green-line);
}

/* ---- 標準供給にとどまらない対応：写真カード ---- */
.ext-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}
.ext-card{
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:11px;
  overflow:hidden;
  box-shadow:0 12px 26px -20px rgba(34,80,125,.4);
  display:flex;
  flex-direction:column;
  min-width:0;
}
.ext-card > img{
  display:block;
  width:100%;
  aspect-ratio:16/6.5;
  object-fit:cover;
  object-position:center;
  border-bottom:1px solid var(--line-2);
}
.ext-card .ext-body{
  padding:24px 28px 28px;
}
.ext-card h3{
  font-size:clamp(17px,1.8vw,20px);
  font-weight:700;
  line-height:1.5;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.ext-card .ext-body .e{
  font-family: figtree , sans-serif;
  font-size:12px;
  letter-spacing:.14em;
  color:var(--ink-3);
  font-weight:600;
}
.ext-card h3 .sm{
  font-weight:500;
  font-size:.66em;
  color:var(--ink-3);
}
.ext-card p{
  font-size:14px;
  color:var(--ink-2);
  line-height:1.9;
  font-weight:500;
}
.ext-card .note{
  display:inline-block;
  margin-top:13px;
  font-size:12.5px;
  color:var(--orange-d);
  font-weight:600;
}

/* ============ ⑤ MAP ============ */
.mapsec{
  background:linear-gradient(180deg,var(--sky-1),#fff);
  overflow:hidden;
}
.map-in{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:clamp(32px,5vw,64px);
  align-items:center;
}
.map-cities{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:11px;
  margin-bottom:20px;

  font-size:clamp(15px,1.6vw,19px);
  color:var(--ink);
  letter-spacing:.06em;
}
.map-cities .d{
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--orange);
}
.map-legend{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.map-legend .lg{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
}
.map-legend .m{
  width:15px;
  height:15px;
  border-radius:50%;
  flex:none;
  border:2px solid #fff;
  box-shadow:0 1px 4px rgba(16,49,73,.22);
}
.map-legend .m.sales{
  background:var(--blue);
}
.map-legend .m.svc{
  background:var(--orange-d);
}
.map-legend .m.both{
  background:linear-gradient(90deg,var(--blue) 0 50%,var(--orange) 50% 100%);
}
.map-legend .lg .sub{
  font-weight:500;
  color:var(--ink-3);
}
.map-field{
  position:relative;
  height:clamp(400px,54vw,580px);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.map-field .grid{
  position:absolute;
  inset:0;
  opacity:.5;
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(130% 100% at 55% 45%,#000 50%,transparent 100%);
  mask-image:radial-gradient(130% 100% at 55% 45%,#000 50%,transparent 100%);
}

/* ============ ⑥ ABOUT EV ============ */
.section.about{
  background: url(../assets/images/bg.png) no-repeat center center / 100% auto;
  padding-block: 100px;
}
.about .sec-top{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.about-in{
  margin-top: 30px;
  margin-inline:auto;
  max-width:var(--maxw);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,72px);
  align-items:center;
  padding: 0;
}
.about-fig .frame{
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  background:#fff;
}
.about-fig .photo{
  aspect-ratio:5/4.2;
}
.about-fig .cut{
  display:flex;
  gap:10px;
  padding:14px 16px;
  border-top:1px solid var(--line-2);
  flex-wrap:wrap;
}
.about-points{
  counter-reset:ap;
}
.about-points .pt{
  display:grid;
  grid-template-columns:auto 1fr;
  gap: 12px;
  padding:26px 10px;
  border-bottom:1px solid var(--line);
}
.about-points .pt:first-child{
  padding-top:6px;
}
.about-points .pt .n{
  font-family: figtree , sans-serif;
  font-size:18px;
  color:var(--orange-d);
  font-weight:700;
  line-height:1;
  padding-top: 5px;
}
.about-points .pt h3{
  font-size:18px;
  font-weight:600;
  margin-bottom:8px;
  line-height:1.5;
}
.about-points .pt p{
  font-size:14px;
  color:var(--ink-2);
  line-height:25.2px;
}
.about-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:28px;
  font-size:14px;
  font-weight:500;
  background:#FFF;
  color: #000;
  border-radius: 4px;
  padding: 15px 40px 15px 15px;
  transition:all .2s;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  position:relative;
}
.about-link::after{
  content:"";
  position:absolute;
  right:15px;
  top:50%;
  width:12px;
  height:12px;
  background:url(../assets/images/link.png) no-repeat center center / 100% auto;
  transform:translateY(-50%);
}
.about-link:hover{
  background:var(--orange-d);
  color:#FFF;
}
.about-link:hover::after{
  background:url(../assets/images/link_h.png) no-repeat center center / 100% auto;
}
.about-link .ar{

}

/* ============ ⑦ exam ============ */
.example {
  background: radial-gradient(circle at center, rgba(253, 136, 0, .22) 1px, transparent 1.5px) 0 0 / 27px 27px, #F7F4EC;
  width: var(--contents);
  margin-inline:auto;
  overflow:hidden;
  position:relative;
  border-radius:10px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  padding-block: 72px;
}
.example .wrap-all{
  width: var(--contents);
  background:#F7F4EC;
  border-radius:10px;
  margin-inline:auto;
}
.example .sec-top{
  max-width: var(--maxw);
  margin-inline:auto;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.apply .a-head{
  max-width:none;
  padding: 0;
}
.apply .a-head .kicker{
  justify-content:center;
}
.viz + .section.paper{
  padding-top:clamp(8px,2vw,24px);
}
.viz{
  background:transparent;
  max-width:var(--maxw);
  margin-top: 60px;
  margin-inline:auto;
  position:relative;
  z-index:0;
}
/* 3D iframe 背後の斜め装飾（角丸平行四辺形） */
.viz::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  background:rgba(255,124,14,.25);
  right: -10%;
  width:40%;
  top: 3%;
  height:100%;
  max-width: 570px;
  max-height: 286px;
  transform:skewX(-45deg);
  transform-origin:center center;
}
.viz-inner{
  max-width:var(--maxw);
  margin-inline:auto;
  position:relative;
  z-index:1;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:#eef1f5;
}
.viz-inner iframe{
  display:block;
  width:100%;
  height:min(66vh,600px);
  border:0;
}
.viz-head{
  max-width:var(--maxw);
  margin-inline:auto;
  margin-bottom:clamp(18px,2.2vw,28px);
  position:relative;
  z-index:1;
}
.viz-head .znum{
  font-family: figtree , sans-serif;
  font-size:18px;
  color:var(--orange-d);
  font-weight:700;
  margin-bottom:12px;
  letter-spacing:.04em;
}
.viz-head h3{
  font-size: 28px;
  font-weight:700;
  line-height:1.4;
  margin-bottom:10px;
}
.viz-head p{
  font-size:16px;
  color:var(--ink-2);
  font-weight:500;
  line-height:1.6;
}
.zz{
  display:flex;
  flex-direction:column;
  gap:80px;
  margin-top:64px;
  max-width:var(--maxw);
  margin-inline:auto;
}
.zrow{
  display:flex;
  gap:clamp(28px,4vw,56px);
  align-items:center;
}
.zrow .ztext{
  flex:1 1 auto;
  min-width:0;
}
.zrow:nth-child(even) .ztext{
  order:2;
}
.zrow .zfig .photo{
  border:1px solid var(--line);
  border-radius:6px;
}
.zrow .zfig img{
  display:block;
  width:350px;
  height:263px;
  aspect-ratio:350/263;
  object-fit:cover;
  object-position:center;
  border:1px solid var(--line);
  border-radius:6px;
  position:relative;
  z-index:1;
}
/* 写真背後の角丸平行四辺形 */
.zrow .zfig{
  position:relative;
  z-index:0;
  overflow:visible;
  flex:none;
  width:350px;
  display:flex;
  justify-content:flex-end;
}
.zrow:nth-child(even) .zfig{
  justify-content:flex-start;
}
.zrow .zfig::before{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  width:80%;
  height:100%;
  max-height: 286px;
  max-width: 570px;
  background:rgba(255,124,14,.25);
  transform:skewX(-35deg);
  transform-origin:center center;
}
/* 画像が右（奇数行）→ 内側から右端へ */
.zrow:nth-child(odd) .zfig::before{
  top:15%;
  right:-35%;
}
/* 画像が左（偶数行）→ 内側から左端へ */
.zrow:nth-child(even) .zfig::before{
  bottom: -15%;
  left:-35%;
}
.zrow .znum{
  font-family: figtree , sans-serif;
  font-size:18px;
  color:var(--orange-d);
  font-weight:700;
  margin-bottom:14px;
  letter-spacing:.04em;
}
.zrow h3{
  font-size:clamp(19px,2.2vw,24px);
  font-weight:700;
  line-height:1.5;
  margin-bottom:14px;
  white-space:nowrap;
}
.zrow p{
  font-size:14.5px;
  color:var(--ink-2);
  font-weight:500;
  line-height:1.95;
}
.zrow .ztags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}

/* ============ ⑧ PRODUCTS ============ */
#products{
  background: url(../assets/images/bg.png) no-repeat center center / 100% auto;
  padding-block: 100px;
}
#products .sec-top{
  max-width:1000px;
  margin-inline:auto;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
#products .a-head{
  margin-bottom:clamp(30px,4vw,44px);
}
#products .sec-desc{
  max-width:none;
}
.pcard .pimg image-slot{
  display:block;
  width:100%;
  height:100%;
}
.prodgrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.pcard{
  background:#fff;
  border-radius:6px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  transition:border-color .2s,transform .2s,box-shadow .2s;
  padding: 15px;
}
.pcard .pimg{
  position:relative;
  aspect-ratio:16/10;
}
.pcard.lead .pimg{
  aspect-ratio:16/10;
}
.pcard .pimg{
  background:#fff;
}
.pcard .pimg.sensor-3up{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  background:#fff;
}
.pcard .pimg.sensor-3up image-slot{
  display:block;
  width:100%;
  height:100%;
  padding:14px 8px;
}
.pcard .pimg .ptag{
  position:absolute;
  top:12px;
  left:12px;
  background:var(--orange);
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:4px 10px;
  border-radius:2px;
  letter-spacing:.05em;
  z-index:2;
}
.pcard .pbody{
  display:flex;
  flex-direction:column;
  flex:1;
}
.pcard h3{
  font-size:18px;
  font-weight:700;
  padding-top: 10px;
  margin-bottom:8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.pcard h3 .rule{
  display:inline-block;
  width: 8px;
  height: 8px;
  background: var(--orange-d);
  margin-right: 10px;
}
.pcard .pd{
  font-size:12px;
  color:var(--ink-2);
  font-weight:500;
  line-height: 19.2px;
  margin-bottom:16px;
}
.pcard .models{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--line-2);
}
.pcard .models .ml{
  font-size:11px;
  color:var(--ink-3);
  width:100%;
  margin-bottom:2px;
  letter-spacing:.04em;
}
.pcard .ask{
  margin-top:14px;
  font-size:12.5px;
  font-weight:600;
  color:var(--blue-d);
}
.prod-note{
  margin-top:18px;
  font-size:12px;
  color: 000;
}

/* ============ ⑨ FLOW — 栞リボン調の吹き出しフロー ============ */

#flow.section.dense{
  padding-block: 72px;
  background: #F7F4EC;
  width: var(--contents);
  margin-inline: auto;
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
}
#flow .wrap{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline: 0;
}
#flow .sec-top{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.flow2{
  margin-top: 64px;
  display:flex;
  align-items:stretch;
  gap:5px;
}
.fstep2{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:11px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
}
/* 下向きしっぽの白い吹き出し */
.fstep2 .bubble{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  box-shadow:0 14px 28px -22px rgba(16,49,73,.5);
  flex:1;
  display:flex;
  align-items:center;
}
.fstep2 .bubble p{
  font-size:12.5px;
  color:var(--ink-2);
  font-weight:500;
  line-height:1.66;
  text-wrap:pretty;
}
.fstep2 .bubble::after{
  content:"";
  position:absolute;
  left:24px;
  bottom:-8px;
  width:15px;
  height:15px;
  background:#fff;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transform:rotate(45deg);
}
/* ネイビー角丸ブロック */
.fstep2 .node{
  background:var(--navy);
  color:#fff;
  border-radius:12px;
  padding:12px 15px 13px;
}
.fstep2 .node .slash{
  display:block;

  font-size:11px;
  font-weight:500;
  color:#ffb27a;
  letter-spacing:.05em;
  margin-bottom:5px;
}
.fstep2 .node h3{
  font-size:15.5px;
  font-weight:700;
  line-height:1.4;
  color:#fff;
}
.fstep2.plus .node{
  background:linear-gradient(150deg,#16324a 0%,var(--navy) 100%);
  box-shadow:inset 0 0 0 1.5px var(--orange);
}
.fstep2 .node .badge{
  display:inline-block;
  margin-top:11px;

  font-size:10px;
  color:#ffcaa0;
  border:1px solid rgba(255,107,0,.55);
  border-radius:100px;
  padding:2px 9px;
  letter-spacing:.04em;
}
.fstep2-inner{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  flex:1;
}
.fstep2-inner .hd{
  font-family: figtree , sans-serif;
  font-size:15px;
  color:#FFF;
  font-weight:500;
  letter-spacing:.04em;
  background: #205591;
  text-align: center;
  padding: 5px 10px;
  border-radius: 5px 5px 0 0;
}
.fstep2-inner .bd{
  background: #fff;
  padding: 10px;
  border-radius: 0 0 5px 5px;
  flex:1;
}
.fstep2-inner .bd h3{
  font-size:14px;
  color:#000;
  font-weight:500;
  letter-spacing:.04em;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
  font-weight: 600;
}
.fstep2-inner .bd .rule{
  display:inline-block;
  width: 8px;
  height: 8px;
  background: var(--orange-d);
  margin-right: 5px;
}
.fstep2-inner .bd p{
  font-size:13px;
  color:#000;
  line-height:1.5;
}
.farrow{
  align-self:center;
  flex:none;
  width:10px;
  height:10px;
  position:relative;
}
.farrow::before{
  content:"";
  position:absolute;
  inset:0;
  border-right:2.5px solid var(--orange-d);
  border-top:2.5px solid var(--orange-d);
  /* 視覚重心を中央へ（左右均等） */
  transform:rotate(45deg) translate(-1px,1px);
  box-sizing:border-box;
}

/* ============ ⑩ FAQ ============ */

#faq .sec-top{
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 60px;
}
.faq-wrap{
  max-width:var(--maxw);
  margin-inline:auto;
}
.qa{
  border-radius: 6px;
  margin-top: 24px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  background: #fff;
}
.qa .q{
  width:100%;
  display:flex;
  align-items:center;
  gap:18px;
  padding:20px;
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
}
.qa .q .mark{
  font-family: figtree , sans-serif;
  font-size:20px;
  color:var(--orange-d);
  font-weight:500;
  flex:none;
}
.qa .q .qt{
  font-size:20px;
  font-weight:700;
  color:var(--ink);
  flex:1;
  line-height:1.5;
}
.qa .q .ic{
  position:relative;
  width:16px;
  height:16px;
  flex:none;
}
.qa .q .ic::before,.qa .q .ic::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:var(--orange-d);
  transition:transform .25s;
}
.qa .q .ic::before{
  width:14px;
  height:1.5px;
  transform:translate(-50%,-50%);
}
.qa .q .ic::after{
  width:1.5px;
  height:14px;
  transform:translate(-50%,-50%);
}
.qa.open .q .ic::after{
  transform:translate(-50%,-50%) scaleY(0);
}
.qa .a{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.qa .a .inner{
  padding:20px 20px 24px 56px;
  font-size:14.5px;
  color:var(--ink-2);
  font-weight:500;
  line-height:1.5;
  background: rgba(193,193,193,.14);
}

/* ============ ⑪ CONTACT ============ */
.contact{
  background:url(../assets/images/contact-bg.jpg) no-repeat center center / cover;
  color:#fff;
  width: var(--contents);
  margin-inline: auto;
  border-radius: 10px;
  padding-block: 64px;
}
.contact-in{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,64px);
  padding: 0;
}
.contact .kicker{
  color:#FFF;
}
.contact .kicker .no,.contact .kicker .rule{
  color:var(--orange);
  background:#FFF;
}
.contact .kicker .no{
  background:none;
}
.contact h2{
  font-size:40px;
  font-weight:700;
  line-height:1.5;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--orange);
  margin-bottom:30px;
}
.contact .cdesc{
  color:#FFF;
  font-size:18px;
  font-weight:500;
  line-height:1.6;
}
.contact .cmeta{
  margin-top:32px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.contact .cmeta .it{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.contact .cmeta .lb{
  font-size:12px;
  color:rgba(255,255,255,.5);
  width:74px;
  flex:none;
  padding-top:3px;
  letter-spacing:.04em;
}
.contact .cmeta .vl{
  font-size:12px;
  color:#fff;
  font-weight:600;
}
.form{
  background:#fff;
  color:var(--ink);
  border-radius:8px;
  padding:clamp(26px,3vw,40px);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
}
.form .frow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.field{
  margin-bottom:16px;
}
.field.full{
  grid-column:1/-1;
}
.field label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:7px;
}
.field label .req{
  font-size:10px;
  color:#fff;
  background:var(--orange-d);
  padding:1px 5px;
  margin-right:10px;
  vertical-align:middle;
  letter-spacing:.04em;
}
.field input,.field select,.field textarea{
  width:100%;
  font-family:inherit;
  font-size:14.5px;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:4px;
  padding:12px 14px;
  background:#fff;
  transition:border-color .18s,box-shadow .18s;
}
.field textarea{
  resize:vertical;
  min-height:120px;
  line-height:1.7;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,107,0,.12);
}
.field input.err,.field select.err,.field textarea.err{
  border-color:#e23b2e;
  box-shadow:0 0 0 3px rgba(226,59,46,.1);
}
.field .msg{
  font-size:11.5px;
  color:#e23b2e;
  margin-top:5px;
  display:none;
}
.field .msg.show{
  display:block;
}
.form .submit{
  width:100%;
  margin-top:6px;
  font-size:16px;
  padding:16px;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
}
.form .submit::after{
  content:"";
  position:absolute;
  right:20px;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid #fff;
  border-top:2px solid #fff;
  transform:translateY(-50%) rotate(45deg);
}
.form .formnote{
  font-size:11.5px;
  color:var(--ink-3);
  margin-top:14px;
  line-height:1.7;
  text-align:center;
}
.form .sent{
  display:none;
  text-align:center;
  padding:40px 10px;
}
.form .sent.show{
  display:block;
}
.form .sent .ok{
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--orange-wash);
  border:1.5px solid var(--orange-line);
  margin:0 auto 18px;
  position:relative;
}
.form .sent .ok::after{
  content:"";
  position:absolute;
  left:19px;
  top:15px;
  width:11px;
  height:20px;
  border:solid var(--orange);
  border-width:0 3px 3px 0;
  transform:rotate(40deg);
}
.form .sent h3{
  font-size:20px;
  font-weight:700;
  margin-bottom:10px;
}
.form .sent p{
  font-size:14px;
  color:var(--ink-2);
  font-weight:500;
}

/* reveal */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);
}
.reveal.in{
  opacity:1;
  transform:none;
}
.reveal.d1{
  transition-delay:.07s;
}
.reveal.d2{
  transition-delay:.14s;
}
.reveal.d3{
  transition-delay:.21s;
}

/* --- 汎用スタガー：コンテナ(.in)で子要素を順に表示 --- */
.stagger > *{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease,transform .66s cubic-bezier(.2,.7,.3,1);
}
.stagger.in > *{
  opacity:1;
  transform:none;
}
.stagger.in > *:nth-child(1){
  transition-delay:.06s;
}
.stagger.in > *:nth-child(2){
  transition-delay:.16s;
}
.stagger.in > *:nth-child(3){
  transition-delay:.26s;
}
.stagger.in > *:nth-child(4){
  transition-delay:.36s;
}
.stagger.in > *:nth-child(5){
  transition-delay:.46s;
}
.stagger.in > *:nth-child(6){
  transition-delay:.56s;
}

/* --- セクション内の要素を親(.in)に連動して順に表示 --- */
.about-points .pt{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.3,1);
}
.about-copy.in .about-points .pt{
  opacity:1;
  transform:none;
}
.about-copy.in .about-points .pt:nth-child(1){
  transition-delay:.12s;
}
.about-copy.in .about-points .pt:nth-child(2){
  transition-delay:.24s;
}
.about-copy.in .about-points .pt:nth-child(3){
  transition-delay:.36s;
}
.cert-facts > div{
  opacity:0;
  transform:translateX(16px);
  transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.3,1);
}
.cert-copy.in .cert-facts > div{
  opacity:1;
  transform:none;
}
.cert-copy.in .cert-facts > div:nth-child(1){
  transition-delay:.14s;
}
.cert-copy.in .cert-facts > div:nth-child(2){
  transition-delay:.22s;
}
.cert-copy.in .cert-facts > div:nth-child(3){
  transition-delay:.30s;
}
.cert-copy.in .cert-facts > div:nth-child(4){
  transition-delay:.38s;
}
.map-legend .lg{
  opacity:0;
  transform:translateX(-14px);
  transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.3,1);
}
.map-copy.in .map-legend .lg,
.im-c.in .map-legend .lg{
  opacity:1;
  transform:none;
}
.map-copy.in .map-legend .lg:nth-child(1),
.im-c.in .map-legend .lg:nth-child(1){
  transition-delay:.16s;
}
.map-copy.in .map-legend .lg:nth-child(2),
.im-c.in .map-legend .lg:nth-child(2){
  transition-delay:.26s;
}
.map-copy.in .map-legend .lg:nth-child(3),
.im-c.in .map-legend .lg:nth-child(3){
  transition-delay:.36s;
}
.cmeta .it{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.3,1);
}
.contact-copy.in .cmeta .it{
  opacity:1;
  transform:none;
}
.contact-copy.in .cmeta .it:nth-child(1){
  transition-delay:.14s;
}
.contact-copy.in .cmeta .it:nth-child(2){
  transition-delay:.24s;
}
.contact-copy.in .cmeta .it:nth-child(3){
  transition-delay:.34s;
}
/* お問い合わせ：セクションを左からスライドイン */
.contact .reveal{
  transform:translateX(-64px);
}
.contact .reveal.in{
  transform:none;
}
@media(prefers-reduced-motion:reduce){
  .stagger > *,.about-points .pt,.cert-facts > div,.map-legend .lg,.cmeta .it{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* --- ④ 強み見出し: 横からスライドイン（見出し←左／リード→右） --- */
.strength .sec-top > .reveal{
  transition:opacity .85s ease,transform .9s cubic-bezier(.16,.7,.26,1);
}
.strength .sec-top > .reveal:first-child{
  transform:translateX(-72px);
}
.strength .sec-top > .lead-note{
  transform:translateX(72px);
}
.strength .sec-top > .reveal.in{
  transform:none;
}
@media(prefers-reduced-motion:reduce){
  .issues .reveal,.strength .sec-top > .reveal{
    transform:none;
    transition:none;
  }
}

/* --- ⑨ 導入フロー：左→右に1ステップずつ点灯 --- */
.flow2 .fstep2,.flow2 .farrow{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.3,1);
}
.flow2.in .fstep2,.flow2.in .farrow{
  opacity:1;
  transform:none;
}
.flow2.in .fstep2:nth-of-type(1){
  transition-delay:.05s;
}
.flow2.in .farrow:nth-of-type(1){
  transition-delay:.12s;
}
.flow2.in .fstep2:nth-of-type(2){
  transition-delay:.18s;
}
.flow2.in .farrow:nth-of-type(2){
  transition-delay:.25s;
}
.flow2.in .fstep2:nth-of-type(3){
  transition-delay:.31s;
}
.flow2.in .farrow:nth-of-type(3){
  transition-delay:.38s;
}
.flow2.in .fstep2:nth-of-type(4){
  transition-delay:.44s;
}
.flow2.in .farrow:nth-of-type(4){
  transition-delay:.51s;
}
.flow2.in .fstep2:nth-of-type(5){
  transition-delay:.57s;
}

@media(prefers-reduced-motion:reduce){
  .flow2 .fstep2,.flow2 .farrow{
    opacity:1;
    transform:none;
    transition:none;
  }
  .pcard .pimg image-slot,.zrow .zfig img{
    transition:none;
  }
}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .mv-in{
    grid-template-columns:1fr;
    gap:36px;
    min-height:0;
    padding-block:48px 56px;
  }
  .mv-fig{
    max-width:480px;
  }
  .strength .sec-top{
    gap:22px;
  }
  .strength .sec-lead{
    white-space:normal;
  }
  /* 強み3枚・標準供給2枚は横並びを維持（縦にしない） */
  .band-note{
    margin-left:0;
    width:100%;
  }
  .map-in{
    grid-template-columns:1fr;
  }
  .service{
    grid-template-columns:1fr;
    gap:18px;
    padding: 24px 15px;
    margin-bottom: 20px;
  }
  .strength .im-c .map-field{
    height:clamp(260px,56vw,380px);
  }
  .about-fig{
    max-width:460px;
  }
  .zrow{
    flex-direction:column;
    align-items:stretch;
    gap:20px;
  }
  .zrow .ztext{
    order:0;
  }
  .zrow:nth-child(even) .ztext{
    order:0;
  }
  .zrow .zfig{
    width:100%;
    justify-content:center;
  }
  .zrow .zfig img{
    width:min(350px,100%);
    height:auto;
  }
  .zrow h3{
    white-space:normal;
  }
  .zz {
    gap: 20px;
    margin-top: 24px;
  }
  /* 1列時はすべて右端方向の装飾に統一 */
  .zrow:nth-child(even) .zfig::before{
    left:18%;
    width:30%;
    height:30%;
    top: 85%;
    left: -10%;
    aspect-ratio: none;
  }
  .zrow:nth-child(odd) .zfig::before{
    width:30%;
    height:30%;
    top: 78%;
    left: 78%;
    aspect-ratio: none;
  }
  .viz::after{
    top: 40%;
    left:70%;
    width: 35%;
    height:35%;
  }
  /* 製品一覧3枚も横並びを維持 */
  .flow2{
    flex-direction:column;
    gap:4px;
  }
  .fstep2{
    gap:12px;
  }
  .fstep2 .bubble{
    align-items:flex-start;
  }
  /* 縦並び時は矢印を下向きに。reveal完了状態(.flow2.in .farrow{transform:none})を上書きするため詳細度を上げる */
  .farrow,.flow2.in .farrow{
    transform:rotate(90deg);
    /* 回転後に少し下へ寄って見えるため、上方向へ補正 */
    translate:0 -3px;
  }
  .farrow::before{
    /* 横向き用の translate(+Y) を打ち消し、下向き時の重心を揃える */
    transform:rotate(45deg) translate(-1px,0);
  }
  .contact-in{
    grid-template-columns:1fr;
  }

}
@media screen and (max-width:768px){
  .hdr-in{
    height:60px;
  }
  .lockup img{
    height:21px;
  }
  .lockup .ryoto{
    height:19px;
  }
  .mv-cta{
    flex-direction:column;
    align-items:stretch;
  }
  .mv-cta .btn{
    width:100%;
  }
  .band-lead{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }
  .band-div{
    display:none;
  }
  .issue-list{
    flex-direction:column;
    align-items:stretch;
    width:100%;
    max-width:100%;
  }
  .issue{
    width:100%;
    max-width:100%;
  }
  .form .frow{
    grid-template-columns:1fr;
  }
  .map-field{
    height:440px;
  }
  .strength .im-c .map-field{
    height:min(56vw,340px);
  }
}

/* ============================================================
   ① 背景色が変わる境界 — ゆるやかな波型（ウェーブ／SVGマスク）。
   前セクションの色が波状に画面端まで残り、
   さらに色面が横から差し込まれる translateX 演出（0.62s）を重ねる。
   各セクションの最終色はそのまま（=可読性を担保）。
   ============================================================ */
.has-sweep{
  position:relative;
  z-index:0;
  overflow:hidden;
}
.has-sweep > .wrap{
  position:relative;
  z-index:3;
}
/* 色面スライド演出パネル（前色）。armed=表示前は覆う → 横へ抜けて最終色を見せる */
.sweep{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:var(--seam-prev);
  transition:transform .62s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.sweep--l{
  transform:translateX(-104%);
}
.sweep--r{
  transform:translateX(104%);
}
.has-sweep.armed .sweep{
  transform:translateX(0);
  transition:none;
}
/* 強み(アイボリー面) → 数値帯(ネイビー) */
#band{
  --seam-prev:var(--paper);
}
@media(prefers-reduced-motion:reduce){
  .sweep{
    display:none;
  }
}

/* ============================================================
   背景の奥行き — 単調回避の「製図紙」モチーフ
   全国マップのグリッドと呼応させた、ごく控えめなドットグリッド＋
   面の上下に効かせる薄いトーン。各セクションの可読性は維持。
   ============================================================ */
/* アイボリー面：製図紙風ドットグリッド＋上端のわずかな陰影 */
.section.paper:not(.mapsec){
  background:
    radial-gradient(circle at center, rgba(19,32,44,.05) 1px, transparent 1.5px) 0 0/27px 27px,
    linear-gradient(180deg, rgba(19,32,44,.022), transparent 140px),
    var(--paper);
}

/* ============================================================
   v2 追加：ヒーロー製品ビジュアル／正規代理店証明／マップ演出／
   バルブ注釈ホットスポット／現場バンド
   ============================================================ */

/* ---- ① mv 透過プロダクト＋スペック吊り出し ---- */
.mv-in{
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
}
.mv-fig{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.mv-valve{
  width:min(100%,560px);
  height:auto;
  filter:drop-shadow(0 34px 42px rgba(16,49,73,.30));
  animation:mvFloat 6.5s ease-in-out infinite;
  will-change:transform;
}
@keyframes mvFloat{
  0%,100%{
    transform:translateY(0) rotate(-0.5deg);
  }
  50%{
    transform:translateY(-18px) rotate(0.5deg);
  }
}
.mv-spec{
  position:absolute;
  right:clamp(-6px,1vw,8px);
  bottom:2px;
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 22px 46px -26px rgba(16,49,73,.55);
  border-radius:9px;
  padding:14px 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mv-spec .hs-row{
  display:flex;
  gap:13px;
  align-items:baseline;
  font-size:13px;
  line-height:1.3;
  white-space:nowrap;
}
.mv-spec .k{

  font-size:10.5px;
  color:var(--ink-3);
  width:30px;
  flex:none;
  letter-spacing:.02em;
}
.mv-spec .v{
  font-weight:700;
  color:var(--ink);
}
@media(prefers-reduced-motion:reduce){
  .mv-valve{
    animation:none;
  }
}
.cert-in{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:clamp(34px,5vw,72px);
  align-items:center;
}
.cert-doc{
  position:relative;
}
.cert-frame{
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  padding:clamp(13px,1.8vw,20px);
  box-shadow:0 36px 64px -36px rgba(16,49,73,.55);
  transform:rotate(-1.5deg);
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.cert-doc:hover .cert-frame{
  transform:rotate(0);
}
.cert-frame img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--line-2);
}
.cert-doc .cert-badge{
  position:absolute;
  top:-16px;
  left:-16px;
  z-index:2;
  width:84px;
  height:84px;
  border-radius:50%;
  background:var(--orange);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  font-weight:700;
  font-size:15px;
  line-height:1.15;
  text-align:center;
  letter-spacing:.04em;
  box-shadow:0 14px 26px -12px rgba(221,93,0,.6);
  border:3px solid #fff;
}
.cert-doc .cert-badge .en{

  font-size:8.5px;
  font-weight:500;
  letter-spacing:.08em;
  opacity:.92;
}
.cert-copy .kicker{
  margin-bottom:18px;
}
.cert-facts{
  margin-top:26px;
  border-top:1px solid var(--line);
}
.cert-facts > div{
  display:grid;
  grid-template-columns:128px 1fr;
  gap:18px;
  padding:13px 2px;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.cert-facts dt{

  font-size:11.5px;
  color:var(--ink-3);
  letter-spacing:.03em;
}
.cert-facts dd{
  font-size:14.5px;
  font-weight:700;
  color:var(--ink);
  line-height:1.5;
}
.cert-facts dd.mono{

  font-weight:500;
  letter-spacing:.01em;
}

/* ---- 地図マーカーの脈動（製品ホットスポットで使用） ---- */
@keyframes mkPulse{
  0%{
    transform:scale(.7);
    opacity:.85;
  }
  100%{
    transform:scale(2.1);
    opacity:0;
  }
}

/* ---- ⑤ MAP：SVG ネットワークマップ（差し替え版） ---- */
.net-map{
  --c-sales:var(--blue);
  --c-service:var(--orange-d);
  --c-land:#d4e3ee;
  --c-line:var(--blue);
  position:relative;
  height:92%;
  width:auto;
  max-width:97%;
  display:flex;
  align-items:center;
}
.net-map svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
  filter:drop-shadow(0 14px 24px rgba(16,49,73,.12));
}
.net-map .net-base{
  fill:none;
  stroke:var(--c-line);
  stroke-opacity:.20;
  stroke-width:2.4;
  stroke-linecap:round;
}
.net-map .net-flow{
  fill:none;
  stroke:var(--c-line);
  stroke-opacity:.85;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-dasharray:5 11;
}
.map-field.in .net-map .net-flow,
.im-c.in .map-field .net-map .net-flow{
  animation:netflow 1.8s linear infinite;
}
@keyframes netflow{
  to{
    stroke-dashoffset:-16;
  }
}
.net-map .pulse{
  transform-box:fill-box;
  transform-origin:center;
  opacity:0;
}
.map-field.in .net-map .pulse,
.im-c.in .map-field .net-map .pulse{
  animation:netpulse 2.6s ease-out infinite;
}
@keyframes netpulse{
  0%{
    transform:scale(.45);
    opacity:.7;
  }
  70%{
    transform:scale(2.6);
    opacity:0;
  }
  100%{
    transform:scale(2.6);
    opacity:0;
  }
}
.net-map .d1{
  animation-delay:.3s;
}
.net-map .d2{
  animation-delay:.7s;
}
.net-map .d3{
  animation-delay:1.1s;
}
.net-map .d4{
  animation-delay:1.5s;
}
.net-map .d5{
  animation-delay:.5s;
}
.net-map .d6{
  animation-delay:.9s;
}
.net-map .d7{
  animation-delay:1.3s;
}
@media(prefers-reduced-motion:reduce){
  .map-field.in .net-map .net-flow,
  .im-c.in .map-field .net-map .net-flow{
    animation:none;
    stroke-dasharray:none;
    stroke-opacity:.32;
  }
  .map-field.in .net-map .pulse,
  .im-c.in .map-field .net-map .pulse{
    animation:none;
    opacity:0;
  }
}

/* ---- ⑥ ABOUT バルブ注釈ホットスポット ---- */
.ev-fig{
  position:relative;
  border-radius:10px;
  background:radial-gradient(125% 105% at 62% 24%, #ffffff 0%, #eef5fb 64%, #e2eef7 100%);
  padding:50px 40px;
  overflow:visible;
  margin-bottom: 60px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
}
.ev-fig::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.5;
  background:radial-gradient(circle at center, rgba(19,32,44,.05) 1px, transparent 1.5px) 0 0/26px 26px;
  -webkit-mask:radial-gradient(120% 100% at 60% 30%,#000 40%,transparent 100%);
  mask:radial-gradient(120% 100% at 60% 30%,#000 40%,transparent 100%);
}
.ev-stage{
  position:relative;
  z-index:1;
}
.ev-img{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 24px 32px rgba(16,49,73,.18));
}
.ev-hot{
  position:absolute;
  width:34px;
  height:34px;
  transform:translate(-50%,-50%);
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
  z-index:4;
}
.ev-hot[data-i="0"],.ev-tip[data-i="0"]{
  left:22%;
  top:40%;
}
.ev-hot[data-i="1"],.ev-tip[data-i="1"]{
  left:50%;
  top:73%;
}
.ev-hot[data-i="2"],.ev-tip[data-i="2"]{
  left:64%;
  top:90%;
}
.ev-hot .dot{
  position:absolute;
  inset:10px;
  border-radius:50%;
  background:var(--orange-d);
  box-shadow:0 0 0 5px rgba(255,107,0,.20),0 4px 10px rgba(16,49,73,.3);
  transition:transform .2s,background .2s;
}
.ev-hot .dot::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:2px solid rgba(255,107,0,.5);
  animation:mkPulse 2.4s ease-out infinite;
}
.ev-hot .num{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:12px;
  color:#fff;
  font-weight:600;
  z-index:2;
  pointer-events:none;
}
.ev-hot:hover .dot,.ev-hot.active .dot{
  transform:scale(1.18);
  background:var(--orange-d);
}
.ev-tip{
  position:absolute;
  transform:translate(-50%,calc(-100% - 18px));
  z-index:6;
  background:var(--ink);
  color:#fff;
  padding:9px 13px;
  border-radius:8px;
  font-size:12.5px;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  box-shadow:0 14px 28px -14px rgba(0,0,0,.55);
}
.ev-tip::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-5px;
  width:10px;
  height:10px;
  background:var(--ink);
  transform:translateX(-50%) rotate(45deg);
}
.ev-hot:hover ~ .ev-tip[data-i],.ev-hot.active ~ .ev-tip{
}
.ev-tip.show{
  opacity:1;
  transform:translate(-50%,calc(-100% - 12px));
}
.about-points .pt{
  transition:background .25s,box-shadow .25s,padding .25s;
  border-radius:0 8px 8px 0;
}
.about-points .pt.lit{
  background:var(--orange-wash);
}
.ev-hint{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  color: #000;
  letter-spacing:.02em;
}
.ev-hint .d{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 3px rgba(255,107,0,.2);
}
@media(prefers-reduced-motion:reduce){
  .ev-hot .dot::after{
    animation:none;
  }
}

/* ---- 現場バンド（実写・全幅） ---- */
.fieldband{
  position:relative;
  overflow:hidden;
  background:#0e1822;
}
.fieldband img{
  width:100%;
  height:clamp(260px,38vw,440px);
  object-fit:cover;
  display:block;
  opacity:.9;
}
.fieldband .ov{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(14,24,34,.82) 0%,rgba(14,24,34,.45) 42%,rgba(14,24,34,.1) 100%);
}
.fieldband .fb-in{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
}
.fieldband .fb-copy{
  max-width:520px;
  color:#fff;
}
.fieldband .fb-tag{

  font-size:12px;
  letter-spacing:.06em;
  color:#ffb27a;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.fieldband .fb-tag .rule{
  width:22px;
  height:1px;
  background:var(--orange);
}
.fieldband .fb-copy h3{
  font-size:clamp(1.3rem,2.6vw,2rem);
  font-weight:700;
  line-height:1.45;
  letter-spacing:.01em;
}
.fieldband .fb-copy p{
  margin-top:12px;
  font-size:14.5px;
  line-height:1.9;
  color:rgba(255,255,255,.82);
  font-weight:500;
  max-width:42ch;
}
@media(max-width:980px){
  .mv-in{
    grid-template-columns:1fr;
  }
  .mv-fig{
    order:0;
    max-width:380px;
    margin:6px auto 0;
  }
  .mv-valve{
    width:100%;
  }
  .mv-spec{
    position:static;
    width:100%;
    margin-top:16px;
    right:auto;
    bottom:auto;
  }
  .cert-in{
    grid-template-columns:1fr;
  }
  .cert-doc{
    max-width:520px;
  }
  .cert-facts > div{
    grid-template-columns:120px 1fr;
  }
}

/* ============================================================
   v3 追加：拠点データ訂正（営業5＋サービス5）— バンド統計／
   2カテゴリのマップマーカー
   ============================================================ */

/* ---- NUMBER BAND：営業5 ＋ サービス5 ---- */
.band-stats{
  display:flex;
  align-items:center;
  gap:clamp(16px,3.4vw,38px);
}
.bstat{
  display:flex;
  flex-direction:column;
  line-height:1;
}
.bstat .bn{

  font-weight:500;
  font-size:clamp(52px,8.5vw,92px);
  letter-spacing:-.03em;
  color:#fff;
  display:flex;
  align-items:baseline;
  gap:.12em;
}
.bstat .bn .u{
  font-size:.26em;
  font-weight:500;
  letter-spacing:.02em;
  color:rgba(255,255,255,.78);
}
.bstat .bl{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:700;
  color:rgba(255,255,255,.78);
  letter-spacing:.04em;
  margin-top:12px;
}
.bstat .bl::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  flex:none;
}
.bstat.sales .bl::before{
  background:var(--navy);
  box-shadow:0 0 0 2px rgba(255,255,255,.5);
}
.bstat.svc .bn{
  color:#ffb27a;
}
.bstat.svc .bl::before{
  background:var(--orange);
}
.bplus{

  font-size:clamp(26px,3.4vw,40px);
  color:var(--orange);
  font-weight:500;
  align-self:center;
}
@media screen and (max-width:768px){
  .band-stats{
    gap:18px;
  }
  .bplus{
    font-size:24px;
  }
}

@media screen and (min-width:769px){
  .ctabar {
    display: block;
    position: fixed;
    right: 0;
    left: auto;
    top: 30%;
    bottom: auto;
    transform: translateY(-50%);
    z-index: 9999;               
    
    width: auto;
    max-width: 70px;             
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    border-radius: 6px 0 0 6px;  
    box-shadow: -5px 5px 25px rgba(13, 24, 34, 0.15);
    transition: none;
  }
  
  /* 内部のコンテナ */
  .ctabar .wrap,
  .ctabar-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 20px 10px;
    width: 100%;
  }

  .ctabar .btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 25px 18px;
    border: none;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-align: center;
    border-radius: 6px 0 0 6px;
  }
  .ctabar .ctabar-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
  
  /* ★PC版：メールアイコンと、テキストとの間のボーダー設定 */
  .ctabar .btn .mail {
    width: 25px;
    height: 25px;
    background: url(../assets/images/mail.png) no-repeat center center / contain;
    display: block;
  }

  .ctabar .btn .line {
    width: 1px;
    height: 24px;
    border: 1px dotted #fff;
    padding: 0;
    display: block;
    rotate: 90deg;
  }
}

.pc {
  display: block;
}
.sp {
  display: none;
}

/* --- スマホ：はみ出し防止（最低限） --- */
@media screen and (max-width:768px){
  html,body{
    overflow-x:hidden;
    max-width:100%;
  }
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
  body{
    font-size:16px;
  }
  h1.mv-h,.sec-lead,.sec-desc,#products .sec-desc{
    white-space:normal !important;
  }
  #products .sec-desc {
    margin-block: 32px;
    font-size: 14px;
    line-height: 22.4px;
  }
  #issues {
    padding: 54px 15px 0;
  }
  .issues-in {
    gap: 32px;
  }
  .issues .q{
    font-size: 20px;
  }
  .issues .q .o{
    font-size: 25px;
  }
  .issues .turn .t{
    font-size:18px;
    padding-bottom: 64px;
    text-align: center;
  }
  .issues .turn .t .o{
    font-size:20px;
  }
  .issue-list{
    flex-direction:column !important;
    align-items:stretch;
    width:100%;
    max-width:100%;
  }
  .issue{
    width:100%;
    max-width:100%;
    min-width:0;
    flex-direction: row;
  }
  .issue .no {
    font-size: 18px;
  }
  .issue .tx {
    font-size: 15px;
  }
  .issue .tx br{
    display: none;
  }
  .tier-top,
  .prodgrid,
  .ext-grid{
    grid-template-columns:1fr !important;
    width:100%;
    max-width:100%;
  }
  .scard,.pcard,.ext-card{
    min-width:0;
  }
  .tier-bar .t{
    white-space:normal;
    font-size:16px;
  }
  .tier-bar{
    gap:10px;
  }
  .tier-bar::before,
  .tier-bar .l{
    height:6px;
    background-image:radial-gradient(circle 2px at 50% 50%,
      var(--orange) 0%,
      var(--orange) 68%,
      rgba(255,107,0,0) 100%);
    background-size:7px 6px;
  }
}
@media screen and (max-width:768px){
  .section{
    padding-block: 60px 0px;
  }
  /* iOS：入力フォーカス時のズーム防止 */
  .field input,.field select,.field textarea{
    font-size:16px;
  }
  /* 適用例：3Dの高さを抑える */
  .viz-inner iframe{
    height:min(30vh,300px);
  }
  /* 製品センサー3連は縦に */
  .pcard .pimg.sensor-3up{
    grid-template-columns:1fr 1fr 1fr;
  }
  /* マップ凡例の折返し */
  .map-legend .lg .sub{
    display:block;
  }
}
@media(prefers-reduced-motion:reduce){
  .drawer{
    transition:none;
  }
  .ctabar{
    transition:none;
  }
}

/* ============================================================
   スマホ：カードを1列化
   ============================================================ */
@media screen and (max-width:768px){
  .tier-top{
    gap:12px;
  }
  .tier-top .scard{
    padding:20px 18px 22px;
  }
  .tier-top .scard h3{
    font-size:16px;
    margin-bottom:10px;
  }
  .tier-top .scard p{
    font-size:13.5px;
    line-height:1.8;
  }
  .prodgrid{
    gap:18px;
  }
  .ext-grid{
    gap:14px;
  }
  .ext-card .ext-body{
    padding:10px 15px;
  }
  .ext-card h3{
    font-size:15px;
    flex-direction:column;
    align-items: flex-start;
    gap: 5px;
  }
  .ext-card .ext-body .e {
    font-size: 10px;
  }
  .ext-card p{
    font-size:13.5px;
    line-height:1.8;
  }
  .service .tx-a .h{
    font-size:20px;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  .service .tx-a .h .b {
    font-size:26px;
  }
  .service .tx-a .h .o {
    font-size:26px;
  }
  .service .tx-a .d{
    font-size:14px;
  }
  .strength .im-c .map-field{
    height:min(62vw,320px);
  }
  .strength .im-c .map-legend{
    gap:5px;
  }
  .strength .im-c .map-legend .m {
    width: 12px;
    height: 12px;
    vertical-align: middle;
  }
  .strength .im-c .map-legend .lg{
    font-size:12px;
    gap: 10px;
  }
}

/* ============================================================
   ① mv — スマホ：画像なし・テキスト主役（D案 / SP改修）
   PCは不変。製品画像は直後の「エナジーバルブとは」で主役化。
   ============================================================ */
@media screen and (max-width:768px){
  .mv {
    aspect-ratio:345/518;
  }
  .mv-vid {
    width: var(--contentssp);
  }
  .mv-fig{
    display:none;
  }
  .mv-in{
    display:flex;
    flex-direction:column;
    gap:0;
    min-height:0;
    bottom: 10px;
    padding:0 0 0 7vw;
    width: 100%;
    left: 0;
  }
  .mv-copy{
    max-width:none;
  }
  .mv-eyebrow{
    margin-bottom:18px;
    font-size:14px;
  }
  h1.mv-h{
    font-size: 31px;
    line-height:1.3;
    margin-bottom:18px;
    width: 90%;
  }
  .mv-sub{
    font-size:15px;
    line-height:1.5;
    margin-bottom:26px;

  }
}
@media screen and (max-width:768px){
  .sec-lead{
    font-size: 24px!important;
    line-height: 33.6px!important;
  }
  .kicker {
    font-size: 16px;
    margin-bottom: 10px;
    padding: 0 4px 0 8px;
  }
  .sec-top {
    padding-bottom: 14px!important;
    margin-bottom: 32px!important;
  }
}
@media screen and (max-width:768px){
  .issues .sub{
    margin-top: 24px;
  }
  .issue {
    border-radius: 6px;
  }
}
@media screen and (max-width:768px){
  .strength{
    padding: 48px 0;
    overflow: hidden;
    width: var(--contentssp);
  }
  .strength .wrap{
    padding-inline: 15px;
  }
  .service .tx-a .e {
    font-size: 14px;
    letter-spacing: 0.08em;
  }
  .service .tx-a .d p {
    line-height: 22.4px;
    font-size: 14px;
  }
  .im-b {
    height: 100%;
  }
  .im-b.certificate {
    width: auto;
    height: 200px;
    margin-inline: auto;
  } 

}
@media screen and (max-width:768px){
  .section.about {
    width: 100%;
    padding: 64px 0
  }
  .about .sec-top {
    width: calc(100% - 60px);
    margin-inline: auto;
  }
  .about-in{
    width: var(--contentssp);
    margin-inline: auto;
    grid-template-columns:1fr;
    gap: 20px;
    padding-inline: 15px;
  }
  .ev-fig {
    margin-bottom: 0;
  }
  .about-points .pt {
    padding: 20px 0;
  }
  .about-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .about-link {
    width: 61%;
  }
  .about-points .pt h3 {
    font-size: 16px;
  }
  .about-points .pt .n {
    padding-top: 0;
  }
  .about-points .pt p {
    margin-left: -30px;
  }
  .viz-head .znum {
    font-size: 14px;
    line-height: 28px;
    margin-bottom: 10px;
  }
  .zrow .znum {
    font-size: 14px;
    line-height: 28px;
    margin-bottom: 10px;
  }
  .viz-head h3 {
    font-size: 20px;
    line-height: 28px;
  }
}
@media screen and (max-width:768px){
  .section.example {
    width: var(--contentssp);
    padding: 48px 15px 68px;
  }
  .example .sec-top {
    width: 100%;
    margin-inline: auto;
  }
  .viz {
    margin-top: 30px;
  }
}
@media screen and (max-width:768px){
  .section#products {
    padding: 61px 15px 64px;
  }
  .section.dense .wrap {
    padding-inline: 15px;
  }
  .pcard {
    padding: 15px!important;
  }
  .prodgrid .pcard .pbody {
    padding: 12px 5px 10px 5px;
  }
  .prodgrid .pcard .pd {
    font-size: 12px;
    margin-bottom: 0;
  }
  #flow.section.dense {
    width: var(--contentssp);
    padding: 48px 15px 48px;
  }
  #flow.section.dense .wrap {
    padding-inline: 0;
  }
  .flow2 {
    gap: 14px;
  }
  .fstep2-inner .bd .rule {
    margin-right: 8px;
  }
  .flow2 .farrow{
    width: 14px;
    height: 14px;
  }
  .farrow::before {
    border-right: 2px solid var(--orange-d);
    border-top: 2px solid var(--orange-d);
  }
  .section.tight {
    padding: 61px 15px 68px;
  }
  .section.tight .wrap {
    padding-inline: 15px;
  }
  .qa {
    margin-top: 18px;
  }
  .qa .q {
    padding: 15px;
  }
  .qa .q .qt {
    font-size: 15px;
    line-height: 21px;
  }
  .contact {
    width: var(--contentssp);
    padding: 45px 15px 48px;
  }
  .contact h2 {
    font-size: 24px;
    padding-bottom: 14px;
    margin-bottom: 14px;
  }
  .contact .cdesc {
    font-size: 14px;
  }
  .contact .cmeta .it {
    align-items: center;
  }
  .contact .cmeta {
    margin-top: 16px;
    gap: 8px;
  }
  .contact .cmeta .lb {
    padding-top: 0;
    width: 55px;
    font-size: 11px;
  }
  .contact .cmeta .vl {
    font-size: 11px;
  }
  .contact-in {
    gap: 24px;
  }
  .form {
    padding: 24px;
  }
  .form .frow {
    gap:0;
  }
  .field {
    margin-bottom: 20px;
  }
}
@media screen and (max-width:768px){
  /* --- 下部追従CTAバー --- */
  .ctabar{
    display:block;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:90;
    background:rgba(255,255,255,.93);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    box-shadow:0 -12px 30px -20px rgba(13,24,34,.34);
    transform:translateY(125%);
    transition:transform .34s cubic-bezier(.4,0,.2,1);
  }
  body.nav-open .ctabar{
    transform:translateY(125%) !important;
  }
  .ctabar.show{
    transform:none;
  }
  .ctabar .btn{
    width:100%;
    padding:15px;
    font-size:15.5px;
    border: none;
    border-radius: 0;
  }
  .ctabar .btn .mail {
    width: 20px;
    height: 20px;
    border-bottom: none;
    background: url(../assets/images/mail.png) no-repeat center center / contain;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
  }
}

/*====================================
ヘッダー
====================================*/
header {
	width: 100%;
}
.home header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	translate: 0 -100%;
}
.loaded header {
	animation: header_fadeIn .5s ease-out 1.7s forwards;
}
.header_inner {
	display: flex;
	align-items: center;
	padding: 27px 20px 25px 32px;
  background: #fff;
}
.header_nav_wrapper {
	margin-inline-start: auto;
}
.header_nav {
	display: flex;
	align-items: center;
	gap: 0 41px;
	margin: 0;
	padding: 0;
}
.header_nav_items>a {
	color: #333;
	font-size: 1.6rem;
	transition: opacity .3s ease-in-out;
	padding-block: 50px;
}
.home .header_nav_items>a {
	color: #fff;
}
.header_nav_items:nth-child(1)>a::after,
.header_nav_items:nth-child(2)>a::after,
.header_nav_items:nth-child(4)>a::after {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	rotate: 45deg;
	margin-inline-start: 12px;
	translate: 0 -4px;
}
.home .header_nav_items:nth-child(1)>a::after,
.home .header_nav_items:nth-child(2)>a::after,
.home .header_nav_items:nth-child(4)>a::after {
	border-color: #fff;
}
.header_nav_items>a:not(.header_toRecruit_btn):hover {
	opacity: .6;
}
.header_nav_items .header_toRecruit_btn {
	display: block;
	width: 175px;
	margin-inline-start: 38px;
	padding-block: 25px 21px;
	background: #fff;
	border: 1px solid #113e9f;
	color: #113e9f;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	position: relative;
	overflow: hidden;
	transition: color .4s ease-in-out;
}
.home .header_nav_items .header_toRecruit_btn {
	color: #113E9F;
}
.header_nav_items .header_toRecruit_btn:hover {
	color: #fff;
}
.header_nav_items .header_toRecruit_btn:hover::after {
	width: 200%;
	height: 200%;
}
.header_nav_items .header_toRecruit_btn::after {
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	background: url(https://www.e-ryoto.co.jp/ryoto-p/head-p/recruit_arrow.png) no-repeat bottom 6px right 8px/11px 11px, linear-gradient(to bottom, #3d8ffc, #113fa1);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 10;
	transition: width .4s ease-in-out, height .4s ease-in-out;
}
.header_nav_items .header_toRecruit_btn span {
	position: relative;
	z-index: 20;
}
.header_nav_pullDown {
	display: none;
	justify-content: center;
	background: rgb(16 62 159/.95);
	width: 100%;
	padding-block: 62px 71px;
	position: absolute;
	top: 116px;
	left: 0;
	opacity: 0;
	transition: opacity .3s ease-in-out .3s;
	z-index: 999;
}
.header_nav_pullDown.shown {
	display: flex;
	animation: header_pullDown .5s ease-in-out forwards;
}
.header_nav_pullDown_list:first-child {
	padding-inline-end: 10.4166666666667%;
}
.header_nav_pullDown_list_items+.header_nav_pullDown_list_items {
	margin-block-start: 40px;
}
.header_nav_pullDown_list_items a::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	position: absolute;
	top: 50%;
	left: 0;
	translate: 0 -50%;
	rotate: 45deg;
}
.header_nav_pullDown_list_items a {
	display: block;
	color: #fff;
	font-size: 1.6rem;
	text-align: left;
	padding-inline-start: 25px;
	position: relative;
	transition: opacity .3s ease-in-out;
}
.header_nav_pullDown_list_items a:hover {
	opacity: .6;
}
@keyframes header_fadeIn {
	0% {
		translate: 0 -100%;
		opacity: 0;
	}
	100% {
		translate: 0 0;
		opacity: 1;
	}
}
@keyframes header_pullDown {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/*====================================
フッター
====================================*/
footer:not(.entry-meta) {
	background: url(https://www.e-ryoto.co.jp/ryoto-p/common-p/footer_bg.png) no-repeat center/cover;
	padding-block: 92px 38px;
	position: relative;
}
.toTop {
	display: block;
	width: 96px;
	height: 50px;
	background: linear-gradient(45deg, #113E9F, #3D92FF);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	position: absolute;
	top: -50px;
	right: 0;
}
.toTop::before {
	content: "";
	display: block;
	width: 1px;
	height: 15px;
	background: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% 0;
}
.toTop::after {
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	border-left: 1px solid #fff;
	border-top: 1px solid #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	rotate: 45deg;
	translate: -50% 0;
}
.footer_inner {
  width: 89.33%;
  max-width: 1200px;
  margin-inline: auto;
}
.footer_logo_area {
	padding-block-end: 32px;
	border-bottom: 1px solid #86bbef;
	margin-block-end: 59px;
}
.footer_logo_area figure {
	margin: 0;
}
.footer_nav_area {
	display: grid;
	grid-template-columns: 37.5% 39% 23.5%;
	padding-block-end: 100px;
}
.footer_nav_area>nav:nth-of-type(2) {
	display: flex;
	flex-direction: column;
	gap: 65px 0;
	;
}
.footer_nav_wrapper.fadeIn:nth-child(2) {
	transition-delay: .25s;
}
.footer_nav_wrapper.fadeIn:last-child {
	transition-delay: .5s;
}
.footer_nav li:not(:last-child) {
	margin-block-end: 42px;
}
.footer_nav li :is(a, a:visited) {
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	letter-spacing: .1em;
	text-decoration: none;
}
.footer_nav li a.footer_nav_head {
	font-size: 2rem;
}
.footer_nav li a:not(.footer_nav_head) {
	padding-inline-start: 28px;
	position: relative;
}
.footer_nav li a:not(.footer_nav_head)::before,
.footer_nav li a:not(.footer_nav_head)::after {
	content: "";
	display: block;
	height: 1px;
	background: #fff;
	position: absolute;
	bottom: 6px;
}
.footer_nav li a:not(.footer_nav_head)::before {
	width: 15px;
	left: 0;
}
.footer_nav li a:not(.footer_nav_head)::after {
	width: 8px;
	left: 7px;
	transform-origin: right bottom;
	rotate: 52deg;
}
.footer_copyright_area {
	padding-block-start: 42px;
	border-top: 1px solid #86bbef;
}
.footer_copyright {
	max-width: 1200px;
	color: #97accc;
	font-size: 1.2rem;
	line-height: 1;
	text-align: right;
	letter-spacing: .1em;
}

@media screen and (max-width: 768px) {

  html {
    font-size: 87.5%;
  }

  /*====================================
	ヘッダー
	====================================*/

	header {
		box-sizing: border-box;
		width: 100%;
	}
	.header_inner {
		display: flex;
		justify-content: space-between;
		width: calc(100% - calc(calc(100% - 89.33%) / 2));
		padding: 0;
		margin-inline-start: calc(calc(100% - 89.33%) / 2);
		height: 15vw;
	}
	.home .header_inner {
		padding: 0;
	}
	.header_logo {
		width: 44.51%;
	}
	.header_logo a {
		display: flex;
		align-items: center;
		height: 100%;
	}
	.header_logo a img {
		width: 100%;
		object-fit: contain;
	}
	.header_links {
		width: 48.73%;
		display: flex;
		height: 100%;
        align-items: center;
	}
	.header_toRecruit_btn {
		height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
		box-sizing: border-box;
		width: 58.38%;
		background: #fff;
		border: 1px solid #113e9f;
		color: #113e9f;
		font-size: 3vw;
		font-weight: bold;
		text-align: center;
		line-height: 1;
		position: relative;
		overflow: hidden;
		transition: color .4s ease-in-out;
	}
	.header_toRecruit_btn:hover {
		color: #fff;
	}
	.header_toRecruit_btn:hover::after {
		width: 200%;
		height: 200%;
	}
	.header_toRecruit_btn::after {
		content: "";
		display: block;
		width: 9vw;
		height: 9vw;
		background: url(https://www.e-ryoto.co.jp/ryoto-p/head-p/recruit_arrow.png) no-repeat bottom 1.5vw right 2vw/2vw 2vw, linear-gradient(to bottom, #3d8ffc, #113fa1);
		clip-path: polygon(100% 0, 100% 100%, 0 100%);
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 10;
		transition: width .4s ease-in-out, height .4s ease-in-out;
	}
	.header_toRecruit_btn span {
		position: relative;
		z-index: 20;
	}
	.header_hbg {
		display: block;
		width: 41.62%;
		padding: 0;
		border: none;
		background: #113E9F;
		position: relative;
		height: 100%;
	}
	.header_hbg span {
		display: block;
		width: 45%;
		height: 1px;
		background: #fff;
		position: absolute;
		left: 50%;
		translate: -50% 0;
		transition: .5s ease-in-out;
	}
	.header_hbg span:first-child {
		top: 30%;
		transform: translateY(-50%);
	}
	.header_hbg span:nth-child(2) {
		top: 50%;
		transform: translateY(-50%);
	}
	.header_hbg span:last-child {
		top: 70%;
		transform: translateY(-50%);
	}
	.header_hbg.btn_close span:first-child {
		rotate: 30deg;
		top: 50%;
		translate: -50% -50%;
	}
	.header_hbg.btn_close span:nth-child(2) {
		opacity: 0;
	}
	.header_hbg.btn_close span:last-child {
		rotate: -30deg;
		top: 50%;
		translate: -50% -50%
	}
	.header_hbg_content {
		width: 100%;
		height: calc(100vh - 15vw);
		overflow-y: scroll;
		background: #113E9F;
		position: fixed;
		top: 18vw;
		left: 0;
		z-index: -999;
		opacity: 0;
		transition: z-index .5s ease-in-out, opacity .5s ease-in-out;
	}
	.header_hbg_content.active {
		z-index: 999;
		opacity: 1;
	}
	.header_hbg_nav_wrapper {
		width: 89.33%;
		margin: 0 auto;
	}
	.header_hbg_nav_items {
		border-bottom: 2px solid #8B95AA;
	}
	.header_hbg_nav_items>a {
		display: block;
		padding-block: 48px;
		color: #fff;
		line-height: 1;
		font-size: 5vw;
		text-align: left;
		position: relative;
	}
	.header_hbg_nav_items>a::after {
		content: "";
		display: block;
		width: 14px;
		height: 14px;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		rotate: 45deg;
		position: absolute;
		right: 4px;
		top: 50%;
		translate: 0 -50%;
	}
	:is(.header_hbg_nav_items:nth-child(2), .header_hbg_nav_items:nth-child(3), .header_hbg_nav_items:nth-child(5))>a::after {
		rotate: -45deg;
	}
	.header_hbg_nav_items_nav_items {
		margin-block-end: 32px;
	}
	.header_hbg_nav_items_nav_items a {
		display: block;
		padding-inline: 44px;
		color: #fff;
		font-size: 4vw;
		line-height: 1.5;
		text-align: left;
		position: relative;
	}
	.header_hbg_nav_items_nav_items a::before {
		content: "";
		display: block;
		width: 22px;
		height: 2px;
		background: #8B95AA;
		position: absolute;
		top: 50%;
		left: 0;
		translate: 0 -50%;
	}

  
	/*====================================
	  フッター
	  ====================================*/
	footer:not(.entry-meta) {
		background: url(https://www.e-ryoto.co.jp/ryoto-p/common-p/footer_bg-sp.jpg) no-repeat center / cover;
		padding-block: 122px 36px;
	}
	.toTop {
		width: 188px;
		height: 94px;
		right: 4px;
		top: -94px;
	}
	.toTop::before {
		width: 2px;
		height: 30px;
	}
	.toTop::after {
		width: 14px;
		height: 14px;
		border-width: 2px;
	}
	.footer_logo_area {
		padding-block-end: 40px;
		margin-block-end: 68px;
	}
	.footer_logo_area img {
		width: 390px;
		height: auto;
	}
	.footer_nav_area {
		grid-template-columns: 100%;
		gap: 120px 0;
		padding-block-end: 242px;
	}
	.footer_nav_area>nav:nth-of-type(2) {
		gap: 120px 0;
		;
	}
	.footer_nav li:not(:last-child) {
		margin-block-end: 44px;
	}
	.footer_nav li :is(a, a:visited) {
		display: block;
		text-align: left;
		font-size: 2.28571428571429rem;
		letter-spacing: .05em;
		line-height: 1.5;
	}
	.footer_nav li a:not(.footer_nav_head) {
		padding-inline-start: 52px;
	}
	.footer_nav li a.footer_nav_head {
		font-size: 2.57142857142857rem;
		letter-spacing: .05em;
	}
	.footer_nav li a.footer_nav_head>img {
		width: 420px;
		height: auto;
	}
	.footer_nav li a:not(.footer_nav_head)::before,
	.footer_nav li a:not(.footer_nav_head)::after {
		height: 2px;
		bottom: calc(50% - 6px);
		translate: 0 -50%;
	}
	.footer_nav li a:not(.footer_nav_head)::before {
		width: 30px;
	}
	.footer_nav li a:not(.footer_nav_head)::after {
		width: 16px;
		left: 14px;
	}
	.footer_copyright_area {
		padding-block-start: 40px;
	}
	.footer_copyright {
		font-size: 3vw;
		text-align: center;
	}
}

@media screen and (max-width: 768px) {
}

@media screen and (max-width:768px){
.header_inner {
  height: 70px;
 }
 footer {
  transform: scale(0.461255);
  transform-origin: left top;
  width: 813px;
 }
}
header, footer {
  font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
}
footer .content{
  width: 89.33%;
    max-width: 1200px;
    margin-inline: auto;
}