/* ============================================================
   施設紹介ページ（facility.html）固有スタイル
   写真が主役のページ。有機マスクのギャラリーを多めに使う
   ============================================================ */

/* ---- 建物概要 ---- */
.building{background:var(--white);border-radius:48px;margin:0 10px}
.bld-grid{display:grid;gap:32px;margin-top:44px;align-items:center}
.bld-grid .ph{min-height:300px}
.spec-cards{display:grid;gap:14px}
.spec-card{
  display:flex;gap:16px;align-items:center;
  background:var(--bg);border:3px solid var(--ink);border-radius:22px;padding:16px 20px;
  transition:transform .55s var(--ease-soft),box-shadow .55s var(--ease-soft);
}
.spec-card:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:var(--shadow-pop)}
.spec-card .s-icon{
  flex:none;width:54px;height:54px;display:grid;place-items:center;
  border-radius:var(--radius-blob2);background:var(--yellow);
  transition:border-radius .6s var(--ease-soft),transform .6s var(--ease-soft);
}
.spec-card:nth-child(2) .s-icon{background:var(--green-soft)}
.spec-card:nth-child(3) .s-icon{background:var(--blue-soft)}
.spec-card:nth-child(4) .s-icon{background:var(--yellow-soft)}
.spec-card:hover .s-icon{border-radius:var(--radius-blob1);transform:rotate(-8deg) scale(1.06)}
.spec-card strong{display:block;font-size:1.02rem;font-weight:900;line-height:1.5}
.spec-card small{display:block;font-size:.82rem;color:var(--ink-soft);font-weight:500}
.bld-table{margin-top:44px;background:var(--bg)}

/* ---- 居室 ---- */
.room-grid{display:grid;gap:18px;margin-top:44px}
.room-grid .ph{min-height:220px;transition:transform .6s var(--ease-soft)}
.room-grid .ph:hover{transform:scale(1.03) rotate(-1deg)}
.room-flex{display:grid;gap:32px;margin-top:36px;align-items:start}
.room-card{background:var(--white);border:3px solid var(--ink);border-radius:28px;padding:28px 26px;position:relative}
.room-badge{
  position:absolute;top:-22px;left:24px;transform:rotate(-3deg);
  background:var(--green);color:#fff;font-weight:900;font-size:.88rem;
  padding:8px 20px;border-radius:999px;box-shadow:var(--shadow-pop);
}
.room-card h3{font-size:1.25rem;font-weight:900;margin:6px 0 6px}
.room-card>p{font-size:.92rem;color:var(--ink-soft)}
.eq-list{list-style:none;margin-top:18px;display:grid;gap:10px}
.eq-list li{
  display:flex;gap:10px;align-items:flex-start;font-size:.92rem;font-weight:700;
  background:var(--bg);border:2px solid var(--ink);border-radius:16px;padding:10px 16px;
}
.eq-list .chk{flex:none;width:22px;height:22px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;margin-top:4px}
.eq-note{margin-top:16px;font-size:.85rem;color:var(--ink-soft)}

/* ---- 共用スペース ---- */
.common{background:var(--cream2);border-radius:48px;margin:0 10px}
.common-grid{display:grid;gap:22px;margin-top:44px}
.common-card{
  background:var(--white);border:3px solid var(--ink);border-radius:28px;padding:22px 20px 24px;
  transition:transform .55s var(--ease-soft),box-shadow .55s var(--ease-soft);
}
.common-card:hover{transform:translateY(-8px) rotate(.6deg);box-shadow:var(--shadow-pop)}
.common-card:nth-child(2):hover{transform:translateY(-8px) rotate(-.6deg)}
.common-card .ph{min-height:190px;margin-bottom:16px}
.common-card h3{font-size:1.15rem;font-weight:900}
.common-card p{font-size:.88rem;color:var(--ink-soft);margin-top:6px}
.common-note{margin-top:26px;font-size:.85rem;color:var(--ink-soft)}

/* ---- 食事（見せ場） ---- */
.meal{overflow:visible}
.meal-msg{font-size:clamp(1.25rem,3.8vw,1.85rem);font-weight:900;line-height:2.1;margin-top:26px;max-width:30em}
.meal-gal{display:grid;gap:18px;margin-top:40px}
.meal-gal .ph{transition:transform .6s var(--ease-soft)}
.meal-gal .ph:hover{transform:scale(1.03) rotate(-1deg)}
.meal-a{min-height:280px}
.meal-b,.meal-c{min-height:180px}
.meal-points{display:grid;gap:14px;margin-top:36px}
.meal-point{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--white);border:3px solid var(--ink);border-radius:22px;padding:18px 20px;
}
.meal-point .m-icon{flex:none;width:48px;height:48px;display:grid;place-items:center;border-radius:var(--radius-blob2);background:var(--yellow)}
.meal-point strong{display:block;font-size:1rem;font-weight:900}
.meal-point p{font-size:.88rem;color:var(--ink-soft)}
.meal-note{margin-top:22px;font-size:.85rem;color:var(--ink-soft)}

/* ---- アクセス ---- */
.access{background:var(--white);border-radius:48px;margin:0 10px}
.acc-grid{display:grid;gap:32px;margin-top:44px;align-items:start}
.acc-grid .map-wrap{min-height:320px}
.acc-card{background:var(--bg);border:3px solid var(--ink);border-radius:28px;padding:28px 26px}
.acc-card h3{font-size:1.2rem;font-weight:900;margin-bottom:6px}
.acc-list{list-style:none;margin-top:16px;display:grid;gap:0}
.acc-list li{
  display:flex;gap:14px;align-items:flex-start;padding:14px 4px;
  border-bottom:2px dashed rgba(42,36,21,.2);font-size:.92rem;
}
.acc-list li:last-child{border-bottom:none}
.acc-list .a-icon{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--yellow-soft);margin-top:2px}
.acc-list strong{display:block;font-weight:900;font-size:.88rem}
.acc-list span.v{display:block;color:var(--ink-soft)}
.acc-note{margin-top:16px;font-size:.85rem;color:var(--ink-soft)}

/* ---- レスポンシブ ---- */
@media(min-width:600px){
  .room-grid{grid-template-columns:repeat(2,1fr)}
  .common-grid{grid-template-columns:1fr 1fr}
  .meal-gal{grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto}
  .meal-a{grid-row:span 2;min-height:100%}
}
@media(min-width:768px){
  .meal-points{grid-template-columns:repeat(3,1fr)}
  .meal-point{flex-direction:column}
}
@media(min-width:900px){
  .bld-grid{grid-template-columns:1.05fr 1fr;gap:48px}
  .room-flex{grid-template-columns:1.2fr 1fr;gap:44px}
  .acc-grid{grid-template-columns:1.2fr 1fr;gap:44px}
}
@media(min-width:1024px){
  .common-grid{grid-template-columns:repeat(3,1fr)}
}