/* ============================================================
   株式会社ハレミナト コーポレートサイト
   Base color theme: 晴天ブルー × サンライズ × ネイビー
   ============================================================ */

:root {
  --navy:      #1d3557;
  --navy-2:    #2c4c78;
  --blue:      #2f9ee0;
  --blue-lt:   #62bdf0;
  --sky:       #eef7fd;
  --sun:       #ff9d3d;
  --sun-2:     #ffbe5c;
  --teal:      #7ec7c4;
  --ink:       #26313f;
  --muted:     #5f7183;
  --line:      #e5ebf1;
  --bg:        #ffffff;
  --bg-soft:   #f7fbfe;
  --radius:    16px;
  --shadow:    0 10px 30px rgba(22,38,63,.08);
  --shadow-lg: 0 20px 50px rgba(22,38,63,.14);
  --maxw:      1160px;
  --ease:      cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic",
               "Meiryo", system-ui, sans-serif;
  line-height: 1.8;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Section framing ---------- */
.section { padding: 96px 0; }
.section--soft { background: var(--bg-soft); }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head .en {
  display: block;
  font-size: 13px;
  letter-spacing: .28em;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.section-head h2 {
  font-size: clamp(26px, 4.2vw, 38px);
  margin: 0;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--navy);
}
.section-head p { color: var(--muted); margin: 14px auto 0; max-width: 640px; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 120%, var(--sun) 0%, var(--sun-2) 22%, var(--blue-lt) 60%, var(--blue) 100%);
  box-shadow: 0 4px 12px rgba(43,143,214,.35);
}
.brand .name { font-weight: 800; color: var(--navy); font-size: 19px; letter-spacing: .04em; white-space: nowrap; }
.brand .name small { display:block; font-size: 10px; letter-spacing:.22em; color: var(--muted); font-weight:600; }

.nav-links { display: flex; align-items: center; gap: 19px; }
.nav-links a {
  color: var(--navy); font-weight: 600; font-size: 14px;
  position: relative; padding: 6px 0; white-space: nowrap;
}
.nav-links a::after {
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background: var(--blue); transition: width .3s var(--ease);
}
.nav-links a:hover::after { width: 100%; }
.nav-cta {
  background: var(--navy); color:#fff !important; padding: 10px 20px;
  border-radius: 999px; font-size: 14px; font-weight: 700;
  transition: transform .2s var(--ease), background .2s;
}
.nav-cta:hover { background: var(--blue); transform: translateY(-1px); }
.nav-cta::after { display:none; }

.nav-toggle { display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; transition:.3s; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #1b3557 0%, #21548c 34%, #2f88c9 72%, #55b3e8 100%);
  color: #fff;
  padding: 120px 0 130px;
}
.hero::before { /* rising sun */
  content:""; position:absolute; right:-6%; top:8%;
  width: 460px; height: 460px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,190,92,.95) 0%, rgba(255,157,61,.55) 40%, rgba(255,157,61,0) 70%);
  filter: blur(2px);
}
.hero::after { /* port waterline */
  content:""; position:absolute; left:0; right:0; bottom:0; height:120px;
  background: linear-gradient(to top, rgba(126,199,196,.28), transparent);
}
.hero .container { position: relative; z-index: 2; }
.hero .eyebrow {
  display:inline-block; font-size:13px; letter-spacing:.24em; font-weight:700;
  color: var(--sun-2); border:1px solid rgba(255,190,92,.5);
  padding:6px 16px; border-radius:999px; margin-bottom:28px;
}
.hero h1 {
  font-size: clamp(30px, 6vw, 60px);
  line-height: 1.35; margin: 0 0 24px; font-weight: 800; letter-spacing:.01em;
}
.hero h1 .accent {
  background: linear-gradient(120deg, var(--sun-2), var(--sun));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { font-size: clamp(15px,2vw,18px); max-width: 620px; color: rgba(255,255,255,.9); margin:0 0 40px; }
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; }

.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding: 15px 30px; border-radius: 999px; font-weight:700; font-size:15px;
  transition: transform .2s var(--ease), box-shadow .2s, background .2s;
  cursor: pointer; border: 0;
}
.btn--sun { background: linear-gradient(120deg, var(--sun), var(--sun-2)); color:#3a2400; box-shadow: 0 10px 24px rgba(255,157,61,.4); }
.btn--sun:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255,157,61,.5); }
.btn--ghost { background: rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.4); }
.btn--ghost:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.btn--navy { background: var(--navy); color:#fff; }
.btn--navy:hover { background: var(--blue); transform: translateY(-2px); }

/* ---------- Stats bar ---------- */
.stats {
  margin-top: -56px; position: relative; z-index: 5;
}
.stats-grid {
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  display:grid; grid-template-columns: repeat(4,1fr);
  padding: 34px 20px; text-align:center;
}
.stat { border-right:1px solid var(--line); }
.stat:last-child { border-right:0; }
.stat .num { font-size: clamp(30px,4vw,42px); font-weight:800; color:var(--navy); line-height:1.1; }
.stat .num span { font-size:.5em; color:var(--blue); margin-left:2px; }
.stat .lbl { font-size:13px; color:var(--muted); margin-top:6px; letter-spacing:.05em; }

/* ---------- About / Philosophy ---------- */
.mission-card {
  text-align:center; max-width: 860px; margin: 0 auto 64px;
  background: linear-gradient(160deg,#fff, var(--sky));
  border:1px solid var(--line); border-radius: 22px; padding: 56px 40px;
  box-shadow: var(--shadow);
}
.mission-card .tag { color: var(--blue); font-weight:700; letter-spacing:.2em; font-size:13px; }
.mission-card h3 {
  font-size: clamp(22px,3.6vw,34px); font-weight:800; color:var(--navy);
  margin: 16px 0 20px; line-height:1.5;
}
.mission-card h3 em { font-style:normal; color: var(--sun); }
.mission-card p { color: var(--muted); margin:0; }

.mv-grid { display:grid; grid-template-columns: 1fr 1fr; gap:24px; margin-bottom: 64px; }
.mv {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 34px; box-shadow: var(--shadow);
}
.mv .k { font-size:13px; letter-spacing:.2em; font-weight:700; color:var(--blue); }
.mv h4 { font-size: 22px; color:var(--navy); margin:8px 0 12px; font-weight:800; }
.mv p { color:var(--muted); margin:0; }

.values-title { text-align:center; font-weight:800; color:var(--navy); font-size:24px; margin:0 0 8px; letter-spacing:.02em; }
.values-lead { text-align:center; color:var(--muted); font-size:14.5px; margin:0 0 38px; }
.values { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.value {
  position:relative; overflow:hidden; background:#fff;
  border:1px solid var(--line); border-radius:18px;
  padding:34px 30px 30px; box-shadow: var(--shadow);
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.value::before {
  content:""; position:absolute; left:0; top:0; height:4px; width:0;
  background: linear-gradient(90deg, var(--blue), var(--sun-2));
  transition: width .45s var(--ease);
}
.value:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color:#cfe4f5; }
.value:hover::before { width:100%; }
.value .no {
  position:absolute; top:2px; right:18px;
  font-size:76px; font-weight:800; line-height:1; letter-spacing:-.04em;
  background: linear-gradient(160deg, #d7ebfa, #f2f9fe);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  pointer-events:none; user-select:none;
}
.value h5 {
  position:relative; margin:0 0 14px; padding-bottom:13px;
  font-size:17px; color:var(--navy); font-weight:800; line-height:1.5;
}
.value h5::after {
  content:""; position:absolute; left:0; bottom:0; width:34px; height:3px; border-radius:2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-lt));
  transition: width .35s var(--ease);
}
.value:hover h5::after { width:64px; }
.value p { margin:0; font-size:14px; color:var(--muted); line-height:1.9; }

/* 1つ目＝軸となる価値観を横長のリードカードに */
.value--lead {
  grid-column: 1 / -1;
  display:grid; grid-template-columns: auto 1fr; gap:34px; align-items:center;
  padding:40px 42px;
  background: linear-gradient(120deg, #ffffff 0%, var(--sky) 100%);
  border-color:#d5e9f8;
}
.value--lead .no {
  position:static; font-size:92px;
  background: linear-gradient(150deg, var(--blue), var(--blue-lt));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.value--lead h5 { font-size:23px; margin-bottom:16px; padding-bottom:14px; }
.value--lead h5::after { width:56px; background: linear-gradient(90deg, var(--sun), var(--sun-2)); }
.value--lead p { font-size:15px; }

/* ---------- Business / Brands ---------- */
.brand-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:28px; }
.bcard {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow); display:flex; flex-direction:column;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.bcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.bcard .photo { position:relative; aspect-ratio: 16/9; overflow:hidden; background:#eef2f6; }
.bcard .photo img { width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.bcard:hover .photo img { transform: scale(1.05); }
.bcard .cat {
  position:absolute; top:14px; left:14px; z-index:2;
  background: rgba(22,38,63,.82); color:#fff; font-size:12px; font-weight:700;
  padding:6px 12px; border-radius:999px; letter-spacing:.06em;
}
.bcard .body { padding: 24px 26px 28px; display:flex; flex-direction:column; flex:1; }
.bcard .logo-chip {
  align-self:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:8px 12px; margin:-52px 0 14px; position:relative; z-index:2;
  box-shadow: var(--shadow); height:56px; display:flex; align-items:center;
}
.bcard .logo-chip img { height:38px; width:auto; }
.bcard .logo-chip--dark { background: var(--navy); border-color: var(--navy); }
.bcard .logo-chip--dark img { height:34px; }
.bcard h4 { margin:0 0 10px; font-size:20px; color:var(--navy); font-weight:800; }
.bcard p { margin:0 0 18px; color:var(--muted); font-size:14.5px; flex:1; }
.bcard .go {
  align-self:flex-start; font-weight:700; font-size:14px; color:var(--blue);
  display:inline-flex; align-items:center; gap:7px;
}
.bcard .go .arw { transition: transform .25s var(--ease); }
.bcard .go:hover .arw { transform: translateX(4px); }
.bcard .go.disabled { color: var(--muted); pointer-events:none; }

/* ---------- History / Timeline ---------- */
.timeline { max-width: 820px; margin: 0 auto; position: relative; }
.timeline::before {
  content:""; position:absolute; left: 96px; top:6px; bottom:6px; width:2px;
  background: linear-gradient(var(--blue), var(--teal));
}
.tl-item { position:relative; padding: 0 0 34px 130px; }
.tl-item:last-child { padding-bottom:0; }
.tl-item .date {
  position:absolute; left:0; top:0; width:78px; text-align:right;
  font-weight:800; color:var(--navy); font-size:15px;
}
.tl-item .dot {
  position:absolute; left:89px; top:6px; width:16px; height:16px; border-radius:50%;
  background:#fff; border:3px solid var(--blue); z-index:2;
}
.tl-item.is-founding .dot { border-color: var(--sun); background: var(--sun); }
.tl-item.is-corp .dot { border-color: var(--sun); }
.tl-item .txt { color: var(--ink); font-size:15px; }
.tl-item .txt b { color: var(--navy); }
.tl-item .tl-note { color: var(--muted); font-size: 13px; font-weight: 600; }
.tl-item .badge {
  display:inline-block; font-size:11px; font-weight:700; color:#fff; background:var(--sun);
  padding:2px 9px; border-radius:999px; margin-left:8px; vertical-align:middle;
}

/* ---------- Company overview ---------- */
.overview { max-width: 820px; margin:0 auto; border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow); }
.overview dl { margin:0; }
.overview .row { display:grid; grid-template-columns: 200px 1fr; border-bottom:1px solid var(--line); }
.overview .row:last-child { border-bottom:0; }
.overview dt { background: var(--bg-soft); padding:20px 26px; font-weight:700; color:var(--navy); margin:0; }
.overview dd { padding:20px 26px; margin:0; color:var(--ink); }
.overview dd small { color: var(--muted); }

/* ---------- Recruit CTA ---------- */
.recruit {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 55%, #204a74 100%);
  color:#fff; border-radius: 24px; padding: 60px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.recruit::before {
  content:""; position:absolute; right:-40px; bottom:-60px; width:280px; height:280px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,157,61,.5), transparent 70%);
}
.recruit .rc-txt { position:relative; z-index:2; max-width: 620px; }
.recruit .en { color: var(--sun-2); letter-spacing:.24em; font-weight:700; font-size:13px; }
.recruit h3 { font-size: clamp(24px,3.6vw,32px); margin:10px 0 14px; font-weight:800; }
.recruit p { color: rgba(255,255,255,.85); margin:0; }
.recruit .rc-act { position:relative; z-index:2; }

/* ---------- Contact ---------- */
.contact-wrap { display:grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 960px; margin:0 auto; }
.contact-info h4 { color:var(--navy); font-size:20px; margin:0 0 16px; }
.contact-info .ci-row { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.contact-info .ci-row .ic { width:40px;height:40px;flex:0 0 40px;border-radius:10px;background:var(--sky);display:grid;place-items:center;color:var(--blue);font-weight:800;}
.contact-info .ci-row .d small{color:var(--muted);font-size:12px;display:block;}
.contact-info .ci-row .d b{color:var(--navy);font-weight:700;}
.note { background: var(--sky); border-radius:12px; padding:14px 18px; font-size:13px; color:var(--muted); margin-top:20px; }

.form { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.form .fld { margin-bottom:18px; }
.form label { display:block; font-size:13.5px; font-weight:700; color:var(--navy); margin-bottom:7px; }
.form input, .form textarea, .form select {
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:15px; background: var(--bg-soft); transition:border .2s;
}
.form input:focus, .form textarea:focus, .form select:focus { outline:none; border-color: var(--blue); background:#fff; }
.form .req { color:#e0533d; font-size:12px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,.72); padding: 60px 0 30px; }
.footer-top { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-brand .name { color:#fff; font-weight:800; font-size:20px; letter-spacing:.04em; }
.footer-brand p { font-size:13.5px; margin:12px 0 0; max-width:320px; }
.footer-cols { display:flex; gap:60px; flex-wrap:wrap; }
.footer-cols h6 { color:#fff; font-size:13px; letter-spacing:.1em; margin:0 0 14px; }
.footer-cols ul { list-style:none; margin:0; padding:0; }
.footer-cols li { margin-bottom:10px; }
.footer-cols a { color: rgba(255,255,255,.72); font-size:14px; }
.footer-cols a:hover { color:#fff; }
.footer-bottom { padding-top:24px; font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .mv-grid, .brand-grid, .contact-wrap { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2,1fr); gap:20px 0; }
  .stat:nth-child(2){ border-right:0; }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--line); padding-bottom:18px; }
  .recruit { padding: 40px 28px; }
}
/* nav collapses earlier — the full horizontal menu needs ~980px */
@media (max-width: 980px) {
  .nav-links {
    position: fixed; inset: 72px 0 auto 0; background:#fff; flex-direction:column;
    align-items:stretch; gap:0; padding: 10px 0; border-bottom:1px solid var(--line);
    box-shadow: var(--shadow); transform: translateY(-140%); transition: transform .35s var(--ease);
  }
  .nav-links.open { transform: none; }
  .nav-links a { padding:14px 24px; }
  .nav-links .nav-cta { margin:10px 24px; text-align:center; }
  .nav-toggle { display:block; }
}

@media (max-width: 720px) {
  .section { padding: 68px 0; }
  .timeline::before { left: 8px; }
  .tl-item { padding-left: 42px; }
  .tl-item .date { position:static; width:auto; text-align:left; display:block; margin-bottom:4px; color:var(--blue); }
  .tl-item .dot { left:1px; }
  .overview .row { grid-template-columns: 1fr; }
  .overview dt { padding-bottom:4px; }
  .overview dd { padding-top:8px; }
  .hero { padding: 90px 0 100px; }
}

/* ============================================================
   Added sections: 代表メッセージ / 店舗一覧 / 社員の声・待遇 / 出店募集
   ============================================================ */

/* 代表メッセージ */
.message-wrap { display:grid; grid-template-columns: 320px 1fr; gap:48px; align-items:start; max-width:1000px; margin:0 auto; }
.message-photo { border-radius:20px; overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:3/4; position:sticky; top:100px; }
.message-photo img { width:100%; height:100%; object-fit:cover; }
.message-photo .ph {
  width:100%; height:100%; display:grid; place-items:center; text-align:center; padding:24px;
  background:linear-gradient(160deg,var(--sky),#dceffa); color:var(--blue); font-weight:700; font-size:14px; line-height:1.8;
}
.message-body .role { color:var(--blue); font-weight:700; letter-spacing:.12em; font-size:13px; }
.message-body h3 { font-size:clamp(20px,3vw,28px); color:var(--navy); margin:10px 0 22px; font-weight:800; line-height:1.6; }
.message-body p { color:var(--ink); margin:0 0 16px; }
.message-body .msg-quote { border-left:3px solid var(--blue-lt); padding:2px 0 2px 18px; margin:0 0 16px; color:var(--navy); font-weight:600; line-height:2; }
.message-body .tagline { font-size:clamp(17px,2.4vw,21px); font-weight:800; color:var(--blue); margin:24px 0; letter-spacing:.02em; }
.message-body .sign { margin-top:26px; color:var(--muted); font-size:14px; }
.message-body .sign b { color:var(--navy); font-size:20px; margin-left:12px; }

/* 店舗一覧 */
.store-brand { margin-bottom:44px; }
.store-brand:last-child { margin-bottom:0; }
.store-brand > h3 { display:flex; align-items:center; gap:12px; font-size:19px; color:var(--navy); margin:0 0 18px; font-weight:800; }
.store-brand > h3 .pill { font-size:12px; font-weight:700; color:#fff; background:var(--blue); padding:3px 11px; border-radius:999px; }
.store-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.store { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px; box-shadow:var(--shadow); }
.store h4 { margin:0 0 8px; font-size:16px; color:var(--navy); }
.store .meta { font-size:13.5px; color:var(--muted); line-height:1.75; }
.store .meta b { color:var(--ink); font-weight:600; }
.store .map { display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:13px; font-weight:700; color:var(--blue); }
.store .todo { color:#c98a00; font-size:13px; }

/* 採用：働く魅力・社員の声 */
.recruit-lead { text-align:center; max-width:700px; margin:0 auto; color:var(--muted); }
.perks { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.perk { text-align:center; padding:24px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
.perk .ic2 { width:56px; height:56px; border-radius:16px; margin:0 auto 14px; display:grid; place-items:center; background:linear-gradient(135deg,var(--blue),var(--blue-lt)); color:#fff; font-size:24px; }
.perk h5 { color:var(--navy); margin:0 0 8px; font-size:16.5px; }
.perk p { color:var(--muted); font-size:14px; margin:0; line-height:1.75; }
.voices-title { text-align:center; font-weight:800; color:var(--navy); font-size:20px; margin:56px 0 4px; }
.voices { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px; }
.voice { background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:var(--shadow); }
.voice .q { color:var(--blue); font-size:34px; font-weight:800; line-height:.8; font-family:Georgia,serif; }
.voice p { color:var(--ink); font-size:14.5px; margin:10px 0 18px; }
.voice .who { display:flex; align-items:center; gap:12px; }
.voice .who .av { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--teal)); flex:0 0 42px; }
.voice .who .nm b { color:var(--navy); font-size:14px; display:block; }
.voice .who .nm small { color:var(--muted); font-size:12px; }

/* 出店・物件募集 */
.fr-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:34px; }
.fr-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px; box-shadow:var(--shadow); }
.fr-card .t { font-weight:800; color:var(--navy); font-size:17px; margin:0 0 12px; display:flex; align-items:center; gap:10px; }
.fr-card .t .ic2 { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--sky); color:var(--blue); font-size:18px; }
.fr-card ul { margin:0; padding-left:1.1em; color:var(--muted); font-size:14px; line-height:1.95; }
.fr-cta { text-align:center; }

/* お問い合わせ：LINE 導線 */
.line-card {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 40px 30px; box-shadow: var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.line-card .line-ic {
  width:64px; height:64px; border-radius:18px; background:#06C755; color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:15px; letter-spacing:.04em;
  margin-bottom:20px; box-shadow:0 10px 22px rgba(6,199,85,.35);
}
.line-card h4 { color:var(--navy); font-size:21px; margin:0 0 12px; font-weight:800; }
.line-card p { color:var(--muted); font-size:14.5px; margin:0 0 26px; line-height:1.8; }
.btn--line { background:#06C755; color:#fff; box-shadow:0 10px 24px rgba(6,199,85,.35); font-size:16px; padding:16px 34px; }
.btn--line:hover { background:#05b34c; transform:translateY(-2px); box-shadow:0 14px 30px rgba(6,199,85,.45); }
.line-card .line-note { color:var(--muted); font-size:13px; margin:18px 0 0; }

@media (max-width: 900px) {
  .message-wrap { grid-template-columns:1fr; gap:28px; }
  .message-photo { max-width:320px; margin:0 auto; position:static; }
  .store-grid, .voices, .perks, .fr-grid { grid-template-columns:1fr; }
}

/* ============================================================
   Multi-page: nav active state / page hero / home link cards
   ============================================================ */
.nav-links a.active { color: var(--blue); }
.nav-links a.active::after { width: 100%; }

/* 下層ページの見出しバナー */
.page-hero {
  background: linear-gradient(135deg, #204a7d 0%, #2a6ba8 55%, #3f9bd8 100%);
  color:#fff; padding: 66px 0 58px; position:relative; overflow:hidden;
}
.page-hero::before {
  content:""; position:absolute; right:-4%; top:-40%; width:340px; height:340px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,190,92,.55) 0%, rgba(255,157,61,0) 70%);
}
.page-hero .container { position:relative; z-index:2; }
.page-hero .en { color: var(--sun-2); letter-spacing:.24em; font-weight:700; font-size:12px; }
.page-hero h1 { font-size: clamp(26px,4.6vw,42px); margin:10px 0 12px; font-weight:800; letter-spacing:.02em; }
.page-hero p { color: rgba(255,255,255,.86); margin:0; max-width:660px; }
.breadcrumb { margin-top:18px; font-size:13px; color: rgba(255,255,255,.7); }
.breadcrumb a { color: rgba(255,255,255,.88); }
.breadcrumb .sep { margin:0 9px; opacity:.5; }

/* ホームのページ導線カード */
.link-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.link-card {
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius: var(--radius); padding:30px; box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.link-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.link-card .en { color: var(--blue); font-size:12px; letter-spacing:.2em; font-weight:700; }
.link-card h3 { color: var(--navy); font-size:20px; margin:8px 0 10px; font-weight:800; }
.link-card p { color: var(--muted); font-size:14px; margin:0 0 16px; flex:1; }
.link-card .go { color: var(--blue); font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:7px; }
.link-card .go .arw { transition: transform .25s var(--ease); }
.link-card:hover .go .arw { transform: translateX(4px); }

/* ホームのLINE CTAバンド */
.line-band {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 55%, #204a74 100%);
  color:#fff; border-radius:24px; padding:52px 40px; text-align:center; position:relative; overflow:hidden;
}
.line-band::before { content:""; position:absolute; right:-40px; bottom:-60px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(6,199,85,.4), transparent 70%); }
.line-band > * { position:relative; z-index:2; }
.line-band h3 { font-size: clamp(22px,3.4vw,30px); margin:0 0 12px; font-weight:800; }
.line-band p { color: rgba(255,255,255,.85); margin:0 0 26px; }

@media (max-width: 900px) {
  .link-cards { grid-template-columns:1fr; }
}

/* 社員インタビュー */
.interview {
  display:grid; grid-template-columns:300px 1fr; gap:44px; align-items:start;
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding:38px; margin-top:40px;
}
.interview .iv-side { text-align:center; position:sticky; top:100px; }
.interview .iv-photo {
  aspect-ratio:1/1; border-radius:16px; margin-bottom:16px;
  background:linear-gradient(160deg,var(--sky),#dceffa);
  display:grid; place-items:center; color:var(--blue); font-weight:700; font-size:13px; line-height:1.7;
}
.interview .iv-name { font-size:19px; font-weight:800; color:var(--navy); }
.interview .iv-meta { font-size:13px; color:var(--muted); margin-top:5px; line-height:1.7; }
.interview .iv-badge { display:inline-block; margin-top:12px; font-size:12px; font-weight:700; color:#fff; background:var(--blue); padding:4px 12px; border-radius:999px; }
.interview .iv-body .pull { font-size:clamp(19px,2.5vw,25px); font-weight:800; color:var(--navy); line-height:1.55; margin:0 0 8px; }
.interview .iv-body .pull span { color:var(--sun); }
.qa { border-top:1px solid var(--line); padding:16px 0; }
.qa .q { font-weight:700; color:var(--blue); font-size:14.5px; margin:0 0 6px; display:flex; gap:8px; }
.qa .q::before { content:"Q."; color:var(--sun); font-weight:800; }
.qa .a { color:var(--ink); font-size:14.5px; margin:0; line-height:1.9; }
@media (max-width: 900px) {
  .interview { grid-template-columns:1fr; gap:24px; padding:26px; }
  .interview .iv-side { position:static; max-width:260px; margin:0 auto; }
}

@media (max-width: 900px) {
  .value--lead { grid-template-columns:1fr; gap:10px; padding:30px 26px; }
  .value--lead .no { font-size:64px; }
}

/* ============================================================
   v7 リブランド — 晴れ（朝日） × みなと（瀬戸内の海）
   ============================================================ */
:root{
  /* 新パレット：瀬戸内の水平線 */
  --deep:      #08293A;   /* 夜明け前の藍 */
  --sea:       #0F4C5C;   /* 港の海 */
  --tide:      #14707E;   /* 潮 */
  --tide-br:   #2AA7AE;   /* 浅瀬 */
  --tide-pale: #D3E9EA;
  --sunrise:   #F2A227;   /* 朝日 */
  --sunrise-lt:#FFD07A;   /* 陽だまり */

  /* 既存トークンを新パレットへ差し替え */
  --navy:      #08293A;
  --navy-2:    #0F4C5C;
  --blue:      #14707E;
  --blue-lt:   #2AA7AE;
  --sky:       #EAF4F4;
  --sun:       #F2A227;
  --sun-2:     #FFD07A;
  --teal:      #2AA7AE;
  --ink:       #14262E;
  --muted:     #5A727A;
  --line:      #DDE9E9;
  --bg:        #FFFFFF;
  --bg-soft:   #F1F8F8;
  --shadow:    0 10px 30px rgba(8,41,58,.07);
  --shadow-lg: 0 22px 55px rgba(8,41,58,.15);
}

/* ---------- 書体 ---------- */
body{ font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif; }
h1,h2,h3,h4,h5,h6,.brand .name,.section-head h2,.page-hero h1,.hero h1{
  font-family:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  letter-spacing:.01em;
}
.stat .num,.value .no,.breadcrumb,.hero .eyebrow,.brand .name small,.iv-badge,.pill,.cat{
  font-family:"Outfit","Zen Kaku Gothic New","Noto Sans JP",sans-serif;
}
.section-head h2{ font-weight:800; letter-spacing:.04em; }

/* ---------- ブランドマーク：水平線から昇る太陽 ---------- */
.brand .mark{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#0B3448 0%,#17677A 52%,#2AA7AE 62%,#F2A227 63%,#FFD07A 100%);
  box-shadow:0 4px 14px rgba(20,112,126,.38);
}
.brand .mark::after{
  content:""; position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle,#FFF3D6 0%,#FFD07A 60%,rgba(255,208,122,0) 72%);
}

/* ---------- ヒーロー：朝日が昇る港 ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate; color:#fff;
  padding:132px 0 148px;
  background:linear-gradient(180deg,#05202F 0%,#0A3145 26%,#12566B 48%,#2A8490 62%,#8FBE9E 67.4%,#F3B45A 69.4%,#FFDDA6 70%);
}
.hero::before{ content:none; }
.hero::after{
  content:""; position:absolute; left:0; right:0; top:70%; bottom:0; z-index:0;
  background:linear-gradient(180deg,#FFDDA6 0%,#E8A64F 3%,#2E8E92 12%,#146272 42%,#08303F 100%);
}
.hero-scene{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-scene .sun{
  position:absolute; left:50%; bottom:30%; transform:translate(-50%,42%);
  width:230px; height:230px; border-radius:50%;
  background:radial-gradient(circle,#FFF6E2 0%,#FFE0A4 38%,rgba(242,162,39,.55) 56%,rgba(242,162,39,0) 72%);
}
.hero-scene .glint{
  position:absolute; left:50%; transform:translateX(-50%); top:70%; height:30%;
  width:180px;
  background:linear-gradient(180deg,rgba(255,221,166,.85) 0%,rgba(255,208,122,.28) 34%,rgba(255,208,122,0) 100%);
  filter:blur(6px);
}
.hero-scene .isles{ position:absolute; left:0; right:0; bottom:30%; width:100%; height:76px; }
.hero .container{ position:relative; z-index:2; }
.hero .eyebrow{
  color:var(--sunrise-lt); border-color:rgba(255,208,122,.45);
  background:rgba(8,41,58,.28); backdrop-filter:blur(4px);
  letter-spacing:.18em; font-size:12.5px;
}
.hero h1{ font-weight:800; text-wrap:balance; text-shadow:0 2px 24px rgba(5,32,47,.45); }
.hero h1 .accent{ background:linear-gradient(120deg,#FFE3AE,#F2A227); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead{ color:rgba(255,255,255,.92); text-shadow:0 1px 14px rgba(5,32,47,.5); }

/* ---------- 下層ページの見出し：水平線 ---------- */
.page-hero{
  background:linear-gradient(165deg,#06212F 0%,#0F4C5C 46%,#177585 78%,#2AA7AE 100%);
  padding:74px 0 66px; position:relative; overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; right:-2%; top:-46%; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,224,164,.55) 0%,rgba(242,162,39,.18) 45%,rgba(242,162,39,0) 70%);
}
.page-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--sunrise) 0%,var(--sunrise-lt) 22%,rgba(42,167,174,.55) 60%,transparent 100%);
}
.page-hero h1{ font-weight:800; text-wrap:balance; }

/* ---------- ボタン ---------- */
.btn--sun{
  background:linear-gradient(120deg,#F2A227,#FFC96B); color:#31220A;
  box-shadow:0 12px 26px rgba(242,162,39,.38);
}
.btn--sun:hover{ box-shadow:0 16px 34px rgba(242,162,39,.5); }
.btn--navy{ background:var(--sea); }
.btn--navy:hover{ background:var(--tide); }
.btn--ghost{ border-color:rgba(255,255,255,.55); }

/* ---------- 数字（実績） ---------- */
.stats-grid{ border:1px solid var(--line); }
.stat .num{ color:var(--sea); font-weight:800; letter-spacing:-.01em; }
.stat .num span{ color:var(--sunrise); font-weight:700; }
.stat .lbl{ letter-spacing:.06em; }

/* ---------- セクション見出しに水平線のアクセント ---------- */
.section-head h2{ position:relative; display:inline-block; padding-bottom:16px; }
.section-head h2::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0;
  width:56px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--sunrise),var(--tide-br));
}

/* ---------- カード ---------- */
.bcard,.mv,.perk,.fr-card,.store,.voice,.interview,.link-card,.overview{ border-color:var(--line); }
.bcard .cat{ background:rgba(8,41,58,.82); letter-spacing:.06em; }
.store-brand > h3 .pill{ background:var(--tide); letter-spacing:.04em; }
.mission-card{ background:linear-gradient(150deg,#fff 0%,var(--sky) 100%); border-color:var(--tide-pale); }
.mission-card h3 em{ color:var(--sunrise); }

/* ---------- フッター：夜の港 ---------- */
.site-footer{ background:linear-gradient(180deg,#0B3448 0%,#08293A 100%); position:relative; }
.site-footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--sunrise) 0%,var(--sunrise-lt) 18%,rgba(42,167,174,.5) 55%,transparent 100%);
}

/* ---------- LINE帯 ---------- */
.line-band{ background:linear-gradient(150deg,#0B3448 0%,#0F4C5C 55%,#177585 100%); }

/* ---------- レスポンシブ再指定（上書き順の都合で最後に） ---------- */
@media (max-width:900px){
  .hero{ padding:96px 0 108px; }
  .hero-scene .sun{ width:170px; height:170px; }
  .page-hero{ padding:56px 0 50px; }
}
@media (max-width:720px){
  .hero{ padding:84px 0 96px; }
  .hero-scene .isles{ height:52px; }
}

/* ============================================================
   v8 — 明るい瀬戸内の朝へ（トーンアップ）
   ============================================================ */
:root{
  --deep:      #12455A;
  --sea:       #14647A;
  --tide:      #10788C;
  --tide-br:   #2FB3C0;
  --tide-pale: #D9F0F1;
  --sunrise:   #F9A825;
  --sunrise-lt:#FFD37A;

  --navy:      #12455A;   /* 見出し：濃すぎない藍 */
  --navy-2:    #1A6076;
  --blue:      #10788C;   /* リンク・アクセント（可読性AA） */
  --blue-lt:   #2FB3C0;
  --sky:       #E8F7F8;
  --sun:       #F9A825;
  --sun-2:     #FFD37A;
  --teal:      #2FB3C0;
  --ink:       #1B3540;
  --muted:     #5B7683;
  --line:      #DCEDEE;
  --bg:        #FFFFFF;
  --bg-soft:   #F3FBFB;
  --shadow:    0 10px 28px rgba(18,69,90,.07);
  --shadow-lg: 0 22px 52px rgba(18,69,90,.13);
}

/* ---------- ヒーロー：晴れ渡った朝の空と海 ---------- */
.hero{
  background:linear-gradient(180deg,
    #2E9BC4 0%, #59BEDC 20%, #93DCE8 42%,
    #CFF0EC 57%, #FFE7B4 65.5%, #FFD79A 69.6%, #FFEFD2 70%);
}
.hero::after{
  top:70%;
  background:linear-gradient(180deg,#FFE6B8 0%,#8AD8D2 6%,#3FBAC6 22%,#1F97AC 58%,#17798F 100%);
}
/* 左からの薄いシェードで白文字の可読性を確保（右側は明るいまま） */
.hero-scene::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(8,52,68,.52) 0%,rgba(8,52,68,.26) 40%,rgba(8,52,68,0) 70%);
}
.hero-scene .sun{
  background:radial-gradient(circle,#FFFDF4 0%,#FFEFC4 40%,rgba(255,198,80,.5) 58%,rgba(255,198,80,0) 74%);
}
.hero-scene .isles path{ fill:#3E92A8; }
.hero h1{ text-shadow:0 2px 20px rgba(8,52,68,.42); }
.hero p.lead{ color:rgba(255,255,255,.96); text-shadow:0 1px 12px rgba(8,52,68,.45); }
.hero .eyebrow{ background:rgba(8,52,68,.3); border-color:rgba(255,224,168,.6); color:#FFE7B4; }

/* ---------- 下層ページ見出し：明るいティール ---------- */
.page-hero{
  background:
    linear-gradient(100deg,rgba(8,52,68,.42) 0%,rgba(8,52,68,.12) 55%,rgba(8,52,68,0) 80%),
    linear-gradient(160deg,#1B7E97 0%,#2298AF 44%,#3BB6C2 76%,#7BD8DE 100%);
}
.page-hero h1{ text-shadow:0 2px 16px rgba(8,52,68,.35); }
.page-hero p{ color:rgba(255,255,255,.96); text-shadow:0 1px 10px rgba(8,52,68,.35); }
.page-hero .breadcrumb{ color:rgba(255,255,255,.85); }
.page-hero .breadcrumb a{ color:#fff; }

/* ---------- ブランドマーク ---------- */
.brand .mark{
  background:linear-gradient(180deg,#4FB2D6 0%,#8ADCE6 46%,#FFD79A 60%,#FFB93F 100%);
  box-shadow:0 4px 14px rgba(47,179,192,.42);
}

/* ---------- 濃い帯を明るく ---------- */
.site-footer{ background:linear-gradient(180deg,#166D84 0%,#105468 100%); }
.recruit, .line-band{ background:linear-gradient(150deg,#137F99 0%,#1A93A8 52%,#33B7C4 100%); }
.recruit h3, .line-band h3{ text-shadow:0 1px 12px rgba(8,52,68,.3); }
.nav-cta{ background:var(--sea); }
.nav-cta:hover{ background:var(--tide); }
.btn--navy{ background:var(--sea); }
.btn--navy:hover{ background:var(--tide); }

/* ---------- 明度に合わせた微調整 ---------- */
.mission-card{ background:linear-gradient(150deg,#fff 0%,#EAF8F9 100%); border-color:var(--tide-pale); }
.value .no{ background:linear-gradient(160deg,#CFEAEE,#F1FAFB); -webkit-background-clip:text; background-clip:text; color:transparent; }
.value--lead{ background:linear-gradient(120deg,#ffffff 0%,#E8F7F8 100%); border-color:#CBE8EA; }
.bcard .cat{ background:rgba(18,69,90,.8); }

/* ---- v9: ヒーローのアクセント語（「晴れ」「みなと」）を濃く ---- */
.hero h1 .accent{
  background:linear-gradient(120deg,#FFC22E 0%,#F2900A 48%,#DC6A05 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 14px rgba(8,52,68,.45);
}

/* ---- v10: 正方形ロゴ（ハレモア）はチップを大きく ---- */
.bcard .logo-chip--tall{ height:82px; margin-top:-64px; padding:8px 14px; }
.bcard .logo-chip--tall img{ height:66px; }
@media (max-width:720px){
  .bcard .logo-chip--tall{ height:72px; margin-top:-56px; }
  .bcard .logo-chip--tall img{ height:58px; }
}

/* ---- v11: ヒーローのアクセント語を「きれいなゴールド」に ---- */
.hero h1 .accent{
  background:linear-gradient(112deg,
    #FFF1BE 0%,
    #F8D976 18%,
    #EFBB33 38%,
    #FFEBA8 52%,
    #E6A81C 68%,
    #F6D25F 86%,
    #D99512 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 12px rgba(8,52,68,.38);
  filter:drop-shadow(0 1px 1px rgba(120,74,0,.25));
}

/* ---- v12: ゴールドから陰色(#D99512)を除去 ---- */
.hero h1 .accent{
  background:linear-gradient(112deg,
    #FFF1BE 0%,
    #F8D976 22%,
    #EFBB33 45%,
    #FFEBA8 62%,
    #F1C544 82%,
    #F8D976 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---- v13: 「晴れ」「みなと」を通常の文字色に戻す ---- */
.hero h1 .accent{
  background:none;
  -webkit-background-clip:border-box; background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  color:inherit;
  filter:none;
  text-shadow:0 2px 20px rgba(8,52,68,.42);
}

/* ---- v14: グラデーションをやめ、単色のゴールドに ---- */
.hero h1 .accent{
  background:none;
  -webkit-background-clip:border-box; background-clip:border-box;
  color:#F2C230;
  -webkit-text-fill-color:#F2C230;
  filter:none;
  text-shadow:0 2px 16px rgba(8,52,68,.40);
}