/* 元の Jimdo サイト（1or8rental.jimdofree.com）の見た目に合わせています。
   色はスクリーンショットから測った値：白いヘッダー、薄いグレーの本文、濃い紺緑の見出し、グレーの説明文、グレー緑のフッター */
:root{
  --header:#ffffff; --bg:#f8f8f8; --surface:#ffffff; --foot:#dbe0e0;
  --title:#0e2126; --fg:#1b252b; --text:#7a7e7d; --nav:#393939; --rule:#c1c3c2; --foot-ink:#7b8282;
  --accent:#0e2126; --soft:#eef1f1; --booked:#d9c39a; --closed:#a9afae; --event:#4f7f73; --danger:#b3261e;
  --f:"Roboto","Noto Sans JP","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --header:#161a1b; --bg:#1d2122; --surface:#24292a; --foot:#2b3233;
  --title:#e6eeee; --fg:#e1e6e6; --text:#a3aaa9; --nav:#d0d5d5; --rule:#465050; --foot-ink:#a0a9a9;
  --accent:#cfe0dd; --soft:#2b3233; --booked:#8a7347; --closed:#555c5c; --event:#7fb5a7; --danger:#f2867e; color-scheme:dark}}
:root[data-theme="dark"]{
  --header:#161a1b; --bg:#1d2122; --surface:#24292a; --foot:#2b3233;
  --title:#e6eeee; --fg:#e1e6e6; --text:#a3aaa9; --nav:#d0d5d5; --rule:#465050; --foot-ink:#a0a9a9;
  --accent:#cfe0dd; --soft:#2b3233; --booked:#8a7347; --closed:#555c5c; --event:#7fb5a7; --danger:#f2867e; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f);font-size:16px;line-height:1.65;letter-spacing:.03em}
[hidden]{display:none!important}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.muted{color:var(--text)}

/* ヘッダー：左にロゴ、右にメニュー（選択中は下線） */
.site-head{background:var(--header)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:40px;padding-bottom:40px}
.logo img{width:114px;height:auto}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo img{filter:invert(1)}}
:root[data-theme="dark"] .logo img{filter:invert(1)}
.gnav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 8px;max-width:800px}
.gnav a{color:var(--nav);text-decoration:none;font-size:17px;letter-spacing:.04em;padding:10px 20px;border-bottom:2px solid transparent}
.gnav a:hover{border-bottom-color:var(--rule)}
.gnav a[aria-current="page"]{border-bottom-color:var(--nav)}
.nav-toggle{display:none;background:none;border:1px solid var(--rule);border-radius:4px;padding:8px 12px;color:var(--nav);font:inherit;cursor:pointer}
@media (max-width:760px){
  .site-head .wrap{padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
  .logo img{width:64px}
  .nav-toggle{display:block}
  .gnav{display:none;width:100%;flex-direction:column;max-width:none}
  .gnav.open{display:flex}
  .gnav a{border-bottom:1px solid var(--rule)}
  .gnav a[aria-current="page"]{font-weight:700}
}

/* 横長の写真（ヘッダー画像） */
.hero{height:clamp(160px,20vw,380px);background:#1c2a1f url(images/hero.jpg) center 60%/cover no-repeat}

/* 本文 */
main{padding:60px 0 80px}
.page-title{font-size:clamp(30px,4.4vw,52px);font-weight:400;color:var(--title);text-align:center;margin:0 0 56px;line-height:1.3;letter-spacing:.01em}
.page-title:has(+ .lead){margin-bottom:14px}
.lead{text-align:center;color:var(--text);margin:0 0 48px;font-size:17px}
.intro{text-align:center;font-size:13px;color:var(--fg);margin:0 0 10px}
h2{font-size:clamp(24px,3vw,34px);font-weight:400;color:var(--title);margin:56px 0 16px;padding-bottom:14px;border-bottom:2px solid var(--rule)}
h3{font-size:clamp(17px,1.8vw,22px);font-weight:400;color:var(--title);margin:12px 0 8px;line-height:1.4}
p{margin:0 0 12px}

/* 写真＋見出し＋説明の並び（トップの3列、ご利用例の5列） */
.cols{display:grid;gap:34px}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:34px}
.card h3{text-align:center}
.card p{color:var(--text);font-size:16px;line-height:1.6}
/* 下層ページの列：太字グレーの小見出し＋グレーの文章（左寄せ） */
.col h4{font-size:17px;color:var(--text);margin:20px 0 22px}
.col p{color:var(--text);font-size:17px;line-height:1.55}
.col img,.ph{width:100%;height:auto}
.ph{aspect-ratio:3/4;background:var(--soft);border:1px dashed var(--rule);display:grid;place-items:center;color:var(--text);font-size:13px;text-align:center;padding:12px}
.cols-wide{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 50px}
@media (max-width:760px){.cols-wide{grid-template-columns:1fr}}
.card img{width:100%;height:auto}
.card a{text-decoration:none}
@media (max-width:860px){.cols-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.cols-3{grid-template-columns:1fr}.cols-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}}

/* 文章ページ */
.prose p,.prose li{color:var(--text)}
.prose ul,.prose ol{padding-left:1.4em}
.table{width:100%;border-collapse:collapse;background:var(--surface);margin:8px 0 16px}
.table th,.table td{border:1px solid var(--rule);padding:10px 12px;text-align:left;vertical-align:top}
.table th{width:30%;font-weight:400;color:var(--title);background:var(--soft)}
.table td{color:var(--text)}
.btn{display:inline-block;background:var(--accent);color:var(--bg);text-decoration:none;padding:12px 28px;border:0;border-radius:2px;font:inherit;letter-spacing:.08em;cursor:pointer}
.btn:hover{opacity:.85}
.btn:disabled{opacity:.5;cursor:progress}
.btn.wide{width:100%}
.btn-line{background:transparent;color:var(--title);border:1px solid var(--title)}
.center{text-align:center}
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--title);outline-offset:2px}
.notice{background:var(--soft);border-left:3px solid var(--rule);padding:8px 14px;font-size:13px;color:var(--text)}

/* インスタ */
.insta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;align-items:start;margin-bottom:20px}
.insta-grid .instagram-media{min-width:0!important;width:100%!important;margin:0!important}
.insta-fallback{display:block;background:var(--surface);border:1px solid var(--rule);padding:20px;text-decoration:none}

/* スケジュール */
.schedule{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:760px){.schedule{grid-template-columns:1fr}}
.cal,.news{background:var(--surface);border:1px solid var(--rule);padding:16px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-head h3{margin:0}
.cal-nav{width:36px;height:36px;border:1px solid var(--rule);background:var(--surface);color:var(--fg);font-size:20px;cursor:pointer;line-height:1}
.cal-nav:disabled{opacity:.35;cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.cal-grid .dow{text-align:center;font-size:12px;color:var(--text);padding:4px 0}
.cal-grid .dow:first-child{color:var(--danger)}
.day{aspect-ratio:1/1;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;min-width:0}
.day.blank{background:transparent}
.day.past{opacity:.4}
.day.today{outline:2px solid var(--title);outline-offset:-2px}
.day.booked{background:var(--booked)}
.day.closed{background:var(--closed);color:#fff}
.day.has-event::after{content:"";position:absolute;bottom:5px;width:5px;height:5px;border-radius:50%;background:var(--event)}
.legend{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--text)}
.dot{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px}
.dot.open{background:var(--bg);border:1px solid var(--rule)}
.dot.booked{background:var(--booked)}
.dot.closed{background:var(--closed)}
.dot.event{background:var(--event);border-radius:50%}
.news ul{list-style:none;padding:0;margin:0}
.news li{padding:10px 0;border-bottom:1px solid var(--rule);color:var(--text)}
.news li:last-child{border-bottom:0}
.news time{display:block;font-size:12px;color:var(--title)}

/* フォーム */
.form{display:grid;gap:18px;background:var(--surface);border:1px solid var(--rule);padding:24px}
@media (max-width:520px){.form{padding:18px 14px}}
.field{display:grid;gap:6px;margin:0;border:0;padding:0;min-width:0}
.field label,.field legend{font-size:14px;color:var(--title);padding:0}
em{font-style:normal;color:#d8312b;margin-left:4px}
input,select,textarea{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--rule);border-radius:2px;padding:10px 12px;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--title);outline-offset:0}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--danger)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.choice{display:flex;gap:10px;align-items:center;cursor:pointer;color:var(--fg)!important}
.choice input{width:18px;height:18px;flex:none;accent-color:var(--title)}
.agree{padding:12px;background:var(--bg)}
.hint{margin:-8px 0 0;font-size:13px;color:var(--text)}
.hint.warn{color:var(--danger)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{margin:0;color:var(--danger)}
.done{background:var(--surface);border:1px solid var(--title);padding:24px}

/* フッター：グレー緑の帯に、サイトメニューと会社情報 */
.site-foot{background:var(--foot);color:var(--foot-ink);padding:70px 0 80px;font-size:16px}
.site-foot .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.site-foot ul{list-style:none;margin:4px 0 0;padding:0}
.site-foot li::before{content:"・"}
.site-foot li.sub{padding-left:12px}
.site-foot li.sub::before{content:"> "}
.site-foot a{text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.site-foot .co{font-weight:700}
.site-foot p{margin:0}
@media (max-width:600px){.site-foot .wrap{grid-template-columns:1fr}}

/* お問い合わせ：左に見出し、右に内容の2列 */
.contact-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);gap:24px 40px;margin-bottom:56px}
.side-head{margin:0;padding:0;border:0;font-size:clamp(22px,2.6vw,34px)}
.contact-info p{color:var(--text);font-size:17px;margin:0 0 22px}
.contact-info a{text-decoration:none}
@media (max-width:760px){.contact-row{grid-template-columns:1fr}}
#reserve .form{background:transparent;border:0;padding:0}
#reserve .field label,#reserve .field legend{color:var(--text);font-size:17px}
#reserve input:not([type=radio]):not([type=checkbox]),#reserve select,#reserve textarea{background:var(--surface);border:1px solid #9a9a9a;border-radius:0;padding:12px}

/* 規約ページ */
.terms-body{max-width:760px;margin:0 auto}
.terms-body h2{font-size:20px;margin:36px 0 8px}
.terms-body li{margin:4px 0}
.draft{background:#fff4cc;color:#5c4700;padding:10px 14px;font-size:14px}

/* レンタル商品 */
.item-tools{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:14px;padding:6px 16px;border:1px solid var(--rule);background:var(--surface);color:var(--fg);cursor:pointer;border-radius:999px}
.chip[aria-pressed="true"]{background:var(--title);color:var(--bg);border-color:var(--title)}
.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:28px}
.item{background:var(--surface);border:1px solid var(--rule);display:flex;flex-direction:column}
.item img,.item .ph{width:100%;aspect-ratio:4/3;object-fit:cover}
.item .ph{border:0;border-bottom:1px dashed var(--rule)}
.item-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.item-body h3{margin:4px 0 0;font-size:18px}
.item-body p{margin:0;font-size:14px;color:var(--text)}
.item-body .price{color:var(--title)}
.item-body .btn{margin-top:auto;font-size:14px;padding:10px}
.item-body .desc{margin-bottom:8px}
.status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.badge{font-size:12px;padding:2px 10px;border-radius:2px;color:#fff;letter-spacing:.06em}
.badge.ok{background:#3f7a57}
.badge.rented{background:#b36a22}
.badge.maint{background:#8a8f8e}
.back{font-size:13px;color:#b36a22;font-weight:700}
.up{font-size:13px!important}

/* フォーム内の利用規約 */
.terms-label{font-size:17px;color:var(--text)}
.terms-box{height:260px;overflow-y:auto;background:var(--surface);border:1px solid #9a9a9a;padding:14px 18px;font-size:13px;line-height:1.7}
.terms-box h2{font-size:15px;margin:18px 0 4px;padding:0;border:0}
.terms-box p,.terms-box li{color:var(--text);margin:0 0 6px}
.terms-box ol{padding-left:1.4em;margin:0 0 8px}

.price-table{max-width:560px;margin:8px auto 20px}
.price-table th{width:40%}
.kind{font-size:12px;color:var(--text);border:1px solid var(--rule);padding:1px 8px}