@charset "UTF-8";
/* LEAD OTAKU 資料ダウンロード（フォームだけのページ）
   otaku.css の後に読み込む。スマホは1カラム、1024px以上は「左：資料の案内／右：フォーム」の2カラム。 */

.pc{display:none}
.fp-body{min-height:100vh;display:flex;flex-direction:column}

/* ---------- header ---------- */
.fp-body .hd{position:sticky;top:0;z-index:40;background:transparent}
.fp__home{display:flex;text-decoration:none}
.fp__tel{display:flex;align-items:center;gap:8px;color:var(--paper);text-decoration:none;font-family:var(--f-en);font-style:italic;font-weight:900;font-size:15px;line-height:1.1}
.fp__tel small{display:none;font-family:var(--f-sans);font-style:normal;font-weight:700;font-size:10.5px;color:#a8a39b;letter-spacing:.06em}
.fp__tel .btn__ico{width:30px;height:30px}
.fp__tel .btn__ico svg{width:15px;height:15px}

/* ---------- layout ---------- */
.fp{flex:1;padding:22px 12px 48px}
.fp__in{max-width:var(--col);margin:0 auto;display:grid;gap:22px}

/* ---------- intro ---------- */
.fp__intro{position:relative;background:var(--card);border:2px solid var(--ink);border-radius:26px;padding:24px 18px 22px;overflow:hidden}
.fp__intro::before{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px);background-size:var(--grid) var(--grid);pointer-events:none}
.fp__intro > *{position:relative}
.fp__lead{font-weight:900;font-size:15px;letter-spacing:.1em;color:var(--orange-2)}
.fp__ttl{margin-top:6px;display:grid;gap:4px;justify-items:start;line-height:1.2}
.fp__ttl .logo{font-size:clamp(34px,10vw,44px)}
.fp__ttl-ja{font-family:var(--f-serif);font-weight:900;font-size:clamp(26px,7.6vw,34px);line-height:1.35}
.fp__txt{margin-top:12px;max-width:58%;font-weight:700;font-size:13.5px;line-height:1.8}

/* 資料の表紙（CSSで描画）＋キャラクター */
/* スマホ：表紙は隠し、キャラだけ右下に小さく置いてフォームを上に寄せる */
.fp__doc{position:absolute;right:6px;bottom:-12px;width:42%;height:auto}
.fp__cover{position:absolute;left:0;top:6px;width:62%;aspect-ratio:1.414/1;background:var(--ink);color:var(--paper);border:2px solid var(--ink);border-radius:10px;padding:10% 8% 8%;display:grid;align-content:start;gap:4px;transform:rotate(-4deg);box-shadow:8px 10px 0 rgba(28,25,23,.18);overflow:hidden;isolation:isolate}
.fp__cover::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(to right,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.08) 1px,transparent 1px);background-size:14px 14px}
.fp__cover::after{content:"";position:absolute;right:-18%;bottom:-30%;width:62%;aspect-ratio:1;border-radius:50%;background:var(--grad);z-index:-1;opacity:.9}
.fp__cover-en{font-family:var(--f-en);font-style:italic;font-weight:900;font-size:9px;letter-spacing:.14em;color:var(--orange)}
.fp__cover .logo{font-size:clamp(17px,5vw,22px)}
.fp__cover-ja{margin-top:4px;font-weight:900;font-size:clamp(10px,2.9vw,12.5px);line-height:1.5}
.fp__doc .fp__cover{display:none}
.fp__cover-pdf{position:absolute;left:8%;bottom:8%;font-family:var(--f-mono);font-weight:700;font-size:9px;border:1.5px solid currentColor;border-radius:4px;padding:0 5px}
.fp__team{position:relative;width:100%;display:flex;align-items:flex-end;justify-content:flex-end}
.fp__team .char{width:32%;margin-left:-8%}
.fp__team .char--main{width:46%;z-index:2;animation:float 3s ease-in-out infinite}
.fp__team .char:not(.char--main){animation:bob 2.4s ease-in-out infinite}
.fp__team .char:last-child{animation-delay:-1.2s}

.fp__know{background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:14px 14px 12px}
.fp__know-ttl{font-weight:900;font-size:14px;color:var(--orange-2);border-bottom:1.5px dashed #d6d3cc;padding-bottom:6px;margin-bottom:8px}
.fp__know ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fp__know li{display:flex;align-items:flex-start;gap:8px;font-weight:900;font-size:14px;line-height:1.55}
.fp__ck{flex:none;width:20px;height:20px;margin-top:1px;border-radius:6px;background:var(--grad);color:var(--paper);display:grid;place-items:center}
.fp__ck svg{width:12px;height:12px}

/* ---------- form ---------- */
.fp__formwrap{background:var(--paper);border:2px solid var(--ink);border-radius:26px;padding:20px 16px 24px;box-shadow:0 14px 30px rgba(28,25,23,.1)}
.fp__steps{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:18px;font-weight:900;font-size:11.5px;color:var(--mute);white-space:nowrap}
.fp__steps span{padding:3px 10px;border-radius:99px;border:1.5px solid #cfccc5}
.fp__steps span.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.fp__steps i{width:12px;height:2px;background:#cfccc5}
.fp__formwrap .close__form{background:none;padding:0;gap:0}
/* 入力欄はLPより少し小さく */
.fp__formwrap .close__form .myForm{gap:22px!important}
.fp__formwrap .close__form .input_unit{gap:8px!important}
.fp__formwrap .close__form .form_input_label{font-size:16px!important}
.fp__formwrap .close__form .form_input_label.required::after{font-size:12px!important;padding:4px 8px!important;margin-left:10px!important}
.fp__formwrap .close__form .my_right input[type="text"]{height:60px!important;font-size:16px!important;border-color:#dcdad5!important}
.fp__formwrap .close__form .my_right input[type="text"]:focus{border-color:var(--orange)!important;outline:none!important;box-shadow:0 0 0 3px rgba(251,134,25,.2)!important}
.fp__note{margin-top:16px;font-size:12px;line-height:1.7;color:var(--mute);text-align:center}
.fp__note a{color:var(--ink)}
.fp__alt{margin-top:22px;padding-top:20px;border-top:1.5px dashed #d6d3cc;display:grid;gap:10px;text-align:center}
.fp__alt p{font-weight:900;font-size:13px}
.fp__alt .btn{min-height:58px;font-size:16px}

.fp__foot{padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}

/* ---------- PC ---------- */
@media (min-width:1024px){
  .pc{display:inline}
  .sp{display:none}
  .fp-body .hd{padding:14px max(40px,calc((100% - 1200px) / 2)) 0}
  .fp-body .hd__bar{padding:10px 14px 10px 26px;box-shadow:0 10px 30px rgba(28,25,23,.2)}
  .fp-body .hd__bar .logo{font-size:28px}
  .fp__tel{font-size:22px;gap:12px}
  .fp__tel small{display:block}
  .fp__tel .btn__ico{width:38px;height:38px}

  .fp{padding:34px 40px 80px}
  .fp__in{max-width:1200px;grid-template-columns:minmax(0,1fr) minmax(0,520px);grid-template-areas:"intro form" "know form";grid-template-rows:auto 1fr;gap:24px 40px;align-items:start}
  .fp__intro{grid-area:intro;padding:44px 44px 40px;border-width:3px;border-radius:36px}
  .fp__formwrap{grid-area:form}
  .fp__know{grid-area:know}
  .fp__txt{max-width:none}
  .fp__lead{font-size:18px}
  .fp__ttl .logo{font-size:64px}
  .fp__ttl-ja{font-size:44px}
  .fp__txt{font-size:16px}
  .fp__doc{position:relative;right:auto;bottom:auto;width:auto;height:270px;margin-top:26px}
  .fp__doc .fp__cover{display:grid;width:58%;padding:8% 7% 7%}
  .fp__cover-en{font-size:11px}
  .fp__cover .logo{font-size:32px}
  .fp__cover-ja{font-size:16px}
  .fp__cover-pdf{font-size:11px}
  .fp__team{position:absolute;right:0;bottom:-30px;width:46%}
  .fp__know{padding:20px 24px 18px;border-width:3px;border-radius:22px}
  .fp__know-ttl,.fp__know li{font-size:15.5px}

  .fp__formwrap{padding:32px 34px 34px;border-width:3px;border-radius:36px}
  .fp__steps{font-size:13px;margin-bottom:24px}
  .fp__steps i{width:22px}
}