/* 紹介ページ（料金・種類別・よくある質問）。トップの home.css と一緒に読む
   文字の大きさはトップと同じ：44・36（最初の見出し）・28（見出し）・20・16・13 */

/* 見出しの帯：トップのキービジュアルを小さくしたもの */
.lp-hero{--ink:#1c1b19;position:relative;padding:28px var(--gut) 72px;background:var(--ink);color:#e9e6dd;overflow:hidden;isolation:isolate}
.lp-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:57px;z-index:-1;background:var(--bg);clip-path:polygon(0 70%,100% 0,100% 100%,0 100%)}
.lp-hero-in{max-width:var(--page);margin:0 auto}
.lp-crumbs{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 28px;font-size:var(--fs-s);color:#a9a59a}
.lp-crumbs a{color:#cfcbc0}.lp-crumbs a:hover{color:#fff}
.lp-crumbs [aria-current]{color:#e9e6dd}
.lp-eyebrow{display:inline-block;margin:0 0 14px;padding:4px 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;font-size:var(--fs-s);font-weight:700;color:#fff}
.lp-hero h1{margin:0;color:#fff;font-size:28px;line-height:1.35;letter-spacing:-.01em}
@media (min-width:600px){.lp-hero h1{font-size:36px}}
@media (min-width:1040px){.lp-hero h1{font-size:44px;line-height:1.28}}
.lp-hero mark{background:linear-gradient(transparent 70%,var(--accent) 70%,var(--accent) 92%,transparent 92%);color:inherit;padding:0 .04em}
.lp-lead{margin:18px 0 0;color:#cfcbc0;line-height:1.85}

.lp-first{padding-top:24px}
.lp-center{text-align:center}
.lp-more{margin:16px 0 0}
.lp-more a{font-weight:700}

/* 規約・プライバシーポリシー・特商法：紙の地で、売り込みの飾りを付けない */
.lp-plain{padding:24px var(--gut) 8px;background:transparent;color:var(--fg)}
.lp-plain::after{display:none}
.lp-plain .lp-crumbs{margin-bottom:16px;color:var(--muted)}.lp-plain .lp-crumbs a{color:var(--muted)}.lp-plain .lp-crumbs [aria-current]{color:var(--fg)}
.lp-plain h1{color:var(--fg);font-size:28px}
@media (min-width:600px){.lp-plain h1{font-size:36px;line-height:1.35}}
/* 帯の下に続く本文の箱 */
.lp-body{margin-top:8px}
.lp-hero .chip{vertical-align:middle}

/* 料金：追加の費用 0 円 */
.lp-zero{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (min-width:600px){.lp-zero{grid-template-columns:repeat(3,1fr)}}
.lp-zero li{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 16px;background:#fff;border:1px solid var(--line);border-radius:12px;text-align:center;font-weight:700}
.lp-zero .hp-num{font-size:56px;color:var(--accent)}
.lp-zero .hp-num small{color:var(--fg)}
@media (max-width:599px){.lp-zero li{flex-direction:row;justify-content:flex-start;gap:16px;padding:14px 18px;text-align:left}.lp-zero .hp-num{font-size:40px;min-width:1.6em}}

/* 料金：支払い方法の表 */
.lp-table{width:100%;min-width:560px;border-collapse:collapse;background:#fff;font-size:var(--fs-s)}
.lp-table th,.lp-table td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.6}
.lp-table thead th{background:var(--hover);white-space:nowrap}
.lp-table tbody th{width:28%;font-size:var(--fs-m)}
.lp-table tbody th span{display:block;font-size:var(--fs-s);font-weight:400;color:var(--muted)}
.lp-table td b{font-size:var(--fs-m)}
.lp-table tbody tr:last-child td,.lp-table tbody tr:last-child th{border-bottom:0}
@media (max-width:599px){
  .lp-table{min-width:0}.lp-table thead{display:none}
  .lp-table tr{display:block;padding:14px 16px;border-bottom:1px solid var(--line)}.lp-table tbody tr:last-child{border-bottom:0}
  .lp-table th,.lp-table td{display:block;width:auto!important;padding:0;border:0}
  .lp-table td{display:grid;grid-template-columns:7.5em 1fr;gap:8px;margin-top:8px}
  .lp-table td::before{content:attr(data-lb);color:var(--muted)}
}

/* 料金：受け取れる金額の例 */
.lp-ex{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (max-width:599px){.lp-ex{grid-template-columns:1fr 1fr;gap:10px}.lp-ex li{padding:16px 14px}.lp-ex-out .hp-num{font-size:28px}}
@media (min-width:600px){.lp-ex{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.lp-ex{grid-template-columns:repeat(4,1fr)}}
.lp-ex li{display:flex;flex-direction:column;gap:10px;padding:20px;background:#fff;border:1px solid var(--line);border-top:5px solid var(--gc,var(--accent));border-radius:12px}
.lp-ex li.g-run,.lp-g.g-run{--gc:var(--g-run)}.lp-ex li.g-meet,.lp-g.g-meet{--gc:var(--g-meet)}.lp-ex li.g-tour,.lp-g.g-tour{--gc:var(--g-tour)}.lp-ex li.g-show,.lp-g.g-show{--gc:var(--g-show)}
.lp-ex .chip{align-self:flex-start}
.lp-ex-cond{margin:0;font-size:var(--fs-s);line-height:1.7;color:var(--muted)}
.lp-ex-out{display:flex;flex-direction:column;margin:auto 0 0;padding-top:12px;border-top:1px solid var(--line)}
.lp-ex-out span{font-size:var(--fs-s);font-weight:700}
.lp-ex-out .hp-num{font-size:36px}
.lp-ex-fee{margin:0;font-size:var(--fs-s);color:var(--muted)}

/* 料金：計算 */
.lp-calc{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:14px}
.lp-calc-cell{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-s);font-weight:700;color:var(--muted)}
.lp-calc .kv-calc-in{font-weight:700;color:var(--fg)}
.lp-calc .kv-calc-in span{white-space:nowrap}
.lp-calc-x{margin-bottom:14px;font-size:var(--fs-l);font-weight:700}
.lp-calc-res{grid-column:1/-1;display:grid;gap:4px;padding-top:12px;border-top:1px solid var(--line)}
.lp-calc-res p{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;font-size:var(--fs-s);color:var(--muted)}
.lp-calc-res p span:first-child{margin-right:auto}
.lp-calc-res b{font-family:var(--font-disp);font-size:20px;color:var(--fg)}
.lp-calc-net{margin-top:8px!important;padding-top:10px;border-top:2px solid var(--fg);color:var(--fg)!important;font-weight:700;font-size:var(--fs-m)!important}
.lp-calc-net b{font-size:40px!important;color:var(--accent)!important}
@media (max-width:520px){.lp-calc{grid-template-columns:1fr}.lp-calc-x{display:none}}

/* よくある質問 */
.lp-toc{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.lp-toc a{padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:var(--fs-s);font-weight:700;text-decoration:none}
.lp-toc a:hover{border-color:var(--fg);color:var(--fg)}
.lp-faq{padding-top:48px;scroll-margin-top:12px}
.hp .faq summary{font-weight:700}
.hp .faq p{font-size:var(--fs-m);line-height:1.8}
.lp-go{white-space:nowrap;font-weight:700}
.lp-go::after{content:" →";color:var(--accent)}
.lp-contact{padding:28px 24px;background:#fff;border:1px solid var(--line);border-radius:12px}
.lp-contact .hp-h2{font-size:var(--fs-l)}
.lp-contact p{margin:0}

/* 種類別：一覧 */
.lp-for{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (min-width:760px){.lp-for{grid-template-columns:1fr 1fr}}
.lp-for>li{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px 22px 20px;background:#fff;border:1px solid var(--line);border-top:5px solid var(--gc);border-radius:12px}
.lp-for>li.g-run{--gc:var(--g-run)}.lp-for>li.g-meet{--gc:var(--g-meet)}.lp-for>li.g-tour{--gc:var(--g-tour)}.lp-for>li.g-show{--gc:var(--g-show)}
.lp-for h2{margin:0;font-size:var(--fs-l)}
.lp-for h2 a{text-decoration:none}
.lp-for h2 a::before{content:"";position:absolute;inset:0}
.lp-for>li:hover{border-color:var(--fg);border-top-color:var(--gc)}
.lp-for ul,.lp-worry ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lp-for ul li,.lp-worry li{display:flex;gap:10px;align-items:baseline;line-height:1.6}
.lp-for ul li::before,.lp-worry li::before{content:"";width:8px;height:8px;flex:none;border-radius:2px;background:var(--gc,var(--accent));transform:translateY(-1px) rotate(45deg)}
.lp-key{font-weight:700}
.lp-for ul li:not(.lp-key){color:var(--muted)}
.lp-for-go{margin-top:auto;font-size:var(--fs-s);font-weight:700}
.lp-for-go::after{content:" →";color:var(--accent)}

/* 種類別：各ページ */
.lp-worry{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.lp-worry{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}}
.lp-worry-q{margin:0 0 16px;font-size:var(--fs-l);font-weight:700;line-height:1.5}
.lp-worry ul{gap:10px}
.lp-worry li a{text-decoration:none}
.lp-worry li a:hover{text-decoration:underline}
.lp-worry li:not(.lp-key) a{color:var(--muted)}
.lp-sol{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:s}
@media (min-width:760px){.lp-sol{grid-template-columns:1fr 1fr}}
.lp-sol li{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 20px 20px;background:#fff;border:1px solid var(--line);border-radius:12px;counter-increment:s;scroll-margin-top:12px}
.lp-sol li::before{content:counter(s,decimal-leading-zero);font-family:var(--font-disp);font-weight:700;font-size:36px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--gc,var(--accent))}
.lp-sol-w{margin:0;font-size:var(--fs-s);font-weight:700;color:var(--muted)}
.lp-sol-w::before{content:"「"}.lp-sol-w::after{content:"」"}
.lp-sol h3{margin:0;font-size:var(--fs-l);line-height:1.45}
.lp-sol p:not(.lp-sol-w){margin:0;font-size:var(--fs-s);line-height:1.8;color:var(--muted)}
.lp-sol a{margin-top:auto;padding-top:4px;font-size:var(--fs-s);font-weight:700}
.lp-sol a::after{content:" →";color:var(--accent)}
.lp-dl{margin:0;padding:6px 20px;background:#fff;border:1px solid var(--line);border-radius:12px}
.lp-dl>div{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
.lp-dl>div:last-child{border-bottom:0}
@media (min-width:760px){.lp-dl>div{grid-template-columns:12em 1fr;gap:16px}}
.lp-dl dt{font-weight:700}.lp-dl dd{margin:0;color:var(--muted)}
.lp-others{display:flex;flex-wrap:wrap;gap:10px;margin:48px 0 0}
.lp-others a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:2px solid var(--fg);border-bottom-width:5px;border-bottom-color:var(--gc);border-radius:8px;background:#fff;font-weight:700;text-decoration:none}
.lp-others a.g-run{--gc:var(--g-run)}.lp-others a.g-meet{--gc:var(--g-meet)}.lp-others a.g-tour{--gc:var(--g-tour)}.lp-others a.g-show{--gc:var(--g-show)}
.lp-others a:hover{color:var(--fg);transform:translateY(-1px)}

/* サービス紹介：よくある導入の壁 */
.lp-wall{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (min-width:900px){.lp-wall{grid-template-columns:repeat(3,1fr)}}
.lp-wall li{display:flex;flex-direction:column;gap:10px;padding:22px 20px 20px;background:#fff;border:1px solid var(--line);border-radius:12px}
.lp-wall-q{margin:0;font-size:var(--fs-l);font-weight:700;line-height:1.5}
.lp-wall-q::before{content:"「"}.lp-wall-q::after{content:"」"}
.lp-wall-but{align-self:flex-start;padding:2px 10px;border-radius:4px;background:var(--fg);color:#fff;font-size:var(--fs-s);font-weight:700}
.lp-wall p:not(.lp-wall-q){margin:0;font-size:var(--fs-s);line-height:1.8;color:var(--muted)}
.lp-wall b{color:var(--fg)}
.lp-wall a{margin-top:auto;padding-top:4px;font-size:var(--fs-s);font-weight:700}
.lp-wall a::after{content:" →";color:var(--accent)}

/* 機能一覧：各項目の「何がよくなるか」と画面 */
.g-out{margin:-4px 0 14px;font-size:var(--fs-m);font-weight:700;line-height:1.6}
.g-shot{margin:0 0 16px}
.g-shot img{display:block;width:100%;max-width:560px;height:auto;border:1px solid var(--line);border-radius:10px}
.g-rel{margin:12px 0 0;font-size:var(--fs-s)}
.g-rel a{font-weight:700;margin-right:14px}
.g-rel a::after{content:" →";color:var(--accent)}

/* サービス紹介：画面では見出しの帯を使い、チラシの見出しと説明は印刷のときだけ出す */
@media screen{.fly-hero .fly-kicker,.fly-hero h1,.fly-hero .fly-lead{display:none}.fly .fly-hero{padding-top:8px}}
