@charset "utf-8";

/* =========================================
   HES ZERO PAGE
========================================= */
.heszero-page {
  width: 100%;
  background: #ffffff;
  color: #222;
  box-sizing: border-box;
}

/* =========================================
   TOP IMAGE
========================================= */
.heszero-top-placeholder {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: #f7f8f9;
  border-bottom: 1px solid #d9dfe5;
  box-sizing: border-box;
}

/* 画像（img）の設定：横幅いっぱいにして縦横比を完全に自動維持 */
.heszero-top-placeholder img {
  margin-top: 10px;
  position: static;
  transform: none;
  width: 100% !important;
  height: auto !important;
  display: block;
}
/* =========================================
   PAGE NAV
========================================= */

.heszero-nav {
  width: 100%;
  background: #01203f;
}

.heszero-nav-inner {
  width: 90vw;
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
}

.heszero-nav a {
  flex: 1;
  padding: 10px 6px;
  color: #ffffff;
  text-decoration: none;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  box-sizing: border-box;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.heszero-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}



/* ========================================
   SERVICE INFORMATION
========================================= */
/* 全体エリア */
.heszero-news {
  width: 100%;
  box-sizing: border-box;
  padding: 0px 20px 6px;
  background: #edf0f2;
}

/* 1枚の白いカード */
.heszero-news-inner {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 26px;
  box-sizing: border-box;
  background: #ffffff;
  margin-bottom: 30px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

/* 左右の情報エリア */
.heszero-news-block {
  min-width: 0;
  box-sizing: border-box;
}

/* 左側 */
.heszero-news-block:first-child {
  padding-right: 26px;
}

/* 右側：中央の縦線 */
.heszero-news-block + .heszero-news-block {
  padding-left: 26px;
  border-left: 1px solid #e0e5ea;
}

/* 見出し */
.heszero-news-title {
  margin: 0;
  color: #092747;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* グレー＋オレンジのライン */
.heszero-news-line {
  position: relative;
  width: 100%;
  height: 3px;
  margin: 3px 0 15px;
  background: #d8dce1;
}

.heszero-news-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 100%;
  background: #ffa32b;
}

/* 左側：正常稼働中 */
.heszero-news-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #000;
  font-size: 13px;
  line-height: 1.6;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* 緑の丸 ステータスの色、正常＝緑 */
.heszero-news-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #159365;
}

/* 右側：計画メンテナンス情報 */
.heszero-news-text {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #092747;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* 右側のオレンジの丸 */
.heszero-news-text::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #e5a03b;
}

/* =========================================
   SECTION
========================================= */
.heszero-sections {
  width: 90vw;
  max-width: 1500px;
  margin: 0 auto;
}

/* 各sectionは親いっぱい */
.heszero-section {
  width: 100%;
  margin: 0;
  padding: 0 0 80px;
  background: #eef0f2;
  box-sizing: border-box;
}

.heszero-section {
  scroll-margin-top: 80px;
}
#overview {
  scroll-margin-top: -40px;
}

.heszero-contents-box {
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
}

.heszero-contents {
  width: 100%;
  margin: 0 auto;
}

.heszero-inner {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.heszero-top-placeholder span {
  color: #aeb6bf;
  font-size: 16px;
  letter-spacing: 0.12em;
}

/* =========================================
   COMMON SECTION
========================================= */
.heszero-contents-box {
  width: 100%;
  padding: 0 64px;
  box-sizing: border-box;
}

.heszero-contents {
  width: 100%;
  max-width: 1792px;
  margin: 0 auto;
}

.heszero-inner {
  width: 100%;
  padding: 0 100px;
  box-sizing: border-box;
}

.heszero-section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 80px;
  background: #eef0f2;
  box-sizing: border-box;
}

/* ラベルはグレー幅いっぱい */
.heszero-section-label {
  width: 100%;
  padding: 20px 0;
  color:#FBB03B;
  text-align: center;
  /* background: linear-gradient(
    135deg,
    #f7fbfe 0%,
    #FBB03B 50%,
    #f7fbfe 100%
  ); */
  box-sizing: border-box;
}

/* 共通タイトル */
.heszero-title {
  margin: 0 0 20px;
  color: #FBB03B;
  font-size: 31px;
  font-weight: 700;
    line-height: 1.8;
  letter-spacing: 0.02em;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* 中央寄せタイトル用 */
.heszero-title--center {
  text-align: center;
}

/* 共通リード文 */
.heszero-lead {
  width: 100%;
  margin: 0 0 30px;
  font-size: 18px;
    line-height: 1.8;
  letter-spacing: 0.04em;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* ナビはコンテンツ幅 */
/* .heszero-nav {
  width: 82%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
} */

/* セクション背景は画面いっぱい */
.heszero-section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 80px;
  background: #eef0f2;
  box-sizing: border-box;
}

/* =========================================
   01 HES 
========================================= */
/* SUB TITLE */

.heszero-background {
  padding-top: 23px;
}

.heszero-title--overview {
  margin-bottom: 2px;
}

.heszero-summary {
  max-width: 1050px;
  margin: 0 auto 30px;
  padding: 0;
  color: #222;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* BEFORE / AFTER */
.heszero-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-top: 14px;
}

.heszero-comparison-card {
  border: 1px solid #EEF0F2;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.heszero-comparison-card h2 {
  margin: 0;
  padding: 14px 25px 0;
  color: #000;
  font-size: 25px;
  font-weight: 700;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.heszero-image-placeholder {
  background: #ffffff;
  padding: 10px;
  border-radius: 8px;
  box-sizing: border-box;
}

/* プレースホルダー内の画像設定 */
.heszero-image-placeholder img {
  display: block;
  width: 100%;
  height: auto;
  /* aspect-ratio: 16 / 10;
  /* object-fit: cover; */
}

/* =========================================
   SCS
========================================= */
.heszero-scs {
  margin-top: 32px;
  padding: 22px 26px;
  gap: 26px;
  align-items: center;
  border: 1px solid #FBB03B;
  /* border-radius: 4px; */
  /* background: #ffffff;
  box-sizing: border-box; */ 
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #FBB03B;
  /* padding: 28px 180px 28px 28px; */
  box-sizing: border-box;
}

.scs-corner-img {
  position: absolute;
  top: 0;
  right: 0;
  width: 190px;
  height: auto;
  display: block;
  pointer-events: none;
}

.heszero-scs-text h3 {
  margin: 0 0 12px;
  color: #222;
  font-size: 18px;
  font-weight: 700;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.heszero-scs-text p {
  margin: 4px 0;
  color: #333;
  font-size: 15px;
    line-height: 1.8;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* =========================================
   SCS ITEMS
========================================= */
.heszero-scs-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.heszero-scs-item {
  min-width: 0;
  text-align: center;
  padding: 10px 6px;
  border-left: 1px solid #e4e9ed;
}

.heszero-scs-icon {
  margin-bottom: 5px;
  font-size: 24px;
}

.heszero-scs-item strong {
  display: block;
  color: #253d58;
  font-size: 14px;
    line-height: 1.8;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.heszero-scs-item span {
  display: block;
  margin-top: 4px;
  color: #596b7d;
  font-size: 10px;
    line-height: 1.8;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* =========================================
   02 BACKGROUND
========================================= */
/* =========================================
   BACKGROUND 4 FACTORS
========================================= */

.background-factors {
  width: 100%;
  max-width: 1400px;
  margin: 45px auto 45px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 42px;
  box-sizing: border-box;
}

.background-factor {
  min-width: 0;
  text-align: left;
  box-sizing: border-box;
}

/* =========================================
   ICON
========================================= */

.background-factor-icon {
  width: 230px;
  height: 230px;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f8f8f8;
  box-sizing: border-box;
}

.background-factor-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =========================================
   TITLE
========================================= */

.background-factor-title {
  /* min-height: 58px; */
  margin: 0 0 18px;
  color: #01203F;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  font-family:
    "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro",
    "メイリオ",
    Meiryo,
    Osaka,
    "ＭＳ Ｐゴシック",
    "MS PGothic",
    sans-serif;
}

/* =========================================
   TEXT
========================================= */

.background-factor-text {
  margin: 0;
  color: #222222;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.02em;

  font-family:
    "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro",
    "メイリオ",
    Meiryo,
    Osaka,
    "ＭＳ Ｐゴシック",
    "MS PGothic",
    sans-serif;
}

/* このままでは */
.background-issue-title {
  width: 100%;
  margin: 100px 0 18px;
  text-align: center;
  color: #111111;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  box-sizing: border-box;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.background-issues {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 18px;
  border: 1px solid #EEF0F2;
  /* border-radius: 8px; */
  background: #f7fbff;
  overflow: hidden;
}

.background-issue-card {
  min-height: 245px;
  padding: 18px 20px 24px;
  border-right: 1px solid #EEF0F2;
  background: rgba(255, 255, 255, 0.72);
  box-sizing: border-box;
}

.background-issue-card:last-child {
  border-right: none;
}

/* アイコン */
.background-issue-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1B2B50;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
}

.background-issue-icon img {
  width: 100% !important;   /* 親の42pxいっぱいに縮小 */
  height: 100% !important;  /* 親の42pxいっぱいに縮小 */
  object-fit: contain;      /* 縦横比を維持して収める */
  display: block;
}

/* タイトル */
.background-issue-card h3 {
  margin: 0 0 10px;
  color: #01203F;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* 説明 */
.background-issue-card p {
  margin: 0;
  color: #333333;
  font-size: 15px;
    line-height: 1.8;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


/* =========================================
   03 ISSUE
========================================= */
.issue-solution-head {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    70px
    minmax(0, 1fr);
  align-items: center;
  margin-top: 18px;
  margin-bottom: 6px;
}

.issue-head-title,
.solution-head-title {
  padding: 10px 16px;
  color: #ffffff;
  background: #01203F;
  font-size: 18px;
  font-weight: 700;
    line-height: 1.8;
  box-sizing: border-box;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.issue-head-title {
  grid-column: 1;
}

.solution-head-title {
  grid-column: 3;
}

/* =========================================
   ISSUE / SOLUTION ROW
========================================= */
.issue-solution-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    70px
    minmax(0, 1fr);
  align-items: stretch;
  margin-bottom: 8px;
}

/* =========================================
   CARDS
========================================= */
.issue-card,
.solution-card {
  min-height: 220px;
  padding: 18px 20px 22px;
  background: #ffffff;
  box-sizing: border-box;
}

/* カードタイトル */
.issue-card h3,
.solution-card h3 {
  margin: 0 0 16px;
  color: #111111;
  font-size: 15px;
  font-weight: 700;
    line-height: 1.8;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* =========================================
   ISSUE LIST
========================================= */
.issue-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.issue-card li {
  position: relative;
  margin-bottom: 7px;
  padding-left: 19px;
  color: #333333;
  font-size: 15px;
  line-height: 1.8;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.issue-card li:last-child {
  margin-bottom: 0;
}

/* グレーのチェックマーク */
.issue-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #91989e;
  color: #ffffff;
  font-size: 8px;
  font-weight: 700;
    line-height: 1.8;
}

/* =========================================
   SOLUTION
========================================= */
.solution-card h3 {
  position: relative;
  padding-left: 24px;
}

/* 緑チェック */
.solution-card h3::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #FBB03B;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.8;
}

.solution-card p {
  margin: 0;
  color: #333333;
  font-size: 15px;
  line-height: 1.8;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* =========================================
   CENTER ARROW
========================================= */
.issue-solution-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #01203F;
  font-size: 30px;
  font-weight: 300;
  line-height: 1.8;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* =========================================
   04 FEATURE
========================================= */

/* =========================================
   CARD
========================================= */
.feature-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  margin-top: 30px;
}

.feature-card {
  display: grid;
  grid-row: span 4;           /* カテゴリ・見出し・本文・詳細ボックスの4段分 */
  grid-template-rows: subgrid; /* 親グリッドと行の高さを自動同期 */
  padding: 28px 26px 30px;
  background: #fff;
  border: 1px solid #EEF0F2;
  box-sizing: border-box;
}

/* カテゴリ */
.feature-card-category {
  position: relative;
  margin: 0 0 0px;
  padding: 14px 20px 14px 34px;
  color: #000000;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.feature-card-category::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 5px;
  height: 26px;
  background: #FBB03B;
  border-radius: 3px;
  transform: translateY(-50%);
}

/* メイン見出し */
.feature-card-heading {
  margin: 0 0 0px;
  color: #111111;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* 本文 */
.feature-card-text {
  margin: 0 0 0px;
  color: #333333;
  font-size: 15px;
  line-height: 1.8;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* =========================================
   DETAIL BOX
========================================= */
.feature-detail-box {
  padding: 16px 16px 18px;
  background: #E6EBF1;
  box-sizing: border-box;
  height: 100%;
}

.feature-detail-list {
  margin: 0;
}

.feature-detail-item {
  margin-bottom: 20px;
}

.feature-detail-item:last-child {
  margin-bottom: 0;
}

/* 黒バッジ（重複プロパティを1本化） */
.feature-detail-item dt {
  display: inline-block;
  margin: 0 0 6px;
  padding: 6px 14px;
  background: #01203F;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  height: auto;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
} 

.feature-detail-item dd {
  margin: 0;
  color: #333333;
  font-size: 12px;
  line-height: 1.8;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* =========================================
   PRODUCTS
========================================= */
/* .feature-products {
  margin-top: 25px;
  color: #222222;
  font-size: 11px;
    line-height: 1.8;: 1.7;
}

.feature-products-title {
  margin: 0 0 4px;
  font-weight: 700;
}

.feature-products ul {
  margin: 0;
  padding-left: 17px;
}

.feature-products li {
  margin-bottom: 2px;
} */

/* =========================================
   05 FLOW
========================================= */
/* =========================================
   STEP AREA
========================================= */
.flow-steps {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    34px
    minmax(0, 1fr)
    34px
    minmax(0, 1fr)
    34px
    minmax(0, 1fr);
  align-items: stretch;
}

/* =========================================
   CARD
========================================= */
.flow-card {
  position: relative;
  /* min-height: 360px; */
  padding: 38px 20px 20px;
  text-align: center;
  border: 1px solid #EEF0F2;
  /* border-radius: 6px; */
  background: #ffffff;
  box-shadow:
    0 2px 8px rgba(18, 65, 100, 0.05);
  box-sizing: border-box;
}

/* =========================================
   NUMBER
========================================= */
.flow-number {
  position: absolute;
  top: -18px;
  left: 50%;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #FBB03B;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* =========================================
   CARD TITLE
========================================= */
.flow-card-title {
  margin: 6px 0 12px;
  color: #01203F;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* =========================================
   CARD TEXT
========================================= */
.flow-card-text {
  margin: 0;
  /* min-height: 86px; */
  color: #435d79;
  font-size: 15px;
  line-height: 1.8;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* =========================================
   IMAGE AREA
========================================= */
.flow-image-placeholder {
  width: 100%;
  height: 145px;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fbfd;
  box-sizing: border-box;
}

/* 後で画像を入れる場合 */
.flow-image-placeholder img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =========================================
   ARROW
========================================= */
.flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FBB03B;
  font-size: 46px;
  font-weight: 300;
  line-height: 1.8;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


/* =========================================
   06 COURSE
========================================= */

/* =========================================
   SMALL START
========================================= */
.course-smallstart {
  margin: 0 0 10px;
  text-align: center;
  color: #111111;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* =========================================
   TABLE
========================================= */
.course-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.course-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #ffffff;
  font-size: 13px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.course-table th,
.course-table td {
  padding: 9px 12px;
  font-size: 15px;
  border: 1px solid #EEF0F2;
  text-align: left;
  vertical-align: middle;
  line-height: 1.8;
  box-sizing: border-box;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.course-table thead th {
  color: #ffffff;
  background: #01203F;
  font-size: 15px;
  font-weight: 500;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* 列幅 */
.course-table th:nth-child(1),
.course-table td:nth-child(1) {
  width: 25%;
}

.course-table th:nth-child(2),
.course-table td:nth-child(2) {
  width: 55%;
}

.course-table th:nth-child(3),
.course-table td:nth-child(3) {
  width: 20%;
}

/* =========================================
   BADGE
========================================= */
.course-badge {
  display: inline-block;
  min-width: 72px;
  padding: 3px 8px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.8;
  border-radius: 3px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.course-badge.standard {
  color: #01203F;
  background: #e6f3fc;
}

.course-badge.option {
  color: #9b5a00;
  background: #fff2dc;
}

/* 有償オプション */
.course-options {
  margin-top: 24px;
  padding: 24px 28px;
  border: 1px solid #D9E0E6;
  background: #F7F9FB;
}

.course-options-title {
  margin: 0 0 12px;
  color: #01203F;
  font-size: 16px;
  font-weight: 600;
}

.course-options-text {
  margin: 0;
  color: #222222;
  font-size: 15px;
  line-height: 1.9;
}

.support-note {
  display: block;
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

/* =========================================
   NOTE
========================================= */

.course-note {
  margin: 16px 0 0;
  color: #333333;
  font-size: 15px;
  line-height: 1.8;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.price-contact {
  margin-top: 48px;
  padding: 36px 48px 40px;
  background: #01203F;
  color: #fff;
  box-sizing: border-box;
}

.price-contact-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.price-contact-en {
  margin: 0 0 18px;
  color: #FBB03B;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.price-contact-title {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.price-contact-line {
  width: 100%;
  height: 1px;
  margin: 22px 0 24px;
  background: rgba(255,255,255,.65);
}

/* 下段 */
.price-contact-body {
  display: block;
}

.price-contact-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.price-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.price-contact-label {
  min-width: 48px;
  color: #fff;
  font-size: 13px;
  /* font-weight: 700; */
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.price-contact-value {
  color: #fff;
  font-size: 13px;
  /* font-weight: 700; */
  text-decoration: none;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.price-contact-value:hover {
  text-decoration: underline;
}

.price-contact-note {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
}

/* ボタン：初期オレンジ */
.price-contact-form-btn {
  flex-shrink: 0;
  min-width: 280px;
  padding: 18px 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background: #FBB03B;
  border: 1px solid #FBB03B;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.25s ease;
}

/* hover：白反転 */
.price-contact-form-btn:hover {
  background: #ffffff;
  color: #01203F;
  border-color: #ffffff;
  transform: translateY(-2px);
}

.price-contact-form-btn span {
  font-size: 12px;
  line-height: 1;
}

/* =========================================
   TABLET
========================================= */
@media screen and (max-width: 1024px) {
  /* .heszero-nav,
  .heszero-section {
    width: 88%;
    max-width: 900px;
  } */

  .heszero-inner {
    padding: 0 40px;
  }

  .heszero-title {
    font-size: 30px;
  }

  .heszero-lead {
    font-size: 16px;
  }


  .heszero-summary {
    font-size: 16px;
  }


  /* .heszero-nav a {
    padding: 10px 14px;
    font-size: 14px;
  } */

  /* .heszero-image-placeholder {
    height: 217px;
  } */


  .background-factors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 45px 40px;
    max-width: 800px;
  }

  .background-factor-icon {
    width: 170px;
    height: 170px;
  }

  .background-factor-title {
    min-height: auto;
    font-size: 18px;
  }

  .background-factor-text {
    font-size: 14px;
  }
  .background-factor-circle {
    width: 100%;
    height: 100%;
  }

  .background-factor-content {
    width: 72%;
  }

  .background-factor-content h3 {
    font-size: 18px;
  }

  .background-factor-content p {
    font-size: 13px;
  }

  .background-issues {
    grid-template-columns: repeat(2, 1fr);
  }

  .background-issue-card {
    border-bottom: 1px solid #EEF0F2;
  }

  .issue-solution-head,
  .issue-solution-row {
    grid-template-columns:
      minmax(0, 1fr)
      50px
      minmax(0, 1fr);
  }

  .issue-solution-arrow {
    font-size: 44px;
  }

  .feature-card-space {
    height: 80px;
  }

  .feature-card-heading {
    font-size: 18px;
  }

  /* 黒いバッジの文字被り防止 */
  .feature-detail-item dt {
    height: auto !important;
    line-height: 1.4 !important;
    padding: 6px 14px;
    font-size: 12px;
  }

/* 中身のステップ一覧 */
.flow-steps {
  width: 100% !important;
}

/* 3. 各カードの幅を揃える */
.flow-card {
  width: 100% !important;
  box-sizing: border-box !important;
}
  .price-contact {
    padding: 32px;
  }

  .price-contact-item {
    padding: 24px 20px 4px;
  }

  .price-contact-value {
    font-size: 24px;
  }
}

/* =========================================
   MOBILE
========================================= */
@media screen and (max-width: 768px) {
  .heszero-nav-inner a {
    font-size: 11px;        
    /* padding: 8px 12px;      
    display: inline-block;  */
  }

  .nav-hide-sp {
    display: none;
  }

  .heszero-contents-box {
    padding: 0 16px;
  }
  .heszero-status-wrap {
    padding: 20px 12px 0;
  }

  .heszero-status--navy {
    width: 100%;
    min-height: auto;
    padding: 16px;

    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .heszero-status-badge {
    font-size: 13px;
    gap: 8px;
  }

  .heszero-status-badge-dot {
    width: 8px;
    height: 8px;
  }

  .heszero-status-text {
    padding-left: 0;
    border-left: none;
    font-size: 13px;
    line-height: 1.6;
  }

  .heszero-inner {
    padding: 0 22px;
  }

  .heszero-title {
    font-size: 30px;
    line-height: 1.4;
  }

  .heszero-summary {
    font-size: 14px;
    line-height: 1.6;
  }

  .heszero-lead {
    font-size: 17px;
    line-height: 1.7;
    letter-spacing: 0.02em;
  }

  .heszero-background {
    width: 100%;
    padding: 0px 18px 55px;
  }

  .background-title {
    font-size: 26px;
  }

  .background-issue-title {
    font-size: 20px;
  }

  .background-lead {
    font-size: 14px;
    line-height: 1.85;
  }

  .background-factors {
    grid-template-columns: 1fr;
    gap: 42px;
    margin: 40px auto 35px;
  }

  .background-factor {
    max-width: 420px;
    margin: 0 auto;
  }

  .background-factor-icon {
    width: 150px;
    height: 150px;
    margin-bottom: 22px;
  }

  .background-factor-title {
    margin-bottom: 14px;
    font-size: 17px;
  }

  .background-factor-line {
    margin-bottom: 16px;
  }

  .background-factor-text {
    font-size: 13px;
    line-height: 1.8;
  }

  .background-factor-content h3 {
    font-size: 17px;
  }

  .background-factor-content p {
    font-size: 12px;
  }

  .background-issues {
    grid-template-columns: 1fr;
  }

  .background-issue-card {
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid #EEF0F2;
  }

  .background-issue-card:last-child {
    border-bottom: none;
  }

  .heszero-nav {
    overflow-x: auto;
  }

  /* .heszero-nav a {
    flex-shrink: 0;
    padding: 10px 14px;
    font-size: 13px;
  } */

  .heszero-about {
    width: 100%;
    padding: 24px 18px 50px;
  }

  .heszero-main-title {
    font-size: 27px;
  }

  .heszero-intro {
    font-size: 15px;
    line-height: 1.85;
  }

  .heszero-comparison {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* .heszero-image-placeholder {
    height: 346px;
  } */

  .heszero-scs {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .heszero-scs-items {
    grid-template-columns: repeat(3, 1fr);
  }

  .issue-solution-section {
    width: 100%;
    padding: 35px 18px 55px;
  }

  .issue-solution-title {
    font-size: 26px;
  }

  .issue-solution-lead {
    font-size: 14px;
    line-height: 1.85;
  }

  /* PC用の左右見出しを非表示 */
  .issue-solution-head {
    display: none;
  }

  .issue-solution-row {
    display: block;
    margin-bottom: 30px;
  }

  .issue-card,
  .solution-card {
    min-height: auto;
  }

  /* スマホでは各カードに見出しを表示 */
  .issue-card::before {
    content: "お客さまが抱える課題";
    display: block;
    margin: -18px -20px 16px;
    padding: 9px 14px;
    color: #ffffff;
    background: #01203F;
    font-size: 14px;
    font-weight: 700;
  }

  .solution-card::before {
    content: "HES ZEROが提案する解決策";
    display: block;
    margin: -18px -20px 16px;
    padding: 9px 14px;
    color: #ffffff;
    background: #01203F;
    font-size: 14px;
    font-weight: 700;
  }

  .issue-solution-arrow {
    height: 48px;
    transform: rotate(90deg);
    font-size: 42px;
  }

  .feature-section {
    width: 100%;
    padding: 35px 18px 55px;
  } 

  .feature-title {
    font-size: 26px;
  }

  .feature-lead {
    font-size: 14px;
    line-height: 1.85;
  }

  .feature-columns {
    grid-template-columns: 1fr;
  }

  .feature-card {
    padding: 22px 18px 24px;
  }

  .feature-card-space {
    height: 45px;
  }

  .feature-card-heading {
    font-size: 18px;
  }

  .feature-card-text {
    font-size: 13px;
  }

  .flow-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .flow-card {
    width: 100%;
  }

  /* 矢印を縦向きに */
  .flow-arrow {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    transform: rotate(90deg);
  }

  .course-section {
    width: 100%;
    padding: 35px 18px 55px;
  }

  .course-title {
    font-size: 26px;
  }

  .course-lead {
    font-size: 14px;
    line-height: 1.85;
  }

  .course-smallstart {
    font-size: 16px;
  }

  .course-table {
    min-width: 680px;
  }

  .course-table th,
  .course-table td {
    padding: 8px 10px;
    font-size: 12px;
  }

  .price-contact {
    padding: 24px 18px;
  }

  .price-contact-title {
    font-size: 18px;
  }

  .price-contact-list {
    display: block;
  }

  .price-contact-item {
    width: 100%;
    padding: 18px 10px;
  }

  .price-contact-item + .price-contact-item {
    border-left: 0;
    border-top: 1px solid #d7dde3;
  }

  .price-contact-value {
    font-size: 18px;
  }
  
  .price-contact {
    margin-top: 36px;
    padding: 28px 20px;
  }

  .price-contact-title {
    margin-bottom: 22px;
    font-size: 20px;
  }

  .price-contact-list {
    display: block;
  }

  .price-contact-item {
    width: 100%;
    padding: 22px 0;
  }

  .price-contact-item + .price-contact-item {
    border-left: none;
    border-top: 1px solid #d9e0e6;
  }

  .price-contact-value {
    font-size: 22px;
  }

  .price-contact-note {
    font-size: 13px;
  }

  .price-contact {
    padding: 28px 20px 32px;
  }

  .price-contact-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .price-contact-line {
    margin: 10px 0 18px;
  }

  .price-contact-title {
    font-size: 18px;
    margin-bottom: 18px;
  }

  .price-contact-form-btn {
    width: 100%;
    min-width: 0;
  }

  .price-contact-row {
    gap: 8px 10px;
  }

   /* 問い合わせ  */
  .price-contact-top {
    gap: 10px;
  }

  .price-contact-top p {
    font-size: 14px;
  }

  .price-contact-note {
    font-size: 13px;
  }
  .price-contact-value {
    font-size: 13px;
  }

  /* INFORMATION */
  .heszero-status-wrap {
    box-sizing: border-box;
    width: 100%;
    padding: 20px 15px 0;
  }

  .heszero-status--navy {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: auto;
    margin: 0 auto;
    padding: 18px 20px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
  }

  /* INFORMATION */
  .heszero-news {
    padding: 16px 10px 6px;
  }

  /* 縦並び */
  .heszero-news-inner {
    width: 100%;
    padding: 18px 16px;
    grid-template-columns: minmax(0, 1fr);
  }

  .heszero-news-block:first-child {
    padding-right: 0;
  }

  /* 中央の縦線を横線に変更 */
  .heszero-news-block + .heszero-news-block {
    margin-top: 18px;
    padding-top: 18px;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid #e0e5ea;
  }

  .heszero-news-title {
    font-size: 15px;
  }

  .heszero-news-line {
    margin: 10px 0 14px;
  }

  .heszero-news-status,
  .heszero-news-text {
    font-size: 12px;
  }
}



/* =========================================
   SMALL MOBILE
========================================= */
@media screen and (max-width: 480px) {
  /* ナビ */
  .heszero-nav-inner a {
    font-size: 10px;        
    /* padding: 8px 12px;      
    display: inline-block;  */
  }
  /* top */
  .heszero-top-placeholder{
    width: 100%; height: auto;
  }

  /* 共通部品 */
  .heszero-section-label {
    font-size: 10px; 
    padding: 15px 0;
  }
  .heszero-title {
    font-size: 20px; 
    line-height: 1.4;
    word-break: break-all;
    }

  .heszero-summary {
    font-size: 10px; 
    line-height: 1.4;
    word-break: break-all;
  }

  .heszero-lead{
    font-size: 13px; 
    line-height: 2.0;
    word-break: break-all;
  }

  .heszero-inner {
    padding: 0 18px;
  }

  /* 01 ABOUT HES ZERO*/
  .heszero-comparison h2 {
    font-size: 13px; 
  }

 .heszero-scs-text h3{
    font-size: 14px; 
  }

 .heszero-scs-text p{
    font-size: 12px; 
  }

/* 02 BACKGROUND */
  .background-issue-title {
    font-size: 14px;
  }

  .background-issue-card h3{
    font-size: 14px;
  }

  .background-issue-card p{
    font-size: 13px;
  }

  /* .heszero-image-placeholder {
    height: 200px;
  } */

  /* 04 FEATURE */  
  .feature-card h3 {
    font-size: 14px;
  }

  .feature-card h4 {
    font-size: 12px;
  }

  .feature-detail-item dt {
    font-size: 10px !important; 
  }

  .feature-detail-item dd {
    font-size: 11px !important;
  }

  .issue-card h3,
  .solution-card h3 {
    font-size: 14px;
  }

  .issue-card li,
  .solution-card p {
    font-size: 12px;
  }

  .feature-card-heading {
    font-size: 17px;
  }

  .feature-detail-item dt {
    font-size: 12px;
  }

  .feature-detail-item dd {
    font-size: 11px;
  }

  /* 05 FLOW */
  .flow-steps {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .flow-arrow {
    display: none;
  }

  .flow-card {
    width: 100%;
    padding: 34px 16px 16px;
  }

  .flow-card h3{
    font-size: 15px;
  }

  .flow-number {
    top: -16px;
    width: 40px;
    height: 40px;
    font-size: 13px;
  }

  .flow-card-title {
    margin: 2px 0 8px;
    font-size: 17px;
    line-height: 1.6;
  }

  .flow-card-text {
    font-size: 13px;
    line-height: 1.7;
  }


  /* 06 PRICE & SERVICE */
  .course-smallstart  {
    font-size: 13px;
  }

  .course-table thead th {
    font-size: 11px;
  }

  .course-table th,
  .course-table td {
    font-size: 11px;
  }

  .course-badge {
    font-size: 10px !important;
  }
  
  .course-note {
    font-size: 12px;
  }

 /* 問い合わせ  */
  .price-contact-top {
    gap: 10px;
  }

  .price-contact-top p {
    font-size: 12px;
  }

  .price-contact-note {
    font-size: 11px;
  }
  .price-contact-value {
    font-size: 12px;
  }

  /* お知らせ全体 */
  .heszero-news {
    padding: 16px 10px 6px;
  }

  /* 白いカード */
  .heszero-news-inner {
    width: 100%;
    max-width: 100%;
    padding: 16px 18px 12px;
  }

  /* Information見出し */
  .heszero-news-title {
    font-size: 20px;
    line-height: 1.3;
  }

  /* オレンジのライン */
  .heszero-news-line {
    height: 3px;
    margin: 8px 0 12px;
  }

  .heszero-news-line::before {
    width: 65px;
  }

  /* 日付を上・文章を下に */
  .heszero-news-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 10px 0;
  }

  /* 日付 */
  .heszero-news-date {
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
  }

  /* 本文 */
  .heszero-news-text {
    width: 100%;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    overflow-wrap: break-word;
  }

    .heszero-news-inner {
    padding: 16px 14px;
  }

  .heszero-news-title {
    font-size: 13px;
  }

  .heszero-news-status,
  .heszero-news-text {
    font-size: 10px;
  }

  .heszero-news-line {
    margin: 8px 0 12px;
  }

}