@charset "UTF-8";
/* lp3 のみの追加スタイル。style.css(lp2共通) は編集しない */

/* ===== 追従バナー：表示サイズ =====
   style.css の .c-banner img は max-width:892px。
   バナー画像は1729px幅で作っているため892pxだと約52%に縮小され文字が小さくなる。
   視認性のため表示幅を広げる（style.css は編集しない） */
.c-banner img.banner-pc {
  max-width: 1080px;
}
@media screen and (max-width: 768px) {
  .c-banner img.banner-sp {
    max-width: none;
    width: 100%;
  }
}

/* ===== 規約ページ（privacy-policy.php）===== */
.p-legal { padding: 120px 0 100px; background: #fff; }
.p-legal__body { max-width: 900px; margin: 0 auto; color: #2d2d2d; line-height: 1.9; font-size: 15px; }
.p-legal__body p { margin-bottom: 20px; }
.p-legal__lead {
  padding: 24px 28px; margin-bottom: 48px;
  background: #F3F7FC; border-left: 5px solid #1F528F; border-radius: 4px;
}
.p-legal__body h3 {
  margin: 56px 0 20px; padding-bottom: 12px;
  border-bottom: 2px solid #1F528F;
  font-size: 21px; font-weight: 800; color: #1F528F;
}
.p-legal__body h3:first-of-type { margin-top: 0; }
.p-legal__ul { margin: 0 0 20px; padding-left: 0; }
.p-legal__ul li {
  position: relative; padding-left: 22px; margin-bottom: 10px; list-style: none;
}
.p-legal__ul li::before {
  position: absolute; left: 4px; top: .72em;
  width: 7px; height: 7px; border-radius: 50%; background: #D8562B; content: "";
}
.p-legal__dl { margin: 0 0 20px; }
.p-legal__dl dt {
  margin-top: 20px; padding-left: 14px;
  border-left: 4px solid #FBB70C; font-weight: 800; font-size: 16px;
}
.p-legal__dl dd { margin: 8px 0 0 18px; }
.p-legal__table {
  width: 100%; margin: 0 0 20px; border-collapse: collapse; font-size: 14px;
}
.p-legal__table th, .p-legal__table td {
  padding: 14px 16px; border: 1px solid #E4E8EA; text-align: left; vertical-align: top;
}
.p-legal__table thead th { background: #1F528F; color: #fff; font-weight: 700; }
.p-legal__table tbody th { width: 200px; background: #F5F5F5; font-weight: 700; white-space: nowrap; }
.p-legal__note {
  padding: 14px 18px; background: #FFFAEC; border: 1px solid #FBB70C;
  border-radius: 4px; font-size: 14px;
}
.p-legal__sign { margin-top: 56px; padding-top: 24px; border-top: 1px solid #E4E8EA; font-size: 14px; }
.p-legal a { color: #1F528F; text-decoration: underline; }

@media screen and (max-width: 768px) {
  .p-legal { padding: 90px 0 70px; }
  .p-legal__body { font-size: 14px; }
  .p-legal__body h3 { margin: 40px 0 16px; font-size: 18px; }
  .p-legal__table { font-size: 13px; }
  .p-legal__table th, .p-legal__table td { padding: 10px 12px; }
  .p-legal__table tbody th { width: auto; white-space: normal; }
  .p-legal__table thead { display: none; }
  .p-legal__table.is-stack td { display: block; border-top: none; }
}

/* ===== フォームの同意チェック ===== */
.form-consent { margin: 8px 0 20px; }
.form-consent__label {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px;
  align-items: start; cursor: pointer; font-size: 14px; line-height: 1.7;
}
.form-consent__input { position: absolute; width: 0; height: 0; opacity: 0; }
.form-consent__box {
  position: relative; width: 24px; height: 24px; margin-top: 2px;
  border: 2px solid #1F528F; border-radius: 4px; background: #fff;
  transition: background .15s, border-color .15s;
}
.form-consent__box::after {
  position: absolute; left: 6px; top: 5px; width: 9px; height: 5px;
  border-left: 3px solid #fff; border-bottom: 3px solid #fff;
  transform: rotate(-45deg); opacity: 0; content: ""; transition: opacity .15s;
}
.form-consent__input:checked + .form-consent__box { background: #1F528F; }
.form-consent__input:checked + .form-consent__box::after { opacity: 1; }
.form-consent__label:hover .form-consent__box { border-color: #D8562B; }
.form-consent__input:focus-visible + .form-consent__box { outline: 2px solid #D8562B; outline-offset: 2px; }
.form-consent a { color: #1F528F; text-decoration: underline; }
.form-consent .required { margin-left: 8px; }

/* ===== できること：アイコンと本文の重なり回避 =====
   style.css で .service-list__item img は position:absolute; right:4px; bottom:4px
   （幅37px）で配置されるため、本文が長いとアイコンに重なる。
   カード下部にアイコン分の余白を確保する */
.p-service .service-list__item {
  padding-bottom: 48px;
}
.p-service .service-list__item p {
  margin-bottom: 0;
}
@media screen and (max-width: 576px) {
  .p-service .service-list__item { padding-bottom: 40px; }
  .p-service .service-list__item img { width: 28px; }
}

/* ===== 比較表（2列・罫線あり）===== */
.p-vs__wrap { max-width: 1000px; margin: 0 auto; overflow-x: auto; }
.p-vs {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: #fff;
}
.p-vs th, .p-vs td { border: 1px solid #C9D2DA; }
.p-vs__corner { width: 150px; background: #fff; border-top: none; border-left: none; }
.p-vs__head {
  padding: 16px 12px;
  font-size: 20px;
  font-weight: 900;
  text-align: center;
  line-height: 1.3;
}
.p-vs__head--other   { background: #E4E8EA; color: #6B7680; }
.p-vs__head--reezote { background: #1F528F; color: #fff; border-color: #1F528F; }
.p-vs__th {
  width: 150px;
  padding: 18px 14px;
  background: #F5F7F9;
  font-size: 15px;
  font-weight: 800;
  color: #2d2d2d;
  text-align: center;
  line-height: 1.4;
}
.p-vs__td {
  padding: 18px 20px 18px 56px;
  position: relative;
  font-size: 15px;
  line-height: 1.65;
  vertical-align: middle;
}
.p-vs__mark {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}
.p-vs__td--other { background: #FAFBFC; color: #7A848C; }
.p-vs__td--other .p-vs__mark { color: #A8B2BA; }
.p-vs__td--reezote { background: #F3F7FC; color: #14304F; font-weight: 700; }
.p-vs__td--reezote .p-vs__mark { color: #D8562B; }
.p-vs tbody tr:hover .p-vs__td--reezote { background: #E9F1FA; }

@media screen and (max-width: 768px) {
  .p-vs { min-width: 640px; }
  .p-vs__corner, .p-vs__th { width: 110px; }
  .p-vs__head { font-size: 16px; padding: 12px 8px; }
  .p-vs__th { padding: 14px 8px; font-size: 13px; }
  .p-vs__td { padding: 14px 14px 14px 46px; font-size: 13px; }
  .p-vs__mark { left: 14px; font-size: 22px; }
}

/* ===== 業務効率化例：メタ情報（残る人の仕事／使う技術／試算）===== */
.p-cases-list__item-meta {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed #C9D2DA;
}
.p-cases-list__item-meta p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.7;
}
.p-cases-list__item-meta p:last-child { margin-bottom: 0; }
.p-cases-list__item-meta span {
  display: inline-block;
  min-width: 104px;
  margin-right: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  vertical-align: 2px;
}
.p-cases-list__item-human span { background: #FFF3D6; color: #A97400; }
.p-cases-list__item-tech  span { background: #E9F1FA; color: #1F528F; }
.p-cases-list__item-calc  span { background: #F1F3F5; color: #6B7680; }
.p-cases__btn { margin-top: 48px; text-align: center; }

@media screen and (max-width: 576px) {
  .p-cases-list__item-meta p { font-size: 13px; }
  .p-cases-list__item-meta span { display: block; min-width: 0; width: fit-content; margin-bottom: 4px; }
}

/* ===== 日本語の折り返し品質 =====
   約物や単語の途中で不自然に折れるのを防ぐ。内容は変えない */
.p-fv2__title,
.common-title h2,
.p-features-list__item-title h3,
.p-solution-list__item h3,
.p-cases-list__item-body h3,
.p-problems-list__item-content-top-title h4,
.p-vs__th,
.p-vs__head {
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
}
.common-title__detail,
.p-features-list__item-text,
.p-cases-list__item-ba dd,
.p-cases-list__item-meta p,
.p-vs__td,
.service-list__item p,
.p-faq-item__a p {
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
}
/* リード文が横に伸びすぎないよう最大幅を与える */
.common-title__detail { max-width: 880px; margin-left: auto; margin-right: auto; }

/* ============================================================
   モバイル最適化（375px 実機確認で見つかった3点）
   ============================================================ */

/* ① FV見出し：36pxだと375px幅で「に、」「す。」が孤立するため縮める */
@media screen and (max-width: 576px) {
  .p-fv2__title { font-size: 29px; line-height: 1.45; }
}
@media screen and (max-width: 390px) {
  .p-fv2__title { font-size: 27px; }
}

/* 料金の考え方：補足の一文 */
.plan-box__note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed #C9D2DA;
  font-size: 13px;
  line-height: 1.7;
  color: #666;
}

/* できること：右カラム（設計の前提）を廃止したため左カラムを全幅に */
@media screen and (min-width: 769px) {
  .p-service .p-service__content-left { width: 100%; }
}

/* ===== 比較表：SPでも表形式のまま375pxに収める ===== */
@media screen and (max-width: 768px) {
  .p-vs__wrap { overflow-x: visible; }
  .p-vs { min-width: 0; width: 100%; table-layout: fixed; }
  .p-vs__corner, .p-vs__th { width: 62px; }
  .p-vs__head {
    padding: 8px 4px;
    font-size: 11px;
    line-height: 1.3;
  }
  .p-vs__head--reezote { font-size: 12px; }
  .p-vs__th {
    padding: 8px 4px;
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: -.02em;
  }
  .p-vs__td {
    padding: 8px 6px 8px 6px;
    font-size: 10.5px;
    line-height: 1.5;
    letter-spacing: -.01em;
  }
  .p-vs__mark {
    position: static;
    transform: none;
    display: block;
    margin-bottom: 2px;
    font-size: 15px;
    text-align: left;
  }
}
@media screen and (max-width: 390px) {
  .p-vs__corner, .p-vs__th { width: 56px; }
  .p-vs__th { font-size: 9.5px; }
  .p-vs__td { font-size: 10px; padding: 7px 5px; }
}

/* ============================================================
   改行の違和感対策（PC / SP 共通）
   1文字だけ次行に落ちる「孤立」を防ぐ
   ============================================================ */

/* 見出し：行数を均等に配分して孤立をなくす */
.p-fv2__title,
.common-title h2,
.common-title__detail,
.p-features-list__item-title h3,
.p-solution-list__item h3,
.p-cases-list__item-body h3,
.p-problems-list__item-content-top-title h4,
.p-problems-list__item-content-bottom p,
.service-list__item h4,
.p-vs__head,
.p-vs__th,
.plan-box__title,
.l-footer__catch {
  text-wrap: balance;
  -webkit-hyphens: none;
  hyphens: none;
}

/* 本文：最終行に1語だけ残るのを防ぐ */
.p-features-list__item-text,
.p-solution-list__item .check-list li,
.p-features-list__item .check-list li p,
.p-cases-list__item-ba dd,
.p-cases-list__item-meta p,
.p-vs__td,
.service-list__item p,
.p-faq-item__a p,
.plan-list li,
.p-switch-flow-list__item p,
.p-backup__content-text p {
  text-wrap: pretty;
}

/* 約物のぶら下げと禁則 */
.p-service .service-list__item h4,
.p-vs__th,
.p-vs__td {
  line-break: strict;
  overflow-wrap: anywhere;
}

/* SPのできること：3カラムで見出しが1文字あふれるのを防ぐ */
@media screen and (max-width: 768px) {
  .p-service .service-list__item h4 {
    font-size: 12.5px;
    letter-spacing: -.04em;
    line-height: 1.4;
  }
}
@media screen and (max-width: 390px) {
  .p-service .service-list__item h4 {
    font-size: 11.5px;
    letter-spacing: -.05em;
  }
}

/* ===== FVスロット：SPで1行に収める＋余白調整 =====
   style.css は ≤576px で font 22px / container height 110px。
   1行化で pill が約59pxになり51pxの余白が出るため、高さも合わせて詰める。
   li::after（吹き出し装飾）が bottom:-20px にはみ出すぶんは残す */
@media screen and (max-width: 768px) {
  .p-fv2__slot { margin-bottom: 20px; gap: 6px; }
  .p-fv2__slot .slot { height: 78px; }
}
@media screen and (max-width: 576px) {
  .p-fv2__slot .slot li {
    font-size: 19px;
    letter-spacing: -.02em;
    white-space: nowrap;
    padding: 10px 12px;
  }
  .p-fv2__slot .slot { height: 74px; }
  .p-fv2__slot .element { font-size: 13px; }
  .p-fv2__slot .element::before,
  .p-fv2__slot .element::after { width: 30px; }
}
@media screen and (max-width: 390px) {
  .p-fv2__slot .slot li { font-size: 17px; letter-spacing: -.03em; padding: 9px 10px; }
  .p-fv2__slot .slot { height: 68px; }
  .p-fv2__slot .slot li::after { width: 34px; height: 26px; bottom: -16px; right: 14px; }
}


/* ===== FV：SPのリード下余白 =====
   style.css は SP で .p-fv2__lead に margin-bottom:160px を置き、
   その空きに .p-fv2__content-right（画像）を absolute で重ねる設計。
   lp3 はリードが lp2 より長く 160px は空きすぎるが、詰めすぎると
   画像がCTAボタンに被る。画像の高さ分（約120px）＋余白を確保する */
@media screen and (max-width: 768px) {
  .p-fv2__lead { margin-bottom: 150px; }
  .p-fv2__content-right { bottom: 96px; max-width: 190px; }
}
@media screen and (max-width: 576px) {
  .p-fv2__lead { margin-bottom: 140px; }
  .p-fv2__content-right { right: 12px; bottom: 92px; max-width: 176px; }
  .p-fv2 { padding: 16px 0 28px; }
}
@media screen and (max-width: 390px) {
  .p-fv2__lead { margin-bottom: 128px; }
  .p-fv2__content-right { max-width: 160px; bottom: 88px; }
}


/* ===== #why の見出しだけ SP で1段小さく =====
   「いちばんよくある失敗です」が12文字あり、30pxでは 360px 必要で
   375px端末（本文幅343px）に収まらない。ここだけ font-size を下げる */
@media screen and (max-width: 576px) {
  .p-solution .common-title h2 { font-size: 28px; }
}
@media screen and (max-width: 390px) {
  .p-solution .common-title h2 { font-size: 26px; }
}

/* ===== 課題カードの結論ブロック（黄枠）=====
   style.css は min-height:156px を持つが中身は左上寄せ。
   lp3 は結論文が2行しかなく、左に寄って下に大きな余白が残っていた。
   上下左右とも中央に置き、min-height も2行ぶんに合わせる。
   ※装飾アイコンは position:absolute なので flex 化の影響を受けない */
.p-problems-list__item-content-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}
.p-problems-list__item-content-bottom p {
  text-align: center;
  line-height: 1.7;
}
@media screen and (max-width: 768px) {
  .p-problems-list__item-content-bottom { min-height: 96px; }
}

/* ===== 逆張り3カードの見出し：SPで少し大きく =====
   style.css は 576px以下で 18px。3枚とも最長8文字なので
   21px でも 168px、SP本文幅311pxに余裕で収まる */
@media screen and (max-width: 576px) {
  .p-solution-list__item h3 { font-size: 21px; }
}

/* ===== FVスロットの回転を1/2の速度に =====
   style.css は animation:slotScroll 3s + delay 0/1/2s で1項目あたり1秒。
   duration と delay は必ず同じ倍率で変えること（片方だけだと順番が崩れる）。
   6s + delay 0/2/4s で1項目あたり2秒＝速度は半分になる */
.p-fv2__slot .slot li { animation-duration: 6s; }
.p-fv2__slot .slot li:nth-child(1) { animation-delay: 0s; }
.p-fv2__slot .slot li:nth-child(2) { animation-delay: 2s; }
.p-fv2__slot .slot li:nth-child(3) { animation-delay: 4s; }

/* ===== 課題カードの結論ブロック：枠色を警告色から解決色へ =====
   style.css は border:4px solid #FBB70C（黄＝警告）。
   中身を「何を自動化できるか」に変えたため、意味と合わなくなった。
   ブランドの青に変更し、左上のアイコンも警告三角→青丸チェックに差し替え済み */
.p-problems-list__item-content-bottom {
  border-color: #1F528F;
  background-color: #F4F8FD;
}

/* ===== 課題カードの画像：5枚の比率を統一 =====
   素材の実寸が揃っていない（01〜03=472x276 比1.710 / 04・05=944x629 比1.501）。
   style.css は width:100% のみで高さを縛らないため、04・05だけ約24px縦に伸びて
   下のブロックがズレていた。01〜03の比率に合わせ、はみ出しは中央基準で切る。
   画像を差し替えても崩れないよう、ファイル側ではなくCSSで固定する */
.p-problems-list__item-content-top-img {
  aspect-ratio: 472 / 276;
  object-fit: cover;
  object-position: center;
}