/* ============================================================
   ガイドページ 共通デザイン（はじめての方へ 法人／個人）
   ------------------------------------------------------------
   このファイルが「デザインの正」です。見た目を変えたいときは
   ここだけを直してください。

   ページ固有の違いは、本文側の <div id="psr-guide" class="..."> の
   クラスで切り替えています。
     .psr--corp … 法人ページ
     .psr--pers … 個人ページ
   ============================================================ */

/* ---------- 色・基本 ---------- */
#psr-guide{--red:#d80c18;--red-dark:#a80710;--black:#111;--ink:#202124;--muted:#666;--line:#e4e4e4;--soft:#f5f5f5;--white:#fff;--max: 1068px;--shadow:0 14px 38px rgba(0,0,0,.09)}
#psr-guide, #psr-guide *{box-sizing:border-box}
#psr-guide{scroll-behavior:smooth}
#psr-guide{margin:0;color:var(--ink);background:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-size:16px;line-height:1.8}
#psr-guide a{color:inherit;text-decoration:none}
#psr-guide button{font:inherit}
/* ヘッダー・フッターの .wrap と同じ計算にして、左右の端をきっちりそろえる */
#psr-guide .container{width:min(var(--max),100% - 32px);margin-inline:auto}
/* サイト側 Bootstrap 3 の clearfix が grid の子として数えられ、
   ヒーローの2カラムが入れ替わるのを防ぐ（管理画面から貼る場合に必要） */
#psr-guide .container:before,#psr-guide .container:after{content:none;display:none}
#psr-guide [id]{scroll-margin-top:70px}

/* ---------- ヒーロー ---------- */
#psr-guide .hero{position:relative;color:#fff;background:#f2f0ee;overflow:hidden}
#psr-guide .hero-layer{position:absolute;inset:0}
#psr-guide .hero-photo{clip-path:polygon(0 0,67% 0,52% 100%,0 100%);background:url(https://rental.pandastudio.tv/html/upload/save_image/editor/0903223221_6a9976e571bec.jpg) center/cover no-repeat}
#psr-guide .hero-shade{clip-path:polygon(0 0,52% 0,40% 100%,0 100%);background:linear-gradient(100deg,rgba(8,8,8,.84) 0%,rgba(24,9,11,.74) 55%,rgba(74,10,16,.64) 100%)}
#psr-guide .hero-edge{clip-path:polygon(52% 0,60% 0,46% 100%,40% 100%);background:rgba(216,14,26,.88)}
#psr-guide .hero-edge2{clip-path:polygon(60% 0,67% 0,52% 100%,46% 100%);background:rgba(216,14,26,.5)}
#psr-guide .hero .container{position:relative;z-index:2;min-height:680px;display:grid;align-items:center;gap:20px;padding-block:48px}
#psr-guide.psr--corp .hero .container{grid-template-columns:1fr 1.2fr}
#psr-guide.psr--pers .hero .container{grid-template-columns:1.2fr 1fr}
#psr-guide .eyebrow{display:flex;align-items:center;gap:10px;color:#ffdada;font-weight:900;letter-spacing:.12em;font-size:13.12px}
#psr-guide .eyebrow:before{content:"";display:block;width:42px;height:3px;background:var(--red)}
#psr-guide .p-page-title{font-size:clamp(32px,4.6vw,64px);line-height:1.32;letter-spacing:.01em;margin:.3em 0;font-weight:700}
#psr-guide .hero-lead{font-size:clamp(16px,1.55vw,17.28px);color:#ededed;max-width:100%;text-wrap:pretty}
#psr-guide .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
#psr-guide .hero-visual{position:relative;min-height:460px;display:grid;place-items:center}
#psr-guide .hero-illust{display:block;width:100%;height:auto}
#psr-guide.psr--corp .hero-illust{max-width:640px;margin-right:-28px}
#psr-guide.psr--pers .hero-illust{max-width:460px;justify-self:end;margin-right:-10px}
#psr-guide .hero-ring{position:absolute;width:162px;height:162px;border:18px solid var(--red);border-radius:50%;background:rgba(17,17,17,.58);background-clip:padding-box;display:grid;place-items:center;text-align:center;box-shadow:0 10px 26px rgba(0,0,0,.22)}
#psr-guide.psr--corp .hero-ring{right:16px;bottom:-60px}
#psr-guide.psr--pers .hero-ring{right:6px;bottom:-46px}
#psr-guide .hero-number{font-size:41.6px;font-weight:950;letter-spacing:0;display:flex;flex-direction:column;align-items:center;line-height:1}
#psr-guide .hero-number .hn-row{display:flex;align-items:baseline;gap:2px}
#psr-guide .hero-number small{display:block;font-size:11.2px;line-height:1.3;font-weight:800;letter-spacing:.02em;text-align:center;white-space:nowrap;margin-top:5px}

/* ---------- ボタン ---------- */
#psr-guide .btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:12px 24px;border-radius:6px;font-weight:900;box-shadow:0 7px 18px rgba(0,0,0,.12);white-space:normal;border:0;font-size:inherit;line-height:1.4;text-transform:none;vertical-align:baseline}
#psr-guide .btn.primary{background:var(--red);color:#fff}
#psr-guide .btn.primary:hover{background:#f01724}
#psr-guide .btn.ghost{color:#fff;border:1px solid #777;background:rgba(255,255,255,.04)}
/* 下部CTAのボタン。法人・個人とも赤地×白文字でそろえる */
#psr-guide .btn.light{background:var(--red);color:#fff}
#psr-guide .btn.light:hover{background:#f01724}

/* ---------- パンくず・種別タブ ---------- */
#psr-guide .crumb{padding:14px 0;color:#777;font-size:13.12px;border-bottom:1px solid var(--line)}
#psr-guide .crumb a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c9ccd0}
#psr-guide .crumb a:hover{color:#b62434;text-decoration-color:currentColor}
#psr-guide .audience-tabs{display:grid;grid-template-columns:1fr 1fr;margin-top:34px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
#psr-guide .audience-tabs a{padding:16px;text-align:center;font-weight:900;background:#fff}
#psr-guide .audience-tabs .active{background:var(--red);color:#fff}

/* ---------- セクション見出し ---------- */
#psr-guide .section{padding:76px 0}
#psr-guide .section.soft{background:var(--soft)}
#psr-guide .section.black{background:var(--black);color:#fff}
#psr-guide .section-head{max-width:none;margin-bottom:38px}
#psr-guide .section-head .lead{max-width:860px}
#psr-guide .kicker{color:var(--red);font-size:13.12px;font-weight:950;letter-spacing:.14em}
#psr-guide .section h2{font-size:clamp(28px,3vw,42.4px);line-height:1.3;margin:.25em 0 .45em;letter-spacing:-.035em}
#psr-guide .lead{font-size:16.8px;color:var(--muted);margin-bottom:0}
#psr-guide .black .lead{color:#ccc}

/* ---------- 特徴カード ---------- */
#psr-guide .feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}

#psr-guide .feature{position:relative;background:#fff;border:1px solid var(--line);border-radius:7px;padding:24px 26px 28px;box-shadow:none}
#psr-guide .feature-no{font-size:11.5px;font-weight:950;color:#b62434;letter-spacing:.1em;padding-right:56px}
#psr-guide .feature h3{font-size:20px;line-height:1.45;margin:2px 0 9px;padding-right:56px;text-wrap:balance;word-break:auto-phrase}
#psr-guide .feature p{margin:0;color:#555;font-size:15px;line-height:1.85;text-align:justify;text-justify:inter-ideograph;word-break:normal;overflow-wrap:anywhere}

/* 連番（右上・薄いグレー）。data-no の値をそのまま出す */
#psr-guide .feature[data-no]:before{content:attr(data-no);position:absolute;top:20px;right:24px;font-size:34px;font-weight:950;line-height:1;letter-spacing:-.03em;color:#e6e8ea}
/* 見出しを2行ぶんの高さで固定し、隣のカードと本文の開始位置をそろえる（1段組では不要） */
@media(min-width:621px){
#psr-guide .feature h3{min-height:2lh}
}
#psr-guide .feature .note{margin-top:12px;font-size:12.48px;color:#777;text-align:justify;text-justify:inter-ideograph}

/* ---------- 帳票ブロック（法人ページで使用） ---------- */
#psr-guide .docs{background:var(--black);color:#fff;border-radius:8px;padding:38px;margin-top:22px}
#psr-guide .docs h3{font-size:26.4px;margin:0 0 8px}
#psr-guide .docs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
#psr-guide .doc{border:1px solid #444;padding:18px;text-align:center;font-weight:900}
#psr-guide .invoice{margin-top:18px;color:#ddd}
#psr-guide .invoice strong{color:#fff;font-size:18.56px}

/* ---------- 強調・チェックリスト（個人ページで使用） ---------- */
#psr-guide .highlight{background:#fff2f3;color:#a80710;font-weight:900;padding:.05em .3em}
#psr-guide .checklist{margin:12px 0 0;padding-left:1.2em;color:#555}
#psr-guide .checklist li{margin:.25em 0}

/* ---------- 赤い料金帯 ---------- */
#psr-guide .price-strip{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;background:var(--red);color:#fff;padding:34px 40px;border-radius:8px;margin-top:22px}
#psr-guide .price-strip strong{display:block;font-size:clamp(24.8px,3vw,36px);line-height:1.35;text-wrap:balance}
#psr-guide .price-strip p{margin:5px 0 0;color:#ffe7e9}
#psr-guide .price-num{font-size:51.2px;font-weight:950;white-space:nowrap}

/* ---------- ステップ ---------- */
#psr-guide .steps{counter-reset:step;display:grid;gap:0;border-top:1px solid #ddd}
#psr-guide .step{counter-increment:step;display:grid;grid-template-columns:92px 1fr;gap:18px;padding:28px 0;border-bottom:1px solid #ddd}
#psr-guide .step:before{content:"STEP\A" counter(step);white-space:pre;display:grid;place-items:center;width:74px;height:74px;background:var(--black);color:#fff;border-radius:50%;font-weight:950;font-size:12.48px;line-height:1.15;text-align:center}
#psr-guide .step h3{font-size:20px;margin:0 0 4px}
#psr-guide .step p{margin:0;color:#555}

/* ---------- FAQ ---------- */
#psr-guide .faq details{background:#fff;border-bottom:1px solid #ddd}
#psr-guide .faq summary{cursor:pointer;list-style:none;padding:20px 54px 20px 52px;font-weight:900;position:relative}
#psr-guide .faq summary:before{content:"Q";position:absolute;left:16px;color:var(--red);font-size:19.2px}
#psr-guide .faq summary:after{content:"＋";position:absolute;right:17px;color:var(--red);font-size:20px}
#psr-guide .faq details[open] summary:after{content:"−"}
#psr-guide .faq p{margin:0;padding:0 52px 20px;color:#555}

/* ---------- 締めのCTA ---------- */
/* 背景写真は法人・個人の両方で使う */
#psr-guide .cta{position:relative;color:#fff;text-align:center;padding:66px 20px;background:url(https://rental.pandastudio.tv/html/upload/save_image/editor/0903223221_6a9976e571bec.jpg) center center/cover fixed no-repeat}
#psr-guide .cta:before{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.52) 55%,rgba(0,0,0,.68) 100%);z-index:0}
#psr-guide .cta>*{position:relative;z-index:1}
#psr-guide .cta h2{font-size:clamp(28.8px,4vw,48px);margin:0 0 10px}
#psr-guide .cta p{margin:0 auto 26px;color:#ffe5e7}
#psr-guide.psr--corp .cta p{max-width:840px;text-wrap:balance}
#psr-guide.psr--pers .cta p{max-width:720px}
#psr-guide .support{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:22px;font-weight:800}

/* ---------- スマホ固定ボタン ---------- */
#psr-guide .sticky-cta{display:none}

/* ============================================================
   タブレット以下（920px）
   ============================================================ */
@media(max-width:920px){
#psr-guide .hero .container{grid-template-columns:1fr;min-height:auto}
#psr-guide.psr--corp .hero .container,#psr-guide.psr--pers .hero .container{grid-template-columns:1fr}
/* PC以外でもイラストとリング（7日前まで仮押さえ／1日〜）を出す。
   縦積みにして、文章の下に中央寄せで置く */
#psr-guide .hero-visual{display:grid;min-height:auto;margin-top:26px;position:relative;place-items:center}
#psr-guide.psr--corp .hero-illust,#psr-guide.psr--pers .hero-illust{max-width:min(420px,86%);margin:0 auto;justify-self:center}
#psr-guide .hero-ring{width:126px;height:126px;border-width:14px;right:4%;bottom:-14px;left:auto}
#psr-guide.psr--corp .hero-ring,#psr-guide.psr--pers .hero-ring{right:4%;bottom:-14px}
#psr-guide .hero-number{font-size:31px}
#psr-guide .hero-number small{font-size:10px;margin-top:4px}
/* リングがヒーローの外にはみ出して切れないよう、下に余白を足す */
#psr-guide .hero .container{padding-bottom:78px}
/* 背景写真を暗くしすぎない（写真が見えるように） */
#psr-guide .hero-photo{clip-path:none}
#psr-guide .hero-shade{clip-path:none;background:linear-gradient(160deg,rgba(8,8,8,.74) 0%,rgba(74,10,16,.64) 100%)}
#psr-guide .hero-edge,#psr-guide .hero-edge2{display:none}
#psr-guide .cta{background-attachment:scroll}
#psr-guide .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#psr-guide .docs-grid{grid-template-columns:repeat(2,1fr)}
#psr-guide .price-strip{grid-template-columns:1fr}
#psr-guide .price-num{font-size:38.4px}
}

/* ============================================================
   スマホ（620px）
   ============================================================ */
@media(max-width:620px){
#psr-guide{font-size:16px}
#psr-guide .hero .container{padding-top:42px;padding-bottom:70px}
#psr-guide .hero-lead{font-size:16px}
#psr-guide .hero-visual{margin-top:22px}
#psr-guide.psr--corp .hero-illust,#psr-guide.psr--pers .hero-illust{max-width:78%}
#psr-guide .hero-ring{width:108px;height:108px;border-width:12px;right:2%}
#psr-guide.psr--corp .hero-ring,#psr-guide.psr--pers .hero-ring{right:2%;bottom:-12px}
#psr-guide .hero-number{font-size:26px}
#psr-guide .hero-number small{font-size:9px}
#psr-guide .btn{width:100%}
#psr-guide .section{padding:54px 0}
#psr-guide .audience-tabs a{padding:13px 8px;font-size:14.4px}
#psr-guide .feature-grid, #psr-guide .docs-grid{grid-template-columns:1fr}
#psr-guide .feature{padding:22px}
#psr-guide .feature[data-no]:before{top:18px;right:20px;font-size:30px}
#psr-guide .feature h3{padding-right:48px}
#psr-guide .docs, #psr-guide .price-strip{padding:26px 22px}
#psr-guide .step{grid-template-columns:62px 1fr;gap:14px}
#psr-guide .step:before{width:56px;height:56px;font-size:10.88px}
#psr-guide .sticky-cta{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;box-shadow:0 -4px 18px rgba(0,0,0,.18)}
#psr-guide .sticky-cta a{padding:13px 8px;text-align:center;background:#fff;font-size:13.12px;font-weight:900}
#psr-guide .sticky-cta a:last-child{background:var(--red);color:#fff}
}

/* ---------- 機材運搬車セクション ----------
   赤は #b62434（site.css の --red と同値）を16進で直接指定している。
   #psr-guide が --red を #d80c18 に上書きしているため、変数では参照できない。 */
#psr-guide .fleet-panel{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 3px 16px rgba(0,0,0,.05);overflow:hidden;margin-top:22px}

/* 見出し行 */
#psr-guide .fleet-panel-head{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:32px 38px 26px}
#psr-guide .fleet-kicker{color:#b62434;font-size:12px;font-weight:900;letter-spacing:.14em;margin-bottom:8px}
#psr-guide .fleet-panel-head strong{display:block;font-size:clamp(24px,2.8vw,32px);line-height:1.35;letter-spacing:-.01em;text-wrap:balance}
#psr-guide .fleet-panel-head p{margin:8px 0 0;color:var(--muted);font-size:15px}
#psr-guide .fleet-price{text-align:right;line-height:1}
#psr-guide .fleet-price b{display:block;font-size:56px;font-weight:950;color:#b62434;letter-spacing:-.02em}
#psr-guide .fleet-price span{display:block;font-size:12px;font-weight:900;color:var(--muted);letter-spacing:.08em;margin-top:8px}

/* 車両2枚（1pxの罫線で仕切る） */
#psr-guide .fleet-panel-cars{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line)}
#psr-guide .fleet-panel-cars figure{margin:0;background:#fff;padding:10px 38px 0}
#psr-guide .fleet-photo{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#fff}
#psr-guide .fleet-panel-cars figcaption{padding:10px 0 22px}
#psr-guide .fleet-base{display:block;font-size:11.5px;font-weight:950;color:#b62434;letter-spacing:.12em}
#psr-guide .fleet-name{display:block;font-size:21px;font-weight:950;line-height:1.4;margin-top:3px}
#psr-guide .fleet-sub{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}

#psr-guide .fleet-note{font-size:12.48px;color:#777;margin-top:12px}

@media(max-width:920px){
  #psr-guide .fleet-panel-head{grid-template-columns:1fr;gap:14px}
  #psr-guide .fleet-price{text-align:left}
  #psr-guide .fleet-price b{font-size:44px}
}
@media(max-width:620px){
  #psr-guide .fleet-panel-head{padding:26px 22px 22px}
  #psr-guide .fleet-panel-cars{grid-template-columns:1fr}
  #psr-guide .fleet-panel-cars figure{padding:10px 22px 0}
}

/* 車の写真ブロックから商品ページへ */
#psr-guide .fleet-link{display:block;color:inherit;text-decoration:none}
#psr-guide .fleet-link .fleet-name{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c9ccd0}
#psr-guide .fleet-link:hover .fleet-name{color:#b62434;text-decoration-color:currentColor}
#psr-guide .fleet-link:hover .fleet-photo{opacity:.88;transition:opacity .15s}
#psr-guide .fleet-link:focus-visible{outline:2px solid #b62434;outline-offset:2px}