:root{--navy:#004d92;--blue:#1a66ad;--bluel:#eaf2f9;--gold:#b28e29;--txt:#1e2730;--sub:#5b6878;
--line:#dfe5ec;--bg:#f4f6f8;--maxw:1180px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans JP',sans-serif;color:var(--txt);font-size:14px;line-height:1.7;background:#fff;padding-top:44px}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.sec{padding:40px 0}
.sec.alt{background:var(--bg)}
.num{font-family:Oswald,'Noto Sans JP',sans-serif;font-weight:600}
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.shead h2{font-size:22px;color:var(--txt)}
.shead h2 em{font-style:normal;color:var(--navy)}
.shead .en{font-size:11px;color:var(--gold);letter-spacing:.18em;margin-left:10px;font-family:Oswald,sans-serif}
.shead .more{font-size:12px;font-weight:700;color:var(--blue);border:1px solid var(--blue);padding:6px 16px;border-radius:3px;white-space:nowrap}
header{position:sticky;top:44px;z-index:900;background:#fff;border-bottom:1px solid var(--line)}
.hd{max-width:1240px;margin:0 auto;padding:8px 18px;display:flex;align-items:center;gap:16px}
.hd .logo{display:flex;align-items:center;gap:8px}
.hd .logo img{height:34px}
.hd nav{display:flex;gap:0;margin-left:auto}
.hd nav a{font-size:11.5px;font-weight:600;padding:8px 7px;border-radius:3px;white-space:nowrap}
.hd nav a:hover{background:var(--bluel)}
.hd .tel{text-align:right;line-height:1.2;margin-left:8px}
.hd .tel b{font-size:19px;color:var(--navy);font-family:Oswald,'Noto Sans JP',sans-serif;font-weight:600;white-space:nowrap}
.hd .tel span{font-size:9px;color:var(--sub);display:block}
.hd .cta{display:flex;gap:7px}
.hd .cta a{font-size:11.5px;font-weight:700;padding:9px 13px;border-radius:3px;white-space:nowrap}
.hd .cta .doc{background:var(--navy);color:#fff}
.hd .cta .visit{border:1.5px solid var(--navy);color:var(--navy)}
.hasdd{position:relative}
.hasdd>a{font-size:11.5px;font-weight:600;padding:8px 7px;border-radius:3px;white-space:nowrap;display:inline-block}
.hasdd>a:hover{background:var(--bluel)}
.hasdd>.dd{position:absolute;top:100%;left:0;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;display:none;z-index:950}
.hasdd:hover>.dd{display:block}
.hasdd>.dd a{display:block;font-size:12px;font-weight:600;padding:9px 12px;border-radius:4px;white-space:nowrap;color:var(--navy)}
.hasdd>.dd a:hover{background:var(--bluel)}
.phero{display:grid;grid-template-columns:6fr 6fr;min-height:280px}
.phero .l{background:linear-gradient(150deg,#003a6f,#0a5ca6);color:#fff;padding:30px 38px;display:flex;flex-direction:column;justify-content:center}
.phero .tag{display:inline-block;background:var(--gold);color:#fff;font-size:11px;font-weight:700;padding:3px 12px;border-radius:3px;margin-bottom:10px;width:fit-content}
.phero h1{font-size:26px;line-height:1.5;margin-bottom:8px}
.phero h1 .en{font-family:Oswald,'Noto Sans JP',sans-serif;font-weight:600;color:#a9d0f0;font-size:15px;margin-left:8px}
.phero p{font-size:12.5px;color:#d7e5f2;margin-bottom:14px}
.phero .chips{display:flex;gap:7px;flex-wrap:wrap}
.phero .chips span{border:1px solid rgba(255,255,255,.45);border-radius:14px;font-size:11px;padding:4px 12px;color:#eaf2fa}
.phero .r{background-size:cover;background-position:center}
.crumb{font-size:10.5px;color:#8b97a4;padding:8px 0}
.catnav{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px}
.catnav a{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;transition:box-shadow .2s,transform .2s}
.catnav a:hover{box-shadow:0 6px 18px rgba(0,50,100,.12);transform:translateY(-2px)}
.catnav .cph{height:110px;object-fit:cover;width:100%;display:block}
.catnav .cbd{padding:11px 13px 13px}
.catnav .cbd b{font-size:14px;color:var(--navy);display:block;margin-bottom:3px}
.catnav .cbd span{font-size:10.5px;color:var(--sub);display:block;line-height:1.5}
.catnav .cbd .cnt{font-size:10px;font-weight:700;color:var(--gold);font-family:Oswald,sans-serif;margin-top:5px;display:inline-block}
.serblk{margin-bottom:14px;scroll-margin-top:100px}
.serhd{display:flex;align-items:center;gap:13px;margin-bottom:16px;flex-wrap:wrap;border-bottom:2px solid var(--navy);padding-bottom:10px}
.serhd .sno{background:var(--navy);color:#fff;font-family:Oswald,sans-serif;font-weight:600;font-size:13px;padding:5px 12px;border-radius:4px}
.serhd h2{font-size:20px;font-weight:900;color:var(--navy)}
.serhd h2 .en{font-size:11px;color:var(--gold);letter-spacing:.15em;margin-left:8px;font-family:Oswald,sans-serif}
.serhd .sdesc{margin-left:auto;font-size:11px;color:var(--sub);max-width:420px;text-align:right}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s}
.pcard:hover{box-shadow:0 5px 16px rgba(0,50,100,.12)}
.pcard .pph{height:150px;background:#eef2f6;object-fit:contain;width:100%;display:block;padding:6px}
.pcard .pbd{padding:12px 13px 14px;display:flex;flex-direction:column;flex:1}
.pcard .psize{font-size:10px;font-weight:700;color:#fff;background:var(--blue);border-radius:3px;padding:2px 8px;display:inline-block;margin-bottom:6px;align-self:flex-start}
.pcard h3{font-size:12.5px;line-height:1.5;margin-bottom:8px;min-height:38px}
.pcard .price{margin-top:auto;border-top:1px dashed var(--line);padding-top:8px}
.pcard .price .pl{font-size:9.5px;color:var(--sub);display:block}
.pcard .price b{font-size:17px;color:#c0392b;font-family:Oswald,'Noto Sans JP',sans-serif;font-weight:600}
.pcard .price b small{font-size:10px;color:var(--txt);font-weight:400}
.pcard .lk{font-size:11px;font-weight:700;color:var(--blue);margin-top:8px;display:inline-block}
.more-row{text-align:center;margin-top:18px}
.more-row a{display:inline-block;font-size:12.5px;font-weight:700;color:var(--navy);border:1.5px solid var(--navy);border-radius:5px;padding:11px 34px}
.more-row a:hover{background:var(--navy);color:#fff}
.notebox{font-size:11px;color:var(--sub);background:#fff8e8;border:1px solid #ecd9a6;border-radius:6px;padding:11px 15px;margin:14px 0 4px;line-height:1.7}
.ctaband{background:linear-gradient(120deg,#003a6f,#1a66ad);color:#fff;padding:30px 0}
.ctaband .in{max-width:var(--maxw);margin:0 auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.ctaband .t b{font-size:19px;display:block}
.ctaband .t span{font-size:12px;color:#cfe0f2}
.ctaband .tel{font-size:30px;font-family:Oswald,'Noto Sans JP',sans-serif;font-weight:600;line-height:1.1}
.ctaband .tel small{display:block;font-size:10px;font-family:'Noto Sans JP';font-weight:400;color:#cfe0f2}
.ctaband .bb{display:flex;gap:10px}
.ctaband .bb a{font-size:13px;font-weight:700;padding:13px 22px;border-radius:4px}
.ctaband .bb .w{background:#fff;color:var(--navy)}
.ctaband .bb .o{border:1.5px solid #fff;color:#fff}
footer{background:#13202e;color:#b9c5d2;padding:28px 0 0;font-size:11.5px}
.ft{max-width:var(--maxw);margin:0 auto;padding:0 22px;display:grid;grid-template-columns:4fr 5fr 3fr;gap:30px}
.ft .lg{filter:brightness(0) invert(1);opacity:.9;height:30px;width:auto}
.ft h4{color:#fff;font-size:12px;margin-bottom:8px}
.ft a{display:inline-block;padding:2px 10px 2px 0;color:#b9c5d2}
.ft .addr{line-height:1.8;font-size:10.5px}
.cp{background:#0d161f;color:#7e8b99;text-align:center;font-size:10px;padding:8px;margin-top:22px}
#tb{position:fixed;top:0;left:0;right:0;min-height:44px;background:#1d2733;color:#fff;display:flex;align-items:center;gap:8px 10px;padding:5px 14px;z-index:9999;font-size:12px;flex-wrap:wrap}
#tb .nm{opacity:.85;margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#tb button{background:#334153;color:#fff;border:0;border-radius:5px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
#tb button.on{background:#3d7ec9}
@media print{#tb{display:none}body{padding-top:0}header{position:static}}
@media(max-width:900px){
 .hd nav{display:none}
 .phero{grid-template-columns:1fr!important}
 .phero .r{min-height:200px;order:-1}
 .catnav{grid-template-columns:1fr 1fr}
 .pgrid{grid-template-columns:1fr 1fr!important}
 .serhd .sdesc{margin-left:0;text-align:left;max-width:none}
 .ft{grid-template-columns:1fr!important}
}
@media(max-width:560px){
 .pgrid{grid-template-columns:1fr 1fr}
 .catnav{grid-template-columns:1fr 1fr}
 .hd .tel{display:none}
 .ctaband .in{flex-direction:column;align-items:stretch;text-align:center;gap:14px}
}

/* ===== global nav: 全ページ共通（2026-07-30 統一） ===== */
/* header */
header{position:sticky;top:44px;z-index:900;background:#fff;border-bottom:1px solid var(--line)}.hd{max-width:1240px;margin:0 auto;padding:8px 18px;display:flex;align-items:center;gap:16px}.hd .logo{display:flex;align-items:center;gap:8px}.hd .logo img{height:34px}.hd nav{display:flex;gap:0;margin-left:auto}.hd nav a{font-size:11.5px;font-weight:600;padding:8px 7px;border-radius:3px;white-space:nowrap}.hd nav a:hover{background:var(--bluel)}.hd nav .hasdd{position:relative}.hd nav .hasdd>.dd{position:absolute;top:100%;left:0;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;display:none;z-index:950}.hd nav .hasdd:hover>.dd{display:block}.hd nav .hasdd>.dd a{display:block;font-size:12px;font-weight:600;padding:9px 12px;border-radius:4px;white-space:nowrap;color:var(--navy)}.hd nav .hasdd>.dd a:hover{background:var(--bluel)}.hd .tel{text-align:right;line-height:1.2;margin-left:8px}.hd .tel b{font-size:19px;color:var(--navy);font-family:Oswald,'Noto Sans JP',sans-serif;font-weight:600;white-space:nowrap}.hd .tel span{font-size:9px;color:var(--sub);display:block}.hd .cta{display:flex;gap:7px}.hd .cta a{font-size:11.5px;font-weight:700;padding:9px 13px;border-radius:3px;white-space:nowrap}.hd .cta .doc{background:var(--navy);color:#fff}.hd .cta .visit{border:1.5px solid var(--navy);color:var(--navy)}.ctaband .tel{font-size:30px;font-family:Oswald,'Noto Sans JP',sans-serif;font-weight:600;line-height:1.1}.ctaband .tel small{display:block;font-size:10px;font-family:'Noto Sans JP';font-weight:400;color:#cfe0f2}.rentcta .tel{text-align:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:14px}.rentcta .tel span{font-size:11px;color:#cfe0f2}.rentcta .tel b{font-size:30px;font-family:Oswald,'Noto Sans JP',sans-serif;display:block;line-height:1.15}.rentcta .tel small{font-size:10px;color:#cfe0f2}@media print{header{position:static}}@media(max-width:900px){.hd nav{display:none}}@media(max-width:560px){.hd .tel{display:none}.ctaband .tel{font-size:26px}.hd{flex-wrap:wrap;padding:7px 14px;gap:8px}.hd .logo{margin-right:auto}.hd .cta{width:100%;margin-left:0;gap:6px}.hd .cta a{flex:1 1 0;min-width:0;text-align:center;padding:9px 4px;font-size:10.5px;overflow:hidden;text-overflow:ellipsis}}/* branded header with people illustrations (元サイト踏襲) */
.uhd.ppl{position:relative;padding:0 100px}

/* global nav: 「サービス」(.hasdd)だけ縦位置がずれるのを是正（2026-07-31） */
.hd nav{align-items:center}
.hd nav>a,.hd nav>.hasdd{display:flex;align-items:center}
.hd nav>.hasdd>a{display:flex;align-items:center}

/* --- 構築時の上書き（編集ツールバー用の逃げを解除） --- */
#tb{display:none!important}
header{top:0!important}

/* ============================================================
   レンタル商品一覧／検索結果の絞り込みUI（2026-08-07 打合せ）
   導入事例一覧（example-list.css）と同じクラス設計を踏襲。
   ※ .exfilter のネガティブマージンはヒーロー重ね専用のため、
      レンタル側では通常マージンにしている。
   ============================================================ */
.exfilter{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin:0 auto 26px;max-width:var(--maxw);position:relative;z-index:5;box-shadow:0 8px 22px rgba(0,0,0,.07)}
.exfilter .frow2{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;gap:12px 14px;align-items:center}
.exfilter label{font-size:12px;font-weight:700;color:var(--navy);white-space:nowrap}
.exfilter select{width:100%;font-size:12.5px;padding:9px 11px;border:1px solid var(--line);border-radius:5px;background:#fff;font-family:inherit;color:var(--txt)}
.exfilter .searchrow{display:flex;gap:12px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);flex-wrap:wrap}
.exfilter .filterbtn{border:0;background:var(--navy);color:#fff;font-size:12.5px;font-weight:700;padding:11px 26px;border-radius:6px;cursor:pointer;font-family:inherit;white-space:nowrap}
.exfilter .filterclear{font-size:11.5px;font-weight:700;color:var(--blue);border:1px solid var(--blue);border-radius:6px;padding:10px 18px;white-space:nowrap}
.exfilter .searchhint{font-size:10.5px;color:var(--sub);flex:1;min-width:220px;line-height:1.6}

/* 絞り込み結果の件数・並び替え・ページャ（search-rental.php で使用） */
.exlist-count{max-width:var(--maxw);margin:0 auto 14px;font-size:12.5px;color:var(--sub)}
.exlist-count b{color:var(--navy);font-size:15px;font-family:Oswald,sans-serif}
.sortrow{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-bottom:16px}
.sortrow label{font-size:12px;font-weight:700;color:var(--navy);white-space:nowrap}
.sortrow select{font-size:12.5px;padding:8px 11px;border:1px solid var(--line);border-radius:5px;background:#fff;font-family:inherit;color:var(--txt)}
.filtertags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.filtertags span{font-size:11px;font-weight:700;color:var(--navy);background:var(--bluel);border-radius:14px;padding:4px 13px}
.noresult{background:#fff;border:1px solid var(--line);border-radius:8px;padding:34px 22px;text-align:center;font-size:14px;color:var(--txt)}
.noresult small{display:block;margin-top:6px;font-size:12.5px;color:var(--sub)}
.noresult a{color:var(--blue);font-weight:700}
.expager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:32px;flex-wrap:wrap}
.expager a,.expager span{font-size:12.5px;font-weight:700;padding:8px 13px;border:1px solid var(--line);border-radius:5px;color:var(--navy);background:#fff}
.expager .cur{background:var(--navy);color:#fff;border-color:var(--navy)}
.expager .dots{border:0;color:var(--sub)}
@media(max-width:960px){.exfilter .frow2{grid-template-columns:auto 1fr auto 1fr}}
@media(max-width:700px){.exfilter .frow2{grid-template-columns:1fr}.exfilter .searchrow{flex-direction:column;align-items:stretch}}

/* AUN A40: カテゴリカードを中央揃え */
.catnav .cbd{text-align:center;display:block}
.catnav .cbd b, .catnav .cbd span{text-align:center;display:block}

/* AUN A41: 「詳細・見積もりへ」を右に寄せる */
.pcard .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px}
.pcard .price .pl{width:100%}
.pcard .price .lk{margin-left:auto}


/* ------------------------------------------------------------------
 * B52 商品カード内のどこをクリックしても詳細ページへ遷移させる
 *  （従来は「詳細・見積もりへ」のテキストだけがリンクだった）
 *  既存の <a class="lk"> を疑似要素でカード全面に広げる方式。
 *  入れ子リンクにならないので、マークアップは変更していない。
 * ------------------------------------------------------------------ */
.pcard{position:relative}
.pcard .lk::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}
.pcard:hover .lk{text-decoration:underline}

/* ==================================================================
   2026-10-03 AUN（お客様メール「現サイトの画像比率のまま見切れなく」）
   ================================================================== */
/* AUN 3: 一覧ヒーロー写真の見切れ解消
   枠の縦横比＝写真の縦横比にする。写真ごとに比率が違うため、各テンプレートの
   .r に inline で aspect-ratio を指定（ここは既定値 500/281）。
   写真列は大画面で縦に伸びすぎないよう最大640px（1280px幅では従来と同じ640px）。 */
.phero{grid-template-columns:minmax(0,1fr) min(50%,640px)}
.phero .r{aspect-ratio:500/281;height:auto;align-self:center;background-size:cover;background-position:center;background-repeat:no-repeat}
@media(max-width:900px){.phero .r{min-height:0}}
/* 901〜1023px は写真列が細く、説明文の高さが写真を上回って上下に白い帯が出るため、
   900px以下と同じ縦積み（写真が上・全幅・写真比率）にする */
@media(min-width:901px) and (max-width:1023px){
 .phero{grid-template-columns:1fr}
 .phero .r{order:-1;min-height:0;width:100%;justify-self:stretch}
}

/* AUN 4: 商品カードのアイキャッチ枠を /product/ 一覧と同じ扱いに
   掲載82件すべて 360x226（WordPress medium）なので枠を 360/226 に。
   box-sizing:border-box のため padding を残すと比率がずれて灰色の帯が出る → padding 0。
   object-fit は v5-common.css の contain のまま（同比率なので全面に表示される）。 */
.pcard .pph{aspect-ratio:360/226;height:auto;padding:0}

/* AUN 5: 「その他のレンタル商品」（常に3カテゴリ）
   写真 500x281 に枠を合わせ、3列で幅いっぱいに配置。 */
.catnav{grid-template-columns:repeat(3,1fr)}
.catnav .cph{aspect-ratio:500/281;height:auto}
@media(max-width:700px){
 .catnav{grid-template-columns:1fr 1fr}
 .catnav a:nth-child(3):last-child{grid-column:1 / -1;justify-self:center;width:calc(50% - 7px)}
}

/* AUN u03: 商品タイプに該当しない絞り込み条件は非表示（label と select を一緒に隠す） */
.exfilter [data-sc-for][hidden]{display:none!important}