/*
 * サイトに置くための追加。lp.css はキャンバス「WADZEE KRAFT LP」の CSS をそのまま写したもので、直さない。
 * キャンバスのページごとの CSS、デモだけの申し込み、FAQ、Contact Form 7 のフォームの見た目をここに書く。
 */

/* 紅の配色（キャンバスのトップの CSS）。すべてのページで使う */
.lp{--shu:#E83F28;--plum:#5C235A;--red:#B31A3C;--pri-h:#8F1530;--acc:#5C235A;--sol:#5C235A;--bg-2:#FBF3F3;--bubble:#F8EAEB;--bubble-2:#FBF3F3;--blush:#F8EAEB;--c-mid:#EFC9CE;--c-gray:#E0D4D5;--line:rgba(179,26,60,.22);--grad:#B31A3C;--shadow-soft:0 18px 40px -26px rgba(179,26,60,.45);--sh:179,26,60;--focus:#F5D9DD;--faint:#FCF5F6;--ent:#F6DCE1;--ent-l:rgba(179,26,60,.25)}
.hero__fig.bub::before,.bub--hero::before,.fp__fig.bub::before,.tx__fig.bub::before{background:var(--blush)}
.fm__done .ic,.tx__ic{background:var(--blush)}
.ps__sol{background:var(--sol);border:0;color:#fff}
.ps__sol h3{color:#fff}
.ps__sol .ps__lbl{color:rgba(255,255,255,.75)}
.ps__sol .ps__lbl i{background:var(--shu);box-shadow:none}
.ps__sol .fig{background:#fff;border-radius:18px;padding:2%}
.ps__sol h3 .hl,.sol__text .hl{color:#fff;background:linear-gradient(transparent 60%,var(--shu) 60%)}
.fb__lb{background:var(--red)}
.fb__g+.fb__g .fb__lb{background:var(--acc)}
.fc__no,.fv .fc__no,.ad__no{border-bottom-color:var(--red)}
.cta__g--pr .cta__c:nth-child(1){background:var(--grad)}
.cta__g--pr .cta__c:nth-child(1):hover{background:var(--pri-h);box-shadow:0 20px 44px rgba(var(--sh),.32)}
.cta__g--pr .cta__c .go i,.cta__g--pr .cta__c:nth-child(1) .go i,.sbm i,.tx__go i{color:var(--red)}
.tx__go{background:var(--grad)}
.plan--ent{background:var(--ent);border-color:var(--ent-l)}
.bt:hover,.sbm:hover,.bt--o:hover{background:var(--pri-h)}
.ps__sol::before,.cta__g--pr .cta__c:nth-child(1)::after{background:none}
.bt,.sbm,.tx__go{box-shadow:0 10px 22px -12px rgba(var(--sh),.7)}
.f input:focus,.f textarea:focus{box-shadow:0 0 0 3px var(--focus)}

/* トップ以外のページの見出し（キャンバスの申し込みと完了のページの CSS） */
.lp-sub .hd{background:#fff;backdrop-filter:none;box-shadow:none;border-bottom:1.5px solid var(--ink)}
.lp-sub .ft{display:block}

/* フッターと運営会社の、コーポレートサイトへ戻るリンク */
.ft .w{align-items:center}
.ft__nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.ft__nav a,.co__link a{text-decoration:underline;text-underline-offset:3px}
.ft__nav a:hover,.co__link a:hover{color:var(--red)}
.co__link{margin-top:12px;font-size:13px;font-weight:700}
.co__link a{display:inline-flex;align-items:center;gap:6px}
@media (max-width:640px){.ft .w{flex-direction:column;align-items:flex-start}}

/* 文の折り返し。「作成できま／す。」のように語の途中で折り返したり、最後の行に 1、2 文字だけが残ったりしないようにする。
   auto-phrase は文節の切れ目で折り返し（日本語で、html の lang が ja のとき。対応していないブラウザーは今までどおり）、
   pretty は最後の行が短くなりすぎないように前の行を詰める。1 つの文節が行より長いときは、語の途中で折り返す */
.lp :is(p,h1,h2,h3,h4,dt,dd,li,label){word-break:auto-phrase;text-wrap:pretty}
.lp .ch__ja,.lp .tx__ttl{text-wrap:balance}

/* 見出し（デモ申し込みのボタンを含む）は、スクロールしても画面の上に出しておく。
   lp.css の「static artboard」の .hd{position:absolute!important} は、キャンバスの静止画用の残りなので打ち消す */
@media screen{.hd{position:fixed!important}}

/* お悩みの 2 枚のカードは、900px より細くても、スマートフォンの幅（640px）までは 2 列に並べる（1 列では絵が大きくなりすぎる） */
@media (min-width:641px) and (max-width:900px){.ps__col{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* できること、仕組み、管理の大きなカードも、スマートフォンの幅（640px）までは絵と文を横に並べる（1 列では絵が画面いっぱいになる）。
   管理の下の 3 枚の小さなカードは、細い幅では 1 列にする */
@media (min-width:641px) and (max-width:960px){
  .fv .fc,.fv--how .fc,.fv--how .fc:nth-child(even),.ad--main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
  .fv .fc:nth-child(even) .fc__fig{order:2}
  .adm__g{grid-template-columns:minmax(0,1fr)}
}

/* 料金：5 列が入らない幅では、2 列の縦長のカード（5 枚目が余る）にせず、プランを 1 行ずつの横長にする。
   左に名前と人数、真ん中に料金、右にオプション。スマートフォンでは、1 段目に名前と料金、2 段目にオプション */
@media (max-width:1000px){
  .plans{grid-template-columns:minmax(0,1fr);gap:10px}
  .plans .plan{display:grid;grid-template-columns:minmax(8em,1fr) 10em minmax(14em,1.3fr);grid-template-areas:"name price opt" "users price opt";column-gap:28px;align-items:center;padding:18px 26px}
  .plans .plan__name{grid-area:name;align-self:end;white-space:nowrap}
  .plans .plan__users{grid-area:users;align-self:start;margin:2px 0 0}
  .plans .plan__price{grid-area:price;margin:0;font-size:30px;row-gap:2px}
  .plans .plan__price--ask{font-size:26px}
  .plans .plan__opt,.plans .plan__note{grid-area:opt;margin:0;padding:0 0 0 24px;border-top:0;border-left:1px dashed var(--line);gap:6px}
}
@media (max-width:760px){
  .plans .plan{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name price" "users price" "opt opt";padding:16px 18px;column-gap:12px}
  .plans .plan__price{justify-self:end;justify-content:flex-end;text-align:right;font-size:26px}
  .plans .plan__price small{font-size:12px}
  .plans .plan__price--ask{font-size:22px}
  .plans .plan__opt,.plans .plan__note{margin-top:12px;padding:12px 0 0;border-left:0;border-top:1px dashed var(--line)}
}

/* VK All in One Expansion Unit の「ページの先頭へ」のボタン。CSS を外したので文字だけが出る。LP では出さない */
#page_top{display:none}

/* 申し込みはデモだけなので、料金の下の申し込みの枠を 1 列にする */
.cta__g--one{grid-template-columns:minmax(0,1fr)}

/* よくある質問（キャンバス「KRAFT の仕組み」の FAQ） */
.qa{margin:0;max-width:860px;display:flex;flex-direction:column;border-bottom:1px solid var(--ink)}
.qa div{padding:24px 0;border-top:1px solid var(--ink);display:flex;flex-direction:column;gap:10px}
.qa dt{font-size:18px;font-weight:800;line-height:1.6}
.qa dt::before{content:"Q";margin-right:12px;font-size:20px;font-weight:800;color:var(--shu)}
.qa dd{margin:0;font-size:15px;line-height:1.9;color:var(--ink-2)}

/* Contact Form 7 のフォーム（mghp-forms の LP の形）。選択肢は CF7 の label > input + span を .ch2 の形に合わせる */
.fm .wpcf7-form-control-wrap{display:block}
/* 2 列の欄（デモ希望日）で、片方にだけ説明があると、もう片方の欄が行の高さに引き伸ばされ、見出しと入力欄が下にずれる。上に詰める */
.fm .f{align-content:start}
.fm .wpcf7-list-item{margin:0}
/* lp.css の .ch2 span は CF7 の入れ物の span にも当たるので、入れ物は枠を持たせず中身だけを並べる */
.fm .ch2 .wpcf7-form-control-wrap,.fm .ch2 .wpcf7-form-control,.fm .ch2 .wpcf7-list-item{display:contents}
.fm .ch2 .wpcf7-form-control-wrap::before,.fm .ch2 .wpcf7-form-control::before,.fm .ch2 .wpcf7-list-item::before{content:none}
.fm .wpcf7-not-valid-tip{margin-top:6px;font-size:12px;font-weight:700;color:var(--red)}
.fm .f input.wpcf7-not-valid,.fm .f textarea.wpcf7-not-valid{border-color:var(--red);background:var(--faint)}
.fm .mghp-captcha{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fm .mghp-captcha img{border:1px solid var(--line);border-radius:6px}
.fm .mghp-captcha input{max-width:200px}
.fm__agree textarea{width:100%;box-sizing:border-box;margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:12px;line-height:1.7;color:var(--ink-2);resize:vertical}
.fm__agree .wpcf7-acceptance .wpcf7-list-item-label{font-size:14px;font-weight:700;color:var(--ink)}
.fm__agree .wpcf7-acceptance label{display:flex;align-items:center;gap:10px;margin-top:12px;cursor:pointer}
.fm__agree .wpcf7-acceptance input{width:20px;height:20px;margin:0;accent-color:var(--ink)}
.fm input.sbm{padding:0 32px;justify-content:center;color:#fff;-webkit-appearance:none;appearance:none}
.fm .wpcf7-spinner{display:block;margin:12px auto 0}
.fm .wpcf7 form .wpcf7-response-output{margin:24px 0 0;padding:12px 16px;border-radius:10px;font-size:14px}