/* v2（テスト版）。見た目の決まりは 共有ドライブ「MUSE SQUARE特設サイト/デザイン定義書.md」（2026-09-21）。
   白地に黒い文字、差し色は恵比寿不動産様の会社サイトの青緑。日本語は Noto Sans JP の細め、数字だけ Outfit。
   余白は詰め、写真は枠の中に2列。角4px、薄い影、細い線のアイコン。同じ形の箱を3つ以上横に並べない。 */
:root{
  --bg:#ffffff; --card:#f6f5f2; --ink:#1c1c1c; --mute:#5a5a5a; --line:#dedcd7;
  --ac:#014550; --ac2:#097e8d;
  --r:4px; --sh:0 1px 3px rgba(0,0,0,.06); --shb:0 -2px 12px rgba(0,0,0,.08);
  --w:1040px; --gx:24px; --sy:64px; --sy2:28px; --gap:16px;
  --fs-h1:34px; --fs-h2:26px; --fs-b:15px; --fs-s:12px; --fs-n:40px;
}
@media(max-width:700px){:root{--gx:16px;--sy:32px;--sy2:20px;--fs-h1:25px;--fs-h2:21px;--fs-b:14px;--fs-n:32px}}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;font-weight:400;background:var(--bg);color:var(--ink);font-size:var(--fs-b);line-height:1.9;letter-spacing:.02em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
p a,li a,td a{color:var(--ac2);text-decoration:underline;text-underline-offset:3px}
.num,.n{font-family:Outfit,'Noto Sans JP',sans-serif;font-weight:300;letter-spacing:.01em}
.in{width:min(var(--w),calc(100% - var(--gx)*2));margin:0 auto}
h1,h2,h3,h4{font-weight:400;line-height:1.5;letter-spacing:.04em}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:17px}
.k{font-size:11px;letter-spacing:.2em;color:var(--ac);margin-bottom:10px;font-weight:400}
.k .n{font-size:13px;margin-right:8px}
.lede{color:var(--mute);max-width:640px}
.small,.note{font-size:var(--fs-s);color:var(--mute);line-height:1.8}
.note{border-top:1px solid var(--line);padding-top:14px;margin-top:var(--sy2)}
.sr{position:absolute;left:-9999px}

/* ---------- ヘッダー ---------- */
#hd{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hm{width:min(var(--w),calc(100% - var(--gx)*2));margin:0 auto;display:flex;align-items:center;gap:20px;height:60px}
.hb{text-decoration:none;line-height:1.2;display:block;white-space:nowrap}
.hb .t{font-family:Outfit,sans-serif;font-weight:400;font-size:15px;letter-spacing:.12em;color:var(--ink)}
.hb .s{display:block;font-size:9.5px;letter-spacing:.14em;color:var(--mute)}
#hd nav{display:flex;gap:clamp(10px,1.4vw,18px);margin-left:auto}
#hd nav a{text-decoration:none;font-size:12px;letter-spacing:.06em;color:var(--mute);line-height:1;padding:8px 0;border-bottom:1px solid transparent;white-space:nowrap}
#hd nav a:hover,#hd nav a.on{color:var(--ac);border-bottom-color:var(--ac)}
.hcta{display:inline-flex;align-items:center;height:36px;padding:0 16px;background:var(--ac);color:#fff;text-decoration:none;font-size:12px;letter-spacing:.08em;border-radius:var(--r);white-space:nowrap}
.hcta:hover{background:var(--ac2)}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative;margin-left:auto}
.burger span{position:absolute;left:11px;width:22px;height:1.5px;background:var(--ink);transition:.3s}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:29px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.htel{display:none}
@media(max-width:1000px){#hd nav,.hcta{display:none}.burger{display:block}}
.drawer{position:fixed;inset:60px 0 0 0;z-index:99;background:#fff;transform:translateX(100%);transition:transform .3s;overflow:auto;padding:8px var(--gx) 120px}
.drawer.open{transform:none}
.drawer ul{list-style:none}
.drawer li{border-bottom:1px solid var(--line)}
.drawer li.h{border:0;padding:18px 0 6px;font-size:11px;letter-spacing:.2em;color:var(--ac)}
.drawer a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;text-decoration:none;color:var(--ink);font-size:15px}
.drawer a:after{content:"›";color:var(--mute)}
.drawer .dm{margin-top:24px;font-size:12px;color:var(--mute);line-height:1.9}

/* ---------- ページ最上部の写真 ---------- */
.hero{position:relative;height:480px;overflow:hidden;background:#333}
.hero img{width:100%;height:100%;object-fit:cover}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%)}
.hero .t{position:absolute;left:0;right:0;bottom:26px;z-index:2;color:#fff}
.hero .k{color:#fff;opacity:.9}
.hero h1{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.hero .s{font-size:13px;margin-top:6px;opacity:.95}
@media(max-width:700px){.hero{height:320px}.hero .t{bottom:18px}}
.hero.tall{height:560px}
@media(max-width:700px){.hero.tall{height:380px}}

.hero-info{display:none}
.hero .cg{display:none}
br.pc{display:none}
.scroll{display:none}
.row .more .ico{width:16px;height:16px;margin-left:6px;vertical-align:-3px;transition:transform .25s}
.row .more:hover .ico{transform:translateX(4px)}
.row .more:after{content:none}
.row .ph{position:relative}
.row .ph2{display:none}
.list .th{display:none}
.list .ar .ico{width:20px;height:20px;transition:transform .25s}
.list a:hover .ar .ico{transform:translateX(4px)}

/* 魅力ページの部品（基本：スマホは今までどおりの並び） */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:var(--sy2)}
.pair figure{margin:0}.pair img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.pair figcaption{font-size:12px;color:var(--mute);margin-top:6px;line-height:1.7}
@media(max-width:700px){.pair{grid-template-columns:1fr;gap:12px}}

/* ---------- 章 ---------- */
.sec{padding:var(--sy) 0}
.sec+.sec{border-top:1px solid var(--line)}
.sec.alt{background:var(--card)}
.sec.alt .card,.sec.alt .list a:hover{background:#fff}
.sec.alt .grid img,.sec.alt .row .ph{background:#fff}
.sec>.in>h2,.sec>.in>.k+h2{margin-bottom:12px}
.sec .lede+*{margin-top:var(--sy2)}
.blk{margin-top:var(--sy2)}

/* 数字の帯（箱ではなく1本の表） */
.strip{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:var(--sy2)}
.strip div{flex:1 1 0;min-width:140px;padding:18px 12px;text-align:center;border-right:1px solid var(--line)}
.strip div:last-child{border-right:0}
.strip b{display:block;font-family:Outfit,sans-serif;font-weight:300;font-size:var(--fs-n);color:var(--ac);line-height:1.1}
.strip b small{font-family:'Noto Sans JP',sans-serif;font-size:14px;font-weight:400;margin-left:2px}
.strip span{display:block;font-size:var(--fs-s);color:var(--mute);margin-top:4px}
@media(max-width:700px){.strip div{flex:1 1 50%;min-width:0;border-bottom:1px solid var(--line)}.strip div:nth-child(2n){border-right:0}.strip div:nth-last-child(-n+2){border-bottom:0}}

/* 写真＋文章の段（左右を入れ替えて縦に積む） */
.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap) 32px;align-items:center;margin-top:var(--sy2)}
.row.rev .ph{order:2}
.row .ph{border-radius:var(--r);overflow:hidden;background:var(--card)}
.row .ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.row h3{margin-bottom:8px}
.row p{color:var(--mute);font-size:14px}
.row .cap{font-size:11px;color:var(--mute);margin-top:6px;letter-spacing:.06em}
.row .more,.floor .more{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:0 18px;height:44px;font-size:13px;color:var(--ac);text-decoration:none;border:1px solid var(--ac);border-radius:var(--r);background:#fff}
.row .more .ico,.floor .more .ico{width:16px;height:16px;margin:0}
@media(max-width:700px){.row{grid-template-columns:1fr;gap:12px}.row.rev .ph{order:0}}

/* 写真の一覧（2列・4:3） */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:var(--sy2)}
.grid figure{margin:0}
.grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:var(--card)}
.grid figcaption{margin-top:8px;font-size:13px;line-height:1.6}
.grid figcaption b{font-weight:500;display:block}
.grid figcaption span{color:var(--mute);font-size:12px}
.grid figcaption .n{font-size:13px}
@media(max-width:700px){.grid{gap:12px}}

/* カード */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:16px 20px;font-size:13px;line-height:1.9}
.card .up{color:var(--ac);font-size:12px}
.card b{font-weight:500}
.card b .n{font-size:18px;color:var(--ac)}

/* 表 */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.7}
th{font-weight:400;color:var(--mute);font-size:var(--fs-s);letter-spacing:.1em;white-space:nowrap}
td .n{font-size:16px}
td.r,th.r{text-align:right;white-space:nowrap}
tbody th{color:var(--ink);font-size:14px;letter-spacing:.02em;font-weight:400;width:32%}
.tbl-x{overflow:auto;-webkit-overflow-scrolling:touch}
@media(max-width:700px){table{font-size:13px}th,td{padding:8px 6px}tbody th{width:38%}}

/* 縦のリスト（情報ページの入口など） */
.list{list-style:none;border-top:1px solid var(--line);margin-top:var(--sy2)}
.list li{border-bottom:1px solid var(--line)}
.list a{display:grid;grid-template-columns:150px 1fr auto;gap:16px;align-items:center;padding:16px 4px;text-decoration:none;color:var(--ink)}
.list a:hover{background:var(--card)}
.list .t{font-size:16px}
.list .d{font-size:13px;color:var(--mute)}
.list .ar{color:var(--ac);font-size:18px}
.list .no{display:none}
@media(max-width:700px){.list a{grid-template-columns:1fr auto;gap:2px 12px}.list .t{grid-column:1;grid-row:1}.list .d{grid-column:1;grid-row:2}.list .ar{grid-column:2;grid-row:1/3}}

/* ボタン */
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--sy2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:200px;height:48px;padding:0 28px;text-decoration:none;font-size:14px;letter-spacing:.06em;border-radius:var(--r);border:1px solid var(--ac);transition:.2s}
.btn-1{background:var(--ac);color:#fff}.btn-1:hover{background:var(--ac2);border-color:var(--ac2)}
.btn-2{background:#fff;color:var(--ac)}.btn-2:hover{background:var(--card)}
.btn-3{background:#fff;color:var(--ink);border-color:var(--line)}.btn-3:hover{border-color:var(--mute)}
.ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-4px}
td .ico,li .ico,figcaption .ico{color:var(--ac);margin-right:6px;vertical-align:-4px}

/* 問い合わせの帯 */
.cbox{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--sy2) 0;margin-top:var(--sy)}
.cbox .in{display:grid;grid-template-columns:1fr auto;gap:16px 32px;align-items:center}
.cbox p{color:var(--mute);font-size:14px}
.cbox .tel{font-family:Outfit,sans-serif;font-weight:300;font-size:28px;color:var(--ac);text-decoration:none;letter-spacing:.02em;line-height:1.2}
.cbox .btns{margin-top:0}
@media(max-width:700px){.cbox .in{grid-template-columns:1fr}}

/* 空室の抜粋 */
.vac td.mad img{width:64px;height:48px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.badge{display:inline-block;white-space:nowrap;font-size:11px;letter-spacing:.1em;color:var(--ac);border:1px solid var(--ac);border-radius:var(--r);padding:2px 8px;margin-left:8px;vertical-align:middle}

/* Instagram：左に文章、右にスマホの枠（アプリの画面を再現） */
.ig{margin-top:var(--sy2);display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
.ig-pf{display:flex;gap:14px;align-items:center}
.ig-av{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid var(--line);padding:2px;background:#fff;flex:none}
.ig-u{font-family:Outfit,sans-serif;font-size:19px;letter-spacing:.02em;color:var(--ink);display:flex;align-items:center;gap:8px}
.ig-u .ico{color:var(--ac);width:20px;height:20px}
.ig-b{font-size:13px;color:var(--mute);margin-top:2px}
.ig-st{display:flex;gap:24px;margin-top:18px;font-size:12px;color:var(--mute)}
.ig-st b{display:block;font-size:22px;color:var(--ink);font-weight:400;line-height:1.2}
.ig-st b small{font-size:12px;margin-left:1px}
.ig-d{font-size:14px;color:#333;margin-top:16px;line-height:1.9}
.ig-go{min-width:0;height:44px;padding:0 24px;font-size:13px;margin-top:20px}
.ig-c{font-size:12px;color:var(--mute);margin-top:14px}
/* スマホの枠 */
.phone{display:block;width:300px;margin:0 auto;padding:12px;background:#111;border-radius:44px;box-shadow:0 30px 60px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.2);position:relative;text-decoration:none;color:#111}
.phone:before{content:"";position:absolute;left:50%;top:22px;transform:translateX(-50%);width:84px;height:24px;background:#111;border-radius:12px;z-index:3}
.scr{background:#fff;border-radius:34px;overflow:hidden;font-family:-apple-system,'Noto Sans JP',sans-serif;font-size:11px;line-height:1.4}
.app-sb{display:flex;justify-content:space-between;align-items:center;padding:14px 22px 6px;font-size:12px;font-weight:500}
.app-sb .n{font-weight:400;font-size:13px}
.sb-r{display:flex;gap:4px;align-items:center}.sb-r i{display:block;width:12px;height:8px;border:1.2px solid #111;border-radius:2px}.sb-r i:nth-child(1){width:8px;height:8px;border-radius:50%}.sb-r i:nth-child(2){width:10px;height:10px;border-radius:50% 50% 0 0;border-bottom:0}
.app-hd{display:flex;justify-content:space-between;align-items:center;padding:8px 14px 10px;font-size:15px;font-weight:600}
.app-id{display:flex;align-items:center;gap:4px}
.app-hi{display:flex;gap:16px}.app-hi .ico{width:22px;height:22px;stroke-width:1.6}
.app-pf{display:flex;align-items:center;gap:18px;padding:0 14px}
.app-pf img{width:74px;height:74px;border-radius:50%;object-fit:cover;border:1px solid #eee;flex:none}
.app-st{display:flex;gap:22px;flex:1;justify-content:space-around;text-align:center}
.app-st b{display:block;font-size:15px;font-weight:600;line-height:1.2}
.app-st span{font-size:11px}
.app-bio{padding:10px 14px 0;font-size:11.5px}.app-bio b{display:block;font-weight:600}.app-bio span{display:block;color:#222}
.app-btns{display:flex;gap:6px;padding:12px 14px 4px}
.app-btns span{flex:1;text-align:center;font-size:12px;font-weight:600;padding:7px 0;border-radius:8px;background:#efefef}
.app-btns .f{background:#0095f6;color:#fff}
.app-tabs{display:flex;margin-top:8px;border-top:1px solid #eee}
.app-tabs span{flex:1;text-align:center;padding:9px 0 7px;border-bottom:1.5px solid transparent;color:#999}
.app-tabs span.on{color:#111;border-bottom-color:#111}
.app-tabs .ico{width:20px;height:20px}
.app-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:#fff}
.app-g img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.app-nav{display:flex;justify-content:space-around;align-items:center;padding:10px 12px 22px;border-top:1px solid #eee;background:#fff}
.app-nav .ico{width:22px;height:22px;stroke-width:1.7}
.app-nav img{width:22px;height:22px;border-radius:50%;border:1.5px solid #111}
@media(max-width:700px){.ig{gap:28px}.phone{width:280px}.phone:before{top:20px}}
/* フッター（基本：白い地で縦に積む） */
footer{border-top:1px solid var(--line);padding:32px 0 110px;font-size:13px;color:var(--mute);line-height:1.9}
footer .fn{font-family:Outfit,sans-serif;letter-spacing:.14em;color:var(--ink);font-size:15px}
footer .fs{font-family:Outfit,sans-serif;letter-spacing:.2em;font-size:10px;color:var(--mute);margin-bottom:12px}
footer .fa{font-size:12px}
footer .ftel{display:inline-flex;align-items:center;gap:8px;font-size:22px;color:var(--ink);text-decoration:none;margin:8px 0 4px}
footer .ftel .ico{color:var(--ac)}
footer .fc{margin-top:20px}
footer .fh{font-size:11px;letter-spacing:.2em;color:var(--ac);margin-bottom:6px}
footer .fc a{display:block;text-decoration:none;color:var(--ink);padding:4px 0;font-size:13px}
footer .fc a .ico{width:14px;height:14px;margin-right:6px;vertical-align:-2px;color:var(--ac)}
footer .fl{margin-top:24px;border-top:1px solid var(--line);padding-top:14px;font-size:11px}
footer .fl p+p{margin-top:6px}
footer .copy{margin-top:12px;font-family:Outfit,sans-serif;letter-spacing:.08em}
@media(min-width:701px){footer{padding-bottom:40px}.ft{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}footer .fc{margin-top:0}}

/* スマホ下の固定ボタン */
.sb{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;background:#fff;border-top:1px solid var(--line);box-shadow:var(--shb)}
.sb a{flex:1;text-align:center;padding:15px 8px;font-size:14px;text-decoration:none;letter-spacing:.06em}
.sb .a1{background:var(--ac);color:#fff}
.sb .a2{background:#fff;color:var(--ac);border-left:1px solid var(--line)}
@media(max-width:700px){.sb{display:flex}}
.draft{position:fixed;right:10px;top:70px;z-index:80;font-family:Outfit,sans-serif;font-size:10px;letter-spacing:.2em;color:var(--ac);border:1px solid var(--ac);border-radius:var(--r);padding:3px 8px;background:rgba(255,255,255,.9)}

/* 現れる動き（控えめ） */
.rv{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* 一棟完結：階の段 */
.floor{display:grid;grid-template-columns:96px 1fr;gap:16px 24px;padding:var(--sy2) 0;border-top:1px solid var(--line)}
.floor:first-of-type{border-top:0}
.floor .fno{font-family:Outfit,sans-serif;font-weight:300;font-size:34px;color:var(--ac);line-height:1;position:sticky;top:76px}
.floor .fno small{display:block;font-family:'Noto Sans JP',sans-serif;font-size:11px;letter-spacing:.14em;color:var(--mute);margin-top:6px}
.floor h3{margin-bottom:8px;font-size:19px}
.floor p{color:var(--mute);font-size:14px}
.floor .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.floor .tags span{font-size:12px;color:var(--ac);border:1px solid var(--line);border-radius:var(--r);padding:2px 10px;background:#fff}
.floor .grid{margin-top:16px}
@media(max-width:700px){.floor{grid-template-columns:1fr;gap:8px}.floor .fno{position:static;font-size:28px}.floor .fno small{display:inline;margin-left:8px}}
/* 商業施設：階の帯 */
.fl-h{display:flex;align-items:baseline;gap:14px;margin-top:var(--sy)}
.fl-h .n{font-size:34px;color:var(--ac)}
.fl-h h3{font-size:19px}
.fl-h+.grid{margin-top:16px}
.grid.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.grid.g3{grid-template-columns:1fr 1fr}}
/* FAQ */
.faq{border-top:1px solid var(--line);margin-top:var(--sy2)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:16px 32px 16px 0;font-size:16px;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:14px;font-family:Outfit;font-size:22px;color:var(--ac)}
.faq details[open] summary:after{content:"−"}
.faq .a{padding:0 0 18px;color:var(--mute);font-size:14px}
/* 空室の絞り込み */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sy2)}
.filter button{font:inherit;font-size:13px;padding:8px 16px;border:1px solid var(--line);background:#fff;border-radius:var(--r);cursor:pointer;color:var(--ink)}
.filter button.on{background:var(--ac);color:#fff;border-color:var(--ac)}
/* 物件概要の表 */
.spec th{width:28%;color:var(--mute);font-size:13px}
/* 問い合わせ */
.tel-big{font-family:Outfit,sans-serif;font-weight:300;font-size:44px;color:var(--ac);text-decoration:none;letter-spacing:.02em;line-height:1.1;display:inline-block;margin-top:8px}
@media(max-width:700px){.tel-big{font-size:34px}}

/* ================= A案（2026-09-22 澤井様選択）：写真主役。最上部と章の頭に写真を画面いっぱいに置き、文字を重ねる。見出しは明朝 ================= */
:root{--mute:#444;--fs-h1:44px;--fs-h2:30px;--fs-b:15px}
@media(max-width:700px){:root{--fs-h1:28px;--fs-h2:23px}}
h1,h2,h3,.hero h1,.band h2{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;font-weight:500;letter-spacing:.06em}
h3{font-size:21px;line-height:1.6}
.floor h3,.fl-h h3{font-size:21px}
.lede{font-size:15.5px;line-height:2;color:#333;max-width:680px}
.sec.alt{background:#fff}
.sec.alt .grid img,.sec.alt .row .ph{background:var(--card)}
.sec+.sec{border-top:0}
.sec{padding:var(--sy) 0 calc(var(--sy) + 8px)}
/* 最上部：画面の高さいっぱい */
.hero,.hero.tall{height:min(86vh,760px);min-height:520px}
@media(max-width:700px){.hero,.hero.tall{height:72vh;min-height:440px}}
.hero:after{background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.62) 100%)}
.hero .t{bottom:48px}
.hero .k{font-size:12px;letter-spacing:.3em}
.hero h1{line-height:1.4;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.hero .s{font-size:15px;margin-top:12px;letter-spacing:.06em}
@media(max-width:700px){.hero .t{bottom:28px}.hero .s{font-size:13px}}
/* 章の頭の写真の帯 */
.band{position:relative;height:min(58vh,520px);min-height:340px;overflow:hidden;background:#222;margin-top:var(--sy2)}
.band img{width:100%;height:100%;object-fit:cover;display:block}
.band:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.62) 100%)}
.band .t{position:absolute;left:0;right:0;bottom:40px;z-index:2;color:#fff}
.band .k{color:#fff;opacity:.9;letter-spacing:.3em}
.band h2{color:#fff;font-size:var(--fs-h2);text-shadow:0 2px 20px rgba(0,0,0,.5);margin:0}
.band .s{font-size:14px;margin-top:10px;opacity:.95;max-width:640px}
.band+.sec{padding-top:var(--sy2)}
@media(max-width:700px){.band{height:52vh;min-height:300px}.band .t{bottom:24px}}
/* 写真を大きく */
.row{grid-template-columns:3fr 2fr;gap:var(--gap) 40px}
.row.rev{grid-template-columns:2fr 3fr}
.row .ph img{aspect-ratio:3/2}
.row p{color:#333}
.grid{gap:20px}
.grid figcaption{font-size:14px}
.grid figcaption span{color:#555}
.floor .fno{font-size:40px}
.strip b{font-size:44px}
.strip{margin-top:var(--sy2)}
@media(max-width:700px){.row,.row.rev{grid-template-columns:1fr}.grid{gap:14px}.strip b{font-size:34px}}
/* 文字の強さ */
th{color:#555}
.note,.small{color:#666}
.k{letter-spacing:.24em}
#hd nav a{color:#333}

/* 魅力ページの中の案内（3つへ飛ぶ） */
nav.sub{position:sticky;top:60px;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav.sub .in{display:flex;gap:0}
nav.sub a{flex:1;text-align:center;padding:12px 8px;font-size:13px;text-decoration:none;color:#333;border-bottom:2px solid transparent;white-space:nowrap}
nav.sub a .n{margin-right:8px;color:var(--ac)}
nav.sub a:hover{color:var(--ac);border-bottom-color:var(--ac)}
[id="one"],[id="town"],[id="family"]{scroll-margin-top:104px}
@media(max-width:700px){nav.sub a{font-size:12px;padding:10px 4px}nav.sub a .n{display:none}}

/* ================= PC専用（1001px以上）。2026-09-22 澤井様「PCとスマホは別々に設計する」「プロのデザイナーが作ったように」。スマホ（700px以下）はこの下に一切かからない ================= */
@media(min-width:1001px){
:root{--w:1320px;--gx:40px;--sy:128px;--sy2:48px;--fs-h1:58px;--fs-h2:38px;--fs-b:15.5px;--inw:min(var(--w),calc(100vw - var(--gx)*2))}
body{letter-spacing:.03em}
/* ヘッダー：固定。TOPの最上部では透明、スクロールで白に */
#hd{position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,.96);transition:background .35s,border-color .35s,box-shadow .35s}
body{padding-top:76px}
.hm{height:76px;gap:28px}
.hb .t{font-size:16px;letter-spacing:.16em}
.hb .s{font-size:10px;letter-spacing:.18em;margin-top:3px}
.hb .s i{font-style:normal;opacity:.5;margin:0 4px}
#hd nav{gap:clamp(18px,2vw,34px);margin-left:auto}
#hd nav a{font-size:13px;letter-spacing:.12em;padding:10px 0;border:0;position:relative;color:#222;transition:color .25s}
#hd nav a:after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--ac);transform:scaleX(0);transform-origin:left;transition:transform .3s}
#hd nav a:hover:after,#hd nav a.on:after{transform:scaleX(1)}
#hd nav a:hover,#hd nav a.on{color:var(--ac)}
.htel{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-size:17px;letter-spacing:.04em;padding-left:28px;border-left:1px solid var(--line);height:36px;white-space:nowrap}
.htel .ico{width:16px;height:16px;color:var(--ac)}
.hcta{height:44px;padding:0 26px;font-size:13px;letter-spacing:.14em;border:1px solid var(--ac);background:var(--ac);color:#fff;transition:.25s}
.hcta:hover{background:#fff;color:var(--ac)}
.draft{top:86px}
/* TOPの最上部：写真の上に透明で載せ、文字は白 */
.pg-top #hd:not(.scrolled){background:transparent;border-bottom-color:transparent}
.pg-top #hd:not(.scrolled) .hb .t,.pg-top #hd:not(.scrolled) .hb .s,.pg-top #hd:not(.scrolled) nav a,.pg-top #hd:not(.scrolled) .htel{color:#fff}
.pg-top #hd:not(.scrolled) nav a:after{background:#fff}
.pg-top #hd:not(.scrolled) .htel{border-left-color:rgba(255,255,255,.4)}
.pg-top #hd:not(.scrolled) .htel .ico{color:#fff}
.pg-top #hd:not(.scrolled) .hcta{background:transparent;border-color:rgba(255,255,255,.8);color:#fff}
.pg-top #hd:not(.scrolled) .hcta:hover{background:#fff;color:var(--ac)}
#hd.scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px rgba(0,0,0,.05)}
.pg-top .hero.tall{margin-top:-76px;height:100vh;max-height:none}
.pg-top .hero:after{background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,.66) 100%)}
.pg-top .draft{top:96px}
/* TOPの最上部：夕景のCG（2026-09-25 木下様のご希望）。建物は中央なので、文字は左下に。右下に3つの情報 */
.pg-top .hero .t .in{padding-bottom:56px}
.pg-top .hero h1{max-width:620px;white-space:normal;font-size:50px;line-height:1.45}
.pg-top .hero-info{min-width:0}
.pg-vacancy .vac td{vertical-align:middle}
.pg-top .hero .cg{right:var(--gx);bottom:18px;left:auto}
.pg-top .scroll{left:50%;transform:translateX(-50%)}
.hero .cg{display:block;position:absolute;right:var(--gx);bottom:14px;z-index:3;color:#fff;font-size:11px;letter-spacing:.06em;opacity:.8}
nav.sub{top:76px}
[id="one"],[id="town"],[id="family"]{scroll-margin-top:120px}
h1,h2,h3{letter-spacing:.08em}
h3{font-size:24px}
.lede{font-size:16.5px;max-width:600px;line-height:2.1}
.k{font-size:11.5px;letter-spacing:.32em;margin-bottom:18px;display:flex;align-items:center;gap:14px}
.k:before{content:"";width:28px;height:1px;background:var(--ac);flex:none}
.hero .k:before,.band .k:before{background:#fff}
.sec{padding:var(--sy) 0}
.sec>.in>h2,.sec>.in>.k+h2{margin-bottom:22px}
/* 最上部：画面いっぱい。左下に見出し、右下に3つの情報、SCROLLの線 */
.hero,.hero.tall{height:calc(100vh - 76px);min-height:680px;max-height:980px}
.pg-top .hero.tall{min-height:720px}
.hero:after{background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.66) 100%)}
.hero .t{bottom:0}
.hero .t .in{display:grid;grid-template-columns:1fr auto;align-items:end;gap:48px;padding-bottom:64px}
.hero .k{grid-column:1}
.hero h1{grid-column:1;max-width:none;line-height:1.35;font-size:var(--fs-h1)}
.hero .s{grid-column:1;font-size:16px;margin-top:18px;letter-spacing:.08em}
.hero-info{display:block;grid-column:2;grid-row:1/span 3;border-left:1px solid rgba(255,255,255,.5);padding-left:28px;font-size:13px;letter-spacing:.06em;line-height:1.7;min-width:300px}
.hero-info div{padding:8px 0}
.hero-info div+div{border-top:1px solid rgba(255,255,255,.25)}
.hero-info span{display:block;font-family:Outfit,sans-serif;font-size:10.5px;letter-spacing:.3em;opacity:.75;margin-bottom:2px}
.hero-info b{font-family:Outfit,sans-serif;font-weight:400;font-size:20px;margin:0 2px}
.scroll{display:block;position:absolute;left:50%;transform:translateX(-50%);bottom:0;z-index:3;color:#fff;font-family:Outfit,sans-serif;font-size:10px;letter-spacing:.3em;writing-mode:vertical-rl;padding-bottom:64px}
.scroll:after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:56px;background:rgba(255,255,255,.7);animation:scr 2.2s ease-in-out infinite;transform-origin:top}
@keyframes scr{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
br.pc{display:inline}
/* 章の頭の写真 */
.band{height:min(74vh,700px);min-height:440px;margin-top:0}
.band .t{bottom:72px}
.band h2{font-size:42px}
.band .s{font-size:15px;margin-top:14px}
.band+.sec{padding-top:var(--sy)}
/* 導入：左に文章、右に数字。線は横だけ */
.intro .in{display:grid;grid-template-columns:1.1fr 1fr;gap:120px;align-items:center}
.intro h2{font-size:40px;line-height:1.6}
.intro .strip{display:grid;grid-template-columns:1fr 1fr;border:0;margin:0;column-gap:48px}
.intro .strip div{text-align:left;padding:30px 0;border-right:0;border-bottom:1px solid var(--line);min-width:0}
.intro .strip div:nth-child(-n+2){border-top:1px solid var(--line)}
.intro .strip div:nth-child(2n){border-left:0}
.intro .strip b{font-size:64px;letter-spacing:-.01em}
.intro .strip b small{font-size:15px;margin-left:4px}
.intro .strip span{font-size:13px;margin-top:10px;letter-spacing:.08em}
/* 訴求3段：写真を端まで出し、小さい写真を重ね、薄い大きな番号を敷く */
.rows .row,.rows .row.rev{grid-template-columns:1fr 1fr;gap:0 120px;margin-top:0;position:relative}
.in.rows{margin-top:72px}
.rows .row+.row{margin-top:160px}
.rows .row .ph{margin-left:calc((var(--inw) - 100vw)/2);border-radius:0;overflow:visible;background:none}
.rows .row.rev .ph{margin-left:0;margin-right:calc((var(--inw) - 100vw)/2)}
.rows .row .ph>img:first-child{aspect-ratio:auto;height:620px;border-radius:0}
.rows .row .ph2{display:block;position:absolute;right:-72px;bottom:-56px;width:300px;height:210px;object-fit:cover;box-shadow:0 24px 48px rgba(0,0,0,.18);border:6px solid #fff}
.rows .row.rev .ph2{right:auto;left:-72px}
.rows .row>div:not(.ph){max-width:460px;position:relative;padding-top:24px}
.rows .row>div:not(.ph):before{content:attr(data-no);position:absolute;left:-24px;top:-72px;font-family:Outfit,sans-serif;font-weight:300;font-size:200px;line-height:1;color:#f1f0ec;z-index:-1;letter-spacing:-.04em}
.rows .row .k{margin-bottom:26px}
.rows .row .k .n{font-size:14px;margin-right:12px}
.rows .row h3{font-size:30px;line-height:1.6;margin-bottom:22px}
.rows .row p{font-size:15.5px;line-height:2.1}
.rows .row .more,.floor .more{margin-top:32px;height:56px;padding:0 8px 0 28px;font-size:13.5px;letter-spacing:.12em;border:1px solid var(--ac);border-radius:0;display:inline-flex;align-items:center;gap:22px;transition:.25s}
.rows .row .more .ico,.floor .more .ico{width:40px;height:40px;padding:11px;border-radius:50%;background:var(--ac);color:#fff;margin:0;transition:.25s}
.rows .row .more:hover,.floor .more:hover{background:var(--ac);color:#fff}
.rows .row .more:hover .ico,.floor .more:hover .ico{background:#fff;color:var(--ac);transform:translateX(4px)}
/* 情報ページの入口：写真つきの目次 */
.toc{margin-top:0;border-top:1px solid var(--line)}
.toc a{grid-template-columns:56px 160px 220px 1fr 60px;gap:40px;padding:22px 16px;align-items:center;transition:background .25s}
.toc .th{display:block;width:160px;height:104px;object-fit:cover;border-radius:var(--r)}
.toc .no{display:block;font-family:Outfit,sans-serif;font-weight:300;font-size:26px;color:var(--ac);line-height:1;order:-1}
.toc .t{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;font-weight:500;font-size:25px;letter-spacing:.08em}
.toc .d{font-size:14.5px;max-width:640px;line-height:1.9;color:#444}
.toc .ar{justify-self:end;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.25s}
.toc a:hover .ar{background:var(--ac);border-color:var(--ac);color:#fff}
.toc .ar .ico{width:18px;height:18px}
/* 空室：地の色を変え、左に見出し、右に表 */
.sec.vac{background:var(--card)}
.pg-top .vac .in{display:grid;grid-template-columns:400px 1fr;gap:96px;align-items:start}
.vac .vac-l{position:sticky;top:108px}
.vac .vac-l .lede{max-width:none}
.vac .vac-r{min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px 28px 28px}
.vac .tbl-x{margin-top:0}
.vac th,.vac td{padding:16px 10px}
.vac td.mad img{width:130px;height:110px}
.vac .vac-r .btns{margin-top:24px}
/* Instagram：左に文章、右にスマホの枠。背景に薄い色の面 */
.igsec .in{display:grid;grid-template-columns:1fr 1fr;column-gap:120px;align-items:center}
.igsec .in>.k,.igsec .in>h2,.igsec .in>.lede{grid-column:1}
.igsec .lede{max-width:none}
.igsec .ig{display:contents}
.igsec .ig-l{grid-column:1;margin-top:40px}
.igsec .ig-av{width:72px;height:72px}
.igsec .ig-u{font-size:22px}
.igsec .ig-st{gap:36px;margin-top:24px}
.igsec .ig-st b{font-size:28px}
.igsec .ig-go{height:48px;padding:0 30px;font-size:14px;margin-top:28px}
.igsec .phone{grid-column:2;grid-row:1/span 4;width:340px;margin:0 auto;position:relative;z-index:1}
.igsec .phone:before{top:22px}
.igsec .in:after{content:"";grid-column:2;grid-row:1/span 4;justify-self:center;align-self:center;width:520px;height:520px;border-radius:50%;background:var(--card);z-index:0}
.igsec .scr{font-size:12px}
/* フッター：濃い青緑の地。4列の案内、下に注記 */
footer{background:var(--ac);color:rgba(255,255,255,.72);border-top:0;padding:88px 0 40px;font-size:13.5px}
footer .fn{color:#fff;font-size:18px;letter-spacing:.18em}
footer .fs{color:rgba(255,255,255,.6);font-size:11px;margin-bottom:22px}
footer .fa{font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.9}
footer .ftel{color:#fff;font-size:26px;margin:14px 0 6px}
footer .ftel .ico{color:#fff;width:18px;height:18px}
.ft{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px}
footer .fh{color:rgba(255,255,255,.55);font-size:11px;letter-spacing:.28em;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.18)}
footer .fc a{color:#fff;font-size:14px;padding:6px 0;position:relative;transition:padding-left .25s,opacity .25s}
footer .fc a:hover{padding-left:12px;opacity:.85}
footer .fc a:hover:before{content:"";position:absolute;left:0;top:50%;width:6px;height:1px;background:#fff}
footer .fc a .ico{color:#fff}
footer .fl{margin-top:64px;border-top:1px solid rgba(255,255,255,.18);padding-top:22px;font-size:11px;color:rgba(255,255,255,.55);line-height:1.9}
footer .fl .draftnote{color:rgba(255,255,255,.75)}
footer .copy{margin-top:18px;color:rgba(255,255,255,.7)}
}

/* ================= 魅力ページ（PC）：大小の組み合わせ・ずらし・端まで出す写真・階の縦の流れ ================= */
@media(min-width:1001px){
.pg-appeal .lede{max-width:760px}
.pg-appeal .hero .k .n{font-size:18px;margin-right:14px}
.pg-appeal [id="town"].hero,.pg-appeal [id="family"].hero{height:min(78vh,760px)}
/* 入口：主＋重ねの2枚 */
.pair{grid-template-columns:7fr 5fr;gap:0 48px;align-items:end;margin-top:64px}
.pair .a img{aspect-ratio:3/2;border-radius:0}
.pair .b{margin-bottom:96px;position:relative;z-index:2}
.pair .b img{aspect-ratio:4/3;border:8px solid #fff;box-shadow:0 24px 48px rgba(0,0,0,.16);border-radius:0}
.pair figcaption{font-size:13px;margin-top:12px}
/* 階の縦の流れ：左に階の数字（追従）、縦の線、右に文章と大小の写真 */
.floors{position:relative}
.floor{grid-template-columns:230px 1fr;gap:0 48px;padding:72px 0;border-top:0;position:relative}
.floor:before{content:"";position:absolute;left:100px;top:0;bottom:0;width:1px;background:var(--line)}
.floor:after{content:"";position:absolute;left:95px;top:88px;width:11px;height:11px;border-radius:50%;background:#fff;border:1px solid var(--ac)}
.floor:first-of-type{padding-top:8px}.floor:first-of-type:after{top:24px}
.floor .fno{position:sticky;top:120px;font-size:46px;letter-spacing:-.02em;padding-left:130px;line-height:1;align-self:start;z-index:1;white-space:nowrap;background:linear-gradient(90deg,transparent 0,transparent 110px,#fff 110px)}
.floor .fno small{font-size:12px;letter-spacing:.2em;margin-top:10px;white-space:nowrap}
.floor h3{font-size:26px;line-height:1.6;margin-bottom:16px;max-width:800px}
.floor p{font-size:15.5px;line-height:2;max-width:680px}
.floor .tags{margin-top:16px;gap:8px}
.floor .tags span{font-size:12px;padding:4px 12px}
.floor .grid.fg{display:grid;grid-template-columns:3fr 2fr;gap:0 40px;align-items:start;margin-top:36px}
.floor .grid.fg figure:first-child img{aspect-ratio:3/2}
.floor .grid.fg figure:last-child{margin-top:96px}
.floor .grid.fg figure:last-child img{aspect-ratio:4/5}
.floor:nth-of-type(even) .grid.fg{grid-template-columns:2fr 3fr}
.floor:nth-of-type(even) .grid.fg figure:first-child{order:2}
.floor:nth-of-type(even) .grid.fg figure:last-child{margin-top:0}
.floor:nth-of-type(even) .grid.fg figure:first-child{margin-top:96px}
.floor .grid.fg:has(figure:nth-child(4)){grid-template-columns:1fr 1fr;gap:28px 24px}
.floor .grid.fg:has(figure:nth-child(4)) figure{margin-top:0!important;order:0!important}
.floor .grid.fg:has(figure:nth-child(4)) img{aspect-ratio:3/2!important}
.floor .grid.fg img{border-radius:0}
/* 駅の段：写真を端まで出し、右に表 */
.row.st{grid-template-columns:1fr 1fr;gap:0 80px;align-items:center}
.row.st .ph{margin-left:calc((var(--inw) - 100vw)/2);border-radius:0}
.row.st .ph img{aspect-ratio:auto;height:560px}
.row.st table{font-size:15px}.row.st td .n{font-size:22px}
/* 寄り道の8枚：大小を混ぜた格子。距離は大きな数字で */
.grid.mosaic{grid-template-columns:repeat(12,1fr);gap:28px 24px;margin-top:56px}
.grid.mosaic figure:nth-child(4n+1),.grid.mosaic figure:nth-child(4n+4){grid-column:span 7}
.grid.mosaic figure:nth-child(4n+2),.grid.mosaic figure:nth-child(4n+3){grid-column:span 5}
.grid.mosaic img{border-radius:0;aspect-ratio:auto;height:400px}
.grid.mosaic figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.grid.mosaic figcaption b{font-family:'Shippori Mincho','Hiragino Mincho ProN',serif;font-weight:500;font-size:17px;letter-spacing:.06em}
.grid.mosaic figcaption span{white-space:nowrap;font-size:12px}
.grid.mosaic figcaption span .n{font-size:20px;color:var(--ac);margin:0 2px}
/* 小さめの「端まで出す段」（公園・神社・ピッツァ・駐車場・犬） */
.rows.sm .row .ph>img:first-child{height:480px}
.rows.sm .row+.row{margin-top:112px}
.rows.sm .row h3{font-size:26px}
.rows.sm .row>div:not(.ph){padding-top:0}
.rows.sm .row .cap{margin-top:16px;font-size:14px;letter-spacing:.02em}
.rows.sm .row .cap .n{font-size:20px;color:var(--ac);margin:0 2px}
/* こどもでぱーと：1枚大きく、5枚小さく */
.grid.kids{grid-template-columns:repeat(12,1fr);grid-auto-rows:auto;gap:24px;margin-top:48px}
.grid.kids figure{grid-column:span 4}
.grid.kids figure:first-child{grid-column:span 8;grid-row:span 2}
.grid.kids figure:first-child img{aspect-ratio:4/3}
.grid.kids figure img{aspect-ratio:4/3}
.grid.kids img{border-radius:0}
.grid.kids figcaption{margin-top:10px}
}

/* 魅力ページの入口（基本）：文章と数字3つ、右に写真3枚（大1＋小2） */
.dg .strip{margin-top:20px}
.dg .btns{margin-top:20px}
/* 基本（スマホ）：大1枚を上に、小2枚を下に横並び。写真の高さは比率で決め、説明文が下にはみ出さないようにする（2026-09-26 澤井様「文字と写真が重なる」） */
.dg-ph{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:var(--sy2)}
.dg-ph figure{margin:0;min-width:0}
.dg-ph figure:first-child{grid-column:1/-1}
.dg-ph img{width:100%;height:auto;object-fit:cover;border-radius:var(--r);aspect-ratio:4/3}
.dg-ph figure:first-child img{aspect-ratio:3/2}
.dg-ph figcaption{font-size:12px;line-height:1.6;margin-top:6px}
.dg-ph figcaption b{display:block;font-weight:500}
.dg-ph figcaption span{color:var(--mute);font-size:11px}
.dg-ph figcaption .n{font-size:13px;margin:0 1px}
@media(max-width:700px){.dg .strip div{flex:1 1 33%;border-bottom:0;padding:14px 6px}.dg .strip div:nth-child(2n){border-right:1px solid var(--line)}.dg .strip div:last-child{border-right:0}.dg .strip b{font-size:26px}.dg .strip span{font-size:11px}}
/* 部屋：間取り図＋写真2枚 */
.grid.tp .plan{grid-column:1/-1}
.grid.tp .plan img{aspect-ratio:auto;object-fit:contain;background:#fff;border:1px solid var(--line);padding:16px;max-height:560px}
/* アクセス：地図と徒歩の表 */
.map{display:grid;gap:20px;margin-top:var(--sy2)}
.map iframe{width:100%;height:340px;border:0;border-radius:var(--r);background:var(--card);display:block}
.map .small{margin-top:8px}
.floor{scroll-margin-top:90px}

/* 物件概要（基本）：左の紹介は縦に積む */
.ol-l .ol-ph{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r);margin-top:16px}
.ol-l .strip{margin-top:16px}
.ol-r{margin-top:var(--sy2)}
.ol-r .k+.tbl-x{margin-top:0}
.ol-r .tbl-x+.k{margin-top:var(--sy2)}
/* FAQ（基本）：組の見出し */
.fq-h{font-size:12px;letter-spacing:.2em;color:var(--ac);padding:18px 0 8px}
.fq-h .n{font-size:14px;margin-right:10px}
.faq+.faq{margin-top:var(--sy2)}
.fq-c{margin-top:var(--sy2);padding-top:var(--sy2);border-top:1px solid var(--line)}
.fq-c .btn{margin-top:16px}
.fq-r{margin-top:var(--sy2)}
/* お問い合わせ（基本）：受けている相談3つ */
.svc{list-style:none;margin-top:var(--sy2);border-top:1px solid var(--line)}
.svc li{padding:18px 0;border-bottom:1px solid var(--line)}
.svc .no{font-family:Outfit,sans-serif;font-weight:300;font-size:22px;color:var(--ac);display:block;line-height:1}
.svc h3{font-size:17px;margin-top:6px}
.svc p{font-size:14px;color:var(--mute);margin-top:4px}

/* ヘッダーの2つ目のボタン（白地） */
.hcta.sub{background:#fff;color:var(--ac);border:1px solid var(--ac);margin-left:-8px}
.hcta.sub:hover{background:var(--card)}
/* 空室の一覧：スマホは1戸ずつのカード（2026-09-25 木下様「横スライドで見づらい」） */
@media(max-width:700px){
.vac .tbl-x{overflow:visible}
.vac table,.vac tbody{display:block}
.vac thead{display:none}
.vac tbody tr{display:grid;grid-template-columns:132px 1fr 1fr 1fr;gap:6px 10px;align-items:start;border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-top:12px;background:#fff}
.vac tbody tr[hidden]{display:none}
.vac td{display:block;border:0;padding:0;text-align:left;line-height:1.4}
.vac td:before{content:attr(data-l);display:block;font-size:10px;letter-spacing:.1em;color:var(--mute);margin-bottom:2px}
.vac td.mad{grid-column:1;grid-row:1/4}
.vac td.mad img{width:132px;height:132px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.vac td.mad:before{content:none}
.vac td.c-fl{grid-column:2;grid-row:1}.vac td.c-ly{grid-column:3;grid-row:1}.vac td.c-ar{grid-column:4;grid-row:1}
.vac td.c-rt{grid-column:2/5;grid-row:2;padding-top:4px}
.vac td.c-rt .n{font-size:22px;color:var(--ac)}
.vac td.c-mg{grid-column:2;grid-row:3}.vac td.c-dp{grid-column:3;grid-row:3}.vac td.c-km{grid-column:4;grid-row:3}
.vac td .n{font-size:15px}
.vac td.c-ln{grid-column:1/5;grid-row:4;display:flex;gap:8px;margin-top:8px;white-space:normal!important}
.vac td.c-ln:before{content:none}
.vac td.c-ln a{flex:1;display:inline-flex;align-items:center;justify-content:center;height:40px;border:1px solid var(--ac);border-radius:var(--r);text-decoration:none;font-size:13px;color:var(--ac)}
.vac td.c-ln a:first-child{background:var(--ac);color:#fff}
.vac .badge{margin-left:4px}
}

/* 空室ページ（PC）：見出し→数字4つ→絞り込み→白い箱の表 */
@media(min-width:1001px){
.pg-vacancy .sec.vac{padding-top:72px}
.pg-vacancy .vac h1{font-size:38px;max-width:none;white-space:nowrap}
.pg-vacancy .vac .lede{max-width:760px}
.pg-vacancy .vac .strip{display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px}
.pg-vacancy .vac .strip b{white-space:nowrap}
.pg-vacancy .vac .filter{margin-top:36px}
.pg-vacancy .vac .tbl-x{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px 28px 12px;margin-top:20px!important}
.pg-vacancy .vac td,.pg-vacancy .vac th{white-space:nowrap}
.pg-vacancy .vac td.mad img{width:130px;height:110px}
.pg-vacancy .vac .note{border-top:0;margin-top:20px}
}

/* ================= 組み直し（2026-09-22 夜）：魅力は入口3画面、商業施設はフロアガイド、アクセスは地図、部屋は間取り図 ================= */
@media(min-width:1001px){
/* 魅力の入口：左に文章と数字3つ、右に写真（大1＋小2をずらす） */
.pg-appeal .sec.dg-sec{padding:96px 0 128px}
.dg{display:grid;grid-template-columns:1fr 1.15fr;gap:0 112px;align-items:center}
.dg .lede{max-width:none;font-size:16.5px}
.dg .strip{display:grid;grid-template-columns:repeat(3,1fr);border:0;margin-top:40px;column-gap:28px}
.dg .strip div{text-align:left;padding:22px 0 18px;border-right:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.dg .strip b{font-size:48px;letter-spacing:-.01em;white-space:nowrap}
.dg .strip b small{font-size:14px}
.dg .strip span{font-size:12.5px;margin-top:8px;letter-spacing:.06em}
.dg .btns{margin-top:36px;gap:14px}
.dg .btns .btn{min-width:0;padding:0 26px;height:52px}
.dg-ph{grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto;gap:24px 28px;margin-top:0;align-items:end}
.dg-ph figure:first-child{grid-column:1/8;grid-row:1/3}
.dg-ph figure:first-child img{height:600px;aspect-ratio:auto}
.dg-ph figure:nth-child(2){grid-column:8/13;grid-row:1}
.dg-ph figure:nth-child(3){grid-column:8/13;grid-row:2;margin-left:40px}
.dg-ph figure:nth-child(n+2) img{aspect-ratio:4/3;height:auto}
.dg-ph img{border-radius:0}
.dg-ph figcaption{font-size:13px;margin-top:10px}
.dg-ph figcaption span{font-size:12px}
.dg-ph figcaption .n{font-size:16px;color:var(--ac)}
.pg-appeal [id="town"].hero,.pg-appeal [id="family"].hero{height:min(72vh,700px)}
/* 商業施設：階の段（魅力ページから移設）。2階は写真なしの短い段 */
.pg-shops .strip{margin-top:48px}
.floor:not(:has(.grid)){padding:40px 0}
.floor:not(:has(.grid)) p{margin-bottom:0}
.floor .grid.fg:has(figure:nth-child(3)):not(:has(figure:nth-child(4))){grid-template-columns:5fr 3.5fr 3.5fr;gap:0 24px}
.floor .grid.fg:has(figure:nth-child(3)):not(:has(figure:nth-child(4))) figure{margin-top:0!important;order:0!important}
.floor .grid.fg:has(figure:nth-child(3)):not(:has(figure:nth-child(4))) figure:first-child img{aspect-ratio:3/2}
.floor .grid.fg:has(figure:nth-child(3)):not(:has(figure:nth-child(4))) figure:nth-child(n+2) img{aspect-ratio:4/5}
.floor .grid.fg:has(figure:nth-child(3)):not(:has(figure:nth-child(4))) figure:nth-child(3){margin-top:64px!important}
.floor .grid.fg:has(figure:nth-child(6)){grid-template-columns:repeat(3,1fr);gap:28px 24px}
.floor .grid.kids{margin-top:36px}
.pg-shops .sec.alt{background:var(--card)}
.pg-shops .sec.alt .pair{margin-top:56px}
.pg-shops .sec.alt .pair .b img{border-color:var(--card)}
/* アクセス：地図を左に大きく、右に徒歩の表（白い箱） */
.map{grid-template-columns:1.25fr 1fr;gap:0 64px;align-items:start;margin-top:48px}
.map iframe{height:560px;border-radius:0}
.map .tbl-x{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px 24px 16px}
.map td,.map th{white-space:nowrap}
.map td .ico{width:14px;height:14px;margin-right:8px;vertical-align:-2px;color:var(--ac)}
.pg-access .row.st{margin-top:48px}
.pg-access .row.st td,.pg-access .row.st th{white-space:nowrap}
.pg-access .sec.alt{background:var(--card)}
/* 部屋：段の下に間取り図（白い箱）＋写真2枚を段違いで */
/* 間取り図を左に置き、右に写真6枚を2列×3段（2026-09-26 各タイプ7枚に） */
.grid.tp{grid-template-columns:5fr 3.5fr 3.5fr;gap:24px 32px;align-items:stretch;margin-top:48px}
.grid.tp .plan{grid-column:1;grid-row:1/4;display:flex;flex-direction:column}
.grid.tp .plan img{flex:1;min-height:0;height:auto;max-height:none;padding:28px;border-radius:0;object-fit:contain}
.grid.tp figure:not(.plan) img{aspect-ratio:4/3;border-radius:0}
.grid.tp figcaption{margin-top:12px}
.rows.sm .grid.tp+.row{margin-top:144px}
.pg-rooms .rows.sm .row .cap{font-size:12px}
.pg-rooms .rows.sm .row>div:not(.ph) p:not(.cap){font-size:14.5px}
/* 共用部：2枚の写真は大小に、表は白い箱 */
.grid.duo{grid-template-columns:7fr 5fr;gap:0 40px;align-items:start;margin-top:56px}
.grid.duo figure:last-child{margin-top:80px}
.grid.duo img{border-radius:0}
.grid.duo figure:first-child img{aspect-ratio:3/2}
.grid.duo figure:last-child img{aspect-ratio:4/5}
.pg-common .sec.alt .tbl-x,.pg-equip .tbl-x,.pg-outline .tbl-x{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px 28px 12px}
.pg-common .sec.alt,.pg-equip .sec.alt{background:var(--card)}
.pg-equip .tbl-x{margin-top:40px}
.pg-equip table.spec th{width:220px;padding:16px 10px}
.pg-equip table.spec td{padding:16px 10px;font-size:15px}
.rows.sm .row+.tbl-x{margin-top:56px}
.rows.sm .grid+.row,.rows.sm .tbl-x+.row{margin-top:128px}
}

/* ================= 物件概要・FAQ・お問い合わせ（PC）。2026-09-22 夜 ================= */
@media(min-width:1001px){
/* 物件概要：左に建物の紹介（追従）、右に白い箱の表2つ */
.ol{display:grid;grid-template-columns:380px 1fr;gap:0 96px;align-items:start}
.ol-l{position:sticky;top:108px}
.ol-l h2{font-size:30px;letter-spacing:.14em;font-family:Outfit,sans-serif;font-weight:300;margin-top:-6px}
.ol-l .lede{font-size:14.5px;line-height:2;margin-top:16px}
.ol-l .ol-ph{border-radius:0;margin-top:28px;aspect-ratio:4/3}
.ol-l .strip{display:grid;grid-template-columns:1fr;border:0;margin-top:20px}
.ol-l .strip div{text-align:left;padding:16px 0;border-right:0;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:16px}
.ol-l .strip div:first-child{border-top:1px solid var(--line)}
.ol-l .strip b{font-size:36px;min-width:120px}
.ol-l .strip span{margin-top:0;font-size:12.5px}
.ol-r{margin-top:0}
.ol-r .k{margin-bottom:14px}
.ol-r .tbl-x{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px 28px 12px}
.ol-r .tbl-x+.k{margin-top:56px}
.ol-r table.spec th{width:200px;padding:16px 10px;font-size:13px}
.ol-r table.spec td{padding:16px 10px;font-size:15px}
.ol-r .note{margin-top:40px}
/* FAQ：左に見出しと電話（追従）、右に3つの組 */
.pg-faq .sec.fq{padding-top:96px}
.fq .in{display:grid;grid-template-columns:400px 1fr;gap:0 112px;align-items:start}
.fq-l{position:sticky;top:108px}
.fq-l h1{font-size:38px;line-height:1.6}
.fq-l .lede{max-width:none;font-size:15px}
.fq-c{margin-top:40px;padding-top:32px}
.fq-c .tel-big{font-size:40px}
.fq-c .small{margin-top:6px}
.fq-c .btn{margin-top:22px;min-width:0}
.fq-r{margin-top:6px}
.faq{border-top:0}
.faq+.faq{margin-top:56px}
.fq-h{padding:0 0 12px;border-bottom:1px solid var(--ac);font-size:12px}
.fq-h .n{font-size:16px}
.faq summary{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;font-weight:500;font-size:19px;letter-spacing:.06em;padding:24px 56px 24px 0;transition:color .25s}
.faq summary:hover{color:var(--ac)}
.faq summary:after{right:8px;top:22px;font-size:26px;width:32px;height:32px;line-height:30px;text-align:center;border:1px solid var(--line);border-radius:50%;transition:.25s}
.faq details[open] summary:after{background:var(--ac);color:#fff;border-color:var(--ac)}
.faq .a{padding:0 56px 28px 0;font-size:15px;line-height:2;max-width:760px}
/* お問い合わせ：左に電話とボタン、右に写真を端まで。相談3つは3列 */
.pg-contact .sec.ct{padding-top:64px;padding-bottom:0}
.ct-top{grid-template-columns:1fr 1fr;gap:0 96px;align-items:center;margin-top:0}
.ct-top .ph{margin-right:calc((var(--inw) - 100vw)/2);border-radius:0}
.ct-top .ph img{aspect-ratio:auto;height:640px}
.ct-top h1{font-size:40px;line-height:1.6}
.ct-top .lede{max-width:none;font-size:15px}
.ct-top .tel-big{font-size:56px}
.ct-top .btns{margin-top:28px}
.pg-contact .sec.ct-s{background:#fff;padding-top:var(--sy)}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px;border-top:0;margin-top:48px}
.svc li{padding:28px 0 0;border-bottom:0;border-top:1px solid var(--ac)}
.svc .no{font-size:30px}
.svc h3{font-size:22px;margin-top:14px}
.svc p{font-size:14.5px;line-height:2;margin-top:10px}
.pg-contact .igsec{background:var(--card)}
}

/* ヘッダーの2つのボタン（PC） */
@media(min-width:1001px){
.hcta.sub{margin-left:-14px;border-color:var(--ac);background:#fff;color:var(--ac)}
.hcta.sub:hover{background:var(--ac);color:#fff}
.pg-top #hd:not(.scrolled) .hcta.sub{background:transparent;border-color:rgba(255,255,255,.8);color:#fff}
.pg-top #hd:not(.scrolled) .hcta.sub:hover{background:#fff;color:var(--ac)}
.pg-top #hd:not(.scrolled) .hcta:not(.sub){background:#fff;border-color:#fff;color:var(--ac)}
.pg-top #hd:not(.scrolled) .hcta:not(.sub):hover{background:transparent;color:#fff}
/* TOPの空室：導入の直後に置く（2026-09-25 木下様「空室が遠い」） */
.pg-top .intro+.vac{padding-top:0}
}
/* 内装の色の表：3枚の写真を同じ大きさに（2026-09-26 澤井様） */
.pg-rooms table td img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
