.elementor-4929 .elementor-element.elementor-element-214a86e{--display:flex;}/* Start custom CSS *//* ============================================================
   ADASTRA DESIGN SYSTEM — Colors & Typography
   株式会社アドアストラ
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;900&display=swap');

/* ------------------------------------------------------------
   COLOR TOKENS — Base Palette
   ------------------------------------------------------------ */
:root {
  /* Brand colors (from branding package) */
  --color-ink:       #212121;   /* near-black; primary text + logo */
  --color-pink:      #ff095b;   /* hot pink; accent, logo dot, CTAs */
  --color-gray:      #aaaaaa;   /* mid gray; secondary text, dividers */
  --color-blue:      #1754ff;   /* bright blue; links, highlights */
  --color-white:     #ffffff;   /* white; backgrounds, inverse text */

  /* Extended neutrals */
  --color-ink-90:    #2e2e2e;
  --color-ink-70:    #555555;
  --color-ink-50:    #888888;
  --color-ink-20:    #d6d6d6;
  --color-ink-10:    #f0f0f0;
  --color-ink-05:    #f8f8f8;

  /* Extended pink */
  --color-pink-dark: #cc0046;
  --color-pink-light:#ff6694;
  --color-pink-bg:   #fff0f4;

  /* Extended blue */
  --color-blue-dark: #0d39cc;
  --color-blue-light:#4d7fff;
  --color-blue-bg:   #f0f4ff;
}

/* ------------------------------------------------------------
   SEMANTIC COLOR TOKENS
   ------------------------------------------------------------ */
:root {
  /* Foregrounds */
  --fg1:          var(--color-ink);        /* primary text */
  --fg2:          var(--color-ink-70);     /* secondary text */
  --fg3:          var(--color-gray);       /* tertiary / placeholder */
  --fg-inverse:   var(--color-white);      /* text on dark bg */
  --fg-accent:    var(--color-pink);       /* accent / brand highlight */
  --fg-link:      var(--color-blue);       /* hyperlinks */

  /* Backgrounds */
  --bg-base:      var(--color-white);      /* default page bg */
  --bg-subtle:    var(--color-ink-05);     /* subtle surface */
  --bg-muted:     var(--color-ink-10);     /* muted surface */
  --bg-ink:       var(--color-ink);        /* dark surface */
  --bg-accent:    var(--color-pink);       /* accent surface */
  --bg-blue:      var(--color-blue);       /* blue surface */

  /* Borders */
  --border-base:  var(--color-ink-20);     /* default divider */
  --border-muted: var(--color-ink-10);     /* subtle border */
  --border-accent:var(--color-pink);       /* accent border */

  /* Interactive */
  --interactive-primary:       var(--color-pink);
  --interactive-primary-hover: var(--color-pink-dark);
  --interactive-secondary:     var(--color-ink);
  --interactive-secondary-hover: var(--color-ink-70);
  --interactive-link:          var(--color-blue);
  --interactive-link-hover:    var(--color-blue-dark);
}

/* ------------------------------------------------------------
   TYPOGRAPHY TOKENS
   ------------------------------------------------------------ */
:root {
  /* Font families */
  --font-sans:    'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
  --font-display: 'Futura PT Cond', 'Futura PT', 'Futura', sans-serif;
  /* Note: Noto Sans JP is the Google Fonts substitute for Noto Sans CJK JP
     Futura PT Cond Medium is used for the logo wordmark (not available on Google Fonts;
     nearest substitute: 'Oswald', 'Barlow Condensed', or local Futura PT installation) */

  /* Font weights — Noto Sans CJK JP full range */
  --fw-thin:       100;   /* Noto Sans CJK JP Thin */
  --fw-light:      300;   /* Noto Sans CJK JP Light */
  --fw-demilight:  350;   /* Noto Sans CJK JP DemiLight */
  --fw-regular:    400;   /* Noto Sans CJK JP Regular */
  --fw-bold:       700;   /* Noto Sans CJK JP Bold */
  --fw-black:      900;   /* Noto Sans CJK JP Black */

  /* Type scale (based on A4 booklet proportions, adapted for web) */
  --text-xs:      0.75rem;   /* 12px — legal, captions */
  --text-sm:      0.875rem;  /* 14px — small labels, metadata */
  --text-base:    1rem;      /* 16px — body copy */
  --text-md:      1.125rem;  /* 18px — slightly elevated body */
  --text-lg:      1.25rem;   /* 20px — lead / intro text */
  --text-xl:      1.5rem;    /* 24px — section headings */
  --text-2xl:     2rem;      /* 32px — page headings */
  --text-3xl:     2.75rem;   /* 44px — hero headings */
  --text-4xl:     3.75rem;   /* 60px — display */

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-base:   1.6;
  --leading-relaxed:1.8;  /* preferred for Japanese body text */

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;   /* used in Japanese display headings */
}

/* ------------------------------------------------------------
   SEMANTIC TYPE STYLES
   ------------------------------------------------------------ */
:root {
  /* Headings */
  --h1-size:   var(--text-3xl);
  --h1-weight: var(--fw-black);
  --h1-leading:var(--leading-tight);

  --h2-size:   var(--text-2xl);
  --h2-weight: var(--fw-black);
  --h2-leading:var(--leading-snug);

  --h3-size:   var(--text-xl);
  --h3-weight: var(--fw-black);
  --h3-leading:var(--leading-snug);

  --h4-size:   var(--text-lg);
  --h4-weight: var(--fw-black);
  --h4-leading:var(--leading-base);

  /* Body */
  --body-size:   var(--text-base);
  --body-weight: var(--fw-regular);
  --body-leading:var(--leading-relaxed);

  /* Small / meta */
  --small-size:   var(--text-sm);
  --small-weight: var(--fw-regular);
  --small-leading:var(--leading-base);

  /* Display (hero / large callout) */
  --display-size:   var(--text-4xl);
  --display-weight: var(--fw-black);
  --display-leading:var(--leading-tight);
}

/* ------------------------------------------------------------
   SPACING TOKENS
   ------------------------------------------------------------ */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
}

/* ------------------------------------------------------------
   BORDER RADIUS TOKENS
   ------------------------------------------------------------ */
:root {
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  16px;
  --radius-full: 9999px;  /* pill shape */
  --radius-none: 0px;
}

/* ------------------------------------------------------------
   SHADOW TOKENS
   ------------------------------------------------------------ */
:root {
  --shadow-sm:  0 1px 3px rgba(33,33,33,0.10);
  --shadow-md:  0 4px 12px rgba(33,33,33,0.12);
  --shadow-lg:  0 8px 32px rgba(33,33,33,0.14);
  --shadow-none: none;
}

/* ------------------------------------------------------------
   BASE ELEMENT STYLES
   ------------------------------------------------------------ */
body {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  color: var(--fg1);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-leading); }
h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-leading); }
h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-leading); }
h4 { font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-leading); }

p  { margin: 0 0 var(--space-4); }
small { font-size: var(--small-size); color: var(--fg2); }

a {
  color: var(--fg-link);
  text-decoration: none;
}
a:hover { color: var(--interactive-link-hover); text-decoration: underline; }

/* ===== Translation page styles ===== */

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg-base); }
a { color: var(--fg-link); }
a:hover { color: var(--interactive-link-hover); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 32px; }

/* header */
header.site { background: var(--bg-base); border-bottom: 1px solid var(--border-muted); position: sticky; top: 0; z-index: 100; }
header.site .inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; height: 64px; display: flex; align-items: center; gap: 32px; }
header.site img.logo { height: 36px; width: 36px; object-fit: contain; }
header.site nav { display: flex; gap: 28px; flex: 1; }
header.site nav a { font-size: var(--text-sm); color: var(--fg2); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
header.site nav a.active { color: var(--fg1); font-weight: var(--fw-black); border-bottom-color: var(--border-accent); }
header.site .cta { background: var(--interactive-primary); color: #fff; border: none; border-radius: var(--radius-sm); padding: 9px 20px; font-size: var(--text-sm); font-weight: var(--fw-black); cursor: pointer; flex-shrink: 0; font-family: inherit; }

/* hero */
.hero { padding: 64px 32px 48px; }
.eyebrow { font-size: var(--text-xs); font-weight: var(--fw-black); color: var(--fg-accent); letter-spacing: var(--tracking-wider); text-transform: uppercase; margin-bottom: 10px; }
.hero h1 { font-size: var(--text-3xl); font-weight: var(--fw-black); color: var(--fg1); line-height: var(--h1-leading); margin: 0 0 20px; }
.hero p.lead { font-size: var(--text-md); color: var(--fg2); line-height: var(--leading-relaxed); max-width: 720px; margin: 0 0 14px; }
.hero p.lead:last-child { margin-bottom: 0; }
.hero p.lead b { color: var(--fg1); font-weight: var(--fw-black); }

/* two answers intro */
.answers { padding: 0 32px 24px; }
.answers .inner { max-width: 1100px; margin: 0 auto; border-top: 1px solid var(--border-muted); padding-top: 40px; }
.answers h2 { font-size: var(--text-xl); font-weight: var(--fw-black); color: var(--fg1); margin: 0 0 12px; }
.answers p { font-size: var(--text-sm); color: var(--fg2); line-height: var(--leading-relaxed); max-width: 720px; margin: 0; }

/* service sections — equal weight, alternating bg */
.svc { padding: 56px 32px; }
.svc.alt { background: var(--bg-subtle); }
.svc.human { background: var(--color-blue-bg); border-top: 1px solid var(--border-muted); }
.svc.human .pricebox { box-shadow: var(--shadow-sm); border-color: var(--border-muted); }
.svc .inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.svc .label { display: inline-block; font-size: var(--text-xs); font-weight: var(--fw-black); letter-spacing: var(--tracking-wide); padding: 4px 12px; border-radius: var(--radius-sm); margin-bottom: 16px; }
.svc .label.ink { background: var(--bg-ink); color: #fff; }
.svc .label.pink { background: var(--bg-accent); color: #fff; }
.svc h2 { font-size: var(--text-2xl); font-weight: var(--fw-black); color: var(--fg1); line-height: var(--leading-snug); margin: 0 0 4px; }
.svc .en { font-size: var(--text-xs); color: var(--fg3); margin-bottom: 20px; }
.svc p.body { font-size: var(--text-sm); color: var(--fg2); line-height: var(--leading-relaxed); margin: 0 0 14px; }
.svc p.body b { color: var(--fg1); font-weight: var(--fw-black); }
.svc ul.points { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.svc ul.points li { font-size: var(--text-sm); color: var(--fg2); line-height: var(--leading-base); padding-left: 22px; position: relative; }
.svc ul.points li::before { content: '✓'; position: absolute; left: 0; color: var(--fg-accent); font-weight: var(--fw-black); }
.svc ul.points li b { color: var(--fg1); font-weight: var(--fw-black); }

/* price box */
.pricebox { background: var(--bg-base); border: 1px solid var(--border-base); border-radius: var(--radius-md); padding: 28px; position: sticky; top: 88px; }
.svc.alt .pricebox { box-shadow: var(--shadow-sm); }
.pricebox .p-label { font-size: var(--text-xs); font-weight: var(--fw-black); color: var(--fg3); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: 8px; }
.pricebox .p-price { font-size: var(--text-2xl); font-weight: var(--fw-black); color: var(--fg1); }
.pricebox .p-price small { font-size: var(--text-sm); font-weight: var(--fw-regular); color: var(--fg3); }
.pricebox .p-note { font-size: var(--text-xs); color: var(--fg3); line-height: var(--leading-relaxed); margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border-muted); }
.pricebox .fit { font-size: var(--text-xs); color: var(--fg2); line-height: var(--leading-relaxed); margin-top: 14px; }
.pricebox .fit b { color: var(--fg1); font-weight: var(--fw-black); display: block; margin-bottom: 4px; }

/* process */
.process { padding: 64px 32px; }
.process .wrap h2 { font-size: var(--text-2xl); font-weight: var(--fw-black); color: var(--fg1); margin: 0 0 8px; text-align: center; }
.process .wrap p.sub { font-size: var(--text-sm); color: var(--fg2); text-align: center; margin: 0 0 40px; }
.process .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.process .step { text-align: center; padding: 0 16px; }
.process .step .circle { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-ink); color: #fff; font-size: var(--text-md); font-weight: var(--fw-black); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.process .step.ai .circle { background: var(--bg-accent); }
.process .step h4 { font-size: var(--text-sm); font-weight: var(--fw-black); color: var(--fg1); margin: 0 0 8px; }
.process .step p { font-size: var(--text-xs); color: var(--fg2); line-height: var(--leading-relaxed); margin: 0; }

/* multimedia cross-sell */
.media { background: var(--bg-ink); padding: 48px 32px; }
.media .inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.media h2 { font-size: var(--text-xl); font-weight: var(--fw-black); color: #fff; line-height: var(--leading-snug); margin: 0 0 12px; }
.media p { font-size: var(--text-sm); color: var(--color-gray); line-height: var(--leading-relaxed); margin: 0; }
.media .list { display: flex; flex-direction: column; gap: 12px; }
.media .item { border-left: 3px solid var(--border-accent); padding: 4px 0 4px 16px; }
.media .item h4 { font-size: var(--text-sm); font-weight: var(--fw-black); color: #fff; margin: 0 0 2px; }
.media .item p { font-size: var(--text-xs); }

/* dtp */
.dtp { background: var(--bg-subtle); border-top: 1px solid var(--border-muted); padding: 64px 32px; }
.dtp .inner { max-width: 1100px; margin: 0 auto; }
.dtp .head { max-width: 720px; margin-bottom: 36px; }
.dtp .head h2 { font-size: var(--text-2xl); font-weight: var(--fw-black); color: var(--fg1); line-height: var(--leading-snug); margin: 0 0 12px; }
.dtp .head p { font-size: var(--text-sm); color: var(--fg2); line-height: var(--leading-relaxed); margin: 0 0 12px; }
.dtp .head p:last-child { margin-bottom: 0; }
.dtp .head p b { color: var(--fg1); font-weight: var(--fw-black); }
.dtp .tools { display: flex; flex-wrap: wrap; gap: 10px; }
.dtp .tool { background: var(--bg-base); border: 1px solid var(--border-base); border-radius: var(--radius-sm); padding: 8px 18px; font-size: var(--text-sm); font-weight: var(--fw-black); color: var(--fg1); }

/* languages */
.langs { padding: 56px 32px; }
.langs .wrap h3 { font-size: var(--text-lg); font-weight: var(--fw-black); color: var(--fg1); margin: 0 0 20px; text-align: center; }
.langs .chips { max-width: 900px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.langs .chip { background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: var(--radius-full); padding: 6px 16px; font-size: var(--text-sm); color: var(--fg2); }

/* cta */
.cta-section { background: var(--fg-accent); border-top: 1px solid var(--border-muted); padding: 56px 32px; text-align: center; }
.cta-section h2 { font-size: var(--text-2xl); font-weight: var(--fw-black); color: white; margin: 0 0 12px; }
.cta-section p { font-size: var(--text-sm); color: white; margin: 0 0 28px; max-width: 560px; margin-left: auto; margin-right: auto; line-height: var(--leading-relaxed); }
.cta-section button { background: var(--interactive-primary); color: #fff; border: none; border-radius: var(--radius-sm); padding: 14px 36px; font-size: var(--text-md); font-weight: var(--fw-black); cursor: pointer; font-family: inherit; }

/* footer */
footer.site { background: var(--bg-ink); color: #fff; }
footer.site .inner { max-width: 1100px; margin: 0 auto; padding: 48px 32px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: 32px; }
footer.site .col { display: flex; flex-direction: column; gap: 6px; }
footer.site img.flogo { width: 40px; height: 40px; object-fit: contain; background: #fff; border-radius: var(--radius-sm); padding: 3px; margin-bottom: 8px; }
footer.site .tagline { font-size: var(--text-sm); font-weight: var(--fw-black); color: #fff; }
footer.site .company { font-size: var(--text-xs); color: var(--color-gray); }
footer.site .col-title { font-size: var(--text-xs); font-weight: var(--fw-black); color: #fff; letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: 8px; }
footer.site a.flink { font-size: var(--text-sm); color: var(--color-gray); text-decoration: none; line-height: 2; }
footer.site .address, footer.site .contact { font-size: var(--text-xs); color: var(--color-gray); line-height: 1.8; }
footer.site .contact { font-size: var(--text-sm); color: #fff; margin-top: 4px; }
footer.site .bottom { border-top: 1px solid #333; padding: 16px 32px; }
footer.site .bottom-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
footer.site .copy { font-size: var(--text-xs); color: #555; }

@media (max-width: 860px) {
  .svc .inner, .media .inner { grid-template-columns: 1fr; }
  .process .steps { grid-template-columns: 1fr; gap: 24px; }
  .pricebox { position: static; }
  footer.site .inner { grid-template-columns: 1fr 1fr; }
}

/* mobile: shrink hero headline on small phones */
@media (max-width: 480px) {
  .hero h1 { font-size: var(--text-2xl); }
}

/* ===== Hardening vs. theme / Elementor defaults ===== */
.hero, .answers, .svc, .process, .media, .dtp, .langs, .cta-section {
  font-family: var(--font-sans) !important;
}
.hero h1, .svc h2, .process h2, .dtp h2, .langs h3, .cta-section h2,
.svc h4, .process h4 {
  color: var(--fg1) !important;
  font-family: var(--font-sans) !important;
}
.media h2, .media h4 { color: #ffffff !important; }
.eyebrow { color: var(--fg-accent) !important; }
.hero p.lead, .svc p.body, .answers p, .process .step p, .dtp .head p { color: var(--fg2) !important; }
.hero p.lead b, .svc p.body b, .dtp .head p b { color: var(--fg1) !important; }
.media p { color: var(--color-gray) !important; }
.svc ul.points li::before { color: var(--fg-accent) !important; }/* End custom CSS */