/* ナビック通信 Web：全ページ共通のスタイル（紙面ビューア read.html を除く）
 *
 * 色・書体の定義、基本スタイル、ヘッダー、家形の見出し、フッター（街並み・紺帯・会社情報）。
 * 各ページはこのファイルを先に読み込み、ページ固有のスタイルだけを <style> に書く。
 * ここを直せばポータル・電子版一覧・個別コンテンツのすべてに反映される。
 */

/* 会社案内パンフレットと公式サイトに合わせた共通の色・書体（全ページ同じ値） */
:root{
  --navic:#004883;        /* パンフレットの紺 */
  --navic-deep:#00335e;   /* ホバー・濃い帯 */
  --navic-pale:#e6eef6;   /* パンフレットの見出しボックス */
  --ribbon:#d7e8f5;       /* パンフレットの淡い帯（ロゴの軌跡） */
  --link:#0066cc;         /* 公式サイトのリンク色。文字リンクとフォーカスのみ */
  --ink:#231916;          /* 印刷の墨 */
  --muted:#665e5a;
  --line:#cbd8e4;
  --bg:#ffffff;
  --bg-soft:#f4f7fa;
  --serif:'Shippori Mincho B1', "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:-apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "YuGothic", "Noto Sans JP", "Meiryo", sans-serif;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.85;
  -webkit-text-size-adjust:100%;
  /* 中身が短いページでも、フッターが画面の下端まで届くようにする */
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
main{flex:1 0 auto;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--link); outline-offset:3px;}
.contact-band :focus-visible{outline-color:#fff;}
html{touch-action:manipulation;}
a, button{-webkit-tap-highlight-color:rgba(0,72,131,.15);}
/* 見出しは文節で折り返す（text-wrap:balance は単語の区切りがない日本語を途中で折るので使わない）。
   未対応のブラウザでは通常の折り返しになる */
h1, h2, h3{word-break:auto-phrase;}
/* キーボードで最初に Tab を押したときだけ現れる「本文へ移動」 */
.skip-link{position:absolute; left:16px; top:-100px; z-index:100; padding:12px 20px; background:var(--navic); color:#fff; font-weight:700; text-decoration:none;}
.skip-link:focus{top:12px;}
main:focus{outline:none;}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.wrap{width:min(960px, calc(100% - 32px)); margin:0 auto;}

/* ---------- ヘッダー（公式サイトと同じ構成：細い帯＋白地にロゴ） ---------- */
.topline{
  background:var(--navic);
  color:rgba(255,255,255,.9);
  font-size:.72rem;
  line-height:1.6;
  padding:5px 0;
}
header{background:#fff; border-bottom:1px solid var(--line);}
.header-inner{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{display:flex; align-items:center; text-decoration:none;}
.brand img{display:block; height:34px; width:auto;}
.header-site{
  font-family:var(--serif);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.12em;
  color:var(--navic);
}

/* ---------- 見出し（パンフレットの家形ラベル＋紺の罫線） ---------- */
.sec-head{
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:4px 16px;
  margin:56px 0 22px;
  border-bottom:1.5px solid var(--navic);
}
.house{
  position:relative;
  margin:0;
  padding:14px 20px 5px;
  font-family:var(--serif);
  font-weight:700;
  font-size:1.12rem;
  line-height:1.5;
  letter-spacing:.08em;
  color:var(--navic);
}
.house::before{
  content:"";
  position:absolute;
  inset:0 0 -1px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M1 40V11L50 1L99 11V40' fill='none' stroke='%23004883' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
  pointer-events:none;
}
.sec-en{
  padding-bottom:7px;
  font-family:var(--serif);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.22em;
  color:var(--navic);
}

/* ---------- フッター（街並みの線画＋公式サイトと同じ紺帯と会社情報） ---------- */
/* 会社案内パンフレットの街並み（施工物件のシルエット）。skyline.svg を全ページで共有 */
.skyline{
  display:block;
  width:min(1200px, 100%);
  height:auto;
  margin:24px auto 0;
}
.contact-band{background:var(--navic); color:#fff; padding:48px 0;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr;}
/* 左右の列は中身の量が違うので、ボタンを下端に置いて高さを揃える */
.contact-grid > div{display:flex; flex-direction:column; align-items:flex-start; padding-right:48px;}
.contact-grid > div + div{border-left:1px solid rgba(255,255,255,.28); padding:0 0 0 48px;}
.contact-title{
  margin:0 0 12px;
  font-family:var(--serif);
  font-weight:700;
  font-size:1.125rem;
  line-height:1.5;
  word-break:auto-phrase;
}
.contact-text{
  margin:0 0 24px;
  font-size:.9375rem;
  line-height:1.8;
  color:rgba(255,255,255,.85);
  word-break:auto-phrase;
}
.tel{
  display:inline-block;
  font-family:var(--serif);
  font-weight:700;
  font-size:1.875rem;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
  color:#fff;
  text-decoration:none;
}
.contact-hours{margin-top:4px; font-variant-numeric:tabular-nums;}
.btn-white{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:auto;
  min-width:240px;
  min-height:48px;
  padding:0 32px;
  background:#fff;
  color:var(--navic);
  font-size:1rem;
  font-weight:700;
  text-decoration:none;
  transition:background-color .15s ease;
}
.btn-white:hover{background:var(--navic-pale);}
.company{background:#fff; padding:30px 0 24px; font-size:.875rem;}
.company-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 32px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
.company-row img{display:block; height:30px; width:auto;}
.company-row address{font-style:normal; line-height:1.9;}
.company-row address b{font-size:.9rem;}
.company nav{
  display:flex;
  flex-wrap:wrap;
  gap:0 26px;
  margin-top:8px;
}
/* 押せる範囲を高さ44pxに（年齢層の高い読者がスマートフォンで押しやすいように） */
.company nav a{display:inline-flex; align-items:center; min-height:44px; text-decoration:none;}
.company nav a:hover{color:var(--link); text-decoration:underline;}
.copy{margin-top:8px; font-size:.8125rem; color:var(--muted);}

/* ---------- イベント案内（events.js が events.json から描く。全コンテンツ共通） ---------- */
.event-slot[hidden]{display:none;}
.event-card{
  background:#fff;
  border:1px solid var(--line);
  border-top:2px solid var(--navic);
  padding:24px 22px;
}
.event-card .ev-label{
  display:inline-block;
  background:var(--navic);
  color:#fff;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.08em;
  padding:3px 18px 3px 22px;
  border-radius:0 999px 999px 0;
  margin:0 0 14px -23px;
}
.event-card h2, .event-card h3, .event-card h4{
  margin:0 0 7px;
  font-family:var(--serif);
  font-weight:700;
  font-size:1.2rem;
  line-height:1.6;
}
.event-card p{margin:0 0 15px; color:var(--muted); font-size:.94rem;}
.event-card .ev-note{color:var(--ink);}
.event-card .ev-data{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:6px 14px;
  margin:15px 0 18px;
  padding:14px 16px;
  background:var(--navic-pale);
  font-size:.92rem;
}
.event-card .ev-data dt{color:var(--navic-deep); font-weight:700;}
.event-card .ev-data dd{margin:0; font-weight:700; font-variant-numeric:tabular-nums;}
.event-card .ev-btns{display:flex; flex-direction:column; gap:10px;}
.event-card .ev-btn{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:50px;
  padding:12px 22px;
  background:#fff;
  color:var(--navic);
  border:1px solid var(--navic);
  font-weight:800;
  letter-spacing:.02em;
  text-decoration:none;
  transition:background-color .15s ease;
}
.event-card .ev-btn:hover{background:var(--navic-pale);}
.event-card .ev-btn.is-primary{background:var(--navic); color:#fff;}
.event-card .ev-btn.is-primary:hover{background:var(--navic-deep);}

@media (max-width:720px){
  .topline{display:none;}
  .header-inner{min-height:60px;}
  .brand img{height:28px;}
  .header-site{font-size:.8rem;}
  .sec-head{margin-top:44px;}
  .skyline{width:100%; height:110px; object-fit:cover; object-position:62% bottom;}
  .contact-band{padding:40px 0;}
  .contact-grid{grid-template-columns:1fr;}
  .contact-grid > div{padding:0;}
  .contact-grid > div + div{border-left:0; border-top:1px solid rgba(255,255,255,.28); margin-top:32px; padding:32px 0 0;}
  .btn-white{width:100%;}
}
@media (max-width:560px){
  .event-card{padding:22px 18px;}
  .event-card .ev-label{margin-left:-19px; padding-left:18px;}
  .event-card .ev-data{grid-template-columns:74px 1fr;}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}