:root {
  --emerald-main:    #068a87;
  --emerald-dark:    #125c63;
  --emerald-light:   #e6f4f3;
  --emerald-bright:  #19b6b2;
  --dark-gray:       #535353;
  --gradient-emerald: linear-gradient(135deg, #068a87, #39bab7);
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #333;
  background-color: #fff;
  position: relative;
}

/* 色 */
.text-emerald { color: var(--emerald-main); }
.text-emerald-dark { color: var(--emerald-dark); }
.bg-emerald { background-color: var(--emerald-main); }
.bg-emerald-light { background-color: var(--emerald-light); }
.bg-emerald-bright { background-color: var(--emerald-bright); } /* 追加 */
.bg-dark-gray { background-color: var(--dark-gray); }
.bg-warning-light { background-color: #fff3cd; }
.border-emerald { border-color: var(--emerald-main) !important; }
.gradient-emerald { background: var(--gradient-emerald); }

/* ヘッダ */
.header-logo {
  height: 27px;
  width: auto;
}

/* 本文 */
h2 {
  letter-spacing: 0.12em;
}
/* h下の緑線 */
body#pl2 section#about h2,
body#pl2 section#features+section h2,
body#pl2 section#flow h2,
body#pl2 section#faq h2,
body#pl2 section#contact h2 {
  position: relative;
  padding-bottom: 3rem; 
  margin-bottom: 3rem; 
}
body#pl2 section#about h2::after,
body#pl2 section#features+section h2::after,
body#pl2 section#flow h2::after,
body#pl2 section#faq h2::after,
body#pl2 section#contact h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 13%;
  height: 4px;
  background-color: var(--emerald-main);
  border-radius: 2px;
}

/* （共通）センスウェイ公式窓口 */
.announcement-banner {
  background-color: #fdf2f0;
}
.announcement-badge {
  background-color: #e06d53;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.35em 0.65em;
  border-radius: 0.25rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.announcement-text {
  color: #4a3b38;
}

/* （共通）オレンジボタン */
.btn-accent-grad {
  background: linear-gradient(135deg, #f0810f 0%, #f7b733 100%);
  color: #ffffff;
  font-weight: 700;
  border: none;
  box-shadow: none;
  transition: background 0.3s ease, opacity 0.3s ease;
  text-decoration: none;
}
.btn-accent-grad:hover {
  background: linear-gradient(135deg, #f28f24 0%, #f9c24b 100%);
  color: #ffffff;
}
.btn-accent-grad:active {
  opacity: 0.85;
}

/* （共通）ボタン右のおっさん */
/* PC・タブレット表示時の画像位置指定 */
.contact-side-img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 8.333%; /* セクション全体幅の 1/12 (約8.333%) */
  height: auto;
  left: calc(50% + 180px);
  max-width: 100%;
  object-fit: contain;
  opacity: 0.8;
}
/* スマホ表示時（画面幅768px以下）*/
@media (max-width: 768px) {
  .contact-side-img {
    display: none;
  }
}

/* （#LP1）Section バナー */
@media (min-width: 768px) {
  .border-end-md {
    border-right: 1px solid !important;
  }
  .border-start-md {
    border-left: 1px solid !important;
  }
}

/* （#LP2）Section 管理できていますか？ */
body#pl2 .announcement-banner + section {
  background-image: url('../files/objective_bg.webp');
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: auto 130px;
  background-clip: padding-box;
  padding-bottom: calc(3rem + 130px) !important; 
  border-bottom: 4px solid var(--emerald-bright);
}

/* （#LP2）ウェルヘルスがすべて解決致します! */
.solve-box {
  background-color: #ffffff;
  border: 4px solid var(--emerald-main);
}
.text-warning-marker { /* 下半分に蛍光ペンライン */
  background: linear-gradient(transparent 55%, #ffe066 55%);
  color: inherit;
  font-weight: 700;
}
.bg-badge-warning {
  background-color: #ffe066 !important;
  color: #212529 !important;
}

/* （#LP2）Section 労災保険二次健康診断とは？ */
body#pl2 #about {
  position: relative;
}
/* 右上の飾り画像 */
body#pl2 .about-top-right-img {
  position: absolute;
  top: -10%;
  right: 10%;
  width: 16.666%;
  max-width: 200px; /* 大きくなりすぎるのを防ぐ上限値 */
  height: auto;
  z-index: 10; /* 前のセクションや背景より前面に表示 */
  pointer-events: none; /* 画像がボタンやテキストのクリックを邪魔しないように */
}
/* スマホ表示時の調整 */
@media (max-width: 767.98px) {
  body#pl2 .about-top-right-img {
    display: none; /* スマホでは重なりやはみ出しを防ぐため非表示 */
  }
}

/* （#LP2）Section 5つの特徴 */
/* ---------- スマホ表示時（デフォルト: 575px以下） ---------- */
.feature-img {
  display: none; /* スマホでは画像を非表示 */
}
.mt-overlap-Y {
  margin-top: 0 !important; /* スマホでは重なり（ネガティブマージン）を打ち消す */
  position: static;
}
/* ---------- PC・タブレット表示時（576px以上） ---------- */
@media (min-width: 576px) {
  .feature-img {
    display: block; /* 画面が広がったら画像を表示 */
    width: 100%;
    height: 300px;
    object-fit: contain;
  }
  .mt-overlap-Y {
    margin-top: -75px !important; /* PC・タブレットのみ重ねる */
    position: relative; /* z-indexを有効化 */
  }
}

/* （#LP2）Section 導入メリット */
.icon-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* （#LP2）Section 重大な病気の早期発見にも繋がります */
section.position-relative {
  position: relative;
}
.top-centered-img {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  max-width: 150px;
  height: auto;
  z-index: 1;
}

/* （#LP2）Section 二次健康診断受診の流れ ボタン */
.btn-outline-emerald {
  color: var(--emerald-main);
  border-color: var(--emerald-main);
}
.btn-outline-emerald:hover {
  background-color: var(--emerald-main);
  color: #fff;
}

/* 受診の流れのモーダル */
.flow-timeline {
  position: relative;
  padding-left: 0.5rem;
}
.flow-timeline::before {
  content: '';
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 23px;
  width: 2px;
  background-color: #e0f2f1;
  z-index: 1;
}
.flow-step-item {
  position: relative;
  z-index: 2; /* ラインより前に表示 */
  transition: transform 0.2s ease;
}
.flow-number {
  width: 38px;
  height: 38px;
  background-color: #068a87;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(6, 138, 135, 0.25);
}
/* ホバーでカードを浮き立てる（PC向け） */
.flow-card {
  transition: all 0.2s ease;
  border: 1px solid #f0f0f0 !important;
}
.flow-card:hover {
  border-color: #068a87 !important;
  transform: translateX(4px);
}

/* フッタ */
.footer-logo {
  width: 50%;
  height: auto;
}
.mark-img {
  width: 25%;
  height: auto;
}
.wellhealth-img {
  width: 33%;
  height: auto;
}
/* PC表示時 (992px以上) */
@media (min-width: 992px) {
.mark-img {
  width: 20%;
}
}