/* page-about.php 専用のスタイル */
@layer kbt-mock {
  .hist{border-left:2px solid var(--line);padding-left:32px;margin-left:8px}
  .hist .h{position:relative;padding-bottom:34px}
  .hist .h:last-child{padding-bottom:0}
  .hist .h::before{content:"";position:absolute;left:-40px;top:5px;width:13px;height:13px;border-radius:50%;background:var(--brass);border:3px solid var(--white);box-shadow:0 0 0 2px var(--brass)}
  .hist .yr{font-family:var(--serif);font-size:24px;color:var(--brass);line-height:1;margin-bottom:9px}
  .hist h4{font-size:18px;font-weight:700;margin-bottom:8px}
  .hist p{font-size:14px;color:#4f5761;line-height:1.95}
  /* 特徴：上段3・下段2のヘアライングリッド */
  /* 特徴は縦一列。項目間の 1px は gap で作り、下地の色を罫線として
     見せています（li ごとに border を持たせると二重線になるため）。 */
  .feat{list-style:none;display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
  .feat li{position:relative;background:var(--white);padding:26px 28px 26px 72px;font-size:14px;line-height:1.9;color:#3f464f}
  /* チェックの丸。アイコンは背景（data URI のSVG）で描いています。
     この li は data-ja で innerHTML ごと差し替わるため、中に <svg> を
     置くと言語切替で消えてしまうからです。擬似要素なら残ります。 */
  .feat li::before{
    content:"";position:absolute;left:28px;top:26px;
    width:26px;height:26px;border-radius:50%;
    background:var(--brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px 14px no-repeat;
  }
  @media (max-width:900px){
    .feat li{padding:22px 20px 22px 60px}
    .feat li::before{left:20px;top:22px;width:24px;height:24px;background-size:13px 13px}
  }
  .shops{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .shop{border:1px solid var(--line);background:var(--white)}
  .shop .ph{aspect-ratio:16/9}
  .shop .bd{padding:22px 24px}
  .shop .yr{font-size:14px;letter-spacing:.14em;color:var(--brass);font-weight:700;margin-bottom:8px}
  .shop h4{font-size:18px;margin-bottom:9px}
  .shop p{font-size:14px;color:#5a626c;line-height:1.85}
  .prof{width:100%;border-collapse:collapse;font-size:14px}
  .prof th,.prof td{border-bottom:1px solid var(--line);padding:15px 18px;text-align:left;vertical-align:top}
  .prof th{background:var(--paper);font-weight:700;white-space:nowrap;width:210px}
  @media (max-width:820px){ .shops{grid-template-columns:1fr} .prof th{width:auto;display:block;border-bottom:0;padding-bottom:4px} .prof td{display:block} }
  .twocol{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
  @media (max-width:700px){ .twocol{grid-template-columns:1fr;gap:22px} }

  /* アクセスの地図。iframe は置換要素で既定の高さ（150px）を持つため、
     枠側で高さを決めて、iframe をそこいっぱいに広げます。 */
  .aboutmap{position:relative;height:600px;margin-top:22px;border:1px solid var(--line);background:var(--paper)}
  .aboutmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
  @media (max-width:700px){ .aboutmap{height:480px} }
}