/* =========================================================
  Variables（ガイドライン準拠カラー）
========================================================= */
:root {
  --space: 15px;
  --text-main: #0c0c0c;
  --text-sub: #555;
  --border: #dcdcdc;

  --bg-main: #ffffff;
  --bg-soft: #f6f6f6;
  --bg-grad-soft: linear-gradient(180deg, #f6f6f6 0%, #ffffff 100%);
  --bg-grad-accent: linear-gradient(180deg, #ffffff 0%, #FFCBCE 100%);

  --accent: #cc0000;
  --accent-dark: #c40020;
}

/* =========================================================
  Reset / Base
========================================================= */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Hitachi Sans", "Noto Sans JP", "Yu Gothic UI", "Noto Sans" ,sans-serif;
  color: var(--text-main);
  line-height: 1.7;
  background: var(--bg-main);
}

/* =========================================================
  Layout
========================================================= */
.LpSection {
  padding: 72px 0;
}

.LpInner {
  max-width: 965px;
  margin: 0 auto;
  padding: 0 var(--space);
}

@media (max-width: 767px) {
  .LpSection {
    padding: 44px 0;
  }
}

/* =========================================================
  Headings
========================================================= */
.LpSectionTitle {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 28px;
  letter-spacing: 0.04em;
}

.LpSectionTitle {
  margin-bottom: 24px;
}

.LpSectionTitle + p {
  margin-top: 14px;
}

@media (max-width: 767px) {
  .LpSectionTitle {
    font-size: 22px;
  }
}

.LpProblem p {
  margin-bottom: 16px;
}


/* =========================================================
  Hero（ファーストビュー）
========================================================= */
.LpHero {
  background-image:
    url("/image/page/mailmagazine/AdobeStock_1890039231_fv.jpeg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border-bottom: 1px solid var(--border);
  padding: 100px 0;
}


.LpHeroTitle {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 16px;
  color: #FFFFFF;
}

.LpHeroLead {
  color: var(--text-sub);
  margin-bottom: 28px;
  color: #FFFFFF;
}

.LpBadgeList {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin-bottom: 32px;
}

.LpBadge {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
}

.LpCtaNote {
  color: #FFFFFF;
}

/* =========================================================
  CTA Button（通常）
========================================================= */
a.LpCtaButton,
a.LpFloatingCtaButton {
  display: inline-block;
  background: var(--accent);
  color: #ffffff;
  padding: 16px 28px;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* =========================================================
  CTA Button（hover）
========================================================= */
a.LpCtaButton:hover,
a.LpFloatingCtaButton:hover {
  background-color: #0C0C0C;
  color: #ffffff;
  transform: translateY(-2px);
}


/* =========================================================
  Split Layout
========================================================= */


.LpProblem .LpSplit {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  align-items: center;
}

@media (max-width: 767px) {
  .LpProblem .LpSplit {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
  Problem Section
========================================================= */
.LpProblem {
  background: #ffffff;
}

.LpProblem .LpList {
  list-style: none;
  padding: 0;
}

.LpProblem .LpList li {
  position: relative;
  padding-left: 1.8em;
  font-size: 18px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.LpProblem .LpList li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* セクション3：背景色を単色グレーに */
.LpValue {
  background-color: #FFFFFF;
}

/* =========================================================
  Card Grid（提供価値・強み）
========================================================= */
.AddColumnSet {
  gap: 24px;
  margin-top: 24px;
  display: flex;
}

.AddColumn1 {
  flex: 1;
}

@media (max-width: 767px) {
  .AddColumnSet {
    flex-direction: column;
  }
}

.LpCard {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  height: 300px%;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

@media (hover: hover) {
  .LpCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(187,0,1, 0.1);
  }
}

.LpIconCircle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(230, 0, 39, 0.08);
  color: var(--accent);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.LpCardTitle {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 10px;
}

.LpCardText {
  font-size: 14px;
  color: var(--text-sub);
}


/* =========================================================
  Reason Section（背景切替）
========================================================= */
.LpReason {
  background: var(--bg-grad-accent);
}

/* =========================================================
  Info Box
========================================================= */
.LpInfoBox {
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
  margin-top: 28px;
}

/* =========================================================
  Responsive Fix：Section 2 & 5
========================================================= */
@media (max-width: 767px) {

  /* Splitレイアウトは完全1カラムに */
  .LpSplit {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: stretch;
  }

  /* reverse指定はSPでは無効 */
  .LpSplit--reverse {
    grid-template-columns: 1fr;
  }

  /* 画像エリアの暴れ防止 */
  .LpSplitVisual {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  .LpSplitVisual img {
    width: 100%;
    height: auto;
    display: block;
  }
}
.LpCard:hover .LpCardTitle {
  color: #0c0c0c;
  text-decoration: underline;
  text-decoration-color: rgba(12, 12, 12);
}

/* セクション5 リード文 */
.LpLeadText {
  margin-bottom: 16px;
  color: var(--text-sub);
}

/* セクション内CTA中央寄せ */
.LpSectionCta {
  margin-top: 32px;
  text-align: center;
}

.LpTarget {
  background-color: #ffffff;
}


/* =========================================================
  Section 5B : 個人情報の取り扱い（トーン調整＋縦幅縮小）
========================================================= */
.LpPrivacy {
  background-color: #ededed; /* 白→やや暗めグレー */
  padding: 24px 0;          /* デフォルトより縦を詰める */
}

@media (max-width: 767px) {
  .LpPrivacy {
    padding: 24px 0;        /* SPはさらにコンパクトに */
  }
}

/* 中のInfoBoxは白色背景 */
.LpPrivacy .LpInfoBox {
  background-color: #ffffff;
  border-color: #cfcfcf;
  padding: 20px 20px;       /* 余白を少し縮小 */
}

/* 文字色を落ち着かせる */
.LpPrivacy p {
  color: #444444;
  font-size: 14px;
}

/* =========================================================
  Section 5B : 個人情報保護方針リンク
========================================================= */
.LpPrivacyLinkWrap {
  margin-top: 8px;
}

a.LpPrivacyLink {
  color: #0c0c0c;            /* 規定の黒 */
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

a.LpPrivacyLink:hover {
  color: #cc0000;            /* 規定の赤 */
  text-decoration: underline;
}

/* =========================================================
  Section 7: 業種別（左カテゴリ / 右詳細）UI
========================================================= */
.LpIndustry {
  background: #f8f8f8;
}

.LpIndustryLayout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}

/* 左：カテゴリ */
.LpIndustryNav {
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 10px;
  padding: 16px;
}

.LpIndustryTabList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.LpIndustryTab {
  width: 100%;
  text-align: left;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #0c0c0c;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.LpIndustryTab[aria-selected="true"] {
  background: #cc0000;
  color: #ffffff;
  border-color: #cc0000;
}

.LpIndustryTab:hover {
  background: #f2f2f2;
  color: #0c0c0c;
  border-color: #0c0c0c;
}

.LpIndustryTab:focus {
  outline: none;
}

/* 右：詳細エリア全体 */
.LpIndustryBody {
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 10px;
  padding: 24px;
}

/* =========================================================
  Panel内レイアウト（左テキスト + 右画像）
========================================================= */
.LpIndustryContent {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
}

/* テキスト側 */
.LpIndustryTextArea {
  min-width: 0;
}

.LpIndustryHeading {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 700;
}

.LpIndustryText {
  margin-bottom: 14px;
  color: #555555;
}

.LpIndustryLinks {
  display: grid;
  gap: 10px;
}

.LpIndustryLinks a.LpIndustryLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #0c0c0c;
  text-decoration: none;
  margin-bottom: 14px;
}

.LpIndustryLinks .LpIndustryLink::after {
  content: "＞";
  font-size: 18px;
  color: #666666;
}

.LpIndustryLinks a.LpIndustryLink:hover {
  color: #cc0000;
}

/* 右：画像  */
.LpIndustryVisual {
  width: 100%;
  aspect-ratio: 2 / 1;
}


/* 画像フィット */
.LpIndustryVisual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
  Responsive（スマホ）
========================================================= */
@media (max-width: 767px) {

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

  .LpIndustryBody {
    padding: 18px;
  }

  /* パネルは縦並びに */
  .LpIndustryContent {
    grid-template-columns: 1fr;
  }

  .LpIndustryHeading {
    font-size: 20px;
  }

  .LpIndustryVisual {
    margin-top: 16px;
    max-width: 100%;
  }
}
/* =========================================================
  Floating CTA（Layout Fix）
========================================================= */
.LpFloatingCta {
  position: fixed;
  right: 20px;
  bottom: 250px;
  z-index: 1000;
}

.LpFloatingCtaCard {
  width: 280px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
}

.LpFloatingCtaTitle {
  font-weight: 700;
  margin-bottom: 4px;
}

.LpFloatingCtaSub {
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 14px;
}

/* ボタンは常にカード幅いっぱい */
.LpFloatingCtaButton {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px;
}

/* SP時 */
@media (max-width: 767px) {
  .LpFloatingCta {
    left: var(--space);
    right: var(--space);
    bottom: 15px;
  }
  .LpFloatingCtaCard {
    width: 100%;
  }
}
/* =========================================================
  Floating CTA Close Control（完全修正版）
========================================================= */

/* ? チェックボックスは完全に非表示 */
.LpFloatingCtaToggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ? チェックされたらカードを消す */
.LpFloatingCtaToggle:checked + .LpFloatingCtaCard {
  display: none;
}

/* =========================================================
  Close Button（×）
========================================================= */
.LpFloatingCtaClose {
  position: absolute;
  top: 10px;
  right: 10px;

  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
  font-weight: 700;
  line-height: 1;

  color: #555;
  background: #ffffff;

  border: 1px solid #dcdcdc;
  border-radius: 50%;

  cursor: pointer;
  z-index: 2;
}

.LpFloatingCtaClose:hover {
  background: #f0f0f0;
}
/* =========================================================
  Section : Contact & Privacy（新セクション）
========================================================= */
.LpContact {
  background: #ffffff;
  padding: 48px 0; /* 少しコンパクト */
}

@media (max-width: 767px) {
  .LpContact {
    padding: 32px 0;
  }
}

/* 説明文 */
.LpContactText {
  margin-bottom: 16px;
  color: var(--text-sub);
}

/* メールアドレス */
.LpContactMail {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-main);
}

/* 個人情報 */
.LpContactPrivacy {
  font-size: 14px;
  color: #444444;
  line-height: 1.6;
}

/* リンク */
.LpContactPrivacy a {
  margin-left: 8px;
}
/* =========================================================
  Section : Contact & Privacy Contact見出し：左赤ライン装飾
========================================================= */
.LpContact .LpSectionTitle {
  position: relative;
  padding-left: 16px; /* 線分スペース確保 */
}

/* 赤ライン */
.LpContact .LpSectionTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 4px;
  height: calc(100% - 8px); /* 上下少し余白 */
  background-color: #cc0000;
}
/* 見出し 共通 */
.LpSection .LpSectionTitle {
  position: relative;
  padding-left: 20px;
  line-height: 1.4;
}

.LpSection .LpSectionTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 4px;
  height: 1em;
  background-color: #cc0000;
}