@charset "utf-8";
/* ===================================================================
   mihoko-add.css
   2026年 追加分（公約セクション／LINE導線）
   version: 20260925-6  ※HTMLの読み込みは mihoko-add.css?20260925
   既存の main.css を書き換えないよう、すべて mh- 接頭辞で独立させています。
   このファイルを assets/css/ に置き、main.css の後に読み込んでください。
   =================================================================== */

:root {
  --mh-purple:     #9b6fa8;
  /* パンフのSVGから取得した実際のブランドカラー */
  --mh-inclusion:  #ef858c;
  --mh-incubation: #f3994f;
  --mh-innovation: #3eb370;
  /* 白抜き文字の背景や本文に使う濃い版（上の3色は白地では明るすぎて読みにくいため） */
  --mh-inclusion-d:  #c9495a;
  --mh-incubation-d: #c06a10;
  --mh-innovation-d: #278351;
  --mh-line:       #06c755;
  --mh-text:       #4a4a4a;
  --mh-border:     #e6e6e6;
}

/* --- 基本理念 ---------------------------------------------------- */
.mh-philosophy {
  background: #f7f3f9;
  border-left: 5px solid var(--mh-purple);
  padding: 1.5em 1.5em 1.2em;
  margin: 0 0 2em;
}
.mh-philosophy h3 {
  color: var(--mh-purple);
  font-size: 1.1em;
  margin: 0 0 .6em;
}
.mh-philosophy p { margin: 0; line-height: 1.9; }

.mh-lead { line-height: 2; margin: 0 0 2.5em; }

.mh-h3 {
  border-bottom: 2px solid var(--mh-purple);
  padding-bottom: .4em;
  margin: 2.5em 0 1em;
}

/* --- 目指すまち --------------------------------------------------- */
.mh-goals { counter-reset: mh-goal; list-style: none; padding: 0; margin: 0 0 1em; }
.mh-goals li {
  counter-increment: mh-goal;
  position: relative;
  padding: .7em 0 .7em 2.6em;
  border-bottom: 1px dashed var(--mh-border);
  line-height: 1.8;
}
.mh-goals li::before {
  content: counter(mh-goal);
  position: absolute; left: 0; top: .7em;
  width: 1.8em; height: 1.8em; line-height: 1.8em;
  text-align: center; border-radius: 50%;
  background: var(--mh-purple); color: #fff;
  font-size: .85em; font-weight: bold;
}

/* --- 3本柱 -------------------------------------------------------- */
.mh-pillar {
  border: 1px solid var(--mh-border);
  border-top: 5px solid var(--mh-purple);
  border-radius: 4px;
  padding: 1.5em;
  margin: 0 0 1.8em;
  background: #fff;
}
.mh-pillar h4 { margin: 0 0 .9em; text-align: center; }
.mh-pillar__icon { display: block; width: 150px; height: auto; margin: 0 auto; }
.mh-pillar__desc {
  font-size: .95em; line-height: 1.9;
  background: #fafafa; padding: 1em; margin: 0 0 1.2em;
}
.mh-pillar--inclusion  { border-top-color: var(--mh-inclusion); }
.mh-pillar--incubation { border-top-color: var(--mh-incubation); }
.mh-pillar--innovation { border-top-color: var(--mh-innovation); }

.mh-list { list-style: none; padding: 0; margin: 0; }
.mh-list li {
  position: relative;
  padding: .55em 0 .55em 1.4em;
  border-bottom: 1px dashed var(--mh-border);
  line-height: 1.8;
}
.mh-list li:last-child { border-bottom: none; }
.mh-list li::before {
  content: ""; position: absolute; left: 0; top: 1.1em;
  width: .6em; height: .6em; border-radius: 50%;
  background: currentColor; opacity: .5;
}
.mh-note { font-size: .82em; color: #777; line-height: 1.7; margin: 1em 0 0; }
.mh-note-mark { color: var(--mh-incubation); }

/* --- 画面には出さず、読み上げ・検索エンジンには伝えるテキスト ---------- */
.mh-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- トップページ：公約セクション全体 -------------------------------- */
#pledge {
  background-color: #fdfcfe;   /* 無地（白に近い色） */
  color: #3f3a43;
}
#pledge header.major h2 { color: #5f4a68; }
#pledge header.major p  { color: #4a4550; }

/* --- トップページ：公約リード文 ------------------------------------ */
.mh-pledge-lead {
  text-align: center; line-height: 2; margin: 0 0 2.2em;
  font-size: 1.02em; color: #3f3a43;
}
.mh-br-pc { display: inline; }

/* --- トップページ：3本柱カード -------------------------------------- */
.mh-cards {
  list-style: none; padding: 0; margin: 0 0 2.2em;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4em;
  align-items: stretch;      /* 3枚の高さを揃える */
  text-align: left;
}
/* セレクタを .mh-cards > .mh-card と具体的にしているのは、テンプレート側の
   main.css にある li 向けの指定に負けて display:flex が外れないようにするため */
.mh-cards > .mh-card {
  background: #fff; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--mh-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  display: flex; flex-direction: column;
  height: 100%; margin: 0; padding: 0;
}
.mh-card::before { content: ""; display: block; height: 6px; background: var(--mh-purple); }
.mh-card--inclusion::before  { background: var(--mh-inclusion); }
.mh-card--incubation::before { background: var(--mh-incubation); }
.mh-card--innovation::before { background: var(--mh-innovation); }

.mh-card__head {
  position: relative;
  padding: 1.2em 1.2em .5em;
  text-align: center;
}
.mh-card__icon {
  display: block; width: 168px; max-width: 62%; height: auto;
  aspect-ratio: 224.22 / 208.11;   /* 読み込み前後で高さが変わらないようにする */
  margin: 0 auto;
}
.mh-card__num {
  position: absolute; top: .6em; left: .8em;
}
.mh-card__num {
  font-size: 1.7em; font-weight: bold; line-height: 1;
  opacity: .3; letter-spacing: -.02em;
}
.mh-card--inclusion  .mh-card__num { color: var(--mh-inclusion); }
.mh-card--incubation .mh-card__num { color: var(--mh-incubation); }
.mh-card--innovation .mh-card__num { color: var(--mh-innovation); }

.mh-cards > .mh-card > .mh-card__desc {
  font-size: .88em; line-height: 1.85; color: var(--mh-text);
  margin: 0; padding: 0 1.2em 1.2em;
  /* 説明文の行数が柱ごとに違っても、下の「主な取り組み」の帯が3枚で
     横一線に並ぶよう、余った高さをこの領域が吸収する */
  flex: 1 1 auto;
  display: flex; align-items: flex-start;
}

/* ここが「主な取り組み」の帯を3枚で揃える本体。
   上の flex だけではカード内に余りがある場合しか効かず、箇条書きが長いカードは
   説明文が伸びずに帯が上にずれる。subgrid はカード内の各行を3枚で共通の行として
   扱うため、箇条書きの長さに関係なく必ず揃う。
   対応：Chrome 117以降 / Safari 16以降 / Firefox 71以降。
   非対応の古いブラウザでは1行分ずれる場合があるが、レイアウトは崩れない */
@supports (grid-template-rows: subgrid) {
  .mh-cards { grid-template-rows: auto auto 1fr auto auto auto; }
  .mh-cards > .mh-card {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
  }
  .mh-cards > .mh-card > .mh-card__list { align-self: start; }
  .mh-cards > .mh-card > .mh-card__more { align-self: end; }
}
.mh-card__label {
  font-size: .78em; font-weight: bold; letter-spacing: .05em;
  margin: 0; padding: .45em 1.2em; color: #fff;
}
.mh-card--inclusion  .mh-card__label { background: var(--mh-inclusion-d); }
.mh-card--incubation .mh-card__label { background: var(--mh-incubation-d); }
.mh-card--innovation .mh-card__label { background: var(--mh-innovation-d); }

.mh-card__list {
  list-style: none; margin: 0; padding: .8em 1.2em 0;
}
.mh-card__list li {
  position: relative; padding: .5em 0 .5em 1.2em;
  font-size: .88em; line-height: 1.75;
  border-bottom: 1px dashed var(--mh-border);
}
.mh-card__list li:last-child { border-bottom: none; }
.mh-card__list li::before {
  content: ""; position: absolute; left: 0; top: 1em;
  width: .5em; height: .5em; border-radius: 50%; background: currentColor; opacity: .45;
}
.mh-card__more { margin: 0; padding: .9em 1.2em 1.2em; text-align: right; }
.mh-card__more a {
  font-size: .85em; font-weight: bold; text-decoration: none !important;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.mh-card--inclusion  .mh-card__more a { color: var(--mh-inclusion-d); }
.mh-card--incubation .mh-card__more a { color: var(--mh-incubation-d); }
.mh-card--innovation .mh-card__more a { color: var(--mh-innovation-d); }
.mh-card__more a::after { content: " ›"; }

.mh-more { text-align: center; margin: 0; }
.mh-more-btn {
  display: inline-block; padding: 1em 2.4em;
  background: var(--mh-purple); color: #fff !important;
  border-radius: 4px; text-decoration: none !important;
  font-weight: bold; line-height: 1.5;
}
.mh-more-btn:hover { opacity: .85; }

/* --- ハクセルレポート一覧の背景グラデーション ------------------------ */
/* main.css の .features li:nth-child() は21件までしか定義がなく、22件目以降が
   透明のままになる（さらに9件目で濃度が一段戻る書き間違いがある）。
   ここで24件分を等間隔に振り直す。セレクタを .wrapper.report_style から
   始めているのは、読み込み順に関係なく main.css より優先させるため。
   件数を増やしたときは N を変えて作り直す（現在 N=24、最大濃度 0.70）。 */
.wrapper.report_style .features li:nth-child(1) { background-color: rgba(62, 255, 174, 0.000); }
.wrapper.report_style .features li:nth-child(2) { background-color: rgba(62, 255, 174, 0.030); }
.wrapper.report_style .features li:nth-child(3) { background-color: rgba(62, 255, 174, 0.061); }
.wrapper.report_style .features li:nth-child(4) { background-color: rgba(62, 255, 174, 0.091); }
.wrapper.report_style .features li:nth-child(5) { background-color: rgba(62, 255, 174, 0.122); }
.wrapper.report_style .features li:nth-child(6) { background-color: rgba(62, 255, 174, 0.152); }
.wrapper.report_style .features li:nth-child(7) { background-color: rgba(62, 255, 174, 0.183); }
.wrapper.report_style .features li:nth-child(8) { background-color: rgba(62, 255, 174, 0.213); }
.wrapper.report_style .features li:nth-child(9) { background-color: rgba(62, 255, 174, 0.243); }
.wrapper.report_style .features li:nth-child(10) { background-color: rgba(62, 255, 174, 0.274); }
.wrapper.report_style .features li:nth-child(11) { background-color: rgba(62, 255, 174, 0.304); }
.wrapper.report_style .features li:nth-child(12) { background-color: rgba(62, 255, 174, 0.335); }
.wrapper.report_style .features li:nth-child(13) { background-color: rgba(62, 255, 174, 0.365); }
.wrapper.report_style .features li:nth-child(14) { background-color: rgba(62, 255, 174, 0.396); }
.wrapper.report_style .features li:nth-child(15) { background-color: rgba(62, 255, 174, 0.426); }
.wrapper.report_style .features li:nth-child(16) { background-color: rgba(62, 255, 174, 0.457); }
.wrapper.report_style .features li:nth-child(17) { background-color: rgba(62, 255, 174, 0.487); }
.wrapper.report_style .features li:nth-child(18) { background-color: rgba(62, 255, 174, 0.517); }
.wrapper.report_style .features li:nth-child(19) { background-color: rgba(62, 255, 174, 0.548); }
.wrapper.report_style .features li:nth-child(20) { background-color: rgba(62, 255, 174, 0.578); }
.wrapper.report_style .features li:nth-child(21) { background-color: rgba(62, 255, 174, 0.609); }
.wrapper.report_style .features li:nth-child(22) { background-color: rgba(62, 255, 174, 0.639); }
.wrapper.report_style .features li:nth-child(23) { background-color: rgba(62, 255, 174, 0.670); }
.wrapper.report_style .features li:nth-child(24) { background-color: rgba(62, 255, 174, 0.700); }

/* 25件目以降を追加した場合に透明にならないための保険 */
.wrapper.report_style .features li:nth-child(n+25) { background-color: rgba(62, 255, 174, 0.700); }

/* --- プライバシーポリシーの改定日 ---------------------------------- */
.mh-policy-date { text-align: right; font-size: .85em; color: #777; margin-top: 2.5em; }

/* --- LINE 導線 ---------------------------------------------------- */
.mh-line-box {
  text-align: center; margin: 2.5em 0 0;
  padding: 1.6em 1.2em; background: #f4faf5; border-radius: 6px;
}
.mh-line-box__text { margin: 0 0 1em; line-height: 1.7; }
.mh-line-box__btn  { margin: 0; }
.mh-line-btn {
  display: inline-block; width: 100%; max-width: 420px;
  padding: 1em 1.2em; background: var(--mh-line);
  color: #fff !important; border-radius: 6px;
  text-decoration: none !important; font-weight: bold;
  font-size: 1.05em; line-height: 1.5;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.mh-line-btn:hover { opacity: .85; }
.mh-line-note { font-size: .82em; color: #777; margin: .9em 0 0; line-height: 1.7; }

/* --- スマートフォン ------------------------------------------------ */
@media screen and (max-width: 736px) {
  /* 1列表示では横に並ばないので、subgrid は解除して通常の縦積みに戻す */
  .mh-cards { grid-template-columns: 1fr; grid-template-rows: none; gap: 1.1em; }
  .mh-cards > .mh-card { display: flex; grid-row: auto; }
  .mh-br-pc { display: none; }
  .mh-pledge-lead { text-align: left; font-size: .95em; }
  .mh-pillar { padding: 1.2em; }
  .mh-card__icon { width: 180px; max-width: 70%; }
  .mh-card__desc { font-size: .92em; }
  .mh-card__list li { font-size: .92em; }
  .mh-more-btn { display: block; width: 100%; padding: 1em .8em; }
  .mh-line-btn { font-size: 1em; padding: 1.1em .8em; }
}

/* --- プライバシーポリシー ------------------------------------------- */
.mh-policy-date {
  margin-top: 2.5em; padding-top: 1em;
  border-top: 1px solid var(--mh-border);
  font-size: .88em; color: #777;
}