/* トップ 第7版の見た目（2026-10-30。Codex 案 top6/codex-3.txt）。body.wping-v7 のときだけ効く */
.wping-v7{--line2:#CADDD5;--soft:#52665E;--num:#A9C8BB}
.wping-v7 main>section{padding:80px 0}
.wping-v7 main>section#price+section#flow{padding-top:64px}
.wping-v7 .sec-title{font-size:36px;line-height:1.35;margin-bottom:16px}
.wping-v7 .sec-title small{font-size:12px;letter-spacing:.14em;margin-bottom:10px}
.wping-v7 .lead{margin:0 0 32px;color:var(--soft)}
.wping-v7 .btn{box-shadow:none;transition:background-color .15s}
.wping-v7 .btn:hover{background:#963819}
.wping-v7 .btn-line:hover{background:var(--mint)}

/* 最初の画面 */
.wping-v7 .hero{padding:48px 0 56px;position:relative;overflow:hidden}
.wping-v7 .hero .wrap{position:relative}
.wping-v7 .hero-grid{grid-template-columns:690px 1fr;gap:32px;align-items:start}
.wping-v7 .hero h1{letter-spacing:0;line-height:1.22}
.wping-v7 .hero-lead{font-size:18px;font-weight:400;line-height:1.8;color:#243B35;margin:16px 0 8px}
.wping-v7 .pl-yen{font-size:48px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.wping-v7 .pl-yen small{font-size:27px;font-weight:800;letter-spacing:0}
.wping-v7 .pl-note{font-size:15px;font-weight:500;color:var(--soft)}
.wping-v7 .call{margin:20px 0 16px;gap:8px 12px}
.wping-v7 .call-main{font-size:28px;font-weight:800}
.wping-v7 .badge{font-size:20px;font-weight:800;border-width:2px;padding:4px 12px}
.wping-v7 .checks6{gap:0 24px;margin:0 0 20px}
.wping-v7 .checks6 a{padding:12px 0;border-bottom:1px solid var(--line2);font-weight:600}
.wping-v7 .checks6 .ck{width:20px;height:20px;font-size:12px}
.wping-v7 .checks6 .sy b{font-size:24px;font-weight:700;color:var(--green)}
.wping-v7 .hero .also{font-size:16px}
.wping-v7 .hero .also b{font-weight:600}
.wping-v7 .hero-art{position:relative;margin-top:96px;display:flex;justify-content:center}
.wping-v7 .hero-art img{position:relative;width:100%;max-width:420px;transform:none;border-radius:0}
.wping-v7 .points{margin-top:40px;gap:0;background:#fff;border:1px solid var(--line2);border-radius:12px;box-shadow:0 8px 24px rgba(18,62,53,.06)}
.wping-v7 .point{border:0;border-radius:0;padding:24px;background:none}
.wping-v7 .point+.point{border-left:1px solid var(--line2)}
.wping-v7 .point .p-label{font-size:16px;font-weight:600}
.wping-v7 .point .p-big{font-size:26px;font-weight:800}
.wping-v7 .point .p-sub{font-size:16px;color:var(--soft)}
.wping-v7 .scope{margin-top:20px;font-weight:600}

/* 選ばれる理由: 箱をやめ、線と番号で */
.wping-v7 .reason .btn{column-gap:0}
.wping-v7 .reasons{gap:32px}
.wping-v7 .reason{background:none;box-shadow:none;border:0;border-left:1px solid var(--line2);border-radius:0;padding:0 0 0 24px}
.wping-v7 .reason .num{display:block;font-size:32px;font-weight:700;letter-spacing:0;color:var(--num);line-height:1.2;margin-bottom:12px}
.wping-v7 .reason h3{font-size:22px;margin:0 0 10px}
.wping-v7 .reason p{color:#243B35}
.wping-v7 .reason.wide{margin-top:8px;background:var(--mint);border:0;border-radius:12px;padding:28px}
.wping-v7 .reason.wide .num{font-size:24px}

/* 料金表 */
.wping-v7 .price-table{box-shadow:none;border:1px solid var(--line2)}
.wping-v7 .price-table thead th{padding:16px 24px}
.wping-v7 .price-table td{padding:22px 24px;border-bottom-color:var(--line2)}
.wping-v7 .price-table td:first-child{font-size:18px}
.wping-v7 .price-table .what{font-size:16px;font-weight:400;color:var(--soft)}
.wping-v7 .price-table td.yen{font-size:32px;font-weight:800;width:200px}
.wping-v7 .pay-note{border-left-width:3px;padding:20px 24px}

/* ご相談から完了まで: 番号の丸を線でつなぐ */
.wping-v7 .flow{gap:32px}
.wping-v7 .flow li{background:none;box-shadow:none;border-radius:0;padding:0}
.wping-v7 .flow li::before{content:counter(step);display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;margin:0 0 16px;border-radius:50%;font-size:18px;letter-spacing:0;position:relative;z-index:1}
.wping-v7 .flow li:not(:last-child)::after{left:48px;right:-24px;top:20px;width:auto;height:1px;border:0;background:var(--green);opacity:.35;transform:none}
.wping-v7 .flow h3{font-size:20px;margin-bottom:12px}
.wping-v7 .flow p{color:#243B35}

/* 症状別の確認・修正の進め方 */
.wping-v7 .case{grid-template-columns:200px 1fr 1fr 1fr;border:1px solid var(--line2);border-left:4px solid var(--green);border-radius:10px;margin-bottom:16px}
.wping-v7 .case>div{padding:24px}
.wping-v7 .case .c-tag{background:none;color:var(--head);font-size:18px}
.wping-v7 .case dt{font-size:14px;font-weight:700}
.wping-v7 .case>div+div{border-left-color:#E2ECE7}

/* カスタマイズ・保守 */
.wping-v7 .svc .card{box-shadow:none;border:1px solid var(--line2);border-radius:16px;padding:32px}
.wping-v7 .svc .card+.card{background:#E6F0EB}
.wping-v7 .svc h2{font-size:28px}
.wping-v7 .ticks{gap:12px}
.wping-v7 .svc-price{font-size:34px;font-weight:800}
.wping-v7 .svc .btn{box-shadow:none}

/* 症状から探す: 列に流し、緑のリンク行に */
.wping-v7 #guide{border-bottom:0}
.wping-v7 #guide .guide-grid{display:block;columns:3;column-gap:24px}
.wping-v7 #guide .guide-group{display:inline-block;width:100%;break-inside:avoid;margin:0 0 24px;padding:20px;border-color:var(--line2)}
.wping-v7 #guide .guide-group h3{font-size:18px;border-bottom:0;padding-bottom:4px;margin-bottom:4px}
.wping-v7 #guide .guide-group li+li a{border-top:1px solid #E2ECE7}
.wping-v7 #guide .guide-group a{position:relative;padding:10px 20px 10px 0;color:var(--green);text-decoration:none}
.wping-v7 #guide .guide-group a::after{content:"›";position:absolute;right:2px;top:50%;transform:translateY(-52%);font-size:20px;line-height:1;color:var(--green)}
.wping-v7 #guide .guide-group a:hover{color:var(--green-dark);text-decoration:underline;text-underline-offset:3px}
.wping-v7 #guide .guide-more{margin-top:0}

/* よくある質問 */
.wping-v7 #faq{border-top:1px solid var(--line2)}
.wping-v7 .faq .sec-title{margin-bottom:32px}
.wping-v7 .faq details{border-bottom:1px solid var(--line2)}
.wping-v7 .faq summary{padding:24px 48px 24px 40px;font-size:18px}
.wping-v7 .faq summary::before{font-size:20px;top:23px}
.wping-v7 .faq summary::after{font-size:22px}
.wping-v7 .faq details p{padding:0 10px 24px 40px;margin-top:-8px}

/* 相談フォーム */
.wping-v7 .fgroup{box-shadow:none!important;border:1px solid var(--line2);border-radius:16px;padding:32px}
.wping-v7 .form input,.wping-v7 .form select{min-height:52px;border-width:1px;border-color:#788D84;border-radius:6px}
.wping-v7 .form textarea{border-width:1px;border-color:#788D84;border-radius:6px}
.wping-v7 #f-body{height:180px;min-height:180px}
.wping-v7 #f-before{height:96px;min-height:96px}

/* 自社サービスの案内・フッター */
.wping-v7 main>section#saas{padding:40px 0}
.wping-v7 .saas{border-color:var(--line2);border-radius:12px;padding:28px}

/* Codex の批評（codex-4）: 症状の料金を PC は3列×2段に・症状別の進め方を少し詰める・一覧へのリンクも緑に */
@media (min-width:1024px){
  .wping-v7 .checks6{grid-template-columns:repeat(3,1fr);gap:0 20px}
}
.wping-v7 .case>div{padding:20px 24px}
.wping-v7 #guide .guide-more .textlink{color:var(--green);font-size:16px}

/* タブレット */
@media (max-width:1023px){
  .wping-v7 .hero-grid{grid-template-columns:1fr 300px}
  .wping-v7 .hero-art{margin-top:120px}
}

/* スマホ */
@media (max-width:767px){
  .wping-v7 main>section{padding:48px 0}
  .wping-v7 main>section#price+section#flow{padding-top:40px}
  .wping-v7 .sec-title{font-size:28px;line-height:1.4;margin-bottom:12px}
  .wping-v7 .sec-title small{font-size:11px}
  .wping-v7 .lead{margin-bottom:24px}
  .wping-v7 .hero{padding:24px 0 32px}
  .wping-v7 .hero-grid{grid-template-columns:1fr;gap:0}
  .wping-v7 .hero-grid>div:first-child{display:flex;flex-direction:column}
  .wping-v7 .hero .record{order:1;align-self:flex-start}
  .wping-v7 .hero h1{order:2;font-size:36px}
  .wping-v7 .hero .price-line{order:3}
  .wping-v7 .hero .call{order:4}
  .wping-v7 .hero .checks6{order:5}
  .wping-v7 .hero .also{order:6}
  .wping-v7 .hero .actions{order:7}
  .wping-v7 .hero .hero-lead{order:8;font-size:16px;line-height:1.75;margin:24px 0 0}
  .wping-v7 .hero .sp-promise{order:9}
  .wping-v7 .hero .open247{order:10}
  .wping-v7 .pl-yen{font-size:36px}
  .wping-v7 .pl-yen small{font-size:21px}
  .wping-v7 .call-main{font-size:23px}
  .wping-v7 .badge{font-size:18px}
  .wping-v7 .checks6{gap:0 12px}
  .wping-v7 .checks6 .sy{font-size:15px}
  .wping-v7 .checks6 .sy b{font-size:22px}
  .wping-v7 .hero .actions .btn{width:100%}
  .wping-v7 .hero-art{margin:24px 0 0}
  .wping-v7 .hero .scope{margin-top:24px}
  .wping-v7 .hero-art img{max-width:180px}
  .wping-v7 .reasons{gap:28px}
  .wping-v7 .reason{padding-left:20px}
  .wping-v7 .reason .num{font-size:24px}
  .wping-v7 .reason h3{font-size:20px}
  .wping-v7 .reason.wide{display:block;padding:20px}
  .wping-v7 .reason.wide .btn{margin-top:20px;width:100%}
  .wping-v7 .price-table td.yen{font-size:28px;width:auto}
  .wping-v7 .flow{gap:28px}
  .wping-v7 .flow li{padding-left:48px;min-height:32px}
  .wping-v7 .flow li::before{position:absolute;left:0;top:0;width:32px;height:32px;font-size:16px;margin:0}
  .wping-v7 .flow li:not(:last-child)::after{left:16px;right:auto;top:32px;bottom:-28px;width:1px;height:auto}
  .wping-v7 .case>div{padding:20px}
  .wping-v7 .svc{gap:20px}
  .wping-v7 .svc .card{padding:24px}
  .wping-v7 .svc h2{font-size:24px}
  .wping-v7 .svc-price{font-size:30px}
  .wping-v7 #guide .guide-grid{columns:1}
  .wping-v7 #guide .guide-group{margin-bottom:16px;padding:16px 18px}
  .wping-v7 #guide .guide-group a{min-height:44px;display:flex;align-items:center;line-height:1.6}
  .wping-v7 .faq summary{font-size:16px;padding:20px 40px 20px 36px}
  .wping-v7 .faq summary::before{top:19px}
  .wping-v7 .faq details p{padding-left:36px}
  .wping-v7 .fgroup{padding:20px}
  .wping-v7 #f-body{height:160px;min-height:160px}
  .wping-v7 main>section#saas{padding:32px 0}
  .wping-v7 .saas{padding:20px}
}