@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;
}
/* ---------- 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;
}
@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);
  }
}
/* ============================================================
   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;
}
/* CONTACT: two columns for email / phone (matches the live site) */
/* 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);
}
#confirm-table td {
  white-space: pre-wrap;
}
@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;
}
.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;
  }
}
/* ============================================================
   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;
}
/* 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;
  }
}
/* 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;
  }
}
.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;
}
/* 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;
}
.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 .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;
}
/* 旧・幅広設定を無効化 */
.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%);
  }
}
.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;
  }
  .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;
  }
  .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;
  }
  /* 既存サービスのカードを画面幅に収める */
  .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;
  }
}
/* ============================================================
   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;
}
.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 {
  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 */
/* (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 */
/* (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 {
  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;
  }
  /* 見出しが大きくなりすぎないように */
  .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"] .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"] .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;
  }
  /* NEWS帯の上余白。帯からはみ出すイラストがヒーロー画像と重ならないようにする */
  #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 {
  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 {
    border-right: none !important;
    padding-right: 0 !important;
  }
}
/* v107 — 沿革: 透過バッジ(Stevie等)は枠・影なしで並べる */
/* v108 — 沿革: 見出し(太字)＋説明文(小さめ) */
/* =====================================================================
   v109 — スマートフォン / タブレット レスポンシブ総合対応
   （帯イラスト見切れ・ヒーロー小・見出し1文字改行・フッター犬・言語バー）
   ===================================================================== */
/* --- 言語切替バー: 区切らず一続きの帯（背景を全体でつなげる） --- */
.lang-switch { gap: 0 !important; align-items: stretch; }
.lang { border-radius: 0 !important; padding: 4px 12px; font-size: 12px; line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 900px){
.lang { padding: 4px 10px; font-size: 12px; }
}
/* --- 見出し/キャッチの不自然な1文字改行を防ぐ --- */
.plain-head h3,
.svc-head-row h3,
.service-catch,
.section-title,
.sub-band h2,
.sub-band h3,
.service-block .catch { text-wrap: balance; }
/* --- 帯(section-band): タイトル＋右イラストをビューポート内に収める --- */
@media (max-width: 820px){
.section-band { overflow: hidden !important; }
  .section-band .band-center {
    display: flex !important; width: auto !important; max-width: 100% !important;
    align-items: center !important; justify-content: center !important;
    gap: 12px !important; padding: 0 14px !important; box-sizing: border-box !important;
    text-align: center !important;
  }
  .section-band .band-illust,
  .section-band .band-illust.fx-scene {
    position: static !important; transform: none !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    width: clamp(64px, 19vw, 116px) !important; margin: 0 !important; flex: 0 0 auto !important;
  }
  .section-band .section-title {
    font-size: clamp(23px, 6.2vw, 40px) !important; white-space: nowrap; text-align: center !important;
  }
}
/* --- ヒーロー: モバイルで小さすぎるメインビジュアルを見やすい高さに（中央基準トリミング） --- */
@media (max-width: 640px){
.hero-slide-anim .hero-banner { aspect-ratio: 16 / 10 !important; overflow: hidden; }
  .hero-slide-anim .hero-banner > img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center center !important; }
.hero-slide-anim .hero-video { object-fit: cover !important; }
}
/* --- 各部門(SERVICES): 見出し・キャッチのモバイルサイズ調整（1文字改行防止の補助） --- */
@media (max-width: 640px){
  .svc-teaser .plain-head h3,
  .service-block .sub-band h3,
  .svc-head-row h3 {
    font-size: clamp(20px, 5.8vw, 30px) !important; line-height: 1.35 !important; }
.service-catch { font-size: clamp(16px, 4.6vw, 20px) !important; }
}
/* --- フッターの犬イラスト: 大きすぎ・重なりを防ぐ --- */
@media (max-width: 820px){
.footer-dog { width: 44px !important; }
}
@media (max-width: 480px){
.footer-dog { width: 34px !important; }
}
/* v110 — アラビア語(RTL)フッター: 犬イラストとCSR等リンクの重なり回避（犬を左下へ） */
html[dir="rtl"] .footer-dog { right: auto !important; left: 2% !important; }
@media (max-width: 820px){
html[dir="rtl"] .footer-dog { left: 8px !important; right: auto !important; }
}
/* =====================================================================
   v111 — ヒーローをPCと同じデザイン（比率・トリミング位置）でレスポンシブ統一
   スマホの過度な中央トリミング(16/10, center50%)を廃止し、
   PC/タブレットと同じ「約2.5:1・object-position center 44%」に合わせる
   ===================================================================== */
@media (max-width: 640px){
.hero-slide-anim .hero-banner { aspect-ratio: 6 / 5 !important; overflow: hidden; }
  .hero-slide-anim .hero-banner > img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center 44% !important; }
.hero-slide-anim .hero-video { object-fit: cover !important; object-position: center 44% !important; }
  /* バナースライド(SALES STUDIO等)も同じ高さに追従して中央表示 */
.hero-slide-banner .hero-bwrap .hero-bimg { object-position: center !important; }
}
/* =====================================================================
   v112 — スマホ: ヒーローを縦に拡大(6/5)し、ヒーロー〜NEWS間の白い余白を圧縮。
   旧v62で帯イラストのはみ出しクリアランス用に確保していた大きな上マージン
   (hero+band 60px / band 78px)は、v109でスマホの帯イラストが帯内に収まり
   上方へはみ出さなくなったため不要。高い詳細度(#page-home main > …)で上書きし、
   帯→本文の余白も含めて全体バランスを最適化する。
   ===================================================================== */
@media (max-width: 640px){
  /* ヒーロー直下(NEWS帯)の大きな空白を圧縮 */
#page-home main > .hero + .section-band { margin-top: 18px !important; }
  /* セクション帯どうしの間隔もスマホでは詰める */
#page-home main > .section-band { margin-top: 40px !important; }
  main > .section-band:first-child,
main > .sub-band:first-child { margin-top: 0 !important; }
  /* 帯の直後の本文コンテナの上余白を圧縮(帯とニュース一覧の間の空白) */
  .section-band + .container,
  .section-band + .pattern-bg,
  .section-band + .service-block,
  .section-band + .svc-teaser,
.sub-band + .container { padding-top: 24px !important; }
  /* 帯自体の上下padも少し詰めて締まった印象に */
.section-band { padding: 12px 0 !important; }
}
/* =====================================================================
   v113 — スマホ縦長ヒーロー(PCデザイン準拠 × 縦長最適化)
   ・PCと同じ「展開」アニメ(空の会場→ONE STEP AHEAD.→キャラクターが集う)を、
     横長パノラマを上下2段に折り返した縦長構図で再生(全体が見える縮尺)
   ・展開後は2段のイラストが右→左へ途切れなく流れ続ける
   ・キャッチはPCと同じタイミングでHTML文字として鮮明に表示→フェードアウト
   ・スマホではPC用GIF(4.7MB)を読み込まない(picture で差し替え)
   ===================================================================== */
.hero-banner picture { display: contents; }
.hero-sp { display: none; }
@media (max-width: 640px){
#page-home .hero-slide-anim { position: relative; }
  #page-home .hero-slide-anim .hero-sp {
    display: block; position: relative; z-index: 1; width: 100%;
    aspect-ratio: 974 / 1170; overflow: hidden; background: #f4f2ec;
  }
  /* PC用バナー層はスマホでは透明なオーバーレイにし、光の演出(動画/ビネット)だけ重ねる */
  #page-home .hero-slide-anim .hero-banner {
    position: absolute !important; inset: 0; z-index: 2;
    aspect-ratio: auto !important; height: auto !important;
    background: transparent !important; pointer-events: none;
  }
#page-home .hero-slide-anim .hero-banner img { display: none !important; }
  /* 暗いフィルム対策: 光漏れ動画(黒地をスクリーン合成する素材)とビネットはスマホでは使わない */
  #page-home .hero-slide-anim .hero-video,
  #page-home .hero-slide-anim .hero-vignette,
#page-home .hero-slide-anim .hero-fx { display: none !important; }
.hsp-stage { position: absolute; inset: 0;
    animation: heroPhotoFlash 6s ease-in-out infinite; will-change: filter; }
  /* 1つの会場として縦に再構成(帯なし): 奥の列(壁〜テーブル) + 手前の列(〜手前テーブル) */
.hsp-layer { position: absolute; left: 0; right: 0; overflow: hidden; }
.hsp-back { top: 0; height: 61.5385%; }
  /* 720 / 1170 */
.hsp-front { top: 45.2991%; height: 54.7009%; }
  /* 530 / 1170, 640 / 1170 */
.hsp-track { position: absolute; top: 0; left: 0; height: 100%; width: max-content;
    display: flex; transform: translate3d(0,0,0); will-change: transform;
    backface-visibility: hidden; }
.hsp-front .hsp-track { transform: translate3d(-16.658%,0,0); }
.hsp-track img { display: block; flex: 0 0 auto; height: 100% !important; width: auto !important;
    max-width: none !important; margin: 0; animation: none !important; }
.hsp-intro { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
    object-fit: fill; background: transparent; transition: opacity .6s ease, visibility 0s linear .6s; }
.hero-sp.is-intro-done .hsp-intro { opacity: 0; visibility: hidden; }
  /* キャッチ(PCのGIF内の文字を、スマホ用に鮮明なHTML文字で再現) */
.hsp-veil { position: absolute; left: 0; right: 0; top: 16%; height: 30%; z-index: 4;
    pointer-events: none; opacity: var(--hsp-veil, 1);
    background: linear-gradient(180deg, rgba(244,242,236,0) 0%, rgba(244,242,236,.94) 28%,
                rgba(244,242,236,.94) 72%, rgba(244,242,236,0) 100%); }
.hsp-title { position: absolute; left: 0; right: 0; top: 31%; z-index: 5; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    opacity: var(--hsp-title, 0);
    transform: translate3d(0, calc(-50% + (1 - var(--hsp-in, 0)) * 6px), 0); }
.hsp-en { font-family: "Jost", "Helvetica Neue", Arial, sans-serif; font-weight: 500;
    font-size: clamp(21px, 6.7vw, 36px); line-height: 1.1; color: #262626; white-space: nowrap;
    letter-spacing: calc(.13em + (1 - var(--hsp-in, 0)) * .12em); padding-left: .13em; }
.hsp-jp { margin-top: .95em; font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 500; font-size: clamp(11px, 3.25vw, 17px); letter-spacing: .26em; color: #3a3a3a;
    white-space: nowrap; padding-left: .26em; }
  .hero-sp.is-intro-done .hsp-veil,
.hero-sp.is-intro-done .hsp-title { opacity: 0; transition: opacity .6s ease; }
  /* バナースライド: 縦長ヒーローではバナーを横幅いっぱいに中央表示し、下にCTAを添える */
#page-home .hero-slide-banner .hero-bwrap { height: auto !important; width: 100%;
    flex-direction: column; gap: 22px; }
#page-home .hero-slide-banner .hero-bwrap .hero-bimg { width: 100% !important; height: auto !important;
    max-height: none !important; }
#page-home .hero-slide-banner .hero-more { position: static; width: auto; height: auto;
    padding: .85em 1.7em; gap: .55em; font-size: 13px; border-radius: 999px; border-width: 1.4px;
    background: rgba(255,255,255,.06); }
#page-home .hero-slide-banner .hero-more .hm-label { display: inline; }
#page-home .hero-slide-banner .hero-more .hm-arrow { font-size: 14px; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce){
.hsp-stage { animation: none !important; filter: none !important; }
}
/* =====================================================================
   v115 — スマホ用バナー(SALES STUDIO / Sales Innovation Salon)
   縦長ヒーローに合わせてテキストで組み直し、文字を大きく読みやすく。
   PCは従来どおりバナー画像を表示。
   ===================================================================== */
.hbm { display: none; }
@media (max-width: 640px){
#page-home .hero-slide-banner { background: #161616; }
#page-home .hero-slide-banner .hero-bimg { display: none !important; }
  #page-home .hero-slide-banner .hero-bwrap {
    width: 100%; height: 100% !important; box-sizing: border-box;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 0;
    padding: 16px 26px 32px; }
.hbm { display: block; width: 100%; color: #fff; text-align: left; }
.hbm[dir="rtl"] { text-align: right; }
.hbm p { margin: 0; }
.hbm em { font-style: normal; color: #e60012; }
  /* SALES STUDIO */
.hbm[dir="rtl"] .hbm-emb { margin-left: auto; }
  /* 見出しは「Sales Innovation Salon」タイトルと同じサイズに統一 */
.hbm-h { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900;
    font-size: clamp(27px, 7.9vw, 40px); line-height: 1.25; letter-spacing: .01em;
    text-wrap: balance; margin-bottom: clamp(12px, 3.6vw, 18px) !important; }
.hbm[lang="en"] .hbm-h { font-family: "Source Sans 3", sans-serif; line-height: 1.1; letter-spacing: -.005em; }
.hbm[lang="ko"] .hbm-h { font-family: "Noto Sans KR", sans-serif; word-break: keep-all; }
.hbm[lang="zh-Hant"] .hbm-h { font-family: "Noto Sans TC", sans-serif; }
.hbm[lang="ar"] .hbm-h { font-family: "Noto Sans Arabic", "Noto Naskh Arabic", sans-serif; font-weight: 800; line-height: 1.4; }
.hbm-sub { font-size: clamp(13px, 3.6vw, 16px); line-height: 1.75; color: #d6d6d6; font-weight: 500; }
  .hbm[lang="ko"] .hbm-sub,
.hbm[lang="ko"] .hbm-desc { font-family: "Noto Sans KR", sans-serif; word-break: keep-all; }
  .hbm[lang="zh-Hant"] .hbm-sub,
.hbm[lang="zh-Hant"] .hbm-desc { font-family: "Noto Sans TC", sans-serif; }
  .hbm[lang="ar"] .hbm-sub,
  .hbm[lang="ar"] .hbm-desc,
.hbm[lang="ar"] .hbm-name { font-family: "Noto Sans Arabic", "Noto Naskh Arabic", sans-serif; }
  .hbm[lang="en"] .hbm-sub,
.hbm[lang="en"] .hbm-desc { font-family: "Source Sans 3", sans-serif; }
  /* Sales Innovation Salon */
.hbm-emb { display: block; height: clamp(42px, 11.5vw, 64px); width: auto; margin: 0 0 6px -3px; }
.hbm-title { font-family: "Source Sans 3", sans-serif; font-weight: 900; color: #e60012;
    font-size: clamp(27px, 7.9vw, 40px); line-height: 1.05; letter-spacing: -.01em; white-space: nowrap; }
.hbm[dir="rtl"] .hbm-title { text-align: right; }
.hbm-name { font-weight: 700; font-size: clamp(16px, 4.6vw, 22px); margin-top: 4px !important; }
.hbm-innov .hbm-desc { margin-top: 12px !important; }
.hbm[lang="ko"] .hbm-name { font-family: "Noto Sans KR", sans-serif; }
.hbm[lang="zh-Hant"] .hbm-name { font-family: "Noto Sans TC", sans-serif; }
.hbm-desc { font-size: clamp(12px, 3.3vw, 15px); line-height: 1.62; color: #d6d6d6; font-weight: 500; margin-top: 8px !important; }
  /* 「詳しくはこちら」: コンテンツの下にラベル付きで */
#page-home .hero-slide-banner .hero-more { position: static; margin-top: clamp(14px, 4vw, 22px);
    width: auto; height: auto; padding: .8em 1.6em; gap: .55em; font-size: 13px; border-radius: 999px;
    border-width: 1.4px; background: rgba(255,255,255,.06); }
#page-home .hero-slide-banner .hero-more .hm-label { display: inline; }
}
/* =====================================================================
   v117 — スマホ用バナー: 2枚のタイトル表記を統一
   ・「SALES STUDIO AKAMEDIA®」をテキスト化し「Sales Innovation Salon」と同書体・同サイズ
   ・両バナーとも [マーク → 英字タイトル → サブ見出し → 本文 → ボタン] の同じ構成
   ・イノベーションサロンのプラン表示(PRIVATE/GROUP/B2B)は削除
   ===================================================================== */
@media (max-width: 640px){
.hbm-bug { display: block; height: clamp(36px, 10vw, 52px); width: auto; margin: 0 0 10px; }
.hbm[dir="rtl"] .hbm-bug { margin-left: auto; }
.hbm-emb { height: clamp(46px, 12.5vw, 68px); margin-bottom: 8px; }
.hbm-title { font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif; font-weight: 900;
    font-size: clamp(27px, 7.9vw, 40px); line-height: 1.05; letter-spacing: -.01em; }
.hbm-stitle { color: #fff; white-space: normal; letter-spacing: .005em; }
.hbm-stitle em { color: #e60012; font-style: normal; }
.hbm-stitle sup { font-size: .42em; vertical-align: .95em; margin-left: .06em; font-weight: 700; }
  /* サブ見出し(SALES STUDIO: キャッチ / Innovation: 日本語名など) */
.hbm-sales .hbm-h { font-size: clamp(20px, 5.9vw, 28px) !important; line-height: 1.35;
    margin: clamp(10px, 3vw, 14px) 0 clamp(8px, 2.4vw, 12px) !important; }
.hbm-innov .hbm-name { font-size: clamp(17px, 5vw, 23px); margin-top: clamp(8px, 2.4vw, 12px) !important; }
  .hbm-sub,
.hbm-desc { font-size: clamp(12.5px, 3.45vw, 15px); line-height: 1.72; }
.hbm-innov .hbm-desc { margin-top: clamp(8px, 2.4vw, 12px) !important; }
#page-home .hero-slide-banner .hero-more { margin-top: clamp(18px, 5vw, 26px); }
}
/* =====================================================================
   v119 — ひとめぼれラボ バナー(トップスライダー4枚目)
   PC: 言語別バナー画像(1600×837) + 「詳しくはこちら」
   スマホ: スマホ専用画像(1170×1406=ヒーローと同じ5:6)を全面表示。
           スライド全体がリンク。文字に重ならないよう右下(アラビア語は左下)に丸い矢印ボタン。
   ===================================================================== */
@media (max-width: 640px){
#page-home .hero-slide-hito .hero-bwrap { position: absolute !important; inset: 0; padding: 0 !important;
    display: block !important; height: 100% !important; }
.hbm.hbm-hito { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
#page-home .hero-slide-hito.is-active .hbm-hito { pointer-events: auto; }
.hbm-hito img { display: block; width: 100%; height: 100%; object-fit: cover; }
#page-home .hero-slide-hito .hero-more { position: absolute; right: 12px; left: auto; bottom: 12px; margin: 0;
    width: 38px; height: 38px; padding: 0; gap: 0; justify-content: center; border-radius: 50%;
    background: rgba(0,0,0,.5); }
#page-home .hero-slide-hito .hero-more .hm-label { display: none; }
body.lang-ar #page-home .hero-slide-hito .hero-more { left: 12px; right: auto; }
}
/* =====================================================================
   v121 — スマホ修正
   ・固定ヘッダー(高さ約110px)にページ上端(ヒーロー/バナーの上部)が隠れないよう、
     スマホの --header-h を実寸に
   ・帯(section-band)のイラスト重ね絵(吹き出し等)が帯いっぱいに広がり、
     タイトル(SERVICES等)に重なっていた不具合を修正(イラスト枠を基準に戻す)
   ===================================================================== */
@media (max-width: 640px) {
:root { --header-h: 110px; }
}
@media (max-width: 820px) {
  .section-band .band-illust,
.section-band .band-illust.fx-scene { position: relative !important; }
.section-band .band-illust .fxl.ov { left: 0; top: 0; width: 100% !important; height: 100% !important; }
}
/* =====================================================================
   v122 — ①フッター: スマホ/タブレットでコピーライトが2行に折り返したとき、
          右下の犬イラスト(アラビア語は左下)が文字に重なる不具合を修正
          (犬の幅ぶんの余白を確保して文字を避ける)
          ②メディア部門のイラストを他部門と同じ大きさに統一
          (枠の幅を他部門と同じにし、絵の高さをPR・デジタル部門にそろえる)
   ===================================================================== */
@media (max-width: 820px) {
.footer-line { padding-right: 62px !important; }
html[dir="rtl"] .footer-line { padding-right: 0 !important; padding-left: 62px !important; }
}
@media (max-width: 720px) {
.footer-line { padding-right: 68px !important; }
html[dir="rtl"] .footer-line { padding-right: 0 !important; padding-left: 68px !important; }
}
.svc-art.media-art,
.svc-teaser .svc-head-row .svc-art.media-art,
.service-block .svc-art-top.media-art { width: 450px !important; max-width: 450px !important; }
@media (max-width: 900px) {
  .svc-art.media-art,
  .svc-teaser .svc-head-row .svc-art.media-art,
.service-block .svc-art-top.media-art { width: 320px !important; max-width: 320px !important; }
}
@media (max-width: 600px) {
  .svc-art.media-art,
  .svc-teaser .svc-head-row .svc-art.media-art,
.service-block .svc-art-top.media-art { width: 230px !important; max-width: 230px !important; }
}
.svc-art.media-art img { width: 80% !important; max-width: 80% !important; height: auto !important; }
html[dir="rtl"] .svc-art.media-art img { margin-left: auto; }
/* アラビア語ページ: 英文のコピーライトの句読点が左右逆に並ばないよう、文字の向きは英文どおり(LTR)に */
html[dir="rtl"] .footer-copy { direction: ltr; unicode-bidi: isolate; }
/* v123 — フッターのコピーライトはスマホでも1行で表示（犬イラストの幅だけ右に余白） */
@media (max-width: 720px) {
.footer-copy { white-space: nowrap !important; letter-spacing: .03em !important; padding: 0 !important;
    font-size: clamp(8.5px, 2.75vw, 11px) !important; }
.footer-line { padding-right: calc(2% + 58px) !important; }
html[dir="rtl"] .footer-line { padding-right: 0 !important; padding-left: 60px !important; }
}
@media (max-width: 480px) {
.footer-dog { width: 32px !important; }
}
/* =====================================================================
   v124 — お問い合わせ送信後の完了メッセージ（見出し＋本文3段落、5言語）
   ===================================================================== */
.form-done { padding: 48px 0 24px; outline: none; }
.form-done h3 { font-size: clamp(18px, 4.4vw, 22px) !important; letter-spacing: .08em !important; line-height: 1.5; text-wrap: balance; margin-bottom: 22px !important; }
.form-done .done-msg { max-width: 680px; margin: 0 auto; text-align: left; }
.form-done .done-msg p { margin: 0 0 1.1em; font-size: 15px; line-height: 1.95; color: #333; }
.form-done .done-msg p:last-child { margin-bottom: 0; }
html[dir="rtl"] .form-done h3 { text-align: center; }
html[dir="rtl"] .form-done .done-msg { text-align: right; }
@media (max-width: 640px) {
.form-done { padding: 36px 0 16px; }
.form-done .done-msg p { font-size: 14px; line-height: 1.85; }
}
/* 入力チェック（静的版） */
.form-error.is-on { display: block; }
.contact-form .is-invalid { border-color: var(--red) !important; }
.form-privacy label.is-invalid { color: var(--red); }
body.lang-ko .form-done h3,
body.lang-ko .form-done .done-msg p { word-break: keep-all; }
/* =====================================================================
   v125 — 各部門のキャッチ（赤い下線）の表示を修正
   ・下線つきの語句が2行に折り返すと、下線が最後の行に1本だけ（全幅で）出ていた
     → 行ごとに文字の長さに合わせた下線が引かれるように（インライン表示＋行ごとに複製）
   ・日本語・韓国語は語句の途中で改行しない（日本語・繁体中文は語句の区切りに改行位置を指定）
   ・行頭に小さい「ィ」「ッ」や句読点が来ないように
   ===================================================================== */
.service-catch { line-height: 2.05 !important; line-break: strict; }
.service-catch .hl {
  display: inline !important;
  padding: 0 0 .28em 0 !important;
  margin: 0 !important;
  -webkit-box-decoration-break: clone !important;
  box-decoration-break: clone !important;
}
body.lang-ja .service-catch,
body.lang-ko .service-catch,
body.lang-zh .service-catch { word-break: keep-all; overflow-wrap: anywhere; }
.service-catch .hl.av:nth-of-type(2) { transition-delay: .15s; }
.service-catch { text-wrap: pretty; }
/* 見出し全般の改行位置
   ・日本語：語句（文節）の区切りで改行（対応ブラウザ）＋行頭に小さい「ィ」「ー」や句読点が来ないように
   ・韓国語：単語の途中で改行しない
   ・繁体中文：行頭に句読点が来ないように */
body.lang-ja,
body.lang-zh { line-break: strict; }
body.lang-ja :is(h1,
h2,
h3,
h4,
.catch,
.na-title,
.dg-title,
.vision-pre,
.red-box-heading,
.hbm-h,
.hbm-name) {
  word-break: auto-phrase;
}
body.lang-ko { word-break: keep-all; overflow-wrap: break-word; }
/* スマホ：サービスのカード見出しが画面幅に対して大きくなりすぎ、語の途中で折り返していたのを調整 */
@media (max-width: 600px) {
  #page-services .product-card .pc-body h4,
#page-home .product-card .pc-body h4 { font-size: clamp(18px, 5.4vw, 22px) !important; }
}
/* =====================================================================
   v126 — ヘッダーのドロップダウンメニュー（ABOUT US / SERVICES）
   ・画面幅1120px以下でサブメニューが最初から開いた状態で表示され、ヘッダーが崩れていたのを修正
   ・PC（幅1041px以上）：メニューにカーソルを合わせると、赤い下線＋ドロップダウンで表示
   ・タブレット／スマホ（幅1040px以下）：ハンバーガーメニュー。ABOUT US / SERVICES をタップすると
     サブメニューが開く（赤い下線）。もう一度タップするとそのページへ移動
   ===================================================================== */
@media (min-width: 1041px) {
.global-nav .has-sub { position: relative; }
.global-nav .has-sub::after {          /* メニューとドロップダウンの間でカーソルが外れないように */
    content: ""; position: absolute; left: -12px; right: -12px; top: 100%; height: 14px;
  }
  .global-nav .subnav {
    display: block !important; position: absolute !important; top: 100% !important; left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    background: #fff !important; border: 1px solid #ececec !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.12) !important;
    opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s !important;
    z-index: 200;
  }
  .global-nav .has-sub:hover .subnav,
  .global-nav .has-sub:focus-within .subnav {
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    transform: translateX(-50%) translateY(4px) !important;
  }
  .global-nav .has-sub:hover > a,
.global-nav .has-sub:focus-within > a { border-color: var(--red); }
.global-nav .subnav a { border-bottom: 0 !important; }
}
@media (max-width: 1040px) {
  /* ハンバーガーメニュー（従来は幅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 .3s, opacity .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,.97);
    flex-direction: column; justify-content: safe center; gap: 34px;
    padding: 90px 0 40px; overflow-y: auto;
    opacity: 0; pointer-events: none; transition: opacity .3s;
  }
.global-nav.is-open { opacity: 1; pointer-events: auto; }
.global-nav ul { flex-direction: column; align-items: center; text-align: center; gap: 20px !important; }
.global-nav > ul > li > a { font-size: 17px !important; }
  /* サブメニュー：最初は閉じておき、タップで開く */
  .global-nav .subnav {
    position: static !important; transform: none !important; opacity: 1 !important;
    visibility: visible !important; pointer-events: auto !important;
    box-shadow: none !important; border: 0 !important; background: transparent !important;
    width: auto !important; min-width: 0 !important; max-width: none !important; border-radius: 0 !important;
    padding: 0 !important; margin: 0 !important;
    max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease !important;
    display: flex !important; flex-direction: column; gap: 4px !important; text-align: center !important;
  }
.global-nav .has-sub.is-sub-open .subnav { max-height: 320px; padding: 12px 0 2px !important; }
  .global-nav .subnav a {
    font-size: 14px !important; padding: 6px 12px !important; border-bottom: 0 !important;
    text-align: center !important; color: #444 !important; background: transparent !important;
  }
.global-nav .has-sub.is-sub-open > a { border-color: var(--red); }
  /* 開閉のしるし（▾） */
  .global-nav .has-sub > a::after {
    content: "" !important; display: inline-block !important; width: 6px; height: 6px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-3px) rotate(45deg); margin-left: 10px; opacity: .6; transition: transform .25s;
  }
.global-nav .has-sub.is-sub-open > a::after { transform: translateY(1px) rotate(-135deg); }
html[dir="rtl"] .global-nav .has-sub > a::after { margin-left: 0; margin-right: 10px; }
}
/* マウス操作の場合は、幅1040px以下でもカーソルを合わせるだけでサブメニューを開く */
@media (max-width: 1040px) and (hover: hover) and (pointer: fine) {
  .global-nav .has-sub:hover .subnav { max-height: 320px; padding: 12px 0 2px !important; }
  .global-nav .has-sub:hover > a { border-color: var(--red); }
  .global-nav .has-sub:hover > a::after { transform: translateY(1px) rotate(-135deg); }
}
/* =====================================================================
   v127 — ABOUT US まわりのレイアウト
   ・トップの ABOUT US（未来の伝達社 アカメディア／ONE STEP AHEAD.／MORE DETAILS）と
     ABOUT US ページのビジョンは、左右の余白が0になる指定があり、
     画面幅 約768〜1100px で文字が画面の左端に接していた → 左右の余白を確保
   ・トップの ABOUT US：文字が左端に寄り、ロゴとの間が大きく空いていた
     → 文字とロゴをひとまとまりにして中央に配置。縦並び（幅820px以下）では文字も中央揃え
   ===================================================================== */
.container.about-teaser,
.container.about-vision { padding-left: 24px !important; padding-right: 24px !important; }
@media (max-width: 600px) {
  .container.about-teaser,
.container.about-vision { padding-left: 18px !important; padding-right: 18px !important; }
}
@media (min-width: 821px) {
.about-teaser .split { justify-content: center; gap: clamp(40px, 5vw, 96px) !important; }
.about-teaser .split-text { flex: 0 0 auto !important; }
.about-teaser .catch { white-space: nowrap; }
.about-teaser .split-visual { flex: 0 0 auto !important; width: clamp(220px, 22vw, 360px); }
.about-teaser .split-visual > * { max-width: 100%; }
}
@media (max-width: 820px) {
.about-teaser .split-text { text-align: center; width: 100%; }
.about-teaser .split-text .btn-more { margin-left: auto; margin-right: auto; }
  .about-teaser .catch,
.about-teaser .vision-pre { margin-left: auto !important; margin-right: auto !important; text-align: center; }
.about-teaser .split { align-items: center; }
}
html[dir="rtl"] .about-teaser .split-text { text-align: right; }
@media (max-width: 820px) {
html[dir="rtl"] .about-teaser .split-text { text-align: center; }
}
/* 会社概要の表：幅の狭いスマホ（320px程度）で長い単語・URLが表からはみ出さないように */
.company-table { width: 100%; max-width: 100%; }
.company-table th,
.company-table td { overflow-wrap: anywhere; }
@media (max-width: 360px) {
.company-table { table-layout: fixed; }
}
/* =====================================================================
   v128 — サービスページのカードの並びを全部門で統一 ＋ PCのヘッダー下の隠れ
   ・PR・マーケティング／クリエイティブ部門（左詰め・間隔26px）と、デジタル／メディア部門
     （列幅いっぱいの格子・中央寄せ）で並び方が違い、デジタル・メディアが右にずれて見えていた
     → 全部門とも「説明文の左端にそろえて左詰め、カード幅340px、間隔26px」に統一
   ・スマホ（幅600px以下）：全部門ともカードを画面幅いっぱい（最大420px）で左端にそろえる
   ・PC：固定ヘッダー（高さ約110px）の下にトップ画像やページ上部が18pxほど隠れていた
     → スマホと同じくヘッダーの実寸ぶん下げる
   ===================================================================== */
:root { --header-h: 110px; }
#page-services .svc-grid,
#page-services .product-cards.static {
  display: flex !important; flex-wrap: wrap !important; gap: 26px !important;
  justify-content: flex-start !important; align-items: stretch !important;
  grid-template-columns: none !important;
}
#page-services .svc-grid > .product-card,
#page-services .product-cards.static > .product-card {
  flex: 0 0 auto !important; width: 340px !important; max-width: 100% !important; margin: 0 !important;
}
@media (max-width: 600px) {
  #page-services .svc-grid,
#page-services .product-cards.static { gap: 20px !important; }
  #page-services .svc-grid > .product-card,
#page-services .product-cards.static > .product-card { width: 100% !important; max-width: 420px !important; }
}
/* v129 — ページ内リンクの移動先（各部門・ABOUT USの各項目）はヘッダーの下に少し余白をとって表示 */
[id^="svc-"],
[id^="sec-"] { scroll-margin-top: 12px; }
/* =====================================================================
   v130 — ABOUT US「メディア掲載実績」のロゴスライド
   ・従来は2本の横長画像（上段・下段で縮尺が異なる）を同じ高さで並べていたため、
     下段のロゴが小さく、ロゴごとの大きさもばらばらだった
   ・ロゴを1つずつ切り出し、同じ大きさの枠（3:1）に見た目の大きさをそろえて配置
   ・PC・タブレット・スマホとも、全ロゴを同じ枠サイズで表示
   ===================================================================== */
.media-marquee .mq-media { display: flex !important; align-items: center; flex: 0 0 auto; margin: 0 !important; border: 0 !important; }
.media-marquee .mq-media img.mlogo { display: block; height: 60px !important; width: 180px !important; max-width: none !important; margin: 0 8px; object-fit: contain; }
.media-marquee .marquee + .marquee { margin-top: 10px; }
@media (max-width: 820px) {
.media-marquee .mq-media img.mlogo { height: 52px !important; width: 156px !important; margin: 0 6px; }
}
@media (max-width: 600px) {
.media-marquee .mq-media img.mlogo { height: 44px !important; width: 132px !important; margin: 0 4px; }
.media-marquee .marquee + .marquee { margin-top: 6px; }
}
.media-marquee .marquee-track { animation-duration: 40s !important; }
@media (max-width: 600px) {
.media-marquee .marquee-track { animation-duration: 32s !important; }
}
/* =====================================================================
   v131 — ABOUT US「ビジョン」の説明文が他の本文より大きかった（全画面幅で17px）のを調整
   ・PC／タブレット：16px（CIの説明文と同じ）
   ・スマホ（幅600px以下）：15px（サービスの本文と同じ）、行間も少し詰める
   ===================================================================== */
#page-about .about-vision .lead { font-size: 16px !important; line-height: 2 !important; }
@media (max-width: 600px) {
#page-about .about-vision .lead { font-size: 15px !important; line-height: 1.95 !important; letter-spacing: .05em !important; }
}
/* v131 — スマホ（幅600px以下）：トップの ABOUT US と ABOUT US ページのビジョンで、
   上下の余白が0になり「MORE DETAILS」ボタンや本文が模様の背景の下端に接していたのを修正 */
@media (max-width: 600px) {
.container.about-teaser { padding-top: 36px !important; padding-bottom: 56px !important; }
.container.about-vision { padding-top: 40px !important; padding-bottom: 56px !important; }
}
/* =====================================================================
   v134 — トップ「取引実績」
   ・灰色の帯（v132/v133）をやめ、見出し「取引実績」のみに戻す
   ・アカメディアのテントウムシのロゴを小さく、見出しの左側に（アラビア語は文頭側＝右）
   ・見出し下の「Our clients」は表示しない
   ===================================================================== */
#page-home .clients-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 26px;
}
#page-home .clients-head .ladybug { width: 20px; height: auto; margin: 0; flex: 0 0 auto; }
#page-home .clients-head .clients-title { margin: 0; line-height: 1.3; }
@media (max-width: 640px) {
#page-home .clients-head { gap: 8px; margin-bottom: 20px; }
#page-home .clients-head .ladybug { width: 17px; }
}
/* =====================================================================
   v135 — 最終チェック：文字の折り返し
   ・本文の最終行に1〜2文字だけ残る改行（「す。」「せ」など）を避ける
   ・日本語の短い文（ニュースの見出し・沿革・表・キャプション・住所など）は語句の区切りで改行
   ・アラビア語：英字の括弧書き（例：(Media Network)）を途中で割らない
   ・スマホ：フッターの「PR・マーケティング部門」が「部門」だけ次の行に落ちないように
   ===================================================================== */
main p,
main li,
main td,
main th,
main dd,
main figcaption,
.na-item,
.history-text,
.access-addr,
footer p { text-wrap: pretty; }
body.lang-ja :is(.na-item,
.history-text,
.company-table th,
figcaption,
.access-addr,
.pc-body p,
.svc-products p,
.form-done .done-msg p) { word-break: auto-phrase; }
bdi.nw { white-space: nowrap; unicode-bidi: isolate; }
@media (max-width: 420px) {
body.lang-ja .footer-col a:not(.footer-head) { font-size: 13px !important; letter-spacing: .04em !important; }
}
bdi.bd { unicode-bidi: isolate; display: inline-block; text-align: right; }
/* 会社概要の表：スマホで項目名が単語の途中で折り返していた（Represe/ntative、고문변호/사 など）のを修正 */
@media (max-width: 640px) {
  body:is(.lang-en,
  .lang-ko,
.lang-ar) .company-table th { overflow-wrap: normal !important; word-break: keep-all; }
body.lang-en .company-table th { width: 9.4em !important; }
body.lang-ko .company-table th { width: 7.4em !important; }
}
/* 日本語の語句単位の改行：語句が1行に収まらない狭い画面では途中で折り返す */
body.lang-ja :is(.na-item,
.history-text,
.company-table th,
figcaption,
.access-addr,
.pc-body p,
.svc-products p,
.form-done .done-msg p) { overflow-wrap: anywhere; }
.nb-tail { white-space: nowrap; }
/* 会社概要の表：幅601〜640pxで項目名（本社所在地など）が1文字だけ次の行に落ちていたのを修正 */
@media (min-width: 601px) and (max-width: 640px) {
.company-table th { width: 30% !important; }
}
/* スマホ：フッターの「PR・マーケティング部門」が「門」「部門」だけ次の行に落ちないように（日本語） */
@media (min-width: 341px) and (max-width: 820px) {
body.lang-ja .footer-col a:not(.footer-head) { white-space: nowrap; letter-spacing: .04em !important; }
}
@media (max-width: 340px) {
body.lang-ja .footer-col a:not(.footer-head) { word-break: auto-phrase; letter-spacing: .04em !important; }
}
body.lang-ja :is(main li,
.doc-lead) { word-break: auto-phrase; overflow-wrap: anywhere; }