@charset "utf-8";
/* 下層ページ用の部品（design.css の上に読み込む） */

/* ===== ページ見出し ===== */
.pagehead{padding:34px 0 6px;text-align:center}
.pagehead .en{display:inline-block;font-family:var(--nunito);font-weight:900;font-size:11px;letter-spacing:.3em;color:#fff;background:var(--lime);padding:4px 16px 3px;border-radius:999px}
.pagehead h1{font-size:clamp(23px,3vw,32px);font-weight:800;letter-spacing:.04em;color:var(--green-d);margin-top:10px;line-height:1.5}
.pagehead .lead{font-size:13.5px;color:var(--muted);margin-top:6px}
.pagehead .bumps{display:flex;justify-content:center;align-items:flex-end;gap:5px;margin-top:12px}
.pagehead .bumps i{width:13px;height:8px;background:#C9DDB4;clip-path:polygon(50% 0,100% 100%,0 100%);display:block}
.pagehead .bumps i:nth-child(2){background:var(--lime);width:17px;height:11px}
.pagehead .bumps i:nth-child(3){background:var(--gold);width:8px;height:8px;clip-path:none;border-radius:50%;margin-bottom:1px}
.pagehead .bumps i:nth-child(4){width:15px;height:10px;background:#AFCB90}

/* ===== カードの価格未公開表示 ===== */
.card .pr .soon{font-family:var(--rounded);font-size:15px;font-weight:800;color:var(--gold);background:#FBF3DE;border-radius:8px;padding:3px 10px;display:inline-block;line-height:1.7}

/* ===== 物件一覧 ===== */
.filterbox{background:var(--card);border:2px solid #E3DCC4;border-radius:22px;padding:20px 22px;margin-top:8px}
.filterbox .frow{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px;align-items:end}
.filterbox label{display:block;font-size:11.5px;font-weight:800;color:var(--sage);margin-bottom:4px}
.filterbox select{width:100%;font-family:var(--rounded);font-size:14px;font-weight:700;color:var(--ink);padding:11px 12px;border:2px solid #E3DCC4;border-radius:12px;background:#fff;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--green) 50%),linear-gradient(135deg,var(--green) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.filterbox .btn{padding:12px 26px}
.listbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 14px;flex-wrap:wrap}
.listbar .count{font-size:15px;font-weight:800;color:var(--green-d)}
.listbar .count b{font-family:var(--nunito);font-size:24px;color:var(--green)}
.listbar select{font-family:var(--rounded);font-size:13px;font-weight:700;padding:9px 12px;border:2px solid #E3DCC4;border-radius:999px;background:#fff}
.pager{display:flex;gap:8px;justify-content:center;margin:30px 0 4px}
.pager span{font-family:var(--nunito);font-weight:800;border:2px solid #E3DCC4;background:#fff;border-radius:12px;min-width:42px;text-align:center;padding:8px 10px;font-size:14px;color:var(--muted)}
.pager span.on{background:var(--green);border-color:var(--green);color:#fff}

/* ===== 物件詳細 ===== */
.dhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:26px;flex-wrap:wrap}
.dhead h1{font-size:clamp(20px,2.6vw,27px);font-weight:800;line-height:1.5;color:var(--green-d)}
.dhead .ad{font-size:13px;color:var(--ink-2);margin-top:2px}
.dhead .pr{font-family:var(--nunito);font-weight:800;font-size:32px;color:var(--green);white-space:nowrap;line-height:1.2}
.dhead .pr .yen{font-family:var(--rounded);font-size:16px}
.dhead .pr .soon{font-family:var(--rounded);font-size:16px;font-weight:800;color:var(--gold);background:#FBF3DE;border-radius:10px;padding:6px 14px;display:inline-block}
.dcomment{background:#FBF7EC;border:2px solid #EADFC2;border-radius:16px;padding:16px 20px;font-size:14px;margin-top:16px}
.dcomment b{color:#8A6716;font-size:12px;display:block;margin-bottom:2px;letter-spacing:.08em}
.dgrid{display:grid;grid-template-columns:1fr 300px;gap:26px;margin-top:20px;align-items:start}
.gallery .main{display:block;width:100%;padding:0;font:inherit;color:inherit;position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;border:5px solid #fff;box-shadow:0 8px 22px rgba(45,95,60,.12);background:var(--paper-2)}
.gallery .main img{width:100%;height:100%;object-fit:cover}
.gallery .main .cap{position:absolute;left:10px;bottom:10px;background:rgba(32,72,43,.82);color:#fff;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 12px}
.gallery .thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px}
.gallery .thumbs .t{display:block;width:100%;padding:0;font:inherit;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:2.5px solid transparent;cursor:pointer;background:var(--paper-2)}
.gallery .thumbs .t img{width:100%;height:100%;object-fit:cover}
.gallery .thumbs .t.on{border-color:var(--gold)}
/* 写真に width/height を書いてあるので、縦はCSS側の指定に従わせる
   （書かないとHTML属性の実寸ピクセルがそのまま高さになってしまう）
   .card .ph img のように高さを持つ指定のほうが強いので、そちらは影響を受けない */
img.hst-img{height:auto}

/* キーボードで操作したときに、いまどこにいるかが見えるようにする */
.gallery .main:focus-visible,.gallery .thumbs .t:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.gallery .nopic{aspect-ratio:4/3;border-radius:22px;border:2px dashed #D8D2BC;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700;font-size:13px;background:var(--paper-2)}
.dsec{margin-top:34px}
.dsec h2{font-size:17px;font-weight:800;color:var(--green-d);display:flex;align-items:center;gap:8px;margin-bottom:12px}
.dsec h2::before{content:"";width:12px;height:9px;background:var(--lime);clip-path:polygon(50% 0,100% 100%,0 100%)}
.spec{background:var(--card);border:2px solid #E3DCC4;border-radius:18px;overflow:hidden}
.spec .g h3{background:#EDF3E0;font-size:12.5px;font-weight:800;padding:9px 16px;color:var(--green-d)}
.spec dl{display:grid;grid-template-columns:170px 1fr;font-size:13px}
.spec dt{background:#FBF9F0;border-top:1.5px solid #F0ECDC;padding:9px 14px;font-weight:800;color:var(--sage)}
.spec dd{border-top:1.5px solid #F0ECDC;padding:9px 14px;color:var(--ink-2)}
.chipschool{display:inline-block;font-size:11px;font-weight:800;color:#fff;background:var(--green);border-radius:999px;padding:2px 12px;margin-right:8px}
.mapbox{aspect-ratio:16/7;border-radius:18px;border:2px dashed #D8D2BC;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700;font-size:13px;background:var(--paper-2)}
.rail{position:sticky;top:86px}
.railbox{background:var(--card);border:2px solid #E3DCC4;border-radius:22px;padding:20px;text-align:center}
.railbox .h{font-size:14.5px;font-weight:800;color:var(--green-d);margin-bottom:12px}
.railbox .btn{width:100%;margin-bottom:10px}
.railbox .tel{border:2px dotted #E3DCC4;border-radius:16px;padding:10px;font-size:11.5px;color:var(--ink-2);margin-bottom:10px}
.railbox .tel b{display:block;font-family:var(--nunito);font-size:20px;color:var(--green-d);letter-spacing:.02em}
.spfixed{display:none}

/* ===== スタッフ ===== */
.slist{display:grid;grid-template-columns:1fr;gap:20px;margin-top:8px}
.srow{background:var(--card);border:2px solid #E3DCC4;border-radius:24px;overflow:hidden;display:grid;grid-template-columns:250px 1fr}
.srow{position:relative;transform:translateZ(0)}  /* Safari等で角丸クリップを安定させる */
.srow .ph{position:relative;background:var(--paper-2);min-height:250px;
  overflow:hidden;border-radius:22px 0 0 22px}         /* 写真セル自身で左角を丸めて切る（親依存にしない） */
.srow .ph img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;display:block}
.srow .ph .nopic{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-weight:700;font-size:12px}
.srow .tx{padding:24px 28px}
.srow .nm{font-size:20px;font-weight:800;color:var(--green-d)}
.srow .nm small{font-size:11.5px;color:var(--muted);font-weight:700;margin-left:10px}
.srow .rl{font-size:12.5px;color:var(--sage);font-weight:800;margin-top:2px}
.srow .cr{font-size:13px;color:var(--ink-2);margin-top:10px;padding-top:10px;border-top:1.5px solid #F0ECDC}
.srow .cr b,.srow .lics>b{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--green);background:#EDF3E0;border-radius:4px;padding:1px 8px;margin-right:8px}
.srow .lics{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:9px}
.srow .lc{font-size:11.5px;font-weight:800;color:var(--green);background:#fff;border:1.5px solid #B9D3A2;border-radius:6px;padding:2px 10px}
.srow .cm{font-size:13.5px;color:var(--ink);line-height:1.95;margin-top:10px}

/* ===== 会社情報 ===== */
.ctable{background:var(--card);border:2px solid #E3DCC4;border-radius:20px;overflow:hidden;margin-top:8px}
.ctable dl{display:grid;grid-template-columns:190px 1fr;font-size:13.5px}
.ctable dt{background:#FBF9F0;border-top:1.5px solid #F0ECDC;padding:12px 18px;font-weight:800;color:var(--sage)}
.ctable dd{border-top:1.5px solid #F0ECDC;padding:12px 18px;color:var(--ink-2)}
.ctable dl:first-child dt,.ctable dl:first-child dd{border-top:none}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px;align-items:stretch}
.duo .pic{border-radius:22px;overflow:hidden;border:5px solid #fff;box-shadow:0 8px 20px rgba(45,95,60,.1)}
.duo .pic img{width:100%;height:100%;object-fit:cover;display:block}
.duo .txt{background:var(--card);border:2px solid #E3DCC4;border-radius:22px;padding:24px 26px;font-size:14px;color:var(--ink-2);line-height:2.05}
.duo .txt b{color:var(--green-d);font-size:15px}
.greet{background:var(--card);border:2px solid #E3DCC4;border-radius:24px;padding:28px 32px;margin-top:22px}
.greet h2{font-size:17px;font-weight:800;color:var(--green-d);margin-bottom:12px}
.greet p{font-size:14.5px;line-height:2.15;color:var(--ink-2)}
.greet .sig{text-align:right;font-weight:800;color:var(--green-d);margin-top:12px}
.greet .note{text-align:right;font-size:11px;color:var(--muted)}

/* ===== コラム ===== */
.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.tabs button{font-family:var(--rounded);border:2px solid #E3DCC4;background:#fff;border-radius:999px;padding:9px 22px;font-size:13.5px;font-weight:800;cursor:pointer;color:var(--ink-2);transition:.2s}
.tabs button.on{background:var(--green);border-color:var(--green);color:#fff}
.post h1{font-size:clamp(20px,2.6vw,26px);font-weight:800;line-height:1.6;color:var(--green-d);margin-top:24px}
.post .pm{font-size:12.5px;color:var(--muted);margin:8px 0 16px;font-weight:700}
.post .eyecatch{aspect-ratio:16/7;border-radius:22px;overflow:hidden;border:5px solid #fff;box-shadow:0 8px 20px rgba(45,95,60,.1)}
.post .eyecatch img{width:100%;height:100%;object-fit:cover}
.post .body{background:var(--card);border:2px solid #E3DCC4;border-radius:22px;padding:30px 34px;font-size:14.5px;line-height:2.1;color:var(--ink-2);margin-top:20px}
.post .body h2{font-size:16.5px;font-weight:800;color:var(--green-d);margin:22px 0 8px;display:flex;align-items:center;gap:8px}
.post .body h2::before{content:"";width:12px;height:9px;background:var(--lime);clip-path:polygon(50% 0,100% 100%,0 100%)}

/* ===== お問い合わせ ===== */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.way{background:var(--card);border:2px solid #E3DCC4;border-radius:22px;padding:26px 18px;text-align:center}
.way .ic{font-family:var(--nunito);font-weight:900;font-size:10px;letter-spacing:.24em;color:var(--gold)}
.way b{display:block;font-size:17px;color:var(--green-d);margin:2px 0 6px}
.way p{font-size:12px;color:var(--muted);margin-bottom:14px}
.way .tel{font-family:var(--nunito);font-size:23px;font-weight:800;color:var(--green-d)}
.formbox{background:var(--card);border:2px solid #E3DCC4;border-radius:24px;padding:30px;margin-top:26px;max-width:660px;margin-left:auto;margin-right:auto}
.formbox h2{font-size:16.5px;font-weight:800;color:var(--green-d);text-align:center;margin-bottom:18px}
.fi{margin-bottom:16px}
.fi label{display:block;font-size:13px;font-weight:800;margin-bottom:5px;color:var(--ink)}
.req{display:inline-block;background:#D2603F;color:#fff;font-size:10px;font-weight:800;border-radius:4px;padding:1px 7px;margin-left:6px;vertical-align:2px}
.opt{display:inline-block;background:#B5B2A2;color:#fff;font-size:10px;font-weight:800;border-radius:4px;padding:1px 7px;margin-left:6px;vertical-align:2px}
.fi input,.fi select,.fi textarea{width:100%;font-family:var(--rounded);font-size:14.5px;padding:12px 14px;border:2px solid #E3DCC4;border-radius:14px;background:#fff;color:var(--ink)}
.fi input:focus,.fi select:focus,.fi textarea:focus{outline:none;border-color:var(--lime)}
.fi input:focus-visible,.fi select:focus-visible,.fi textarea:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.fi .hint{font-size:11px;color:var(--muted);margin-top:4px}
.agree{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;justify-content:center;margin:18px 0 14px}
.agree a{color:var(--green);border-bottom:1.5px solid var(--green)}
.btn.wide{width:100%}
.thanks{display:none;background:#EDF3E0;border:2px solid #B9D3A2;border-radius:22px;padding:30px;text-align:center;margin-top:20px}
.thanks b{display:block;font-size:17px;color:var(--green-d);margin-bottom:6px}
.thanks p{font-size:13px;color:var(--ink-2)}

/* ===== プライバシー ===== */
.legal{background:var(--card);border:2px solid #E3DCC4;border-radius:22px;padding:30px 34px;margin-top:8px;font-size:14px;line-height:2.1;color:var(--ink-2)}
.legal h2{font-size:16px;font-weight:800;color:var(--green-d);margin:20px 0 8px}
.legal h2:first-child{margin-top:0}

/* ===== 共通：ページ下の相談帯は design.css を利用 ===== */
.note-adjust{font-size:11.5px;color:var(--muted);text-align:center;margin-top:14px}

/* ===== SP ===== */
@media(max-width:900px){
  .pagehead{padding:24px 0 4px}
  .filterbox{padding:16px;border-radius:18px}
  .filterbox .frow{grid-template-columns:1fr 1fr}
  .filterbox .btn{grid-column:1/-1}
  .dgrid{grid-template-columns:1fr}
  .rail{position:static}
  .railbox{display:none}
  .gallery .thumbs{grid-template-columns:repeat(4,1fr)}
  .spec dl{grid-template-columns:124px 1fr}
  /* 物件ページの下部固定バーは、案内人（z-index:80）より前に出す。
     後ろだと「来店を予約する」の文字がキャラで隠れる。
     あわせて案内人をバーの上へ逃がし、重ならないようにする。 */
  .spfixed{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;background:rgba(251,247,236,.96);border-top:2px solid #E3DCC4;padding:10px 12px calc(10px + env(safe-area-inset-bottom));z-index:90}
  body:has(.spfixed) .guide{bottom:calc(74px + env(safe-area-inset-bottom))}
  .spfixed .btn{width:100%;padding:13px 8px;font-size:14px}
  body.hasfixed{padding-bottom:78px}
  .srow{grid-template-columns:118px 1fr}
  /* 写真セルを隣の文の高さまで引き伸ばさない。
     スタッフ写真は4枚とも縦横比5:6なので、枠も5:6にすると顔が切れない */
  .srow .ph{min-height:0;aspect-ratio:5/6;align-self:start;border-radius:16px 0 0 0}
  .srow .ph img{object-position:center top}
  .srow .tx{padding:15px 16px}
  .srow .nm{font-size:16px}
  .srow .nm small{display:block;margin:2px 0 0}
  .duo{grid-template-columns:1fr}
  .ctable dl{grid-template-columns:128px 1fr}
  .ways{grid-template-columns:1fr}
  .greet{padding:20px 18px}
  .post .body{padding:20px 18px}
}


/* ===== にぎやかし（装飾と動き） ===== */
/* ページ見出しの飾り山＋キャラ（site.jsが挿入） */
.pagehead{position:relative}
.pagehead .deco{position:absolute;top:50%;width:130px;opacity:.9;pointer-events:none}
.pagehead .deco.l{left:max(12px, calc(50% - 420px));transform:translateY(-30%)}
.pagehead .deco.r{right:max(12px, calc(50% - 420px));transform:translateY(-30%) scaleX(-1)}
.pagehead .pchara{position:absolute;top:-4px;right:max(40px, calc(50% - 330px));width:56px;pointer-events:none;
  filter:drop-shadow(0 4px 8px rgba(32,72,43,.18));animation:bob 3.8s 1s ease-in-out infinite}
.js .pagehead .pchara{animation:pop .55s .5s cubic-bezier(.34,1.56,.64,1) both, bob 3.8s 1.4s ease-in-out infinite}
@media(max-width:900px){.pagehead .deco{display:none}.pagehead .pchara{width:44px;right:14px;top:-8px}}
/* 見出し下の山並みが生える（トップと同じ） */
.js .pagehead .bumps i{transform:scale(0);transform-origin:50% 100%;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.js .pagehead.in .bumps i{transform:scale(1)}
.js .pagehead.in .bumps i:nth-child(1){transition-delay:.15s}
.js .pagehead.in .bumps i:nth-child(2){transition-delay:.25s}
.js .pagehead.in .bumps i:nth-child(3){transition-delay:.35s}
.js .pagehead.in .bumps i:nth-child(4){transition-delay:.45s}
/* ENピルがぽんっと出る */
.js [data-io] .en{opacity:0;transform:scale(.55);transition:.45s .1s cubic-bezier(.34,1.56,.64,1)}
.js [data-io].in .en{opacity:1;transform:scale(1)}
/* ギャラリーの切り替えフェード */
@keyframes gfade{from{opacity:.25}to{opacity:1}}
.gallery .main img{animation:gfade .35s ease}
/* スタッフ行のホバー */
.srow{transition:transform .45s cubic-bezier(.3,1.5,.5,1),box-shadow .35s,border-color .25s}
.srow:hover{transform:translateY(-4px);border-color:var(--lime);box-shadow:0 12px 26px rgba(45,95,60,.12)}
.srow .ph img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.srow:hover .ph img{transform:scale(1.05)}
/* カードのバッジがくいっと傾く */
.card .flag{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.card:hover .flag{transform:rotate(-4deg)}
/* 絞り込みフォームのフォーカス */
.filterbox select:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px #E4F0D4}
/* お問い合わせ3カードのホバー */
.way{transition:transform .45s cubic-bezier(.3,1.5,.5,1),border-color .25s,box-shadow .35s}
.way:hover{transform:translateY(-4px);border-color:var(--lime);box-shadow:0 12px 24px rgba(45,95,60,.1)}

/* ===== ブランドストーリー（ハウストックとは）=====
   カードを外し、生成りの地の上に中央で大きく組む。
   キャッチはヒーローと同じ「えらぶ」のマーカーで受ける（ロゴ由来の意匠を使い回す）。 */
.story{max-width:740px;margin:40px auto 0;text-align:center}
.story .lead{
  font-size:clamp(21px,2.8vw,30px);font-weight:800;color:var(--green-d);
  line-height:1.75;letter-spacing:.01em;margin:0;
}
.story .bd{margin-top:30px}
.story .bd p{font-size:clamp(14.5px,1.35vw,16px);line-height:2.4;color:var(--ink-2);margin:0}
.story .bd p + p{margin-top:22px}
.story .div{display:flex;justify-content:center;gap:7px;align-items:flex-end;margin:38px 0}
.story .div i{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;
  border-bottom:11px solid #C2D8A4}
.story .div i:nth-child(2){border-bottom-width:16px;border-bottom-color:var(--lime)}
.story .div i:nth-child(3){width:9px;height:9px;border:0;border-radius:50%;background:var(--gold)}
.story .catch{
  margin:0;font-size:clamp(25px,4vw,42px);font-weight:800;color:var(--green);
  line-height:1.6;letter-spacing:.01em;
}
.story .catch .q1{color:var(--sage)}
.story .catch .q2{position:relative;white-space:nowrap}
.story .catch .q2 .mk{position:relative;z-index:1}
.story .catch .q2::after{
  content:"";position:absolute;left:-3%;right:-3%;bottom:.08em;height:.36em;
  background:var(--gold);opacity:.4;border-radius:999px;z-index:0;
}
.story .close{margin:34px 0 0;font-size:clamp(14px,1.3vw,15.5px);line-height:2.25;color:var(--ink-2)}
@media(max-width:640px){
  .story{margin-top:26px;text-align:left}
  .story .lead{text-align:center}
  .story .catch{text-align:center;line-height:1.7}
  .story .bd p{line-height:2.25}
  .story .div{margin:30px 0}
}
/* JSが有効なときだけ、キャッチのマーカーを引く演出 */
.js .story .catch .q2::after{transform:scaleX(0);transform-origin:0 100%}
.js .story[data-io].in .catch .q2::after{animation:wipe .55s .15s cubic-bezier(.2,.7,.2,1) both}
.story .catch .l1,.story .catch .l2{display:inline-block;white-space:nowrap}
@media(max-width:420px){.story .catch .l1,.story .catch .l2{white-space:normal}}
/* スマホでは意図的な改行を解除し、自然な段落として流す（二重折り返しを防ぐ） */
@media(max-width:640px){
  .story .bd p br{display:none}
  .story .close br{display:none}
}