@charset "utf-8";
/* 植木レンタル　植物の種類（rental-plants.html）2026-10-16 */
:root{--photo:#f1f2f3;--serif:'Noto Serif JP','Yu Mincho',serif}

/* ===== 最初の画面（写真の地の色にそろえて、写真の枠を消す） ===== */
.phero{background:var(--photo);text-align:center;overflow:hidden}
.phero .inner{padding-top:72px;padding-bottom:10px}
.phero .en{display:block;font-size:12px;letter-spacing:.4em;color:var(--leaf);font-weight:500}
.phero h1{margin:16px 0 18px;font-family:var(--serif);font-weight:500;font-size:28px;letter-spacing:.2em;color:var(--green);line-height:1.5}
.phero h1 b{display:block;font-family:Georgia,'Times New Roman',serif;font-weight:300;font-size:120px;line-height:1;letter-spacing:.02em;margin-top:6px}
.phero h1 b small{font-family:var(--serif);font-size:28px;font-weight:500;margin-left:8px;letter-spacing:0}
.phero p{margin:0 auto;color:#555;line-height:2.1;font-size:15px;text-wrap:balance}
.phero-img{position:relative;max-width:1500px;margin:0 auto;overflow:hidden}
.phero-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(rgba(241,242,243,0),var(--photo))}
.phero-img img{display:block;width:100%;height:auto;animation:kb 12s ease-out both;transform-origin:50% 70%}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}

/* ===== しぼりこみ（画面上に固定・文字だけのタブ） ===== */
.ptool{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);border-bottom:1px solid #e3e3e3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ptool .inner{display:flex;align-items:center;gap:20px;height:60px}
.ptabs{display:flex;gap:26px;height:100%}
.ptabs button{font:inherit;font-size:15px;font-weight:700;color:#777;background:none;border:0;border-bottom:3px solid transparent;padding:3px 2px 0;cursor:pointer;height:100%;transition:.2s}
.ptabs button small{font-size:12px;font-weight:500;margin-left:6px;font-family:Georgia,serif}
.ptabs button:hover{color:var(--green)}
.ptabs button.on{color:var(--green);border-bottom-color:var(--green)}
.psearch{margin-left:auto;flex:0 1 300px}
.psearch input{width:100%;height:42px;border:1px solid #c8c8c8;border-radius:21px;padding:0 16px 0 42px;font:inherit;font-size:16px;
 background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.2'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='M16 16l5 5'/%3E%3C/svg%3E") 16px center no-repeat}
.psearch input:focus{outline:none;border-color:var(--green2);box-shadow:0 0 0 3px rgba(0,154,62,.18)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.phero+.crumb{padding:10px 20px 0;font-size:11px}

/* ===== 一覧（写真集のように） ===== */
.plist{background:var(--photo);padding:40px 0 70px}
.presult{text-align:center;color:var(--sub);font-size:14px;margin:0;min-height:0}
.presult:not(:empty){margin:0 0 30px}
.presult b{color:var(--green);font-size:18px;margin:0 2px}
.pgrid{max-width:1100px;margin:0 auto}
.pgroup{text-align:center;margin:0 0 50px}
.pgroup span{display:block;font-size:12px;letter-spacing:.35em;color:var(--green2);font-weight:500}
.pgroup h2{margin:10px 0 6px;font-family:var(--serif);font-weight:500;font-size:30px;letter-spacing:.15em}
.pgroup h2 small{font-family:'Noto Sans JP',sans-serif;font-size:14px;color:var(--sub);font-weight:500;margin-left:12px;letter-spacing:.02em}
.pgroup p{margin:0;color:var(--sub);font-size:14px}
/* 庭木の区切り＝全幅の深緑の帯 */
.pgroup.g-outdoor{width:100vw;margin:40px 0 70px calc(50% - 50vw);background:var(--green);color:#fff;padding:110px 20px}
.pgroup.g-outdoor span{color:#bfe3a5}
.pgroup.g-outdoor h2{font-size:40px}
.pgroup.g-outdoor h2 small,.pgroup.g-outdoor p{color:rgba(255,255,255,.8)}

.pcard{position:relative;margin:0 0 110px;scroll-margin-top:90px}
.pcount{font-family:Georgia,serif;font-weight:300;font-size:56px;line-height:1;color:var(--green);margin:0 0 -10px 4px;position:relative;z-index:1}
.pcount small{font-size:16px;color:#999;margin-left:8px;letter-spacing:.1em}
.pimg{display:block;position:relative;overflow:hidden;cursor:zoom-in;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(#000 91%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(#000 91%,transparent);mask-composite:intersect}
.pimg img{display:block;width:100%;height:auto;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pimg:hover img{transform:scale(1.02)}
.pimg .zoom{display:none}
.pcard figcaption{padding:8px 4px 0}
.pcard ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 22px;font-size:13px;line-height:2;color:#555}
.pcard li{border-radius:3px;padding:0 4px;transition:background .2s}
.pcard li i{font-style:normal;font-size:11px;color:var(--green2);margin-right:6px;font-family:Georgia,serif;letter-spacing:.05em}
.pcard li.hit{background:#ffe97a;color:#222;font-weight:700}
.pcard.hide,.pgroup.hide{display:none}
.pnone{text-align:center;background:#fff;border-radius:12px;padding:30px 20px;line-height:2;max-width:760px;margin:0 auto 40px}
.pnone b{display:block;font-size:17px;color:var(--green)}
.pnone a{color:var(--green2);text-decoration:underline}
.pnone button{font:inherit;font-weight:700;color:#fff;background:var(--green);border:0;border-radius:20px;padding:6px 18px;margin-top:8px;cursor:pointer}
.pnote{max-width:760px;margin:0 auto;padding:0 0 0 1.2em;font-size:13px;color:#666;line-height:2}
.plist .applybtn small a{color:var(--green2);text-decoration:underline;font-size:13px}

/* ふわっと現れる（動きを減らす設定の人には出さない） */
.js .pcard{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s ease}
.js .pcard.in{opacity:1;transform:none}

/* お問い合わせ帯の申込ボタン（電話と区別） */
.cta .apply{background:#9bd36b;color:#06321c}

/* スマホ下の申込バー */
.spapply{display:none}

/* ===== 拡大表示 ===== */
.lb{position:fixed;inset:0;z-index:100;background:rgba(20,24,20,.94);display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none}
.lb-wrap{max-width:94vw;max-height:82vh;overflow:auto;-webkit-overflow-scrolling:touch}
.lb-wrap img{display:block;max-width:94vw;max-height:82vh;width:auto;height:auto;border-radius:4px}
.lb button{position:absolute;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:30px;width:54px;height:54px;border-radius:50%;cursor:pointer;line-height:1}
.lb button:hover{background:rgba(255,255,255,.3)}
.lb-x{top:14px;right:14px}
.lb-p{left:14px;top:50%;transform:translateY(-50%)}
.lb-n{right:14px;top:50%;transform:translateY(-50%)}
.lb-cap{position:absolute;left:80px;right:80px;bottom:16px;margin:0;text-align:center;color:#eee;font-size:14px;line-height:1.7}
.lb-cap b{font-family:Georgia,serif;font-weight:400;margin-right:12px;color:#bfe3a5}
.lb-hint{display:none}
body.lbopen{overflow:hidden}

@media(prefers-reduced-motion:reduce){
 .phero-img img{animation:none}
 .js .pcard{opacity:1;transform:none;transition:none}
 .pimg img{transition:none}
}

/* ===== スマホ ===== */
@media(max-width:820px){
 .phero .inner{padding-top:40px}
 .phero h1{font-size:19px;letter-spacing:.15em;margin:12px 0 12px}
 .phero h1 b{font-size:84px}
 .phero h1 b small{font-size:20px}
 .phero p{font-size:14px}
 .phero-img img{width:150%;max-width:none;margin-left:-25%}
 .ptool .inner{height:auto;flex-direction:column;align-items:stretch;gap:2px;padding-top:4px;padding-bottom:6px}
 .ptabs{gap:0;height:38px;justify-content:space-between}
 .ptabs button{flex:1;font-size:13.5px;padding:0}
 .ptabs button small{margin-left:3px}
 .psearch{margin:0;flex:none}.psearch input{height:38px}
 .plist{padding:28px 0 50px}
 .pgroup{margin-bottom:34px}
 .pgroup h2{font-size:23px}
 .pgroup.g-outdoor{padding:64px 20px;margin:20px 0 44px calc(50% - 50vw)}
 .pgroup.g-outdoor h2{font-size:28px}
 .pcard{margin-bottom:56px;scroll-margin-top:110px}
 .pcount{font-size:40px;margin-bottom:-4px}
 .pcount small{font-size:13px}
 .pimg .zoom{display:block;position:absolute;right:8px;top:8px;background:rgba(255,255,255,.92);color:var(--green);font-size:12px;font-weight:700;border-radius:16px;padding:4px 11px 4px 28px;box-shadow:0 2px 8px rgba(0,0,0,.08);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230b5a32' stroke-width='2.6'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='M16 16l5 5M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center}
 /* スマホは写真の中の名前が小さいので、読みやすい2列の一覧に */
 .pcard figcaption{padding:10px 0 0}
 .pcard ol{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:15px;line-height:1.5;color:#333}
 .pcard li{background:#fff;border-radius:8px;padding:8px 10px}
 .pcard li i{display:block;font-size:12px;margin:0 0 1px}
 .pnote{font-size:13.5px}
 body{padding-bottom:64px}
 .spapply{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;height:56px;align-items:center;justify-content:center;background:var(--green);color:#fff;font-weight:700;font-size:16px;letter-spacing:.05em;box-shadow:0 -2px 10px rgba(0,0,0,.15)}
 body.lbopen .spapply{display:none}
 /* 拡大は写真を横に大きく出してスクロール */
 .lb{flex-direction:column}
 .lb-wrap{max-width:none;max-height:none;width:100vw;overflow-x:auto;overflow-y:hidden}
 .lb-wrap img{max-width:none;max-height:none;width:230vw;border-radius:0}
 .lb-p,.lb-n{top:auto;bottom:16px;transform:none}
 .lb-cap{left:76px;right:76px;bottom:12px;font-size:12.5px}
 .lb-hint{display:block;position:absolute;left:0;right:0;top:28px;text-align:center;color:#ccc;font-size:12px;margin:0;pointer-events:none}
}
@media(max-width:820px) and (orientation:landscape){
 .lb-wrap img{width:auto;height:100svh}
 .lb-wrap{overflow-x:auto}
}

/* 名前は写真に入っているので、文字の一覧は画面に出さない（検索と読み上げ用に残す） 2026-10-16 */
.pcard figcaption{position:absolute!important;width:1px;height:1px;padding:0!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pcard{margin-bottom:80px}
@media(max-width:820px){.pcard{margin-bottom:44px}}