/*
 * 花あかり — 会社概要ページ専用のスタイル
 *
 * 配色トークンとヘッダー・フッターは style.css を引き継ぐ。
 * ここには、このページにしか出てこない要素だけを置いている。
 */

/* ── 共通部品の、このページでの振る舞い ── */
.brand-link{text-decoration:none;color:inherit;display:block}
.nav a[aria-current="page"]{color:var(--rose);border-bottom-color:var(--rose)}

/* ── ページの見出し ── */
.page-head{padding-block:clamp(30px,4vw,52px) clamp(34px,4.6vw,58px)}
.crumb{
  display:flex;align-items:center;gap:10px;
  font-size:.78rem;letter-spacing:.1em;color:var(--ink-faint);margin-bottom:26px;
}
.crumb a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.crumb a:hover{color:var(--rose);border-bottom-color:var(--rose)}
.crumb span[aria-hidden]{color:var(--line)}
.page-head h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.85rem,3.4vw,2.6rem);letter-spacing:.14em;line-height:1.5;
}
.page-lede{margin-top:22px;max-width:34em;color:var(--ink-soft);font-weight:300;font-size:.96rem}

/* ── ごあいさつ ── */
.greeting{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,4vw,72px)}
.greeting-body{max-width:38em}
.greeting-body p{margin-top:18px;color:var(--ink-soft);font-weight:300}
.greeting-body .signature{
  margin-top:32px;padding-top:20px;border-top:1px solid var(--line-soft);
  font-family:var(--serif);color:var(--ink);font-weight:400;letter-spacing:.08em;font-size:.95rem;
}
.greeting-body .signature b{font-weight:500;font-size:1.1rem;margin-left:4px}
.greeting-mark{display:flex;flex-direction:column;align-items:center;gap:22px;padding-top:8px}
.greeting-mark svg{width:74px;height:74px;overflow:visible}

/* ── 会社概要の一覧 ── */
.profile{
  margin:0;
  display:grid;grid-template-columns:7.5em minmax(0,1fr);
  border-top:1px solid var(--line);
}
.profile dt{
  font-size:.78rem;letter-spacing:.16em;color:var(--ink-faint);
  padding-block:16px;border-bottom:1px solid var(--line-soft);
}
.profile dd{
  margin:0;padding-block:16px;border-bottom:1px solid var(--line-soft);
  font-size:.94rem;font-weight:300;
}
.profile .tel{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.profile .tel:hover{color:var(--rose);border-bottom-color:var(--rose)}
.biz{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 26px;line-height:1.9}
.biz li{position:relative;padding-left:15px}
.biz li::before{
  content:"";position:absolute;left:0;top:.85em;
  width:5px;height:5px;border-radius:50%;background:var(--rose);opacity:.55;
}

/* ── これまでのこと ── */
.history{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.history li{
  display:grid;grid-template-columns:7.5em minmax(0,1fr);
  gap:4px 28px;padding-block:24px;border-bottom:1px solid var(--line-soft);
}
.history .when{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.history .year{font-family:var(--latin);font-size:1.35rem;color:var(--rose);letter-spacing:.02em}
.history .month{font-size:.8rem;color:var(--ink-faint)}
.history h3{font-size:1.02rem;letter-spacing:.08em}
.history .what p{margin-top:9px;font-size:.9rem;color:var(--ink-soft);font-weight:300}

/* ── アクセスマップ ── */
.map-figure{margin:0 0 clamp(28px,3.6vw,46px)}
.map{display:block;width:100%;height:auto;border-radius:3px}
.map-figure figcaption{
  margin-top:14px;font-size:.84rem;color:var(--ink-faint);font-weight:300;
}
.m-ground{fill:var(--surface)}
.m-road{stroke:var(--ground);stroke-width:28;stroke-linecap:round;fill:none}
.m-rail line{stroke:var(--ink-faint);stroke-width:2;opacity:.45}
.m-station{fill:var(--wrap-2);opacity:.8}
.m-block{fill:var(--panel)}
.m-park{fill:var(--sage);opacity:.25}
.m-route{
  fill:none;stroke:var(--rose);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:2 9;opacity:.9;
}
.m-start{fill:var(--rose)}
.m-pin{stroke:var(--rose);stroke-width:2;opacity:.6}
.m-pin-dot{fill:var(--rose)}
/* 文字の指定は .map .m-xxx で揃える。
   .map text より詳細度を高くしないと、下の個別指定が打ち消されてしまう。 */
.map text{font-family:var(--sans);font-size:14px;fill:var(--ink-soft);text-anchor:middle}
.map .m-label-lg{font-family:var(--serif);font-size:17px;fill:var(--ink);letter-spacing:.08em}
.map .m-road-name{font-size:12px;fill:var(--ink-faint);letter-spacing:.14em}
.map .m-shop{font-family:var(--serif);font-size:18px;fill:var(--rose);letter-spacing:.12em}
.map .m-exit{font-size:12px;fill:var(--rose);text-anchor:start;letter-spacing:.1em}
.map .m-tiny{font-size:11px;fill:var(--ink-faint);letter-spacing:.1em}
.map .m-right{text-anchor:end}

/* ── 道順と交通 ── */
.access-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(26px,3.6vw,56px)}
.route-box h3,.transit-box h3{
  font-size:1rem;letter-spacing:.14em;padding-bottom:12px;
  border-bottom:1px solid var(--line);margin-bottom:20px;
}
.route{list-style:none;counter-reset:step;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.route li{
  counter-increment:step;position:relative;padding-left:42px;
  font-size:.93rem;font-weight:300;color:var(--ink-soft);line-height:1.95;
}
.route li::before{
  content:counter(step);position:absolute;left:0;top:4px;
  width:26px;height:26px;border-radius:50%;border:1px solid var(--rose);
  color:var(--rose);font-family:var(--latin);font-size:.92rem;
  display:grid;place-items:center;
}
.route b{font-weight:500;color:var(--ink)}
.route-note,.transit-note{
  margin-top:22px;padding-top:16px;border-top:1px dotted var(--line);
  font-size:.85rem;color:var(--ink-faint);font-weight:300;
}
.transit{margin:0;display:grid;grid-template-columns:4.5em minmax(0,1fr)}
.transit dt{
  font-size:.78rem;letter-spacing:.16em;color:var(--ink-faint);
  padding-block:12px;border-bottom:1px solid var(--line-soft);
}
.transit dd{
  margin:0;padding-block:12px;border-bottom:1px solid var(--line-soft);
  font-size:.9rem;font-weight:300;line-height:1.85;
}

/* ── 画面が狭いとき ── */
@media (max-width:900px){
  .greeting{grid-template-columns:1fr}
  .greeting-mark{flex-direction:row;justify-content:flex-start;gap:28px}
  .access-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .profile,.transit{grid-template-columns:1fr}
  .profile dt,.transit dt{padding-bottom:2px;border-bottom:none}
  .profile dd,.transit dd{padding-top:4px}
  .history li{grid-template-columns:1fr;gap:10px}
  .history .when{gap:10px}
}