@charset "UTF-8";

/* ==========================================================
   事業・仕事内容ページ固有CSS（is_page('business') でのみ読み込み）
   ページ見出し等、下層ページ共通の部品は guide.css を参照してください。
   ========================================================== */

.businessPage {
  border-top: 1px solid var(--c-border);
}

/* ==========================================================
   COMPONENT: 事業ブロック  .bizSection
   ----------------------------------------------------------
   構造（flexの組み方・幅配分・緑背景の重なり）はここに書いた通りです。
   外枠（border・角丸・padding・overflow:hidden）は guide.css の
   .pageColumn > section が担当します。
   ========================================================== */
.bizSection {
  /* .pageColumn > section の左右padding値、.bizSection__inner の gap値と
     必ず一致させてください（下の::beforeの計算式が前提にしています） */
  --pad: 24px;
  --gap: 32px;
  position: relative;
  z-index: 0;
  margin-bottom: 25px;
}
.bizSection:last-child {
  margin-bottom: 80px;
}

/* 緑背景の正しい幅の導出：
   .bizSection__head の実幅は「.bizSection__inner（=セクション幅 - padding*2）の24%」。
   一方この::beforeは.bizSectionそのもの（padding抜きの全幅）を基準にしか置けないため、
   同じ「24%」でも基準が異なり、そのまま +固定px しても一致しない。
   S=セクション全幅として、緑の必要幅 = padding + head実幅(0.24×(S-2padding)) + gap
                                    = 0.24S + (padding - 0.48×padding + gap)
                                    = 24% + (pad×0.52 + gap)
   になります（pad=24, gap=32 なら 24%+44.48px）。padded/gapを変えたらここも連動するように
   calc()に直接埋め込んでいます。 */
.bizSection--dev::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: calc(24% + var(--pad) * 0.52 + var(--gap));
  height: 100%;
  background: var(--c-primary-d);
}

.bizSection__inner {
  display: flex;
  justify-content: space-between;
  gap: 32px;
}

.bizSection--hr .bizSection__inner {
  justify-content: flex-start;
}

.bizSection__head {
  width: 24%;
}

.bizSection--dev .bizSection__head {
  color: #fff;
}
/* --02 のPC専用の幅指定はここで min-width:901px に囲っておきます。
   そうしないと、SP用リセット（.bizSection__head{width:100%}等）より
   詳細度（クラス2つ）が高いせいでSPでも効いてしまい、都度SP側で
   打ち消す羽目になります。今後 --03 / --04 を足す時もこの型を踏襲してください。 */
@media (min-width: 901px) {
  .bizSection--hr .bizSection__head {
    width: 15%;
  }
  .bizSection--subsidy .bizSection__head {
    width: 45%;
  }
  .bizSection--marketing .bizSection__head {
    width: 27%;
  }
}
.bizSection__head span {
  display: block;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--c-primary-d);
}

.bizSection--dev .bizSection__head span {
  color: rgba(255, 255, 255, .7);
}

.bizSection__head h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.5rem;
  margin-bottom: 16px;
}

.bizSection__head p {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.8;
}

.bizSection--dev .bizSection__head p {
  color: rgba(255, 255, 255, .92);
}

.bizCardList {
  display: flex;
  /* head(24%) + このgap分(32px) + 76%だと合計が100%を超えて縮小がかかり、
     結果としてheadの実幅が24%からズレて緑背景（::before）ともズレます。
     .bizSection__inner の gap:32px 分をあらかじめ差し引いて、
     24% + 32px + calc(76% - 32px) = ちょうど100%になるようにしています */
  width: calc(74% - 32px);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 901px) {
  .bizSection--hr .bizCardList {
    width: calc(60.9% - 32px);
  }
}

.bizCard {
  /* 元は width:20% でしたが、gapを入れると5枚ぴったりに収まらなくなるため、
     「gap込みで5等分」の計算式に変更しています。100%の意味は変わりません。
     カード枚数はセクションごとに異なる（devは5枚、hrは3枚…）ため、
     枚数分の等分計算は各 .bizSection--〈修飾子〉 側で上書きします */
  width: calc((100% - 12px * 4) / 5);
  padding: 20px 0;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  text-align: center;
}

.bizCard h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  min-height: 45px;
  text-align: center;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--c-primary-d);
}

.bizCard svg {
  /* 元は width:100% でしたが、カード幅いっぱいに広がってしまうため、
     アイコンとして意図した固定サイズに変更しています */
  width: 50px;
  height: 50px;
  margin-bottom: 12px;
  color: var(--c-primary);
}

.bizCard p {
  padding: 0 12px;
  text-align: left;
  line-height: 1.6;
  font-size: 1.4rem;
  color: var(--c-muted);
}

/* 02人材事業は3枚構成です。5等分固定の .bizCard 幅をここだけ3等分に上書きします。
   min-width:901pxで囲むのは.bizSection--hr .bizSection__head等と同じ理由です
   （詳細度がSP用リセットより高く、そのままだとSPでも効いてしまうため） */
@media (min-width: 901px) {
  .bizSection--hr .bizCard {
    width: calc((100% - 12px * 2) / 3);
  }
  .bizSection--marketing .bizCard {
    width: calc((100% - 12px * 3) / 4);
  }
}

.bizSection__figure {
  position: absolute;
  top: 0;
  right: 24px;
  bottom: 0;
  margin: auto;
  border-radius: var(--radius);
  width: calc(24% - 32px);  
  height: calc(100% - 70px);
  overflow: hidden;
}
.bizSection__figure img {
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
}
@media (max-width: 900px) {
  .bizSection__figure {
    position: relative;
    right: auto;
    width: 100%;
    margin-top: 32px;
    height: 300px;
  }
}

/* エンジニアとの関わり注記です。カード列の下、同じ.bizSection内に続けて配置します */
.bizSection__note {
  display: flex;
  gap: 24px;
  align-items: stretch;
  margin-top: 32px;
  padding: 0 0 0 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: rgba(243, 246, 243);
  overflow: hidden;
}

@media (min-width: 901px) {
  .bizSection--hr .bizSection__note {
    width: calc(79% - 32px);
  }
}

.bizSection__noteText {
  display: flex;
  flex: 1 1 auto;
  gap: 16px;
  align-items: center;
}

.bizSection__noteText svg {
  /* モニター型アイコンに変更したため、横長(60x28)だと潰れて見えます。
     アイコンの縦横比(256x256相当)に合わせて正方形に戻しています */
  flex: none;
  width: 60px;
  height: 60px;
  color: var(--c-primary);
}

.bizSection__noteText h3 {
  padding-top: 16px;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--c-text);
  margin-bottom: 5px;
}

.bizSection__noteText p {
  padding-bottom: 16px;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--c-muted);
}

.bizSection__notePhoto {
  flex: 0 0 295px;
}

.bizSection__notePhoto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================
   03 補助金申請サポート：「申請サポートの流れ」5ステップ
   ========================================================== */
.bizFlow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  position: relative;
  padding: 1em;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.bizFlow__title {
  position: absolute;
  top: -.8em;
  margin-bottom: 20px;
  padding: 0 1em;
  background-color: #fff;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--c-primary-d);
}
.bizFlow__list {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bizFlow__list li {
  position: relative;
  flex: 1 1 0;
  text-align: center;
  padding: 0 8px;
}
/* ステップ間の矢印です。最後の項目には付けません */
.bizFlow__list li:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  top: 28px;
  right: -6px;
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  color: var(--c-primary);
}
.bizFlow__list svg {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  color: var(--c-primary);
}
.bizFlow__list h3 {
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--c-primary-d);
  margin-bottom: 6px;
}
.bizFlow__list p {
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--c-muted);
}

/* 03 note内の統計バッジ（高い採択率 90%以上） */
.bizSection__noteStat {
  flex: 0 0 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  text-align: center;
}
.bizSection__noteStatLabel {
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--c-text);
}
.bizSection__noteStatValue {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--c-primary-d);
}
.bizSection__noteStatValue span {
  font-size: 1.4rem;
  margin-left: 2px;
}
.bizSection__noteStatCaption {
  font-size: 1.1rem;
  color: var(--c-muted);
}

@media (max-width: 1000px) {
  .bizCardList {
    flex-wrap: wrap;
  }

  .bizCard {
    width: calc((100% - 12px) / 2);
  }
}

@media (max-width: 900px) {

  /* PC用の::before（緑背景）はheadの実幅にpx単位で追随する計算式のため、
     SPでheadが縦積み・全幅になると全く合わなくなります（テキストが背景からはみ出します）。
     さらに::beforeは.bizSection全体の高さ（カード列・note込み）に伸びる設計のため、
     SPでそのまま使うとページ全部が緑になってしまいます。
     SPでは::beforeを無効化し、.bizSection__head自体に背景を持たせる方式に切り替えています。 */
  .bizSection::before {
    display: none;
  }

  .bizSection__inner {
    flex-direction: column;
  }

  .bizSection__head {
    width: 100%;
  }

  /* 色付きの箱にするのは01だけです（02はPC版でも色無しのプレーンな見出しのため、
     SPでも色を付けません） */
  .bizSection--dev .bizSection__head {
    padding: 24px;
    background: var(--c-primary-d);
    border-radius: var(--radius);
  }

  .bizCard {
    padding: 20px;
  }

  .bizCardList {
    width: 100%;
  }

  .bizSection__note {
    width: 100%;
  }

  .bizCard h3 {
    font-size: 1.8rem;
  }

  .bizCard svg {
    width: 70px;
    height: 70px;
  }

  .bizCard p {
    padding: 0 20px;
    font-size: 1.7rem;
  }

  .bizSection__note {
    /* PC版は右側の写真(295px)が余白の役目も兼ねているため、
       note自体には左しかpaddingがありません(0 0 0 16px)。
       SPで写真が下に落ちると、テキストが右端までぴったり付いてしまうため、
       SPでは上下左右均等にpaddingを持たせています */
    flex-direction: column;
    padding: 24px;
    gap: 20px;
  }

  .bizSection__noteText {
    /* note自体がpaddingを持つようになったため、要素側の個別paddingは不要です */
    flex-direction: column-reverse;
    gap: 20px;
  }

  .bizSection__noteText h3 {
    /* .bizCard／pageHeroで決めたSPの文字サイズ基準（見出し1.8rem・本文1.7rem）に合わせています */
    padding-top: 0;
    font-size: 1.8rem;
  }

  .bizSection__noteText p {
    padding-bottom: 0;
    font-size: 1.7rem;
  }

  .bizSection__notePhoto {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
  }

  /* 03のnoteは noteText / noteStat / notePhoto の3つが並ぶため、
     noteStatも .bizSection__note{flex-direction:column} に合わせて
     flex:none にしないと、縦積み時に横幅(180px)がそのまま高さとして
     解釈されてしまいます（01/02で踏んだのと同じ「flex-basisが高さになる」問題です） */
  .bizSection__noteStat {
    flex: none;
    width: 100%;
  }

  /* 申請サポートの流れ：5列横並びは狭すぎるため、SPは縦積みにします。
     以前はicon/h3/pをliの直下で横並びflexにしていましたが、h3とpがそれぞれ
     別々の狭い列に押し込まれて折り返してしまっていました（「ヒアリング」の
     5文字すら2行に割れる状態でした）。h3+pを1つのdivにまとめ、アイコンは
     左端に固定したまま、見出し・説明文はその残り幅いっぱいの行として使います。 */

  .bizFlow {
    padding: 2em 1em;
  }
  .bizFlow__title {
    margin-bottom: 16px;
  }
  .bizFlow__list {
    flex-direction: column;
    gap: 20px;
  }
  .bizFlow__list li {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    padding: 0;
  }
  .bizFlow__list li > div {
    flex: 1 1 auto;
    min-width: 0;
  }
  .bizFlow__list li:not(:last-child)::after {
    display: none;
  }
  .bizFlow__list svg {
    flex: none;
    margin-bottom: 0;
  }
  .bizFlow__list h3 {
    font-size: 1.8rem;
    margin-bottom: 4px;
  }
  .bizFlow__list p {
    font-size: 1.7rem;
  }
}

@media (max-width: 600px) {
  .bizCard {
    width: 100%;
  }
}