@charset "UTF-8";
/* =========================================================================
   lp-sc02.css ― ストレスチェックPRO 広告LP（lp-sc-02.html 専用）
   reset.css / common.css の後に読み込む。
   参考：旧LP（/lp/stress-check-service/ ・ lp/style-02.css）をリニューアル配色で再構築。
   主要トークン（common.css）：--c-primary(navy) / --c-orange(SC PRO) / --c-accent(amber)
   ========================================================================= */

/* ---- LP ローカル変数 ---------------------------------------------------- */
.lpSc02 {
  --lp-navy: var(--c-primary, #254a84);
  --lp-navy-d: #1d3c6b;
  --lp-orange: var(--c-orange, #ec6922);
  --lp-orange-d: var(--c-dark-orange, #b85018);
  --lp-pale-orange: var(--c-pale-orange, #fdf0e9);
  --lp-yellow: #fff000;
  --lp-amber: var(--c-accent, #f2a900);
  --lp-text: var(--c-text, #262626);
  --lp-muted: var(--c-text-muted, #6c6c6c);
  --lp-border: var(--c-border, #d1d1d1);
  --lp-pale: #f3f6fb;
  --lp-radius: 10px;
  --lp-shadow: 0 4px 16px rgba(0, 0, 0, .08);
  --lp-maxw: 1200px;            /* lp-sc-01 と同じコンテンツ最大幅 */
  color: var(--lp-text);
  font-family: "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.75;
  background: #fff;
}
.lpSc02 * { box-sizing: border-box; }
.lpSc02 img { max-width: 100%; height: auto; vertical-align: bottom; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- フェードイン（JS有効時のみ初期非表示） ----------------------------- */
.lp-js .lpSc02 .fade-target {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.lp-js .lpSc02 .fade-target.is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lp-js .lpSc02 .fade-target { opacity: 1; transform: none; transition: none; }
}

/* ---- レイアウト ---------------------------------------------------------
   本文は #main（.lpMain）。問い合わせフォームの右固定＆本文オフセットは
   form-common.css（.formArea:not(.is-standalone) / body:has(...) #main）が担当する。 */
/* lp-sc-01 準拠：セクションは縦余白のみ（左右は .lpInner の width:90% で確保） */
.lpMain > section { padding: 64px 0; }
.lpMain > section:nth-of-type(even) { background: var(--lp-pale); }

/* ---- ヒーロー ----------------------------------------------------------- */
.lpHero { margin: 0; }
.lpHero img, .lpHero picture { display: block; width: 100%; }

/* ---- 共通：見出しバンド（青帯） ---------------------------------------- */
.lpBand {
  margin: 0 0 1.2em;
  padding: .55em 1em;
  background: var(--lp-navy);
  color: #fff;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.9rem);
  font-weight: 900;
  text-align: center;
  border-radius: var(--lp-radius);
  line-height: 1.4;
}
.lpBand .yellowTxt, .yellowTxt { color: var(--lp-yellow); }

/* 本文中の装飾見出し（オレンジ＋マーカー） */
.lpTxtH2 {
  margin: 0 0 1.2em;
  text-align: center;
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem);
  font-weight: 900;
  line-height: 1.45;
}
.lpTxtH2 .orangeT { color: var(--lp-orange); }
.lpTxtH2 .blackT { color: var(--lp-text); }
/* marker.js が付与する蛍光マーカー */
.lpSc02 .marker {
  background: linear-gradient(transparent 60%, #fff59d 60%);
  padding: 0 .1em;
}

/* ---- 共通：ボタン ------------------------------------------------------- */
.lpBtn {
  display: inline-block;
  min-width: 280px;
  max-width: 100%;
  padding: .9em 2em;
  background: var(--lp-orange);
  color: #fff;
  font-weight: 900;
  font-size: 1.125rem;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--lp-orange-d);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.lpBtn:hover { background: #f5793a; transform: translateY(-2px); }
.lpBtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--lp-orange-d); }
.lpBtn--dl { background: var(--lp-amber); box-shadow: 0 4px 0 #c8870a; }
.lpBtn--dl:hover { background: #ffb81f; }

/* ---- CTAボックス -------------------------------------------------------- */
.lpCtaBox {
  text-align: center;
  padding: 2.2em 1em !important;
  background: var(--lp-pale-orange) !important;
}
.lpCtaCopy {
  margin: 0 0 .6em;
  text-align: center;
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2rem);
  font-weight: 900;
  color: var(--lp-orange-d);
}
.lpCtaCopy small { font-size: .6em; }

/* ---- 選ばれる理由 ------------------------------------------------------- */
.lpReason { text-align: center; }
/* ヒーロー直下にピッタリ付ける（セクションの上下左右paddingを除去）。
   .lpMain > section より詳細度を上げて確実に勝たせる。 */
.lpMain > section.lpReason { padding: 0; }
/* タイトルSVGはヒーローと同じ全幅に拡大（幅上限・余白を解除） */
.lpReasonTit { margin: 0; max-width: none; }
.lpReasonTit img { width: 100%; height: auto; display: block; }
.lpReasonList {
  /* カード側にだけ余白を持たせる（タイトルは全幅のまま） */
  list-style: none; margin: 0 auto; padding: 2.4em 1em 3em;
  max-width: var(--lp-maxw);
  display: grid; gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
.lpReasonCard {
  background: #fff; border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 1.4em 1.2em; text-align: center;
  box-shadow: var(--lp-shadow);
}
.lpReasonCard h3 {
  margin: 0 0 .7em; min-height: 2.8em;
  display: flex; align-items: center; justify-content: center;
  color: var(--lp-navy); font-size: 1.1rem; font-weight: 700; line-height: 1.4;
}
.lpReasonCard figure { margin: 0 0 .9em; }
.lpReasonCard p { margin: 0; text-align: left; font-size: .95rem; }

/* ---- 80項目版 ----------------------------------------------------------- */
.lpItems80 { text-align: center; }
.lpSub {
  margin: 0 0 .6em; font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem);
  font-weight: 900; color: var(--lp-orange);
}
.lpLead { margin: 0 auto 1.6em; max-width: 760px; text-align: left; }
.lpPlus4 {
  list-style: none; margin: 0 auto; padding: 0; max-width: 760px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.lpPlus4 li { margin: 0; }

/* ---- 集団分析レポート（スライダー） ------------------------------------ */
.lpReport { text-align: center; }
.lpSliderWrap { max-width: 820px; margin: 0 auto; }
.lpSlider {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
}
.lpSliderStage { position: relative; min-width: 0; }
.lpSlide { position: relative; }
.lpSlide[hidden] { display: none; }
.lpSlide > img { width: 100%; border: 1px solid var(--lp-border); border-radius: 6px; }

.lpSliderNav {
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--lp-navy); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .15s ease;
}
.lpSliderNav:hover { background: var(--lp-navy-d); }
.lpSliderCount { margin: .9em 0 .2em; font-weight: 700; }
.lpSliderHint { margin: 0; font-size: .85rem; color: var(--lp-muted); }

/* ピン（ホットスポット） */
.lpPin {
  position: absolute;
  top: var(--y); left: var(--x);
  transform: translate(-50%, -50%);
  /* アイコンと同寸の固定ボックス。ラベルは絶対配置でこのサイズを変えない＝ズレ防止 */
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  z-index: 2;
}
.lpPinIcon {
  flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--lp-orange); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  animation: lpPinPulse 2s ease-out infinite;
}
.lpPinLabel {
  display: none;                /* 既定は非表示。ホバー/フォーカス時のみ表示 */
  position: absolute;           /* フロー外＝表示してもアイコン位置に影響しない（ズレ防止） */
  top: 50%; left: calc(100% + 8px);
  transform: translateY(-50%);
  background: rgba(0, 0, 0, .78); color: #fff;
  font-size: .8rem; line-height: 1.3; font-weight: 700;
  padding: .35em .6em; border-radius: 6px; white-space: nowrap;
}
/* is-left はラベルをアイコンの左側へ */
.lpPin.is-left .lpPinLabel { left: auto; right: calc(100% + 8px); }
.lpPin:hover .lpPinLabel,
.lpPin:focus-visible .lpPinLabel { display: block; }
.lpPin:hover, .lpPin:focus-visible { z-index: 3; }
@keyframes lpPinPulse {
  0% { box-shadow: 0 0 0 0 rgba(236, 105, 34, .6); }
  70% { box-shadow: 0 0 0 12px rgba(236, 105, 34, 0); }
  100% { box-shadow: 0 0 0 0 rgba(236, 105, 34, 0); }
}
@media (max-width: 640px) {
  .lpPinLabel { display: none; }
  .lpPinIcon { width: 32px; height: 32px; }
}

/* ---- 料金シミュレーター ------------------------------------------------- */
.lpSim {
  max-width: 760px; margin: 0 auto;
  background: #fff; border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 1.6em; box-shadow: var(--lp-shadow);
}
.lpSimForm { margin: 0 0 1.4em; }
.lpSimRow {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1.2em;
  padding: .8em 0; border-bottom: 1px dashed var(--lp-border);
}
.lpSimHead {
  flex: 0 0 7em; font-weight: 700; color: var(--lp-navy);
}
.lpSimBody { display: flex; flex-wrap: wrap; align-items: center; gap: .4em 1.4em; }
.lpSimBody label { display: inline-flex; align-items: center; gap: .3em; cursor: pointer; }
.lpSim input[type="radio"] { accent-color: var(--lp-orange); width: 1.1em; height: 1.1em; }
#employees {
  width: 5em; padding: .35em .5em; text-align: right;
  border: 1px solid var(--lp-border); border-radius: 6px; font-size: 1rem;
}
.lpSimAlert { width: 100%; margin: .3em 0 0; color: var(--c-red, #cc372d); font-size: .85rem; }

.lpSimResult {
  display: flex; align-items: center; justify-content: center; gap: 1em;
  flex-wrap: wrap; margin: 0 0 1em;
}
.lpPrice {
  flex: 1 1 220px; text-align: center;
  border: 2px solid var(--lp-border); border-radius: var(--lp-radius); padding: 1em;
}
.lpPrice.is-campaign { border-color: var(--lp-orange); background: var(--lp-pale-orange); }
.lpPriceLabel { margin: 0 0 .3em; font-weight: 700; color: var(--lp-muted); font-size: .9rem; }
.lpPrice.is-campaign .lpPriceLabel { color: var(--lp-orange-d); }
.lpPriceNum { margin: 0; font-weight: 700; }
.lpPriceNum b { font-size: 1.8rem; color: var(--lp-navy); }
.lpPrice.is-campaign .lpPriceNum b { color: var(--lp-orange); }
.lpSimArrow { width: 48px; flex: none; }
.lpSimNote { margin: 0; }
.lpSimNote p { margin: .3em 0; font-size: .82rem; color: var(--lp-muted); }
@media (max-width: 560px) {
  .lpSimArrow { transform: rotate(90deg); }
}

/* ---- 導入実績グラフ ----------------------------------------------------- */
.lpTrack { text-align: center; }
.lpGraph { max-width: 760px; margin: 0 auto; }

/* ---- オプションサービス ------------------------------------------------- */
.lpOptions { background: var(--lp-navy) !important; color: #fff; }
.lpOptTitle {
  margin: 0 0 1.2em; text-align: center; color: #fff;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.8rem); font-weight: 900;
}
.lpOptTitle small { display: block; font-size: .6em; font-weight: 500; margin-top: .3em; }
.lpOptList {
  list-style: none; margin: 0 auto; padding: 0; max-width: var(--lp-maxw);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.lpOptList li {
  background: #fff; color: var(--lp-text); border-radius: var(--lp-radius);
  padding: 1em .6em; text-align: center; font-size: .85rem; font-weight: 700;
  line-height: 1.4;
}
.lpOptList li img { display: block; width: auto; height: 100px; margin: 0 auto .5em; }
.lpOptFoot { display: none; }

/* ---- 資料ダウンロード --------------------------------------------------- */
.lpDataDl {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center;
  max-width: var(--lp-maxw); margin-inline: auto;
}
.lpDataTit { margin: 0 0 .6em; color: var(--lp-navy); font-size: 1.4rem; font-weight: 900; }
.lpDataTxt { margin: 0 0 1.2em; }
.lpDataDl .lpBtn { display: block; margin-top: .5em; }

/* ---- セキュリティ ------------------------------------------------------- */
.lpSecuritySec { text-align: center; }
.lpSecurity {
  list-style: none; margin: 0 auto; padding: 0; max-width: 880px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.lpSecurity li {
  background: #fff; border: 1px solid var(--lp-border); border-radius: var(--lp-radius);
  padding: 1.4em 1em; display: flex; flex-direction: column; align-items: center; gap: .8em;
}
.lpSecurity .logos { display: inline-flex; gap: 10px; }
.lpSecurity span:last-child { font-size: .9rem; font-weight: 700; }

/* ---- 導入企業様の声 ----------------------------------------------------- */
.lpClient { text-align: center; }
.lpClientWrap {
  list-style: none; margin: 0 auto; padding: 0; max-width: var(--lp-maxw);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.lpClientBox {
  background: #fff; border: 1px solid var(--lp-border); border-radius: var(--lp-radius);
  overflow: hidden; text-align: left; box-shadow: var(--lp-shadow);
}
.lpClientBox > picture img, .lpClientBox > img { width: 100%; display: block; }
.lpClientBox > div { padding: 1.1em 1.2em; }
.lpClientBox h3 { margin: 0 0 .5em; color: var(--lp-navy); font-size: 1.05rem; font-weight: 700; }
.lpClientBox p { margin: 0; font-size: .92rem; }

/* ---- ロゴ一覧 ----------------------------------------------------------- */
.lpLogoList {
  list-style: none; margin: 0 auto; padding: 0; max-width: var(--lp-maxw);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 16px; align-items: center;
}
.lpLogoList li { text-align: center; }
.lpLogoList img { width: 100%; max-width: 180px; height: auto; mix-blend-mode: multiply; }

/* ---- お申し込みの流れ --------------------------------------------------- */
.lpFlow { text-align: center; }
.lpFlow > h2 {
  margin: 0 0 1.4em; color: var(--lp-navy);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.8rem); font-weight: 900;
}
.lpFlowList {
  list-style: none; margin: 0 auto; padding: 0; max-width: var(--lp-maxw);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.lpFlowBox {
  position: relative; background: #fff; border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 1.4em 1em; text-align: center;
}
.lpFlowBox > img { display: block; width: 94px; height: 94px; margin: 0 auto .6em; }
.lpFlowTxt h3 { margin: 0 0 .5em; color: var(--lp-orange); font-size: 1.05rem; font-weight: 700; }
.lpFlowTxt p { margin: 0; font-size: .9rem; text-align: left; }
.lpFlowMark {
  position: absolute; top: 50%; right: -14px; transform: translateY(-50%); z-index: 2;
}
.lpFlowMark img { width: 24px; height: auto; }
.lpFlowBox:last-child .lpFlowMark { display: none; }
@media (max-width: 811px) {
  .lpFlowList { grid-template-columns: 1fr; gap: 28px; }
  .lpFlowMark { top: auto; right: 50%; bottom: -22px; transform: translateX(50%); }
}

/* ---- 運営会社情報 ------------------------------------------------------- */
.lpCompany > h2 {
  margin: 0 0 1em; text-align: center; color: var(--lp-navy);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.8rem); font-weight: 900;
}
.lpCompany h3 { margin: 1.4em 0 .6em; color: var(--lp-navy); font-size: 1.15rem; font-weight: 700; }
.lpAbout { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; max-width: var(--lp-maxw); margin-inline: auto; }
.lpAbout p { margin: 0; font-size: .92rem; }
.lpCompanyDl {
  max-width: var(--lp-maxw); margin: 0 auto;
  display: grid; grid-template-columns: 10em 1fr; border-top: 1px solid var(--lp-border);
}
.lpCompanyDl dt, .lpCompanyDl dd {
  margin: 0; padding: .9em 1em; border-bottom: 1px solid var(--lp-border); font-size: .9rem;
}
.lpCompanyDl dt { font-weight: 700; background: var(--lp-pale); color: var(--lp-navy); }
.lpCompanyDl dd ul, .lpCompanyDl dd ol { margin: 0; padding-left: 1.2em; }
.lpCompanyDl dd li { margin: .2em 0; }
@media (max-width: 560px) {
  .lpAbout { grid-template-columns: 1fr; justify-items: center; text-align: left; }
  .lpCompanyDl { grid-template-columns: 1fr; }
  .lpCompanyDl dt { border-bottom: 0; }
}

/* ---- 問い合わせフォーム -------------------------------------------------
   レイアウト（右固定/本文オフセット/レスポンシブ）は form-common.css が担当。
   ここではLP内に置いた際の最小限の体裁のみ。 */
.lpSc02 .formArea:not(.is-standalone) { z-index: 5; }

/* ---- フッター ----------------------------------------------------------- */
.lpFooter {
  margin: 0; padding: 1.4em 1em; text-align: center;
  background: var(--lp-navy); color: #fff; font-size: .85rem;
}

/* ---- 拡大モーダル ------------------------------------------------------- */
.lpModal {
  padding: 0; border: 0; max-width: 92vw; max-height: 92vh;
  background: transparent; overflow: visible;
}
.lpModal::backdrop { background: rgba(0, 0, 0, .8); }
.lpModalBody img { display: block; max-width: 92vw; max-height: 88vh; width: auto; height: auto; border-radius: 6px; background: #fff; }
.lpModalClose {
  position: absolute; top: -40px; right: 0;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: #fff; color: #000; font-size: 1.5rem; line-height: 1; cursor: pointer;
}

/* ---- lp-sc-01 準拠のコンテンツ幅コンテナ -------------------------------
   主要な中身は「width:90% / max-width:1200px / 中央寄せ」に統一。
   （個別ルールより後に置いて確実に適用。.lpReasonTit 等の全幅要素は対象外） */
.lpBand,
.lpTxtH2,
.lpOptTitle,
.lpSub,
.lpLead,
.lpReasonList,
.lpPlus4,
.lpSliderWrap,
.lpSim,
.lpGraph,
.lpOptList,
.lpDataDl,
.lpSecurity,
.lpClientWrap,
.lpLogoList,
.lpFlow > h2,
.lpFlowList,
.lpCompany > h2,
.lpCompany > h3,
.lpAbout,
.lpCompanyDl {
  width: 90%;
  max-width: var(--lp-maxw);
  margin-left: auto;
  margin-right: auto;
}

/* ---- レスポンシブ：グリッド段組みの調整 -------------------------------- */
@media (max-width: 920px) {
  .lpReasonList { grid-template-columns: repeat(2, 1fr); }
  .lpOptList { grid-template-columns: repeat(3, 1fr); }
  .lpLogoList { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 680px) {
  .lpMain > section { padding: 40px 0; }
  .lpReasonList { grid-template-columns: 1fr; }
  .lpPlus4 { grid-template-columns: 1fr; }
  .lpOptList { grid-template-columns: repeat(2, 1fr); }
  .lpSecurity { grid-template-columns: 1fr; }
  .lpClientWrap { grid-template-columns: 1fr; }
  .lpLogoList { grid-template-columns: repeat(3, 1fr); }
  .lpDataDl { grid-template-columns: 1fr; text-align: center; }
  .lpBtn { min-width: 0; width: 100%; }
}