/* ===== contact.html 専用スタイル（共通は styles.css）===== */

/* ---------- hero ---------- */
.contact-hero{padding-top:68px;}
.contact-hero .inner{padding:clamp(44px,6vw,76px) 0 clamp(20px,3vw,30px);}
.contact-hero .eyebrow{font-size:12px;color:var(--accent-d);letter-spacing:.26em;display:inline-flex;align-items:center;gap:13px;margin-bottom:18px;}
.contact-hero .eyebrow::before{content:"";width:42px;height:2px;background:var(--accent);display:inline-block;}
.contact-hero h1{margin:0;font-weight:700;font-size:clamp(30px,5vw,52px);line-height:1.2;letter-spacing:.005em;}
.contact-hero h1 .ac{color:var(--brand);}
.contact-hero p{color:var(--muted);max-width:560px;margin:18px 0 0;}

/* ---------- layout ---------- */
.contact-wrap{display:grid;grid-template-columns:1.45fr .8fr;gap:40px;align-items:start;
  padding-bottom:clamp(70px,10vw,120px);}
@media(max-width:860px){.contact-wrap{grid-template-columns:1fr;gap:26px;}}

/* entrance */
@keyframes rise{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}

/* ---------- form card ---------- */
.form-card{position:relative;background:var(--paper-2);border:1px solid var(--line);border-radius:16px;
  padding:clamp(28px,4vw,46px);box-shadow:0 30px 60px -40px rgba(40,30,10,.4),0 2px 0 rgba(255,255,255,.6) inset;
  animation:rise .6s ease both;}
/* top accent bar */
.form-card::before{content:"";position:absolute;left:clamp(28px,4vw,46px);right:clamp(28px,4vw,46px);top:0;height:3px;
  border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--accent),var(--brand));}
/* faint viewfinder corners */
.form-card::after{content:"";position:absolute;inset:14px;pointer-events:none;border-radius:8px;
  --c:rgba(233,161,60,.45);--s:16px;
  background:
    linear-gradient(var(--c),var(--c)) left top/var(--s) 2px no-repeat,
    linear-gradient(var(--c),var(--c)) left top/2px var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--s) 2px no-repeat,
    linear-gradient(var(--c),var(--c)) right top/2px var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/var(--s) 2px no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/2px var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--s) 2px no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/2px var(--s) no-repeat;}

.field{position:relative;margin-bottom:22px;}
.field:last-of-type{margin-bottom:26px;}
.field label{display:flex;align-items:center;font-size:13.5px;font-weight:700;color:var(--ink);
  margin-bottom:10px;letter-spacing:.02em;}
.field label .req{margin-left:9px;font-size:10.5px;font-weight:700;color:#fff;letter-spacing:.06em;
  background:var(--accent);border-radius:100px;padding:3px 9px;line-height:1;}
.field label .opt{margin-left:9px;font-size:11px;font-weight:500;color:var(--muted-2);
  border:1px solid var(--line-2);border-radius:100px;padding:2px 9px;line-height:1.4;}

.field input,.field textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line-2);border-radius:9px;padding:14px 16px;
  transition:border-color .2s,box-shadow .2s,background .2s;}
.field textarea{min-height:168px;resize:vertical;line-height:1.85;}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2);}
.field input:hover,.field textarea:hover{border-color:#c9bfab;}
.field input:focus,.field textarea:focus{outline:none;background:var(--paper-2);
  border-color:var(--brand);box-shadow:0 0 0 4px rgba(43,79,142,.13);}
.field input:invalid:not(:placeholder-shown){border-color:#cf6a59;}

/* ---------- submit ---------- */
.submit-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px;}
.btn-submit{display:inline-flex;align-items:center;justify-content:center;gap:11px;border:none;cursor:pointer;
  font-family:inherit;font-size:15.5px;font-weight:600;letter-spacing:.03em;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-d));border-radius:8px;padding:16px 40px;
  box-shadow:0 14px 28px -14px rgba(43,79,142,.6);transition:transform .2s,box-shadow .2s,filter .2s;}
.btn-submit:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 18px 34px -14px rgba(43,79,142,.7);}
.btn-submit:active{transform:translateY(0);}
.btn-submit .arr{transition:transform .2s;}
.btn-submit:hover .arr{transform:translateX(5px);}

.form-msg{font-size:13.5px;color:var(--brand-d);font-weight:500;opacity:0;transform:translateY(4px);
  transition:opacity .3s,transform .3s;}
.form-msg.show{opacity:1;transform:none;}
.form-note{font-size:12.5px;color:var(--muted-2);margin:20px 0 0;line-height:1.85;
  padding-top:18px;border-top:1px solid var(--line);}
.form-note a{color:var(--brand);text-underline-offset:2px;}
.form-note a:hover{text-decoration:underline;}

/* ---------- side panel ---------- */
.contact-side{position:relative;overflow:hidden;color:#fff;border-radius:16px;
  padding:clamp(30px,4vw,40px);animation:rise .6s ease .1s both;
  background:radial-gradient(120% 80% at 80% 0%,#356199,transparent 60%),linear-gradient(165deg,#2b4f8e,#16294b);
  box-shadow:0 30px 60px -38px rgba(20,40,80,.7);}
/* dot grid */
.contact-side::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.2px,transparent 1.2px);background-size:18px 18px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);mask-image:linear-gradient(180deg,#000,transparent 75%);opacity:.6;}
/* corner brackets */
.contact-side::after{content:"";position:absolute;inset:14px;pointer-events:none;
  --c:rgba(233,161,60,.85);--s:18px;
  background:
    linear-gradient(var(--c),var(--c)) left top/var(--s) 2px no-repeat,
    linear-gradient(var(--c),var(--c)) left top/2px var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--s) 2px no-repeat,
    linear-gradient(var(--c),var(--c)) right top/2px var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/var(--s) 2px no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/2px var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--s) 2px no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/2px var(--s) no-repeat;}
.contact-side>*{position:relative;z-index:1;}

.contact-side .mascot{width:clamp(124px,16vw,156px);margin:4px auto 20px;display:block;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%);border-radius:50%;
  animation:float 5s ease-in-out infinite;}
.contact-side h2{margin:0 0 10px;font-size:21px;font-weight:700;line-height:1.5;}
.contact-side h2::before{content:"● DROP US A LINE";display:block;font-family:"Space Mono",monospace;
  font-size:10.5px;font-weight:400;letter-spacing:.16em;color:var(--accent);margin-bottom:14px;}
.contact-side p{margin:0 0 24px;color:rgba(255,255,255,.82);font-size:13.5px;font-weight:300;line-height:1.9;}
.contact-side .line{display:flex;align-items:center;gap:14px;padding:15px 0;font-size:14px;
  border-top:1px solid rgba(255,255,255,.15);}
.contact-side .line:last-child{border-bottom:1px solid rgba(255,255,255,.15);}
.contact-side .line .lb{font-family:"Space Mono",monospace;font-size:10.5px;color:var(--accent);
  letter-spacing:.1em;min-width:62px;}

@media(max-width:860px){
  .btn-submit{width:100%;}
  .contact-side{display:flex;flex-direction:column;}
}
@media(prefers-reduced-motion:reduce){
  .contact-side .mascot{animation:none!important;}
  .form-card,.contact-side{animation:none!important;}
}