/*
Theme Name: edge-architects
Description: edge-architects オリジナルテーマ
Author: edge-architects
Version: 1.0.16
Text Domain: edge-architects
*/

/* ==========================================================================
   common.css — shared across every page (TOP / Service / fallback):
   variables, reset, layout utilities, the section-head/title reveal system,
   header, footer, dot-divider, and the Contact Form 7 styling (the contact
   form + its #contact parallax background sit on both TOP and Service).
   Page-specific styles live in assets/css/top.css and assets/css/service.css.
   ========================================================================== */

:root{
  --bg:#111216;
  --bg-soft:#17181d;
  --surface:#1d1f26;
  --surface-2:#23252d;
  --border:rgba(255,255,255,0.09);
  --border-strong:rgba(255,255,255,0.16);
  --text:#f4f3ee;
  --text-muted:#e6e5e0;
  --text-faint:#9a9ba6;
  --accent:#d7ff4a;
  --accent-soft:#e8ffa0;
  --accent-2:#ff6b4d;
  --accent-2-soft:#ffb199;
  --ink:#111216;
  --radius:18px;
  --maxw:1200px;
  font-size:16px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'M PLUS 2','Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
.en{font-family:'Space Grotesk',sans-serif;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}
@media (max-width:768px){ .wrap{padding:0 20px;} }

/* ---------- utility ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--accent);
  font-weight:600;
}
.eyebrow::before{
  content:"";width:22px;height:1px;background:var(--accent);display:inline-block;
}
.section{padding:100px 0;position:relative;}
@media (max-width:768px){ .section{padding:80px 0;} }
.section-head{max-width:760px;margin-bottom:64px;}
.section-title{
  font-size:clamp(30px,4vw,46px);
  font-weight:900;line-height:1.35;margin:18px 0 0;
  letter-spacing:0.01em;
}

/* section title reveal: the eyebrow's line extends first, then its label
   fades in, then each heading line sweeps in behind a solid color bar */
.section-head[data-reveal]{opacity:1;transform:none;}
.section-head .eyebrow::before{width:0;transition:width .5s cubic-bezier(.4,0,.2,1);}
.section-head.is-visible .eyebrow::before{width:22px;}
.section-head .eyebrow{color:transparent;transition:color .4s ease;transition-delay:.4s;}
.section-head.is-visible .eyebrow{color:var(--accent);}
.section-title .en{font-weight:700;letter-spacing:0.02em;}

/* title-reveal: a solid color bar sweeps across each line (left to right),
   and right as it fully covers the text, the text's own color flips on —
   so the bar appears to "wipe" the line into view as it exits to the right */
.title-reveal{
  position:relative;display:block;overflow:hidden;
  color:transparent;
  transition:color 0s .5s;
}
.title-reveal::before{
  content:"";position:absolute;inset:0;
  background:var(--accent);
  transform:translateX(-100%);
}
.section-head.is-visible .title-reveal{color:var(--text);transition-delay:1s;}
.section-head.is-visible .title-reveal::before{
  animation:titleLineSweep 1s ease-in-out forwards;
  animation-delay:.5s;
}
.section-head.is-visible .title-reveal:nth-of-type(2){transition-delay:1.15s;}
.section-head.is-visible .title-reveal:nth-of-type(2)::before{animation-delay:.65s;}
@keyframes titleLineSweep{
  0%{transform:translateX(-100%);}
  50%{transform:translateX(0);}
  100%{transform:translateX(100%);}
}
.lead{color:var(--text-muted);font-size:16px;margin-top:20px;max-width:640px;}
@media (max-width:768px){ .lead{font-size:15px;} }

[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}

/* dot divider — dots sample a smooth left-to-right gradient (pale to full color)
   instead of three flat color blocks */
.dot-divider{
  height:10px;width:100%;overflow:hidden;
  background:linear-gradient(to right, rgba(255,255,255,0.18), var(--accent-2), var(--accent));
  -webkit-mask-image:radial-gradient(circle, #000 1.6px, transparent 1.6px);
  mask-image:radial-gradient(circle, #000 1.6px, transparent 1.6px);
  -webkit-mask-size:16px 16px;
  mask-size:16px 16px;
}

/* flow in left-to-right when scrolled into view, instead of the generic fade/slide reveal */
.dot-divider[data-reveal]{
  opacity:1;transform:none;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.1s cubic-bezier(.16,.8,.24,1);
}
.dot-divider[data-reveal].is-visible{
  opacity:1;transform:none;
  clip-path:inset(0 0% 0 0);
}

/* ---------- header ---------- */
header{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  padding:22px 0;
  transition:background .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{
  padding:14px 0;
  background:rgba(17,18,22,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
header .wrap{display:flex;align-items:center;justify-content:space-between;}
.header-right{display:flex;align-items:center;gap:44px;}
@media (max-width:900px){ .header-right{gap:0;} }
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:0.02em;}
.logo img{width:34px;height:34px;flex-shrink:0;}
.logo .en{font-family:'Space Grotesk',sans-serif;font-weight:700;}
.logo-sub{display:block;font-size:10px;letter-spacing:0.2em;color:var(--text-faint);font-family:'Space Grotesk',sans-serif;margin-top:2px;}

nav.main-nav{display:flex;align-items:center;gap:40px;}
nav.main-nav ul{display:flex;gap:32px;}
nav.main-nav a{
  font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:0.1em;
  color:var(--text-muted);position:relative;padding:4px 0;
}
nav.main-nav a:hover{color:var(--text);}
nav.main-nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--accent);
  transition:width .25s ease;
}
nav.main-nav a:hover::after{width:100%;}
.header-actions{display:flex;align-items:center;gap:20px;}
.contact-pill{
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;letter-spacing:0.06em;
  background:var(--accent);color:var(--ink);padding:11px 22px;border-radius:999px;
}
.contact-pill:hover{background:var(--accent-soft);}
.menu-btn{
  display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--border-strong);
  align-items:center;justify-content:center;cursor:pointer;background:none;flex-shrink:0;
}
.menu-btn::before, .menu-btn::after{display:none;}
.menu-icon{width:18px;height:12px;position:relative;}
.menu-icon i{position:absolute;left:0;width:100%;height:1.5px;background:var(--text);transition:.3s;}
.menu-icon i:nth-child(1){top:0;}
.menu-icon i:nth-child(2){top:5px;}
.menu-icon i:nth-child(3){top:10px;}
body.nav-open .menu-icon i:nth-child(1){transform:translateY(5px) rotate(45deg);}
body.nav-open .menu-icon i:nth-child(2){opacity:0;}
body.nav-open .menu-icon i:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

@media (max-width:900px){
  nav.main-nav ul{display:none;}
  .contact-pill{display:none;}
  .menu-btn{display:flex;}
}

.mobile-nav{
  position:fixed;inset:0;background:var(--bg);z-index:99;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .35s ease, transform .35s ease, visibility .35s;
}
body.nav-open .mobile-nav{opacity:1;visibility:visible;transform:translateY(0);}
.mobile-nav a{font-family:'Space Grotesk',sans-serif;font-size:22px;letter-spacing:0.05em;color:var(--text);}
.mobile-nav a:hover{color:var(--accent);}

/* ---------- contact cta (shared: embedded on both TOP and the Service page) ---------- */
#contact{
  position:relative;
  background-color:var(--bg-soft);
  background-image:
    linear-gradient(rgba(23,24,29,0.55), rgba(23,24,29,0.72)),
    url('assets/img/contact-img.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  border-top:1px solid var(--border);
}
@media (max-width:900px){ #contact{background-attachment:scroll;background-position:right;} }

/* ---------- contact form (Contact Form 7) ---------- */
.contact-form-card{
  background:rgba(29,31,38,0.4);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:48px;
}
@media (max-width:768px){ .contact-form-card{padding:36px 24px;} }

.wpcf7-form{display:flex;flex-direction:column;gap:20px;}
.wpcf7-form .form-row{margin:0;display:flex;flex-direction:column;gap:15px;}
.wpcf7-form .form-row br{display:none;}
.wpcf7-form label{
  font-size:13px;font-weight:700;color:var(--text);line-height:1;
  display:flex;align-items:center;gap:8px;margin:0;
}
.wpcf7-form .form-row > span.wpcf7-form-control-wrap{display:block;}
.wpcf7-form .req{
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:0.05em;font-weight:600;
  color:var(--ink);background:var(--accent-2);padding:2px 9px;border-radius:999px;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea{
  width:100%;background:var(--bg);border:1px solid var(--border-strong);border-radius:10px;
  padding:14px 16px;color:var(--text);font-family:inherit;font-size:14.5px;
  transition:border-color .25s ease;
}
.wpcf7-form textarea{min-height:150px;resize:vertical;}
.wpcf7-form select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:40px;cursor:pointer;
}
.wpcf7-form-control-wrap:has(> select){position:relative;display:block;}
.wpcf7-form-control-wrap:has(> select)::after{
  content:"";position:absolute;top:50%;right:16px;
  width:7px;height:7px;
  border-right:1.5px solid var(--text-faint);border-bottom:1.5px solid var(--text-faint);
  transform:translateY(-50%) rotate(225deg);
  transition:transform .25s ease, border-color .25s ease;
  pointer-events:none;
}
.wpcf7-form-control-wrap.is-open::after{transform:translateY(-50%) rotate(45deg);border-color:var(--accent);}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus{outline:none;border-color:var(--accent);}
.wpcf7-form .form-submit{margin:0;}
.wpcf7-form input[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:16px 34px;border-radius:999px;border:1px solid var(--accent);
  background:var(--accent);color:var(--ink);font-weight:700;font-size:14px;letter-spacing:0.05em;
  cursor:pointer;transition:background .25s ease, transform .25s ease;
}
@media (max-width:768px){
  .wpcf7-form input[type="submit"]{width:100%;}
}

/* SP: loosen the form so labels and fields aren't cramped (must sit after the base field rules) */
@media (max-width:768px){
  .wpcf7-form{gap:30px;}
  .wpcf7-form .form-row{gap:12px;}
  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="email"],
  .wpcf7-form input[type="tel"],
  .wpcf7-form select,
  .wpcf7-form textarea{padding:16px 18px;line-height:1.6;}
}
.wpcf7-form input[type="submit"]:hover{background:var(--accent-soft);transform:translateY(-2px);}
.wpcf7-form input[type="submit"]:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.wpcf7-not-valid-tip{color:var(--accent-2);font-size:12.5px;margin-top:2px;display:block;}
.wpcf7-response-output{
  margin:4px 0 0;padding:14px 18px;border-radius:10px;
  border:1px solid var(--border-strong);color:var(--text);font-size:14px;
}
.wpcf7-form.sent .wpcf7-response-output{border-color:var(--accent);color:var(--accent);}
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output{border-color:var(--accent-2);color:var(--accent-2);}

/* ---------- contact form: legacy table markup (production's existing CF7 form) ----------
   Production's form uses .section-inquiry / <table> rows instead of .form-row, so it is
   restyled here to match the dark theme without touching the form in wp-admin. */
.wpcf7-form .section-inquiry{display:flex;flex-direction:column;gap:32px;}
.wpcf7-form .section-inquiry p{margin:0;}
.wpcf7-form .section-min_comment{display:flex;flex-direction:column;gap:8px;color:var(--text-muted);font-size:15px;line-height:1.9;}
.wpcf7-form .section-inquiry_detail{display:flex;flex-direction:column;gap:28px;}
.wpcf7-form .section-inquiry_detail > h2,
.wpcf7-form .section-requests > h2{
  margin:0;font-size:16px;font-weight:700;color:var(--text);
  padding-left:14px;border-left:2px solid var(--accent);line-height:1.4;
}
.wpcf7-form .section-requests{display:flex;flex-direction:column;gap:16px;}
.wpcf7-form .section-requests > p{color:var(--text-muted);font-size:14.5px;}
.wpcf7-form .section-inquiry table,
.wpcf7-form .section-inquiry tbody,
.wpcf7-form .section-inquiry tr,
.wpcf7-form .section-inquiry th,
.wpcf7-form .section-inquiry td{display:block;width:100%;padding:0;border:0;text-align:left;}
.wpcf7-form .section-inquiry table{border-collapse:collapse;}
.wpcf7-form .section-inquiry tr{margin-bottom:28px;}
.wpcf7-form .section-inquiry tr:last-child{margin-bottom:0;}
.wpcf7-form .section-inquiry th{margin-bottom:12px;font-size:13px;font-weight:700;color:var(--text);line-height:1.4;}
.wpcf7-form .section-inquiry th p{display:flex;align-items:center;gap:8px;}
.wpcf7-form .contact-asterisk{
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:0.05em;font-weight:600;
  color:var(--ink);background:var(--accent-2);padding:2px 9px;border-radius:999px;line-height:1.6;
}
.wpcf7-form .section-requests__box{display:block;}
.wpcf7-form .section-requests__box p > .wpcf7-form-control-wrap{display:block;}
.wpcf7-form .section-inquiry td .wpcf7-form-control-wrap{display:block;}

/* ---------- footer ---------- */
footer{padding:90px 0 40px;border-top:1px solid var(--border);}
.footer-top{display:flex;justify-content:space-between;gap:60px;flex-wrap:wrap;margin-bottom:70px;}
.footer-brand .logo{margin-bottom:18px;}
.footer-brand p{color:var(--text-muted);font-size:14px;max-width:320px;}
.footer-cols{display:flex;gap:70px;flex-wrap:wrap;}
.footer-col h4{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:0.15em;color:var(--text-faint);margin:0 0 18px;}
.footer-col ul{display:flex;flex-direction:column;gap:12px;}
.footer-col a{font-size:14px;color:var(--text-muted);}
.footer-col a:hover{color:var(--accent);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  padding-top:30px;border-top:1px solid var(--border);
  font-size:12px;color:var(--text-faint);font-family:'Space Grotesk',sans-serif;letter-spacing:0.03em;
}
.back-to-top{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
}
.back-to-top:hover{border-color:var(--accent);color:var(--accent);}