/* 会社の考え方（MVV）見本（2026-10-13）専用 CSS。既存の site.css〜v9.css のあとに読む（kangaekata.html は sv-semi.css のあと）。
   会社色の変数だけを使う。理念の文言は HTML に原文のまま置き、ここでは見せ方だけを決める。
   「目指すこと（理念）」「確定した制度」「予定」を、札の色と形で見分けられるようにする。 */

.mv { --mv-ink: #1d3c40; --mv-r: 24px; --mv-shadow: 0 12px 26px rgba(15, 95, 102, 0.13); }
.mv :focus-visible, .mv-top :focus-visible, .mv-band :focus-visible { outline: 3px solid var(--c-blue); outline-offset: 3px; border-radius: 6px; }

/* 見分けの札 */
.mv-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.7; vertical-align: middle; white-space: nowrap; }
.mv-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mv-tag--aim { background: #fff; color: var(--c-deeper); border: 2px solid var(--c-main); }
.mv-tag--fixed { background: var(--c-deeper); color: #fff; }
.mv-tag--fixed::before { background: var(--c-main); }
.mv-tag--plan { background: #fff4e8; color: #8a4300; border: 2px dashed var(--c-orange); }
.mv-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 14px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--c-line); list-style: none; font-size: 14px; line-height: 1.7; }
.mv-legend li { display: flex; align-items: center; gap: 8px; }

/* 冒頭（sv-hero を使い、Mission を大きく） */
.mv-hero .sv-hero__h { font-size: clamp(40px, 6vw, 84px); line-height: 1.15; }
.mv-hero__kind { margin: 0 0 8px; }
.mv-hero .sv-hero__lead { font-weight: 500; color: var(--c-ink); font-size: clamp(16px, 1.4vw, 18px); }
.mv-hero .sv-hero__in { padding-bottom: 36px; }

/* 理念のカード */
.mv-pair { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 26px; align-items: stretch; }
.mv-words { display: grid; gap: 16px; }
.mv-word { position: relative; padding: 22px 24px; border-radius: var(--mv-r); background: #fff; box-shadow: var(--mv-shadow); border-left: 8px solid var(--c-main); }
.mv-word small { display: block; font-family: var(--f-en); font-weight: 600; letter-spacing: 0.16em; font-size: 12px; color: var(--c-deep); margin-bottom: 4px; }
.mv-word__big { margin: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; color: var(--mv-ink); line-height: 1.4; }
.mv-word p { margin: 0; line-height: 1.85; }
.mv-word .mv-tag { position: absolute; right: 16px; top: 16px; }
.mv-word--purpose { border-left-color: var(--c-blue); }
.mv-word--purpose p { font-size: 17px; font-weight: 700; color: var(--mv-ink); padding-right: 6px; }
.mv-link-fixed { margin: 0; padding: 16px 18px; border-radius: 16px; background: var(--c-tint); line-height: 1.8; font-size: 15px; }
.mv-link-fixed .mv-tag { margin-right: 6px; }
.mv-photo { margin: 0; position: relative; border-radius: var(--mv-r); overflow: hidden; box-shadow: var(--mv-shadow); align-self: start; }
.mv-photo .sv-photo { --ar: 3 / 2; }

/* Vision：人・企業・地域 */
.mv-vision { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 30px; align-items: center; }
.mv-orbit { position: relative; margin: 0 auto; width: min(420px, 100%); aspect-ratio: 1; }
.mv-orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mv-orbit__c, .mv-orbit__n { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 50%; font-weight: 700; line-height: 1.3; }
.mv-orbit__c { left: 31%; top: 31%; width: 38%; height: 38%; background: var(--c-deeper); color: #fff; font-size: clamp(15px, 1.6vw, 19px); box-shadow: var(--mv-shadow); }
.mv-orbit__c small { font-size: 12px; color: var(--c-main); font-weight: 500; }
.mv-orbit__n { width: 27%; height: 27%; background: #fff; border: 4px solid var(--c-main); color: var(--mv-ink); font-size: clamp(17px, 2vw, 22px); }
.mv-orbit__n small { font-size: 11.5px; font-weight: 500; color: var(--c-ink2); }
.mv-orbit__n--1 { left: 36.5%; top: 0; }
.mv-orbit__n--2 { left: 0; bottom: 4%; }
.mv-orbit__n--3 { right: 0; bottom: 4%; }
.mv-three { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mv-three li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 18px; border-radius: 18px; background: #fff; box-shadow: 0 6px 14px rgba(15, 95, 102, 0.1); }
.mv-three__ic { width: 52px; height: 52px; border-radius: 50%; background: var(--c-tint2); display: flex; align-items: center; justify-content: center; }
.mv-three__ic svg { width: 34px; height: 34px; }
.mv-three b { display: block; font-family: var(--f-en); font-weight: 700; letter-spacing: 0.04em; color: var(--c-deep); font-size: 15px; }
.mv-three span { display: block; font-weight: 700; color: var(--mv-ink); font-size: 16.5px; line-height: 1.5; }

/* Values：5枚のカード */
.mv-values { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: v; }
.mv-values li { position: relative; display: grid; justify-items: center; align-content: start; gap: 10px; text-align: center; padding: 22px 12px 20px; border-radius: var(--mv-r); background: #fff; box-shadow: var(--mv-shadow); border-top: 6px solid var(--c-main); }
.mv-values li:nth-child(even) { border-top-color: var(--c-blue); }
.mv-values__no { font-family: var(--f-num); font-weight: 700; font-size: 26px; line-height: 1; color: var(--c-deep); }
.mv-values__ic { width: 64px; height: 64px; border-radius: 50%; background: var(--c-tint); display: flex; align-items: center; justify-content: center; }
.mv-values__ic svg { width: 42px; height: 42px; }
.mv-values b { font-size: 18px; color: var(--mv-ink); line-height: 1.45; }

/* 学ぶ → できることを増やす → 役割へ */
.mv-grow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 34px; margin: 0; padding: 0; list-style: none; }
.mv-grow > li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; border-radius: var(--mv-r); background: #fff; box-shadow: var(--mv-shadow); }
.mv-grow > li:not(:last-child)::after { content: ""; position: absolute; right: -27px; top: 50%; transform: translateY(-50%); border: 9px solid transparent; border-left: 13px solid var(--c-deep); }
.mv-grow small { font-family: var(--f-en); font-weight: 600; letter-spacing: 0.16em; color: var(--c-deep); font-size: 12px; }
.mv-grow h3 { font-size: 21px; color: var(--mv-ink); }
.mv-grow p { margin: 0; line-height: 1.8; font-size: 15px; }
.mv-grow a { font-weight: 700; margin-top: auto; }
.mv-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 22px 0 0; }
.mv-compare > div { padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--c-line); line-height: 1.8; font-size: 15px; }
.mv-compare .mv-tag { margin-bottom: 6px; }

/* 働く環境と求人 */
.mv-go { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.mv-go a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px 18px 16px; border-radius: 18px; background: #fff; border: 2px solid var(--c-main); color: var(--mv-ink); }
.mv-go a:hover { text-decoration: none; background: var(--c-tint); }
.mv-go b { font-size: 17px; }
.mv-go span { font-size: 14px; color: var(--c-ink2); line-height: 1.6; }

/* トップの「HBCの考え方」ブロック */
.mv-top { padding: 56px 20px; background: linear-gradient(135deg, var(--c-tint) 0%, #fff 70%); }
.mv-top__in { width: min(var(--w-main), 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 30px; align-items: center; }
.mv-top__h { margin: 4px 0 10px; font-size: clamp(36px, 5vw, 64px); line-height: 1.2; color: #1d3c40; }
.mv-top__vision { margin: 0 0 18px; font-weight: 700; color: var(--c-deeper); line-height: 1.7; }
.mv-top__values { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mv-top__values li { padding: 10px 16px; border-radius: 999px; background: #fff; border: 2px solid var(--c-main); font-weight: 700; color: #1d3c40; }
.mv-top__values li span { font-family: var(--f-num); color: var(--c-deep); margin-right: 6px; }
.mv-top__vh { margin: 0 0 10px; font-weight: 700; color: var(--c-ink2); font-size: 14px; }

/* 学び・特集に置く短い帯 */
.mv-band { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 16px 20px; border-radius: 18px; background: #fff; border: 2px solid var(--c-main); line-height: 1.8; }
.mv-band p { margin: 0; flex: 1 1 420px; }
.mv-band b { color: var(--c-deeper); }

@media (max-width: 960px) {
  .mv-pair, .mv-vision, .mv-top__in { grid-template-columns: 1fr; }
  .mv-values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mv-grow { grid-template-columns: 1fr; gap: 26px; }
  .mv-grow > li:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -24px; transform: translateX(-50%); border: 9px solid transparent; border-top: 13px solid var(--c-deep); }
  .mv-go { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .mv-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mv-values li:last-child { grid-column: 1 / -1; }
  .mv-compare, .mv-go { grid-template-columns: 1fr; }
  .mv-word .mv-tag { position: static; margin-bottom: 6px; }
  .mv-top { padding: 40px 20px; }
}