@charset "UTF-8";
/* ============================================================
   AKAMEDIA Inc. Corporate Site — Stylesheet
   Design tone: faithfully follows the original site (akamedia.jp)
   - Main color #e60012 (red) / base #f0eee7 (off-white) / white
   - Off-white heading bands + ladybug / red highlight bands
   - Fixed vertical red label on the left edge of the page
============================================================ */

:root {
  --red: #e60012;
  --ink: #1a1a1a;
  --beige: #f0eee7;
  --beige-soft: #f7f5ef;
  --gray: #808080;
  --font-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Jost", sans-serif;
  --header-h: 92px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  overflow-x: clip;
}
body {
  overflow-x: clip;
  font-family: var(--font-jp);
  color: var(--ink);
  background: #fff;
  line-height: 1.9;
  letter-spacing: 0.08em;
  font-size: 14px;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul,
ol {
  list-style: none;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 768px) {
}

/* ---------- Red highlight (forms a band per line) ---------- */
.hl {
  display: inline-block;
  background: var(--red);
  color: var(--ink);
  font-weight: 700;
  padding: 0.18em 0.5em;
  margin-bottom: 0.35em;
  letter-spacing: 0.14em;
}

/* ============================================================
   HEADER — logo top-left / nav right / JP/EN
============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  transition: box-shadow 0.3s;
}
.site-header.is-scrolled {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 28px;
}
.header-logo img {
  width: 116px;
}
.global-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.global-nav ul {
  display: flex;
  gap: 24px;
}
.global-nav a {
  font-family: var(--font-en);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.25s;
}
.global-nav a:hover,
.global-nav a.is-current {
  border-color: var(--red);
}
.lang-switch {
  display: flex;
}
.lang {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  background: #b5b5b5;
  color: #fff;
}
.lang.is-active {
  background: var(--red);
}
.lang-switch > a {
  padding: 5px;
}
.nav-toggle {
  display: none;
}

/* ============================================================
   Vertical label on the left edge of the page (fixed display on subpages)
============================================================ */
.page-label {
  position: fixed;
  top: 42%;
  left: 26px;
  z-index: 40;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-en);
  font-size: 27px;
  letter-spacing: 0.3em;
  color: var(--red);
  pointer-events: none;
}
@media (max-width: 1120px) {
  .page-label {
    display: none;
  }
}

/* ============================================================
   HERO — intro animation + slogan (left-aligned, with highlight)
============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: var(--header-h);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #fff;
}
@media (max-width: 768px) {
}
@keyframes slogan-in {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* Red highlight sweeps left to right (overlaps the illustration) */
.hero .hl {
  background: linear-gradient(var(--red), var(--red)) no-repeat 0 0 / 0% 100%;
  color: transparent;
  margin-bottom: 0;
  animation: hl-sweep 1s ease-out 2.4s forwards;
}
@keyframes hl-sweep {
  to {
    background-size: 100% 100%;
    color: var(--ink);
  }
}
@keyframes illust-in {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
@media (max-width: 768px) {
}

/* ============================================================
   Large heading band (NEWS / ABOUT US / SERVICES / CONTACT)
   — title centered, illustration overflows above the band to the right of the title
============================================================ */
.section-band {
  position: relative;
  background: var(--beige);
  margin: 90px 0 70px;
  padding: 24px 0;
}
main > .section-band:first-child {
  margin-top: 34px;
}
main > .sub-band:first-child {
  margin-top: 44px;
}
.band-center {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
.section-title {
  font-family: var(--font-en);
  font-size: clamp(34px, 4.2vw, 50px);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--red);
}
.band-illust {
  position: absolute;
  left: calc(100% + 18px);
  bottom: -6px;
  width: clamp(100px, 13vw, 165px);
  max-width: none;
}
@media (max-width: 640px) {
  .band-center {
    padding-right: 96px;
  }
  .band-illust {
    width: 86px;
    left: auto;
    right: 0;
  }
}

/* ============================================================
   Small heading band (ladybug + Japanese heading + English)
   e.g. a heading like "Vision" (JA) paired with the subtitle "vision" (EN), or "Planning & Market Analysis" (JA) paired with "Planning & Consulting" (EN)
============================================================ */
.sub-band {
  position: relative;
  background: var(--beige);
  margin: 85px 0 55px;
  padding: 12px 0;
}
.sub-band .container {
  position: relative;
}
.sub-band .ladybug {
  position: absolute;
  bottom: calc(100% - 2px);
  left: 20px;
  width: 26px;
}
.sub-band h2,
.sub-band h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.sub-band small {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink);
}

/* Plain heading (for the homepage services teaser: no band) */
.plain-head {
  position: relative;
  margin-bottom: 30px;
}
.plain-head .ladybug {
  width: 26px;
  margin-bottom: 6px;
}
.plain-head h3 {
  font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 500;
  letter-spacing: 0.12em;
}
.plain-head small {
  display: block;
  font-family: var(--font-en);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-top: 6px;
}
@media (max-width: 920px) {
}

/* CONTACT: two columns for email / phone (matches the live site) */
.contact-cols {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(40px, 8vw, 130px);
  flex-wrap: wrap;
  padding: 26px 0 10px;
}
.contact-col h4 {
  font-size: 17px;
  letter-spacing: 0.16em;
}
.contact-col h4 small {
  font-size: 12px;
  font-weight: 700;
  margin-left: 8px;
  letter-spacing: 0.08em;
}
.contact-form-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--red);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  letter-spacing: 0.18em;
  border-bottom: 2px solid transparent;
  transition: border-color 0.25s;
}
.contact-form-link:hover {
  border-color: var(--red);
}
.contact-tel {
  margin-top: 6px;
  font-family: var(--font-en);
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: 0.06em;
}
.contact-tel span {
  color: var(--red);
  margin-right: 0.2em;
}

/* Patent number (red) */
.patent-no {
  color: var(--red);
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* MORE DETAILS button */
.btn-more {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-family: var(--font-en);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  padding: 13px 40px;
  border-radius: 999px;
  transition: opacity 0.25s;
}
.btn-more:hover {
  opacity: 0.82;
}

/* ============================================================
   NEWS — scrolling list
============================================================ */
.news-box {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 18px;
  scrollbar-width: thin;
  scrollbar-color: #c9c9c9 transparent;
}
.news-box::-webkit-scrollbar {
  width: 8px;
}
.news-box::-webkit-scrollbar-thumb {
  background: #c9c9c9;
  border-radius: 4px;
}
.news-list {
  border-top: 1px solid #ddd;
}
.news-list li {
  display: flex;
  gap: 30px;
  padding: 17px 6px;
  border-bottom: 1px solid #ddd;
}
.news-list time {
  flex-shrink: 0;
  font-family: var(--font-en);
  letter-spacing: 0.12em;
}
.news-page .news-box {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
@media (max-width: 640px) {
  .news-list li {
    flex-direction: column;
    gap: 4px;
  }
}

/* ============================================================
   ABOUT US
============================================================ */
.pattern-bg {
  background: var(--beige-soft) url("../img/background-pattern.png") repeat;
  background-size: 140px auto;
}
.about-vision {
  padding: 85px 0 95px;
}
.split {
  display: flex;
  align-items: center;
  gap: 60px;
}
.split-text {
  flex: 1.25;
}
.split-visual {
  flex: 0.75;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
@media (max-width: 820px) {
  .split {
    flex-direction: column;
  }
  .split-visual {
    order: -1;
  }
}
.vision-pre {
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: 0.26em;
}
.vision-pre::after {
  content: "　――";
  font-weight: 400;
}
.about-vision .catch {
  margin: 26px 0 26px;
  font-family: var(--font-en);
  font-size: clamp(22px, 2.8vw, 34px);
  letter-spacing: 0.16em;
}
.about-vision .lead {
  font-size: 14.5px;
}
.about-vision .btn-more {
  margin-top: 34px;
}

.about-ci {
  padding-top: 10px;
}
.red-box-heading {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3em;
  padding: 0.3em 1em;
  margin: 50px 0 24px;
}
.about-ci p {
  margin-bottom: 1.2em;
}
.seven-elements {
  margin-top: 40px;
  text-align: center;
}
.seven-elements img {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}
.seven-elements figcaption {
  margin-top: 12px;
  font-size: 12px;
  color: var(--gray);
}

/* Company profile table */
.company-table {
  width: 100%;
  border-collapse: collapse;
}
.company-table th,
.company-table td {
  border-bottom: 1px solid #333;
  padding: 19px 14px;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}
.company-table tr:first-child th,
.company-table tr:first-child td {
  border-top: 1px solid #333;
}
.company-table th {
  width: 190px;
  font-weight: 700;
  white-space: nowrap;
}
.company-table a {
  color: var(--red);
}
@media (max-width: 640px) {
  .company-table th {
    width: 105px;
    white-space: normal;
  }
}

/* History — red year box + .month + text with vertical line */
.history li {
  display: flex;
  align-items: flex-start;
  gap: 34px;
  padding: 26px 0;
}
.history-date {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.history-date .y {
  background: var(--red);
  color: #fff;
  font-family: var(--font-en);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 2px 14px;
}
.history-date .m {
  font-family: var(--font-en);
  font-size: 19px;
  font-weight: 600;
}
.history .m-only .y {
  display: none;
}
.history .m-only .m {
  font-size: 24px;
}
.history-logo {
  margin-top: 14px;
  width: min(300px, 60%);
}
@media (max-width: 640px) {
  .history li {
    flex-direction: column;
    gap: 12px;
  }
}
.service-block {
  margin-bottom: 30px;
}
.service-block .catch {
  margin-bottom: 30px;
  line-height: 1.5;
  font-size: 19px;
}
@media (max-width: 860px) {
}
@media (max-width: 860px) {
}
@media (max-width: 920px) {
}
.btn-red {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 15px 44px;
  border-radius: 999px;
  transition: opacity 0.25s;
}
.btn-red:hover {
  opacity: 0.82;
}
.btn-outline {
  background: #fff;
  color: var(--red);
  border: 2px solid var(--red);
}
.form-table {
  width: 100%;
  border-collapse: collapse;
}
.form-table th,
.form-table td {
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
}
.form-table th {
  background: var(--beige);
  width: 250px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.1em;
  border-bottom: 2px solid #fff;
}
.form-table td {
  border-bottom: 1px solid #eee;
}
.form-table input[type="text"],
.form-table input[type="email"],
.form-table input[type="tel"],
.form-table select,
.form-table textarea {
  font-family: var(--font-jp);
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  width: 100%;
  max-width: 560px;
}
.form-table select {
  width: auto;
  min-width: 230px;
}
.form-table textarea {
  height: 150px;
  resize: vertical;
}
.form-privacy {
  margin: 30px 0 34px;
  font-size: 13px;
  text-align: center;
}
.form-privacy a {
  color: var(--red);
  text-decoration: underline;
}
.form-error {
  color: var(--red);
  font-size: 12.5px;
  margin-top: 6px;
  display: none;
}
.form-done {
  text-align: center;
  padding: 50px 0 30px;
}
.form-done h3 {
  font-size: 20px;
  letter-spacing: 0.18em;
  margin-bottom: 18px;
  color: var(--red);
}
@media (max-width: 640px) {
  .form-table th,
  .form-table td {
    display: block;
    width: 100%;
  }
  .form-table th {
    border-bottom: 0;
  }
}
@media (max-width: 640px) {
}
@media (max-width: 640px) {
}

/* ============================================================
   Document pages (CSR / Privacy Policy)
============================================================ */
.doc {
  max-width: 860px;
}
.doc p {
  margin-bottom: 1.3em;
}
.doc .red-box-heading {
  margin: 55px 0 24px;
}
.doc h4 {
  margin: 40px 0 14px;
  color: var(--red);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.doc h4 small {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  margin-left: 10px;
}
.doc ol {
  list-style: decimal;
  margin: 0 0 1.6em 1.6em;
}
.doc ol li {
  padding: 3px 0;
}

/* ============================================================
   FOOTER — follows the original site's sitemap-style footer
============================================================ */
.site-footer {
  background: var(--beige);
  margin-top: 110px;
  padding: 64px 0 0;
  overflow: hidden;
}
.footer-sitemap {
  display: grid;
  grid-template-columns: repeat(6, auto);
  gap: 40px;
  justify-content: space-between;
}
@media (max-width: 920px) {
  .footer-sitemap {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 560px) {
  .footer-sitemap {
    grid-template-columns: repeat(2, 1fr);
  }
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.footer-head {
  font-family: var(--font-en);
  color: var(--red);
  letter-spacing: 0.2em;
  font-size: 14px;
  margin-bottom: 6px;
}
.footer-col a:not(.footer-head) {
  font-size: 12px;
  color: #444;
}
.footer-col a:hover {
  color: var(--red);
}
.footer-sub {
  margin-top: 46px;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.footer-sub a {
  font-size: 12px;
  color: #444;
}
.footer-sub a:hover {
  color: var(--red);
}

/* Divider line + skateboarding dog + copyright */
.footer-line {
  position: relative;
  margin-top: 44px;
  border-bottom: 1px solid #1a1a1a;
  padding-bottom: 4px;
  text-align: right;
}
.footer-copy {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #555;
  padding-right: 130px;
}
@media (max-width: 640px) {
  .footer-copy {
    padding-right: 90px;
  }
}
.footer-dog {
  position: absolute;
  bottom: 0;
  right: 5%;
  width: 72px;
  animation: dog-ride 18s linear infinite;
}
@keyframes dog-ride {
  0% {
    transform: translateX(38vw);
  }
  100% {
    transform: translateX(-90vw);
  }
}

/* Company name + Society 5.0 note */
.footer-bottom {
  display: flex;
  gap: 46px;
  align-items: flex-start;
  padding: 22px 0 30px;
}
.footer-company p:first-child {
  font-weight: 700;
  letter-spacing: 0.22em;
  font-size: 14px;
}
.footer-company p:last-child {
  font-size: 11px;
  color: #444;
  margin-top: 4px;
}
.footer-note {
  font-size: 11px;
  color: #333;
  max-width: 620px;
}
@media (max-width: 720px) {
  .footer-bottom {
    flex-direction: column;
    gap: 14px;
  }
}
.footer-black {
  background: #1a1a1a;
  height: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .footer-dog {
    animation: none;
  }
  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Mobile nav
============================================================ */
@media (max-width: 860px) {
  .nav-toggle {
    display: block;
    background: none;
    border: 0;
    width: 40px;
    height: 34px;
    position: relative;
    cursor: pointer;
    z-index: 110;
  }
  .nav-toggle span {
    position: absolute;
    left: 7px;
    right: 7px;
    height: 2px;
    background: var(--ink);
    transition:
      transform 0.3s,
      opacity 0.3s;
  }
  .nav-toggle span:nth-child(1) {
    top: 9px;
  }
  .nav-toggle span:nth-child(2) {
    top: 16px;
  }
  .nav-toggle span:nth-child(3) {
    top: 23px;
  }
  .nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .global-nav {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.97);
    flex-direction: column;
    justify-content: center;
    gap: 34px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .global-nav.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .global-nav ul {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  .global-nav a {
    font-size: 17px;
  }
}

/* ============================================================
   v8 addition — single-file (SPA) page switching + PROJECTS + ACCESS
============================================================ */
/* Page switching: show one page at a time */
.page {
  display: none;
}
.page.is-active {
  display: block;
}
/* Force heading bands to always render full-width (prevents the band from breaking) */
.section-band,
.sub-band {
  width: 100%;
}
.hl {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
@media (max-width: 780px) {
}

/* ACCESS */
.access-block {
  margin-bottom: 54px;
}
.access-name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}
.access-name small {
  font-family: var(--font-en);
  color: var(--gray);
  font-weight: 600;
  letter-spacing: 0.14em;
  margin-left: 10px;
  font-size: 12px;
}
.access-addr {
  font-size: 14px;
  line-height: 2;
}
.access-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 18px 0;
}
@media (max-width: 640px) {
  .access-photos {
    grid-template-columns: 1fr;
  }
}
.access-photos img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border: 1px solid #e5e2d8;
}
.access-map {
  margin-top: 8px;
}
.access-map a {
  color: var(--red);
  border-bottom: 1px solid var(--red);
  font-size: 13px;
}
.access-studio-logo {
  height: 46px;
  width: auto;
  margin-bottom: 10px;
}

/* ============================================================
   v8 addition, part 2 — new classes
============================================================ */
.hero-banner {
  width: 100%;
  margin: 0;
  background: #fff;
}
.hero-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* SERVICES teaser / catch */
.service-catch {
  margin-bottom: 30px;
  line-height: 1.6;
  font-size: clamp(17px, 2vw, 21px);
}
.center-more {
  text-align: center;
  margin: 30px 0 10px;
}

/* HOME ABOUT teaser */
.about-teaser {
  padding: 70px 0 78px;
}
.about-teaser .catch {
  margin: 20px 0 18px;
}
.about-teaser .catch .hl,
.about-vision .catch .hl {
  font-family: var(--font-en);
  letter-spacing: 0.12em;
  font-weight: 600;
  font-size: clamp(22px, 3vw, 36px);
}

/* clients */
.clients-wrap {
  margin-top: 60px;
  margin-bottom: 30px;
}
.clients-title {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 500;
  letter-spacing: 0.12em;
}
.clients-title small {
  font-family: var(--font-en);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-left: 12px;
  color: var(--gray);
}

/* NEWS article */
.news-article {
  padding: 40px 0;
  border-bottom: 1px solid #e2e0d8;
}
.na-date {
  font-family: var(--font-en);
  color: var(--ink);
  font-size: 18px;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}
.na-title {
  font-size: clamp(16px, 1.9vw, 20px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--red);
  border-bottom: 2px solid var(--red);
  padding-bottom: 14px;
  margin-bottom: 20px;
  display: inline-block;
}
.na-body p {
  margin-bottom: 1.1em;
  font-size: 14px;
}
.na-sign {
  margin-top: 26px;
  line-height: 2;
}

/* History text */
.history-text {
  border-left: 2px solid var(--ink);
  padding-left: 28px;
  line-height: 1.9;
  font-size: 14px;
}
@media (max-width: 640px) {
  .history-text {
    border-left: none;
    padding-left: 0;
  }
}

/* Media coverage */
.media-coverage {
  margin: 70px auto 40px;
}

/* CONTACT form required label + submit */
.form-table th em {
  float: right;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  letter-spacing: 0.08em;
  font-style: normal;
}
.form-submit {
  text-align: center;
  margin: 30px 0 10px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.contact-form {
  margin-top: 40px;
}

/* Spacing for the fixed header — prevents the band at the top of each page from being hidden behind the header (band clipping) */
.page > main {
  padding-top: var(--header-h);
}
.hero-banner {
  margin-top: 0;
}
main > .section-band:first-child,
main > .sub-band:first-child {
  margin-top: 0;
}

/* ============================================================
   v10 — fix the band-clipping issue for good (flex layout) + client logos
============================================================ */
/* Heading band: lay title + illustration side by side, removing absolute-positioning clipping */
.section-band {
  overflow: visible;
  padding: 16px 0;
}
.section-band .band-center {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  width: auto;
  margin: 0 auto;
}
.section-band .section-title {
  line-height: 1;
}
.section-band .band-illust {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  width: clamp(88px, 10vw, 128px);
  height: auto;
  max-width: none;
  margin-bottom: -12px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .section-band .band-center {
    gap: 12px;
  }
  .section-band .band-illust {
    width: 74px;
    margin-bottom: -8px;
  }
}
@media (max-width: 720px) {
}

/* MORE DETAILS: pill button matching the design (with arrow) */
.btn-more.arrow::after {
  content: " ›";
  font-weight: 400;
}
.btn-more {
  padding: 14px 46px;
  font-size: 13px;
}

/* Divider line between each service block */
.svc-divider {
  border: 0;
  border-top: 1px solid #dcdad2;
  max-width: 1040px;
  margin: 50px auto;
}

/* Homepage services teaser: matches the design (left-aligned, illustration centered, divider) */
.svc-teaser .plain-head {
  margin-bottom: 18px;
}
.svc-teaser .plain-head h3 {
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 700;
}
.svc-teaser .plain-head h3 small {
  display: block;
  color: var(--gray);
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: 0.14em;
  margin-top: 4px;
  font-size: 12px;
}
.svc-teaser .service-catch {
  margin: 8px 0 26px;
}
.svc-teaser .center-more {
  text-align: left;
}

/* ABOUT US teaser (matches the design): large red box + 2 buttons + logo */
.about-teaser .osa-box {
  display: inline-block;
}
.about-teaser .osa-box .hl {
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: 0.1em;
  font-size: clamp(26px, 3.6vw, 46px);
  padding: 0.14em 0.45em;
}
.about-teaser .split-visual {
  gap: 14px;
}

/* ============================================================
   v12 — adjust spacing around bands to match the design (remove white gaps)
============================================================ */
.section-band,
.sub-band {
  margin-bottom: 0;
}
.section-band {
  margin-top: 60px;
}
.sub-band {
  margin-top: 58px;
}
main > .section-band:first-child,
main > .sub-band:first-child {
  margin-top: 0;
}
/* When a patterned background (ABOUT, etc.) immediately follows a band, keep it flush with no gap */
.section-band + .pattern-bg,
.sub-band + .pattern-bg {
  margin-top: 0;
}
/* Only add reasonable spacing when a white-background content block immediately follows a band */
.section-band + .container,
.sub-band + .container {
  padding-top: 42px;
}
/* Services page: the department block immediately after the SERVICES band */
.section-band + .service-block {
  padding-top: 8px;
}
.service-block {
  margin-bottom: 0;
}
/* Reasonable spacing between the end of content and the next band */
.pattern-bg {
  margin-bottom: 0;
}

/* ============================================================
   v13 — hero slogan (bottom-left, white background, slide-in)
============================================================ */
.hero {
  position: relative;
}
.hero .hero-banner {
  margin: 0;
}
@keyframes hero-slide {
  from {
    opacity: 0;
    transform: translateX(-34px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 640px) {
}
.svc-prose {
  font-size: 14px;
  line-height: 2;
  margin: 6px 0 4px;
}
.svc-prose b {
  color: var(--red);
  font-weight: 700;
}
.svc-teaser .service-catch {
  margin: 10px 0 16px;
}
@media (max-width: 760px) {
}

/* Cancel out the old .hero (100svh, flex) rules to pack the banner toward the top */
.hero {
  min-height: 0 !important;
  padding-top: 0 !important;
  display: block !important;
  overflow: visible !important;
}
.history-logo {
  margin: 8px 0 2px;
  width: min(210px, 55%);
}

/* ============================================================
   v17 — move the service illustration to the right of the department name / two-row logo marquee
============================================================ */
/* Illustration to the right of the department name */
.svc-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.svc-head-row .plain-head {
  margin-bottom: 0;
}
.svc-head-row .svc-art {
  flex: 0 0 auto;
  max-width: 190px;
  margin: 0;
}
.svc-head-row .svc-art img {
  width: 100%;
  height: auto;
  display: block;
}
.svc-teaser .service-catch {
  margin-top: 20px;
}
@media (max-width: 720px) {
  .svc-head-row {
    gap: 14px;
  }
  .svc-head-row .svc-art {
    max-width: 110px;
  }
}

/* Two-row sliding marquee */
.marquee {
  overflow: hidden;
  width: 100%;
}
.marquee + .marquee {
  margin-top: 14px;
}
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee-rtl .marquee-track {
  animation: mq-rtl 45s linear infinite;
}
.marquee-ltr .marquee-track {
  animation: mq-ltr 45s linear infinite;
}
@keyframes mq-rtl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes mq-ltr {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* Client logo card (for the marquee) */
.mq-logo {
  flex: 0 0 auto;
  width: 200px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e4e2da;
  margin-right: 14px;
  padding: 16px 18px;
}
.mq-logo img {
  max-height: 56px;
  max-width: 90%;
  width: auto;
  object-fit: contain;
}
@media (max-width: 640px) {
  .mq-logo {
    width: 150px;
    height: 88px;
  }
}

/* Media coverage marquee */
.media-marquee .mq-media {
  flex: 0 0 auto;
  margin-right: 24px;
}
.media-marquee .mq-media img {
  height: 46px;
  width: auto;
  display: block;
}

/* Patent certificate thumbnail in the history section */
.cert-thumb {
  display: inline-block;
  width: 150px;
  height: auto;
  margin-top: 12px;
  border: 1px solid #e0dcc8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
@media (max-width: 640px) {
  .cert-thumb {
    width: 120px;
  }
}

/* ============================================================
   v21 — carries over the v20 adjustments while fixing highlights/table/logo
============================================================ */
/* --- carried over from v20: bigger department names, adjacent illustration, footer --- */
.svc-teaser .plain-head h3,
.service-block .sub-band h3 {
  font-size: clamp(23px, 3vw, 34px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}
.svc-teaser .plain-head h3 small,
.service-block .sub-band h3 small {
  display: block;
  font-size: 12.5px;
  color: var(--gray);
  letter-spacing: 0.14em;
  margin-top: 6px;
}
.svc-head-row {
  justify-content: flex-start !important;
  gap: 22px !important;
  align-items: center !important;
}
.svc-head-row .plain-head {
  flex: 0 0 auto;
  margin-bottom: 0;
}
.svc-head-row .svc-art {
  max-width: 140px !important;
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .svc-head-row .svc-art {
    max-width: 96px !important;
  }
}
.footer-line {
  border-bottom: none !important;
  text-align: center;
}
.footer-copy {
  display: inline;
}
.footer-dog {
  position: static !important;
  animation: none !important;
  display: inline-block !important;
  width: 52px !important;
  vertical-align: middle;
  margin-left: 12px;
}
.footer-logo-img {
  width: 156px;
  height: auto;
  display: block;
  margin-bottom: 10px;
}
.footer-company p:first-child {
  font-weight: 400;
  letter-spacing: normal;
  font-size: 13px;
}

/* 1) ONE STEP AHEAD = solid red fill (reverted) / service catchphrase = thin red underline */
/* .hl base stays solid red fill (as defined at the top of style.css) */
.service-catch .hl {
  background: transparent !important;
  color: var(--ink) !important;
  padding: 0 0 7px 0 !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  background-image: linear-gradient(var(--red), var(--red)) !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  background-size: 100% 3px !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 2) CI's "About the company name" / "About the logo mark" = red highlight to red underline */
.red-box-heading {
  background: transparent !important;
  color: var(--ink) !important;
  padding: 0 0 8px 0 !important;
  border-bottom: 3px solid var(--red);
  display: inline-block;
  letter-spacing: 0.12em !important;
}

/* 3) Client logos: no border, tighten row 1/row 2 further */
.mq-logo {
  border: none !important;
  background: transparent !important;
  height: 62px !important;
  padding: 8px 16px !important;
}
.mq-logo img {
  max-height: 44px !important;
}
.marquee + .marquee {
  margin-top: 0 !important;
}
.clients-marquee {
  line-height: 0;
}

/* 4) Company profile table: separate label and content with a vertical line */
.company-table th {
  border-right: 1px solid #333;
}
.company-table td {
  padding-left: 26px !important;
}

/* 5) Media coverage: bigger logos, no border */
.media-marquee {
  margin-top: 26px;
}
.media-marquee .mq-media {
  border: none !important;
  margin-right: 30px;
}
.media-marquee .mq-media img {
  height: 62px !important;
}

/* --- Original services (product) cards --- */
.svc-products {
  margin-top: 34px;
}
.svc-products-label {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--red);
  font-weight: 600;
  margin-bottom: 18px;
  border-top: 1px solid #e5e2d8;
  padding-top: 22px;
}
.product-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 860px) {
  .product-cards {
    grid-template-columns: 1fr;
  }
}
.product-card {
  background: var(--beige-soft);
  border: 1px solid #e5e2d8;
  padding: 26px 24px;
}
.product-card h4 {
  color: var(--red);
  font-size: 15px;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.product-card p {
  font-size: 12.5px;
  line-height: 1.9;
  color: #444;
}

/* ============================================================
   v22 — homepage original assets (main visual GIF / title / logo / illustration)
============================================================ */
.hero-banner img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 640px) {
}
.about-logo-img {
  width: min(240px, 72%);
  height: auto;
  display: block;
  margin: 0 auto;
}
/* Original band illustration is sized slightly larger for balance */
.section-band .band-illust {
  width: clamp(108px, 13vw, 158px) !important;
  margin-bottom: -8px !important;
}

/* ============================================================
   v23 — About the CI: original "Seven Perspectives / Valuable Answer" diagram (layered composite)
============================================================ */
.seven-elements {
  margin-top: 44px;
  text-align: center;
}
.ci-diagram {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 801.58 / 590.97;
}
@supports not (aspect-ratio: 1) {
  .ci-diagram {
    height: 0;
    padding-bottom: 73.72%;
  }
}

/* v24 — actual patent certificates (larger) / footer dog, logo, ACCESS photos */
.cert-thumb {
  width: 190px !important;
  border: 1px solid #e5e2d8 !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important;
}
@media (max-width: 640px) {
  .cert-thumb {
    width: 150px !important;
  }
}
.footer-dog {
  width: 60px !important;
}
.footer-logo-img {
  width: 170px;
}

/* 2) Remove the —— to the right of "Akamedia" / "Vision" */
.vision-pre::after {
  content: none !important;
}

/* 3) Enlarge the homepage service illustrations */
.svc-head-row .svc-art {
  max-width: 210px !important;
}
@media (max-width: 640px) {
  .svc-head-row .svc-art {
    max-width: 128px !important;
  }
}

/* 4) Footer: arrange copyright/dog/line, company logo/note to match the attached reference */
.footer-line {
  position: relative;
  border-bottom: 1px solid #1a1a1a !important;
  text-align: right !important;
  padding-bottom: 8px !important;
  margin-top: 48px !important;
}
.footer-copy {
  display: inline !important;
}
.footer-dog {
  position: absolute !important;
  right: 2%;
  bottom: 0;
  width: 66px !important;
  margin: 0 !important;
  animation: none !important;
  vertical-align: baseline;
}
.footer-bottom {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-start;
  gap: 44px;
  margin-top: 26px;
}
.footer-logo-img {
  width: 178px;
  margin-bottom: 4px;
}
.footer-note {
  max-width: 640px;
}
@media (max-width: 720px) {
  .footer-bottom {
    flex-direction: column;
    gap: 18px;
  }
  .footer-dog {
    width: 54px !important;
  }
}

/* 5) Add spacing so the band at the top of subpages doesn't overlap the header */
.page:not(#page-home) > main {
  padding-top: calc(var(--header-h) + 36px) !important;
}

/* 6) Enlarge the ABOUT subheadings (Vision / About the CI / Company Profile / History) */
.sub-band h2,
.sub-band h3 {
  font-size: clamp(24px, 3vw, 34px) !important;
  font-weight: 700 !important;
}
.sub-band h2 small,
.sub-band h3 small {
  font-size: 13px;
}

/* 7) CI diagram: bigger, with each layer sliding in on scroll */
.ci-diagram {
  max-width: 860px !important;
} /* Valuable Answer */

/* 8) History: align the digits of the year box / month (fix misalignment on month-only rows) */
.history-date {
  width: 132px !important;
  flex-shrink: 0;
}
.history .m-only .y {
  visibility: hidden !important;
  display: inline-block !important;
}

/* 2) Further enlarge each department's illustration on the homepage */
.svc-head-row .svc-art {
  max-width: 244px !important;
}
@media (max-width: 640px) {
  .svc-head-row .svc-art {
    max-width: 150px !important;
  }
}

/* 3) Original services: display the brochure design large, as a banner */
.product-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
@media (max-width: 900px) {
  .product-cards {
    grid-template-columns: 1fr !important;
  }
}
.product-card.banner-card {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e2d8;
  border-radius: 6px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}
.product-card.banner-card:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}
.pc-banner {
  display: block;
  width: 100%;
  line-height: 0;
}
.pc-banner img {
  width: 100%;
  height: auto;
  display: block;
}
.product-card .pc-body {
  padding: 22px 24px 26px;
}
.product-card .pc-body h4 {
  color: var(--red);
  font-size: 16px;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.product-card .pc-body p {
  font-size: 13px;
  line-height: 1.9;
  color: #444;
}

/* 4) Footer: align the note text with the address column on the left (stacked, left-aligned) */
.footer-bottom {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
}
.footer-note {
  max-width: 780px;
  margin: 0 !important;
}

/* ============================================================
   v27 — move the footer note to the right (bottom-aligned) / redesign the ACCESS page
============================================================ */
/* 1) Footer: place the note to the right of the AKA media logo + address, aligned with the bottom of the address */
.footer-bottom {
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 48px !important;
}
.footer-company {
  flex: 0 0 auto;
}
.footer-note {
  max-width: 620px !important;
  margin: 0 !important;
  align-self: flex-end;
  font-size: 12.5px;
  line-height: 2;
  color: #555;
}
@media (max-width: 820px) {
  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }
  .footer-note {
    max-width: 100% !important;
    align-self: auto;
  }
}

/* 2) ACCESS: HQ = two columns (info + map), Studio = logo + description + photo */
.access-office {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
  background: #fff;
  border: 1px solid #e5e2d8;
  border-radius: 8px;
  padding: 34px 38px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.05);
  margin-bottom: 46px;
}
.access-office-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.access-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 4px;
}
.access-table th {
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  width: 84px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--red);
  font-weight: 700;
  padding: 9px 0;
}
.access-table td {
  font-size: 13.5px;
  line-height: 1.95;
  padding: 9px 0 9px 14px;
  color: #333;
}
.access-office-map {
  position: relative;
  min-height: 260px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e5e2d8;
}
.access-office-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.access-studio {
  background: #faf9f5;
  border: 1px solid #e5e2d8;
  border-radius: 8px;
  padding: 32px 38px 38px;
}
.access-studio-head {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.access-studio-head .access-addr {
  max-width: 560px;
}
@media (max-width: 820px) {
  .access-office {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 26px 22px;
  }
  .access-office-map {
    min-height: 240px;
  }
  .access-studio {
    padding: 24px 22px 30px;
  }
}

/* v27b — ACCESS map panel is self-contained (a decorative map that still works offline) */
.access-office-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  text-decoration: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
    repeating-linear-gradient(0deg, #edeae1 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, #edeae1 0 1px, transparent 1px 46px), #f4f2ea;
  transition: box-shadow 0.3s ease;
}
.access-office-map:hover {
  box-shadow: inset 0 0 0 2px var(--red);
}

/* ============================================================
   v30 — enlarge header nav / enlarge ABOUT fonts / unify SERVICES card size + RTL slide for 3+ items
============================================================ */
/* 1) Enlarge the global nav by about 2pt */
.global-nav a {
  font-size: 15px !important;
  letter-spacing: 0.14em !important;
}
.global-nav ul {
  gap: 30px;
}
@media (max-width: 1040px) {
  .global-nav ul {
    gap: 22px;
  }
  .global-nav a {
    font-size: 14px !important;
  }
}

/* 2) Enlarge the font across the whole ABOUT page */
#page-about .vision-pre {
  font-size: 15px !important;
}
#page-about .about-vision .catch {
  font-size: clamp(38px, 5vw, 60px) !important;
}
#page-about .about-vision .lead {
  font-size: 17px !important;
  line-height: 2.05 !important;
}
#page-about .ci-copy,
#page-about .ci-text p,
#page-about .about-ci p {
  font-size: 16px !important;
  line-height: 2.05 !important;
}
#page-about .company-table th,
#page-about .company-table td {
  font-size: 15px !important;
}
#page-about .history-text {
  font-size: 15.5px !important;
  line-height: 2 !important;
}
#page-about .history-date .y {
  font-size: 15px !important;
}
#page-about .sub-band h2,
#page-about .sub-band h3 {
  font-size: clamp(27px, 3.2vw, 38px) !important;
}
#page-about .lead,
#page-about p {
}

/* 3) SERVICES: unify the original-service card size across all departments */
.product-card.banner-card {
  width: 340px !important;
  max-width: 340px !important;
  flex: 0 0 340px !important;
} /* Disable the old wide setting */
.product-cards.static {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: flex-start;
}
@keyframes svc-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 640px) {
}

.product-card .pc-link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-en);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--red);
  border-bottom: 1px solid var(--red);
  padding-bottom: 2px;
  transition: gap 0.2s;
}

/* ============================================================
   v32 — responsive optimization per device (PC / tablet / mobile)
   Base (up to 1023px) = tablet baseline. PC scales up and mobile adjusts below.
============================================================ */

/* ---- PC (≥1024px): expand container + enlarge body font ---- */
@media (min-width: 1024px) {
  .container {
    max-width: 1120px;
  }
  body {
    font-size: 15.5px;
  }
  .news-list li {
    font-size: 15.5px;
  }
  .news-list time {
    font-size: 14px;
  }
  .svc-prose {
    font-size: 15.5px !important;
  }
  .product-card .pc-body p {
    font-size: 14px !important;
    line-height: 1.95 !important;
  }
  .product-card .pc-body h4 {
    font-size: 17px !important;
  }
  .company-table th,
  .company-table td {
    font-size: 15.5px !important;
  }
  .form-table th {
    font-size: 14.5px !important;
  }
  .form-table td,
  .form-table input,
  .form-table select,
  .form-table textarea {
    font-size: 15px !important;
  }
  .contact-col h4 {
    font-size: 18px;
  }
  .contact-tel {
    font-size: 15.5px;
  }
  .footer-note {
    font-size: 13.5px !important;
  }
  .footer-sub,
  .footer-head {
    font-size: 14px;
  }
  .access-table td {
    font-size: 15px !important;
  }
  .access-name {
    font-size: 20px;
  }
  .history-text {
    font-size: 15.5px;
  }
  .svc-products-label {
    font-size: 13px;
  }
}

/* ---- Large PC screens (≥1500px): even more spacious ---- */
@media (min-width: 1500px) {
  .container {
    max-width: 1240px;
  }
  body {
    font-size: 16.5px;
  }
  .news-list li {
    font-size: 16.5px;
  }
  .svc-prose {
    font-size: 16.5px !important;
  }
  .company-table th,
  .company-table td {
    font-size: 16.5px !important;
  }
  .service-catch {
    font-size: 22px;
  }
  .product-card .pc-body p {
    font-size: 14.5px !important;
  }
  .product-card .pc-body h4 {
    font-size: 18px !important;
  }
  .contact-col h4 {
    font-size: 19px;
  }
  .history-text {
    font-size: 16.5px;
  }
}

/* ---- Extra-large screens (≥1900px): raise the cap slightly ---- */
@media (min-width: 1900px) {
  .container {
    max-width: 1320px;
  }
  body {
    font-size: 17px;
  }
}

/* ---- Smartphones (≤600px): readability, single column, card width adjustment ---- */
@media (max-width: 600px) {
  body {
    font-size: 14.5px;
  }
  .container {
    padding: 0 18px;
  }
  .service-catch {
    font-size: clamp(16px, 4.6vw, 20px) !important;
  }
  .svc-prose {
    font-size: 14.5px !important;
  }
  /* Original service cards fit to screen width */
  .product-card.banner-card {
    width: min(340px, 86vw) !important;
    max-width: 86vw !important;
    flex: 0 0 min(340px, 86vw) !important;
  }
  .product-cards.static {
    justify-content: center;
  }
  .pc-body {
    padding: 18px 18px 22px !important;
  }
  .product-card .pc-body p {
    font-size: 13.5px !important;
  }
  .footer-note {
    font-size: 12.5px !important;
  }
  .news-list li {
    padding: 14px 4px;
  }
  .company-table th {
    width: 40% !important;
  }
  .form-table select {
    min-width: 0;
    width: 100%;
  }
  .access-office {
    padding: 22px 18px !important;
  }
}

/* ---- Small phones (≤380px) ---- */
@media (max-width: 380px) {
  body {
    font-size: 14px;
  }
  .product-card.banner-card {
    width: 90vw !important;
    flex-basis: 90vw !important;
    max-width: 90vw !important;
  }
}

/* ============================================================
   v33 — unify the layout of each department's intro (matches the attached reference)
   All departments stacked vertically in the same order: heading → illustration (left/bottom) → catchphrase → description
============================================================ */
/* Homepage teaser: place the illustration "below/left" instead of to the right of the title */
.svc-teaser .svc-head-row {
  display: block !important;
}
.svc-teaser .svc-head-row .plain-head {
  margin-bottom: 0 !important;
}
.svc-teaser .svc-head-row .svc-art {
  max-width: 300px !important;
  width: 300px;
  margin: 22px 0 6px !important;
  flex: none !important;
}
.svc-teaser .svc-head-row .svc-art img {
  width: 100%;
  height: auto;
  display: block;
}
.svc-teaser .service-catch {
  margin: 20px 0 16px !important;
}

/* SERVICES page: stack illustration → catchphrase → description vertically below the heading band */
.service-block .svc-intro {
  display: block;
}
.service-block .svc-art-top {
  max-width: 300px !important;
  width: 300px;
  margin: 4px 0 22px !important;
}
.service-block .svc-art-top img {
  width: 100%;
  height: auto;
  display: block;
}
.service-block .svc-intro .service-catch {
  margin: 0 0 18px !important;
}
.service-block .svc-intro .svc-prose {
  margin: 0 0 6px !important;
  max-width: 900px;
}

/* Unify how the illustration looks across all departments (left-aligned, same width) */
.svc-art,
.svc-art-top {
  margin-left: 0 !important;
}

/* Mobile: keep the illustration left-aligned but slightly smaller */
@media (max-width: 640px) {
  .svc-teaser .svc-head-row .svc-art {
    max-width: 200px !important;
    width: 200px;
    margin: 16px 0 4px !important;
  }
  .service-block .svc-art-top {
    max-width: 200px !important;
    width: 200px;
    margin: 4px 0 16px !important;
  }
}

/* ============================================================
   v34 — scroll animation / enlarge CI diagram / align cards / media logos
============================================================ */
/* 1) Slide band titles (NEWS/ABOUT US/SERVICES, etc.) in from left to right */
.section-band .section-title.av {
  opacity: 0;
  transform: translateX(-48px);
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.19, 0.72, 0.24, 1);
  will-change: transform, opacity;
}
.section-band .section-title.av.av-in {
  opacity: 1;
  transform: none;
}
/* The band illustration also fades in, slightly delayed */
.section-band .band-illust.av {
  opacity: 0;
  transition: opacity 0.8s ease 0.2s;
}
.section-band .band-illust.av.av-in {
  opacity: 1;
}

/* 2) Wipe the ONE STEP AHEAD red highlight in from left to right */
.about-teaser .osa-box .hl.av {
  background: linear-gradient(var(--red), var(--red)) no-repeat left center !important;
  background-size: 0% 100% !important;
  color: var(--ink) !important;
  transition: background-size 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.about-teaser .osa-box .hl.av.av-in {
  background-size: 100% 100% !important;
}
/* Place MORE DETAILS directly below ONE STEP AHEAD */
.about-teaser .split-text .osa-box {
  display: inline-block;
}
.about-teaser .split-text .btn-more {
  display: inline-flex;
  margin-top: 26px;
}

/* 3) Wipe the service catchphrase's red underline in from left to right */
.service-catch .hl.av {
  background-size: 0% 3px !important;
  transition: background-size 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.service-catch .hl.av.av-in {
  background-size: 100% 3px !important;
}
.service-catch .hl.av:nth-child(3) {
  transition-delay: 0.12s;
}

/* 4) CI (Seven Elements) diagram: tighten the spacing from the description text and enlarge it */
.about-ci .seven-elements {
  margin-top: 6px !important;
}
.about-ci .ci-diagram {
  max-width: 1040px !important;
}
@media (max-width: 1100px) {
  .about-ci .ci-diagram {
    max-width: 100% !important;
  }
}

/* 5) Original service cards: align image, service name, description, and link */
.product-card.banner-card {
  display: flex;
  flex-direction: column;
}
.product-card .pc-banner {
  display: block;
  width: 100%;
  height: 190px;
  overflow: hidden;
}
.product-card .pc-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.product-card .pc-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.product-card .pc-body p {
  flex: 0 0 auto;
}
.product-card .pc-link {
  margin-top: auto;
  align-self: flex-start;
}
@media (max-width: 600px) {
  .product-card .pc-banner {
    height: 150px;
  }
}

/* 6) Enlarge and align the media-coverage logos (transparent-background version) slightly */
.media-marquee .mq-media img {
  height: 58px !important;
}

/* ============================================================
   v35 — fix MORE DETAILS placement / CI diagram 1.5x, tighter spacing
============================================================ */
/* 1) Move MORE DETAILS below ONE STEP AHEAD, left-aligned (remove the side-by-side layout) */
.about-teaser .split-text .osa-box {
  display: block !important;
  width: -moz-fit-content;
  width: fit-content;
}
.about-teaser .split-text .btn-more {
  display: inline-flex !important;
  margin-top: 24px !important;
}

/* 2) CI diagram: replace with a single pre-cropped image (whitespace trimmed) → place large, directly below the description */
.about-ci .seven-elements {
  margin-top: 6px !important;
  text-align: center;
}
.about-ci .ci-diagram {
  position: static !important;
  width: min(1080px, 94vw) !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  transform: none !important;
  clip-path: none !important;
  padding-bottom: 0 !important;
  height: auto !important;
}
.about-ci .ci-composed {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}
.about-ci .ci-diagram.is-visible .ci-composed {
  opacity: 1;
  transform: none;
}
.about-ci .seven-elements figcaption {
  margin-top: 8px !important;
}
@media (max-width: 720px) {
  .about-ci .ci-diagram {
    width: 100% !important;
  }
}

/* ============================================================
   v36 — CSR / Privacy Policy document pages
============================================================ */
.doc {
  max-width: 900px;
  padding-top: 8px;
  padding-bottom: 40px;
}
.doc-lead {
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding-bottom: 16px;
  margin-bottom: 26px;
  border-bottom: 2px solid var(--red);
}
.doc h3.doc-h {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
  margin: 40px 0 14px;
  padding-left: 14px;
  border-left: 5px solid var(--red);
}
.doc h4.doc-h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.03em;
  margin: 26px 0 10px;
}
.doc h4.doc-h4 small {
  color: var(--gray);
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  margin-left: 10px;
}
.doc p {
  font-size: 15px;
  line-height: 2;
  color: #333;
  margin-bottom: 14px;
}
.doc .doc-ul,
.doc .doc-ol {
  margin: 6px 0 18px;
  padding-left: 1.6em;
}
.doc .doc-ul li,
.doc .doc-ol li {
  font-size: 15px;
  line-height: 1.9;
  color: #333;
  margin-bottom: 6px;
}
.doc .doc-ul li {
  list-style: none;
  position: relative;
  padding-left: 18px;
}
.doc .doc-ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 7px;
  height: 7px;
  background: var(--red);
  border-radius: 50%;
}
.doc .doc-ol {
  list-style: decimal;
}
.doc .doc-appendix {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #ddd;
  font-size: 14px;
  color: #555;
}
@media (min-width: 1024px) {
  .doc p,
  .doc .doc-ul li,
  .doc .doc-ol li {
    font-size: 15.5px;
  }
}
@media (max-width: 600px) {
  .doc p,
  .doc .doc-ul li,
  .doc .doc-ol li {
    font-size: 14.5px;
  }
}

/* ============================================================
   v38 — expand animations / enlarge services / unify media / access / CI
============================================================ */
/* --- 1) Red line under the News title, CI heading red line, and ABOUT vision OSA — all sweep left to right on scroll --- */
/* Change the News na-title underline to a wipeable gradient underline */
.na-title {
  border-bottom: none !important;
  background-image: linear-gradient(var(--red), var(--red)) !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  background-size: 100% 2px !important;
}
.na-title.av {
  background-size: 0% 2px !important;
  transition: background-size 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.na-title.av.av-in {
  background-size: 100% 2px !important;
}
/* Wipe the underline on CI headings (About the company name / About the logo mark) */
.red-box-heading {
  border-bottom: none !important;
  background-image: linear-gradient(var(--red), var(--red)) !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  background-size: 100% 3px !important;
}
.red-box-heading.av {
  background-size: 0% 3px !important;
  transition: background-size 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.red-box-heading.av.av-in {
  background-size: 100% 3px !important;
}
/* Wipe the ABOUT vision's ONE STEP AHEAD red highlight left to right (unified with the homepage) */
.about-vision .catch .hl.av {
  background: linear-gradient(var(--red), var(--red)) no-repeat left center !important;
  background-size: 0% 100% !important;
  color: var(--ink) !important;
  transition: background-size 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.about-vision .catch .hl.av.av-in {
  background-size: 100% 100% !important;
}

/* --- 2) Services: enlarge department title/catchphrase/illustration, unified across all departments --- */
.svc-teaser .plain-head h3,
.service-block .sub-band h3 {
  font-size: clamp(30px, 3.9vw, 46px) !important;
  letter-spacing: 0.04em !important;
}
.svc-teaser .plain-head h3 small,
.service-block .sub-band h3 small {
  font-size: 14px !important;
  margin-top: 8px !important;
}
.service-catch {
  font-size: clamp(22px, 2.8vw, 31px) !important;
  line-height: 1.55 !important;
}
.svc-teaser .service-catch,
.service-block .service-catch {
  margin: 22px 0 20px !important;
}
.svc-prose {
  font-size: clamp(15px, 1.6vw, 17px) !important;
}
/* Illustration 1.5x (300→450px) */
.svc-teaser .svc-head-row .svc-art {
  max-width: 450px !important;
  width: 450px !important;
  margin: 26px 0 8px !important;
}
.service-block .svc-art-top {
  max-width: 450px !important;
  width: 450px !important;
  margin: 8px 0 24px !important;
}
@media (max-width: 900px) {
  .svc-teaser .svc-head-row .svc-art,
  .service-block .svc-art-top {
    max-width: 320px !important;
    width: 320px !important;
  }
}
@media (max-width: 600px) {
  .svc-teaser .svc-head-row .svc-art,
  .service-block .svc-art-top {
    max-width: 230px !important;
    width: 230px !important;
  }
  .service-catch {
    font-size: clamp(19px, 5vw, 24px) !important;
  }
}
/* Spacing adjustment */
.svc-teaser {
  padding-top: 46px !important;
  padding-bottom: 46px !important;
}

/* --- 4) Unify the media-coverage logos with the client-logos' size/speed --- */
.media-marquee .mq-media img {
  height: 46px !important;
}
.media-marquee .marquee-track {
  animation-duration: 26s !important;
}

/* --- 5) Access: display the Nishi-Azabu studio photo tall, at its original aspect ratio --- */
.access-photos {
  gap: 16px !important;
}
.access-photos img {
  height: 260px !important;
  object-fit: cover;
}
@media (max-width: 640px) {
  .access-photos img {
    height: 300px !important;
  }
}

/* --- 6) Make the CI diagram's Seven Elements labels easier to read (enlarge beyond the container width → bigger labels) --- */
.about-ci .ci-diagram {
  width: min(1280px, 94vw) !important;
  max-width: none !important;
  margin-left: 50% !important;
  transform: translateX(-50%) !important;
}
@media (max-width: 720px) {
  .about-ci .ci-diagram {
    width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
  }
}

/* v38b — display an actual map (iframe) for the Access HQ */
.access-office-map {
  padding: 0 !important;
  background: none !important;
  overflow: hidden;
  position: relative;
  min-height: 300px;
}
.access-office-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.access-office-map:hover {
  box-shadow: none !important;
}
@media (max-width: 820px) {
  .access-office-map {
    min-height: 260px;
  }
}

/* ============================================================
   v39 — hero vignette & camera-flash-style animation
============================================================ */
.hero-banner {
  position: relative;
  overflow: hidden;
}
/* Vignette darkening the overall edges (effect reduced to about half) */
.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    ellipse 80% 84% at 50% 46%,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, 0.07) 80%,
    rgba(0, 0, 0, 0.17) 100%
  );
  mix-blend-mode: multiply;
}
/* Spike the exposure across the whole image (a flash like a photo being taken) */
.hero-banner img {
  animation: heroPhotoFlash 6s ease-in-out infinite;
  will-change: filter;
}
@keyframes heroPhotoFlash {
  0%,
  4% {
    filter: brightness(1) saturate(1);
  }
  10% {
    filter: brightness(1.5) saturate(1.06);
  } /* 1st time: glows slowly */
  18% {
    filter: brightness(1);
  } /* Fades out slowly */
  26% {
    filter: brightness(1.5) saturate(1.06);
  } /* 2nd time */
  34% {
    filter: brightness(1);
  }
  100% {
    filter: brightness(1);
  } /* Pauses for a while after that */
}
@keyframes heroFlashVeil {
  0%,
  3% {
    opacity: 0;
  }
  4.5% {
    opacity: 0.6;
  }
  9% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner img {
    animation: none !important;
    filter: none !important;
  }
}

/* ============================================================
   v41 — logo ladybug animation / video flash / ultra-subtle vignette / spacing / unify media
============================================================ */
/* 1) Top-left logo: keep the ladybug fixed and loop it rotating like a dial (2x right → 1x left → back to start) */
.header-logo .logo-stack {
  position: relative;
  display: inline-block;
  line-height: 0;
  overflow: visible;
}
.header-logo img {
  width: 116px;
}
.header-logo .logo-bug {
  position: absolute;
  left: 80.6%;
  top: 3.6%;
  width: 15.5%;
  height: auto;
  transform-origin: 49% 60%;
  animation: bugDial 5s cubic-bezier(0.55, 0.05, 0.35, 1) infinite;
  will-change: transform;
}
@keyframes bugDial {
  0%,
  14% {
    transform: rotate(0deg);
  } /* Stationary */
  50% {
    transform: rotate(720deg);
  } /* Rotate right twice */
  76% {
    transform: rotate(360deg);
  } /* Rotate left once (back to the original direction) */
  86%,
  100% {
    transform: rotate(360deg);
  } /* Hold at the original position → loop */
}
@media (prefers-reduced-motion: reduce) {
  .header-logo .logo-bug {
    animation: none;
  }
}

/* 2) Hero: overlay video using screen blend mode to create a light effect (using the attached video) */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0.5;
}
@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
}

/* 3) Make the vignette so subtle it's barely noticeable */
.hero-vignette {
  background: radial-gradient(
    ellipse 84% 88% at 50% 46%,
    rgba(0, 0, 0, 0) 62%,
    rgba(0, 0, 0, 0.03) 84%,
    rgba(0, 0, 0, 0.075) 100%
  ) !important;
}

/* 4) Make the top image slightly taller, add white space below it before the NEWS section */
.hero-banner {
  aspect-ratio: 1280 / 452;
  overflow: hidden;
}
.hero-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
}
#page-home main > .hero {
  margin-bottom: 0 !important;
}
#page-home main > .hero + .section-band {
  margin-top: 56px !important;
}
@media (max-width: 640px) {
  .hero-banner {
    aspect-ratio: 1080 / 470;
  }
  #page-home main > .hero + .section-band {
    margin-top: 40px !important;
  }
}

/* 5) Unify the media-coverage logos with the client-logos slider (size / line spacing / speed) */
.media-marquee .mq-media img {
  height: 44px !important;
}
.media-marquee .marquee-track {
  animation-duration: 45s !important;
}
.media-marquee .marquee + .marquee {
  margin-top: 14px !important;
}

/* v42b — make the vignette so faint it's almost imperceptible */
.hero-vignette {
  background: radial-gradient(
    ellipse 88% 90% at 50% 46%,
    rgba(0, 0, 0, 0) 72%,
    rgba(0, 0, 0, 0.012) 88%,
    rgba(0, 0, 0, 0.038) 100%
  ) !important;
}

/* ============================================================
   v45 — unify the media department card with the other departments' size and design (tall)
============================================================ */
/* Unify the original-service card height across all departments */
.product-card.banner-card {
  min-height: 470px;
}
.product-cards.static .product-card.banner-card {
  min-height: 470px;
}
@media (max-width: 600px) {
  .product-card.banner-card {
    min-height: 0;
  }
}

/* ============================================================
   v46 — refresh the original-service banners (SALES/JET/Animoba) + bigger title + spacing
============================================================ */
/* Make the title bigger for more impact */
.product-card .pc-body h4 {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.35 !important;
  margin-bottom: 12px !important;
}
@media (max-width: 600px) {
  .product-card .pc-body h4 {
    font-size: 18px !important;
  }
}
/* Widen the spacing between the department description and the cards */
.svc-products {
  margin-top: 58px !important;
}
.svc-products-label {
  padding-top: 30px !important;
  margin-bottom: 26px !important;
}
.service-block .svc-intro .svc-prose {
  margin-bottom: 30px !important;
}

/* ============================================================
   v48 — nearly remove the vignette / stretch the top image into the whitespace
============================================================ */
/* Significantly reduce the vignette to a barely-there level */
.hero-vignette {
  background: radial-gradient(
    ellipse 92% 94% at 50% 47%,
    rgba(0, 0, 0, 0) 80%,
    rgba(0, 0, 0, 0.004) 92%,
    rgba(0, 0, 0, 0.014) 100%
  ) !important;
}

/* Stretch the top image vertically to remove the white gap before NEWS */
.hero-banner {
  aspect-ratio: 1280 / 505 !important;
}
#page-home main > .hero + .section-band {
  margin-top: 0 !important;
}
@media (max-width: 640px) {
  .hero-banner {
    aspect-ratio: 1080 / 520 !important;
  }
  #page-home main > .hero + .section-band {
    margin-top: 0 !important;
  }
}
@media (max-width: 820px) {
}

/* ============================================================
   v52 — display the top image at its native aspect ratio, removing blur caused by scaling
============================================================ */
.hero-banner {
  aspect-ratio: auto !important;
  overflow: hidden;
}
.hero-banner img {
  width: 100% !important;
  height: auto !important;
  object-fit: fill !important;
  image-rendering: auto;
}
#page-home main > .hero + .section-band {
  margin-top: 0 !important;
}
@media (max-width: 640px) {
  .hero-banner {
    aspect-ratio: auto !important;
  }
}

/* ============================================================
   v53 — new hero / spacing between certificates / shrink media illustration / spacing before NEWS
============================================================ */
/* Add spacing between the certificate thumbnails in the history section */
.history-text .cert-thumb {
  margin-right: 18px;
  margin-bottom: 6px;
  vertical-align: top;
}
.history-text .cert-thumb:last-child {
  margin-right: 0;
}

/* Make the media department's illustration smaller than the other departments' */
.svc-art.media-art {
  max-width: 300px !important;
  width: 300px !important;
}
.svc-teaser .svc-head-row .svc-art.media-art {
  max-width: 300px !important;
  width: 300px !important;
}
@media (max-width: 900px) {
  .svc-art.media-art {
    max-width: 230px !important;
    width: 230px !important;
  }
}
@media (max-width: 600px) {
  .svc-art.media-art {
    max-width: 170px !important;
    width: 170px !important;
  }
}

/* Add white space between the top image and NEWS */
#page-home main > .hero + .section-band {
  margin-top: 60px !important;
}
@media (max-width: 640px) {
  #page-home main > .hero + .section-band {
    margin-top: 44px !important;
  }
}

/* v54: change the award text in the history section from bold to regular / make the logo badge (Cyber, Berlin) white card background transparent */
.history-text b {
  font-weight: 400 !important;
}
.cert-thumb.logo-thumb {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ============ v56 ============ */
/* (A) Header logo: rotate each letter of "AKA" individually + continuous ladybug animation */
.header-logo .logo-stack {
  position: relative;
  display: inline-block;
  width: 116px;
  line-height: 0;
  overflow: visible;
}
.header-logo .logo-media {
  width: 100% !important;
  display: block;
  height: auto;
}
.header-logo .lz {
  position: absolute;
  height: auto;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}
.header-logo .lz-a1 {
  left: 9.54%;
  top: 14.9%;
  width: 22.96%;
  animation: akaCW 8s ease-in-out infinite;
}
.header-logo .lz-k {
  left: 34.57%;
  top: 15.31%;
  width: 21.32%;
  animation: akaCCW 8s ease-in-out infinite;
}
.header-logo .lz-a2 {
  left: 57.44%;
  top: 14.9%;
  width: 22.96%;
  animation: akaCW 8s ease-in-out infinite;
}
@keyframes akaCW {
  0%,
  6% {
    transform: rotate(0deg);
  }
  13%,
  18% {
    transform: rotate(90deg);
  }
  25%,
  30% {
    transform: rotate(180deg);
  }
  37%,
  42% {
    transform: rotate(270deg);
  }
  49%,
  100% {
    transform: rotate(360deg);
  }
}
@keyframes akaCCW {
  0%,
  6% {
    transform: rotate(0deg);
  }
  13%,
  18% {
    transform: rotate(-90deg);
  }
  25%,
  30% {
    transform: rotate(-180deg);
  }
  37%,
  42% {
    transform: rotate(-270deg);
  }
  49%,
  100% {
    transform: rotate(-360deg);
  }
}
/* Ladybug: after the letters settle, rotate right twice → left once → hold still */
.header-logo .logo-bug {
  animation: bugSeq 8s ease-in-out infinite !important;
}
@keyframes bugSeq {
  0%,
  52% {
    transform: rotate(0deg);
  }
  76% {
    transform: rotate(720deg);
  }
  90%,
  100% {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .header-logo .lz,
  .header-logo .logo-bug {
    animation: none !important;
    transform: none !important;
  }
}

/* (B) Services: enlarge the original-service title */
.product-card .pc-body h4 {
  font-size: 25px !important;
  line-height: 1.3 !important;
}
@media (max-width: 900px) {
  .product-card .pc-body h4 {
    font-size: 22px !important;
  }
}
@media (max-width: 600px) {
  .product-card .pc-body h4 {
    font-size: 20px !important;
  }
}

/* (C) Make the divider between the department description and original services clearer (with a chamfered accent) */
.svc-products {
  position: relative;
  margin-top: 62px !important;
  padding-top: 40px !important;
  border-top: 2px solid #e3ded0;
}
.svc-products::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 74px;
  height: 6px;
  background: var(--red);
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.svc-products::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 82px;
  width: 30px;
  height: 6px;
  background: var(--red);
  opacity: 0.35;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.svc-products-label {
  border-top: none !important;
  padding-top: 0 !important;
}

/* ============ v58 ============ */
/* Shared: layered illustration animation container */
.band-illust.fx-scene {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.fx-scene .fxl {
  display: block;
  width: 100%;
}
.fx-scene .base {
  position: relative;
}
.fx-scene .ov {
  position: absolute;
  top: 0;
  left: 0;
}

/* (1) Hero: overlay a transparent wind-flow / smog effect on the background */
.hero-banner {
  position: relative;
}
.hero-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.hero-fx::before {
  content: "";
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(60% 50% at 28% 38%, rgba(255, 255, 255, 0.07), transparent 70%),
    radial-gradient(55% 45% at 72% 62%, rgba(228, 230, 236, 0.06), transparent 72%);
  animation: smogDrift 24s ease-in-out infinite alternate;
}
.hero-fx .wind {
  position: absolute;
  top: -10%;
  left: -45%;
  width: 42%;
  height: 120%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 45%,
    rgba(255, 255, 255, 0.17) 55%,
    transparent 100%
  );
  filter: blur(7px);
  transform: skewX(-12deg);
  animation: windDrift 10s linear infinite;
}
.hero-fx .w2 {
  animation-duration: 14s;
  animation-delay: -5s;
  opacity: 0.7;
}
.hero-fx .w3 {
  animation-duration: 18s;
  animation-delay: -9s;
  opacity: 0.5;
}
@keyframes windDrift {
  0% {
    transform: translateX(0) skewX(-12deg);
  }
  100% {
    transform: translateX(360%) skewX(-12deg);
  }
}
@keyframes smogDrift {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(4%, -3%);
  }
}

/* (2) NEWS: camera flash (snap) */
.fx-news .flash {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at 24% 46%,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.75) 22%,
    rgba(255, 255, 255, 0) 58%
  );
}
.fx-news.fx-in .flash {
  animation: camFlash 1.7s ease-out;
}
@keyframes camFlash {
  0%,
  52% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  68% {
    opacity: 0.12;
  }
  75% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
  }
}

/* (3) ABOUT US: clothing turns red in sequence (subject → person in front → group) */
.fx-about .ov {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.fx-about.fx-in .g1 {
  opacity: 1;
  transition-delay: 0.15s;
}
.fx-about.fx-in .g2 {
  opacity: 1;
  transition-delay: 0.75s;
}
.fx-about.fx-in .g3 {
  opacity: 1;
  transition-delay: 1.35s;
}

/* (4) SERVICES: speech bubbles appear in order from left to right */
.fx-proj .ov {
  opacity: 0;
  transform: scale(0.78);
  transform-origin: 50% 80%;
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.2, 1.35, 0.4, 1);
}
.fx-proj.fx-in .b1 {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.2s;
}
.fx-proj.fx-in .b2 {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.85s;
}
@keyframes dogRunOff {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-58vw);
  }
}
.site-footer {
  overflow: hidden;
}

/* (7) Change the ONE STEP AHEAD text color to white, below "Akamedia, the messenger of the future" */
.about-teaser .osa-box .hl.av,
.about-teaser .osa-box .hl.av.av-in {
  color: #fff !important;
}

/* (8) Akamedia logo (right of "messenger of the future" / right of Vision): keep the black head-dot fixed, rotate only the red circle (2 right / 2 left) */
.alogo {
  position: relative;
  display: block;
}
.alogo .fxl {
  display: block;
  width: 100%;
}
.alogo .base {
  position: relative;
}
.alogo .albody,
.alogo .alhead {
  position: absolute;
  top: 0;
  left: 0;
}
.alogo .albody {
  transform-origin: 50% 49.8%;
  will-change: transform;
  animation: alBodySeq 7s ease-in-out infinite;
}
@keyframes alBodySeq {
  0%,
  14% {
    transform: rotate(0deg);
  }
  46% {
    transform: rotate(720deg);
  }
  80%,
  100% {
    transform: rotate(0deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .alogo .albody {
    animation: none !important;
  }
  .hero-fx {
    display: none;
  }
}

/* ============ v59 ============ */
/* (1) Header: stop the ladybug's rotation and fix its position (keep the AKA letter animation) */
.header-logo .logo-bug {
  animation: none !important;
  transform: none !important;
}

/* (2) ONE STEP AHEAD: no red highlight, red text, bold and impactful design (shared by homepage and Vision) */
.about-teaser .osa-box .hl,
.about-teaser .osa-box .hl.av,
.about-teaser .osa-box .hl.av.av-in,
.about-vision .catch .hl,
.about-vision .catch .hl.av,
.about-vision .catch .hl.av.av-in {
  background: none !important;
  color: var(--red) !important;
  padding: 0 !important;
  font-weight: 800 !important;
  font-size: clamp(36px, 5.2vw, 64px) !important;
  letter-spacing: 0.03em !important;
  line-height: 1.12 !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
@media (max-width: 600px) {
  .about-teaser .osa-box .hl,
  .about-vision .catch .hl {
    font-size: clamp(30px, 8vw, 40px) !important;
  }
}

/* ============ v60 ============ */
/* Revert to the original design: enlarge the band illustration so it straddles the top edge of the band */
.section-band {
  overflow: visible;
  position: relative;
  text-align: center;
}
.section-band .band-center {
  display: inline-flex !important;
  position: relative;
  width: auto !important;
  margin: 0 auto !important;
  text-align: left;
}
.section-band .band-illust {
  position: absolute !important;
  left: calc(100% + 16px) !important;
  right: auto !important;
  top: 0 !important;
  bottom: auto !important;
  transform: translateY(-46%) !important;
  width: clamp(170px, 19vw, 258px) !important;
  margin: 0 !important;
}
.section-band .band-illust .fxl {
  width: 100%;
  display: block;
}
@media (max-width: 640px) {
  .section-band .band-illust {
    width: clamp(112px, 26vw, 148px) !important;
    left: calc(100% + 8px) !important;
    transform: translateY(-40%) !important;
  }
}

/* ============ v61 ============ */
/* (1) Remove the logo rotation to the right of "messenger of the future" / right of Vision (hold still) */
.alogo .albody {
  animation: none !important;
  transform: none !important;
}

/* (2) CI page: rotate the ladybug logo's red circle right twice (when revealed on scroll) */
.about-ci .ci-stack {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 600px;
  line-height: 0;
  vertical-align: top;
}
.about-ci .ci-stack .ci-composed {
  display: block;
  width: 100%;
  height: auto;
  max-width: none !important;
}
.about-ci .ci-stack .ci-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-width: none !important;
  transform-origin: 47.88% 53.09%;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.about-ci .ci-diagram.is-visible .ci-stack .ci-circle {
  opacity: 1;
  animation: ciDiskSpin 3.4s cubic-bezier(0.45, 0.05, 0.35, 1);
}
@keyframes ciDiskSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(720deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-ci .ci-stack .ci-circle {
    animation: none !important;
  }
}

/* (3) Add spacing between the CI description and the company profile */
.about-ci {
  padding-bottom: 46px !important;
}
.about-ci .seven-elements {
  margin-bottom: 30px;
}
.sub-band:has(+ .container .history-wrap),
.about-ci + .sub-band {
  margin-top: 26px;
}

/* (5) Enlarge the Berlin (BMVA) pink logo by 1.5x */
.cert-thumb.berlin-big {
  width: 285px !important;
}
@media (max-width: 640px) {
  .cert-thumb.berlin-big {
    width: 225px !important;
  }
}

/* ============ v62 ============ */
/* (A) Band illustration clearance: add spacing before/after the band so the overflowing illustration doesn't overlap adjacent sections */
#page-home main > .section-band {
  margin-top: 120px !important;
}
#page-home main > .hero + .section-band {
  margin-top: 92px !important;
}
.section-band + .container,
.section-band + .pattern-bg,
.section-band + .service-block,
.section-band + .svc-teaser {
  padding-top: 68px !important;
}
/* Increase spacing so the top of subpages doesn't overlap the header */
.page:not(#page-home) > main {
  padding-top: calc(var(--header-h) + 108px) !important;
}
@media (max-width: 640px) {
  #page-home main > .section-band {
    margin-top: 78px !important;
  }
  #page-home main > .hero + .section-band {
    margin-top: 60px !important;
  }
  .page:not(#page-home) > main {
    padding-top: calc(var(--header-h) + 68px) !important;
  }
}

/* (B) "Akamedia, messenger of the future": size it to about half of ONE STEP AHEAD (unified on homepage/Vision) */
.about-teaser .vision-pre,
.about-vision .vision-pre,
#page-about .vision-pre {
  font-size: clamp(18px, 2.6vw, 32px) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 0.22em !important;
  line-height: 1.25 !important;
}

/* (C) CI diagram: loop the red circle 2x right, 1x left (slowly) */
.about-ci .ci-stack .ci-circle {
  animation: ciDiskLoop 11s ease-in-out infinite !important;
}
.about-ci .ci-diagram.is-visible .ci-stack .ci-circle {
  opacity: 1;
}
@keyframes ciDiskLoop {
  0% {
    transform: rotate(0deg);
  }
  38% {
    transform: rotate(720deg);
  } /* Rotate right twice */
  46% {
    transform: rotate(720deg);
  }
  84% {
    transform: rotate(360deg);
  } /* Rotate left once */
  100% {
    transform: rotate(360deg);
  } /* Loop, since 360==0 */
}

/* (2) CI diagram: make the gold rim on the head glimmer */
.about-ci .ci-stack .ci-goldrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-width: none !important;
  pointer-events: none;
  opacity: 0;
  animation: ciGoldBlink 2.4s ease-in-out infinite;
}

@keyframes ciGoldBlink {
  0%,
  100% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  16% {
    opacity: 0.15;
  }
  24% {
    opacity: 0.95;
  }
  40% {
    opacity: 0;
  }
}

/* (3) Widen the spacing between the CI description and the company profile further */
.about-ci {
  padding-bottom: 92px !important;
}
.about-ci .seven-elements {
  margin-bottom: 54px !important;
}

/* (4) Enlarge the Seven Elements diagram and its label text */
.about-ci .ci-stack {
  max-width: min(1080px, 94vw) !important;
}
.about-ci .seven-elements figcaption {
  font-size: clamp(14px, 1.5vw, 19px) !important;
  margin-top: 14px !important;
}

/* (5) Left-align the Berlin (BMVA) logo (excess whitespace already trimmed) */
.cert-thumb.berlin-big {
  width: 250px !important;
}
@media (max-width: 640px) {
  .cert-thumb.berlin-big {
    width: 200px !important;
  }
}

/* ============ v64 ============ */
/* (1) Unify the shared footer font at 1.5x */
.footer-head {
  font-size: 21px !important;
  margin-bottom: 10px !important;
}
.footer-col a:not(.footer-head) {
  font-size: 18px !important;
}
.footer-col {
  gap: 13px !important;
}
.footer-company p:first-child {
  font-size: 21px !important;
}
.footer-company p:last-child {
  font-size: 16px !important;
}
.footer-note {
  font-size: 16px !important;
}
@media (max-width: 640px) {
  .footer-head {
    font-size: 18px !important;
  }
  .footer-col a:not(.footer-head) {
    font-size: 16px !important;
  }
}

/* (3) Services original-service cards: replace the scrolling marquee with a fixed 3-column grid */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 12px;
  align-items: stretch;
}
.svc-grid .product-card.banner-card {
  width: auto !important;
  max-width: none !important;
  flex: initial !important;
  margin-right: 0 !important;
  min-height: 0 !important;
  align-self: stretch;
}
@media (max-width: 900px) {
  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 600px) {
  .svc-grid {
    grid-template-columns: 1fr;
  }
}

/* (4) Enlarge the original-service description text (better readability) */
.svc-grid .product-card .pc-body p,
.product-cards.static .product-card .pc-body p {
  font-size: clamp(19px, 1.5vw, 24px) !important;
  line-height: 1.75 !important;
  color: #333 !important;
}
.svc-grid .product-card .pc-body h4,
.product-cards.static .product-card .pc-body h4 {
  font-size: clamp(26px, 2.1vw, 32px) !important;
}
.svc-grid .product-card .pc-body {
  padding: 22px 22px 26px !important;
}

/* ============ v65 ============ */
/* Slightly shrink the CI diagram */
.about-ci .ci-stack {
  max-width: min(820px, 92vw) !important;
}
.about-ci .seven-elements figcaption {
  font-size: clamp(13px, 1.3vw, 16px) !important;
}

/* Shrink the Berlin (BMVA) logo a touch */
.cert-thumb.berlin-big {
  width: 205px !important;
}
@media (max-width: 640px) {
  .cert-thumb.berlin-big {
    width: 170px !important;
  }
}

/* Enlarge the major client logos a touch */
.mq-logo {
  height: 74px !important;
  padding: 8px 18px !important;
}
.mq-logo img {
  max-height: 60px !important;
}
@media (max-width: 640px) {
  .mq-logo {
    height: 64px !important;
  }
  .mq-logo img {
    max-height: 50px !important;
  }
}

/* Remove the black border on the CONTACT confirm button */
.btn-red {
  border: none !important;
  outline: none !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.btn-outline {
  cursor: pointer;
}

/* Header: show a hover dropdown (table) for About Us / Services */
.global-nav .has-sub {
  position: relative;
}
.global-nav .subnav {
  display: block !important;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 232px;
  min-width: 232px;
  background: #fff;
  border: 1px solid #ececec;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 8px 0;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: 200;
}
.global-nav .has-sub:hover .subnav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(4px);
}
.global-nav .subnav li {
  display: block !important;
  width: 100%;
  margin: 0 !important;
}
.global-nav .subnav a {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #333 !important;
  white-space: nowrap;
  font-family: var(--font-ja, inherit);
}
.global-nav .subnav a:hover {
  background: #faf0f0;
  color: var(--red) !important;
}
.global-nav .has-sub > a::after {
  content: "▾";
  font-size: 0.7em;
  margin-left: 5px;
  opacity: 0.6;
}
@media (max-width: 1120px) {
  .global-nav .subnav {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    min-width: 0;
    padding: 2px 0 6px 14px;
  }
  .global-nav .has-sub > a::after {
    display: none;
  }
}

/* ============ v66 ============ */
/* Further enlarge the original-service description/heading (improve readability) */
.svc-grid .product-card .pc-body p,
.product-cards.static .product-card .pc-body p {
  font-size: clamp(23px, 1.9vw, 30px) !important;
  line-height: 1.7 !important;
}
.svc-grid .product-card .pc-body h4,
.product-cards.static .product-card .pc-body h4 {
  font-size: clamp(28px, 2.4vw, 36px) !important;
}
.svc-grid .product-card .pc-body {
  padding: 26px 24px 30px !important;
}

/* ============ v67 ============ */
/* Shrink the footer text slightly (1.5x → about 1.2x) */
.footer-head {
  font-size: 16px !important;
  margin-bottom: 8px !important;
}
.footer-col a:not(.footer-head) {
  font-size: 14px !important;
}
.footer-col {
  gap: 10px !important;
}
.footer-company p:first-child {
  font-size: 16px !important;
}
.footer-company p:last-child {
  font-size: 13px !important;
}
/* Shrink the "Super Smart Society…" text by about 1.5pt */
.footer-note {
  font-size: 13.5px !important;
  line-height: 1.85 !important;
}

/* Header: hide the ▾ button (keep the hover-to-open behavior) */
.global-nav .has-sub > a::after {
  content: none !important;
  display: none !important;
}

/* Header dropdown: shrink the font/popup to about half size */
.global-nav .subnav {
  width: 150px !important;
  min-width: 150px !important;
  padding: 5px 0 !important;
  border-radius: 6px !important;
}
.global-nav .subnav a {
  padding: 6px 12px !important;
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
}

/* ============ v68 ============ */
/* (1) Enlarge the original-service title */
.svc-grid .product-card .pc-body h4,
.product-cards.static .product-card .pc-body h4 {
  font-size: clamp(34px, 2.9vw, 46px) !important;
  line-height: 1.25 !important;
  margin-bottom: 10px !important;
}
/* Revert the description text to a readable size and keep the card height down */
.svc-grid .product-card .pc-body p,
.product-cards.static .product-card .pc-body p {
  font-size: clamp(15px, 1.15vw, 17px) !important;
  line-height: 1.65 !important;
}
.svc-grid .product-card .pc-body {
  padding: 18px 20px 20px !important;
}

/* (3) Shorten the service card (about 60%) / wider width */
.product-card.banner-card {
  min-height: 0 !important;
}
.product-cards.static .product-card.banner-card {
  min-height: 0 !important;
}
.product-card .pc-banner {
  height: 118px !important;
}
.svc-grid {
  gap: 22px !important;
}

/* (2) Animate the red diagonal accent above the ORIGINAL SERVICES label sliding right and fading out */
.svc-products::before {
  animation: svcAccentSweep 5s ease-in-out infinite;
}
.svc-products::after {
  animation: svcAccentSweep 5s ease-in-out infinite 0.25s;
}
@keyframes svcAccentSweep {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  12% {
    transform: translateX(0);
    opacity: 1;
  }
  55% {
    transform: translateX(0);
    opacity: 1;
  }
  86% {
    transform: translateX(190px);
    opacity: 0;
  }
  100% {
    transform: translateX(190px);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .svc-products::before,
  .svc-products::after {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* (4) Header dropdown: closes automatically when the cursor leaves (not click-locked) */
.global-nav .has-sub:hover .subnav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(4px);
}
.global-nav .has-sub .subnav {
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s;
}

/* (5) Unify the vertical page-name label on the left edge of each page at 2x size */
.page-label {
  font-size: 54px !important;
}

/* ============ v69 ============ */
/* (1) Shrink the CI diagram a bit more */
.about-ci .ci-stack {
  max-width: min(700px, 90vw) !important;
}

/* (4) Enlarge the ORIGINAL SERVICES label (about 4x) */
.svc-products-label {
  font-size: clamp(30px, 3vw, 46px) !important;
  letter-spacing: 0.12em !important;
  line-height: 1.25 !important;
  margin-bottom: 22px !important;
}
@media (max-width: 600px) {
  .svc-products-label {
    font-size: clamp(24px, 6vw, 32px) !important;
  }
}

/* (5) Show the card's banner in full, without cropping */
.product-card .pc-banner {
  height: auto !important;
  overflow: visible !important;
}
.product-card .pc-banner img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: fill !important;
}

/* (6) Keep the service name (title) on a single line */
.svc-grid .product-card .pc-body h4,
.product-cards.static .product-card .pc-body h4 {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  font-size: clamp(16px, 1.55vw, 23px) !important;
  line-height: 1.3 !important;
}

/* (7) Make each department's card a common size (fix the media department's overly wide card) */
.svc-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
}
.svc-grid .product-card.banner-card,
.svc-grid .product-card.banner-card.media-card {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
}
@media (max-width: 900px) {
  .svc-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .svc-grid {
    grid-template-columns: 1fr !important;
  }
}

/* v69b: avoid the red circle looking washed-out during the CI diagram's fade-in (show the red circle immediately) */
.about-ci .ci-stack .ci-circle {
  transition: none !important;
}

/* ============ v70 ============ */
/* Shrink the ORIGINAL SERVICES label slightly */
.svc-products-label {
  font-size: clamp(24px, 2.3vw, 34px) !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 20px !important;
}
@media (max-width: 600px) {
  .svc-products-label {
    font-size: clamp(20px, 5vw, 26px) !important;
  }
}

/* ============ v71 ============ */
/* (1) Make the phone number under "By phone" the same size as the email address */
.contact-tel {
  font-size: clamp(22px, 2.6vw, 30px) !important;
}

/* (2) Services: double the spacing from title→card and card→next department band */
.svc-products-label {
  margin-bottom: 42px !important;
}
.service-block .svc-products {
  padding-bottom: 46px !important;
}
.service-block ~ .service-block .sub-band {
  margin-top: 116px !important;
}

/* ============ v72 ============ */
/* (1) Align the phone number under "By phone" to the same vertical position as the email address */
.contact-tel {
  margin-top: 10px !important;
}

/* (2) Media coverage: match the second row of logos to the same scale as the first row */
.media-marquee .marquee-ltr .mq-media img {
  height: 50px !important;
}
.media-marquee .marquee-rtl .mq-media img {
  height: 68px !important;
}

/* (3) Match the major client logos to the media-coverage logo size */
.mq-logo {
  height: 80px !important;
  padding: 8px 20px !important;
}
.mq-logo img {
  max-height: 52px !important;
}
@media (max-width: 640px) {
  .mq-logo {
    height: 66px !important;
  }
  .mq-logo img {
    max-height: 44px !important;
  }
}

/* ============ v73 ============ */
/* Enlarge the major client logos a bit more */
.mq-logo {
  height: 96px !important;
  padding: 8px 24px !important;
}
.mq-logo img {
  max-height: 66px !important;
}
@media (max-width: 640px) {
  .mq-logo {
    height: 76px !important;
  }
  .mq-logo img {
    max-height: 54px !important;
  }
}

/* ============ v74 ============ */
/* Major client logos: increase their actual size (fixed height, width constraint removed, same scale as media coverage) */
.mq-logo {
  width: auto !important;
  height: auto !important;
  padding: 0 26px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mq-logo img {
  height: 56px !important;
  max-height: none !important;
  max-width: none !important;
  width: auto !important;
  object-fit: contain;
}
@media (max-width: 640px) {
  .mq-logo {
    padding: 0 16px !important;
  }
  .mq-logo img {
    height: 46px !important;
  }
}

/* ============ v75 ============ */
/* Unify the original-service card size across all departments to match the PR (Sales Studio) card */
#page-services .product-card.banner-card {
  width: 340px !important;
  min-height: 468px !important;
  height: 468px !important;
  display: flex !important;
  flex-direction: column !important;
}
#page-services .product-card .pc-banner {
  flex: 0 0 auto;
}
#page-services .product-card .pc-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#page-services .product-card .pc-body p {
  display: -webkit-box !important;
  -webkit-line-clamp: 6 !important;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}
#page-services .product-card .pc-link,
#page-services .product-card .pc-patent {
  margin-top: auto !important;
}
@media (max-width: 900px) {
  #page-services .product-card.banner-card {
    width: min(340px, 88vw) !important;
  }
}

/* ============ v76: mobile/tablet responsive adjustments ============ */
/* Tablet: service cards in 2 columns, centered */
@media (max-width: 900px) {
  .svc-grid {
    justify-content: center !important;
  }
  .product-cards.static {
    justify-content: center !important;
  }
}
/* Mobile: service cards in 1 column, natural height, full description text shown */
@media (max-width: 600px) {
  #page-services .product-card.banner-card {
    width: min(340px, 92vw) !important;
    height: auto !important;
    min-height: 0 !important;
  }
  #page-services .product-card .pc-body p {
    -webkit-line-clamp: unset !important;
    display: block !important;
  }
  #page-services .product-card .pc-body h4 {
    font-size: clamp(22px, 6.2vw, 30px) !important;
    white-space: normal !important;
  }
  .svc-products-label {
    font-size: clamp(20px, 6.2vw, 28px) !important;
  }
}
/* Mobile: shrink the band illustration slightly so it doesn't get cut off too much at the screen edge */
@media (max-width: 640px) {
  .section-band .band-illust {
    width: clamp(92px, 23vw, 122px) !important;
    transform: translateY(-38%) !important;
  }
  /* Prevent the heading from becoming oversized */
  .about-teaser .osa-box .hl,
  .about-vision .catch .hl {
    font-size: clamp(28px, 9vw, 40px) !important;
  }
  .section-band .section-title {
    font-size: clamp(24px, 8vw, 34px) !important;
  }
}
/* CI diagram: ensure a maximum width so it stays legible on mobile */
@media (max-width: 600px) {
  .about-ci .ci-stack {
    max-width: 94vw !important;
  }
}
/* Hide the heading's Japanese subtitle (small) when displaying English, to avoid duplication */
body.en .sub-band h2 small,
body.en .sub-band h3 small,
body.en .svc-head-row h3 small,
body.en .plain-head h3 small,
body.en .clients-title small {
  display: none;
}
/* Language button */
.lang {
  cursor: pointer;
}

/* ============ v78: 5-language switcher (JA / EN / KO / ZH-Hant / AR) ============ */
.L {
  display: none;
}
body.lang-ja .L.ja {
  display: inline;
}
body.lang-en .L.en {
  display: inline;
}
body.lang-ko .L.ko {
  display: inline;
}
body.lang-zh .L.zh {
  display: inline;
}
body.lang-ar .L.ar {
  display: inline;
}

/* Hide the decorative Latin-script subtitle (small) only when displaying English, to avoid duplication */
body.lang-en .sub-band h2 small,
body.lang-en .sub-band h3 small,
body.lang-en .svc-head-row h3 small,
body.lang-en .plain-head h3 small,
body.lang-en .clients-title small {
  display: none;
}

/* KO/ZH mostly render fine with the Japanese font stack. Arabic uses a dedicated font */
body.lang-ar .L.ar {
  font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, "Times New Roman", serif;
}

/* ---- Arabic: RTL ---- */
html[dir="rtl"] body {
  direction: rtl;
}
/* Body text is right-aligned, RTL */
html[dir="rtl"] .doc-lead,
html[dir="rtl"] .doc-h,
html[dir="rtl"] .doc-h4,
html[dir="rtl"] .doc-ol,
html[dir="rtl"] .doc-ul,
html[dir="rtl"] .doc-appendix,
html[dir="rtl"] .history-text,
html[dir="rtl"] .news-article p,
html[dir="rtl"] .news-article,
html[dir="rtl"] .company-table th,
html[dir="rtl"] .company-table td,
html[dir="rtl"] .contact-col,
html[dir="rtl"] .form-privacy,
html[dir="rtl"] .form-table th,
html[dir="rtl"] .form-table td,
html[dir="rtl"] .form-done,
html[dir="rtl"] .footer-note {
  direction: rtl;
  text-align: right;
}
/* Set list bullet position for RTL */
html[dir="rtl"] .doc-ol,
html[dir="rtl"] .doc-ul {
  padding-right: 1.4em;
  padding-left: 0;
}
/* Keep the existing order for centered Latin headings, bands, logo rows, header nav, cards, etc. */
html[dir="rtl"] .section-title,
html[dir="rtl"] .band-center,
html[dir="rtl"] .header-inner,
html[dir="rtl"] .global-nav ul,
html[dir="rtl"] .lang-switch,
html[dir="rtl"] .products-grid,
html[dir="rtl"] .mq-track,
html[dir="rtl"] .clients-marquee {
  direction: ltr;
}
html[dir="rtl"] .section-title {
  text-align: center;
}

/* Dedicated font for KO / ZH-Hant (renders shared-kanji glyph differences correctly) */
body.lang-ko .L.ko {
  font-family: "Noto Sans KR", "Zen Kaku Gothic New", sans-serif;
}
body.lang-zh .L.zh {
  font-family: "Noto Sans TC", "Zen Kaku Gothic New", sans-serif;
}

/* ============ v80: stretch the homepage hero image/animation downward, halve the spacing before the NEWS band ============ */
/* Original image aspect ratio 1921:640 (=3.0016). Extend downward to natural height +46px (half of the 92px spacing).
   PC/tablet display only (mobile keeps the existing responsive design) */
@media (min-width: 641px) {
  #page-home .hero .hero-banner {
    aspect-ratio: auto !important;
    height: calc(100vw / 3.0016 + 46px) !important;
    overflow: hidden;
  }
  #page-home .hero .hero-banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  /* Top margin for the NEWS band. Ensures the illustration overflowing above the band doesn't overlap the hero image */
  #page-home main > .hero + .section-band {
    margin-top: 72px !important;
  }
}
/* Keep the title on one line (prevent horizontal clipping) */
#page-services .product-card .pc-title-1line {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* ============ v85: split past projects into their own section, normal color, single-line title ============ */
/* External link card (clickable), but colored the same as a regular original-service card */
#page-services a.product-card.pc-ext {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
#page-services a.product-card.pc-ext:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}
#page-services a.product-card.pc-ext .pc-link {
  color: var(--red);
  border-color: var(--red);
}
#page-services a.product-card.pc-ext:hover .pc-link {
  background: var(--red);
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
}

/* ============ v85b: allow the service card title to wrap (prevent horizontal clipping) without squashing it ============ */
#page-services .product-card .pc-body h4 {
  white-space: normal !important;
  flex: 0 0 auto !important;
  overflow-wrap: anywhere;
}
#page-services .product-card .pc-body h4.pc-title-1line {
  white-space: nowrap !important;
}

/* ============ v88: add images to the company history ============ */
.history-logo.akaj-h {
  width: clamp(180px, 24vw, 260px) !important;
  height: auto !important;
  margin-top: 10px;
}
.history-media {
  display: block;
  margin-top: 12px;
  height: auto;
  border-radius: 6px;
}
.history-media.mat {
  width: min(360px, 94%);
}
.history-media-row {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
}
.history-media-row .history-shot {
  width: min(440px, 56%);
  height: auto;
  border-radius: 6px;
}
.history-media-row .history-illust {
  width: min(230px, 32%);
  height: auto;
}
@media (max-width: 640px) {
  .history-media-row {
    gap: 12px;
  }
  .history-media-row .history-shot {
    width: 100% !important;
    max-width: 440px;
  }
  .history-media-row .history-illust {
    width: 62% !important;
  }
}

/* ============ v89: replace the Auto Academy / Online Face entries in the history with their brand logos (banner/OGP) ============ */
.history-brand {
  display: block;
  margin-top: 12px;
  height: auto;
  border-radius: 8px;
}
.history-brand.aa-banner {
  width: min(360px, 74%);
}
.history-brand.of-ogp {
  width: min(320px, 66%);
}
@media (max-width: 640px) {
  .history-brand.aa-banner {
    width: min(340px, 88%);
  }
  .history-brand.of-ogp {
    width: min(300px, 82%);
  }
}

/* ============ v90: unify the placement of the service card's "Learn more / Visit site" CTA to the bottom-right ============ */
#page-services .product-card .pc-link {
  align-self: flex-end !important;
  margin-top: auto !important;
  text-align: right;
}

/* ============ v91: news archive list (all past announcements) ============ */
.news-archive-box {
  margin-top: 46px;
}
.news-arch-head {
  font-family: var(--font-en);
  font-weight: 700;
  color: var(--red);
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  padding-top: 28px;
  border-top: 2px solid #e5e2d8;
}
.news-list .na-item {
  color: #333;
  line-height: 1.7;
}
#page-news .news-list .na-item {
  font-size: 15px;
}
@media (max-width: 640px) {
  #page-news .news-list .na-item {
    font-size: 14.5px;
  }
}

/* ============ v93: responsive polish ============ */
/* Make the header background fully opaque on scroll, so content behind it no longer shows through */
.site-header.is-scrolled {
  background: #fff !important;
}

/* ============================================================
   v95: homepage hero slideshow
   After the homepage animation finishes, auto-slide through two
   PR & Marketing department original-service banners (Sales Studio
   red media / Sales Innovation Salon), scaled up to full hero size.
   Design approach: .hero-slide-anim (normal flow) determines the
   slider's height; the existing .hero-banner height rule is kept
   as-is. Banners fade in/out as inset:0 absolutely-positioned
   overlays.
   ============================================================ */
.hero-slider {
  position: relative;
  width: 100%;
}
.hero-slide-anim {
  position: relative;
  z-index: 1;
}

/* Banner slide: an absolutely-positioned overlay covering the full hero */
.hero-slide-banner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #141414; /* Match the banner's base color (rgb 20,20,20) so the surrounding space looks natural */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.85s ease;
  pointer-events: none;
}
.hero-slide-banner.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 3;
}
/* Scale the banner image up to fill the hero height without cropping any of the design (contain) */
.hero-bimg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Indicators (dots) — click to switch slides */
.hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 6;
  display: flex;
  gap: 9px;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  pointer-events: auto;
  transition:
    width 0.35s ease,
    background 0.35s ease;
}
.hero-dot.is-on {
  width: 24px;
  background: #fff;
}

@media (max-width: 640px) {
  .hero-dots {
    bottom: 10px;
    gap: 7px;
  }
  .hero-dot {
    width: 8px;
    height: 8px;
  }
  .hero-dot.is-on {
    width: 20px;
  }
}

/* ============================================================
   v98: localize the banners + "Learn more" CTA
   - .lb: switches the per-language banner image with the language switcher
   - .hero-bwrap: matches the banner image box, placing the CTA at its bottom-right
   ============================================================ */
/* Toggle the per-language banner image display (shared by the homepage slider & service cards) */
.lb {
  display: none !important;
}
body.lang-ja .lb.ja,
body.lang-en .lb.en,
body.lang-ko .lb.ko,
body.lang-zh .lb.zh,
body.lang-ar .lb.ar {
  display: block !important;
}

/* Wrapper matching the banner image box (anchor for the CTA) */
.hero-slide-banner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-bwrap {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-bwrap .hero-bimg {
  height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: none;
}
body.lang-ja .hero-bwrap .hero-bimg.ja,
body.lang-en .hero-bwrap .hero-bimg.en,
body.lang-ko .hero-bwrap .hero-bimg.ko,
body.lang-zh .hero-bwrap .hero-bimg.zh,
body.lang-ar .hero-bwrap .hero-bimg.ar {
  display: block !important;
}

/* "Learn more" CTA — bottom-right of the banner image */
.hero-more {
  position: absolute;
  z-index: 5;
  pointer-events: auto;
  right: 3.2%;
  bottom: 5.5%;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-en), "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(11px, 1.15vw, 18px);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  padding: 0.62em 1.3em;
  border: 1.6px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s,
    transform 0.25s;
}
.hero-more:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-2px);
}
.hero-more .hm-arrow {
  transition: transform 0.25s;
}
.hero-more:hover .hm-arrow {
  transform: translateX(4px);
}
/* For Arabic, flip the arrow and move the CTA to the bottom-left */
body.lang-ar .hero-more {
  right: auto;
  left: 3.2%;
}
body.lang-ar .hero-more .hm-arrow {
  transform: scaleX(-1);
}
body.lang-ar .hero-more:hover .hm-arrow {
  transform: scaleX(-1) translateX(4px);
}
/* On mobile (≤640px), the hero is a short band, so the CTA collapses to an arrow-only round button,
   placed small at the bottom-right (bottom-left for Arabic) so it doesn't overlap the center dots */
@media (max-width: 640px) {
  .hero-more {
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
    font-size: 15px;
    border-width: 1.3px;
    background: rgba(0, 0, 0, 0.4);
    right: 3.5%;
    bottom: 7px;
  }
  .hero-more .hm-label {
    display: none;
  }
  .hero-more .hm-arrow {
    font-size: 15px;
  }
  body.lang-ar .hero-more {
    left: 3.5%;
    right: auto;
  }
}

/* v98b: language-switch the service card banners too (overrides the existing .product-card .pc-banner img !important) */
.product-card .pc-banner img.lb {
  display: none !important;
}
body.lang-ja .product-card .pc-banner img.lb.ja,
body.lang-en .product-card .pc-banner img.lb.en,
body.lang-ko .product-card .pc-banner img.lb.ko,
body.lang-zh .product-card .pc-banner img.lb.zh,
body.lang-ar .product-card .pc-banner img.lb.ar {
  display: block !important;
}

/* ============================================================
   v99/v100/v101: let the homepage animation show through faintly as a background even while a banner is showing
   v101: fade the background animation down to about 5% visibility, banner at about 95% opacity.
   Make the whole banner slide 95% opaque, and let the animation behind it (z-index:1)
   show through faintly across the whole hero, at only about 5% opacity.
   ============================================================ */
.hero-slide-banner.is-active {
  opacity: 0.95 !important;
}

/* ============================================================
   v102 — Arabic (RTL) direction adjustments
   - Reverse the red underline wipe / heading slide-in to right→left
   - Expand the header's hover dropdown to fit its content width, removing overflow, and align it for RTL
   (the layout itself stays LTR; only applied for lang-ar)
   ============================================================ */

/* --- 1) Move the underline wipe's starting point to the right (extends right→left) --- */
body.lang-ar .na-title {
  background-position: 100% 100% !important;
}
body.lang-ar .red-box-heading {
  background-position: 100% 100% !important;
}
body.lang-ar .service-catch .hl {
  background-position: 100% 100% !important;
}
body.lang-ar .about-teaser .osa-box .hl.av {
  background-position: right center !important;
}
body.lang-ar .about-vision .catch .hl.av {
  background-position: right center !important;
}
body.lang-ar .hero .hl {
  background-position: 100% 0 !important;
}

/* --- 2) Change the large heading band title's slide-in to right→left --- */
body.lang-ar .section-band .section-title.av {
  transform: translateX(48px);
}
body.lang-ar .section-band .section-title.av.av-in {
  transform: none;
}

/* --- 3) Header dropdown (About/Services): expand to fit content width so Arabic text
        doesn't overflow its box, and right-align it for RTL --- */
body.lang-ar .global-nav .subnav {
  width: max-content !important;
  min-width: 160px !important;
  max-width: min(360px, 90vw) !important;
  direction: rtl;
  text-align: right;
}
body.lang-ar .global-nav .subnav a {
  text-align: right;
  white-space: nowrap;
  font-family: "Noto Naskh Arabic", var(--font-ja, inherit) !important;
}

/* ============================================================
   v103 — multilingual support for the CI (Seven Elements) diagram
   - Switch the labels (Creativity / Technical Skill / Knowledge & Wisdom / Belief /
     Experience / Core Concept / Flash of Insight) to per-language images. Core Concept
     is the latest version, pointing at the head (the gold-rimmed black circle).
============================================================ */
.ci-stack .ci-composed.lci {
  display: none;
}
body.lang-ja .ci-stack .ci-composed.lci.ja {
  display: block;
}
body.lang-en .ci-stack .ci-composed.lci.en {
  display: block;
}
body.lang-ko .ci-stack .ci-composed.lci.ko {
  display: block;
}
body.lang-zh .ci-stack .ci-composed.lci.zh {
  display: block;
}
body.lang-ar .ci-stack .ci-composed.lci.ar {
  display: block;
}

/* v104 — widen the gap between the CI description and the ladybug (Seven Elements) diagram
   (added top spacing because the description and diagram were too cramped together) */
.about-ci .seven-elements {
  margin-top: 60px !important;
}
@media (max-width: 640px) {
  .about-ci .seven-elements {
    margin-top: 40px !important;
  }
}

/* ============================================================
   v105 — fine-tuning for making Arabic pages fully RTL (dir="rtl")
   - Since the CI diagram is a left-right symmetric image (labels are already
     correctly placed within the image), revert just the diagram area to LTR so the
     centering trick still works
============================================================ */
html[dir="rtl"] .seven-elements {
  direction: ltr;
}
html[dir="rtl"] .about-ci .ci-diagram {
  margin-left: 50%;
  transform: translateX(-50%);
}

/* v106 — Arabic (RTL): shift the History timeline's vertical line/spacing to the right
   (border-left/padding-left were hardcoded to the left, breaking the layout in RTL, so they're flipped) */
html[dir="rtl"] .history-text,
html[dir="rtl"] .history .history-body {
  border-left: none !important;
  border-right: 2px solid var(--ink) !important;
  padding-left: 0 !important;
  padding-right: 28px !important;
}
@media (max-width: 640px) {
  html[dir="rtl"] .history-text,
  html[dir="rtl"] .history .history-body {
    border-right: none !important;
    padding-right: 0 !important;
  }
}