/* contact.html 専用のスタイル。
   このページからしか読み込まないので、セレクタを限定する必要はない。
   全ページ共通の指定は assets/common.css にある。 */

body{--field:#FFFFFF; --field-border:#D8D2C8; --footer-pad-bottom:96px;}
.page{max-width:760px;margin:0 auto;padding:24px 16px 56px;}
.c-hero{background:var(--bg-sub);position:relative;overflow:hidden;padding:32px 16px 28px;border-bottom:1px solid var(--border);}
.c-hero p{font-size:var(--text-base);color:var(--text-sub);margin:0;line-height:1.85;}
.c-hero p .em{color:var(--primary);font-weight:700;}
.purpose{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;}
.purpose-card{background:#fff;border:2px solid var(--border);border-radius:18px;padding:26px 20px;text-align:center;text-decoration:none;color:var(--text);transition:border-color .15s,background-color .15s,transform .15s;cursor:pointer;}
/* タッチ端末では効かせない。1回目のタップがホバーの発生として扱われ、
   その要素への操作が2回目のタップまで届かなくなるため。 */
@media (hover:hover) and (pointer:fine){
.purpose-card:hover{transform:translateY(-2px);}
}
.purpose-card.active{border-color:var(--primary);background:var(--primary-soft);}
.purpose-card .ic{width:40px;height:40px;margin:0 auto 14px;color:var(--primary);}
.purpose-card .ic svg{width:40px;height:40px;}
.purpose-card .t{font-size:var(--text-base);font-weight:700;margin-bottom:6px;}
.purpose-card .s{font-size:var(--text-xs);color:var(--text-sub);}
@media (max-width:480px){
.purpose{grid-template-columns:1fr;}
}
.form-card{background:#fff;border:1px solid var(--border);border-radius:22px;padding:32px 28px;margin-top:24px;}
.form-tag{display:inline-block;font-size:var(--text-xs);font-weight:700;padding:6px 14px;border-radius:var(--radius-pill);letter-spacing:0.02em;margin-bottom:16px;}
.form-tag.trial{background:var(--primary);color:#fff;}
.form-tag.inquiry{background:var(--text);color:#fff;}
.form-card h2{font-size:var(--text-lg);font-weight:800;margin:0 0 8px;letter-spacing:-0.005em;}
.form-card .note{font-size:var(--text-sm);color:var(--text-sub);margin:0 0 22px;line-height:1.7;}
.bring{background:var(--primary-soft);border:1px solid #F6D6CE;border-radius:14px;padding:16px 18px;margin-bottom:24px;}
.bring .label{display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--text-sm);margin-bottom:8px;}
.bring .label svg{width:16px;height:16px;color:var(--primary);}
.bring p{margin:0;font-size:var(--text-sm);color:#9A4030;line-height:1.8;}
.field label .hint{color:var(--text-sub);font-weight:500;font-size:var(--text-xs);margin-left:6px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:480px){
.field-row{grid-template-columns:1fr;gap:0;}
.field-row .field{margin-bottom:18px;}
}
.inp,.sel,.txt{width:100%;background:var(--field);border:1.5px solid var(--field-border);border-radius:12px; color:var(--text);font-family:var(--font-jp);font-size:var(--text-base);padding:14px 16px;line-height:1.5; transition:border-color .15s,box-shadow .15s;}
.inp::placeholder,.txt::placeholder{color:var(--text-mute);}
.inp:focus,.sel:focus,.txt:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(239,68,48,0.18);}
.sel{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C2C2C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px;cursor:pointer;}
.sel option{color:#2C2C2C;}
.txt{resize:vertical;min-height:110px;}
.txt.lg{min-height:130px;}
.slot-hint{font-size:var(--text-xs);color:var(--text-sub);line-height:1.65;margin:8px 2px 0;}
.consent{margin-top:24px;background:var(--bg-sub);border:1px solid var(--border); border-radius:14px;padding:16px 18px;}
.consent label{display:flex;align-items:flex-start;gap:11px;cursor:pointer; font-size:var(--text-sm);line-height:1.8;color:var(--text);margin:0;font-weight:500;}
.consent input[type="checkbox"]{flex-shrink:0;width:22px;height:22px;margin:2px 0 0; accent-color:var(--primary);cursor:pointer;}
.consent input[type="checkbox"]:focus-visible{outline:2px solid var(--text);outline-offset:2px;}
.consent a{color:var(--primary);font-weight:700;}
.consent .req{color:var(--primary);font-size:var(--text-xs);font-weight:700;margin-left:4px;white-space:nowrap;}
.submit .btn{width:100%;min-height:58px;font-size:var(--text-base);font-weight:800;}
.or{display:flex;align-items:center;gap:18px;margin:36px 4px;color:var(--text-mute);font-size:var(--text-sm);}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--border-strong);}
@media (min-width:760px){
.page{padding:40px 24px 72px;}
.c-hero{padding:48px 24px 40px;}
.c-hero p{font-size:var(--text-base);}
.form-card{padding:40px 44px;}
}