/* ROKU ASAKUSA — brand tokens (brand-proposal.html 準拠) */
:root{
  --sumi:#16181A;      /* 墨 */
  --shu:#C8352B;       /* 朱 — 総面積5%まで */
  --kina:#F5F2EC;      /* 生成 */
  --nezumi:#8A8F94;    /* 鼠 */

  --paper:#F1F0EA;
  --raise:#FAF9F5;
  --ink:#14171A;
  --ink-soft:#5A6167;
  --ink-faint:#8B9096;
  --rule:#D7D6CD;

  --font-display:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --font-body:"Yu Gothic","YuGothic","Hiragino Sans","Noto Sans JP","Segoe UI",sans-serif;
  --font-latin:"Helvetica Neue",Arial,"Segoe UI",sans-serif;
  --font-mono:"SFMono-Regular",Consolas,"Courier New",monospace;

  --gut:clamp(20px,5vw,28px);
  --max:1040px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.85;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:.04em;line-height:1.45;margin:0;}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);}
.eyebrow{font-family:var(--font-latin);font-size:10.5px;letter-spacing:.28em;
         text-transform:uppercase;color:var(--ink-faint);margin:0 0 22px;}
.lede{color:var(--ink-soft);max-width:64ch;}
.mono{font-family:var(--font-mono);}
.shu{color:var(--shu);}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(241,240,234,.92);
           backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);}
.site-head .bar{display:flex;align-items:center;gap:20px;height:64px;}
.site-head .logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto;}
.site-head .logo img{height:26px;width:auto;display:block;}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:26px;}
.site-nav a{font-size:13.5px;text-decoration:none;color:var(--ink-soft);letter-spacing:.06em;
            transition:color .15s;}
.site-nav a:hover{color:var(--ink);}
@media(max-width:820px){.site-nav a:not(.btn){display:none;}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     padding:13px 26px;border-radius:2px;text-decoration:none;font-size:14px;
     letter-spacing:.08em;border:1px solid var(--sumi);background:var(--sumi);
     color:var(--kina);transition:opacity .15s,background .15s,color .15s;white-space:nowrap;}
.btn:hover{opacity:.85;}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule);}
.btn--ghost:hover{border-color:var(--ink-faint);opacity:1;}
.btn--sm{padding:9px 18px;font-size:13px;}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,9vw,104px) 0 clamp(44px,6vw,72px);border-bottom:1px solid var(--rule);}
.hero h1{font-size:clamp(30px,5.6vw,52px);letter-spacing:.03em;margin:0 0 26px;}
.hero h1 .num{font-family:var(--font-latin);font-weight:700;letter-spacing:0;}
.hero .lede{font-size:clamp(15px,1.7vw,16.5px);margin-bottom:32px;}
.addr-chip{display:inline-flex;flex-wrap:wrap;gap:2px 10px;padding:9px 16px;margin-bottom:34px;
           border:1px solid var(--rule);border-radius:2px;background:var(--raise);
           font-family:var(--font-mono);font-size:12.5px;letter-spacing:.04em;color:var(--ink-soft);}
.addr-chip b{color:var(--shu);font-weight:700;}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;}

.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
         border:1px solid var(--rule);border-radius:3px;margin-top:clamp(36px,5vw,56px);overflow:hidden;}
.figures div{background:var(--raise);padding:20px 16px;text-align:center;}
.figures dt{font-family:var(--font-latin);font-size:10px;letter-spacing:.2em;
            text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px;}
.figures dd{margin:0;font-family:var(--font-display);font-size:clamp(19px,3.4vw,27px);font-weight:600;}
.figures dd small{font-size:.55em;font-weight:400;color:var(--ink-soft);margin-left:2px;}

/* ---------- section frame ---------- */
section{padding:clamp(56px,8vw,92px) 0;}
section + section{border-top:1px solid var(--rule);}
.sec-label{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--rule);
           padding-bottom:11px;margin-bottom:clamp(28px,4vw,40px);}
.sec-label .jp{font-family:var(--font-display);font-size:clamp(19px,2.6vw,23px);font-weight:600;letter-spacing:.06em;}
.sec-label .en{font-family:var(--font-latin);font-size:10px;letter-spacing:.24em;
               text-transform:uppercase;color:var(--ink-faint);margin-left:auto;}

/* ---------- pricing ---------- */
.plans{display:grid;gap:20px;margin-top:8px;}
@media(min-width:820px){.plans{grid-template-columns:1fr 1fr;}}
.plan{border:1px solid var(--rule);border-radius:3px;background:var(--raise);
      padding:clamp(24px,3.4vw,34px);display:flex;flex-direction:column;}
.plan--lead{border-color:var(--sumi);position:relative;}
.plan--solo{border-color:var(--sumi);max-width:560px;}
.plan--lead::before{content:"推奨";position:absolute;top:-1px;right:20px;
      background:var(--shu);color:var(--kina);font-size:11px;letter-spacing:.16em;
      padding:4px 11px;border-radius:0 0 2px 2px;font-family:var(--font-body);}
.plan h3{font-size:19px;margin-bottom:4px;}
.plan .sub{font-family:var(--font-latin);font-size:10.5px;letter-spacing:.2em;
           text-transform:uppercase;color:var(--ink-faint);margin-bottom:22px;}
.plan .price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
             padding-bottom:18px;border-bottom:1px solid var(--rule);margin-bottom:18px;}
.plan .price b{font-family:var(--font-display);font-size:clamp(30px,5vw,40px);font-weight:600;letter-spacing:.01em;}
.plan .price span{font-size:13.5px;color:var(--ink-soft);}
.plan .price .per{font-size:13px;color:var(--ink-faint);width:100%;font-family:var(--font-mono);}
.plan ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px;}
.plan li{position:relative;padding-left:19px;font-size:14.5px;line-height:1.7;color:var(--ink-soft);}
.plan li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:1px;background:var(--shu);}
.plan li b{color:var(--ink);font-weight:600;}
.plan .foot{margin-top:auto;}
.plan .note{font-size:12.5px;color:var(--ink-faint);line-height:1.7;margin-top:12px;}

/* ---------- table ---------- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.data{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--raise);
           border:1px solid var(--rule);min-width:460px;}
table.data th,table.data td{border:1px solid var(--rule);padding:14px 16px;text-align:left;
                            vertical-align:top;line-height:1.7;}
table.data thead th{background:#EAE8E0;font-size:13px;letter-spacing:.08em;font-weight:600;white-space:nowrap;}
table.data tbody th{width:30%;font-weight:600;color:var(--ink);background:#F3F1EA;}
table.data td{color:var(--ink-soft);}
table.data .amt{font-family:var(--font-mono);white-space:nowrap;color:var(--ink);}

/* ---------- reasons ---------- */
.reasons{display:grid;gap:2px;background:var(--rule);border:1px solid var(--rule);
         border-radius:3px;overflow:hidden;}
@media(min-width:760px){.reasons{grid-template-columns:1fr 1fr;}}
.reason{background:var(--raise);padding:clamp(24px,3vw,32px);}
.reason .no{font-family:var(--font-latin);font-size:11px;letter-spacing:.18em;
            color:var(--shu);font-weight:700;margin-bottom:12px;}
.reason h3{font-size:17px;margin-bottom:10px;}
.reason p{font-size:14.5px;color:var(--ink-soft);line-height:1.8;margin:0;}

/* ---------- building ---------- */
.stack{border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:var(--raise);}
.floor{display:grid;grid-template-columns:62px 1fr;border-bottom:1px solid var(--rule);}
.floor:last-child{border-bottom:0;}
.floor .no{display:flex;align-items:center;justify-content:center;font-family:var(--font-latin);
           font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--ink-faint);
           border-right:1px solid var(--rule);}
.floor.vo{background:#F3F1EA;}
.floor.vo .no{color:var(--kina);background:var(--shu);}
.floor .body{padding:17px 20px;}
.floor h4{margin:0 0 3px;font-size:15px;letter-spacing:.03em;}
.floor p{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.7;}

/* ---------- mail rules ---------- */
.cols2{display:grid;gap:20px;}
@media(min-width:760px){.cols2{grid-template-columns:1fr 1fr;}}
.card{border:1px solid var(--rule);border-radius:3px;background:var(--raise);padding:clamp(22px,3vw,30px);}
.card--warn{border-left:2px solid var(--shu);}
.card h3{font-size:16px;margin-bottom:14px;}
.card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.card li{font-size:14.5px;color:var(--ink-soft);padding-left:18px;position:relative;line-height:1.7;}
.card li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:1px;background:var(--nezumi);}
.card--warn li::before{background:var(--shu);}
.card > p{font-size:13.5px;color:var(--ink-faint);line-height:1.75;margin-top:16px;}

/* ---------- steps ---------- */
.steps{display:grid;gap:2px;background:var(--rule);border:1px solid var(--rule);
       border-radius:3px;overflow:hidden;counter-reset:s;}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr);}}
.step{background:var(--raise);padding:clamp(22px,2.6vw,28px);counter-increment:s;}
.step::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--font-latin);
              font-size:11px;letter-spacing:.18em;color:var(--shu);font-weight:700;margin-bottom:12px;}
.step h3{font-size:15.5px;margin-bottom:8px;}
.step p{font-size:13.5px;color:var(--ink-soft);line-height:1.75;margin:0;}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--rule);}
.faq details{border-bottom:1px solid var(--rule);}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
             font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:.03em;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:1px;
                    background:var(--ink-faint);}
.faq summary::before{content:"";position:absolute;right:13px;top:50%;width:1px;height:11px;
                     margin-top:-5px;background:var(--ink-faint);transition:opacity .2s;}
.faq details[open] summary::before{opacity:0;}
.faq .ans{padding:0 0 22px;font-size:14.5px;color:var(--ink-soft);line-height:1.85;max-width:72ch;}

/* ---------- cta band ---------- */
.band{background:var(--sumi);color:var(--kina);border:0;}
.band h2{font-size:clamp(23px,3.6vw,32px);color:var(--kina);margin-bottom:18px;letter-spacing:.04em;}
.band p{color:rgba(245,242,236,.72);max-width:60ch;font-size:15px;}
.band .btn{background:var(--kina);color:var(--sumi);border-color:var(--kina);}
.band .btn--ghost{background:transparent;color:var(--kina);border-color:rgba(245,242,236,.34);}
.band .hero-cta{margin-top:28px;}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--rule);padding:clamp(44px,6vw,64px) 0 40px;background:var(--raise);}
.foot-grid{display:grid;gap:32px;}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr;}}
.site-foot img.mark{height:30px;width:auto;margin-bottom:18px;display:block;}
.site-foot address{font-style:normal;font-size:13.5px;color:var(--ink-soft);line-height:1.9;}
.site-foot h4{font-family:var(--font-latin);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
              color:var(--ink-faint);margin-bottom:14px;font-weight:500;}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.site-foot ul a{font-size:13.5px;color:var(--ink-soft);text-decoration:none;}
.site-foot ul a:hover{color:var(--ink);text-decoration:underline;}
.copyright{margin-top:40px;padding-top:22px;border-top:1px solid var(--rule);
           font-family:var(--font-latin);font-size:11px;letter-spacing:.1em;color:var(--ink-faint);}

/* ---------- legal pages ---------- */
.legal{padding:clamp(44px,6vw,72px) 0 clamp(60px,8vw,96px);}
.legal h1{font-size:clamp(23px,3.4vw,30px);border-bottom:2px solid var(--shu);
          padding-bottom:12px;margin-bottom:12px;}
.legal .updated{font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);margin-bottom:36px;}
.legal .intro{color:var(--ink-soft);font-size:14.5px;max-width:70ch;margin-bottom:38px;}
.legal section{padding:0;border:0;margin-bottom:34px;}
.legal section + section{border-top:0;}
.legal h2{font-size:17px;margin-bottom:12px;padding-left:13px;border-left:2px solid var(--shu);}
.legal p,.legal li{font-size:14.5px;color:var(--ink-soft);line-height:1.9;}
.legal ul,.legal ol{margin:0 0 1em;padding-left:1.3em;display:flex;flex-direction:column;gap:7px;}
.legal .fine{font-size:13px;color:var(--ink-faint);line-height:1.8;}
.legal strong{color:var(--ink);font-weight:600;}
.ph{background:#F6E9E7;border-bottom:1px dashed var(--shu);padding:0 3px;color:var(--shu);
    font-family:var(--font-mono);font-size:.92em;}

/* ---------- problem ---------- */
.problem{background:var(--raise);}
.problem .items{display:grid;gap:2px;background:var(--rule);border:1px solid var(--rule);
                border-radius:3px;overflow:hidden;margin-bottom:30px;}
@media(min-width:700px){.problem .items{grid-template-columns:repeat(3,1fr);}}
.problem .item{background:var(--paper);padding:clamp(22px,3vw,28px);}
.problem .item p{margin:0;font-size:14.5px;line-height:1.85;color:var(--ink-soft);}
.problem .item p::before{content:"「";color:var(--shu);}
.problem .item p::after{content:"」";color:var(--shu);}
.problem .answer{font-family:var(--font-display);font-size:clamp(17px,2.4vw,21px);
                 font-weight:600;letter-spacing:.05em;line-height:1.7;}

/* ---------- compare ---------- */
table.cmp{width:100%;border-collapse:collapse;font-size:14px;background:var(--raise);
          border:1px solid var(--rule);min-width:600px;}
table.cmp th,table.cmp td{border:1px solid var(--rule);padding:13px 14px;text-align:center;line-height:1.65;}
table.cmp thead th{background:#EAE8E0;font-size:12.5px;letter-spacing:.06em;font-weight:600;}
table.cmp thead th.us{background:var(--sumi);color:var(--kina);}
table.cmp tbody th{text-align:left;background:#F3F1EA;font-weight:600;white-space:nowrap;font-size:13.5px;}
table.cmp td{color:var(--ink-soft);}
table.cmp td.us{background:#F7F4EC;color:var(--ink);font-weight:600;}
table.cmp .yes{color:var(--shu);font-weight:700;}
table.cmp .no{color:var(--ink-faint);}
.cmp-note{font-size:12.5px;color:var(--ink-faint);line-height:1.8;margin-top:16px;}

/* ---------- voices (placeholder-ready) ---------- */
.voices{display:grid;gap:20px;}
@media(min-width:760px){.voices{grid-template-columns:repeat(3,1fr);}}
.voice{border:1px solid var(--rule);border-radius:3px;background:var(--raise);padding:26px 24px;}
.voice blockquote{margin:0 0 16px;font-size:14.5px;line-height:1.9;color:var(--ink-soft);}
.voice cite{font-style:normal;font-size:12.5px;color:var(--ink-faint);font-family:var(--font-mono);}

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
            gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
            background:rgba(22,24,26,.96);backdrop-filter:blur(8px);}
.sticky-cta .btn{flex:1;padding:13px 10px;font-size:13.5px;
                 background:var(--kina);color:var(--sumi);border-color:var(--kina);}
.sticky-cta .btn--ghost{flex:0 0 38%;background:transparent;color:var(--kina);
                        border-color:rgba(245,242,236,.34);}
@media(max-width:820px){
  .sticky-cta{display:flex;}
  body{padding-bottom:72px;}
}

/* ---------- blog ---------- */
.crumb{font-size:12px;color:var(--ink-faint);margin-bottom:24px;font-family:var(--font-mono);}
.crumb a{color:var(--ink-faint);text-decoration:none;}
.crumb a:hover{color:var(--ink);text-decoration:underline;}

.post-list{display:grid;gap:2px;background:var(--rule);border:1px solid var(--rule);
           border-radius:3px;overflow:hidden;}
.post-list a{display:block;background:var(--raise);padding:26px clamp(20px,3vw,30px);
             text-decoration:none;transition:background .15s;}
.post-list a:hover{background:#F3F1EA;}
.post-list .kw{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
               color:var(--shu);margin:0 0 8px;}
.post-list h2{font-size:clamp(16px,2.2vw,19px);margin-bottom:8px;letter-spacing:.03em;}
.post-list p{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.75;}

.post{padding:clamp(36px,5vw,60px) 0 clamp(60px,8vw,92px);}
.post .head{border-bottom:1px solid var(--rule);padding-bottom:26px;margin-bottom:36px;}
.post h1{font-size:clamp(24px,4vw,36px);line-height:1.5;margin-bottom:18px;}
.post .meta{font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);}
.post .body{max-width:72ch;}
.post .body > p{font-size:15.5px;line-height:2;color:var(--ink);margin-bottom:1.4em;}
.post .summary{background:var(--raise);border-left:2px solid var(--shu);
               padding:22px 24px;margin-bottom:38px;}
.post .summary p{margin:0;font-size:15px;line-height:1.95;color:var(--ink);}
.post .summary strong{font-weight:700;}
.post h2{font-size:clamp(19px,2.8vw,23px);margin:52px 0 20px;padding-bottom:10px;
         border-bottom:1px solid var(--rule);}
.post h3{font-size:17px;margin:36px 0 14px;padding-left:12px;border-left:2px solid var(--shu);}
.post ul,.post ol{margin:0 0 1.4em;padding-left:1.4em;display:flex;flex-direction:column;gap:9px;}
.post li{font-size:15px;line-height:1.9;color:var(--ink-soft);}
.post .tbl-scroll{margin-bottom:1.6em;}
.post .callout{border:1px solid var(--rule);background:var(--raise);border-radius:3px;
               padding:22px 24px;margin:32px 0;}
.post .callout p{margin:0;font-size:14.5px;line-height:1.9;color:var(--ink-soft);}
.post .cta-box{margin-top:56px;padding:30px clamp(22px,3vw,32px);background:var(--sumi);
               border-radius:3px;color:var(--kina);}
.post .cta-box h3{color:var(--kina);border:0;padding:0;margin:0 0 14px;font-size:18px;}
.post .cta-box p{color:rgba(245,242,236,.72);font-size:14.5px;line-height:1.9;margin-bottom:20px;}
.post .cta-box .btn{background:var(--kina);color:var(--sumi);border-color:var(--kina);}
.post .related{margin-top:48px;border-top:1px solid var(--rule);padding-top:26px;}
.post .related h4{font-family:var(--font-latin);font-size:10px;letter-spacing:.2em;
                  text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px;font-weight:500;}
.post .related ul{list-style:none;padding:0;margin:0;gap:10px;}
.post .related a{font-size:14px;color:var(--ink-soft);}

/* ---------- a11y ---------- */
.skip{position:absolute;left:-9999px;}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--sumi);color:var(--kina);padding:10px 16px;}
:focus-visible{outline:2px solid var(--shu);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}

/* ---- アクセスマップ ---- */
.access-map{margin:0 0 26px;}
.access-map iframe{display:block;width:100%;height:420px;border:1px solid var(--rule);
                   border-radius:4px;background:var(--raise);}
@media(max-width:640px){.access-map iframe{height:320px;}}
.access-map figcaption{margin-top:9px;font-size:12px;line-height:1.75;color:var(--ink-faint);
                       letter-spacing:.02em;}
.access-map figcaption a{color:var(--ink-soft);text-underline-offset:3px;}

/* ---- 建物写真 ---- */
.photo{margin:0;}
.photo img{display:block;width:100%;height:auto;border:1px solid var(--rule);
           border-radius:3px;background:var(--raise);}
.photo figcaption{margin-top:9px;font-size:12px;line-height:1.75;color:var(--ink-faint);
                  letter-spacing:.02em;}
.photo--crop img{object-fit:cover;}
.photo--tall img{aspect-ratio:3/4;}
.photo--wide img{aspect-ratio:16/9;}
/* 縦位置の写真は本文幅いっぱいに伸ばすと縦に長すぎるため上限を設ける */
.photo--portrait img{max-width:min(100%,420px);}

.photo-grid{display:grid;gap:16px;}
@media(min-width:720px){.photo-grid{grid-template-columns:1fr 1fr;}}

/* 建物セクション：写真とフロア構成を横並びに */
.building-split{display:grid;gap:22px;align-items:start;}
@media(min-width:860px){.building-split{grid-template-columns:minmax(0,0.6fr) 1fr;}}

.post .photo{margin:32px 0;}
.post .photo-grid{margin:32px 0;}
.post .photo-grid .photo{margin:0;}

/* ---- 登記用の正式表記 ---- */
.touki-hyoki{margin:14px 0 0;padding:11px 14px;background:var(--raise);
             border:1px solid var(--rule);border-radius:3px;
             font-size:14px;line-height:1.8;color:var(--ink);letter-spacing:.02em;}
.touki-hyoki span{display:block;font-size:11px;letter-spacing:.14em;
                  color:var(--ink-faint);margin-bottom:3px;}