/* 巴電気通信 お問い合わせフォーム（案5の配色・書体に合わせる） */
:root{
  --bg:#F6F5F4; --surface:#FFFFFF; --tile:#ECEAE8; --ink:#2B2B2A; --muted:#66625F; --line:#DDD9D6;
  --primary:#D7000F; --primary-dark:#8E0010; --charcoal:#373735; --error:#B00010; --error-bg:#FCECEC;
  --head:"Source Serif 4","Noto Serif JP","Noto Serif CJK JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --body:"Inter","Noto Sans JP","Noto Sans CJK JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.8;letter-spacing:.02em}
a{color:var(--primary)}
a:hover{color:var(--primary-dark)}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:6px}
.wrap{width:min(100% - 40px,760px);margin-inline:auto}

.site-header{background:rgba(246,245,244,.9);border-bottom:1px solid var(--line)}
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:68px;width:min(100% - 40px,1200px)}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none}
.logo img{height:40px;width:auto;display:block}
.logo-ja{font-size:12px;color:var(--muted);letter-spacing:.06em;padding-left:14px;border-left:1px solid var(--line)}
.back{font-size:14px;color:var(--ink);text-decoration:none}
.back:hover{color:var(--primary)}
@media (max-width:560px){.logo-ja{display:none}.logo img{height:34px}}

.main{padding:clamp(40px,7vw,80px) 0}
h1{margin:0 0 16px;font-family:var(--head);font-weight:900;font-size:clamp(32px,5vw,52px);line-height:1.2}
.lead{margin:0 0 32px;color:var(--muted)}

.form-error{margin:0 0 24px;padding:14px 18px;border-radius:14px;background:var(--error-bg);color:var(--error);font-weight:700}

form{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:clamp(20px,5vw,40px)}
.field{margin:0 0 24px}
.field > label{display:block;font-weight:700;margin-bottom:8px}
.req-mark,.opt-mark{display:inline-block;margin-left:6px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700;vertical-align:2px}
.req-mark{background:var(--primary);color:#fff}
.opt-mark{background:var(--tile);color:var(--muted)}
input[type="text"],input[type="email"],select,textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);
  border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;transition:border-color .18s,background .18s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);background:#fff}
textarea{resize:vertical;min-height:180px}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--error);background:var(--error-bg)}
.hint{margin:6px 0 0;font-size:13px;color:var(--muted)}
.field-error{margin:6px 0 0;font-size:14px;color:var(--error);font-weight:700}
.check label{display:flex;align-items:flex-start;gap:10px;font-weight:400}
.check input{width:20px;height:20px;margin-top:5px;accent-color:var(--primary)}

.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.submit{margin:32px 0 8px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 36px;border:0;border-radius:999px;background:var(--primary);color:#fff;font:inherit;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none;transition:background .18s,transform .18s}
.btn:hover{background:var(--primary-dark);color:#fff}
.btn:active{transform:scale(.97)}
.note{font-size:13px;color:var(--muted);margin:0}

.site-footer{padding:32px 0 48px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.site-footer .wrap{width:min(100% - 40px,1200px)}
.site-footer a{color:inherit}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}